Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Mbuga - Social Media for Baganda</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary-brown: #5D4037; | |
| --secondary-green: #4CAF50; | |
| --accent-red: #D32F2F; | |
| --royal-gold: #FFD700; | |
| --light-bg: #EFEBE9; | |
| } | |
| body { | |
| font-family: 'Open Sans', sans-serif; | |
| background-color: var(--light-bg); | |
| } | |
| .luganda-font { | |
| font-family: 'Berkshire Swash', cursive; | |
| } | |
| .barkcloth-bg { | |
| background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIGhlaWdodD0iMTAwJSI+PHBhdHRlcm4gaWQ9InBhdHRlcm4iIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCI+PHBhdGggZD0iTSAwIDEwIEwgMTAgMCBNIDAgMCBMIDEwIDEwIiBzdHJva2U9InJnYmEoOTMsIDY0LCA1NSwgMC4xKSIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9wYXR0ZXJuPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjcGF0dGVybikiLz48L3N2Zz4='); | |
| } | |
| .high-contrast { | |
| --primary-brown: #000000; | |
| --secondary-green: #000000; | |
| --accent-red: #000000; | |
| --royal-gold: #FFFFFF; | |
| --light-bg: #FFFFFF; | |
| color: #000000 ; | |
| background-color: #FFFFFF ; | |
| } | |
| .waveform { | |
| background: linear-gradient(90deg, var(--primary-brown) 0%, var(--accent-red) 50%, var(--royal-gold) 100%); | |
| height: 40px; | |
| border-radius: 20px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .waveform::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iNDAiPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0iTTExIDI2YzIgMSA0IDEgNiAwczQgLTEgNiAwIDQgMSA2IDAgNCAtMSA2IDAgNCAxIDYgMGMxIC0xIDMgLTEgNSAwIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9nPjwvc3ZnPg==') repeat-x; | |
| opacity: 0.3; | |
| animation: wave 2s linear infinite; | |
| } | |
| @keyframes wave { | |
| 0% { background-position-x: 0; } | |
| 100% { background-position-x: 100px; } | |
| } | |
| .live-badge { | |
| position: absolute; | |
| top: 10px; | |
| left: 10px; | |
| background-color: var(--accent-red); | |
| color: white; | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| font-weight: bold; | |
| font-size: 12px; | |
| animation: pulse 1.5s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.7; } | |
| 100% { opacity: 1; } | |
| } | |
| .clan-badge { | |
| background: linear-gradient(135deg, var(--royal-gold), var(--accent-red)); | |
| color: white; | |
| border-radius: 20px; | |
| padding: 2px 10px; | |
| font-size: 12px; | |
| display: inline-block; | |
| margin-left: 8px; | |
| } | |
| .notification-badge { | |
| position: absolute; | |
| top: -5px; | |
| right: -5px; | |
| background-color: var(--accent-red); | |
| color: white; | |
| border-radius: 50%; | |
| width: 18px; | |
| height: 18px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 10px; | |
| font-weight: bold; | |
| } | |
| .profile-cover { | |
| height: 200px; | |
| background: linear-gradient(135deg, var(--primary-brown), var(--secondary-green)); | |
| position: relative; | |
| } | |
| .profile-pic { | |
| width: 100px; | |
| height: 100px; | |
| border: 4px solid white; | |
| position: absolute; | |
| bottom: -50px; | |
| left: 20px; | |
| } | |
| .tab-active { | |
| border-bottom: 3px solid var(--royal-gold); | |
| color: var(--primary-brown); | |
| font-weight: bold; | |
| } | |
| .marketplace-rating { | |
| color: var(--royal-gold); | |
| } | |
| .event-reminder { | |
| border-left: 4px solid var(--accent-red); | |
| background-color: rgba(211, 47, 47, 0.1); | |
| } | |
| .gamification-badge { | |
| display: inline-block; | |
| background: linear-gradient(135deg, var(--royal-gold), var(--accent-red)); | |
| color: white; | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| font-size: 12px; | |
| margin-right: 5px; | |
| margin-bottom: 5px; | |
| } | |
| @media (max-width: 767px) { | |
| .mobile-hidden { | |
| display: none; | |
| } | |
| .profile-cover { | |
| height: 150px; | |
| } | |
| .profile-pic { | |
| width: 80px; | |
| height: 80px; | |
| bottom: -40px; | |
| } | |
| } | |
| @media (min-width: 768px) and (max-width: 1023px) { | |
| .tablet-hidden { | |
| display: none; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="barkcloth-bg"> | |
| <!-- High Contrast Toggle --> | |
| <div class="fixed bottom-4 right-4 z-50"> | |
| <button id="contrastToggle" class="bg-gray-800 text-white p-3 rounded-full shadow-lg" aria-label="Toggle high contrast mode"> | |
| <i class="fas fa-adjust"></i> | |
| </button> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-md fixed top-0 left-0 right-0 z-40"> | |
| <div class="container mx-auto px-4 py-2 flex justify-between items-center"> | |
| <!-- Logo --> | |
| <div class="flex items-center"> | |
| <div class="text-2xl luganda-font text-primary-brown relative"> | |
| <i class="fas fa-drum text-accent-red absolute -left-6 -top-1"></i> | |
| <span>Mbuga</span> | |
| </div> | |
| </div> | |
| <!-- Search and Main Nav (Desktop) --> | |
| <div class="hidden md:flex items-center space-x-6"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search..." class="bg-gray-100 rounded-full py-2 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-primary-brown"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-500"></i> | |
| </div> | |
| <a href="#" class="text-primary-brown hover:text-accent-red transition" id="homeLink"> | |
| <i class="fas fa-home"></i> | |
| </a> | |
| <div class="relative"> | |
| <a href="#" class="text-primary-brown hover:text-accent-red transition" id="notificationsLink"> | |
| <i class="fas fa-bell"></i> | |
| <span class="notification-badge hidden" id="notificationCount">3</span> | |
| </a> | |
| </div> | |
| <a href="#" class="text-primary-brown hover:text-accent-red transition" id="messagesLink"> | |
| <i class="fas fa-envelope"></i> | |
| </a> | |
| <div class="relative group"> | |
| <button class="flex items-center space-x-1 focus:outline-none"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-8 h-8 rounded-full"> | |
| <span class="text-primary-brown">Kato</span> | |
| </button> | |
| <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 hidden group-hover:block"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profile</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Logout</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu Button --> | |
| <button class="md:hidden text-primary-brown focus:outline-none" id="mobileMenuButton"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div class="md:hidden bg-white hidden" id="mobileMenu"> | |
| <div class="container mx-auto px-4 py-2"> | |
| <div class="flex items-center mb-4"> | |
| <input type="text" placeholder="Search..." class="bg-gray-100 rounded-full py-2 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-primary-brown flex-grow"> | |
| <i class="fas fa-search absolute left-7 top-5 text-gray-500"></i> | |
| </div> | |
| <div class="flex justify-around py-3 border-t"> | |
| <a href="#" class="text-primary-brown" id="mobileHomeLink"> | |
| <i class="fas fa-home block text-center"></i> | |
| <span class="text-xs block text-center">Home</span> | |
| </a> | |
| <a href="#" class="text-primary-brown" id="mobileNotificationsLink"> | |
| <div class="relative"> | |
| <i class="fas fa-bell block text-center"></i> | |
| <span class="notification-badge hidden" id="mobileNotificationCount">3</span> | |
| </div> | |
| <span class="text-xs block text-center">Notifications</span> | |
| </a> | |
| <a href="#" class="text-primary-brown" id="mobileMessagesLink"> | |
| <i class="fas fa-envelope block text-center"></i> | |
| <span class="text-xs block text-center">Messages</span> | |
| </a> | |
| <a href="#" class="text-primary-brown" id="mobileProfileLink"> | |
| <i class="fas fa-user block text-center"></i> | |
| <span class="text-xs block text-center">Profile</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <div class="container mx-auto px-4 pt-20 pb-16 md:pb-4"> | |
| <div class="flex flex-col md:flex-row"> | |
| <!-- Left Sidebar (Desktop) --> | |
| <aside class="hidden md:block w-64 pr-4"> | |
| <div class="bg-white rounded-lg shadow-md p-4 mb-4"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <h3 class="font-bold">Kato Kimuli</h3> | |
| <span class="text-sm text-gray-600">Ffumbe <span class="clan-badge">Clan</span></span> | |
| </div> | |
| </div> | |
| <div class="border-t pt-3"> | |
| <a href="#" class="flex items-center text-gray-700 hover:text-primary-brown mb-2"> | |
| <i class="fas fa-users mr-2"></i> | |
| <span>Clan Members</span> | |
| </a> | |
| <a href="#" class="flex items-center text-gray-700 hover:text-primary-brown mb-2"> | |
| <i class="fas fa-calendar mr-2"></i> | |
| <span>Events</span> | |
| </a> | |
| <a href="#" class="flex items-center text-gray-700 hover:text-primary-brown mb-2"> | |
| <i class="fas fa-store mr-2"></i> | |
| <span>Marketplace</span> | |
| </a> | |
| <a href="#" class="flex items-center text-gray-700 hover:text-primary-brown mb-2"> | |
| <i class="fas fa-music mr-2"></i> | |
| <span>Cultural Media</span> | |
| </a> | |
| <a href="#" class="flex items-center text-gray-700 hover:text-primary-brown"> | |
| <i class="fas fa-trophy mr-2"></i> | |
| <span>Gamification</span> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md p-4 mb-4"> | |
| <h3 class="font-bold mb-3">Clan Forums</h3> | |
| <div class="space-y-2"> | |
| <a href="#" class="block bg-gray-100 hover:bg-gray-200 rounded p-2 text-sm">Ffumbe Discussions</a> | |
| <a href="#" class="block bg-gray-100 hover:bg-gray-200 rounded p-2 text-sm">Lugave Gatherings</a> | |
| <a href="#" class="block bg-gray-100 hover:bg-gray-200 rounded p-2 text-sm">Njovu Clan News</a> | |
| <a href="#" class="block bg-gray-100 hover:bg-gray-200 rounded p-2 text-sm">Nkima Updates</a> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md p-4"> | |
| <h3 class="font-bold mb-3">Upcoming Events</h3> | |
| <div class="space-y-3"> | |
| <div class="event-reminder p-2 rounded"> | |
| <div class="text-sm font-semibold">Clan Meeting</div> | |
| <div class="text-xs text-gray-600">Tomorrow, 10:00 AM</div> | |
| </div> | |
| <div class="p-2 rounded"> | |
| <div class="text-sm font-semibold">Cultural Dance</div> | |
| <div class="text-xs text-gray-600">Next Saturday, 2:00 PM</div> | |
| </div> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main Content --> | |
| <main class="flex-1 md:px-4"> | |
| <!-- Stories/Live Streams --> | |
| <div class="bg-white rounded-lg shadow-md p-4 mb-4"> | |
| <div class="flex space-x-4 overflow-x-auto pb-2"> | |
| <div class="flex-shrink-0 relative"> | |
| <div class="w-20 h-20 rounded-full bg-gradient-to-r from-primary-brown to-accent-red flex items-center justify-center text-white"> | |
| <i class="fas fa-plus"></i> | |
| </div> | |
| <span class="text-xs block text-center mt-1">Your Story</span> | |
| </div> | |
| <div class="flex-shrink-0 relative"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Story" class="w-20 h-20 rounded-full border-2 border-accent-red"> | |
| <span class="text-xs block text-center mt-1">Nambi</span> | |
| </div> | |
| <div class="flex-shrink-0 relative"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Story" class="w-20 h-20 rounded-full border-2 border-accent-red"> | |
| <span class="text-xs block text-center mt-1">Musaazi</span> | |
| </div> | |
| <div class="flex-shrink-0 relative"> | |
| <div class="w-20 h-20 rounded-full overflow-hidden relative"> | |
| <img src="https://source.unsplash.com/random/200x200/?dance" alt="Live" class="w-full h-full object-cover"> | |
| <div class="live-badge">LIVE</div> | |
| </div> | |
| <span class="text-xs block text-center mt-1">Dance</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Create Post --> | |
| <div class="bg-white rounded-lg shadow-md p-4 mb-4"> | |
| <div class="flex items-center mb-3"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-10 h-10 rounded-full mr-3"> | |
| <input type="text" placeholder="What's happening in Buganda today?" class="bg-gray-100 rounded-full py-2 px-4 flex-grow focus:outline-none"> | |
| </div> | |
| <div class="flex justify-between border-t pt-3"> | |
| <div class="flex space-x-4"> | |
| <button class="text-gray-500 hover:text-primary-brown"> | |
| <i class="fas fa-image mr-1"></i> Photo | |
| </button> | |
| <button class="text-gray-500 hover:text-primary-brown"> | |
| <i class="fas fa-video mr-1"></i> Video | |
| </button> | |
| <button class="text-gray-500 hover:text-primary-brown" id="voiceNoteButton"> | |
| <i class="fas fa-microphone mr-1"></i> Voice | |
| </button> | |
| </div> | |
| <button class="bg-primary-brown text-white px-4 py-1 rounded-full hover:bg-opacity-90"> | |
| Post | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Voice Note Recording Modal --> | |
| <div id="voiceNoteModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg p-6 w-full max-w-md"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-bold">Record Voice Note</h3> | |
| <button id="closeVoiceModal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="waveform mb-4" id="waveform"> | |
| <div class="text-white text-center pt-2">Press and hold to record</div> | |
| </div> | |
| <div class="flex justify-center"> | |
| <button id="recordButton" class="bg-accent-red text-white rounded-full w-16 h-16 flex items-center justify-center"> | |
| <i class="fas fa-microphone"></i> | |
| </button> | |
| </div> | |
| <div class="mt-4 text-center text-sm text-gray-600"> | |
| Release to stop recording | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Posts --> | |
| <div class="space-y-4"> | |
| <!-- Post 1: Cultural Event --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-3"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <h3 class="font-bold">Kato Kimuli</h3> | |
| <div class="text-xs text-gray-600">Ffumbe Clan · 2 hrs ago</div> | |
| </div> | |
| </div> | |
| <p class="mb-3">Great cultural event yesterday at Bulange! The Ffumbe clan was well represented. #BugandaCulture</p> | |
| <div class="grid grid-cols-2 gap-2 mb-3"> | |
| <img src="https://source.unsplash.com/random/300x300/?african,culture" alt="Event" class="w-full h-40 object-cover rounded"> | |
| <img src="https://source.unsplash.com/random/300x300/?dance,african" alt="Event" class="w-full h-40 object-cover rounded"> | |
| </div> | |
| <div class="flex justify-between text-gray-500 border-t border-b py-2 mb-3"> | |
| <button class="flex items-center hover:text-primary-brown"> | |
| <i class="fas fa-thumbs-up mr-1"></i> 24 | |
| </button> | |
| <button class="flex items-center hover:text-primary-brown"> | |
| <i class="fas fa-comment mr-1"></i> 8 | |
| </button> | |
| <button class="flex items-center hover:text-primary-brown"> | |
| <i class="fas fa-share mr-1"></i> Share | |
| </button> | |
| </div> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-8 h-8 rounded-full mr-2"> | |
| <input type="text" placeholder="Write a comment..." class="bg-gray-100 rounded-full py-1 px-3 flex-grow text-sm focus:outline-none"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Post 2: Live Stream --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-3"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <h3 class="font-bold">Nambi Sanyu</h3> | |
| <div class="text-xs text-gray-600">Nkima Clan · LIVE NOW</div> | |
| </div> | |
| </div> | |
| <p class="mb-3">Join me for traditional dance performances from the Nkima clan!</p> | |
| <div class="relative"> | |
| <video controls class="w-full rounded"> | |
| <source src="#" type="video/mp4"> | |
| Your browser does not support the video tag. | |
| </video> | |
| <div class="live-badge">LIVE</div> | |
| </div> | |
| <div class="flex justify-between text-gray-500 border-t border-b py-2 mb-3 mt-3"> | |
| <button class="flex items-center hover:text-primary-brown"> | |
| <i class="fas fa-thumbs-up mr-1"></i> 56 | |
| </button> | |
| <button class="flex items-center hover:text-primary-brown"> | |
| <i class="fas fa-comment mr-1"></i> 12 | |
| </button> | |
| <button class="flex items-center hover:text-primary-brown"> | |
| <i class="fas fa-share mr-1"></i> Share | |
| </button> | |
| </div> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-8 h-8 rounded-full mr-2"> | |
| <input type="text" placeholder="Write a comment..." class="bg-gray-100 rounded-full py-1 px-3 flex-grow text-sm focus:outline-none"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Post 3: Voice Note --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-3"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Profile" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <h3 class="font-bold">Musaazi Wasswa</h3> | |
| <div class="text-xs text-gray-600">Njovu Clan · 1 hr ago</div> | |
| </div> | |
| </div> | |
| <p class="mb-3">Listen to this traditional story from our elders:</p> | |
| <div class="waveform mb-3"> | |
| <div class="flex justify-between items-center px-4 pt-2"> | |
| <button class="text-white"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <span class="text-white text-sm">1:24</span> | |
| <button class="text-white"> | |
| <i class="fas fa-share"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-gray-500 border-t border-b py-2 mb-3"> | |
| <button class="flex items-center hover:text-primary-brown"> | |
| <i class="fas fa-thumbs-up mr-1"></i> 18 | |
| </button> | |
| <button class="flex items-center hover:text-primary-brown"> | |
| <i class="fas fa-comment mr-1"></i> 5 | |
| </button> | |
| <button class="flex items-center hover:text-primary-brown"> | |
| <i class="fas fa-share mr-1"></i> Share | |
| </button> | |
| </div> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-8 h-8 rounded-full mr-2"> | |
| <input type="text" placeholder="Write a comment..." class="bg-gray-100 rounded-full py-1 px-3 flex-grow text-sm focus:outline-none"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Post 4: Poll --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-3"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <h3 class="font-bold">Kato Kimuli</h3> | |
| <div class="text-xs text-gray-600">Ffumbe Clan · 4 hrs ago</div> | |
| </div> | |
| </div> | |
| <p class="mb-3">Poll: What's your favorite traditional dish?</p> | |
| <div class="space-y-2 mb-3"> | |
| <div class="flex items-center bg-gray-100 rounded p-2"> | |
| <input type="radio" name="poll" id="matooke" class="mr-2"> | |
| <label for="matooke" class="flex-grow">Matooke</label> | |
| <span class="text-xs text-gray-600">42%</span> | |
| </div> | |
| <div class="flex items-center bg-gray-100 rounded p-2"> | |
| <input type="radio" name="poll" id="luwombo" class="mr-2"> | |
| <label for="luwombo" class="flex-grow">Luwombo</label> | |
| <span class="text-xs text-gray-600">35%</span> | |
| </div> | |
| <div class="flex items-center bg-gray-100 rounded p-2"> | |
| <input type="radio" name="poll" id="other" class="mr-2"> | |
| <label for="other" class="flex-grow">Other</label> | |
| <span class="text-xs text-gray-600">23%</span> | |
| </div> | |
| </div> | |
| <div class="text-xs text-gray-500 mb-3">48 votes · 12 hours left</div> | |
| <div class="flex justify-between text-gray-500 border-t border-b py-2 mb-3"> | |
| <button class="flex items-center hover:text-primary-brown"> | |
| <i class="fas fa-thumbs-up mr-1"></i> 32 | |
| </button> | |
| <button class="flex items-center hover:text-primary-brown"> | |
| <i class="fas fa-comment mr-1"></i> 7 | |
| </button> | |
| <button class="flex items-center hover:text-primary-brown"> | |
| <i class="fas fa-share mr-1"></i> Share | |
| </button> | |
| </div> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Profile" class="w-8 h-8 rounded-full mr-2"> | |
| <input type="text" placeholder="Write a comment..." class="bg-gray-100 rounded-full py-1 px-3 flex-grow text-sm focus:outline-none"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Post 5: Marketplace --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-3"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <h3 class="font-bold">Nambi Sanyu</h3> | |
| <div class="text-xs text-gray-600">Nkima Clan · Marketplace · 1 day ago</div> | |
| </div> | |
| </div> | |
| <p class="mb-3">Selling handmade barkcloth products. Perfect for traditional ceremonies!</p> | |
| <div class="mb-3"> | |
| <img src="https://source.unsplash.com/random/600x400/?barkcloth" alt="Marketplace" class="w-full h-48 object-cover rounded"> | |
| </div> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <div class="marketplace-rating"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| <span class="text-sm ml-1">(12 reviews)</span> | |
| </div> | |
| <div class="font-bold text-primary-brown">UGX 75,000</div> | |
| </div> | |
| <div class="flex justify-between text-gray-500 border-t border-b py-2 mb-3"> | |
| <button class="flex items-center hover:text-primary-brown"> | |
| <i class="fas fa-thumbs-up mr-1"></i> 28 | |
| </button> | |
| <button class="flex items-center hover:text-primary-brown"> | |
| <i class="fas fa-comment mr-1"></i> 9 | |
| </button> | |
| <button class="flex items-center hover:text-primary-brown"> | |
| <i class="fas fa-share mr-1"></i> Share | |
| </button> | |
| </div> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-8 h-8 rounded-full mr-2"> | |
| <input type="text" placeholder="Write a comment..." class="bg-gray-100 rounded-full py-1 px-3 flex-grow text-sm focus:outline-none"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Right Sidebar (Desktop) --> | |
| <aside class="hidden lg:block w-80 pl-4"> | |
| <div class="bg-white rounded-lg shadow-md p-4 mb-4"> | |
| <h3 class="font-bold mb-3">Cultural Media</h3> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <div class="relative"> | |
| <img src="https://source.unsplash.com/random/200x200/?african,music" alt="Music" class="w-full h-40 object-cover rounded"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-2"> | |
| <div class="text-sm">Traditional Song</div> | |
| <div class="text-xs">Nkima Clan</div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <img src="https://source.unsplash.com/random/200x200/?proverb,african" alt="Proverb" class="w-full h-40 object-cover rounded"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-2"> | |
| <div class="text-sm">Luganda Proverb</div> | |
| <div class="text-xs">Ffumbe Clan</div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <img src="https://source.unsplash.com/random/200x200/?art,african" alt="Art" class="w-full h-40 object-cover rounded"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-2"> | |
| <div class="text-sm">Traditional Art</div> | |
| <div class="text-xs">Njovu Clan</div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <img src="https://source.unsplash.com/random/200x200/?dance,african" alt="Dance" class="w-full h-40 object-cover rounded"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-2"> | |
| <div class="text-sm">Cultural Dance</div> | |
| <div class="text-xs">All Clans</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md p-4 mb-4"> | |
| <h3 class="font-bold mb-3">Gamification</h3> | |
| <div class="mb-2"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Clan Participation</span> | |
| <span>65%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-primary-brown h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="text-sm font-semibold mb-2">Your Badges:</div> | |
| <div> | |
| <span class="gamification-badge"><i class="fas fa-trophy mr-1"></i> Clan Champion</span> | |
| <span class="gamification-badge"><i class="fas fa-comments mr-1"></i> Active Member</span> | |
| <span class="gamification-badge"><i class="fas fa-calendar mr-1"></i> Event Regular</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md p-4"> | |
| <h3 class="font-bold mb-3">Clan Leaders</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/60.jpg" alt="Leader" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <div class="font-semibold">Mukasa Fred</div> | |
| <div class="text-xs text-gray-600">Ffumbe Clan Head</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/30.jpg" alt="Leader" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <div class="font-semibold">Nakato Sarah</div> | |
| <div class="text-xs text-gray-600">Nkima Clan Head</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Leader" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <div class="font-semibold">Wasswa Robert</div> | |
| <div class="text-xs text-gray-600">Njovu Clan Head</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </aside> | |
| </div> | |
| </div> | |
| <!-- Bottom Navigation (Mobile) --> | |
| <nav class="md:hidden fixed bottom-0 left-0 right-0 bg-white shadow-lg z-40"> | |
| <div class="flex justify-around py-3"> | |
| <a href="#" class="text-primary-brown tab-active" id="bottomHomeLink"> | |
| <i class="fas fa-home block text-center"></i> | |
| <span class="text-xs block text-center">Home</span> | |
| </a> | |
| <a href="#" class="text-gray-500" id="bottomClanLink"> | |
| <i class="fas fa-users block text-center"></i> | |
| <span class="text-xs block text-center">Clan</span> | |
| </a> | |
| <a href="#" class="text-gray-500" id="bottomMediaLink"> | |
| <i class="fas fa-photo-video block text-center"></i> | |
| <span class="text-xs block text-center">Media</span> | |
| </a> | |
| <a href="#" class="text-gray-500" id="bottomMarketLink"> | |
| <i class="fas fa-store block text-center"></i> | |
| <span class="text-xs block text-center">Market</span> | |
| </a> | |
| <a href="#" class="text-gray-500" id="bottomProfileLink"> | |
| <i class="fas fa-user block text-center"></i> | |
| <span class="text-xs block text-center">Profile</span> | |
| </a> | |
| </div> | |
| </nav> | |
| <script> | |
| // Toggle mobile menu | |
| document.getElementById('mobileMenuButton').addEventListener('click', function() { | |
| document.getElementById('mobileMenu').classList.toggle('hidden'); | |
| }); | |
| // Voice note modal | |
| const voiceNoteButton = document.getElementById('voiceNoteButton'); | |
| const voiceNoteModal = document.getElementById('voiceNoteModal'); | |
| const closeVoiceModal = document.getElementById('closeVoiceModal'); | |
| const recordButton = document.getElementById('recordButton'); | |
| voiceNoteButton.addEventListener('click', function() { | |
| voiceNoteModal.classList.remove('hidden'); | |
| }); | |
| closeVoiceModal.addEventListener('click', function() { | |
| voiceNoteModal.classList.add('hidden'); | |
| }); | |
| // Simulate recording | |
| let isRecording = false; | |
| recordButton.addEventListener('mousedown', function() { | |
| isRecording = true; | |
| document.getElementById('waveform').innerHTML = '<div class="text-white text-center pt-2">Recording... Release to stop</div>'; | |
| }); | |
| recordButton.addEventListener('mouseup', function() { | |
| if (isRecording) { | |
| isRecording = false; | |
| document.getElementById('waveform').innerHTML = '<div class="text-white text-center pt-2">Recording saved! Click to play</div>'; | |
| setTimeout(() => { | |
| voiceNoteModal.classList.add('hidden'); | |
| alert('Voice note recorded successfully!'); | |
| }, 1000); | |
| } | |
| }); | |
| // Simulate notifications | |
| setTimeout(() => { | |
| document.getElementById('notificationCount').classList.remove('hidden'); | |
| document.getElementById('mobileNotificationCount').classList.remove('hidden'); | |
| }, 2000); | |
| // Event reminder | |
| setTimeout(() => { | |
| const showReminder = confirm("Reminder: You have a clan meeting tomorrow at 10:00 AM. Would you like to view details?"); | |
| if (showReminder) { | |
| alert("Clan Meeting\nDate: Tomorrow\nTime: 10:00 AM\nLocation: Bulange, Mengo"); | |
| } | |
| }, 5000); | |
| // High contrast toggle | |
| document.getElementById('contrastToggle').addEventListener('click', function() { | |
| document.body.classList.toggle('high-contrast'); | |
| }); | |
| // Tab switching | |
| const tabs = ['home', 'clan', 'media', 'market', 'profile']; | |
| tabs.forEach(tab => { | |
| const mobileLink = document.getElementById(`mobile${tab.charAt(0).toUpperCase() + tab.slice(1)}Link`); | |
| const bottomLink = document.getElementById(`bottom${tab.charAt(0).toUpperCase() + tab.slice(1)}Link`); | |
| if (mobileLink) mobileLink.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| setActiveTab(tab); | |
| }); | |
| if (bottomLink) bottomLink.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| setActiveTab(tab); | |
| }); | |
| }); | |
| function setActiveTab(activeTab) { | |
| // Update mobile bottom nav | |
| tabs.forEach(tab => { | |
| const bottomLink = document.getElementById(`bottom${tab.charAt(0).toUpperCase() + tab.slice(1)}Link`); | |
| if (tab === activeTab) { | |
| bottomLink.classList.remove('text-gray-500'); | |
| bottomLink.classList.add('text-primary-brown', 'tab-active'); | |
| } else { | |
| bottomLink.classList.remove('text-primary-brown', 'tab-active'); | |
| bottomLink.classList.add('text-gray-500'); | |
| } | |
| }); | |
| // Here you would typically load different content based on the tab | |
| console.log(`Switched to ${activeTab} tab`); | |
| } | |
| </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=divinehealercapetow/mbuga" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |