Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Droidcon Uganda 2025</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Reset and Base Styles */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | |
| } | |
| :root { | |
| --primary: #FF6D00; | |
| --primary-dark: #E65100; | |
| --secondary: #263238; | |
| --accent: #00BFA5; | |
| --light: #ECEFF1; | |
| --dark: #263238; | |
| --gray: #90A4AE; | |
| --white: #FFFFFF; | |
| } | |
| body { | |
| background-color: #f5f5f5; | |
| color: var(--dark); | |
| max-width: 500px; | |
| margin: 0 auto; | |
| position: relative; | |
| height: 100vh; | |
| overflow-x: hidden; | |
| box-shadow: 0 0 20px rgba(0,0,0,0.1); | |
| } | |
| /* App Container */ | |
| .app-container { | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| background-color: var(--white); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| /* Status Bar */ | |
| .status-bar { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 8px 16px; | |
| background-color: var(--secondary); | |
| color: var(--white); | |
| font-size: 12px; | |
| } | |
| /* Header */ | |
| .app-header { | |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); | |
| color: var(--white); | |
| padding: 16px; | |
| display: flex; | |
| flex-direction: column; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .header-content { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| z-index: 2; | |
| } | |
| .header-title { | |
| font-size: 24px; | |
| font-weight: 700; | |
| margin-bottom: 4px; | |
| } | |
| .header-subtitle { | |
| font-size: 14px; | |
| opacity: 0.9; | |
| } | |
| .header-bg-pattern { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| width: 150px; | |
| height: 150px; | |
| background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%); | |
| border-radius: 50%; | |
| } | |
| .header-bg-pattern:nth-child(2) { | |
| top: -50px; | |
| right: -50px; | |
| width: 200px; | |
| height: 200px; | |
| } | |
| /* Navigation */ | |
| .app-nav { | |
| display: flex; | |
| background-color: var(--white); | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.05); | |
| position: relative; | |
| z-index: 10; | |
| } | |
| .nav-item { | |
| flex: 1; | |
| text-align: center; | |
| padding: 16px 0; | |
| font-size: 14px; | |
| color: var(--gray); | |
| position: relative; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .nav-item.active { | |
| color: var(--primary); | |
| font-weight: 600; | |
| } | |
| .nav-item.active::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 50%; | |
| height: 3px; | |
| background-color: var(--primary); | |
| border-radius: 3px 3px 0 0; | |
| } | |
| /* Main Content */ | |
| .app-content { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding-bottom: 80px; | |
| } | |
| /* Event Highlights */ | |
| .event-highlight { | |
| margin: 16px; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.1); | |
| position: relative; | |
| } | |
| .event-image { | |
| width: 100%; | |
| height: 180px; | |
| object-fit: cover; | |
| } | |
| .event-overlay { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| background: linear-gradient(transparent, rgba(0,0,0,0.7)); | |
| padding: 16px; | |
| color: var(--white); | |
| } | |
| .event-title { | |
| font-size: 18px; | |
| font-weight: 600; | |
| margin-bottom: 4px; | |
| } | |
| .event-date { | |
| font-size: 14px; | |
| opacity: 0.9; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .event-date i { | |
| margin-right: 6px; | |
| } | |
| /* Schedule Cards */ | |
| .section-title { | |
| padding: 16px 16px 8px; | |
| font-size: 18px; | |
| font-weight: 600; | |
| color: var(--secondary); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .section-title a { | |
| font-size: 14px; | |
| font-weight: normal; | |
| color: var(--primary); | |
| text-decoration: none; | |
| } | |
| .schedule-card { | |
| background-color: var(--white); | |
| margin: 8px 16px; | |
| padding: 16px; | |
| border-radius: 12px; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.05); | |
| display: flex; | |
| transition: transform 0.2s ease; | |
| } | |
| .schedule-card:active { | |
| transform: scale(0.98); | |
| } | |
| .time-indicator { | |
| background-color: var(--primary); | |
| color: var(--white); | |
| padding: 8px; | |
| border-radius: 8px; | |
| min-width: 70px; | |
| text-align: center; | |
| margin-right: 16px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .time-start { | |
| font-weight: 600; | |
| font-size: 16px; | |
| } | |
| .time-end { | |
| font-size: 12px; | |
| opacity: 0.8; | |
| } | |
| .session-details { | |
| flex: 1; | |
| } | |
| .session-title { | |
| font-weight: 600; | |
| margin-bottom: 6px; | |
| color: var(--secondary); | |
| } | |
| .session-speaker { | |
| font-size: 14px; | |
| color: var(--gray); | |
| margin-bottom: 6px; | |
| } | |
| .session-location { | |
| font-size: 12px; | |
| color: var(--primary); | |
| display: flex; | |
| align-items: center; | |
| } | |
| .session-location i { | |
| margin-right: 4px; | |
| } | |
| /* Speakers Section */ | |
| .speakers-container { | |
| display: flex; | |
| overflow-x: auto; | |
| padding: 8px 16px; | |
| gap: 16px; | |
| } | |
| .speaker-card { | |
| min-width: 120px; | |
| text-align: center; | |
| } | |
| .speaker-avatar { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| border: 3px solid var(--primary); | |
| margin-bottom: 8px; | |
| } | |
| .speaker-name { | |
| font-weight: 600; | |
| font-size: 14px; | |
| margin-bottom: 2px; | |
| } | |
| .speaker-role { | |
| font-size: 12px; | |
| color: var(--gray); | |
| } | |
| /* Bottom Navigation */ | |
| .bottom-nav { | |
| display: flex; | |
| background-color: var(--white); | |
| box-shadow: 0 -2px 10px rgba(0,0,0,0.05); | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| max-width: 500px; | |
| margin: 0 auto; | |
| z-index: 100; | |
| } | |
| .nav-btn { | |
| flex: 1; | |
| text-align: center; | |
| padding: 12px 0; | |
| color: var(--gray); | |
| position: relative; | |
| transition: all 0.3s ease; | |
| } | |
| .nav-btn.active { | |
| color: var(--primary); | |
| } | |
| .nav-btn i { | |
| font-size: 20px; | |
| margin-bottom: 4px; | |
| } | |
| .nav-btn span { | |
| display: block; | |
| font-size: 12px; | |
| } | |
| .nav-notification { | |
| position: absolute; | |
| top: 6px; | |
| right: 20px; | |
| background-color: var(--accent); | |
| color: var(--white); | |
| width: 18px; | |
| height: 18px; | |
| border-radius: 50%; | |
| font-size: 10px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| /* Floating Action Button */ | |
| .fab { | |
| position: fixed; | |
| bottom: 80px; | |
| right: 24px; | |
| width: 56px; | |
| height: 56px; | |
| background-color: var(--primary); | |
| color: var(--white); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.2); | |
| z-index: 90; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .fab:active { | |
| transform: scale(0.95); | |
| box-shadow: 0 2px 6px rgba(0,0,0,0.2); | |
| } | |
| .fab i { | |
| font-size: 24px; | |
| } | |
| /* Animations */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.4s ease forwards; | |
| } | |
| /* Utility Classes */ | |
| .mt-8 { margin-top: 8px; } | |
| .mb-8 { margin-bottom: 8px; } | |
| .mt-16 { margin-top: 16px; } | |
| .mb-16 { margin-bottom: 16px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <!-- Status Bar (simulated) --> | |
| <div class="status-bar"> | |
| <span>12:30 PM</span> | |
| <span> | |
| <i class="fas fa-signal"></i> | |
| <i class="fas fa-wifi ml-2"></i> | |
| <i class="fas fa-battery-three-quarters ml-2"></i> | |
| </span> | |
| </div> | |
| <!-- App Header --> | |
| <header class="app-header"> | |
| <div class="header-bg-pattern"></div> | |
| <div class="header-bg-pattern"></div> | |
| <div class="header-content"> | |
| <div> | |
| <h1 class="header-title">Droidcon Uganda</h1> | |
| <p class="header-subtitle">October 10-12, 2025 • Kampala</p> | |
| </div> | |
| <div> | |
| <i class="fas fa-bell" style="font-size: 20px; opacity: 0.9;"></i> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Navigation Tabs --> | |
| <nav class="app-nav"> | |
| <div class="nav-item active">Home</div> | |
| <div class="nav-item">Schedule</div> | |
| <div class="nav-item">Speakers</div> | |
| <div class="nav-item">Venue</div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="app-content"> | |
| <!-- Event Highlight --> | |
| <div class="event-highlight fade-in"> | |
| <img src="https://images.unsplash.com/photo-1511578314322-379afb476865?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Droidcon Uganda 2025" class="event-image"> | |
| <div class="event-overlay"> | |
| <h3 class="event-title">Droidcon Uganda 2025</h3> | |
| <p class="event-date"> | |
| <i class="far fa-calendar-alt"></i> | |
| Oct 10-12, 2025 • Kampala Serena Hotel | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Today's Schedule --> | |
| <div class="section-title"> | |
| <h2>Today's Schedule</h2> | |
| <a href="#">View All</a> | |
| </div> | |
| <div class="schedule-card fade-in"> | |
| <div class="time-indicator"> | |
| <span class="time-start">09:00</span> | |
| <span class="time-end">10:00</span> | |
| </div> | |
| <div class="session-details"> | |
| <h3 class="session-title">Keynote: Future of Android in Africa</h3> | |
| <p class="session-speaker">By Brian Wangi (Google Developer Expert)</p> | |
| <p class="session-location"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| Main Auditorium | |
| </p> | |
| </div> | |
| </div> | |
| <div class="schedule-card fade-in" style="animation-delay: 0.1s;"> | |
| <div class="time-indicator"> | |
| <span class="time-start">10:30</span> | |
| <span class="time-end">11:30</span> | |
| </div> | |
| <div class="session-details"> | |
| <h3 class="session-title">Jetpack Compose Masterclass</h3> | |
| <p class="session-speaker">By Alina Dolkin (Android Engineer)</p> | |
| <p class="session-location"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| Room A | |
| </p> | |
| </div> | |
| </div> | |
| <div class="schedule-card fade-in" style="animation-delay: 0.2s;"> | |
| <div class="time-indicator"> | |
| <span class="time-start">12:00</span> | |
| <span class="time-end">13:00</span> | |
| </div> | |
| <div class="session-details"> | |
| <h3 class="session-title">Building for Offline First</h3> | |
| <p class="session-speaker">By Rob Alexander (Flutter Developer)</p> | |
| <p class="session-location"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| Room B | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Featured Speakers --> | |
| <div class="section-title mt-16"> | |
| <h2>Featured Speakers</h2> | |
| <a href="#">View All</a> | |
| </div> | |
| <div class="speakers-container"> | |
| <div class="speaker-card fade-in"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Speaker" class="speaker-avatar"> | |
| <h4 class="speaker-name">Sarah Kamya</h4> | |
| <p class="speaker-role">GDE, Android</p> | |
| </div> | |
| <div class="speaker-card fade-in" style="animation-delay: 0.1s;"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Speaker" class="speaker-avatar"> | |
| <h4 class="speaker-name">David Okello</h4> | |
| <p class="speaker-role">Android Engineer</p> | |
| </div> | |
| <div class="speaker-card fade-in" style="animation-delay: 0.2s;"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Speaker" class="speaker-avatar"> | |
| <h4 class="speaker-name">Amina N.</h4> | |
| <p class="speaker-role">Flutter Dev</p> | |
| </div> | |
| <div class="speaker-card fade-in" style="animation-delay: 0.3s;"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Speaker" class="speaker-avatar"> | |
| <h4 class="speaker-name">Joseph M.</h4> | |
| <p class="speaker-role">Kotlin Expert</p> | |
| </div> | |
| </div> | |
| <!-- Sponsors --> | |
| <div class="section-title mt-16"> | |
| <h2>Our Sponsors</h2> | |
| </div> | |
| <div style="display: flex; justify-content: space-around; padding: 16px; flex-wrap: wrap;"> | |
| <img src="https://via.placeholder.com/80x40?text=Google" alt="Google" style="height: 40px; margin: 8px;"> | |
| <img src="https://via.placeholder.com/80x40?text=Android" alt="Android" style="height: 40px; margin: 8px;"> | |
| <img src="https://via.placeholder.com/80x40?text=JetBrains" alt="JetBrains" style="height: 40px; margin: 8px;"> | |
| <img src="https://via.placeholder.com/80x40?text=MTN" alt="MTN" style="height: 40px; margin: 8px;"> | |
| </div> | |
| </main> | |
| <!-- Bottom Navigation --> | |
| <nav class="bottom-nav"> | |
| <div class="nav-btn active"> | |
| <i class="fas fa-home"></i> | |
| <span>Home</span> | |
| </div> | |
| <div class="nav-btn"> | |
| <i class="fas fa-calendar-alt"></i> | |
| <span>Schedule</span> | |
| </div> | |
| <div class="nav-btn"> | |
| <i class="fas fa-users"></i> | |
| <span>Speakers</span> | |
| </div> | |
| <div class="nav-btn"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| <span>Venue</span> | |
| </div> | |
| <div class="nav-btn"> | |
| <i class="fas fa-user"></i> | |
| <span>Profile</span> | |
| <div class="nav-notification">3</div> | |
| </div> | |
| </nav> | |
| <!-- Floating Action Button --> | |
| <div class="fab"> | |
| <i class="fas fa-qrcode"></i> | |
| </div> | |
| </div> | |
| <script> | |
| // Simple interactivity | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Tab navigation | |
| const navItems = document.querySelectorAll('.nav-item'); | |
| navItems.forEach(item => { | |
| item.addEventListener('click', function() { | |
| navItems.forEach(nav => nav.classList.remove('active')); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| // Bottom nav interaction | |
| const navBtns = document.querySelectorAll('.nav-btn'); | |
| navBtns.forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| navBtns.forEach(nav => nav.classList.remove('active')); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| // FAB click | |
| const fab = document.querySelector('.fab'); | |
| fab.addEventListener('click', function() { | |
| alert('Scan QR code to check in to sessions!'); | |
| }); | |
| // Simulate loading content | |
| setTimeout(() => { | |
| const elements = document.querySelectorAll('.fade-in'); | |
| elements.forEach((el, index) => { | |
| el.style.opacity = 0; | |
| el.style.animationDelay = `${index * 0.1}s`; | |
| }); | |
| }, 50); | |
| }); | |
| </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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> | |
| </html> |