Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SocialSphere - Connect with the World</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| <!-- Custom Tailwind Configuration for Brand Colors --> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| brand: { | |
| light: '#42b883', | |
| DEFAULT: '#1877f2', | |
| dark: '#35495e', | |
| bg: '#f0f2f5' | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-brand-bg text-gray-800 font-sans antialiased overflow-x-hidden"> | |
| <!-- Navbar Web Component --> | |
| <app-navbar></app-navbar> | |
| <!-- Main Container --> | |
| <div class="pt-16 md:pt-20 pb-10 px-0 md:px-4 max-w-[1600px] mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-12 gap-6"> | |
| <!-- Left Sidebar --> | |
| <div class="hidden lg:block lg:col-span-3"> | |
| <div class="sticky top-20 space-y-4"> | |
| <app-sidebar-left></app-sidebar-left> | |
| </div> | |
| </div> | |
| <!-- Main Feed --> | |
| <div class="col-span-1 md:col-span-4 lg:col-span-6 space-y-4"> | |
| <!-- Stories Section --> | |
| <div class="flex gap-2 overflow-x-auto pb-2 scrollbar-hide"> | |
| <!-- My Story --> | |
| <div class="flex-shrink-0 w-28 h-48 bg-white rounded-xl shadow-sm relative group cursor-pointer overflow-hidden"> | |
| <img src="http://static.photos/people/112x168/10" class="absolute inset-0 w-full h-full object-cover opacity-80 group-hover:opacity-60 transition" alt="My Story"> | |
| <div class="absolute bottom-0 w-full h-16 bg-white flex items-center justify-center rounded-b-xl"> | |
| <div class="w-8 h-8 rounded-full border-4 border-brand-blue-500 bg-blue-500 text-white flex items-center justify-center text-xs font-bold absolute -top-4 left-1/2 transform -translate-x-1/2">+</div> | |
| <span class="text-xs font-semibold mt-2">Create Story</span> | |
| </div> | |
| </div> | |
| <!-- Friend Story 1 --> | |
| <div class="flex-shrink-0 w-28 h-48 bg-white rounded-xl shadow-sm relative group cursor-pointer overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/50"></div> | |
| <img src="http://static.photos/travel/112x168/101" class="absolute inset-0 w-full h-full object-cover" alt="Story"> | |
| <div class="absolute top-2 left-2 w-8 h-8 rounded-full border-4 border-brand-blue-500 overflow-hidden"> | |
| <img src="http://static.photos/people/50x50/45" alt="User"> | |
| </div> | |
| <span class="absolute bottom-2 left-2 right-2 text-white text-xs font-bold truncate">Sarah J.</span> | |
| </div> | |
| <!-- Friend Story 2 --> | |
| <div class="flex-shrink-0 w-28 h-48 bg-white rounded-xl shadow-sm relative group cursor-pointer overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/50"></div> | |
| <img src="http://static.photos/food/112x168/55" class="absolute inset-0 w-full h-full object-cover" alt="Story"> | |
| <div class="absolute top-2 left-2 w-8 h-8 rounded-full border-4 border-brand-blue-500 overflow-hidden"> | |
| <img src="http://static.photos/people/50x50/12" alt="User"> | |
| </div> | |
| <span class="absolute bottom-2 left-2 right-2 text-white text-xs font-bold truncate">Mike Ross</span> | |
| </div> | |
| <!-- Friend Story 3 --> | |
| <div class="flex-shrink-0 w-28 h-48 bg-white rounded-xl shadow-sm relative group cursor-pointer overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/50"></div> | |
| <img src="http://static.photos/technology/112x168/88" class="absolute inset-0 w-full h-full object-cover" alt="Story"> | |
| <div class="absolute top-2 left-2 w-8 h-8 rounded-full border-4 border-brand-blue-500 overflow-hidden"> | |
| <img src="http://static.photos/people/50x50/33" alt="User"> | |
| </div> | |
| <span class="absolute bottom-2 left-2 right-2 text-white text-xs font-bold truncate">Tech Daily</span> | |
| </div> | |
| </div> | |
| <!-- Create Post --> | |
| <div class="bg-white rounded-xl shadow-sm p-4"> | |
| <div class="flex items-center gap-3"> | |
| <img src="http://static.photos/people/40x40/99" class="w-10 h-10 rounded-full object-cover" alt="Current User"> | |
| <input type="text" placeholder="What's on your mind, User?" class="bg-gray-100 hover:bg-gray-200 rounded-full px-4 py-2.5 flex-1 outline-none text-sm cursor-pointer transition"> | |
| </div> | |
| <div class="border-t mt-4 pt-3 flex justify-between px-2"> | |
| <button class="flex items-center gap-2 text-gray-600 hover:bg-gray-100 px-4 py-2 rounded-lg transition text-sm font-medium"> | |
| <i data-feather="video" class="text-red-500"></i> Live Video | |
| </button> | |
| <button class="flex items-center gap-2 text-gray-600 hover:bg-gray-100 px-4 py-2 rounded-lg transition text-sm font-medium"> | |
| <i data-feather="image" class="text-green-500"></i> Photo/Video | |
| </button> | |
| <button class="flex items-center gap-2 text-gray-600 hover:bg-gray-100 px-4 py-2 rounded-lg transition text-sm font-medium"> | |
| <i data-feather="smile" class="text-yellow-500"></i> Feeling/Activity | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Feed Container --> | |
| <div id="feed-container" class="space-y-4"> | |
| <!-- Posts will be injected here via JS --> | |
| <div class="flex justify-center py-10"> | |
| <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-brand-blue-500"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Sidebar --> | |
| <div class="hidden md:block md:col-span-4 lg:col-span-3"> | |
| <div class="sticky top-20 space-y-4"> | |
| <app-sidebar-right></app-sidebar-right> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Components --> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/sidebar-left.js"></script> | |
| <script src="components/sidebar-right.js"></script> | |
| <script src="components/post-card.js"></script> | |
| <!-- Main Logic --> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |