Spaces:
Running
Running
| <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Love Lock - Documentation</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['"Plus Jakarta Sans"', 'sans-serif'], | |
| }, | |
| colors: { | |
| brand: { | |
| dark: '#0f0f11', | |
| card: '#18181b', | |
| primary: '#ec4899', // Pink 500 | |
| secondary: '#8b5cf6', // Violet 500 | |
| } | |
| }, | |
| animation: { | |
| 'float': 'float 6s ease-in-out infinite', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-20px)' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| body { | |
| background-color: #0f0f11; | |
| color: #e4e4e7; | |
| background-image: | |
| radial-gradient(circle at 15% 50%, rgba(236, 72, 153, 0.08), transparent 25%), | |
| radial-gradient(circle at 85% 30%, rgba(139, 92, 246, 0.08), transparent 25%); | |
| } | |
| .glass-card { | |
| background: rgba(24, 24, 27, 0.6); | |
| backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); | |
| } | |
| .glass-card:hover { | |
| border-color: rgba(236, 72, 153, 0.3); | |
| transform: translateY(-2px); | |
| transition: all 0.3s ease; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(135deg, #f472b6 0%, #a78bfa 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .step-number { | |
| background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Navbar --> | |
| <nav class="fixed top-0 w-full z-50 border-b border-white/5 bg-[#0f0f11]/80 backdrop-blur-md"> | |
| <div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between"> | |
| <div class="flex items-center gap-2"> | |
| <span class="text-2xl">🔒</span> | |
| <span class="font-bold text-xl tracking-tight">Love Lock</span> | |
| </div> | |
| <div class="hidden md:flex gap-8 text-sm font-medium text-gray-400"> | |
| <a href="#overview" class="hover:text-white transition-colors">Overview</a> | |
| <a href="#demo" class="hover:text-white transition-colors">Demo</a> | |
| <a href="#guide" class="hover:text-white transition-colors">User Guide</a> | |
| <a href="#features" class="hover:text-white transition-colors">Features</a> | |
| </div> | |
| <a href="https://lovelock-nu.vercel.app/" target="_blank" | |
| class="px-5 py-2 rounded-full bg-white/5 border border-white/10 hover:bg-white/10 hover:border-pink-500/50 transition-all text-sm font-medium"> | |
| Visit App | |
| </a> | |
| </div> | |
| </nav> | |
| <main class="pt-32 pb-20 px-6 max-w-6xl mx-auto"> | |
| <!-- Hero Section --> | |
| <header class="text-center mb-20"> | |
| <div class="inline-block mb-4 px-4 py-1.5 rounded-full bg-pink-500/10 border border-pink-500/20 text-pink-400 text-sm font-medium"> | |
| Official Documentation | |
| </div> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 tracking-tight"> | |
| Connect with Your Partner<br> | |
| <span class="gradient-text">in a Unique Way</span> | |
| </h1> | |
| <p class="text-xl text-gray-400 max-w-2xl mx-auto leading-relaxed"> | |
| A unique digital space where couples can share daily messages that remain "locked" for 30 days, creating anticipation and excitement. | |
| </p> | |
| </header> | |
| <!-- Overview Cards --> | |
| <section id="overview" class="grid md:grid-cols-2 gap-6 mb-24"> | |
| <div class="glass-card p-8 rounded-2xl relative overflow-hidden group"> | |
| <div class="absolute top-0 right-0 w-32 h-32 bg-pink-500/10 rounded-full blur-3xl -mr-10 -mt-10 transition-all group-hover:bg-pink-500/20"></div> | |
| <h3 class="text-2xl font-semibold mb-4 text-white">The Concept</h3> | |
| <p class="text-gray-400 leading-relaxed"> | |
| Love Lock helps you build a beautiful timeline of memories. Each day, sending a message contributes to your shared streak. Messages are time-capsuled for 30 days to build anticipation. | |
| </p> | |
| </div> | |
| <div class="glass-card p-8 rounded-2xl relative overflow-hidden group"> | |
| <div class="absolute top-0 right-0 w-32 h-32 bg-violet-500/10 rounded-full blur-3xl -mr-10 -mt-10 transition-all group-hover:bg-violet-500/20"></div> | |
| <h3 class="text-2xl font-semibold mb-4 text-white">Trust & Safety</h3> | |
| <p class="text-gray-400 leading-relaxed"> | |
| For urgent situations, an <strong>Emergency Unlock</strong> feature allows partners to reveal messages earlier using a shared secret key, ensuring flexibility without losing the element of surprise. | |
| </p> | |
| </div> | |
| </section> | |
| <!-- Video Demo Section --> | |
| <section id="demo" class="mb-32"> | |
| <div class="text-center mb-10"> | |
| <h2 class="text-3xl font-bold mb-3">See Love Lock in Action</h2> | |
| <p class="text-gray-400">Watch how to create your space and connect with your partner.</p> | |
| </div> | |
| <div class="glass-card p-2 rounded-2xl shadow-2xl shadow-pink-900/20 border border-white/10 max-w-5xl mx-auto"> | |
| <div class="rounded-xl overflow-hidden aspect-video bg-black/50 relative"> | |
| <iframe | |
| src="https://player.cloudinary.com/embed/?cloud_name=do2egxges&public_id=screen-capture_1_rsuif9&profile=cld-default" | |
| class="w-full h-full absolute inset-0" | |
| allow="autoplay; fullscreen; encrypted-media; picture-in-picture" | |
| allowfullscreen | |
| frameborder="0"> | |
| </iframe> | |
| </div> | |
| </div> | |
| <!-- Demo Accounts --> | |
| <div class="mt-10 max-w-3xl mx-auto"> | |
| <div class="glass-card p-6 rounded-xl border-l-4 border-l-pink-500"> | |
| <h3 class="text-lg font-semibold mb-4 flex items-center gap-2"> | |
| <span>🧪</span> Demo Test Accounts | |
| </h3> | |
| <div class="grid md:grid-cols-2 gap-4"> | |
| <div class="bg-black/30 p-4 rounded-lg"> | |
| <div class="text-xs text-pink-400 uppercase tracking-wider font-bold mb-2">User A</div> | |
| <div class="text-sm text-gray-300">Email: <span class="text-white select-all">yonoha3481@okcdeals.com</span></div> | |
| <div class="text-sm text-gray-300">Pass: <span class="text-white">123456</span></div> | |
| </div> | |
| <div class="bg-black/30 p-4 rounded-lg"> | |
| <div class="text-xs text-violet-400 uppercase tracking-wider font-bold mb-2">User B</div> | |
| <div class="text-sm text-gray-300">Email: <span class="text-white select-all">woreg85739@okcdeals.com</span></div> | |
| <div class="text-sm text-gray-300">Pass: <span class="text-white">1234556</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Step by Step Guide --> | |
| <section id="guide" class="space-y-32"> | |
| <div class="text-center max-w-2xl mx-auto mb-16"> | |
| <h2 class="text-4xl font-bold mb-4">How It Works</h2> | |
| <p class="text-gray-400">Follow these steps to start your journey.</p> | |
| </div> | |
| <!-- Step 1 --> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div class="order-2 md:order-1"> | |
| <div class="text-5xl font-bold step-number mb-6">01</div> | |
| <h3 class="text-2xl font-bold mb-4">Getting Started</h3> | |
| <ul class="space-y-4 text-gray-300"> | |
| <li class="flex gap-3"> | |
| <span class="mt-1.5 w-1.5 h-1.5 rounded-full bg-pink-500 shrink-0"></span> | |
| <span>Visit the website and click <strong>"Create New Space"</strong>.</span> | |
| </li> | |
| <li class="flex gap-3"> | |
| <span class="mt-1.5 w-1.5 h-1.5 rounded-full bg-pink-500 shrink-0"></span> | |
| <span>Sign up by providing basic details and email.</span> | |
| </li> | |
| <li class="flex gap-3"> | |
| <span class="mt-1.5 w-1.5 h-1.5 rounded-full bg-pink-500 shrink-0"></span> | |
| <span>Enter the OTP sent to your email to verify your identity.</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="order-1 md:order-2 glass-card p-2 rounded-xl"> | |
| <img src="public/docs/images/signup.png" alt="Signup Page" class="w-full rounded-lg shadow-lg"> | |
| </div> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div class="glass-card p-2 rounded-xl"> | |
| <img src="public/docs/images/join-partner.png" alt="Join Partner" class="w-full rounded-lg shadow-lg"> | |
| </div> | |
| <div> | |
| <div class="text-5xl font-bold step-number mb-6">02</div> | |
| <h3 class="text-2xl font-bold mb-4">Inviting Your Partner</h3> | |
| <ul class="space-y-4 text-gray-300"> | |
| <li class="flex gap-3"> | |
| <span class="mt-1.5 w-1.5 h-1.5 rounded-full bg-violet-500 shrink-0"></span> | |
| <span>Copy your <strong>Invite Link</strong> from the tools section.</span> | |
| </li> | |
| <li class="flex gap-3"> | |
| <span class="mt-1.5 w-1.5 h-1.5 rounded-full bg-violet-500 shrink-0"></span> | |
| <span>Send it to your partner via WhatsApp, email, or any app.</span> | |
| </li> | |
| <li class="flex gap-3"> | |
| <span class="mt-1.5 w-1.5 h-1.5 rounded-full bg-violet-500 shrink-0"></span> | |
| <span>When they click the link, they sign up and you become officially connected! 💕</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Step 3 & 4 Combined (Dashboard) --> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div class="order-2 md:order-1"> | |
| <div class="text-5xl font-bold step-number mb-6">03</div> | |
| <h3 class="text-2xl font-bold mb-4">Dashboard & Messaging</h3> | |
| <div class="space-y-6 text-gray-300"> | |
| <p><strong>Dashboard Layout:</strong> Find your profile and partner's name in the top right. Your shared "Couples' Streak" is displayed in the top left.</p> | |
| <div class="bg-white/5 p-4 rounded-lg border border-white/5"> | |
| <h4 class="text-pink-400 font-semibold mb-2">Sending Love</h4> | |
| <p class="text-sm">Each partner can send <strong>one message per day</strong>. Messages are locked for 30 days. Don't miss a day, or your streak resets!</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="order-1 md:order-2 glass-card p-2 rounded-xl"> | |
| <img src="public/docs/images/dashboard-overview.png" alt="Dashboard" class="w-full rounded-lg shadow-lg"> | |
| </div> | |
| </div> | |
| <!-- Step 5 (Tools) --> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div class="glass-card p-2 rounded-xl"> | |
| <img src="public/docs/images/tools-panel.png" alt="Tools Panel" class="w-full rounded-lg shadow-lg"> | |
| </div> | |
| <div> | |
| <div class="text-5xl font-bold step-number mb-6">04</div> | |
| <h3 class="text-2xl font-bold mb-4">Emergency Unlock</h3> | |
| <p class="text-gray-300 mb-6"> | |
| Life happens. If you need to read a message before the 30-day lock expires: | |
| </p> | |
| <ul class="space-y-4 text-gray-300"> | |
| <li class="flex gap-3"> | |
| <span class="mt-1.5 w-1.5 h-1.5 rounded-full bg-red-500 shrink-0"></span> | |
| <span>Request the <strong>Emergency Key</strong> from your partner (found in their tools panel).</span> | |
| </li> | |
| <li class="flex gap-3"> | |
| <span class="mt-1.5 w-1.5 h-1.5 rounded-full bg-red-500 shrink-0"></span> | |
| <span>Enter the key to unlock all previous messages immediately.</span> | |
| </li> | |
| <li class="flex gap-3"> | |
| <span class="mt-1.5 w-1.5 h-1.5 rounded-full bg-red-500 shrink-0"></span> | |
| <span>Note: A new key is required for future messages to maintain security.</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Grid --> | |
| <section id="features" class="mt-32"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold mb-4">Why Love Lock is Special</h2> | |
| <p class="text-gray-400">More than just a messaging app.</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="glass-card p-6 rounded-xl hover:bg-white/5 transition-colors"> | |
| <div class="text-3xl mb-4">🔥</div> | |
| <h4 class="text-xl font-semibold mb-2">Daily Motivation</h4> | |
| <p class="text-gray-400 text-sm">The streak system keeps couples motivated to maintain their routine of affection.</p> | |
| </div> | |
| <div class="glass-card p-6 rounded-xl hover:bg-white/5 transition-colors"> | |
| <div class="text-3xl mb-4">⏳</div> | |
| <h4 class="text-xl font-semibold mb-2">Build Anticipation</h4> | |
| <p class="text-gray-400 text-sm">Waiting 30 days to read a heartfelt message adds excitement back into the relationship.</p> | |
| </div> | |
| <div class="glass-card p-6 rounded-xl hover:bg-white/5 transition-colors"> | |
| <div class="text-3xl mb-4">🛡️</div> | |
| <h4 class="text-xl font-semibold mb-2">Private & Secure</h4> | |
| <p class="text-gray-400 text-sm">A dedicated, distraction-free space designed solely for you and your partner.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <footer class="mt-32 py-8 border-t border-white/5 text-center"> | |
| <p class="text-gray-500 text-sm">© 2025 Love Lock. All rights reserved.</p> | |
| <p class="text-gray-600 text-xs mt-2">Welcome to your journey of love.</p> | |
| </footer> | |
| </main> | |
| </body> | |
| </html> |