|
|
<!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> |
