| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>InstaToolMate - Free All-in-One Utility Tools</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#3498db', |
| secondary: '#2980b9', |
| dark: '#2c3e50', |
| light: '#ecf0f1', |
| accent: '#9b59b6' |
| }, |
| animation: { |
| 'float': 'float 6s ease-in-out infinite', |
| 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite', |
| 'rotate-y': 'rotate-y 20s linear infinite' |
| }, |
| keyframes: { |
| float: { |
| '0%, 100%': { transform: 'translateY(0)' }, |
| '50%': { transform: 'translateY(-20px)' } |
| }, |
| 'rotate-y': { |
| '0%': { transform: 'rotateY(0deg)' }, |
| '100%': { transform: 'rotateY(360deg)' } |
| } |
| } |
| } |
| } |
| } |
| </script> |
| |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| background: linear-gradient(135deg, #f9fbfd, #e6f0fa, #d9e8ff); |
| color: #2c3e50; |
| min-height: 100vh; |
| } |
| |
| .tool-card { |
| transition: all 0.3s ease; |
| transform-style: preserve-3d; |
| transform: perspective(1000px) rotateX(0deg) rotateY(0deg); |
| box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3); |
| border-radius: 15px; |
| overflow: hidden; |
| } |
| |
| .tool-card:hover { |
| transform: perspective(1000px) rotateX(5deg) rotateY(5deg) translateY(-10px); |
| box-shadow: 0 25px 40px rgba(0, 0, 0, 0.4); |
| } |
| |
| .page-section { |
| transform: translateZ(20px); |
| } |
| |
| .input-3d { |
| box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.2); |
| transition: all 0.3s ease; |
| } |
| |
| .input-3d:focus { |
| box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(255, 255, 255, 0.1); |
| } |
| |
| .btn-3d { |
| transform: perspective(500px) translateZ(0); |
| transition: all 0.2s ease; |
| box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .btn-3d:before { |
| content: ''; |
| position: absolute; |
| top: -10px; |
| left: -10px; |
| right: -10px; |
| bottom: -10px; |
| background: linear-gradient(45deg, #3498db, #9b59b6, #3498db); |
| z-index: -1; |
| transform: scale(0.9); |
| filter: blur(10px); |
| opacity: 0; |
| transition: opacity 0.3s ease; |
| } |
| |
| .btn-3d:hover { |
| transform: perspective(500px) translateZ(10px); |
| box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4); |
| } |
| |
| .btn-3d:hover:before { |
| opacity: 0.6; |
| } |
| |
| .resume-preview { |
| transform: perspective(2000px) rotateY(5deg); |
| box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); |
| transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| } |
| |
| .invoice-paper { |
| position: relative; |
| transform: perspective(1000px) rotateY(-5deg); |
| box-shadow: -10px 15px 30px rgba(0, 0, 0, 0.2); |
| background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%); |
| } |
| |
| .invoice-paper:before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| width: 30px; |
| background: linear-gradient(to left, rgba(0,0,0,0.05) 0%, transparent 100%); |
| transform-origin: right; |
| transform: perspective(1000px) rotateY(-85deg); |
| } |
| |
| .qr-container { |
| transform-style: preserve-3d; |
| perspective: 1000px; |
| animation: float 6s ease-in-out infinite; |
| } |
| |
| .qr-container-inner { |
| transform: rotateX(10deg) rotateY(0deg); |
| transition: transform 0.5s ease; |
| } |
| |
| .qr-container:hover .qr-container-inner { |
| transform: rotateX(10deg) rotateY(20deg); |
| } |
| |
| .thumbnail-slider { |
| transform-style: preserve-3d; |
| perspective: 1000px; |
| } |
| |
| .thumbnail-item { |
| transform: perspective(1000px) rotateY(var(--rotate)) translateZ(var(--tz)) translateX(var(--tx)); |
| transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); |
| filter: brightness(var(--brightness)); |
| } |
| |
| .floating-element { |
| transform: translateZ(20px); |
| animation: float 8s ease-in-out infinite; |
| } |
| |
| .team-card { |
| transform: perspective(1000px) translateZ(20px); |
| transition: transform 0.3s ease; |
| } |
| |
| .team-card:hover { |
| transform: perspective(1000px) translateZ(40px) rotateZ(2deg); |
| } |
| </style> |
| </head> |
| <body> |
| |
| <header class="fixed top-0 w-full z-50 py-3 px-4 md:px-8 bg-dark/90 backdrop-blur-sm"> |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <div class="w-12 h-12 bg-gradient-to-r from-primary to-accent rounded-xl flex items-center justify-center transform rotate-12"> |
| <i class="fas fa-tools text-white text-xl"></i> |
| </div> |
| <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent">InstaToolMate</h1> |
| </div> |
| |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#home" class="nav-link hover:text-primary font-medium transition-colors">Home</a> |
| <a href="#tools" class="nav-link hover:text-primary font-medium transition-colors">Tools</a> |
| <a href="#blog" class="nav-link hover:text-primary font-medium transition-colors">Blog</a> |
| <a href="#about" class="nav-link hover:text-primary font-medium transition-colors">About</a> |
| <a href="#contact" class="nav-link hover:text-primary font-medium transition-colors">Contact</a> |
| </nav> |
| |
| <div class="flex items-center space-x-4"> |
| <button class="md:hidden text-white text-2xl"> |
| <i class="fas fa-bars"></i> |
| </button> |
| <button class="hidden md:block btn-3d bg-primary text-white py-2 px-6 rounded-lg font-semibold">Sign In</button> |
| </div> |
| </div> |
| </header> |
| |
| |
| <div class="fixed top-0 left-0 w-full h-full bg-dark/95 backdrop-blur-lg z-40 p-8 hidden" id="mobile-nav"> |
| <div class="flex justify-end mb-10"> |
| <button class="text-white text-3xl"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <div class="flex flex-col space-y-8 text-center"> |
| <a href="#home" class="nav-link text-2xl font-semibold hover:text-primary transition-colors">Home</a> |
| <a href="#tools" class="nav-link text-2xl font-semibold hover:text-primary transition-colors">Tools</a> |
| <a href="#blog" class="nav-link text-2xl font-semibold hover:text-primary transition-colors">Blog</a> |
| <a href="#about" class="nav-link text-2xl font-semibold hover:text-primary transition-colors">About</a> |
| <a href="#contact" class="nav-link text-2xl font-semibold hover:text-primary transition-colors">Contact</a> |
| <button class="btn-3d bg-primary text-white py-3 px-8 rounded-lg font-semibold mt-8">Sign In</button> |
| </div> |
| </div> |
| |
| |
| <main> |
| |
| <section id="home" class="min-h-screen pt-32 md:pt-24 pb-20 px-4"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center"> |
| <div class="text-center lg:text-left"> |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight"> |
| Powerful Free Tools for <br> |
| <span class="bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">Freelancers, Creators & Professionals</span> |
| </h1> |
| <p class="text-lg md:text-xl text-gray-300 mb-8 max-w-2xl"> |
| InstaToolMate offers a suite of essential free tools to help you work smarter and faster. Generate invoices, build resumes, create QR codes, download YouTube thumbnails and more — all in one place! |
| </p> |
| <a href="#tools" class="btn-3d inline-block bg-primary text-white text-lg font-semibold py-3 px-8 rounded-lg mt-4"> |
| Get Started <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| |
| <div class="flex justify-center items-center relative"> |
| <div class="floating-element absolute top-0 left-0 w-24 h-24 bg-gradient-to-r from-primary to-secondary rounded-full filter blur-2xl opacity-30"></div> |
| <div class="floating-element absolute bottom-10 right-0 w-32 h-32 bg-gradient-to-r from-accent to-purple-500 rounded-full filter blur-2xl opacity-30"></div> |
| |
| <div class="grid grid-cols-2 gap-6 relative"> |
| |
| <a href="/invoice" class="tool-card bg-gradient-to-br from-white/20 to-blue-100/20 backdrop-blur-sm p-6 rounded-2xl hover:shadow-xl hover:shadow-blue-100/20 transition-all duration-300"> |
| <div class="w-16 h-16 bg-gradient-to-r from-blue-400 to-blue-600 rounded-xl flex items-center justify-center mb-4"> |
| <i class="fas fa-file-invoice text-white text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2 text-blue-900">Invoice Generator</h3> |
| <p class="text-blue-700">Create professional invoices in seconds</p> |
| </a> |
| |
| <div class="tool-card bg-gradient-to-br from-[#3498db]/20 to-[#2c3e50]/20 backdrop-blur-sm p-6 rounded-2xl transform rotate-3"> |
| <div class="w-16 h-16 bg-gradient-to-r from-accent to-purple-600 rounded-xl flex items-center justify-center mb-4"> |
| <i class="fas fa-file-alt text-white text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Resume Builder</h3> |
| <p class="text-gray-300">Craft the perfect resume and cover letter</p> |
| </div> |
| |
| <div class="tool-card bg-gradient-to-br from-[#3498db]/20 to-[#2c3e50]/20 backdrop-blur-sm p-6 rounded-2xl transform -rotate-2"> |
| <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-teal-500 rounded-xl flex items-center justify-center mb-4"> |
| <i class="fas fa-qrcode text-white text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2">QR Generator</h3> |
| <p class="text-gray-300">Generate QR codes for any content</p> |
| </div> |
| |
| <div class="tool-card bg-gradient-to-br from-[#3498db]/20 to-[#2c3e50]/20 backdrop-blur-sm p-6 rounded-2xl transform rotate-6"> |
| <div class="w-16 h-16 bg-gradient-to-r from-red-500 to-orange-500 rounded-xl flex items-center justify-center mb-4"> |
| <i class="fab fa-youtube text-white text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Thumbnail Downloader</h3> |
| <p class="text-gray-300">Download YouTube thumbnails instantly</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="tools" class="py-20 px-4 bg-dark/80"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">All-in-One Free Utility Tools</h2> |
| <p class="text-lg text-gray-300 max-w-3xl mx-auto"> |
| InstaToolMate offers a comprehensive suite of tools designed to make your work easier and more efficient. All tools are free to use with no sign-up required. |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="tool-card bg-gradient-to-br from-[#2c3e50] to-[#1a2530] backdrop-blur-sm p-6 rounded-2xl"> |
| <div class="w-16 h-16 bg-gradient-to-r from-primary to-secondary rounded-xl flex items-center justify-center mb-4"> |
| <i class="fas fa-file-invoice text-white text-2xl"></i> |
| </div> |
| <h3 class="text-2xl font-bold mb-3">Invoice Generator</h3> |
| <p class="text-gray-300 mb-6">Create professional invoices for your clients with auto calculations for hours, rates, and taxes.</p> |
| <a href="#invoice" class="text-primary font-medium flex items-center"> |
| Use Tool <i class="fas fa-arrow-right ml-2 text-sm"></i> |
| </a> |
| </div> |
| |
| |
| <div class="tool-card bg-gradient-to-br from-[#2c3e50] to-[#1a2530] backdrop-blur-sm p-6 rounded-2xl"> |
| <div class="w-16 h-16 bg-gradient-to-r from-accent to-purple-600 rounded-xl flex items-center justify-center mb-4"> |
| <i class="fas fa-file-alt text-white text-2xl"></i> |
| </div> |
| <h3 class="text-2xl font-bold mb-3">Resume & Cover Letter Builder</h3> |
| <p class="text-gray-300 mb-6">Build polished resumes and compelling cover letters that stand out to employers.</p> |
| <a href="#resume" class="text-primary font-medium flex items-center"> |
| Use Tool <i class="fas fa-arrow-right ml-2 text-sm"></i> |
| </a> |
| </div> |
| |
| |
| <div class="tool-card bg-gradient-to-br from-[#2c3e50] to-[#1a2530] backdrop-blur-sm p-6 rounded-2xl"> |
| <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-teal-500 rounded-xl flex items-center justify-center mb-4"> |
| <i class="fas fa-qrcode text-white text-2xl"></i> |
| </div> |
| <h3 class="text-2xl font-bold mb-3">QR Code Generator</h3> |
| <p class="text-gray-300 mb-6">Generate QR codes for URLs, text, WiFi credentials, and more in various designs.</p> |
| <a href="#qr" class="text-primary font-medium flex items-center"> |
| Use Tool <i class="fas fa-arrow-right ml-2 text-sm"></i> |
| </a> |
| </div> |
| |
| |
| <div class="tool-card bg-gradient-to-br from-[#2c3e50] to-[#1a2530] backdrop-blur-sm p-6 rounded-2xl"> |
| <div class="w-16 h-16 bg-gradient-to-r from-red-500 to-orange-500 rounded-xl flex items-center justify-center mb-4"> |
| <i class="fab fa-youtube text-white text-2xl"></i> |
| </div> |
| <h3 class="text-2xl font-bold mb-3">YouTube Thumbnail Downloader</h3> |
| <p class="text-gray-300 mb-6">Download high-quality thumbnails from any YouTube video in multiple resolutions.</p> |
| <a href="#thumbnail" class="text-primary font-medium flex items-center"> |
| Use Tool <i class="fas fa-arrow-right ml-2 text-sm"></i> |
| </a> |
| </div> |
| |
| |
| <div class="tool-card bg-gradient-to-br from-[#2c3e50] to-[#1a2530] backdrop-blur-sm p-6 rounded-2xl"> |
| <div class="w-16 h-16 bg-gradient-to-r from-yellow-500 to-amber-500 rounded-xl flex items-center justify-center mb-4"> |
| <i class="fas fa-edit text-white text-2xl"></i> |
| </div> |
| <h3 class="text-2xl font-bold mb-3">Text Rewriter & Summarizer</h3> |
| <p class="text-gray-300 mb-6">Rewrite or summarize text with different tones (formal, casual, academic).</p> |
| <a href="#rewriter" class="text-primary font-medium flex items-center"> |
| Use Tool <i class="fas fa-arrow-right ml-2 text-sm"></i> |
| </a> |
| </div> |
| |
| |
| <div class="tool-card bg-gradient-to-br from-[#2c3e50] to-[#1a2530] backdrop-blur-sm p-6 rounded-2xl"> |
| <div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-indigo-600 rounded-xl flex items-center justify-center mb-4"> |
| <i class="fas fa-shield-alt text-white text-2xl"></i> |
| </div> |
| <h3 class="text-2xl font-bold mb-3">Privacy Policy Generator</h3> |
| <p class="text-gray-300 mb-6">Create customized privacy policies for websites, apps and businesses.</p> |
| <a href="#privacy" class="text-primary font-medium flex items-center"> |
| Use Tool <i class="fas fa-arrow-right ml-2 text-sm"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="invoice" class="py-20 px-4"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Invoice Generator</h2> |
| <p class="text-lg text-gray-300 max-w-3xl mx-auto"> |
| Create professional invoices in seconds with our free generator. Just fill in your details and download as PDF. |
| </p> |
| </div> |
| |
| <div class="bg-dark/80 backdrop-blur-lg rounded-3xl overflow-hidden shadow-2xl"> |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 p-6 md:p-8"> |
| |
| <div class="page-section p-6 bg-gradient-to-br from-[#1a2530]/90 to-[#0c131d]/90 rounded-xl"> |
| <div class="mb-8"> |
| <h3 class="text-xl font-bold mb-4 flex items-center"> |
| <i class="fas fa-address-card text-primary mr-3"></i> |
| Client Information |
| </h3> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div> |
| <label class="block text-gray-300 mb-2">Client Name</label> |
| <input type="text" class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-3 px-4 text-white"> |
| </div> |
| <div> |
| <label class="block text-gray-300 mb-2">Client Email</label> |
| <input type="email" class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-3 px-4 text-white"> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mb-8"> |
| <h3 class="text-xl font-bold mb-4 flex items-center"> |
| <i class="fas fa-receipt text-primary mr-3"></i> |
| Services |
| </h3> |
| |
| <div class="space-y-4" id="services-container"> |
| <div class="grid grid-cols-12 gap-3"> |
| <div class="col-span-5"> |
| <input type="text" placeholder="Description" class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-2 px-3 text-white"> |
| </div> |
| <div class="col-span-2"> |
| <input type="number" placeholder="Qty" value="1" min="1" class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-2 px-3 text-white"> |
| </div> |
| <div class="col-span-3"> |
| <input type="number" placeholder="Rate ($)" value="50" min="0" class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-2 px-3 text-white"> |
| </div> |
| <div class="col-span-2 flex items-center justify-center"> |
| <span class="font-semibold">$50.00</span> |
| </div> |
| </div> |
| </div> |
| |
| <button class="mt-3 text-primary flex items-center"> |
| <i class="fas fa-plus-circle mr-2"></i> Add another service |
| </button> |
| </div> |
| |
| <div class="mb-8"> |
| <h3 class="text-xl font-bold mb-4 flex items-center"> |
| <i class="fas fa-percentage text-primary mr-3"></i> |
| Taxes & Discounts |
| </h3> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div> |
| <label class="block text-gray-300 mb-2">Tax Rate (%)</label> |
| <input type="number" value="10" min="0" max="100" class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-3 px-4 text-white"> |
| </div> |
| <div> |
| <label class="block text-gray-300 mb-2">Discount ($)</label> |
| <input type="number" value="0" min="0" class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-3 px-4 text-white"> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex flex-wrap gap-3"> |
| <button class="btn-3d bg-primary text-white font-semibold py-3 px-6 rounded-lg flex-1 md:flex-none"> |
| Generate Invoice |
| </button> |
| <button class="btn-3d bg-accent text-white font-semibold py-3 px-6 rounded-lg flex-1 md:flex-none"> |
| Download PDF |
| </button> |
| <button class="btn-3d bg-gray-600 text-white font-semibold py-3 px-6 rounded-lg"> |
| Reset |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-center justify-center relative"> |
| <div class="invoice-paper bg-white p-8 rounded-xl w-full max-w-md"> |
| <div class="flex justify-between items-start mb-10"> |
| <div> |
| <h2 class="text-3xl font-bold text-gray-800">INVOICE</h2> |
| <p class="text-gray-600">#INV-2023-001</p> |
| </div> |
| <div class="text-right"> |
| <p class="text-gray-600">Date: <span class="text-gray-800">Aug 23, 2023</span></p> |
| <p class="text-gray-600">Due: <span class="text-gray-800">Sep 6, 2023</span></p> |
| </div> |
| </div> |
| |
| <div class="mb-8"> |
| <p class="text-gray-600 text-sm mb-1">BILL TO</p> |
| <h3 class="text-xl font-bold text-gray-800">John Smith</h3> |
| <p class="text-gray-600">john@example.com</p> |
| </div> |
| |
| <div class="border-t border-gray-300 pt-4 mb-4"> |
| <div class="grid grid-cols-5 gap-4 mb-3 font-semibold text-gray-700"> |
| <div class="col-span-3">Description</div> |
| <div class="text-center">Qty</div> |
| <div class="text-right">Amount</div> |
| </div> |
| |
| <div class="grid grid-cols-5 gap-4 py-2 border-b border-gray-100 text-gray-600"> |
| <div class="col-span-3">Web Design</div> |
| <div class="text-center">1</div> |
| <div class="text-right">$50.00</div> |
| </div> |
| |
| <div class="pt-6"> |
| <div class="flex justify-between py-2"> |
| <span class="text-gray-600">Subtotal</span> |
| <span class="text-gray-800 font-semibold">$50.00</span> |
| </div> |
| <div class="flex justify-between py-2"> |
| <span class="text-gray-600">Tax (10%)</span> |
| <span class="text-gray-800 font-semibold">$5.00</span> |
| </div> |
| <div class="flex justify-between py-2 border-t border-gray-300 text-lg"> |
| <span class="text-gray-800 font-bold">Total</span> |
| <span class="text-gray-800 font-bold">$55.00</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="py-20 px-4 max-w-7xl mx-auto"> |
| <div class="text-center mb-16"> |
| <h1 class="text-4xl font-bold text-blue-900 mb-4">YouTube Thumbnail Downloader</h1> |
| <p class="text-xl text-blue-700 max-w-3xl mx-auto">Download high-quality thumbnails from any YouTube video in multiple resolutions.</p> |
| </div> |
|
|
| <div class="bg-white/80 backdrop-blur-lg rounded-3xl shadow-2xl p-8 mb-16"> |
| <div class="mb-8"> |
| <label class="block text-blue-800 text-lg mb-4 font-medium">YouTube Video URL</label> |
| <div class="flex gap-3"> |
| <input type="url" placeholder="https://www.youtube.com/watch?v=..." |
| class="input-3d flex-1 bg-white border-2 border-blue-100 rounded-lg py-3 px-4 text-blue-900"> |
| <button class="btn-3d bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-6 rounded-lg transition-all"> |
| <i class="fab fa-youtube mr-2"></i> Get Thumbnails |
| </button> |
| </div> |
| </div> |
|
|
| <div id="thumbnails-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| |
| <div class="flex justify-center items-center p-6 border-2 border-dashed border-blue-200 rounded-xl"> |
| <p class="text-blue-400">Enter a YouTube URL above to view thumbnails</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white/80 backdrop-blur-lg rounded-2xl p-8"> |
| <h3 class="text-2xl font-bold mb-6 text-blue-900">How to Download YouTube Thumbnails</h3> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| <div class="bg-blue-50/50 p-6 rounded-lg border border-blue-100"> |
| <div class="bg-blue-500/10 text-blue-800 w-12 h-12 rounded-full flex items-center justify-center mb-4 mx-auto"> |
| <span class="text-xl font-bold">1</span> |
| </div> |
| <h4 class="font-semibold text-blue-900 mb-2 text-center">Copy YouTube URL</h4> |
| <p class="text-blue-700 text-center">Copy the URL of any YouTube video from your browser</p> |
| </div> |
| <div class="bg-blue-50/50 p-6 rounded-lg border border-blue-100"> |
| <div class="bg-blue-500/10 text-blue-800 w-12 h-12 rounded-full flex items-center justify-center mb-4 mx-auto"> |
| <span class="text-xl font-bold">2</span> |
| </div> |
| <h4 class="font-semibold text-blue-900 mb-2 text-center">Paste & Click</h4> |
| <p class="text-blue-700 text-center">Paste the URL and click the Get Thumbnails button</p> |
| </div> |
| <div class="bg-blue-50/50 p-6 rounded-lg border border-blue-100"> |
| <div class="bg-blue-500/10 text-blue-800 w-12 h-12 rounded-full flex items-center justify-center mb-4 mx-auto"> |
| <span class="text-xl font-bold">3</span> |
| </div> |
| <h4 class="font-semibold text-blue-900 mb-2 text-center">Download</h4> |
| <p class="text-blue-700 text-center">Click any thumbnail image to download the high-res version</p> |
| </div> |
| </div> |
| </div> |
| </section> |
| <div class="max-w-7xl mx-auto"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">QR Code Generator</h2> |
| <p class="text-lg text-gray-300 max-w-3xl mx-auto"> |
| Create QR codes for URLs, text, WiFi credentials and more. Download the PNG to use anywhere. |
| </p> |
| </div> |
| |
| <div class="bg-dark/80 backdrop-blur-lg rounded-3xl overflow-hidden shadow-2xl"> |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 p-6 md:p-8"> |
| |
| <div class="page-section p-6 bg-gradient-to-br from-[#1a2530]/90 to-[#0c131d]/90 rounded-xl"> |
| <div class="mb-8"> |
| <label class="block text-gray-300 mb-4">Enter URL or Text</label> |
| <input type="text" id="qr-input" placeholder="https://example.com" class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-3 px-4 text-white mb-4"> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> |
| <div> |
| <label class="block text-gray-300 mb-2">Color</label> |
| <select class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-3 px-4 text-white"> |
| <option value="#2c3e50">Dark Blue</option> |
| <option value="#3498db">Blue</option> |
| <option value="#e74c3c">Red</option> |
| <option value="#2ecc71">Green</option> |
| <option value="#9b59b6">Purple</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-gray-300 mb-2">Size</label> |
| <select class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-3 px-4 text-white"> |
| <option value="200">200px</option> |
| <option value="300">300px</option> |
| <option value="400">400px</option> |
| </select> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex flex-wrap gap-3"> |
| <button onclick="generateQR()" class="btn-3d bg-primary text-white font-semibold py-3 px-6 rounded-lg"> |
| Generate QR Code |
| </button> |
| <button id="download-btn" disabled class="btn-3d bg-accent text-white font-semibold py-3 px-6 rounded-lg" onclick="downloadQR()"> |
| Download PNG |
| </button> |
| <button class="btn-3d bg-gray-600 text-white font-semibold py-3 px-6 rounded-lg"> |
| Reset |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-center justify-center relative"> |
| <div class="qr-container flex flex-col items-center justify-center"> |
| <div id="qrcode" class="bg-white p-4 rounded-xl mb-6 flex items-center justify-center min-h-[200px] min-w-[200px]"> |
| <p class="text-gray-500">QR Code will appear here</p> |
| </div> |
| <p class="text-gray-400 max-w-xs text-center">Scan this QR code with any smartphone camera or QR reader app</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mt-16 max-w-3xl mx-auto bg-dark/80 backdrop-blur-lg rounded-2xl p-8"> |
| <h3 class="text-2xl font-bold mb-6 text-center">How to Use This Tool</h3> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div class="flex items-start"> |
| <div class="bg-primary/20 text-primary w-10 h-10 rounded-full flex items-center justify-center mr-4 mt-1"> |
| 1 |
| </div> |
| <div> |
| <h4 class="font-semibold mb-2">Enter Content</h4> |
| <p class="text-gray-400">Type or paste the URL or text you want to encode.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-primary/20 text-primary w-10 h-10 rounded-full flex items-center justify-center mr-4 mt-1"> |
| 2 |
| </div> |
| <div> |
| <h4 class="font-semibold mb-2">Customize</h4> |
| <p class="text-gray-400">Select color and size preferences (optional).</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-primary/20 text-primary w-10 h-10 rounded-full flex items-center justify-center mr-4 mt-1"> |
| 3 |
| </div> |
| <div> |
| <h4 class="font-semibold mb-2">Generate</h4> |
| <p class="text-gray-400">Click the Generate button to create your QR code.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-primary/20 text-primary w-10 h-10 rounded-full flex items-center justify-center mr-4 mt-1"> |
| 4 |
| </div> |
| <div> |
| <h4 class="font-semibold mb-2">Download</h4> |
| <p class="text-gray-400">Download the PNG image to use in your projects.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 px-4 max-w-7xl mx-auto"> |
| <div class="text-center mb 0-16"> |
| <h1 class="text-4xl font-bold text-blue-900 mb-4">Text Rewriter & Summarizer</h1> |
| <p class="text-xl text-blue-700 max-w-3xl mx-auto">Enhance your text by rewriting for clarity or summarizing the key points.</p> |
| </div> |
|
|
| <div class="bg-white/80 backdrop-blur-lg rounded-3xl shadow-2xl p-8 mb-16"> |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> |
| <div> |
| <label class="block text-blue-800 text-lg mb-4 font-medium">Original Text</label> |
| <textarea class="input-3d w-full h-64 bg-white border-2 border-blue-100 rounded-lg py-3 px-4 text-blue-900" |
| placeholder="Paste your text here..."></textarea> |
| |
| <div class="flex flex-wrap gap-3 mt-4"> |
| <button class="btn-3d bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-6 rounded-lg"> |
| <i class="fas fa-edit mr-2"></i> Rewrite Text |
| </button> |
| <button class="btn-3d bg-blue-400 hover:bg-blue-500 text-white font-semibold py-3 px-6 rounded-lg"> |
| <i class="fas fa-compress-alt mr-2"></i> Summarize |
| </button> |
| <button class="btn-3d bg-blue-300 hover:bg-blue-400 text-white font-semibold py-3 px-6 rounded-lg"> |
| <i class="fas fa-redo mr-2"></i> Reset |
| </button> |
| </div> |
| </div> |
|
|
| <div> |
| <label class="block text-blue-800 text-lg mb-4 font-medium">Result</label> |
| <div class="input-3d w-full h-64 bg-white border-2 border-blue-100 rounded-lg py-3 px-4 text-blue-900 overflow-auto"> |
| <p class="text-blue-400 italic">Your rewritten or summarized text will appear here...</p> |
| </div> |
| |
| <div class="flex flex-wrap gap-3 mt-4"> |
| <button class="btn-3d bg-blue-400 hover:bg-blue-500 text-white font-semibold py-3 px-6 rounded-lg"> |
| <i class="far fa-copy mr-2"></i> Copy to Clipboard |
| </button> |
| <button class="btn-3d bg-blue-300 hover:bg-blue-400 text-white font-semibold py-3 px-6 rounded-lg"> |
| <i class="fas fa-download mr-2"></i> Download as TXT |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white/80 backdrop-blur-lg rounded-2xl p-8"> |
| <h3 class="text-2xl font-bold mb-6 text-blue-900">How to Use This Tool</h3> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| <div class="flex items-start"> |
| <div class="bg-blue-500/10 text-blue-800 w-10 h-10 rounded-full flex items-center justify-center mr-4 mt-1"> |
| 1 |
| </div> |
| <div> |
| <h4 class="font-semibold text-blue-900 mb-2">Paste Your Text</h4> |
| <p class="text-blue-700">Copy and paste any text into the input box (articles, essays, reports, etc.)</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-blue-500/10 text-blue-800 w-10 h-10 rounded-full flex items-center justify-center mr-4 mt-1"> |
| 2 |
| </div> |
| <div> |
| <h4 class="font-semibold text-blue-900 mb-2">Choose Action</h4> |
| <p class="text-blue-700">Click "Rewrite" to rephrase or "Summarize" to condense the text</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-blue-500/10 text-blue-800 w-10 h-10 rounded-full flex items-center justify-center mr-4 mt-1"> |
| 3 |
| </div> |
| <div> |
| <h4 class="font-semibold text-blue-900 mb-2">Review Output</h4> |
| <p class="text-blue-700">Check the results box for your rewritten/summarized version</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-blue-500/10 text-blue-800 w-10 h-10 rounded-full flex items-center justify-center mr-4 mt-1"> |
| 4 |
| </div> |
| <div> |
| <h4 class="font-semibold text-blue-900 mb-2">Copy or Download</h4> |
| <p class="text-blue-700">Use the buttons to copy to clipboard or download as text file</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| <div class="max-w-7xl mx-auto"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Resume & Cover Letter Builder</h2> |
| <p class="text-lg text-gray-300 max-w-3xl mx-auto"> |
| Create a professional resume and cover letter with our easy-to-use builder. Download as PDF and land your dream job! |
| </p> |
| </div> |
| |
| <div class="bg-dark/80 backdrop-blur-lg rounded-3xl overflow-hidden shadow-2xl"> |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 p-6 md:p-8"> |
| |
| <div class="page-section"> |
| <div class="mb-6 flex"> |
| <button class="py-3 px-6 bg-primary text-white font-semibold rounded-l-lg">Resume</button> |
| <button class="py-3 px-6 bg-gray-700 text-gray-300 font-semibold rounded-r-lg">Cover Letter</button> |
| </div> |
| |
| <div class="bg-gradient-to-br from-[#1a2530]/90 to-[#0c131d]/90 rounded-xl p-6"> |
| <h3 class="text-xl font-bold mb-6 flex items-center"> |
| <i class="fas fa-user text-primary mr-3"></i> |
| Personal Information |
| </h3> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> |
| <div> |
| <label class="block text-gray-300 mb-2">Full Name</label> |
| <input type="text" class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-3 px-4 text-white"> |
| </div> |
| <div> |
| <label class="block text-gray-300 mb-2">Job Title</label> |
| <input type="text" class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-3 px-4 text-white"> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> |
| <div> |
| <label class="block text-gray-300 mb-2">Email</label> |
| <input type="email" class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-3 px-4 text-white"> |
| </div> |
| <div> |
| <label class="block text-gray-300 mb-2">Phone</label> |
| <input type="tel" class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-3 px-4 text-white"> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <label class="block text-gray-300 mb-2">About Me</label> |
| <textarea class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-3 px-4 text-white h-32"></textarea> |
| </div> |
| |
| <div class="flex flex-wrap gap-3 mt-8"> |
| <button class="btn-3d bg-primary text-white font-semibold py-3 px-6 rounded-lg"> |
| Preview Resume |
| </button> |
| <button class="btn-3d bg-accent text-white font-semibold py-3 px-6 rounded-lg"> |
| Download PDF |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-center justify-center relative"> |
| <div class="resume-preview bg-white p-8 rounded-xl w-full max-w-md"> |
| <div class="text-center mb-6"> |
| <h2 class="text-2xl font-bold text-gray-800">Jane Doe</h2> |
| <p class="text-primary">Senior Web Designer</p> |
| <div class="flex justify-center space-x-3 mt-3 text-gray-600"> |
| <span>jane@example.com</span> |
| <span>•</span> |
| <span>(123) 456-7890</span> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <h3 class="text-lg font-bold text-gray-800 border-b border-gray-300 pb-1 mb-3">Summary</h3> |
| <p class="text-sm text-gray-600">Creative web designer with 5+ years of experience in creating responsive and user-friendly websites. Proficient in HTML, CSS, JavaScript, and modern frameworks.</p> |
| </div> |
| |
| <div class="mb-6"> |
| <h3 class="text-lg font-bold text-gray-800 border-b border-gray-300 pb-1 mb-3">Experience</h3> |
| <div class="mb-3"> |
| <div class="flex justify-between"> |
| <span class="font-semibold">Lead Web Designer</span> |
| <span class="text-sm text-gray-600">2019-Present</span> |
| </div> |
| <p class="text-sm text-gray-600">Creative Solutions Inc.</p> |
| </div> |
| |
| <div> |
| <div class="flex justify-between"> |
| <span class="font-semibold">Web Designer</span> |
| <span class="text-sm text-gray-600">2016-2019</span> |
| </div> |
| <p class="text-sm text-gray-600">Digital Media Studio</p> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-bold text-gray-800 border-b border-gray-300 pb-1 mb-3">Education</h3> |
| <div class="flex justify-between"> |
| <span class="font-semibold">BFA in Web Design</span> |
| <span class="text-sm text-gray-600">2012-2016</span> |
| </div> |
| <p class="text-sm text-gray-600">University of Design</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="privacy" class="py-20 px-4 bg-[#0a0f15]"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Privacy Policy Generator</h2> |
| <p class="text-lg text-gray-300 max-w-3xl mx-auto"> |
| Generate a custom privacy policy for your website or app in minutes. Just fill in your details and copy or download the policy. |
| </p> |
| </div> |
| |
| <div class="bg-dark/80 backdrop-blur-lg rounded-3xl overflow-hidden shadow-2xl"> |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 p-6 md:p-8"> |
| |
| <div class="page-section p-6 bg-gradient-to-br from-[#1a2530]/90 to-[#0c131d]/90 rounded-xl"> |
| <div class="mb-8"> |
| <h3 class="text-xl font-bold mb-4 flex items-center"> |
| <i class="fas fa-info-circle text-primary mr-3"></i> |
| Business Information |
| </h3> |
| <div class="grid grid-cols-1 gap-4"> |
| <div> |
| <label class="block text-gray-300 mb-2">Website/App Name</label> |
| <input type="text" class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-3 px-4 text-white"> |
| </div> |
| <div> |
| <label class="block text-gray-300 mb-2">Contact Email</label> |
| <input type="email" class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-3 px-4 text-white"> |
| </div> |
| <div> |
| <label class="block text-gray-300 mb-2">Website URL</label> |
| <input type="url" class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-3 px-4 text-white"> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mb-8"> |
| <h3 class="text-xl font-bold mb-4 flex items-center"> |
| <i class="fas fa-check-circle text-primary mr-3"></i> |
| Policy Options |
| </h3> |
| |
| <div class="space-y-4 mb-6"> |
| <div class="flex items-center"> |
| <input type="checkbox" id="collect-data" class="mr-3 h-5 w-5 rounded border-gray-700 bg-[#192230] text-primary"> |
| <label for="collect-data" class="text-gray-300">Collects personal data</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="use-cookies" class="mr-3 h-5 w-5 rounded border-gray-700 bg-[#192230] text-primary"> |
| <label for="use-cookies" class="text-gray-300">Uses cookies</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="third-party" class="mr-3 h-5 w-5 rounded border-gray-700 bg-[#192230] text-primary"> |
| <label for="third-party" class="text-gray-300">Shares with third parties</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="user-accounts" class="mr-3 h-5 w-5 rounded border-gray-700 bg-[#192230] text-primary"> |
| <label for="user-accounts" class="text-gray-300">Has user accounts</label> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex flex-wrap gap-3"> |
| <button class="btn-3d bg-primary text-white font-semibold py-3 px-6 rounded-lg"> |
| Generate Policy |
| </button> |
| <button class="btn-3d bg-accent text-white font-semibold py-3 px-6 rounded-lg"> |
| Copy to Clipboard |
| </button> |
| <button class="btn-3d bg-gray-600 text-white font-semibold py-3 px-6 rounded-lg"> |
| Download TXT |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-center justify-center relative"> |
| <div class="invoice-paper bg-white p-8 rounded-xl w-full max-w-md"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-4">Privacy Policy</h2> |
| <div class="text-xs text-gray-600 leading-relaxed"> |
| <p class="mb-4">Last Updated: June 15, 2023</p> |
| |
| <p class="font-semibold mb-1">1. Introduction</p> |
| <p class="mb-4">Welcome to MyWebsite ("we," "our," or "us"). This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you visit our website.</p> |
| |
| <p class="font-semibold mb-1">2. Data Collection</p> |
| <p class="mb-4">We collect personal data that you provide to us voluntarily when you register for an account, subscribe to our newsletter, or contact us.</p> |
| |
| <p class="font-semibold mb-1">3. How We Use Your Data</p> |
| <p class="mb-4">Your information helps us provide and improve our services, communicate with you, and for security and fraud prevention.</p> |
| |
| <p class="font-semibold mb-1">4. Cookies</p> |
| <p class="mb-4">We use cookies to enhance your experience on our website. You can set your browser to refuse all or some browser cookies.</p> |
| |
| <p class="font-semibold mb-1">5. Contact Us</p> |
| <p>For questions about this policy, email us at contact@mywebsite.com.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mt-16 max-w-3xl mx-auto bg-dark/80 backdrop-blur-lg rounded-2xl p-8"> |
| <h3 class="text-2xl font-bold mb-6 text-center">How to Use This Tool</h3> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div class="flex items-start"> |
| <div class="bg-primary/20 text-primary w-10 h-10 rounded-full flex items-center justify-center mr-4 mt-1"> |
| 1 |
| </div> |
| <div> |
| <h4 class="font-semibold mb-2">Enter Your Details</h4> |
| <p class="text-gray-400">Fill in your business name, website URL, and contact email.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-primary/20 text-primary w-10 h-10 rounded-full flex items-center justify-center mr-4 mt-1"> |
| 2 |
| </div> |
| <div> |
| <h4 class="font-semibold mb-2">Select Options</h4> |
| <p class="text-gray-400">Check all the boxes that apply to your website or app.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-primary/20 text-primary w-10 h-10 rounded-full flex items-center justify-center mr-4 mt-1"> |
| 3 |
| </div> |
| <div> |
| <h4 class="font-semibold mb-2">Generate Policy</h4> |
| <p class="text-gray-400">Click the Generate button to create your custom policy.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-primary/20 text-primary w-10 h-10 rounded-full flex items-center justify-center mr-4 mt-1"> |
| 4 |
| </div> |
| <div> |
| <h4 class="font-semibold mb-2">Copy & Place</h4> |
| <p class="text-gray-400">Copy the text and place it on your website's Privacy Policy page.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <footer class="bg-[#0a0f15] py-12 px-4"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
| <div> |
| <div class="flex items-center space-x-2 mb-6"> |
| <div class="w-10 h-10 bg-gradient-to-r from-primary to-accent rounded-xl flex items-center justify-center"> |
| <i class="fas fa-tools text-white"></i> |
| </div> |
| <h2 class="text-xl font-bold">InstaToolMate</h2> |
| </div> |
| <p class="text-gray-400 mb-6"> |
| Free all-in-one utility tools for freelancers, creators, and professionals. Everything you need in one place. |
| </p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-white text-lg"><i class="fab fa-facebook"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white text-lg"><i class="fab fa-twitter"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white text-lg"><i class="fab fa-instagram"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white text-lg"><i class="fab fa-linkedin"></i></a> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-semibold mb-6">Tools</h3> |
| <ul class="space-y-3"> |
| <li><a href="#invoice" class="text-gray-400 hover:text-primary">Invoice Generator</a></li> |
| <li><a href="#resume" class="text-gray-400 hover:text-primary">Resume Builder</a></li> |
| <li><a href="#qr" class="text-gray-400 hover:text-primary">QR Code Generator</a></li> |
| <li><a href="#thumbnail" class="text-gray-400 hover:text-primary">Thumbnail Downloader</a></li> |
| <li><a href="#rewriter" class="text-gray-400 hover:text-primary">Text Rewriter</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-semibold mb-6">Quick Links</h3> |
| <ul class="space-y-3"> |
| <li><a href="#home" class="text-gray-400 hover:text-primary">Home</a></li> |
| <li><a href="#tools" class="text-gray-400 hover:text-primary">All Tools</a></li> |
| <li><a href="#blog" class="text-gray-400 hover:text-primary">Blog</a></li> |
| <li><a href="#about" class="text-gray-400 hover:text-primary">About Us</a></li> |
| <li><a href="#contact" class="text-gray-400 hover:text-primary">Contact</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-semibold mb-6">Newsletter</h3> |
| <p class="text-gray-400 mb-4"> |
| Subscribe to get updates on new tools and features. |
| </p> |
| <div class="flex"> |
| <input type="email" placeholder="Your email" class="py-3 px-4 bg-[#1a2530] text-white rounded-l-lg w-full focus:outline-none"> |
| <button class="bg-primary hover:bg-secondary text-white py-3 px-4 rounded-r-lg"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 mt-10 pt-8 text-center text-gray-500"> |
| <p>© 2023 InstaToolMate. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
| </main> |
| |
| |
| <script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script> |
|
|
| <script> |
| |
| function generateQR() { |
| const text = document.getElementById('qr-input').value.trim(); |
| if (!text) { |
| alert('Please enter text or URL'); |
| return; |
| } |
| |
| const qrc = document.getElementById('qrcode'); |
| qrc.innerHTML = ''; |
| |
| new QRCode(qrc, { |
| text: text, |
| width: 200, |
| height: 200, |
| colorDark: '#2c3e50', |
| colorLight: '#ffffff', |
| correctLevel: QRCode.CorrectLevel.H |
| }); |
| |
| document.getElementById('download-btn').disabled = false; |
| } |
| |
| function downloadQR() { |
| const canvas = document.querySelector('#qrcode canvas'); |
| const link = document.createElement('a'); |
| link.download = 'qrcode.png'; |
| link.href = canvas.toDataURL('image/png'); |
| link.click(); |
| } |
| |
| |
| document.querySelector('.fa-bars').addEventListener('click', function() { |
| document.getElementById('mobile-nav').classList.remove('hidden'); |
| document.body.classList.add('overflow-hidden'); |
| }); |
| |
| document.querySelector('.fa-times').addEventListener('click', function() { |
| document.getElementById('mobile-nav').classList.add('hidden'); |
| document.body.classList.remove('overflow-hidden'); |
| }); |
| |
| |
| document.querySelectorAll('a.nav-link').forEach(anchor => { |
| anchor.addEventListener('click', function(e) { |
| e.preventDefault(); |
| |
| document.getElementById('mobile-nav').classList.add('hidden'); |
| document.body.classList.remove('overflow-hidden'); |
| |
| const targetId = this.getAttribute('href').substring(1); |
| const targetSection = document.getElementById(targetId); |
| |
| window.scrollTo({ |
| top: targetSection.offsetTop - 80, |
| behavior: 'smooth' |
| }); |
| }); |
| }); |
| |
| |
| const toolCards = document.querySelectorAll('.tool-card'); |
| toolCards.forEach(card => { |
| card.addEventListener('mousemove', (e) => { |
| const rect = card.getBoundingClientRect(); |
| const x = e.clientX - rect.left; |
| const y = e.clientY - rect.top; |
| |
| const rotateY = 15 * ((x - rect.width / 2) / rect.width); |
| const rotateX = -15 * ((y - rect.height / 2) / rect.height); |
| |
| card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-10px)`; |
| }); |
| |
| card.addEventListener('mouseleave', () => { |
| card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateY(0)'; |
| }); |
| }); |
| </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=crackuser/ai-tools" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
