Spaces:
Running
Running
well you didn't adapt any ui ux, current one is too naive native simple - Follow Up Deployment
4697b7c
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(30, 41, 59, 0.5); | |
| backdrop-filter: blur(16px); | |
| -webkit-backdrop-filter: blur(16px); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| box-shadow: 0 8px 32px 0 rgba(15, 23, 42, 0.5); | |
| } | |
| .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-[#111827] h-20 border-b border-gray-700/50 flex items-center justify-between px-6 fixed w-full z-50 backdrop-blur-md"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-500 to-amber-600 flex items-center justify-center"> | |
| <i class="fas fa-hourglass-half text-xl text-white"></i> | |
| </div> | |
| <span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-amber-400 to-amber-600">Now</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-6"> | |
| <a href="#" class="flex flex-col items-center hover:text-amber-400 transition group"> | |
| <div class="w-10 h-10 rounded-xl bg-gray-700/50 flex items-center justify-center group-hover:bg-amber-900/30 group-hover:border group-hover:border-amber-400/20 transition"> | |
| <i class="fas fa-brain text-lg gradient-text"></i> | |
| </div> | |
| <span class="text-xs mt-1 tracking-wide">Presence</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center hover:text-amber-400 transition group"> | |
| <div class="w-10 h-10 rounded-xl bg-gray-700/50 flex items-center justify-center group-hover:bg-amber-900/30 group-hover:border group-hover:border-amber-400/20 transition"> | |
| <i class="fas fa-hands-helping text-lg gradient-text"></i> | |
| </div> | |
| <span class="text-xs mt-1 tracking-wide">Connect</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center hover:text-amber-400 transition group"> | |
| <div class="w-10 h-10 rounded-xl bg-gray-700/50 flex items-center justify-center group-hover:bg-amber-900/30 group-hover:border group-hover:border-amber-400/20 transition"> | |
| <i class="fas fa-seedling text-lg gradient-text"></i> | |
| </div> | |
| <span class="text-xs mt-1 tracking-wide">Grow</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center hover:text-amber-400 transition group"> | |
| <div class="w-10 h-10 rounded-xl bg-gray-700/50 flex items-center justify-center group-hover:bg-amber-900/30 group-hover:border group-hover:border-amber-400/20 transition"> | |
| <i class="fas fa-heart-pulse text-lg gradient-text"></i> | |
| </div> | |
| <span class="text-xs mt-1 tracking-wide">Wellbeing</span> | |
| </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> |