Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Luxe Queer | Identity Sovereignty System</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| luxePurple: '#8a3ffc', | |
| luxePink: '#ff7eb6', | |
| luxeTeal: '#00d4d8', | |
| luxeGold: '#ffd700', | |
| luxeBlack: '#1a1a1a', | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| display: ['Playfair Display', 'serif'], | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap'); | |
| .gradient-bg { | |
| background: linear-gradient(135deg, rgba(138,63,252,0.1) 0%, rgba(255,126,182,0.1) 50%, rgba(0,212,216,0.1) 100%); | |
| } | |
| .identity-card { | |
| transition: all 0.3s ease; | |
| transform-style: preserve-3d; | |
| } | |
| .identity-card:hover { | |
| transform: translateY(-5px) rotateX(5deg); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .rainbow-divider { | |
| height: 4px; | |
| background: linear-gradient(90deg, #ff0000 0%, #ff7f00 16.66%, #ffff00 33.33%, #00ff00 50%, #0000ff 66.66%, #4b0082 83.33%, #9400d3 100%); | |
| } | |
| .glow-text { | |
| text-shadow: 0 0 8px rgba(255, 126, 182, 0.6); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-luxeBlack text-white font-sans"> | |
| <!-- Navigation --> | |
| <nav class="bg-black bg-opacity-80 backdrop-blur-md fixed w-full z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <span class="text-2xl font-display font-bold bg-gradient-to-r from-luxePurple via-luxePink to-luxeTeal bg-clip-text text-transparent">LUXE QUEER</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-8"> | |
| <a href="#home" class="text-luxePink hover:text-white px-3 py-2 rounded-md text-sm font-medium transition">Home</a> | |
| <a href="#about" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition">About</a> | |
| <a href="#system" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition">Identity System</a> | |
| <a href="#community" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition">Community</a> | |
| <a href="#contact" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition">Contact</a> | |
| </div> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="mobile-menu-button" class="text-gray-300 hover:text-white focus:outline-none"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-black bg-opacity-90"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#home" class="text-luxePink block px-3 py-2 rounded-md text-base font-medium">Home</a> | |
| <a href="#about" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">About</a> | |
| <a href="#system" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Identity System</a> | |
| <a href="#community" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Community</a> | |
| <a href="#contact" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="pt-32 pb-20 px-4 sm:px-6 lg:px-8 gradient-bg"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center"> | |
| <div class="mb-12 lg:mb-0"> | |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-display font-bold leading-tight mb-6"> | |
| <span class="bg-gradient-to-r from-luxePurple via-luxePink to-luxeTeal bg-clip-text text-transparent">Identity Sovereignty</span><br> | |
| <span class="glow-text">For The Queer Community</span> | |
| </h1> | |
| <p class="text-lg text-gray-300 mb-8 max-w-lg"> | |
| A revolutionary system that empowers individuals to define, express, and protect their authentic identities in digital and physical spaces. | |
| </p> | |
| <div class="flex flex-wrap gap-4"> | |
| <a href="#system" class="bg-gradient-to-r from-luxePurple to-luxePink text-white px-6 py-3 rounded-full font-medium hover:opacity-90 transition shadow-lg hover:shadow-xl"> | |
| Explore the System | |
| </a> | |
| <a href="#demo" class="border border-luxeTeal text-luxeTeal px-6 py-3 rounded-full font-medium hover:bg-luxeTeal hover:text-luxeBlack transition"> | |
| Live Demo | |
| </a> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="relative z-10 rounded-2xl overflow-hidden shadow-2xl"> | |
| <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" | |
| alt="Queer community celebrating" | |
| class="w-full h-auto object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> | |
| <div class="absolute bottom-0 left-0 p-6"> | |
| <p class="text-white text-sm italic">"Your identity is your sovereign right"</p> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-6 -right-6 w-32 h-32 rounded-full bg-luxePink opacity-20 blur-xl"></div> | |
| <div class="absolute -top-6 -left-6 w-40 h-40 rounded-full bg-luxeTeal opacity-20 blur-xl"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="rainbow-divider"></div> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 px-4 sm:px-6 lg:px-8 bg-luxeBlack"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-display font-bold mb-4"> | |
| <span class="bg-gradient-to-r from-luxePink to-luxeTeal bg-clip-text text-transparent">The Luxe Queer Vision</span> | |
| </h2> | |
| <p class="max-w-3xl mx-auto text-gray-300"> | |
| We're building a world where every individual has complete autonomy over how their identity is represented, shared, and protected across all platforms and interactions. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-900 bg-opacity-50 p-8 rounded-xl identity-card border border-gray-800 hover:border-luxePurple"> | |
| <div class="text-luxePink text-4xl mb-4"> | |
| <i class="fas fa-fingerprint"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Self-Defined Identity</h3> | |
| <p class="text-gray-300"> | |
| Break free from restrictive categories. Define your identity on your own terms with our multidimensional identity framework. | |
| </p> | |
| </div> | |
| <div class="bg-gray-900 bg-opacity-50 p-8 rounded-xl identity-card border border-gray-800 hover:border-luxeTeal"> | |
| <div class="text-luxeTeal text-4xl mb-4"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Granular Control</h3> | |
| <p class="text-gray-300"> | |
| Decide exactly what information to share, with whom, and in what context. Your rules, your boundaries. | |
| </p> | |
| </div> | |
| <div class="bg-gray-900 bg-opacity-50 p-8 rounded-xl identity-card border border-gray-800 hover:border-luxeGold"> | |
| <div class="text-luxeGold text-4xl mb-4"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Community Validation</h3> | |
| <p class="text-gray-300"> | |
| Connect with others who share similar identities while maintaining your unique self-expression. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- System Demo Section --> | |
| <section id="system" class="py-20 px-4 sm:px-6 lg:px-8 gradient-bg"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-display font-bold mb-4"> | |
| <span class="bg-gradient-to-r from-luxePurple to-luxePink bg-clip-text text-transparent">Identity Sovereignty System</span> | |
| </h2> | |
| <p class="max-w-3xl mx-auto text-gray-300"> | |
| Experience how our system empowers you to craft and control your digital identity with precision and elegance. | |
| </p> | |
| </div> | |
| <div class="grid lg:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <div class="bg-gray-900 bg-opacity-70 rounded-xl p-8 shadow-xl border border-gray-800 mb-8"> | |
| <h3 class="text-2xl font-bold mb-6 text-luxeTeal">Create Your Identity Profile</h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <label class="block text-gray-300 mb-2">Core Identity</label> | |
| <div class="flex flex-wrap gap-2" id="core-identity-tags"> | |
| <!-- Tags will be added here by JS --> | |
| </div> | |
| <div class="mt-2 relative"> | |
| <input type="text" id="identity-input" placeholder="Add your identity terms" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-luxePurple"> | |
| <button id="add-identity" class="absolute right-2 top-1/2 transform -translate-y-1/2 text-luxePink hover:text-white"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-gray-300 mb-2">Pronouns</label> | |
| <div class="flex flex-wrap gap-2" id="pronoun-tags"> | |
| <!-- Tags will be added here by JS --> | |
| </div> | |
| <select id="pronoun-select" class="mt-2 w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-luxePurple"> | |
| <option value="">Select or add pronouns</option> | |
| <option value="they/them">they/them</option> | |
| <option value="she/her">she/her</option> | |
| <option value="he/him">he/him</option> | |
| <option value="ze/zir">ze/zir</option> | |
| <option value="custom">+ Custom</option> | |
| </select> | |
| <div id="custom-pronoun-container" class="mt-2 hidden"> | |
| <input type="text" id="custom-pronoun" placeholder="Enter custom pronouns" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-luxePurple"> | |
| <button id="add-custom-pronoun" class="mt-2 bg-luxePurple text-white px-4 py-1 rounded-lg text-sm">Add</button> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-gray-300 mb-2">Visibility Settings</label> | |
| <div class="space-y-3"> | |
| <div class="flex items-center"> | |
| <input type="radio" id="visibility-public" name="visibility" value="public" class="h-4 w-4 text-luxePink focus:ring-luxePink border-gray-600" checked> | |
| <label for="visibility-public" class="ml-2 block text-sm text-gray-300">Public - Visible to everyone</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="visibility-community" name="visibility" value="community" class="h-4 w-4 text-luxePink focus:ring-luxePink border-gray-600"> | |
| <label for="visibility-community" class="ml-2 block text-sm text-gray-300">Community - Visible only to queer members</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="visibility-custom" name="visibility" value="custom" class="h-4 w-4 text-luxePink focus:ring-luxePink border-gray-600"> | |
| <label for="visibility-custom" class="ml-2 block text-sm text-gray-300">Custom - Choose who can see</label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="generate-identity" class="w-full bg-gradient-to-r from-luxePurple to-luxePink text-white px-6 py-4 rounded-xl font-bold text-lg hover:opacity-90 transition shadow-lg hover:shadow-xl"> | |
| Generate My Sovereign Identity | |
| </button> | |
| </div> | |
| <div id="demo" class="bg-gray-900 bg-opacity-70 rounded-xl p-8 shadow-xl border-2 border-luxePurple min-h-[400px] flex items-center justify-center"> | |
| <div id="identity-display" class="text-center"> | |
| <div class="text-gray-400 mb-8"> | |
| <i class="fas fa-user-astronaut text-6xl opacity-50"></i> | |
| <p class="mt-4">Your sovereign identity will appear here</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Community Section --> | |
| <section id="community" class="py-20 px-4 sm:px-6 lg:px-8 bg-luxeBlack"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-display font-bold mb-4"> | |
| <span class="bg-gradient-to-r from-luxePink to-luxeTeal bg-clip-text text-transparent">Join Our Community</span> | |
| </h2> | |
| <p class="max-w-3xl mx-auto text-gray-300"> | |
| Connect with others who value identity sovereignty and queer excellence. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="bg-gray-900 p-6 rounded-xl border border-gray-800 hover:border-luxePink transition text-center"> | |
| <div class="text-luxePink text-4xl mb-4"> | |
| <i class="fas fa-calendar-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Events</h3> | |
| <p class="text-gray-300 text-sm"> | |
| Virtual and in-person gatherings celebrating queer identity and sovereignty. | |
| </p> | |
| </div> | |
| <div class="bg-gray-900 p-6 rounded-xl border border-gray-800 hover:border-luxeTeal transition text-center"> | |
| <div class="text-luxeTeal text-4xl mb-4"> | |
| <i class="fas fa-comments"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Discussions</h3> | |
| <p class="text-gray-300 text-sm"> | |
| Safe spaces for meaningful conversations about identity and self-determination. | |
| </p> | |
| </div> | |
| <div class="bg-gray-900 p-6 rounded-xl border border-gray-800 hover:border-luxeGold transition text-center"> | |
| <div class="text-luxeGold text-4xl mb-4"> | |
| <i class="fas fa-graduation-cap"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Education</h3> | |
| <p class="text-gray-300 text-sm"> | |
| Workshops and resources on identity sovereignty and digital rights. | |
| </p> | |
| </div> | |
| <div class="bg-gray-900 p-6 rounded-xl border border-gray-800 hover:border-luxePurple transition text-center"> | |
| <div class="text-luxePurple text-4xl mb-4"> | |
| <i class="fas fa-hands-helping"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Support</h3> | |
| <p class="text-gray-300 text-sm"> | |
| Peer support networks for navigating identity in different contexts. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 gradient-bg"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-display font-bold mb-4"> | |
| <span class="bg-gradient-to-r from-luxePurple to-luxePink bg-clip-text text-transparent">Get In Touch</span> | |
| </h2> | |
| <p class="max-w-3xl mx-auto text-gray-300"> | |
| Have questions about identity sovereignty or want to collaborate? Reach out to us. | |
| </p> | |
| </div> | |
| <div class="grid lg:grid-cols-2 gap-12"> | |
| <div class="bg-gray-900 bg-opacity-70 rounded-xl p-8 shadow-xl border border-gray-800"> | |
| <form id="contact-form"> | |
| <div class="space-y-6"> | |
| <div> | |
| <label for="name" class="block text-gray-300 mb-2">Name</label> | |
| <input type="text" id="name" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-luxePurple"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-gray-300 mb-2">Email</label> | |
| <input type="email" id="email" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-luxePurple"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-gray-300 mb-2">Message</label> | |
| <textarea id="message" rows="5" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-luxePurple"></textarea> | |
| </div> | |
| <button type="submit" class="bg-gradient-to-r from-luxePurple to-luxePink text-white px-6 py-3 rounded-full font-medium hover:opacity-90 transition shadow-lg hover:shadow-xl"> | |
| Send Message | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <div> | |
| <div class="bg-gray-900 bg-opacity-70 rounded-xl p-8 shadow-xl border border-gray-800 mb-6"> | |
| <h3 class="text-xl font-bold mb-4 text-luxeTeal">Connect With Us</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <div class="text-luxePink text-xl mr-4"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <span class="text-gray-300">hello@luxequeer.system</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="text-luxePink text-xl mr-4"> | |
| <i class="fab fa-twitter"></i> | |
| </div> | |
| <span class="text-gray-300">@LuxeQueer</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="text-luxePink text-xl mr-4"> | |
| <i class="fab fa-instagram"></i> | |
| </div> | |
| <span class="text-gray-300">@LuxeQueerSystem</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 bg-opacity-70 rounded-xl p-8 shadow-xl border border-gray-800"> | |
| <h3 class="text-xl font-bold mb-4 text-luxeTeal">Newsletter</h3> | |
| <p class="text-gray-300 mb-4"> | |
| Stay updated on identity sovereignty developments and community events. | |
| </p> | |
| <div class="flex"> | |
| <input type="email" placeholder="Your email" class="flex-grow bg-gray-800 border border-gray-700 rounded-l-lg px-4 py-2 text-white focus:outline-none"> | |
| <button class="bg-luxePurple text-white px-4 py-2 rounded-r-lg font-medium"> | |
| Subscribe | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-black bg-opacity-90 py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4 text-luxePink">Luxe Queer</h3> | |
| <p class="text-gray-400 text-sm"> | |
| Empowering queer individuals with sovereign identity systems for a more authentic digital future. | |
| </p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4 text-luxeTeal">System</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">How It Works</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Features</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Security</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Roadmap</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4 text-luxeGold">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">FAQ</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Support</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4 text-luxePurple">Legal</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Terms of Service</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Data Sovereignty</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Cookies</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 text-sm mb-4 md:mb-0"> | |
| © 2023 Luxe Queer System. All rights reserved. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-luxePink transition"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-luxePink transition"> | |
| <i class="fab fa-instagram text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-luxePink transition"> | |
| <i class="fab fa-discord text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-luxePink transition"> | |
| <i class="fab fa-github text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Close mobile menu when clicking a link | |
| document.querySelectorAll('#mobile-menu a').forEach(link => { | |
| link.addEventListener('click', function() { | |
| document.getElementById('mobile-menu').classList.add('hidden'); | |
| }); | |
| }); | |
| // Smooth scrolling for anchor links | |
| 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' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Identity System Demo Functionality | |
| const identityTagsContainer = document.getElementById('core-identity-tags'); | |
| const pronounTagsContainer = document.getElementById('pronoun-tags'); | |
| const identityInput = document.getElementById('identity-input'); | |
| const addIdentityBtn = document.getElementById('add-identity'); | |
| const pronounSelect = document.getElementById('pronoun-select'); | |
| const customPronounContainer = document.getElementById('custom-pronoun-container'); | |
| const customPronounInput = document.getElementById('custom-pronoun'); | |
| const addCustomPronounBtn = document.getElementById('add-custom-pronoun'); | |
| const generateIdentityBtn = document.getElementById('generate-identity'); | |
| const identityDisplay = document.getElementById('identity-display'); | |
| // Sample identity tags | |
| const sampleIdentities = ['queer', 'non-binary', 'trans', 'pansexual']; | |
| const samplePronouns = ['they/them']; | |
| // Add sample tags on load | |
| window.addEventListener('DOMContentLoaded', function() { | |
| sampleIdentities.forEach(tag => { | |
| addTag(tag, identityTagsContainer); | |
| }); | |
| samplePronouns.forEach(tag => { | |
| addTag(tag, pronounTagsContainer); | |
| }); | |
| }); | |
| // Add identity tag | |
| addIdentityBtn.addEventListener('click', function() { | |
| const value = identityInput.value.trim(); | |
| if (value) { | |
| addTag(value, identityTagsContainer); | |
| identityInput.value = ''; | |
| } | |
| }); | |
| identityInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| const value = identityInput.value.trim(); | |
| if (value) { | |
| addTag(value, identityTagsContainer); | |
| identityInput.value = ''; | |
| } | |
| } | |
| }); | |
| // Pronoun select change | |
| pronounSelect.addEventListener('change', function() { | |
| if (this.value === 'custom') { | |
| customPronounContainer.classList.remove('hidden'); | |
| } else if (this.value) { | |
| addTag(this.value, pronounTagsContainer); | |
| this.value = ''; | |
| customPronounContainer.classList.add('hidden'); | |
| } | |
| }); | |
| // Add custom pronoun | |
| addCustomPronounBtn.addEventListener('click', function() { | |
| const value = customPronounInput.value.trim(); | |
| if (value) { | |
| addTag(value, pronounTagsContainer); | |
| customPronounInput.value = ''; | |
| customPronounContainer.classList.add('hidden'); | |
| pronounSelect.value = ''; | |
| } | |
| }); | |
| // Generate identity display | |
| generateIdentityBtn.addEventListener('click', function() { | |
| const identityTags = Array.from(identityTagsContainer.querySelectorAll('.tag')).map(tag => tag.textContent.replace('×', '').trim()); | |
| const pronounTags = Array.from(pronounTagsContainer.querySelectorAll('.tag')).map(tag => tag.textContent.replace('×', '').trim()); | |
| const visibility = document.querySelector('input[name="visibility"]:checked').value; | |
| // Create display | |
| let visibilityText = ''; | |
| let visibilityIcon = ''; | |
| switch(visibility) { | |
| case 'public': | |
| visibilityText = 'Public Identity'; | |
| visibilityIcon = '<i class="fas fa-globe text-luxeTeal"></i>'; | |
| break; | |
| case 'community': | |
| visibilityText = 'Community Identity'; | |
| visibilityIcon = '<i class="fas fa-users text-luxePink"></i>'; | |
| break; | |
| case 'custom': | |
| visibilityText = 'Custom Identity'; | |
| visibilityIcon = '<i class="fas fa-cog text-luxeGold"></i>'; | |
| break; | |
| } | |
| let html = ` | |
| <div class="animate-fade-in"> | |
| <div class="flex justify-center mb-6"> | |
| <div class="relative"> | |
| <div class="w-24 h-24 rounded-full bg-gradient-to-r from-luxePurple to-luxePink flex items-center justify-center text-white text-3xl"> | |
| <i class="fas fa-user-astronaut"></i> | |
| </div> | |
| <div class="absolute -bottom-2 -right-2 bg-luxeBlack p-1 rounded-full text-xl"> | |
| ${visibilityIcon} | |
| </div> | |
| </div> | |
| </div> | |
| <h3 class="text-2xl font-display font-bold mb-2">Sovereign Identity</h3> | |
| <p class="text-luxeTeal mb-6">${visibilityText}</p> | |
| <div class="mb-6"> | |
| <h4 class="text-sm uppercase tracking-wider text-gray-400 mb-2">Identities</h4> | |
| <div class="flex flex-wrap justify-center gap-2"> | |
| ${identityTags.map(tag => `<span class="bg-gray-800 px-3 py-1 rounded-full text-sm">${tag}</span>`).join('')} | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="text-sm uppercase tracking-wider text-gray-400 mb-2">Pronouns</h4> | |
| <div class="flex flex-wrap justify-center gap-2"> | |
| ${pronounTags.map(tag => `<span class="bg-luxePurple bg-opacity-20 px-3 py-1 rounded-full text-sm">${tag}</span>`).join('')} | |
| </div> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-8"> | |
| <p>This identity is sovereign and controlled entirely by you.</p> | |
| <p class="mt-1">You can modify or revoke access at any time.</p> | |
| </div> | |
| </div> | |
| `; | |
| identityDisplay.innerHTML = html; | |
| // Scroll to display | |
| document.getElementById('demo').scrollIntoView({ behavior: 'smooth', block: 'center' }); | |
| }); | |
| // Helper function to add tags | |
| function addTag(text, container) { | |
| const tag = document.createElement('div'); | |
| tag.className = 'tag bg-gray-800 px-3 py-1 rounded-full text-sm flex items-center gap-1'; | |
| tag.innerHTML = `${text} <span class="remove-tag cursor-pointer text-gray-400 hover:text-white">×</span>`; | |
| tag.querySelector('.remove-tag').addEventListener('click', function() { | |
| tag.remove(); | |
| }); | |
| container.appendChild(tag); | |
| } | |
| // Form submission | |
| document.getElementById('contact-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| alert('Thank you for your message! We will get back to you soon.'); | |
| this.reset(); | |
| }); | |
| </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=QueerAgent1/luxe-queer-system" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |