Avoid overflow for navigation buttons

Enable full screen mode for images
Restrict users from viewing cached page using back button

src/templates/index.rs

@@ -129,9 +129,11 @@ pub fn get_content() -> String {
 </body>
 <!-- control the behavior of the browser's navigation without triggering a full page reload -->
 <script>
-    history.pushState(null, document.title, location.href);
-    window.addEventListener('popstate', function (event) {
+    document.addEventListener('DOMContentLoaded', function() {
         history.pushState(null, document.title, location.href);
+        window.addEventListener('popstate', function (event) {
+            history.pushState(null, document.title, location.href);
+        });
     });
 </script>
 <!-- handle authentication from login page -->

src/templates/landing.rs

@@ -101,13 +101,20 @@ pub fn get_content() -> String {
             height: 75vh; /* Set height to 75% of the viewport height */
             margin: 0 auto; /* Center the container horizontally */
         }
+        #nav-container {
+            position: relative;
+            width: 70%;
+            margin: 0 auto; /* Center the container horizontally */
+        }
         #image-source {
             max-width: 100%;
             height: 75vh;
             margin: 0 auto; /* Center the container horizontally */
             display: flex;
             justify-content: center;
             align-items: center; /* Center the container vertically */
+            cursor: pointer; /* Add a pointer cursor to indicate it's clickable */
+            overflow: hidden; /* Avoid vertical overflow */
         }
         #video-player {
             position: relative;
@@ -158,7 +165,7 @@ pub fn get_content() -> String {
     <br><br>
     <h1>{{ media_title }}</h1>
     {% if render_image %}
-        <img id="image-source" src="">
+        <img id="image-source" src="" onclick="fullScreen()">
     {% else %}
         <div id="content-container">
             <video id="video-player"
@@ -185,7 +192,7 @@ pub fn get_content() -> String {
             </video>
         </div>
     {% endif %}
-    <div id="content-container">
+    <div id="nav-container">
         {% if previous %}
             <button class="iter" style="float: left" onclick="window.location='{{ previous }}'" title="{{ previous }}">
                 <i class="fa fa-backward"></i> Previous
@@ -238,6 +245,34 @@ pub fn get_content() -> String {
             window.history.back();
         }
     </script>
+    <script>
+        function fullScreen() {
+            var image = document.getElementById("image-source");
+            if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
+                // Enter fullscreen mode
+                if (image.requestFullscreen) {
+                    image.requestFullscreen();
+                } else if (image.mozRequestFullScreen) { /* Firefox */
+                    image.mozRequestFullScreen();
+                } else if (image.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
+                    image.webkitRequestFullscreen();
+                } else if (image.msRequestFullscreen) { /* IE/Edge */
+                    image.msRequestFullscreen();
+                }
+            } else {
+                // Exit fullscreen mode
+                if (document.exitFullscreen) {
+                    document.exitFullscreen();
+                } else if (document.mozCancelFullScreen) { /* Firefox */
+                    document.mozCancelFullScreen();
+                } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
+                    document.webkitExitFullscreen();
+                } else if (document.msExitFullscreen) { /* IE/Edge */
+                    document.msExitFullscreen();
+                }
+            }
+        }
+    </script>
 </body>
 </html>
 "###.to_string()

src/templates/logout.rs

@@ -75,6 +75,15 @@ pub fn get_content() -> String {
 {% endif %}
 <h4>Click <a href="https://vigneshrao.com/contact">ME</a> to reach out.</h4>
 </body>
+<!-- control the behavior of the browser's navigation without triggering a full page reload -->
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        history.pushState(null, document.title, location.href);
+        window.addEventListener('popstate', function (event) {
+            history.pushState(null, document.title, location.href);
+        });
+    });
+</script>
 </html>
 "###.to_string()
 }

src/templates/session.rs

@@ -75,6 +75,15 @@ pub fn get_content() -> String {
 </button>
 <h4>Click <a href="https://vigneshrao.com/contact">HERE</a> to reach out.</h4>
 </body>
+<!-- control the behavior of the browser's navigation without triggering a full page reload -->
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        history.pushState(null, document.title, location.href);
+        window.addEventListener('popstate', function (event) {
+            history.pushState(null, document.title, location.href);
+        });
+    });
+</script>
 </html>
 "###.to_string()
 }

src/templates/unauthorized.rs

@@ -73,6 +73,15 @@ pub fn get_content() -> String {
 </button>
 <h4>Click <a href="https://vigneshrao.com/contact">HERE</a> to reach out.</h4>
 </body>
+<!-- control the behavior of the browser's navigation without triggering a full page reload -->
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        history.pushState(null, document.title, location.href);
+        window.addEventListener('popstate', function (event) {
+            history.pushState(null, document.title, location.href);
+        });
+    });
+</script>
 </html>
 "###.to_string()
 }