Spaces:
Running
Running
Okay, now modify the site to look a lot more different towards modern UI, currently it focuses on things, which are not useful, gaming (why games are part of , okay), but the framework should involve much other aspects that does not conform to what has and is existing, hte UIUX, the style, the theme, we dont want another facebook, a failed social media, we want present reality, to live in the moment, to do meaning ful things, and bring the world out of the gutter that there is, and streamline sort thoughts and ideas for better existence - Follow Up Deployment
9463ec1
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Now | Presence-Focused Connection</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"> | |
| <style> | |
| /* Custom CSS for futuristic elements */ | |
| .holographic-card { | |
| background: rgba(255, 255, 255, 0.08); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.18); | |
| box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 5px #00f7ff, 0 0 10px #00f7ff; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #f59e0b, #f97316); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .mindful-card { | |
| background: rgba(245, 158, 11, 0.05); | |
| border-left: 4px solid #f59e0b; | |
| transition: all 0.3s ease; | |
| } | |
| .mindful-card:hover { | |
| background: rgba(245, 158, 11, 0.1); | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .ai-assistant { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| z-index: 100; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen"> | |
| <!-- Navigation Bar --> | |
| <nav class="bg-gray-800 h-16 flex items-center justify-between px-6 fixed w-full z-50"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-hourglass-half text-2xl text-amber-400"></i> | |
| <span class="text-xl font-bold text-amber-400">Now</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-6"> | |
| <a href="#" class="hover:text-amber-400 transition"><i class="fas fa-mind"></i> Presence</a> | |
| <a href="#" class="hover:text-amber-400 transition"><i class="fas fa-hands-helping"></i> Collaborate</a> | |
| <a href="#" class="hover:text-amber-400 transition"><i class="fas fa-lightbulb"></i> Ideas</a> | |
| <a href="#" class="hover:text-amber-400 transition"><i class="fas fa-heartbeat"></i> Wellbeing</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Find meaningful connections..." class="bg-gray-700 rounded-full py-1 px-4 pr-10 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500 w-40 md:w-64"> | |
| <i class="fas fa-search absolute right-3 top-2 text-gray-400"></i> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center"> | |
| <span class="text-xs font-bold">JD</span> | |
| </div> | |
| <span class="hidden md:inline">John Doe</span> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <div class="pt-16 pb-20 flex"> | |
| <!-- Left Sidebar --> | |
| <div class="hidden lg:block w-64 bg-gray-800 h-screen fixed overflow-y-auto"> | |
| <div class="p-4"> | |
| <div class="flex items-center space-x-3 mb-6"> | |
| <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center"> | |
| <span class="text-sm font-bold">JD</span> | |
| </div> | |
| <span>John Doe</span> | |
| </div> | |
| <div class="space-y-2"> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition"> | |
| <i class="fas fa-eye w-5 text-center text text-amber-400"></i> | |
| <span>Awareness</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition"> | |
| <i class="fas fa-seedling w-5 text-center text-emerald-400"></i> | |
| <span>Growth</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition"> | |
| <i class="fas fa-hands w-5 text-center text-blue-400"></i> | |
| <span>Service</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition"> | |
| <i class="fas fa-book w-5 text-center text-violet-400"></i> | |
| <span>Wisdom</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition"> | |
| <i class="fas fa-tree w-5 text-center text-green-400"></i> | |
| <span>Nature</span> | |
| </a> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="text-gray-400 uppercase text-xs font-bold mb-2">Your Shortcuts</h3> | |
| <div class="space-y-2"> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition"> | |
| <i class="fas fa-atom w-5 text-center text-purple-400"></i> | |
| <span>Quantum Computing</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition"> | |
| <i class="fas fa-rocket w-5 text-center text-red-400"></i> | |
| <span>Space Exploration</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition"> | |
| <i class="fas fa-dna w-5 text-center text-green-400"></i> | |
| <span>Biohacking</span> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="text-gray-400 uppercase text-xs font-bold mb-2">AI Assistants</h3> | |
| <div class="space-y-2"> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition"> | |
| <i class="fas fa-robot w-5 text-center text-blue-400"></i> | |
| <span>Personal AI</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition"> | |
| <i class="fas fa-brain w-5 text-center text-yellow-400"></i> | |
| <span>Mind Sync</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Feed --> | |
| <div class="flex-1 lg:ml-64 p-4"> | |
| <!-- Stories --> | |
| <div class="bg-gray-800 rounded-xl p-4 mb-6 holographic-card"> | |
| <h2 class="text-xl font-bold mb-4 gradient-text">Today's Stories</h2> | |
| <div class="flex space-x-4 overflow-x-auto pb-2"> | |
| <div class="flex-shrink-0 w-32 h-48 rounded-xl bg-gradient-to-b from-blue-500 to-purple-600 relative"> | |
| <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent rounded-b-xl"> | |
| <div class="w-10 h-10 rounded-full border-4 border-blue-400 bg-gray-800 absolute -top-5 left-3 flex items-center justify-center"> | |
| <i class="fas fa-plus"></i> | |
| </div> | |
| <span class="text-xs mt-6 block">Create Story</span> | |
| </div> | |
| </div> | |
| <div class="flex-shrink-0 w-32 h-48 rounded-xl bg-gray-700 relative overflow-hidden"> | |
| <img src="https://source.unsplash.com/random/300x500/?tech" alt="Story" class="w-full h-full object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent rounded-b-xl"> | |
| <div class="w-10 h-10 rounded-full border-4 border-blue-400 bg-gray-800 absolute -top-5 left-3 overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-full h-full object-cover"> | |
| </div> | |
| <span class="text-xs mt-6 block">Sarah K.</span> | |
| </div> | |
| </div> | |
| <div class="flex-shrink-0 w-32 h-48 rounded-xl bg-gray-700 relative overflow-hidden"> | |
| <img src="https://source.unsplash.com/random/300x500/?future" alt="Story" class="w-full h-full object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent rounded-b-xl"> | |
| <div class="w-10 h-10 rounded-full border-4 border-blue-400 bg-gray-800 absolute -top-5 left-3 overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-full h-full object-cover"> | |
| </div> | |
| <span class="text-xs mt-6 block">Mike T.</span> | |
| </div> | |
| </div> | |
| <div class="flex-shrink-0 w-32 h-48 rounded-xl bg-gray-700 relative overflow-hidden"> | |
| <img src="https://source.unsplash.com/random/300x500/?ai" alt="Story" class="w-full h-full object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent rounded-b-xl"> | |
| <div class="w-10 h-10 rounded-full border-4 border-blue-400 bg-gray-800 absolute -top-5 left-3 overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile" class="w-full h-full object-cover"> | |
| </div> | |
| <span class="text-xs mt-6 block">Lisa R.</span> | |
| </div> | |
| </div> | |
| <div class="flex-shrink-0 w-32 h-48 rounded-xl bg-gray-700 relative overflow-hidden"> | |
| <img src="https://source.unsplash.com/random/300x500/?space" alt="Story" class="w-full h-full object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent rounded-b-xl"> | |
| <div class="w-10 h-10 rounded-full border-4 border-blue-400 bg-gray-800 absolute -top-5 left-3 overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Profile" class="w-full h-full object-cover"> | |
| </div> | |
| <span class="text-xs mt-6 block">David L.</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Create Post --> | |
| <div class="bg-gray-800 rounded-xl p-4 mb-6 holographic-card"> | |
| <div class="flex items-center space-x-3 mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center"> | |
| <span class="text-sm font-bold">JD</span> | |
| </div> | |
| <input type="text" placeholder="What's on your mind, John?" class="bg-gray-700 rounded-full py-2 px-4 flex-1 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div class="flex justify-between border-t border-gray-700 pt-3"> | |
| <button class="flex items-center space-x-2 text-gray-300 hover:bg-gray-700 px-4 py-1 rounded-lg transition"> | |
| <i class="fas fa-video text-red-400"></i> | |
| <span>Live Video</span> | |
| </button> | |
| <button class="flex items-center space-x-2 text-gray-300 hover:bg-gray-700 px-4 py-1 rounded-lg transition"> | |
| <i class="fas fa-images text-green-400"></i> | |
| <span>Photo/Video</span> | |
| </button> | |
| <button class="flex items-center space-x-2 text-gray-300 hover:bg-gray-700 px-4 py-1 rounded-lg transition"> | |
| <i class="fas fa-smile text-yellow-400"></i> | |
| <span>Feeling/Activity</span> | |
| </button> | |
| <button class="flex items-center space-x-2 text-gray-300 hover:bg-gray-700 px-4 py-1 rounded-lg transition"> | |
| <i class="fas fa-brain text-purple-400"></i> | |
| <span>AI Thought</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Posts --> | |
| <div class="space-y-6"> | |
| <!-- Post 1 --> | |
| <div class="bg-gray-800 rounded-xl p-4 holographic-card"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center"> | |
| <span class="text-sm font-bold">AI</span> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">Quantum AI Network</h3> | |
| <p class="text-xs text-gray-400">Sponsored · <i class="fas fa-globe"></i></p> | |
| </div> | |
| </div> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| <p class="mb-4">The future of AI is here! Quantum AI Networks are revolutionizing how we process information. Join our beta program to experience computing at the speed of thought.</p> | |
| <div class="mb-4 rounded-xl overflow-hidden"> | |
| <img src="https://source.unsplash.com/random/800x400/?quantum" alt="Quantum Computing" class="w-full h-auto"> | |
| </div> | |
| <div class="flex justify-between text-gray-400 text-sm mb-4"> | |
| <div class="flex items-center space-x-1"> | |
| <div class="w-5 h-5 rounded-full bg-blue-500 flex items-center justify-center text-xs"> | |
| <i class="fas fa-thumbs-up"></i> | |
| </div> | |
| <span>1.2K</span> | |
| </div> | |
| <div> | |
| <span>248 comments · 56 shares</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between border-t border-gray-700 pt-3"> | |
| <button class="flex items-center space-x-2 text-gray-300 hover:bg-gray-700 px-4 py-1 rounded-lg transition flex-1 justify-center"> | |
| <i class="fas fa-thumbs-up"></i> | |
| <span>Like</span> | |
| </button> | |
| <button class="flex items-center space-x-2 text-gray-300 hover:bg-gray-700 px-4 py-1 rounded-lg transition flex-1 justify-center"> | |
| <i class="fas fa-comment"></i> | |
| <span>Comment</span> | |
| </button> | |
| <button class="flex items-center space-x-2 text-gray-300 hover:bg-gray-700 px-4 py-1 rounded-lg transition flex-1 justify-center"> | |
| <i class="fas fa-share"></i> | |
| <span>Share</span> | |
| </button> | |
| <button class="flex items-center space-x-2 text-gray-300 hover:bg-gray-700 px-4 py-1 rounded-lg transition flex-1 justify-center"> | |
| <i class="fas fa-brain"></i> | |
| <span>Mind Sync</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Post 2 --> | |
| <div class="bg-gray-800 rounded-xl p-4 holographic-card"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">Sarah K.</h3> | |
| <p class="text-xs text-gray-400">Yesterday at 3:45 PM · <i class="fas fa-globe"></i></p> | |
| </div> | |
| </div> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| <p class="mb-4">Just experienced my first neural link session! The ability to control devices with my thoughts is mind-blowing. The future is now! 🚀 #NeuralTech #FutureIsHere</p> | |
| <div class="mb-4 rounded-xl overflow-hidden"> | |
| <img src="https://source.unsplash.com/random/800x400/?neural" alt="Neural Interface" class="w-full h-auto"> | |
| </div> | |
| <div class="flex justify-between text-gray-400 text-sm mb-4"> | |
| <div class="flex items-center space-x-1"> | |
| <div class="w-5 h-5 rounded-full bg-blue-500 flex items-center justify-center text-xs"> | |
| <i class="fas fa-thumbs-up"></i> | |
| </div> | |
| <span>892</span> | |
| </div> | |
| <div> | |
| <span>143 comments · 28 shares</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between border-t border-gray-700 pt-3"> | |
| <button class="flex items-center space-x-2 text-gray-300 hover:bg-gray-700 px-4 py-1 rounded-lg transition flex-1 justify-center"> | |
| <i class="fas fa-thumbs-up"></i> | |
| <span>Like</span> | |
| </button> | |
| <button class="flex items-center space-x-2 text-gray-300 hover:bg-gray-700 px-4 py-1 rounded-lg transition flex-1 justify-center"> | |
| <i class="fas fa-comment"></i> | |
| <span>Comment</span> | |
| </button> | |
| <button class="flex items-center space-x-2 text-gray-300 hover:bg-gray-700 px-4 py-1 rounded-lg transition flex-1 justify-center"> | |
| <i class="fas fa-share"></i> | |
| <span>Share</span> | |
| </button> | |
| <button class="flex items-center space-x-2 text-gray-300 hover:bg-gray-700 px-4 py-1 rounded-lg transition flex-1 justify-center"> | |
| <i class="fas fa-brain"></i> | |
| <span>Mind Sync</span> | |
| </button> | |
| </div> | |
| <!-- Comments --> | |
| <div class="mt-4 pt-4 border-t border-gray-700"> | |
| <div class="flex items-start space-x-3 mb-4"> | |
| <div class="w-8 h-8 rounded-full bg-yellow-500 flex items-center justify-center text-xs font-bold"> | |
| MK | |
| </div> | |
| <div class="flex-1 bg-gray-700 rounded-xl p-3"> | |
| <div class="font-bold text-sm">Mark K.</div> | |
| <p class="text-sm">That's amazing! How was the calibration process? I've heard it can be intense for first-timers.</p> | |
| <div class="flex space-x-4 text-xs text-gray-400 mt-2"> | |
| <span>Like</span> | |
| <span>Reply</span> | |
| <span>2h</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center"> | |
| <i class="fas fa-plus text-xs"></i> | |
| </div> | |
| <input type="text" placeholder="Write a comment..." class="bg-gray-700 rounded-full py-1 px-4 flex-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Post 3 --> | |
| <div class="bg-gray-800 rounded-xl p-4 holographic-card"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">Mike T.</h3> | |
| <p class="text-xs text-gray-400">Shared from NeuralTech · 2 days ago · <i class="fas fa-globe"></i></p> | |
| </div> | |
| </div> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| <p class="mb-4">Our team just achieved a breakthrough in holographic communication! Soon you'll be able to project yourself anywhere in the world in real-time 3D. The future of remote work and social interaction is about to change forever.</p> | |
| <div class="mb-4 rounded-xl overflow-hidden"> | |
| <div class="relative aspect-video bg-gradient-to-r from-blue-900 to-purple-900 flex items-center justify-center"> | |
| <i class="fas fa-play-circle text-5xl text-white opacity-70"></i> | |
| <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent"> | |
| <span class="text-sm">2:45</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-gray-400 text-sm mb-4"> | |
| <div class="flex items-center space-x-1"> | |
| <div class="w-5 h-5 rounded-full bg-blue-500 flex items-center justify-center text-xs"> | |
| <i class="fas fa-thumbs-up"></i> | |
| </div> | |
| <span>3.4K</span> | |
| </div> | |
| <div> | |
| <span>512 comments · 198 shares</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between border-t border-gray-700 pt-3"> | |
| <button class="flex items-center space-x-2 text-gray-300 hover:bg-gray-700 px-4 py-1 rounded-lg transition flex-1 justify-center"> | |
| <i class="fas fa-thumbs-up"></i> | |
| <span>Like</span> | |
| </button> | |
| <button class="flex items-center space-x-2 text-gray-300 hover:bg-gray-700 px-4 py-1 rounded-lg transition flex-1 justify-center"> | |
| <i class="fas fa-comment"></i> | |
| <span>Comment</span> | |
| </button> | |
| <button class="flex items-center space-x-2 text-gray-300 hover:bg-gray-700 px-4 py-1 rounded-lg transition flex-1 justify-center"> | |
| <i class="fas fa-share"></i> | |
| <span>Share</span> | |
| </button> | |
| <button class="flex items-center space-x-2 text-gray-300 hover:bg-gray-700 px-4 py-1 rounded-lg transition flex-1 justify-center"> | |
| <i class="fas fa-brain"></i> | |
| <span>Mind Sync</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Sidebar --> | |
| <div class="hidden xl:block w-80 bg-gray-800 h-screen fixed right-0 overflow-y-auto p-4"> | |
| <div class="mb-6"> | |
| <h2 class="text-lg font-bold mb-4 gradient-text">Sponsored</h2> | |
| <div class="space-y-4"> | |
| <div class="bg-gray-700 rounded-xl overflow-hidden"> | |
| <img src="https://source.unsplash.com/random/300x200/?mars" alt="Mars Colony" class="w-full h-auto"> | |
| <div class="p-3"> | |
| <h3 class="font-bold">Mars Colony Initiative</h3> | |
| <p class="text-sm text-gray-400">Be among the first settlers on Mars. Applications open now!</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 rounded-xl overflow-hidden"> | |
| <img src="https://source.unsplash.com/random/300x200/?quantum" alt="Quantum" class="w-full h-auto"> | |
| <div class="p-3"> | |
| <h3 class="font-bold">Quantum Computing 101</h3> | |
| <p class="text-sm text-gray-400">Free course on the future of computing</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-bold gradient-text">Contacts</h2> | |
| <div class="flex space-x-3 text-gray-400"> | |
| <button><i class="fas fa-video"></i></button> | |
| <button><i class="fas fa-search"></i></button> | |
| <button><i class="fas fa-ellipsis-h"></i></button> | |
| </div> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition cursor-pointer"> | |
| <div class="relative"> | |
| <div class="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center"> | |
| <span class="text-sm font-bold">AM</span> | |
| </div> | |
| <div class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-green-400 border-2 border-gray-800"></div> | |
| </div> | |
| <span>Alex M.</span> | |
| </div> | |
| <div class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition cursor-pointer"> | |
| <div class="relative"> | |
| <div class="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center"> | |
| <span class="text-sm font-bold">JR</span> | |
| </div> | |
| <div class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-green-400 border-2 border-gray-800"></div> | |
| </div> | |
| <span>Jessica R.</span> | |
| </div> | |
| <div class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition cursor-pointer"> | |
| <div class="relative"> | |
| <div class="w-10 h-10 rounded-full bg-red-500 flex items-center justify-center"> | |
| <span class="text-sm font-bold">DP</span> | |
| </div> | |
| </div> | |
| <span>David P.</span> | |
| </div> | |
| <div class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition cursor-pointer"> | |
| <div class="relative"> | |
| <div class="w-10 h-10 rounded-full bg-yellow-500 flex items-center justify-center"> | |
| <span class="text-sm font-bold">SM</span> | |
| </div> | |
| <div class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-green-400 border-2 border-gray-800"></div> | |
| </div> | |
| <span>Sarah M.</span> | |
| </div> | |
| <div class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition cursor-pointer"> | |
| <div class="relative"> | |
| <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center"> | |
| <span class="text-sm font-bold">TK</span> | |
| </div> | |
| </div> | |
| <span>Thomas K.</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h2 class="text-lg font-bold mb-4 gradient-text">Group Conversations</h2> | |
| <div class="space-y-3"> | |
| <div class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition cursor-pointer"> | |
| <div class="relative"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center"> | |
| <i class="fas fa-atom"></i> | |
| </div> | |
| </div> | |
| <span>Quantum Physics Club</span> | |
| </div> | |
| <div class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition cursor-pointer"> | |
| <div class="relative"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-red-500 to-orange-600 flex items-center justify-center"> | |
| <i class="fas fa-rocket"></i> | |
| </div> | |
| </div> | |
| <span>Space Exploration</span> | |
| </div> | |
| <div class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition cursor-pointer"> | |
| <div class="relative"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-green-500 to-teal-600 flex items-center justify-center"> | |
| <i class="fas fa-dna"></i> | |
| </div> | |
| </div> | |
| <span>Biohackers United</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h2 class="text-lg font-bold mb-4 gradient-text">Your AI Assistants</h2> | |
| <div class="space-y-3"> | |
| <div class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition cursor-pointer"> | |
| <div class="relative"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-400 to-cyan-500 flex items-center justify-center"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| </div> | |
| <span>Personal Assistant</span> | |
| </div> | |
| <div class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition cursor-pointer"> | |
| <div class="relative"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-400 to-pink-500 flex items-center justify-center"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| </div> | |
| <span>Creative Partner</span> | |
| </div> | |
| <div class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition cursor-pointer"> | |
| <div class="relative"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-yellow-400 to-orange-500 flex items-center justify-center"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| </div> | |
| <span>Analytics Expert</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile Bottom Navigation --> | |
| <div class="fixed bottom-0 left-0 right-0 bg-gray-800 flex justify-around items-center h-16 lg:hidden z-50"> | |
| <button class="p-2 text-blue-400"> | |
| <i class="fas fa-home text-xl"></i> | |
| </button> | |
| <button class="p-2 text-gray-400"> | |
| <i class="fas fa-network-wired text-xl"></i> | |
| </button> | |
| <button class="p-2 text-gray-400"> | |
| <i class="fas fa-vr-cardboard text-xl"></i> | |
| </button> | |
| <button class="p-2 text-gray-400"> | |
| <i class="fas fa-bell text-xl"></i> | |
| </button> | |
| <button class="p-2 text-gray-400"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| <!-- AI Assistant Floating Button --> | |
| <div class="ai-assistant"> | |
| <button id="aiAssistantBtn" class="w-14 h-14 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center shadow-lg pulse-animation"> | |
| <i class="fas fa-robot text-2xl"></i> | |
| </button> | |
| <div id="aiAssistantPanel" class="hidden absolute bottom-16 right-0 w-72 bg-gray-800 rounded-xl shadow-xl p-4"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="font-bold gradient-text">AI Assistant</h3> | |
| <button id="closeAIPanel" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg p-3 mb-3"> | |
| <p class="text-sm">Hello John! How can I assist you today?</p> | |
| </div> | |
| <input type="text" placeholder="Ask me anything..." class="w-full bg-gray-700 rounded-full py-2 px-4 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <div class="mt-3 grid grid-cols-3 gap-2"> | |
| <button class="bg-gray-700 hover:bg-gray-600 rounded-lg py-1 px-2 text-xs">Post Idea</button> | |
| <button class="bg-gray-700 hover:bg-gray-600 rounded-lg py-1 px-2 text-xs">Schedule</button> | |
| <button class="bg-gray-700 hover:bg-gray-600 rounded-lg py-1 px-2 text-xs">Research</button> | |
| <button class="bg-gray-700 hover:bg-gray-600 rounded-lg py-1 px-2 text-xs">Translate</button> | |
| <button class="bg-gray-700 hover:bg-gray-600 rounded-lg py-1 px-2 text-xs">Summarize</button> | |
| <button class="bg-gray-700 hover:bg-gray-600 rounded-lg py-1 px-2 text-xs">Mind Sync</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // AI Assistant Toggle | |
| const aiAssistantBtn = document.getElementById('aiAssistantBtn'); | |
| const aiAssistantPanel = document.getElementById('aiAssistantPanel'); | |
| const closeAIPanel = document.getElementById('closeAIPanel'); | |
| aiAssistantBtn.addEventListener('click', () => { | |
| aiAssistantPanel.classList.toggle('hidden'); | |
| }); | |
| closeAIPanel.addEventListener('click', () => { | |
| aiAssistantPanel.classList.add('hidden'); | |
| }); | |
| // Simulate loading more posts when scrolling | |
| window.addEventListener('scroll', () => { | |
| if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500) { | |
| // In a real app, you would fetch more posts here | |
| console.log('Loading more posts...'); | |
| } | |
| }); | |
| // Responsive menu toggle (for mobile) | |
| // This would be expanded in a real implementation | |
| </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=triton7777/futureconnectv0" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |