3 files changed, 13 insertions, 2 deletions
diff --git a/templates/var/www/html/index.html b/templates/var/www/html/index.html
index 9f6d327..d05e316 100644
--- a/templates/var/www/html/index.html
+++ b/templates/var/www/html/index.html
@@ -18,6 +18,7 @@
         <a class="link" target="_blank" href="/stream">direct stream url</a>
         <a id="toggleBg" class="link" href="#">background (on)</a>
       </div>
+      <div id="alert"></div>
       <audio id="radioPlayer" hidden>
         <source src="/stream" type="audio/ogg" />
         Your browser does not support the audio element.
@@ -25,8 +26,7 @@
     </div>
   </div>
 
-  <script>
-  </script>
+  <script src="misc.js"></script>
   <script src="audio-controls.js"></script>
   <script src="video-background.js"></script>
 </body>
diff --git a/templates/var/www/html/misc.js b/templates/var/www/html/misc.js
new file mode 100644
index 0000000..4532fba
--- /dev/null
+++ b/templates/var/www/html/misc.js
@@ -0,0 +1,7 @@
+if (/iP(hone|od|ad)/.test(navigator.userAgent)) {
+  const alertDiv = document.getElementById('alert');
+  alertDiv.textContent = "iOS does not support browser OGG streaming";
+  alertDiv.style.color = "#FF0000";
+  alertDiv.style.fontWeight = "normal";
+  alertDiv.style.display = "block";
+} 
diff --git a/templates/var/www/html/style.css b/templates/var/www/html/style.css
index 89aefae..f0b8b90 100644
--- a/templates/var/www/html/style.css
+++ b/templates/var/www/html/style.css
@@ -66,6 +66,10 @@ body {
     text-overflow: ellipsis;
 }
 
+#alert {
+    display: none;
+}
+
 .index-container {
     display: flex;
     justify-content: center;