From 9e0bf3faf0807a992b9dbf94d57ae11e3fd4dd5b Mon Sep 17 00:00:00 2001
From: thevickypedia <vignesh.sivanandarao@gmail.com>
Date: Thu, 1 Feb 2024 11:04:50 -0600
Subject: [PATCH] Keep `meta` and `noscript` tags similar across all templates

---
 README.md                            |  2 +-
 pystream/templates/index.html        | 24 ++++++++++++++++++++++++
 pystream/templates/land.html         | 24 ++++++++++++++++++++++++
 pystream/templates/list.html         | 24 ++++++++++++++++++++++++
 pystream/templates/logout.html       |  7 ++++++-
 pystream/templates/session.html      |  7 ++++++-
 pystream/templates/unauthorized.html |  7 ++++++-
 7 files changed, 91 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index c271cef..b504edc 100644
--- a/README.md
+++ b/README.md
@@ -33,7 +33,7 @@ if __name__ == '__main__':
 ```
 
 ### Env Variables
-> :bulb: &nbsp; Environment variables can _(optionally)_ be loaded from any file.<br>
+> :bulb: &nbsp; Environment variables can _(optionally)_ be loaded from any plain text file.<br>
 > Refer the [wiki page][wiki] for more information.
 
 **Mandatory**
diff --git a/pystream/templates/index.html b/pystream/templates/index.html
index 0248d1c..3bf24e3 100644
--- a/pystream/templates/index.html
+++ b/pystream/templates/index.html
@@ -8,6 +8,30 @@
     <meta name="author" content="Vignesh Rao">
     <meta name="image" property="og:image" content="https://thevickypedia.com/img/apple-touch-icon.jpg">
     <meta content="width=device-width, initial-scale=1" name="viewport">
+    <noscript>
+        <style>
+            body {
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
+            }
+        </style>
+        <div style="position: fixed; text-align:center;
+                height: 100%; width: 100%; background-image: url('https://vigneshrao.com/img/auth_server/bg.jpg')">
+            <h2 style="margin-top:5%">This page requires JavaScript
+                to be enabled.
+                <br><br>
+                Please refer <a href="https://www.enable-javascript.com/">enable-javascript</a> for how to.
+            </h2>
+            <p>
+                <img src="https://vigneshrao.com/img/auth_server/javascript.gif" width="230" height="200"
+                     alt="loader" class="center">
+            </p>
+            <form>
+                <button type="submit" onClick="<meta httpEquiv='refresh' content='0'>">RETRY</button>
+            </form>
+        </div>
+    </noscript>
     <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.js"></script>
     <!-- Disables 404 for favicon.ico which is a logo on top of the webpage tab -->
diff --git a/pystream/templates/land.html b/pystream/templates/land.html
index 16ea9d4..7b6438b 100644
--- a/pystream/templates/land.html
+++ b/pystream/templates/land.html
@@ -18,6 +18,30 @@
     <link rel="shortcut icon" href="#">
     <!-- Font Awesome icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <noscript>
+        <style>
+            body {
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
+            }
+        </style>
+        <div style="position: fixed; text-align:center;
+                height: 100%; width: 100%; background-image: url('https://vigneshrao.com/img/auth_server/bg.jpg')">
+            <h2 style="margin-top:5%">This page requires JavaScript
+                to be enabled.
+                <br><br>
+                Please refer <a href="https://www.enable-javascript.com/">enable-javascript</a> for how to.
+            </h2>
+            <p>
+                <img src="https://vigneshrao.com/img/auth_server/javascript.gif" width="230" height="200"
+                     alt="loader" class="center">
+            </p>
+            <form>
+                <button type="submit" onClick="<meta httpEquiv='refresh' content='0'>">RETRY</button>
+            </form>
+        </div>
+    </noscript>
     <!-- Button CSS -->
     <style>
         .iter {
diff --git a/pystream/templates/list.html b/pystream/templates/list.html
index f1dfdbd..7e3d4bb 100644
--- a/pystream/templates/list.html
+++ b/pystream/templates/list.html
@@ -16,6 +16,30 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
     <script type="text/javascript" src="https://rawgit.com/thevickypedia/open-source/main/nightmode/night.js" defer></script>
     <link rel="stylesheet" href="https://rawgit.com/thevickypedia/open-source/main/nightmode/night.css">
+    <noscript>
+        <style>
+            body {
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
+            }
+        </style>
+        <div style="position: fixed; text-align:center;
+                height: 100%; width: 100%; background-image: url('https://vigneshrao.com/img/auth_server/bg.jpg')">
+            <h2 style="margin-top:5%">This page requires JavaScript
+                to be enabled.
+                <br><br>
+                Please refer <a href="https://www.enable-javascript.com/">enable-javascript</a> for how to.
+            </h2>
+            <p>
+                <img src="https://vigneshrao.com/img/auth_server/javascript.gif" width="230" height="200"
+                     alt="loader" class="center">
+            </p>
+            <form>
+                <button type="submit" onClick="<meta httpEquiv='refresh' content='0'>">RETRY</button>
+            </form>
+        </div>
+    </noscript>
     <!-- Button CSS -->
     <style>
         body {
diff --git a/pystream/templates/logout.html b/pystream/templates/logout.html
index fbc055b..18b25fe 100644
--- a/pystream/templates/logout.html
+++ b/pystream/templates/logout.html
@@ -1,8 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>FastAPI video streaming</title>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta property="og:type" content="VideoStreaming">
+    <meta name="keywords" content="Python, streaming, fastapi, JavaScript, HTML, CSS">
+    <meta name="author" content="Vignesh Rao">
+    <meta name="image" property="og:image" content="https://thevickypedia.com/img/apple-touch-icon.jpg">
+    <meta content="width=device-width, initial-scale=1" name="viewport">
     <style>
         img {
             display: block;
diff --git a/pystream/templates/session.html b/pystream/templates/session.html
index 9c1294b..b1c4803 100644
--- a/pystream/templates/session.html
+++ b/pystream/templates/session.html
@@ -1,8 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>FastAPI video streaming</title>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta property="og:type" content="VideoStreaming">
+    <meta name="keywords" content="Python, streaming, fastapi, JavaScript, HTML, CSS">
+    <meta name="author" content="Vignesh Rao">
+    <meta name="image" property="og:image" content="https://thevickypedia.com/img/apple-touch-icon.jpg">
+    <meta content="width=device-width, initial-scale=1" name="viewport">
     <style>
         img {
             display: block;
diff --git a/pystream/templates/unauthorized.html b/pystream/templates/unauthorized.html
index 5164053..acc90ef 100644
--- a/pystream/templates/unauthorized.html
+++ b/pystream/templates/unauthorized.html
@@ -1,8 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>FastAPI video streaming</title>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta property="og:type" content="VideoStreaming">
+    <meta name="keywords" content="Python, streaming, fastapi, JavaScript, HTML, CSS">
+    <meta name="author" content="Vignesh Rao">
+    <meta name="image" property="og:image" content="https://thevickypedia.com/img/apple-touch-icon.jpg">
+    <meta content="width=device-width, initial-scale=1" name="viewport">
     <style>
         img {
             display: block;