Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MultiTool | Premium All-in-One Web Utility Platform</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Custom CSS for enhancements */ | |
| :root { | |
| --primary: #3b82f6; | |
| --primary-hover: #2563eb; | |
| --secondary: #10b981; | |
| --accent: #6366f1; | |
| --dark: #1e293b; | |
| --light: #f8fafc; | |
| } | |
| body { | |
| font-family: 'Inter', system-ui, -apple-system, sans-serif; | |
| background-color: #f8fafc; | |
| color: #1e293b; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); | |
| } | |
| .tool-card { | |
| transition: all 0.3s ease; | |
| transform: translateY(0); | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); | |
| } | |
| .tool-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .tab-active { | |
| border-bottom: 3px solid var(--primary); | |
| color: var(--primary); | |
| font-weight: 600; | |
| } | |
| .text-output { | |
| min-height: 200px; | |
| background-color: #f1f5f9; | |
| border-radius: 0.375rem; | |
| } | |
| .color-preview { | |
| width: 100%; | |
| height: 40px; | |
| border-radius: 0.375rem; | |
| } | |
| /* Animation for tool switching */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.3s ease-out forwards; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #cbd5e1; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #94a3b8; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="gradient-bg border-b border-gray-200"> | |
| <div class="container mx-auto px-4 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 rounded-md bg-blue-500 flex items-center justify-center"> | |
| <i class="fas fa-tools text-white text-xl"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold text-blue-600">MultiTool</h1> | |
| </div> | |
| <nav class="hidden md:flex items-center space-x-6"> | |
| <a href="#" class="font-medium text-gray-700 hover:text-blue-600 transition">Tools</a> | |
| <a href="#" class="font-medium text-gray-700 hover:text-blue-600 transition">Premium</a> | |
| <a href="#" class="font-medium text-gray-700 hover:text-blue-600 transition">Blog</a> | |
| <a href="#" class="font-medium text-gray-700 hover:text-blue-600 transition">About</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <button class="hidden md:block px-4 py-2 text-blue-600 font-medium rounded-md hover:bg-blue-50 transition"> | |
| Log In | |
| </button> | |
| <button class="px-4 py-2 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 transition shadow-sm"> | |
| Get Premium | |
| </button> | |
| <button class="md:hidden text-gray-700"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg py-16"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Supercharge Your Productivity</h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto mb-8"> | |
| All the essential web tools you need, beautifully designed and optimized for maximum efficiency. | |
| </p> | |
| <div class="max-w-md mx-auto relative"> | |
| <input type="text" placeholder="Search for tools..." | |
| class="w-full px-6 py-4 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm"> | |
| <button class="absolute right-2 top-2 bg-blue-600 text-white p-2 rounded-full hover:bg-blue-700 transition"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| <div class="mt-8 flex flex-wrap justify-center gap-3 max-w-2xl mx-auto"> | |
| <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">PDF Tools</span> | |
| <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">Image Processing</span> | |
| <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm">Text Tools</span> | |
| <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm">Data Converters</span> | |
| <span class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm">Security</span> | |
| <span class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">Developers</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Main Content --> | |
| <main class="flex-grow container mx-auto px-4 py-12"> | |
| <!-- Tool Selector Tabs --> | |
| <div class="mb-8 border-b border-gray-200"> | |
| <div class="flex space-x-8 overflow-x-auto pb-2 scrollbar-hidden"> | |
| <button onclick="switchTool('pdf')" class="tab-button px-1 py-4 font-medium text-gray-500 hover:text-blue-600 whitespace-nowrap transition flex items-center"> | |
| <i class="far fa-file-pdf mr-2"></i> PDF Tools | |
| </button> | |
| <button onclick="switchTool('image')" class="tab-button px-1 py-4 font-medium text-gray-500 hover:text-blue-600 whitespace-nowrap transition flex items-center"> | |
| <i class="far fa-image mr-2"></i> Image Tools | |
| </button> | |
| <button onclick="switchTool('text')" class="tab-button px-1 py-4 font-medium text-gray-500 hover:text-blue-600 whitespace-nowrap transition flex items-center active"> | |
| <i class="far fa-file-alt mr-2"></i> Text Tools | |
| </button> | |
| <button onclick="switchTool('data')" class="tab-button px-1 py-4 font-medium text-gray-500 hover:text-blue-600 whitespace-nowrap transition flex items-center"> | |
| <i class="fas fa-database mr-2"></i> Data Converters | |
| </button> | |
| <button onclick="switchTool('security')" class="tab-button px-1 py-4 font-medium text-gray-500 hover:text-blue-600 whitespace-nowrap transition flex items-center"> | |
| <i class="fas fa-lock mr-2"></i> Security | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Tool Content --> | |
| <div id="tool-content" class="fade-in"> | |
| <!-- Text Tools (Default) --> | |
| <div id="text-tool" class="tool-section"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12"> | |
| <!-- Text Case Converter --> | |
| <div class="tool-card bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Text Case Converter</h3> | |
| <button class="text-blue-500 hover:text-blue-700"> | |
| <i class="far fa-copy"></i> | |
| </button> | |
| </div> | |
| <textarea class="w-full p-3 border border-gray-300 rounded-md mb-4 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Enter your text here..." rows="3"></textarea> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-md text-sm hover:bg-blue-200">UPPERCASE</button> | |
| <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-md text-sm hover:bg-blue-200">lowercase</button> | |
| <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-md text-sm hover:bg-blue-200">Title Case</button> | |
| <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-md text-sm hover:bg-blue-200">Sentence case</button> | |
| <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-md text-sm hover:bg-blue-200">camelCase</button> | |
| <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-md text-sm hover:bg-blue-200">PascalCase</button> | |
| </div> | |
| </div> | |
| <!-- Character Counter --> | |
| <div class="tool-card bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Character & Word Counter</h3> | |
| <button class="text-blue-500 hover:text-blue-700"> | |
| <i class="far fa-copy"></i> | |
| </button> | |
| </div> | |
| <textarea class="w-full p-3 border border-gray-300 rounded-md mb-4 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Type or paste your text here..." rows="3"></textarea> | |
| <div class="grid grid-cols-3 gap-4 text-center"> | |
| <div class="bg-gray-50 p-3 rounded-md"> | |
| <div class="text-2xl font-bold text-blue-600" id="char-count">0</div> | |
| <div class="text-sm text-gray-500">Characters</div> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-md"> | |
| <div class="text-2xl font-bold text-blue-600" id="word-count">0</div> | |
| <div class="text-sm text-gray-500">Words</div> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-md"> | |
| <div class="text-2xl font-bold text-blue-600" id="line-count">0</div> | |
| <div class="text-sm text-gray-500">Lines</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Lorem Ipsum Generator --> | |
| <div class="tool-card bg-white rounded-xl shadow-sm p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Lorem Ipsum Generator</h3> | |
| <div class="grid grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Paragraphs</label> | |
| <input type="number" min="1" max="20" value="3" class="w-full p-2 border border-gray-300 rounded-md"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Sentences per paragraph</label> | |
| <input type="number" min="1" max="20" value="5" class="w-full p-2 border border-gray-300 rounded-md"> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"> | |
| <span class="ml-2 text-sm text-gray-700">Start with "Lorem ipsum dolor sit amet..."</span> | |
| </label> | |
| </div> | |
| <button class="w-full py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">Generate Text</button> | |
| </div> | |
| <!-- Text Diff Checker --> | |
| <div class="tool-card bg-white rounded-xl shadow-sm p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">Text Diff Checker</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Original Text</label> | |
| <textarea class="w-full p-2 border border-gray-300 rounded-md text-sm" rows="2"></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Changed Text</label> | |
| <textarea class="w-full p-2 border border-gray-300 rounded-md text-sm" rows="2"></textarea> | |
| </div> | |
| </div> | |
| <button class="py-2 px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">Find Differences</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- PDF Tools (Hidden by default) --> | |
| <div id="pdf-tool" class="tool-section hidden"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- PDF to Word --> | |
| <div class="tool-card bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-lg bg-red-100 flex items-center justify-center mr-4"> | |
| <i class="far fa-file-word text-red-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800">PDF to Word Converter</h3> | |
| </div> | |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center mb-4"> | |
| <i class="far fa-file-pdf text-4xl text-red-500 mb-3"></i> | |
| <p class="text-gray-600 mb-3">Drag & drop your PDF file here</p> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"> | |
| <i class="fas fa-plus mr-2"></i> Select File | |
| </button> | |
| <p class="text-xs text-gray-500 mt-3">Up to 50MB • PDF only</p> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-xs text-gray-500">Premium users: Unlimited file size</p> | |
| </div> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Convert to Word | |
| </button> | |
| </div> | |
| </div> | |
| <!-- PDF Merge --> | |
| <div class="tool-card bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-file-archive text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800">PDF Merger</h3> | |
| </div> | |
| <div class="space-y-3 mb-4"> | |
| <div class="border border-gray-300 rounded-md p-3 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i class="far fa-file-pdf text-red-500 mr-3"></i> | |
| <span class="text-sm">document1.pdf</span> | |
| </div> | |
| <button class="text-red-500 hover:text-red-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="border border-gray-300 rounded-md p-3 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i class="far fa-file-pdf text-red-500 mr-3"></i> | |
| <span class="text-sm">report2023.pdf</span> | |
| </div> | |
| <button class="text-red-500 hover:text-red-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="border-2 border-dashed border-gray-300 rounded-md p-3 text-center cursor-pointer hover:bg-gray-50"> | |
| <i class="fas fa-plus text-gray-400 mr-2"></i> | |
| <span class="text-sm text-gray-600">Add more files</span> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Merge order</label> | |
| <div class="flex items-center space-x-3"> | |
| <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-md text-sm hover:bg-blue-200"> | |
| <i class="fas fa-sort-alpha-down mr-1"></i> Alphabetical | |
| </button> | |
| <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-md text-sm hover:bg-blue-200"> | |
| <i class="fas fa-sort-numeric-down mr-1"></i> Numeric | |
| </button> | |
| <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-md text-sm hover:bg-blue-200"> | |
| <i class="fas fa-sort-amount-down mr-1"></i> Custom | |
| </button> | |
| </div> | |
| </div> | |
| <button class="w-full py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition flex items-center justify-center"> | |
| <i class="fas fa-file-export mr-2"></i> Merge PDFs | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Image Tools (Hidden by default) --> | |
| <div id="image-tool" class="tool-section hidden"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Image Compressor --> | |
| <div class="tool-card bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-compress-alt text-purple-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800">Image Compressor</h3> | |
| </div> | |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center mb-4"> | |
| <i class="far fa-image text-4xl text-purple-500 mb-3"></i> | |
| <p class="text-gray-600 mb-3">Drag & drop your image here</p> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"> | |
| <i class="fas fa-plus mr-2"></i> Select Image | |
| </button> | |
| <p class="text-xs text-gray-500 mt-3">JPG, PNG, WEBP • Up to 20MB</p> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Compression Quality: <span id="quality-value">70</span>%</label> | |
| <input type="range" min="10" max="95" value="70" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" id="quality-slider"> | |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> | |
| <span>Smaller file</span> | |
| <span>Better quality</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="text-sm"> | |
| <span class="text-gray-500">Estimated size: </span> | |
| <span class="font-medium">~1.2MB</span> | |
| <span class="text-gray-500 ml-2">(50% reduction)</span> | |
| </div> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition flex items-center"> | |
| <i class="fas fa-compress-alt mr-2"></i> Compress Image | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Image Converter --> | |
| <div class="tool-card bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-exchange-alt text-green-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800">Image Format Converter</h3> | |
| </div> | |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center mb-4"> | |
| <i class="far fa-image text-4xl text-green-500 mb-3"></i> | |
| <p class="text-gray-600 mb-3">Drag & drop your image here</p> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"> | |
| <i class="fas fa-plus mr-2"></i> Select Image | |
| </button> | |
| <p class="text-xs text-gray-500 mt-3">JPG, PNG, GIF, WEBP • Up to 20MB</p> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Convert to:</label> | |
| <div class="grid grid-cols-4 gap-2"> | |
| <button class="py-2 px-1 border border-gray-300 rounded-md text-xs font-medium hover:bg-gray-50 focus:border-blue-500 focus:ring-1 focus:ring-blue-500">JPG</button> | |
| <button class="py-2 px-1 border border-blue-500 bg-blue-50 text-blue-700 rounded-md text-xs font-medium">PNG</button> | |
| <button class="py-2 px-1 border border-gray-300 rounded-md text-xs font-medium hover:bg-gray-50 focus:border-blue-500 focus:ring-1 focus:ring-blue-500">WEBP</button> | |
| <button class="py-2 px-1 border border-gray-300 rounded-md text-xs font-medium hover:bg-gray-50 focus:border-blue-500 focus:ring-1 focus:ring-blue-500">GIF</button> | |
| </div> | |
| </div> | |
| <button class="w-full py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition flex items-center justify-center"> | |
| <i class="fas fa-exchange-alt mr-2"></i> Convert Image | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Data Tools (Hidden by default) --> | |
| <div id="data-tool" class="tool-section hidden"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- JSON to CSV --> | |
| <div class="tool-card bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-lg bg-yellow-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-code text-yellow-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800">JSON to CSV Converter</h3> | |
| </div> | |
| <textarea class="w-full p-3 border border-gray-300 rounded-md mb-4 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder='Paste your JSON here (e.g. [{"name":"John","age":30},{"name":"Jane","age":25}])' rows="5"></textarea> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="text-sm text-gray-500"> | |
| <i class="fas fa-info-circle mr-1"></i> Supports nested JSON with flattening | |
| </div> | |
| <div> | |
| <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-md text-sm hover:bg-blue-200"> | |
| <i class="fas fa-random mr-1"></i> Sample Data | |
| </button> | |
| </div> | |
| </div> | |
| <button class="w-full py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"> | |
| Convert to CSV | |
| </button> | |
| </div> | |
| <!-- Base64 Encoder/Decoder --> | |
| <div class="tool-card bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-lg bg-indigo-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-key text-indigo-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800">Base64 Encoder/Decoder</h3> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Input</label> | |
| <textarea class="w-full p-3 border border-gray-300 rounded-md font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Enter text to encode/decode" rows="3"></textarea> | |
| </div> | |
| <div class="flex items-center justify-center mb-4"> | |
| <button class="p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition"> | |
| <i class="fas fa-arrow-down text-gray-600"></i> | |
| <i class="fas fa-arrow-up text-gray-600 mt-1"></i> | |
| </button> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Output</label> | |
| <textarea class="w-full p-3 border border-gray-300 rounded-md font-mono text-sm bg-gray-50" rows="3" readonly></textarea> | |
| </div> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button class="py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"> | |
| <i class="fas fa-lock mr-2"></i> Encode | |
| </button> | |
| <button class="py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition"> | |
| <i class="fas fa-lock-open mr-2"></i> Decode | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Security Tools (Hidden by default) --> | |
| <div id="security-tool" class="tool-section hidden"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Password Generator --> | |
| <div class="tool-card bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-lg bg-amber-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-key text-amber-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800">Password Generator</h3> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex items-center justify-between bg-gray-50 p-3 rounded-md mb-3"> | |
| <span id="generated-password" class="font-mono">Tq7$kL9@pXv2</span> | |
| <button class="text-blue-500 hover:text-blue-700"> | |
| <i class="far fa-copy"></i> | |
| </button> | |
| </div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm font-medium text-gray-700">Strength:</span> | |
| <div class="flex items-center"> | |
| <span class="text-sm font-medium text-green-600 mr-1">Strong</span> | |
| <div class="flex"> | |
| <div class="w-3 h-1 bg-green-500 mx-px rounded-full"></div> | |
| <div class="w-3 h-1 bg-green-500 mx-px rounded-full"></div> | |
| <div class="w-3 h-1 bg-green-500 mx-px rounded-full"></div> | |
| <div class="w-3 h-1 bg-green-500 mx-px rounded-full"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <input type="range" min="8" max="32" value="16" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" id="length-slider"> | |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> | |
| <span>8</span> | |
| <span>12</span> | |
| <span>16</span> | |
| <span>20</span> | |
| <span>24</span> | |
| <span>28</span> | |
| <span>32</span> | |
| </div> | |
| </div> | |
| <div class="space-y-2 mb-4"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" checked class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"> | |
| <span class="ml-2 text-sm text-gray-700">Uppercase Letters (A-Z)</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" checked class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"> | |
| <span class="ml-2 text-sm text-gray-700">Lowercase Letters (a-z)</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" checked class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"> | |
| <span class="ml-2 text-sm text-gray-700">Numbers (0-9)</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" checked class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"> | |
| <span class="ml-2 text-sm text-gray-700">Special Characters (!@#$%)</span> | |
| </label> | |
| </div> | |
| <button class="w-full py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"> | |
| <i class="fas fa-redo mr-2"></i> Generate New Password | |
| </button> | |
| </div> | |
| <!-- Password Strength Checker --> | |
| <div class="tool-card bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-lg bg-red-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-shield-alt text-red-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800">Password Strength Checker</h3> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Enter password to check</label> | |
| <input type="password" class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Your password..."> | |
| </div> | |
| <div class="space-y-4 mb-4"> | |
| <div> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Length</span> | |
| <span class="text-xs font-medium text-gray-500">0/12</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1"> | |
| <div class="bg-red-500 h-1 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Complexity</span> | |
| <span class="text-xs font-medium text-gray-500">0/4</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1"> | |
| <div class="bg-red-500 h-1 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Uniqueness</span> | |
| <span class="text-xs font-medium text-gray-500">Common</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1"> | |
| <div class="bg-red-500 h-1 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-red-50 border border-red-200 rounded-md p-3 text-sm text-red-600 mb-4"> | |
| <i class="fas fa-exclamation-circle mr-1"></i> This password is very weak and can be cracked instantly. | |
| </div> | |
| <button class="w-full py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"> | |
| Check Strength | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Premium CTA --> | |
| <div class="mt-16 bg-gradient-to-r from-blue-500 to-blue-600 rounded-xl p-8 text-white"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-2/3 mb-6 md:mb-0"> | |
| <h3 class="text-2xl font-bold mb-2">Upgrade to MultiTool Premium</h3> | |
| <p class="mb-4">Unlock all tools with no file size limits, batch processing, and an ad-free experience.</p> | |
| <ul class="space-y-2 mb-4"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle mr-2"></i> | |
| <span>No advertisements</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle mr-2"></i> | |
| <span>Unlimited file sizes</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle mr-2"></i> | |
| <span>Batch process multiple files</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle mr-2"></i> | |
| <span>Priority cloud processing</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="md:w-1/3"> | |
| <div class="bg-white rounded-lg p-4 text-gray-800 shadow-lg"> | |
| <div class="text-center"> | |
| <span class="text-xl font-bold">$9</span> | |
| <span class="text-gray-500">/month</span> | |
| </div> | |
| <p class="text-sm text-gray-600 text-center mb-4">or $90/year (save 20%)</p> | |
| <button class="w-full py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition shadow-md"> | |
| Get Premium Now | |
| </button> | |
| <p class="text-xs text-gray-500 text-center mt-2">7-day money back guarantee</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- More Tools Grid --> | |
| <div class="mt-16"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-8">More Useful Tools</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <a href="#" class="tool-card bg-white rounded-xl shadow-sm p-6 hover:bg-gray-50 transition"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 rounded-md bg-blue-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-globe text-blue-600"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800">URL Shortener</h3> | |
| </div> | |
| <p class="text-sm text-gray-600">Create short, memorable links for sharing anywhere.</p> | |
| </a> | |
| <a href="#" class="tool-card bg-white rounded-xl shadow-sm p-6 hover:bg-gray-50 transition"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 rounded-md bg-purple-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-qrcode text-purple-600"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800">QR Code Generator</h3> | |
| </div> | |
| <p class="text-sm text-gray-600">Generate QR codes for URLs, text, contact info and more.</p> | |
| </a> | |
| <a href="#" class="tool-card bg-white rounded-xl shadow-sm p-6 hover:bg-gray-50 transition"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 rounded-md bg-green-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-palette text-green-600"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800">Color Picker</h3> | |
| </div> | |
| <p class="text-sm text-gray-600">Get color codes, generate palettes, and check contrast.</p> | |
| </a> | |
| <a href="#" class="tool-card bg-white rounded-xl shadow-sm p-6 hover:bg-gray-50 transition"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 rounded-md bg-yellow-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-calendar-alt text-yellow-600"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800">Date Calculator</h3> | |
| </div> | |
| <p class="text-sm text-gray-600">Calculate time differences, add/subtract days, and more.</p> | |
| </a> | |
| <a href="#" class="tool-card bg-white rounded-xl shadow-sm p-6 hover:bg-gray-50 transition"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 rounded-md bg-indigo-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-code text-indigo-600"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800">Code Formatter</h3> | |
| </div> | |
| <p class="text-sm text-gray-600">Beautify/minify HTML, CSS, and JavaScript code.</p> | |
| </a> | |
| <a href="#" class="tool-card bg-white rounded-xl shadow-sm p-6 hover:bg-gray-50 transition"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 rounded-md bg-pink-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-ruler-combined text-pink-600"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800">Unit Converter</h3> | |
| </div> | |
| <p class="text-sm text-gray-600">Convert between different units of measurement.</p> | |
| </a> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <button class="px-6 py-3 border border-gray-300 rounded-lg text-blue-600 font-medium hover:bg-gray-50 transition"> | |
| View All 100+ Tools | |
| </button> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-50 border-t border-gray-200 mt-16"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h4 class="text-lg font-semibold text-gray-800 mb-4">MultiTool</h4> | |
| <p class="text-gray-600 mb-4">Your all-in-one solution for daily web tools. Boosting productivity one click at a time.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fab fa-facebook"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold text-gray-800 mb-4">Tools</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">PDF Tools</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">Image Tools</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">Text Tools</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">Security Tools</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">Developer Tools</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold text-gray-800 mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">About Us</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">Careers</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">Press</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">Blog</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold text-gray-800 mb-4">Legal</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">Terms of Service</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">Cookie Policy</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">GDPR</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">DMCA</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="pt-6 border-t border-gray-200 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 MultiTool. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-500 hover:text-gray-700 text-sm">Status</a> | |
| <a href="#" class="text-gray-500 hover:text-gray-700 text-sm">Sitemap</a> | |
| <a href="#" class="text-gray-500 hover:text-gray-700 text-sm">Support</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Tool switching functionality | |
| function switchTool(toolName) { | |
| // Hide all tool sections | |
| document.querySelectorAll('.tool-section').forEach(section => { | |
| section.classList.add('hidden'); | |
| }); | |
| // Show selected tool section | |
| document.getElementById(`${toolName}-tool`).classList.remove('hidden'); | |
| // Update active tab | |
| document.querySelectorAll('.tab-button').forEach(button => { | |
| button.classList.remove('tab-active'); | |
| }); | |
| // Find clicked button and add active class | |
| const buttons = document.querySelectorAll('.tab-button'); | |
| for (let i = 0; i < buttons.length; i++) { | |
| if (buttons[i].textContent.includes(toolName.charAt(0).toUpperCase() + toolName.slice(1)) || | |
| (toolName === 'pdf' && buttons[i].textContent.includes('PDF'))) { | |
| buttons[i].classList.add('tab-active'); | |
| break; | |
| } | |
| } | |
| // Add fade-in animation | |
| document.getElementById(`${toolName}-tool`).classList.add('fade-in'); | |
| setTimeout(() => { | |
| document.getElementById(`${toolName}-tool`).classList.remove('fade-in'); | |
| }, 300); | |
| } | |
| // Set text tool as active by default | |
| document.addEventListener('DOMContentLoaded', function() { | |
| document.querySelector('.tab-button:nth-child(3)').classList.add('tab-active'); | |
| // Character counter functionality | |
| const textarea = document.querySelector('#text-tool textarea'); | |
| if (textarea) { | |
| textarea.addEventListener('input', function() { | |
| const text = this.value; | |
| document.getElementById('char-count').textContent = text.length; | |
| document.getElementById('word-count').textContent = text.trim() === '' ? 0 : text.trim().split(/\s+/).length; | |
| document.getElementById('line-count').textContent = text === '' ? 0 : text.split('\n').length; | |
| }); | |
| } | |
| // Password generator length slider | |
| const lengthSlider = document.getElementById('length-slider'); | |
| if (lengthSlider) { | |
| lengthSlider.addEventListener('input', function() { | |
| document.getElementById('generated-password').textContent = generatePassword(this.value); | |
| }); | |
| } | |
| // Image quality slider | |
| const qualitySlider = document.getElementById('quality-slider'); | |
| if (qualitySlider) { | |
| qualitySlider.addEventListener('input', function() { | |
| document.getElementById('quality-value').textContent = this.value; | |
| }); | |
| } | |
| }); | |
| // Simple password generator for demo | |
| function generatePassword(length = 12) { | |
| const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()'; | |
| let password = ''; | |
| for (let i = 0; i < length; i++) { | |
| password += chars.charAt(Math.floor(Math.random() * chars.length)); | |
| } | |
| return password; | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=Ansumaninnovation/edgetools" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |