|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Particle Background Login</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://esm.sh/[email protected]"></script> |
|
|
<style> |
|
|
body, html { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
overflow: hidden; |
|
|
height: 100%; |
|
|
background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%); |
|
|
} |
|
|
|
|
|
#animation { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
#animation > div { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 4px; |
|
|
height: 4px; |
|
|
border-radius: 50%; |
|
|
opacity: 0.9; |
|
|
} |
|
|
|
|
|
.login-card { |
|
|
backdrop-filter: blur(10px); |
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6); |
|
|
} |
|
|
|
|
|
.glow-button { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
box-shadow: 0 0 20px rgba(118, 75, 162, 0.6); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.glow-button:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 10px 25px -5px rgba(118, 75, 162, 0.8); |
|
|
} |
|
|
|
|
|
input:focus { |
|
|
box-shadow: 0 0 0 2px rgba(118, 75, 162, 0.5) !important; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="relative font-sans"> |
|
|
|
|
|
<nav class="fixed top-0 left-0 right-0 bg-black/50 backdrop-blur-md z-50 border-b border-white/10"> |
|
|
<div class="container mx-auto px-4 py-3 flex items-center justify-between"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-indigo-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0L12 2.69z" /> |
|
|
</svg> |
|
|
<span class="text-white font-bold text-xl">AwesomeApp</span> |
|
|
</div> |
|
|
<div class="hidden md:flex space-x-6"> |
|
|
<a href="#home" class="text-gray-300 hover:text-white transition">Home</a> |
|
|
<a href="#features" class="text-gray-300 hover:text-white transition">Features</a> |
|
|
<a href="#pricing" class="text-gray-300 hover:text-white transition">Pricing</a> |
|
|
<a href="#about" class="text-gray-300 hover:text-white transition">About</a> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative group"> |
|
|
<button id="languageDropdown" class="flex items-center space-x-1 text-gray-300 hover:text-white transition cursor-pointer"> |
|
|
<span class="language-code">EN</span> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> |
|
|
</svg> |
|
|
</button> |
|
|
<div class="absolute right-0 mt-2 w-24 rounded-md shadow-lg bg-gray-800 border border-gray-700 hidden group-hover:block"> |
|
|
<div class="py-1"> |
|
|
<button class="language-option block w-full text-left px-4 py-2 text-sm text-white hover:bg-indigo-600" data-lang="en">English</button> |
|
|
<button class="language-option block w-full text-left px-4 py-2 text-sm text-white hover:bg-indigo-600" data-lang="fr">Français</button> |
|
|
<button class="language-option block w-full text-left px-4 py-2 text-sm text-white hover:bg-indigo-600" data-lang="ru">Русский</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button id="showLoginBtn" class="text-white px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-700 transition">Login</button> |
|
|
<button id="showSignupBtn" class="text-white px-4 py-2 rounded-lg bg-transparent border border-indigo-600 hover:bg-indigo-600/20 transition">Sign Up</button> |
|
|
<button class="md:hidden text-white"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div id="animation"></div> |
|
|
|
|
|
|
|
|
<section id="home" class="min-h-screen flex items-center justify-center px-4 pt-20 md:pt-24"> |
|
|
<div class="max-w-5xl mx-auto text-center"> |
|
|
<h1 class="text-5xl md:text-7xl font-bold text-white mb-6 leading-tight"> |
|
|
Build Amazing Things <br> |
|
|
<span class="bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">With AwesomeApp</span> |
|
|
</h1> |
|
|
<p class="text-xl text-gray-300 mb-12 max-w-2xl mx-auto"> |
|
|
The most powerful platform to build, deploy and scale your applications with ease. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4"> |
|
|
<button class="px-8 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-semibold shadow-lg transition"> |
|
|
Get Started |
|
|
</button> |
|
|
<button class="px-8 py-3 bg-gray-800 hover:bg-gray-700 text-white rounded-lg font-semibold border border-gray-700 transition"> |
|
|
Learn More |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="features" class="py-20 bg-gray-900/50"> |
|
|
<div class="max-w-6xl mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Powerful Features</h2> |
|
|
<p class="text-gray-400 max-w-2xl mx-auto"> |
|
|
Everything you need to build, deploy and scale your applications |
|
|
</p> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<div class="bg-gray-800/50 p-8 rounded-xl border border-gray-700/50 hover:border-indigo-500 transition"> |
|
|
<div class="w-12 h-12 bg-indigo-500/10 rounded-lg flex items-center justify-center mb-6"> |
|
|
<svg class="w-6 h-6 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"> |
|
|
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"/> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-white mb-3">Built-in Editor</h3> |
|
|
<p class="text-gray-400"> |
|
|
Powerful code editor with syntax highlighting, auto-completion and custom themes. |
|
|
</p> |
|
|
</div> |
|
|
<div class="bg-gray-800/50 p-8 rounded-xl border border-gray-700/50 hover:border-indigo-500 transition"> |
|
|
<div class="w-12 h-12 bg-indigo-500/10 rounded-lg flex items-center justify-center mb-6"> |
|
|
<svg class="w-6 h-6 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"> |
|
|
<path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"/> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-white mb-3">Instant Deployment</h3> |
|
|
<p class="text-gray-400"> |
|
|
One-click deployment to global CDN with automatic SSL and custom domains. |
|
|
</p> |
|
|
</div> |
|
|
<div class="bg-gray-800/50 p-8 rounded-xl border border-gray-700/50 hover:border-indigo-500 transition"> |
|
|
<div class="w-12 h-12 bg-indigo-500/10 rounded-lg flex items-center justify-center mb-6"> |
|
|
<svg class="w-6 h-6 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"> |
|
|
<path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-white mb-3">Advanced Analytics</h3> |
|
|
<p class="text-gray-400"> |
|
|
Real-time monitoring and analytics to track your application's performance. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="pricing" class="py-20"> |
|
|
<div class="max-w-6xl mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Simple Pricing</h2> |
|
|
<p class="text-gray-400 max-w-2xl mx-auto"> |
|
|
Choose the plan that fits your needs |
|
|
</p> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"> |
|
|
<div class="bg-gray-800/50 p-8 rounded-xl border border-gray-700/50"> |
|
|
<h3 class="text-xl font-semibold text-white mb-4">Starter</h3> |
|
|
<div class="text-4xl font-bold text-white mb-6"> |
|
|
$9<span class="text-lg text-gray-400">/month</span> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center text-gray-300"> |
|
|
<svg class="w-5 h-5 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20"> |
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/> |
|
|
</svg> |
|
|
10 Projects |
|
|
</li> |
|
|
<li class="flex items-center text-gray-300"> |
|
|
<svg class="w-5 h-5 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20"> |
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/> |
|
|
</svg> |
|
|
50GB Storage |
|
|
</li> |
|
|
<li class="flex items-center text-gray-300"> |
|
|
<svg class="w-5 h-5 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20"> |
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/> |
|
|
</svg> |
|
|
Basic Analytics |
|
|
</li> |
|
|
</ul> |
|
|
<button class="w-full py-3 bg-gray-700 hover:bg-gray-600 text-white rounded-lg font-medium transition"> |
|
|
Get Started |
|
|
</button> |
|
|
</div> |
|
|
<div class="bg-gray-800/50 p-8 rounded-xl border-2 border-indigo-500 relative"> |
|
|
<div class="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-indigo-500 text-white text-xs font-semibold px-3 py-1 rounded-full"> |
|
|
POPULAR |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-white mb-4">Pro</h3> |
|
|
<div class="text-4xl font-bold text-white mb-6"> |
|
|
$29<span class="text-lg text-gray-400">/month</span> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center text-gray-300"> |
|
|
<svg class="w-5 h-5 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20"> |
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/> |
|
|
</svg> |
|
|
50 Projects |
|
|
</li> |
|
|
<li class="flex items-center text-gray-300"> |
|
|
<svg class="w-5 h-5 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20"> |
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/> |
|
|
</svg> |
|
|
500GB Storage |
|
|
</li> |
|
|
<li class="flex items-center text-gray-300"> |
|
|
<svg class="w-5 h-5 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20"> |
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/> |
|
|
</svg> |
|
|
Advanced Analytics |
|
|
</li> |
|
|
</ul> |
|
|
<button class="w-full py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-medium transition"> |
|
|
Get Started |
|
|
</button> |
|
|
</div> |
|
|
<div class="bg-gray-800/50 p-8 rounded-xl border border-gray-700/50"> |
|
|
<h3 class="text-xl font-semibold text-white mb-4">Enterprise</h3> |
|
|
<div class="text-4xl font-bold text-white mb-6"> |
|
|
$99<span class="text-lg text-gray-400">/month</span> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center text-gray-300"> |
|
|
<svg class="w-5 h-5 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20"> |
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/> |
|
|
</svg> |
|
|
Unlimited Projects |
|
|
</li> |
|
|
<li class="flex items-center text-gray-300"> |
|
|
<svg class="w-5 h-5 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20"> |
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/> |
|
|
</svg> |
|
|
2TB Storage |
|
|
</li> |
|
|
<li class="flex items-center text-gray-300"> |
|
|
<svg class="w-5 h-5 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20"> |
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/> |
|
|
</svg> |
|
|
Premium Support |
|
|
</li> |
|
|
</ul> |
|
|
<button class="w-full py-3 bg-gray-700 hover:bg-gray-600 text-white rounded-lg font-medium transition"> |
|
|
Get Started |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-20 bg-gray-900/50"> |
|
|
<div class="max-w-6xl mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">About Us</h2> |
|
|
<p class="text-gray-400 max-w-2xl mx-auto"> |
|
|
Our mission is to empower developers to build amazing things |
|
|
</p> |
|
|
</div> |
|
|
<div class="md:flex items-center gap-12"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<div class="relative"> |
|
|
<div class="absolute -inset-4 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-2xl opacity-20 blur"></div> |
|
|
<div class="relative bg-gray-800/50 rounded-2xl border border-gray-700 p-6"> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Founded in 2020, AwesomeApp started with a simple goal: to make application development accessible to everyone. |
|
|
</p> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Our platform provides all the tools you need to go from idea to production in minutes, without worrying about infrastructure. |
|
|
</p> |
|
|
<p class="text-gray-300"> |
|
|
Join thousands of developers who are already building amazing things with AwesomeApp. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2"> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div class="bg-indigo-500/10 p-6 rounded-xl border border-indigo-500/30"> |
|
|
<div class="text-3xl font-bold text-indigo-400 mb-2">10,000+</div> |
|
|
<div class="text-gray-400">Active Users</div> |
|
|
</div> |
|
|
<div class="bg-indigo-500/10 p-6 rounded-xl border border-indigo-500/30"> |
|
|
<div class="text-3xl font-bold text-indigo-400 mb-2">50+</div> |
|
|
<div class="text-gray-400">Countries</div> |
|
|
</div> |
|
|
<div class="bg-indigo-500/10 p-6 rounded-xl border border-indigo-500/30"> |
|
|
<div class="text-3xl font-bold text-indigo-400 mb-2">24/7</div> |
|
|
<div class="text-gray-400">Support</div> |
|
|
</div> |
|
|
<div class="bg-indigo-500/10 p-6 rounded-xl border border-indigo-500/30"> |
|
|
<div class="text-3xl font-bold text-indigo-400 mb-2">99.9%</div> |
|
|
<div class="text-gray-400">Uptime</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<div class="flex items-center justify-center min-h-screen px-4 pt-20 md:pt-24"> |
|
|
<div class="login-card w-full max-w-md bg-white/10 rounded-2xl overflow-hidden border border-white/10"> |
|
|
<div class="text-center py-10 px-6 sm:px-10"> |
|
|
|
|
|
<div class="w-24 h-24 rounded-full bg-gradient-to-r from-indigo-500/20 to-purple-500/20 mx-auto mb-6 flex items-center justify-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-indigo-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0L12 2.69z" /> |
|
|
</svg> |
|
|
</div> |
|
|
|
|
|
|
|
|
<h1 class="text-3xl font-bold text-white mb-2">Welcome Back</h1> |
|
|
<p class="text-gray-300 mb-8">Sign in to continue your journey</p> |
|
|
|
|
|
|
|
|
<form id="loginForm" class="space-y-6"> |
|
|
<div> |
|
|
<label for="email" class="block text-left text-white text-sm font-medium mb-2">Email Address</label> |
|
|
<input |
|
|
type="email" |
|
|
id="email" |
|
|
name="email" |
|
|
required |
|
|
class="w-full px-4 py-3 bg-gray-800/50 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none transition-all" |
|
|
placeholder="[email protected]" |
|
|
> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="password" class="block text-left text-white text-sm font-medium mb-2">Password</label> |
|
|
<input |
|
|
type="password" |
|
|
id="password" |
|
|
name="password" |
|
|
required |
|
|
class="w-full px-4 py-3 bg-gray-800/50 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none transition-all" |
|
|
placeholder="••••••••" |
|
|
> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<input |
|
|
id="remember" |
|
|
name="remember" |
|
|
type="checkbox" |
|
|
class="h-4 w-4 text-indigo-500 focus:ring-indigo-400 rounded border-gray-600 bg-gray-700" |
|
|
> |
|
|
<label for="remember" class="ml-2 block text-sm text-gray-300">Remember me</label> |
|
|
</div> |
|
|
|
|
|
<a href="#" class="text-sm text-purple-300 hover:text-purple-200 transition-colors"> |
|
|
Forgot password? |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<button |
|
|
type="submit" |
|
|
class="w-full glow-button text-white font-semibold py-3 px-4 rounded-lg transition-all" |
|
|
> |
|
|
Sign In |
|
|
</button> |
|
|
</form> |
|
|
|
|
|
|
|
|
<div class="mt-8"> |
|
|
<p class="text-gray-400 text-sm">Or continue with</p> |
|
|
<div class="flex justify-center space-x-4 mt-3"> |
|
|
<button class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700 transition-colors"> |
|
|
<svg class="w-5 h-5 text-blue-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> |
|
|
<path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"/> |
|
|
</svg> |
|
|
</button> |
|
|
<button class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700 transition-colors"> |
|
|
<svg class="w-5 h-5 text-blue-400" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> |
|
|
<path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307c-1.467-1.353-3.267-2.053-5.807-2.053-5.413 0-9.867 4.013-9.867 9.467 0 5.453 4.454 9.467 9.867 9.467 5.547 0 8.813-4.52 8.813-10.72 0-.267-.027-.427-.06-.853h-8.748z"/> |
|
|
</svg> |
|
|
</button> |
|
|
<button class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700 transition-colors"> |
|
|
<svg class="w-5 h-5 text-gray-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> |
|
|
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<p class="mt-8 text-gray-400"> |
|
|
Don't have an account? |
|
|
<button id="showSignupBtnBottom" class="text-purple-300 font-medium hover:text-purple-200 transition-colors">Sign up</button> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="signupCard" class="login-card w-full max-w-md bg-white/10 rounded-2xl overflow-hidden border border-white/10 hidden"> |
|
|
<div class="text-center py-10 px-6 sm:px-10"> |
|
|
|
|
|
<div class="w-24 h-24 rounded-full bg-gradient-to-r from-indigo-500/20 to-purple-500/20 mx-auto mb-6 flex items-center justify-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-indigo-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0L12 2.69z" /> |
|
|
</svg> |
|
|
</div> |
|
|
|
|
|
|
|
|
<h1 class="text-3xl font-bold text-white mb-2">Create Account</h1> |
|
|
<p class="text-gray-300 mb-8">Join our community today</p> |
|
|
|
|
|
|
|
|
<form id="signupForm" class="space-y-6"> |
|
|
<div> |
|
|
<label for="signupName" class="block text-left text-white text-sm font-medium mb-2">Full Name</label> |
|
|
<input |
|
|
type="text" |
|
|
id="signupName" |
|
|
name="name" |
|
|
required |
|
|
class="w-full px-4 py-3 bg-gray-800/50 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none transition-all" |
|
|
placeholder="John Doe" |
|
|
> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="signupEmail" class="block text-left text-white text-sm font-medium mb-2">Email Address</label> |
|
|
<input |
|
|
type="email" |
|
|
id="signupEmail" |
|
|
name="email" |
|
|
required |
|
|
class="w-full px-4 py-3 bg-gray-800/50 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none transition-all" |
|
|
placeholder="[email protected]" |
|
|
> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="signupPassword" class="block text-left text-white text-sm font-medium mb-2">Password</label> |
|
|
<input |
|
|
type="password" |
|
|
id="signupPassword" |
|
|
name="password" |
|
|
required |
|
|
class="w-full px-4 py-3 bg-gray-800/50 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none transition-all" |
|
|
placeholder="••••••••" |
|
|
> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="signupConfirmPassword" class="block text-left text-white text-sm font-medium mb-2">Confirm Password</label> |
|
|
<input |
|
|
type="password" |
|
|
id="signupConfirmPassword" |
|
|
name="confirmPassword" |
|
|
required |
|
|
class="w-full px-4 py-3 bg-gray-800/50 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none transition-all" |
|
|
placeholder="••••••••" |
|
|
> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<input |
|
|
id="terms" |
|
|
name="terms" |
|
|
type="checkbox" |
|
|
required |
|
|
class="h-4 w-4 text-indigo-500 focus:ring-indigo-400 rounded border-gray-600 bg-gray-700" |
|
|
> |
|
|
<label for="terms" class="ml-2 block text-sm text-gray-300"> |
|
|
I agree to the <a href="#" class="text-purple-300">Terms</a> and <a href="#" class="text-purple-300">Privacy Policy</a> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<button |
|
|
type="submit" |
|
|
class="w-full glow-button text-white font-semibold py-3 px-4 rounded-lg transition-all" |
|
|
> |
|
|
Create Account |
|
|
</button> |
|
|
</form> |
|
|
|
|
|
|
|
|
<p class="mt-8 text-gray-400"> |
|
|
Already have an account? |
|
|
<button id="showLoginBtnBottom" class="text-purple-300 font-medium hover:text-purple-200 transition-colors">Sign in</button> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const translations = { |
|
|
en: { |
|
|
appName: "AwesomeApp", |
|
|
home: "Home", |
|
|
features: "Features", |
|
|
pricing: "Pricing", |
|
|
about: "About", |
|
|
login: "Login", |
|
|
signup: "Sign Up", |
|
|
welcomeBack: "Welcome Back", |
|
|
signInPrompt: "Sign in to continue your journey", |
|
|
email: "Email Address", |
|
|
password: "Password", |
|
|
rememberMe: "Remember me", |
|
|
forgotPassword: "Forgot password?", |
|
|
signIn: "Sign In", |
|
|
continueWith: "Or continue with", |
|
|
noAccount: "Don't have an account?", |
|
|
createAccount: "Create Account", |
|
|
joinCommunity: "Join our community today", |
|
|
fullName: "Full Name", |
|
|
confirmPassword: "Confirm Password", |
|
|
termsAgreement: "I agree to the Terms and Privacy Policy", |
|
|
terms: "Terms", |
|
|
privacy: "Privacy Policy", |
|
|
haveAccount: "Already have an account?" |
|
|
}, |
|
|
fr: { |
|
|
appName: "SuperApp", |
|
|
home: "Accueil", |
|
|
features: "Fonctionnalités", |
|
|
pricing: "Tarifs", |
|
|
about: "À propos", |
|
|
login: "Connexion", |
|
|
signup: "Inscription", |
|
|
welcomeBack: "Bon retour parmi nous", |
|
|
signInPrompt: "Connectez-vous pour continuer", |
|
|
email: "Adresse e-mail", |
|
|
password: "Mot de passe", |
|
|
rememberMe: "Se souvenir de moi", |
|
|
forgotPassword: "Mot de passe oublié?", |
|
|
signIn: "Se connecter", |
|
|
continueWith: "Ou continuer avec", |
|
|
noAccount: "Vous n'avez pas de compte?", |
|
|
createAccount: "Créer un compte", |
|
|
joinCommunity: "Rejoignez notre communauté aujourd'hui", |
|
|
fullName: "Nom complet", |
|
|
confirmPassword: "Confirmez le mot de passe", |
|
|
termsAgreement: "J'accepte les Conditions et la Politique de confidentialité", |
|
|
terms: "Conditions", |
|
|
privacy: "Politique de confidentialité", |
|
|
haveAccount: "Vous avez déjà un compte?" |
|
|
}, |
|
|
ru: { |
|
|
appName: "ОтличноеПриложение", |
|
|
home: "Главная", |
|
|
features: "Возможности", |
|
|
pricing: "Цены", |
|
|
about: "О нас", |
|
|
login: "Войти", |
|
|
signup: "Регистрация", |
|
|
welcomeBack: "С возвращением", |
|
|
signInPrompt: "Войдите, чтобы продолжить", |
|
|
email: "Электронная почта", |
|
|
password: "Пароль", |
|
|
rememberMe: "Запомнить меня", |
|
|
forgotPassword: "Забыли пароль?", |
|
|
signIn: "Войти", |
|
|
continueWith: "Или войти через", |
|
|
noAccount: "Нет учетной записи?", |
|
|
createAccount: "Создать аккаунт", |
|
|
joinCommunity: "Присоединяйтесь к нашему сообществу", |
|
|
fullName: "Полное имя", |
|
|
confirmPassword: "Подтвердите пароль", |
|
|
termsAgreement: "Я согласен с Условиями и Политикой конфиденциальности", |
|
|
terms: "Условия", |
|
|
privacy: "Политика конфиденциальности", |
|
|
haveAccount: "Уже есть аккаунт?" |
|
|
} |
|
|
}; |
|
|
|
|
|
const { random, cos, sin, sqrt, PI } = Math; |
|
|
const count = 2500; |
|
|
const duration = 3000; |
|
|
const win = { w: window.innerWidth * .26, h: window.innerHeight * .26 }; |
|
|
const target = { x: 0, y: 0, r: win.w * .25 }; |
|
|
const radius = Symbol(); |
|
|
const theta = Symbol(); |
|
|
|
|
|
|
|
|
const animationContainer = document.getElementById('animation'); |
|
|
|
|
|
|
|
|
for (let i = 0; i < count; i++) { |
|
|
const $el = document.createElement('div'); |
|
|
const h = anime.random(15, 25); |
|
|
const l = anime.random(10, 18); |
|
|
$el.style.background = `hsl(${h}, 60%, ${l}%)`; |
|
|
$el[theta] = random() * PI * 2; |
|
|
$el[radius] = target.r * sqrt(random()); |
|
|
animationContainer.appendChild($el); |
|
|
} |
|
|
|
|
|
|
|
|
const tl = anime.timeline({ |
|
|
targets: animationContainer.children, |
|
|
autoplay: true, |
|
|
loop: true, |
|
|
easing: 'easeInOutQuad', |
|
|
onLoop: self => self.refresh(), |
|
|
}); |
|
|
|
|
|
tl.add({ |
|
|
targets: animationContainer.children, |
|
|
x: $el => target.x + ($el[radius] * cos($el[theta])), |
|
|
y: $el => target.y + ($el[radius] * sin($el[theta])), |
|
|
duration: () => duration + anime.random(-100, 100), |
|
|
easing: 'easeInOutQuad', |
|
|
onLoop: self => { |
|
|
const t = self.animatables[0].target; |
|
|
t[theta] = random() * PI * 2; |
|
|
t[radius] = target.r * sqrt(random()); |
|
|
self.refresh(); |
|
|
} |
|
|
}, 0) |
|
|
.add({ |
|
|
targets: target, |
|
|
r: () => win.w * anime.random(.05, .5, 2), |
|
|
duration: 1250, |
|
|
update: () => tl.restart() |
|
|
}, 0) |
|
|
.add({ |
|
|
targets: target, |
|
|
x: () => anime.random(-win.w, win.w), |
|
|
modifier: x => x + sin(tl.currentTime * .0007) * (win.w * .65), |
|
|
duration: 2800, |
|
|
update: () => tl.restart() |
|
|
}, 0) |
|
|
.add({ |
|
|
targets: target, |
|
|
y: () => anime.random(-win.h, win.h), |
|
|
modifier: y => y + cos(tl.currentTime * .00012) * (win.h * .65), |
|
|
duration: 1800, |
|
|
update: () => tl.restart() |
|
|
}, 0); |
|
|
|
|
|
|
|
|
document.addEventListener('visibilitychange', () => { |
|
|
if (document.visibilityState === 'visible') { |
|
|
tl.play(); |
|
|
} else { |
|
|
tl.pause(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('loginForm').addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
|
const email = document.getElementById('email').value; |
|
|
const password = document.getElementById('password').value; |
|
|
const remember = document.getElementById('remember').checked; |
|
|
|
|
|
|
|
|
const button = document.querySelector('button[type="submit"]'); |
|
|
const originalText = button.textContent; |
|
|
button.textContent = 'Signing in...'; |
|
|
button.disabled = true; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
button.textContent = originalText; |
|
|
button.disabled = false; |
|
|
|
|
|
|
|
|
alert(`Welcome back ${email}! Successfully signed in.`); |
|
|
|
|
|
|
|
|
if (!remember) { |
|
|
document.getElementById('loginForm').reset(); |
|
|
} |
|
|
}, 1500); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('resize', () => { |
|
|
win.w = window.innerWidth * .26; |
|
|
win.h = window.innerHeight * .26; |
|
|
target.r = win.w * .25; |
|
|
}); |
|
|
|
|
|
|
|
|
function changeLanguage(lang) { |
|
|
|
|
|
document.querySelector('.language-code').textContent = lang.toUpperCase(); |
|
|
|
|
|
|
|
|
document.querySelector('.nav-home').textContent = translations[lang].home; |
|
|
document.querySelector('.nav-features').textContent = translations[lang].features; |
|
|
document.querySelector('.nav-pricing').textContent = translations[lang].pricing; |
|
|
document.querySelector('.nav-about').textContent = translations[lang].about; |
|
|
|
|
|
|
|
|
document.querySelector('#showLoginBtn').textContent = translations[lang].login; |
|
|
document.querySelector('#showSignupBtn').textContent = translations[lang].signup; |
|
|
|
|
|
|
|
|
document.querySelector('.login-card h1').textContent = translations[lang].welcomeBack; |
|
|
document.querySelector('.login-card p').textContent = translations[lang].signInPrompt; |
|
|
document.querySelector('label[for="email"]').textContent = translations[lang].email; |
|
|
document.querySelector('input[name="email"]').placeholder = translations[lang].email; |
|
|
document.querySelector('label[for="password"]').textContent = translations[lang].password; |
|
|
document.querySelector('input[name="password"]').placeholder = translations[lang].password; |
|
|
document.querySelector('label[for="remember"]').textContent = translations[lang].rememberMe; |
|
|
document.querySelector('button[type="submit"]').textContent = translations[lang].signIn; |
|
|
document.querySelector('a[href="#"]').textContent = translations[lang].forgotPassword; |
|
|
document.querySelector('.login-card .text-gray-400.text-sm').textContent = translations[lang].continueWith; |
|
|
document.querySelector('.login-card .text-gray-400').innerHTML = |
|
|
translations[lang].noAccount + ' <button id="showSignupBtnBottom" class="text-purple-300 font-medium hover:text-purple-200 transition-colors">' + translations[lang].signup + '</button>'; |
|
|
|
|
|
|
|
|
document.querySelector('#signupCard h1').textContent = translations[lang].createAccount; |
|
|
document.querySelector('#signupCard p').textContent = translations[lang].joinCommunity; |
|
|
document.querySelector('label[for="signupName"]').textContent = translations[lang].fullName; |
|
|
document.querySelector('input[name="name"]').placeholder = translations[lang].fullName; |
|
|
document.querySelector('label[for="signupEmail"]').textContent = translations[lang].email; |
|
|
document.querySelector('input[name="email"]').placeholder = translations[lang].email; |
|
|
document.querySelector('label[for="signupPassword"]').textContent = translations[lang].password; |
|
|
document.querySelector('input[name="password"]').placeholder = translations[lang].password; |
|
|
document.querySelector('label[for="signupConfirmPassword"]').textContent = translations[lang].confirmPassword; |
|
|
document.querySelector('input[name="confirmPassword"]').placeholder = translations[lang].confirmPassword; |
|
|
document.querySelector('label[for="terms"]').innerHTML = |
|
|
translations[lang].termsAgreement.replace(/Terms/g, `<a href="#" class="text-purple-300">${translations[lang].terms}</a>`) |
|
|
.replace(/Privacy Policy/g, `<a href="#" class="text-purple-300">${translations[lang].privacy}</a>`); |
|
|
document.querySelector('#signupCard button[type="submit"]').textContent = translations[lang].createAccount; |
|
|
document.querySelector('#signupCard .text-gray-400').innerHTML = |
|
|
translations[lang].haveAccount + ' <button id="showLoginBtnBottom" class="text-purple-300 font-medium hover:text-purple-200 transition-colors">' + translations[lang].login + '</button>'; |
|
|
|
|
|
|
|
|
document.documentElement.lang = lang; |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
const targetId = this.getAttribute('href'); |
|
|
if (targetId === '#') return; |
|
|
|
|
|
const targetElement = document.querySelector(targetId); |
|
|
if (targetElement) { |
|
|
window.scrollTo({ |
|
|
top: targetElement.offsetTop - 80, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.language-option').forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
const lang = btn.dataset.lang; |
|
|
changeLanguage(lang); |
|
|
}); |
|
|
}); |
|
|
|
|
|
const loginCard = document.querySelector('.login-card'); |
|
|
const signupCard = document.getElementById('signupCard'); |
|
|
|
|
|
|
|
|
changeLanguage('en'); |
|
|
|
|
|
|
|
|
const showLoginBtns = document.querySelectorAll('#showLoginBtn, #showLoginBtnBottom'); |
|
|
const showSignupBtns = document.querySelectorAll('#showSignupBtn, #showSignupBtnBottom'); |
|
|
|
|
|
showLoginBtns.forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
loginCard.classList.remove('hidden'); |
|
|
signupCard.classList.add('hidden'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
showSignupBtns.forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
signupCard.classList.remove('hidden'); |
|
|
loginCard.classList.add('hidden'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('signupForm').addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
|
const name = document.getElementById('signupName').value; |
|
|
const email = document.getElementById('signupEmail').value; |
|
|
const password = document.getElementById('signupPassword').value; |
|
|
const confirmPassword = document.getElementById('signupConfirmPassword').value; |
|
|
|
|
|
|
|
|
if (password !== confirmPassword) { |
|
|
alert("Passwords don't match!"); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
const button = e.target.querySelector('button[type="submit"]'); |
|
|
const originalText = button.textContent; |
|
|
button.textContent = 'Creating account...'; |
|
|
button.disabled = true; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
button.textContent = originalText; |
|
|
button.disabled = false; |
|
|
|
|
|
|
|
|
alert(`Welcome ${name}! Your account has been created.`); |
|
|
|
|
|
|
|
|
e.target.reset(); |
|
|
|
|
|
|
|
|
loginCard.classList.remove('hidden'); |
|
|
signupCard.classList.add('hidden'); |
|
|
}, 1500); |
|
|
}); |
|
|
}); |
|
|
</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=Sasanou/veeweb-v2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
