| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>RoadSoS — National Road Safety Hackathon 2026</title> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"> |
| <style> |
| *{margin:0;padding:0;box-sizing:border-box} |
| :root{--primary:#e94560;--primary-dark:#c23152;--secondary:#0f3460;--accent:#16c79a;--dark:#1a1a2e;--darker:#0d0d1a;--light:#fff;--gray:#8892b0} |
| body{font-family:'Inter',sans-serif;background:var(--darker);color:var(--light);overflow:hidden;height:100vh;width:100vw} |
| .presentation{width:100vw;height:100vh;position:relative} |
| .slide{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:60px 80px;opacity:0;transform:translateX(100px);transition:all .8s cubic-bezier(.16,1,.3,1);pointer-events:none} |
| .slide.active{opacity:1;transform:translateX(0);pointer-events:all} |
| .slide.prev{opacity:0;transform:translateX(-100px)} |
| .slide-1{background:linear-gradient(135deg,#0d0d1a 0%,#1a1a2e 30%,#0f3460 70%,#1a1a2e 100%);overflow:hidden} |
| .slide-1::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at 30% 50%,rgba(233,69,96,.08) 0%,transparent 50%),radial-gradient(ellipse at 70% 80%,rgba(22,199,154,.05) 0%,transparent 40%);animation:pulse 8s ease-in-out infinite} |
| .slide-2{background:linear-gradient(160deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%)} |
| .slide-3{background:linear-gradient(135deg,#0d0d1a 0%,#1a1a2e 40%,#162447 100%)} |
| .slide-4{background:linear-gradient(160deg,#0f3460 0%,#1a1a2e 50%,#0d0d1a 100%)} |
| .slide-5{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 60%,#1b4332 100%)} |
| .slide-6{background:linear-gradient(160deg,#0d0d1a 0%,#1a1a2e 40%,#162447 100%)} |
| .slide-7{background:linear-gradient(135deg,#0d0d1a 0%,#1a1a2e 30%,#0f3460 70%,#1a1a2e 100%)} |
| @keyframes pulse{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.05) rotate(1deg)}} |
| @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} |
| @keyframes slideUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}} |
| @keyframes fadeIn{from{opacity:0}to{opacity:1}} |
| @keyframes scaleIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}} |
| .slide.active .animate-up{animation:slideUp .8s ease forwards} |
| .slide.active .animate-fade{animation:fadeIn 1s ease forwards} |
| .slide.active .animate-scale{animation:scaleIn .6s ease forwards} |
| .slide.active .delay-1{animation-delay:.2s;opacity:0} |
| .slide.active .delay-2{animation-delay:.4s;opacity:0} |
| .slide.active .delay-3{animation-delay:.6s;opacity:0} |
| .slide.active .delay-4{animation-delay:.8s;opacity:0} |
| .slide.active .delay-5{animation-delay:1s;opacity:0} |
| .mega-title{font-family:'Poppins',sans-serif;font-size:5.5rem;font-weight:900;letter-spacing:-3px;line-height:1.1;background:linear-gradient(135deg,var(--light) 0%,#e0e0e0 50%,var(--primary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} |
| .slide-title{font-family:'Poppins',sans-serif;font-size:3.2rem;font-weight:800;color:var(--light);margin-bottom:40px;letter-spacing:-1px} |
| .slide-title .highlight{color:var(--primary)} |
| .subtitle{font-size:1.5rem;font-weight:300;color:var(--gray);margin-top:15px} |
| .emoji-big{font-size:4rem;margin-bottom:20px;animation:float 3s ease-in-out infinite} |
| .content-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;width:100%;max-width:1100px} |
| .content-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;width:100%;max-width:1100px} |
| .card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:28px;backdrop-filter:blur(10px);transition:all .3s ease} |
| .card:hover{border-color:rgba(233,69,96,.3);transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.3)} |
| .card-icon{font-size:2rem;margin-bottom:12px} |
| .card-title{font-size:1.1rem;font-weight:700;color:var(--light);margin-bottom:8px} |
| .card-text{font-size:.9rem;color:var(--gray);line-height:1.5} |
| .stat-box{text-align:center;padding:30px;background:rgba(233,69,96,.05);border:1px solid rgba(233,69,96,.2);border-radius:16px} |
| .stat-number{font-family:'Poppins',sans-serif;font-size:3rem;font-weight:900;color:var(--primary);line-height:1} |
| .stat-label{font-size:.95rem;color:var(--gray);margin-top:8px} |
| .modern-table{width:100%;max-width:900px;border-collapse:separate;border-spacing:0 8px} |
| .modern-table th{text-align:left;padding:12px 20px;color:var(--accent);font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:1px} |
| .modern-table td{padding:14px 20px;background:rgba(255,255,255,.03);font-size:.95rem;color:var(--light)} |
| .modern-table tr td:first-child{border-radius:10px 0 0 10px} |
| .modern-table tr td:last-child{border-radius:0 10px 10px 0} |
| .modern-table .highlight-cell{color:var(--accent);font-weight:600} |
| .arch-box{background:rgba(15,52,96,.4);border:1px solid rgba(22,199,154,.2);border-radius:12px;padding:20px 28px;font-size:.9rem;text-align:center;color:var(--light)} |
| .arch-arrow{color:var(--primary);font-size:1.5rem;margin:10px 0;text-align:center} |
| .tag{display:inline-block;padding:6px 14px;background:rgba(22,199,154,.1);border:1px solid rgba(22,199,154,.3);border-radius:20px;font-size:.8rem;color:var(--accent);margin:4px;font-weight:500} |
| .tag-red{background:rgba(233,69,96,.1);border-color:rgba(233,69,96,.3);color:var(--primary)} |
| .badge{display:inline-block;padding:8px 20px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-radius:25px;font-size:.85rem;font-weight:600;color:white;margin-bottom:20px} |
| .feature-list{list-style:none;width:100%;max-width:800px} |
| .feature-list li{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:1.1rem;display:flex;align-items:center;gap:12px} |
| .timeline{width:100%;max-width:800px} |
| .timeline-item{display:flex;align-items:center;gap:20px;padding:16px 0;border-left:3px solid rgba(22,199,154,.3);padding-left:24px;margin-left:12px;position:relative} |
| .timeline-item::before{content:'';position:absolute;left:-8px;width:14px;height:14px;border-radius:50%;background:var(--accent);border:3px solid var(--dark)} |
| .timeline-item.done::before{background:var(--accent);box-shadow:0 0 10px rgba(22,199,154,.5)} |
| .timeline-item.future::before{background:var(--gray)} |
| .quote{font-size:1.4rem;font-style:italic;color:var(--gray);text-align:center;max-width:700px;line-height:1.6;border-left:4px solid var(--primary);padding-left:24px} |
| .nav-controls{position:fixed;bottom:30px;right:40px;display:flex;gap:12px;z-index:1000} |
| .nav-btn{width:50px;height:50px;border-radius:50%;border:2px solid rgba(255,255,255,.2);background:rgba(26,26,46,.8);color:white;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;backdrop-filter:blur(10px)} |
| .nav-btn:hover{border-color:var(--primary);background:rgba(233,69,96,.2);transform:scale(1.1)} |
| .slide-counter{position:fixed;bottom:40px;left:40px;font-size:.9rem;color:var(--gray);z-index:1000} |
| .slide-counter .current{color:var(--primary);font-weight:700;font-size:1.2rem} |
| .progress-bar{position:fixed;top:0;left:0;height:4px;background:linear-gradient(90deg,var(--primary),var(--accent));transition:width .5s ease;z-index:1000} |
| .glow-circle{position:absolute;border-radius:50%;filter:blur(60px);opacity:.15;pointer-events:none} |
| .iit-badge{position:absolute;top:30px;right:40px;padding:10px 20px;border:1px solid rgba(255,255,255,.15);border-radius:8px;font-size:.75rem;color:var(--gray);text-transform:uppercase;letter-spacing:1px} |
| .center-content{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%} |
| .left-content{display:flex;flex-direction:column;align-items:flex-start;text-align:left;width:100%;max-width:1100px} |
| .two-col{display:grid;grid-template-columns:1fr 1fr;gap:60px;width:100%;max-width:1100px;align-items:center} |
| .download-float{position:fixed;top:30px;left:40px;z-index:1000} |
| .download-btn{padding:10px 20px;background:linear-gradient(135deg,var(--accent),#0d9b76);border:none;border-radius:8px;color:white;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-decoration:none;display:inline-flex;align-items:center;gap:8px} |
| .download-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(22,199,154,.3)} |
| @media(max-width:1024px){.slide{padding:40px}.mega-title{font-size:3.5rem}.slide-title{font-size:2.4rem}.content-grid{grid-template-columns:1fr}.content-grid-3{grid-template-columns:1fr 1fr}.two-col{grid-template-columns:1fr;gap:30px}} |
| @media print{body{overflow:visible}.slide{position:relative;page-break-after:always;opacity:1;transform:none;height:100vh;pointer-events:all}.nav-controls,.slide-counter,.progress-bar,.download-float{display:none}} |
| </style> |
| </head> |
| <body> |
| <div class="progress-bar" id="progressBar"></div> |
| <div class="download-float"><button class="download-btn" onclick="window.print()">📥 Download as PDF</button></div> |
| <div class="presentation" id="presentation"> |
| |
| <div class="slide slide-1 active"> |
| <div class="iit-badge">National Road Safety Hackathon 2026 • IIT Madras</div> |
| <div class="glow-circle" style="width:400px;height:400px;background:var(--primary);top:-100px;right:-100px;"></div> |
| <div class="glow-circle" style="width:300px;height:300px;background:var(--accent);bottom:-50px;left:-50px;"></div> |
| <div class="center-content" style="position:relative;z-index:1;"> |
| <div class="emoji-big animate-scale">🚑</div> |
| <h1 class="mega-title animate-up delay-1">RoadSoS</h1> |
| <p class="subtitle animate-up delay-2" style="font-size:1.6rem;color:var(--light);font-weight:400;margin-top:20px;">Location-Based Emergency Services Locator</p> |
| <p class="subtitle animate-up delay-3" style="margin-top:8px;">for Road Accidents in India</p> |
| <div style="margin-top:50px;" class="animate-fade delay-4"> |
| <span class="tag">🏫 IIT Madras</span><span class="tag">🏆 Hackathon 2026</span><span class="tag tag-red">🚑 RoadSoS</span> |
| </div> |
| <p class="animate-fade delay-5" style="margin-top:40px;color:var(--gray);font-style:italic;font-size:1.1rem;">"Every minute matters in the Golden Hour"</p> |
| </div> |
| </div> |
| |
| <div class="slide slide-2"> |
| <div class="left-content"> |
| <span class="badge animate-up delay-1">THE CRISIS</span> |
| <h2 class="slide-title animate-up delay-1">India's Road Safety <span class="highlight">Emergency</span></h2> |
| <div class="content-grid animate-up delay-2"> |
| <div class="stat-box"><div class="stat-number">461,312</div><div class="stat-label">Road accidents annually</div></div> |
| <div class="stat-box"><div class="stat-number">168,491</div><div class="stat-label">Fatalities per year</div></div> |
| <div class="stat-box"><div class="stat-number">18.5</div><div class="stat-label">Deaths every HOUR</div></div> |
| <div class="stat-box"><div class="stat-number">50%</div><div class="stat-label">Die in Golden Hour</div></div> |
| </div> |
| <div style="margin-top:35px;width:100%;" class="animate-up delay-3"> |
| <h3 style="color:var(--primary);margin-bottom:16px;font-size:1.2rem;">Why victims die:</h3> |
| <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;"> |
| <div class="card" style="padding:16px;"><span style="color:var(--primary);">❌</span> Don't know WHERE nearest hospital is</div> |
| <div class="card" style="padding:16px;"><span style="color:var(--primary);">❌</span> Don't know WHICH number to call</div> |
| <div class="card" style="padding:16px;"><span style="color:var(--primary);">❌</span> Fear legal consequences of helping</div> |
| <div class="card" style="padding:16px;"><span style="color:var(--primary);">❌</span> No service info on highways</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="slide slide-3"> |
| <div class="left-content"> |
| <span class="badge animate-up">OUR SOLUTION</span> |
| <h2 class="slide-title animate-up delay-1">What <span class="highlight">RoadSoS</span> Does</h2> |
| <div class="content-grid animate-up delay-2"> |
| <div class="card"><div class="card-icon">🏥</div><div class="card-title">Hospital Finder</div><div class="card-text">Nearest trauma centres with distance, phone & address.</div></div> |
| <div class="card"><div class="card-icon">🚑</div><div class="card-title">Ambulance Access</div><div class="card-text">Direct dial 108/112 + private ambulance services.</div></div> |
| <div class="card"><div class="card-icon">👮</div><div class="card-title">Police Stations</div><div class="card-text">Nearest stations for FIR and traffic assistance.</div></div> |
| <div class="card"><div class="card-icon">🔧</div><div class="card-title">Vehicle Rescue</div><div class="card-text">Towing and repair services nearby.</div></div> |
| <div class="card"><div class="card-icon">🗺️</div><div class="card-title">Interactive Map</div><div class="card-text">Visual display of ALL services, color-coded markers.</div></div> |
| <div class="card"><div class="card-icon">⚖️</div><div class="card-title">Legal Awareness</div><div class="card-text">Good Samaritan Law §134A — you're PROTECTED.</div></div> |
| </div> |
| <p class="animate-up delay-3" style="margin-top:30px;color:var(--accent);font-weight:600;font-size:1.2rem;text-align:center;width:100%;">One search → All help → Under 5 seconds ⚡</p> |
| </div> |
| </div> |
| |
| <div class="slide slide-4"> |
| <div class="left-content"> |
| <span class="badge animate-up">ARCHITECTURE</span> |
| <h2 class="slide-title animate-up delay-1">Technology & <span class="highlight">Design</span></h2> |
| <div class="two-col animate-up delay-2"> |
| <div> |
| <div class="arch-box" style="margin-bottom:12px;"><strong>👤 User</strong> (Mobile / Desktop)</div> |
| <div class="arch-arrow">↓</div> |
| <div class="arch-box" style="margin-bottom:12px;border-color:rgba(233,69,96,.3);"><strong>🎨 Gradio UI</strong><br><small>Search | Report | Numbers | First Aid</small></div> |
| <div class="arch-arrow">↓</div> |
| <div class="arch-box" style="margin-bottom:12px;"><strong>⚙️ Python Backend</strong><br><small>Geocoding • Service Finder • Map Gen • DB</small></div> |
| <div class="arch-arrow">↓</div> |
| <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;"> |
| <div class="arch-box"><strong>🌍 Overpass API</strong><br><small>Live OSM Data</small></div> |
| <div class="arch-box"><strong>💾 SQLite</strong><br><small>Incident Log</small></div> |
| </div> |
| </div> |
| <div> |
| <h3 style="color:var(--accent);margin-bottom:20px;">Key Design Decisions</h3> |
| <ul class="feature-list"> |
| <li><span style="color:var(--accent);">✅</span> No paid APIs — fully open-source</li> |
| <li><span style="color:var(--accent);">✅</span> Works without GPS — text input OK</li> |
| <li><span style="color:var(--accent);">✅</span> Mobile-responsive design</li> |
| <li><span style="color:var(--accent);">✅</span> < 3 second response time</li> |
| <li><span style="color:var(--accent);">✅</span> 21 Indian states covered</li> |
| <li><span style="color:var(--accent);">✅</span> Offline fallback database</li> |
| </ul> |
| <div style="margin-top:24px;display:flex;flex-wrap:wrap;gap:6px;"> |
| <span class="tag">Python</span><span class="tag">Gradio</span><span class="tag">Folium</span><span class="tag">Leaflet.js</span><span class="tag">SQLite</span><span class="tag">OSM</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="slide slide-5"> |
| <div class="left-content"> |
| <span class="badge animate-up">LIVE RESULTS</span> |
| <h2 class="slide-title animate-up delay-1">Demo & <span class="highlight">Performance</span></h2> |
| <table class="modern-table animate-up delay-2"> |
| <thead><tr><th>Location</th><th>Services Found</th><th>Response Time</th><th>Types</th></tr></thead> |
| <tbody> |
| <tr><td>IIT Madras, Chennai</td><td class="highlight-cell">60</td><td>2.3s</td><td>🏥👮🚒💊🔧</td></tr> |
| <tr><td>MG Road, Bangalore</td><td class="highlight-cell">50</td><td>1.8s</td><td>🏥👮🚒💊🔧</td></tr> |
| <tr><td>Connaught Place, Delhi</td><td class="highlight-cell">45</td><td>2.1s</td><td>🏥👮💊🔧</td></tr> |
| <tr><td>NH44 Highway</td><td class="highlight-cell">25</td><td>3.1s</td><td>🏥👮🔧</td></tr> |
| </tbody> |
| </table> |
| <div class="content-grid-3 animate-up delay-3" style="margin-top:30px;"> |
| <div class="card" style="text-align:center;"><div class="card-icon">🔍</div><div class="card-title">Search</div><div class="card-text">Text or GPS → instant results</div></div> |
| <div class="card" style="text-align:center;"><div class="card-icon">🚨</div><div class="card-title">Report</div><div class="card-text">Severity-based action steps</div></div> |
| <div class="card" style="text-align:center;"><div class="card-icon">🩹</div><div class="card-title">First Aid</div><div class="card-text">7 injury types covered</div></div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="slide slide-6"> |
| <div class="left-content"> |
| <span class="badge animate-up">FUTURE VISION</span> |
| <h2 class="slide-title animate-up delay-1">Impact & <span class="highlight">Scalability</span></h2> |
| <div class="two-col animate-up delay-2"> |
| <div> |
| <div class="stat-box" style="margin-bottom:20px;"><div class="stat-number" style="font-size:2.2rem;">1,685 lives</div><div class="stat-label">saved annually (1% Golden Hour improvement)</div></div> |
| <div class="stat-box"><div class="stat-number" style="font-size:2.2rem;">₹4,200 Cr</div><div class="stat-label">economic value saved (MoRTH estimate)</div></div> |
| <div style="margin-top:24px;"><h4 style="color:var(--accent);margin-bottom:12px;">Government Alignment:</h4><div class="tag" style="margin:4px;">MV Act 2019 §134A</div><div class="tag" style="margin:4px;">Road Safety Policy 2017</div><div class="tag" style="margin:4px;">Golden Hour Scheme</div><div class="tag" style="margin:4px;">NHAI Corridors</div></div> |
| </div> |
| <div> |
| <h3 style="color:var(--accent);margin-bottom:20px;">Scalability Roadmap</h3> |
| <div class="timeline"> |
| <div class="timeline-item done"><div><strong style="color:var(--accent);">Phase 1 — Now ✅</strong><br><span style="color:var(--gray);">Web tool: search, report, first aid</span></div></div> |
| <div class="timeline-item future"><div><strong>Phase 2 — 3 months</strong><br><span style="color:var(--gray);">Mobile app + SMS fallback</span></div></div> |
| <div class="timeline-item future"><div><strong>Phase 3 — 6 months</strong><br><span style="color:var(--gray);">108/112 dispatch integration</span></div></div> |
| <div class="timeline-item future"><div><strong>Phase 4 — 9 months</strong><br><span style="color:var(--gray);">AI severity assessment from photos</span></div></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="slide slide-7"> |
| <div class="glow-circle" style="width:500px;height:500px;background:var(--primary);top:50%;left:50%;transform:translate(-50%,-50%);"></div> |
| <div class="center-content" style="position:relative;z-index:1;"> |
| <div class="emoji-big animate-scale" style="font-size:5rem;">🚑</div> |
| <h1 class="mega-title animate-up delay-1" style="font-size:4.5rem;">Thank You</h1> |
| <p class="subtitle animate-up delay-2" style="font-size:1.4rem;color:var(--light);margin-top:20px;">RoadSoS — <em>"Saving lives, one search at a time"</em></p> |
| <div class="quote animate-fade delay-3" style="margin-top:40px;">"India loses one life to road accidents every 3 minutes.<br>RoadSoS ensures help is always just one search away."</div> |
| <div style="margin-top:40px;display:flex;gap:16px;flex-wrap:wrap;justify-content:center;" class="animate-up delay-4"> |
| <span class="tag" style="font-size:.9rem;padding:8px 16px;">✅ Source Code</span><span class="tag" style="font-size:.9rem;padding:8px 16px;">✅ Documentation</span><span class="tag" style="font-size:.9rem;padding:8px 16px;">✅ Database</span><span class="tag" style="font-size:.9rem;padding:8px 16px;">✅ Presentation</span> |
| </div> |
| <div class="animate-fade delay-5" style="margin-top:50px;"><p style="color:var(--gray);font-size:.9rem;">National Road Safety Hackathon 2026 | IIT Madras</p><p style="color:var(--gray);font-size:.85rem;margin-top:5px;">Topic: RoadSoS • Centre of Excellence in Road Safety (CoERS)</p></div> |
| </div> |
| </div> |
| </div> |
| <div class="slide-counter"><span class="current" id="currentSlide">1</span> / 7</div> |
| <div class="nav-controls"><button class="nav-btn" onclick="prevSlide()">←</button><button class="nav-btn" onclick="nextSlide()">→</button></div> |
| <script> |
| let currentSlide=0;const totalSlides=7,slides=document.querySelectorAll('.slide'); |
| function showSlide(i){slides.forEach((s,j)=>{s.classList.remove('active','prev');if(j===i)s.classList.add('active');else if(j<i)s.classList.add('prev')});document.getElementById('currentSlide').textContent=i+1;document.getElementById('progressBar').style.width=((i+1)/totalSlides*100)+'%'} |
| function nextSlide(){if(currentSlide<totalSlides-1){currentSlide++;showSlide(currentSlide)}} |
| function prevSlide(){if(currentSlide>0){currentSlide--;showSlide(currentSlide)}} |
| document.addEventListener('keydown',e=>{if(e.key==='ArrowRight'||e.key===' '||e.key==='Enter'){e.preventDefault();nextSlide()}else if(e.key==='ArrowLeft'||e.key==='Backspace'){e.preventDefault();prevSlide()}}); |
| let touchStartX=0;document.addEventListener('touchstart',e=>{touchStartX=e.touches[0].clientX});document.addEventListener('touchend',e=>{const d=touchStartX-e.changedTouches[0].clientX;if(Math.abs(d)>50){if(d>0)nextSlide();else prevSlide()}}); |
| document.querySelector('.presentation').addEventListener('click',e=>{if(!e.target.closest('.nav-controls')&&!e.target.closest('.download-float'))nextSlide()}); |
| showSlide(0); |
| </script> |
| </body> |
| </html> |
|
|
