forked from
btao.org/atmosphereconf-tv
A viewer for AtmosphereConf 2026 talks with fixed routes you can link to
Add desktop Safari unsupported warning banner
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
+44
+44
public/index.html
+44
public/index.html
···
345
345
margin-top: 8px;
346
346
}
347
347
.source-link:hover { color: rgba(255, 255, 255, 0.5); }
348
+
349
+
.safari-warning {
350
+
display: none;
351
+
position: fixed;
352
+
bottom: 24px; left: 50%; transform: translateX(-50%);
353
+
z-index: 100;
354
+
background: rgba(30, 26, 20, 0.95);
355
+
border: 1px solid rgba(160, 216, 160, 0.3);
356
+
border-radius: 8px;
357
+
padding: 12px 20px;
358
+
font-family: 'VT323', monospace;
359
+
font-size: 18px;
360
+
color: var(--phosphor);
361
+
text-shadow: 0 0 6px rgba(100, 200, 100, 0.3);
362
+
text-align: center;
363
+
max-width: 90vw;
364
+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
365
+
}
366
+
.safari-warning.visible { display: block; }
367
+
.safari-warning-close {
368
+
background: none; border: none; color: var(--phosphor);
369
+
font-family: 'VT323', monospace; font-size: 18px;
370
+
cursor: pointer; margin-left: 12px; opacity: 0.6;
371
+
}
372
+
.safari-warning-close:hover { opacity: 1; }
348
373
</style>
349
374
</head>
350
375
<body>
···
392
417
<a class="source-link" href="https://github.com/taobojlen/atmosphereconf-tv" target="_blank" rel="noopener">source code</a>
393
418
</div>
394
419
420
+
<div class="safari-warning" id="safariWarning">
421
+
⚠ Desktop Safari isn't supported yet — try Firefox or Chrome for the best experience
422
+
<button class="safari-warning-close" id="safariWarningClose" aria-label="Dismiss">✕</button>
423
+
</div>
424
+
425
+
<script>
426
+
// Desktop Safari detection: Safari UA without mobile indicators
427
+
(function() {
428
+
var ua = navigator.userAgent;
429
+
var isSafari = /Safari/.test(ua) && !/Chrome|Chromium|CriOS|FxiOS|EdgA|Edg/.test(ua);
430
+
var isMobile = /iPhone|iPad|iPod|Android/.test(ua) || (navigator.maxTouchPoints > 1 && /Macintosh/.test(ua));
431
+
if (isSafari && !isMobile) {
432
+
document.getElementById('safariWarning').classList.add('visible');
433
+
document.getElementById('safariWarningClose').addEventListener('click', function() {
434
+
document.getElementById('safariWarning').classList.remove('visible');
435
+
});
436
+
}
437
+
})();
438
+
</script>
395
439
<script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
396
440
<script>
397
441
(function() {