Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VEGO - The Future of Social Media</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #0f0e17; | |
| color: white; | |
| overflow-x: hidden; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #3a0ca3 0%, #4361ee 100%); | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #4cc9f0, #4361ee); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .post-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(67, 97, 238, 0.3); | |
| } | |
| .ai-assistant-bubble { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(67, 97, 238, 0.7); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(67, 97, 238, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(67, 97, 238, 0); | |
| } | |
| } | |
| .content-feed { | |
| scrollbar-width: thin; | |
| scrollbar-color: #4361ee #0f0e17; | |
| } | |
| .content-feed::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .content-feed::-webkit-scrollbar-track { | |
| background: #0f0e17; | |
| } | |
| .content-feed::-webkit-scrollbar-thumb { | |
| background-color: #4361ee; | |
| border-radius: 20px; | |
| } | |
| .glow { | |
| filter: drop-shadow(0 0 8px rgba(67, 97, 238, 0.7)); | |
| } | |
| .avatar-ring { | |
| border: 2px solid transparent; | |
| background: linear-gradient(#0f0e17, #0f0e17) padding-box, | |
| linear-gradient(135deg, #3a0ca3 0%, #4361ee 100%) border-box; | |
| } | |
| .typewriter { | |
| overflow: hidden; | |
| border-right: .15em solid #4cc9f0; | |
| white-space: nowrap; | |
| animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; | |
| } | |
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent } | |
| 50% { border-color: #4cc9f0; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="hidden md:flex md:flex-shrink-0"> | |
| <div class="flex flex-col w-64 gradient-bg"> | |
| <div class="flex items-center justify-center h-16 flex-shrink-0 px-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-brain text-3xl mr-2 text-white"></i> | |
| <span class="text-xl font-bold text-white">VEGO</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col flex-grow overflow-y-auto"> | |
| <div class="px-4 py-4"> | |
| <div class="flex items-center space-x-4 p-2 rounded-lg bg-indigo-900 bg-opacity-50"> | |
| <div class="relative"> | |
| <img class="w-10 h-10 rounded-full avatar-ring" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User profile"> | |
| <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-green-500 ring-2 ring-white"></span> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Erikleo Cepa</p> | |
| <p class="text-xs text-indigo-200">@erikleocepa</p> | |
| </div> | |
| <i class="fas fa-check-circle text-yellow-400 ml-auto"></i> | |
| </div> | |
| </div> | |
| <nav class="flex-1 px-2 space-y-1"> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-white bg-indigo-900 bg-opacity-30"> | |
| <i class="fas fa-home mr-3"></i> | |
| Home | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-900 hover:bg-opacity-30"> | |
| <i class="fas fa-compass mr-3"></i> | |
| Explore | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-900 hover:bg-opacity-30"> | |
| <i class="fas fa-users mr-3"></i> | |
| Communities | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-900 hover:bg-opacity-30"> | |
| <i class="fas fa-bell mr-3"></i> | |
| Notifications | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-900 hover:bg-opacity-30"> | |
| <i class="fas fa-envelope mr-3"></i> | |
| Messages | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-900 hover:bg-opacity-30"> | |
| <i class="fas fa-bookmark mr-3"></i> | |
| Bookmarks | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-900 hover:bg-opacity-30"> | |
| <i class="fas fa-user mr-3"></i> | |
| Profile | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-900 hover:bg-opacity-30"> | |
| <i class="fas fa-cog mr-3"></i> | |
| Settings | |
| </a> | |
| </nav> | |
| <div class="px-4 py-4"> | |
| <button class="w-full flex items-center justify-center px-4 py-3 text-sm font-medium rounded-lg text-white bg-gradient-to-r from-blue-400 to-indigo-600 hover:from-blue-500 hover:to-indigo-700"> | |
| <i class="fas fa-plus mr-2"></i> | |
| Create Post | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main content --> | |
| <div class="flex flex-col flex-1 overflow-hidden"> | |
| <!-- Top navigation --> | |
| <div class="flex items-center justify-between h-16 flex-shrink-0 px-4 bg-gray-900 border-b border-gray-800"> | |
| <div class="flex items-center md:hidden"> | |
| <button class="text-gray-400 hover:text-white focus:outline-none"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <div class="flex-1 max-w-xl mx-4"> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 flex items-center pl-3"> | |
| <i class="fas fa-search text-gray-400"></i> | |
| </div> | |
| <input class="block w-full pl-10 pr-3 py-2 rounded-lg bg-gray-800 border border-gray-700 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="Search VEGO..."> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-1 text-gray-400 rounded-full hover:text-white focus:outline-none"> | |
| <i class="fas fa-video"></i> | |
| </button> | |
| <button class="p-1 text-gray-400 rounded-full hover:text-white focus:outline-none"> | |
| <i class="fas fa-comment-dots"></i> | |
| </button> | |
| <div class="relative"> | |
| <button class="p-1 text-gray-400 rounded-full hover:text-white focus:outline-none"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <span class="absolute top-0 right-0 w-2 h-2 rounded-full bg-red-500"></span> | |
| </div> | |
| <div class="relative md:hidden"> | |
| <button class="flex items-center text-sm rounded-full focus:outline-none"> | |
| <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User profile"> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Content area --> | |
| <div class="flex flex-1 overflow-hidden"> | |
| <!-- Main feed --> | |
| <div class="flex-1 overflow-y-auto content-feed"> | |
| <div class="max-w-2xl mx-auto p-4"> | |
| <!-- Create post --> | |
| <div class="bg-gray-800 rounded-xl p-4 mb-6 shadow-lg"> | |
| <div class="flex items-start space-x-3"> | |
| <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User profile"> | |
| <div class="flex-1"> | |
| <div class="flex items-center space-x-2"> | |
| <button class="flex-1 text-left px-4 py-2 rounded-full bg-gray-700 text-gray-300 hover:bg-gray-600"> | |
| What's on your mind? | |
| </button> | |
| <button class="p-2 text-gray-400 hover:text-white"> | |
| <i class="fas fa-image"></i> | |
| </button> | |
| <button class="p-2 text-gray-400 hover:text-white"> | |
| <i class="fas fa-video"></i> | |
| </button> | |
| <button class="p-2 text-gray-400 hover:text-white"> | |
| <i class="fas fa-microphone"></i> | |
| </button> | |
| </div> | |
| <div class="mt-3 flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <button class="text-xs px-3 py-1 rounded-full bg-gray-700 text-gray-300 hover:bg-gray-600"> | |
| <i class="fas fa-magic mr-1"></i> AI Assist | |
| </button> | |
| <button class="text-xs px-3 py-1 rounded-full bg-gray-700 text-gray-300 hover:bg-gray-600"> | |
| <i class="fas fa-robot mr-1"></i> Generate | |
| </button> | |
| </div> | |
| <button class="text-sm px-4 py-1 rounded-full bg-gradient-to-r from-blue-500 to-indigo-600 text-white hover:from-blue-600 hover:to-indigo-700"> | |
| Post | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stories --> | |
| <div class="bg-gray-800 rounded-xl p-4 mb-6 shadow-lg overflow-hidden"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="font-medium">Stories</h3> | |
| <button class="text-sm text-indigo-400 hover:text-indigo-300">See All</button> | |
| </div> | |
| <div class="flex space-x-4 overflow-x-auto pb-2"> | |
| <div class="flex-shrink-0 relative"> | |
| <div class="w-24 h-32 rounded-xl bg-gradient-to-br from-purple-500 to-blue-600 flex items-center justify-center"> | |
| <i class="fas fa-plus text-white text-xl"></i> | |
| </div> | |
| <p class="text-xs text-center mt-1">Your Story</p> | |
| </div> | |
| <div class="flex-shrink-0 relative"> | |
| <div class="w-24 h-32 rounded-xl bg-gray-700 overflow-hidden"> | |
| <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330" alt="Story"> | |
| </div> | |
| <div class="absolute top-2 left-2 w-8 h-8 rounded-full border-2 border-indigo-500 overflow-hidden"> | |
| <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User"> | |
| </div> | |
| <p class="text-xs text-center mt-1">Sarah</p> | |
| </div> | |
| <div class="flex-shrink-0 relative"> | |
| <div class="w-24 h-32 rounded-xl bg-gray-700 overflow-hidden"> | |
| <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d" alt="Story"> | |
| </div> | |
| <div class="absolute top-2 left-2 w-8 h-8 rounded-full border-2 border-indigo-500 overflow-hidden"> | |
| <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/men/22.jpg" alt="User"> | |
| </div> | |
| <p class="text-xs text-center mt-1">Michael</p> | |
| </div> | |
| <div class="flex-shrink-0 relative"> | |
| <div class="w-24 h-32 rounded-xl bg-gray-700 overflow-hidden"> | |
| <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1519242220831-094109851b77" alt="Story"> | |
| </div> | |
| <div class="absolute top-2 left-2 w-8 h-8 rounded-full border-2 border-indigo-500 overflow-hidden"> | |
| <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/women/33.jpg" alt="User"> | |
| </div> | |
| <p class="text-xs text-center mt-1">Emma</p> | |
| </div> | |
| <div class="flex-shrink-0 relative"> | |
| <div class="w-24 h-32 rounded-xl bg-gray-700 overflow-hidden"> | |
| <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce" alt="Story"> | |
| </div> | |
| <div class="absolute top-2 left-2 w-8 h-8 rounded-full border-2 border-indigo-500 overflow-hidden"> | |
| <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User"> | |
| </div> | |
| <p class="text-xs text-center mt-1">David</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Assistant --> | |
| <div class="bg-gray-800 rounded-xl p-4 mb-6 shadow-lg"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-400 to-indigo-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot text-white"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">VEGO AI Assistant</h3> | |
| <p class="text-xs text-gray-400">Ready to help you create</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg p-3 mb-3"> | |
| <p class="text-sm">Hi Erikleo! I can help you generate content, write captions, or even create AI avatars. What would you like to do today?</p> | |
| </div> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <button class="text-xs px-3 py-2 rounded-lg bg-gray-700 text-gray-300 hover:bg-gray-600 flex items-center"> | |
| <i class="fas fa-pen-fancy mr-2"></i> Write caption | |
| </button> | |
| <button class="text-xs px-3 py-2 rounded-lg bg-gray-700 text-gray-300 hover:bg-gray-600 flex items-center"> | |
| <i class="fas fa-image mr-2"></i> Generate image | |
| </button> | |
| <button class="text-xs px-3 py-2 rounded-lg bg-gray-700 text-gray-300 hover:bg-gray-600 flex items-center"> | |
| <i class="fas fa-video mr-2"></i> Create video | |
| </button> | |
| <button class="text-xs px-3 py-2 rounded-lg bg-gray-700 text-gray-300 hover:bg-gray-600 flex items-center"> | |
| <i class="fas fa-user-robot mr-2"></i> Make avatar | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Posts --> | |
| <div class="bg-gray-800 rounded-xl p-4 mb-6 shadow-lg post-card transition duration-300"> | |
| <div class="flex items-start justify-between mb-3"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="relative"> | |
| <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User profile"> | |
| <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-green-500 ring-2 ring-gray-800"></span> | |
| </div> | |
| <div> | |
| <p class="font-medium">Sarah Johnson</p> | |
| <p class="text-xs text-gray-400">2h ago · <i class="fas fa-globe-americas"></i></p> | |
| </div> | |
| </div> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| <p class="mb-3">Just created this amazing AI-generated artwork with VEGO's new creative tools! The AI understood exactly what I was imagining. #DigitalArt #AICreativity</p> | |
| <div class="grid grid-cols-2 gap-2 mb-3"> | |
| <div class="rounded-lg overflow-hidden"> | |
| <img class="w-full h-48 object-cover" src="https://images.unsplash.com/photo-1637858868799-7f26a0640eb6" alt="AI Art"> | |
| </div> | |
| <div class="rounded-lg overflow-hidden"> | |
| <img class="w-full h-48 object-cover" src="https://images.unsplash.com/photo-1639762681057-408e52192e55" alt="AI Art"> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between text-gray-400 text-sm border-t border-gray-700 pt-3"> | |
| <div class="flex items-center space-x-4"> | |
| <button class="flex items-center hover:text-indigo-400"> | |
| <i class="fas fa-heart mr-1"></i> 243 | |
| </button> | |
| <button class="flex items-center hover:text-indigo-400"> | |
| <i class="fas fa-comment mr-1"></i> 56 | |
| </button> | |
| <button class="flex items-center hover:text-indigo-400"> | |
| <i class="fas fa-share mr-1"></i> 12 | |
| </button> | |
| </div> | |
| <button class="hover:text-indigo-400"> | |
| <i class="fas fa-bookmark"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-4 mb-6 shadow-lg post-card transition duration-300"> | |
| <div class="flex items-start justify-between mb-3"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="relative"> | |
| <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/22.jpg" alt="User profile"> | |
| <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-green-500 ring-2 ring-gray-800"></span> | |
| </div> | |
| <div> | |
| <p class="font-medium">Michael Chen</p> | |
| <p class="text-xs text-gray-400">4h ago · <i class="fas fa-users"></i></p> | |
| </div> | |
| </div> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| <p class="mb-3">Check out this AI-generated short film I made entirely with VEGO's new video synthesis tools! The AI helped with scripting, voiceover, and even the animations. Mind blown! 🤯</p> | |
| <div class="relative mb-3"> | |
| <div class="aspect-w-16 aspect-h-9 bg-gray-700 rounded-lg overflow-hidden"> | |
| <img class="w-full h-64 object-cover" src="https://images.unsplash.com/photo-1574717024453-354a7a89f6d3" alt="Video thumbnail"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <button class="w-16 h-16 rounded-full bg-indigo-600 bg-opacity-80 flex items-center justify-center hover:bg-opacity-100"> | |
| <i class="fas fa-play text-white text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between text-gray-400 text-sm border-t border-gray-700 pt-3"> | |
| <div class="flex items-center space-x-4"> | |
| <button class="flex items-center hover:text-indigo-400"> | |
| <i class="fas fa-heart mr-1"></i> 512 | |
| </button> | |
| <button class="flex items-center hover:text-indigo-400"> | |
| <i class="fas fa-comment mr-1"></i> 87 | |
| </button> | |
| <button class="flex items-center hover:text-indigo-400"> | |
| <i class="fas fa-share mr-1"></i> 43 | |
| </button> | |
| </div> | |
| <button class="hover:text-indigo-400"> | |
| <i class="fas fa-bookmark"></i> | |
| </button> | |
| <button class="text-xs px-2 py-1 rounded bg-gray-700 hover:bg-gray-600 flex items-center"> | |
| <i class="fas fa-robot mr-1"></i> Try this AI | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-4 mb-6 shadow-lg post-card transition duration-300"> | |
| <div class="flex items-start justify-between mb-3"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="relative"> | |
| <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/33.jpg" alt="User profile"> | |
| <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-yellow-500 ring-2 ring-gray-800"></span> | |
| </div> | |
| <div> | |
| <p class="font-medium">Emma Wilson <i class="fas fa-check-circle text-blue-400 ml-1"></i></p> | |
| <p class="text-xs text-gray-400">6h ago · <i class="fas fa-globe-americas"></i></p> | |
| </div> | |
| </div> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| <p class="mb-3">Just had the most fascinating conversation with my VEGO AI companion about the future of creative expression. It suggested some incredible ideas for my next project that I would have never thought of!</p> | |
| <div class="bg-gray-700 rounded-lg p-3 mb-3"> | |
| <div class="flex items-start mb-2"> | |
| <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center mr-2 flex-shrink-0"> | |
| <i class="fas fa-robot text-white text-sm"></i> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-2"> | |
| <p class="text-sm">Based on your interests in surrealism and digital art, have you considered creating a series where everyday objects transform into abstract landscapes? I can generate some concept sketches if you'd like!</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center mr-2 flex-shrink-0"> | |
| <i class="fas fa-robot text-white text-sm"></i> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-2"> | |
| <p class="text-sm">Also, your engagement metrics show your audience responds well to interactive content. Maybe we could create a piece where viewers can influence the artwork's evolution in real-time?</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between text-gray-400 text-sm border-t border-gray-700 pt-3"> | |
| <div class="flex items-center space-x-4"> | |
| <button class="flex items-center hover:text-indigo-400"> | |
| <i class="fas fa-heart mr-1"></i> 189 | |
| </button> | |
| <button class="flex items-center hover:text-indigo-400"> | |
| <i class="fas fa-comment mr-1"></i> 34 | |
| </button> | |
| <button class="flex items-center hover:text-indigo-400"> | |
| <i class="fas fa-share mr-1"></i> 8 | |
| </button> | |
| </div> | |
| <button class="hover:text-indigo-400"> | |
| <i class="fas fa-bookmark"></i> | |
| </button> | |
| <button class="text-xs px-2 py-1 rounded bg-gradient-to-r from-blue-500 to-indigo-600 text-white hover:from-blue-600 hover:to-indigo-700 flex items-center"> | |
| <i class="fas fa-comment-alt mr-1"></i> Ask AI | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right sidebar --> | |
| <div class="hidden lg:block lg:flex-shrink-0 lg:w-80 lg:overflow-y-auto border-l border-gray-800"> | |
| <div class="p-4"> | |
| <!-- Trending now --> | |
| <div class="bg-gray-800 rounded-xl p-4 mb-6 shadow-lg"> | |
| <h3 class="font-medium mb-3">Trending Now</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-pink-500 to-purple-600 flex items-center justify-center mr-3 flex-shrink-0"> | |
| <i class="fas fa-hashtag text-white"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-sm">#AICreativity</p> | |
| <p class="text-xs text-gray-400">12.5K posts</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-green-500 to-blue-600 flex items-center justify-center mr-3 flex-shrink-0"> | |
| <i class="fas fa-hashtag text-white"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-sm">#VEGOArt</p> | |
| <p class="text-xs text-gray-400">8.2K posts</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-yellow-500 to-orange-600 flex items-center justify-center mr-3 flex-shrink-0"> | |
| <i class="fas fa-hashtag text-white"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-sm">#DigitalTransformation</p> | |
| <p class="text-xs text-gray-400">5.7K posts</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-red-500 to-pink-600 flex items-center justify-center mr-3 flex-shrink-0"> | |
| <i class="fas fa-hashtag text-white"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-sm">#FutureOfSocial</p> | |
| <p class="text-xs text-gray-400">4.9K posts</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center mr-3 flex-shrink-0"> | |
| <i class="fas fa-hashtag text-white"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-sm">#Shqip</p> | |
| <p class="text-xs text-gray-400">3.1K posts</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Suggested accounts --> | |
| <div class="bg-gray-800 rounded-xl p-4 mb-6 shadow-lg"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="font-medium">Suggested Accounts</h3> | |
| <button class="text-sm text-indigo-400 hover:text-indigo-300">See All</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <div class="relative mr-3"> | |
| <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/28.jpg" alt="User profile"> | |
| <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-green-500 ring-2 ring-gray-800"></span> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="font-medium text-sm">Lisa Park</p> | |
| <p class="text-xs text-gray-400">AI Artist</p> | |
| </div> | |
| <button class="text-xs px-3 py-1 rounded-full bg-gray-700 hover:bg-gray-600">Follow</button> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="relative mr-3"> | |
| <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/41.jpg" alt="User profile"> | |
| <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-green-500 ring-2 ring-gray-800"></span> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="font-medium text-sm">James Rodriguez <i class="fas fa-check-circle text-blue-400 ml-1"></i></p> | |
| <p class="text-xs text-gray-400">Tech Influencer</p> | |
| </div> | |
| <button class="text-xs px-3 py-1 rounded-full bg-gray-700 hover:bg-gray-600">Follow</button> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="relative mr-3"> | |
| <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/19.jpg" alt="User profile"> | |
| <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-yellow-500 ring-2 ring-gray-800"></span> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="font-medium text-sm">Sophia Chen</p> | |
| <p class="text-xs text-gray-400">Digital Creator</p> | |
| </div> | |
| <button class="text-xs px-3 py-1 rounded-full bg-gray-700 hover:bg-gray-600">Follow</button> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="relative mr-3"> | |
| <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/36.jpg" alt="User profile"> | |
| <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-green-500 ring-2 ring-gray-800"></span> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="font-medium text-sm">David Kim</p> | |
| <p class="text-xs text-gray-400">AI Researcher</p> | |
| </div> | |
| <button class="text-xs px-3 py-1 rounded-full bg-gray-700 hover:bg-gray-600">Follow</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI tools spotlight --> | |
| <div class="bg-gray-800 rounded-xl p-4 shadow-lg"> | |
| <h3 class="font-medium mb-3">AI Tools Spotlight</h3> | |
| <div class="space-y-3"> | |
| <div class="bg-gradient-to-br from-blue-900 to-indigo-900 rounded-lg p-3"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center mr-2"> | |
| <i class="fas fa-image text-white text-sm"></i> | |
| </div> | |
| <p class="font-medium text-sm">Art Generator Pro</p> | |
| </div> | |
| <p class="text-xs text-gray-300 mb-2">Create stunning AI artwork with just a text prompt. Try our new styles!</p> | |
| <button class="w-full text-xs px-3 py-1 rounded-full bg-blue-600 hover:bg-blue-500">Try Now</button> | |
| </div> | |
| <div class="bg-gradient-to-br from-purple-900 to-indigo-900 rounded-lg p-3"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center mr-2"> | |
| <i class="fas fa-video text-white text-sm"></i> | |
| </div> | |
| <p class="font-medium text-sm">Video Synthesis</p> | |
| </div> | |
| <p class="text-xs text-gray-300 mb-2">Turn your ideas into professional videos with AI assistance.</p> | |
| <button class="w-full text-xs px-3 py-1 rounded-full bg-purple-600 hover:bg-purple-500">Try Now</button> | |
| </div> | |
| <div class="bg-gradient-to-br from-pink-900 to-purple-900 rounded-lg p-3"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 rounded-full bg-pink-500 flex items-center justify-center mr-2"> | |
| <i class="fas fa-user-robot text-white text-sm"></i> | |
| </div> | |
| <p class="font-medium text-sm">Avatar Creator</p> | |
| </div> | |
| <p class="text-xs text-gray-300 mb-2">Design your perfect digital persona with our advanced tools.</p> | |
| <button class="w-full text-xs px-3 py-1 rounded-full bg-pink-600 hover:bg-pink-500">Try Now</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile bottom navigation --> | |
| <div class="md:hidden fixed bottom-0 left-0 right-0 bg-gray-900 border-t border-gray-800"> | |
| <div class="flex justify-around items-center h-16"> | |
| <a href="#" class="flex flex-col items-center justify-center text-indigo-400"> | |
| <i class="fas fa-home text-lg"></i> | |
| <span class="text-xs mt-1">Home</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center justify-center text-gray-400 hover:text-white"> | |
| <i class="fas fa-compass text-lg"></i> | |
| <span class="text-xs mt-1">Explore</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center justify-center text-gray-400 hover:text-white"> | |
| <i class="fas fa-plus-circle text-2xl text-indigo-500 glow"></i> | |
| </a> | |
| <a href="#" class="flex flex-col items-center justify-center text-gray-400 hover:text-white"> | |
| <i class="fas fa-bell text-lg"></i> | |
| <span class="text-xs mt-1">Alerts</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center justify-center text-gray-400 hover:text-white"> | |
| <i class="fas fa-user text-lg"></i> | |
| <span class="text-xs mt-1">Profile</span> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- AI Assistant floating button --> | |
| <div class="fixed bottom-20 right-4 md:bottom-6 md:right-6"> | |
| <button class="w-14 h-14 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 text-white flex items-center justify-center shadow-lg ai-assistant-bubble hover:from-blue-600 hover:to-indigo-700"> | |
| <i class="fas fa-robot text-xl"></i> | |
| </button> | |
| </div> | |
| <script> | |
| // Typewriter effect for demo purposes | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const aiMessage = document.createElement('div'); | |
| aiMessage.className = 'typewriter text-sm font-medium mb-2'; | |
| aiMessage.textContent = 'Welcome to VEGO - Where your content thinks with you'; | |
| const aiBubble = document.querySelector('.ai-assistant-bubble'); | |
| aiBubble.addEventListener('click', function() { | |
| const assistantPanel = document.createElement('div'); | |
| assistantPanel.className = 'fixed bottom-24 right-4 w-72 bg-gray-800 rounded-xl shadow-xl border border-gray-700 z-50 p-4'; | |
| assistantPanel.innerHTML = ` | |
| <div class="flex justify-between items-center mb-3"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center mr-2"> | |
| <i class="fas fa-robot text-white"></i> | |
| </div> | |
| <h3 class="font-medium">VEGO AI</h3> | |
| </div> | |
| <button class="text-gray-400 hover:text-white close-ai"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg p-3 mb-3"> | |
| <p class="text-sm">Hi there! I'm your VEGO AI assistant. How can I help you create today?</p> | |
| </div> | |
| <div class="space-y-2"> | |
| <button class="w-full text-left px-3 py-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-sm flex items-center"> | |
| <i class="fas fa-pen-fancy mr-2"></i> Help me write a post | |
| </button> | |
| <button class="w-full text-left px-3 py-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-sm flex items-center"> | |
| <i class="fas fa-image mr-2"></i> Generate an image | |
| </button> | |
| <button class="w-full text-left px-3 py-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-sm flex items-center"> | |
| <i class="fas fa-video mr-2"></i> Create a short video | |
| </button> | |
| <button class="w-full text-left px-3 py-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-sm flex items-center"> | |
| <i class="fas fa-chart-line mr-2"></i> Analyze my engagement | |
| </button> | |
| </div> | |
| `; | |
| document.body.appendChild(assistantPanel); | |
| // Close button functionality | |
| const closeButton = assistantPanel.querySelector('.close-ai'); | |
| closeButton.addEventListener('click', function() { | |
| assistantPanel.remove(); | |
| }); | |
| // Close when clicking outside | |
| document.addEventListener('click', function(event) { | |
| if (!assistantPanel.contains(event.target) && event.target !== aiBubble) { | |
| assistantPanel.remove(); | |
| } | |
| }); | |
| }); | |
| // Language switcher functionality | |
| const languageOptions = ['English', 'Shqip', 'Español', 'Français']; | |
| let currentLanguage = 0; | |
| const languageButton = document.createElement('button'); | |
| languageButton.className = 'fixed top-4 right-4 text-xs px-2 py-1 rounded-full bg-gray-800 hover:bg-gray-700 z-50'; | |
| languageButton.textContent = languageOptions[currentLanguage]; | |
| languageButton.addEventListener('click', function() { | |
| currentLanguage = (currentLanguage + 1) % languageOptions.length; | |
| languageButton.textContent = languageOptions[currentLanguage]; | |
| // Show language change notification | |
| const notification = document.createElement('div'); | |
| notification.className = 'fixed top-16 right-4 bg-gray-800 text-white text-sm px-3 py-2 rounded-lg shadow-lg z-50'; | |
| notification.textContent = `Language set to ${languageOptions[currentLanguage]}`; | |
| document.body.appendChild(notification); | |
| setTimeout(() => { | |
| notification.remove(); | |
| }, 2000); | |
| }); | |
| document.body.appendChild(languageButton); | |
| }); | |
| </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=Erikartificial/vego-app-v2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |