* fixed js heartbeat to look for all devices

* made gallery-specific css into a seperate stylesheet instead of inline
  `tags

assets/scripts/heartbeat.js

@@ -6,20 +6,30 @@ document.addEventListener('DOMContentLoaded', async function() {
         try {
             const response = await fetch('https://quinten0508.com/api/heartbeat');
             const data = await response.json();
-            const phoneDevice = data.find(device => device.device_name === 'Phone');
-            if (phoneDevice) {
-                const phoneTimestamp = phoneDevice.last_beat.timestamp;
-                const timestampMilliseconds = phoneTimestamp * 1000;
             
+            // Find device with the latest heartbeat
+            let latestDevice = null;
+            let latestTimestamp = 0;
+            
+            data.forEach(device => {
+                const timestamp = device.last_beat.timestamp;
+                if (timestamp > latestTimestamp) {
+                    latestTimestamp = timestamp;
+                    latestDevice = device;
+                }
+            });
+            
+            if (latestDevice) {
+                const timestampMilliseconds = latestTimestamp * 1000;
                 const currentTime = Date.now();
                 const difference = currentTime - timestampMilliseconds;
 
                 const isDead = difference > (1000 * 60 * 60 * 48);
                 const online = difference < (1000 * 60 * 5);
+                
                 if (online) {
                     heartbeatElement.textContent = 'Online!';
                     heartbeatElement.style = 'color: #00b400';
-                    return;
                 } else if (isDead) {
                     heartbeatElement.textContent = 'Dead';
                     heartbeatElement.style = 'color: #b30000';
@@ -28,8 +38,9 @@ document.addEventListener('DOMContentLoaded', async function() {
                     heartbeatElement.style = 'color: #00b400';
                 }
 
+                
             } else {
-                console.error('Device "Phone" not found.');
+                console.error('No devices found.');
             }
         } catch (error) {
             console.error('Error fetching last beat:', error);

gallery.html

@@ -7,92 +7,13 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="/style.css">
+    <link rel="stylesheet" href="/style_gallery.css">
+
 
     <script defer src="/assets/scripts/heartbeat.js"></script>
     <script defer src="/assets/scripts/onekoswap.js"></script>
     <script defer src="/assets/scripts/oneko.js" data-cat="/assets/oneko.gif"></script>
 
-    <style>
-        h6 {
-            margin-bottom: 1rem;
-        }
-        .gallery-divider {
-            width: 100%; /* Fill the horizontal space */
-            white-space: nowrap; /* Prevent wrapping */
-            overflow: hidden; /* Hide overflow */
-            font-size: 2rem;
-            margin: 0;
-            margin-top: 1em;
-            margin-bottom: 1em;
-        }
-        .masonry { /* Masonry container */
-            column-count: 2;
-            column-gap: 1em;
-        }
-            .gallery-masonry-img { /* Masonry bricks or child elements */
-              background-color: #eee;
-              display: inline-block;
-              margin: 0 0 1em;
-              width: 100%;
-            }
-
-        .gallery-img {
-            margin-top: 1em;
-            margin-bottom: 3em;
-            display: block;
-            margin-left: auto;
-            margin-right: auto;
-            width: 60%;
-            height: auto;
-        }
-
-        .gallery-video-box {
-            margin-top: 1em;
-            margin-bottom: 3em;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-            .gallery-video {
-                width: 100%;
-                height: auto;
-            }
-        .gallery-media-caption {
-            font-weight: 500;
-            font-style: italic;
-            font-size: 1.2rem;
-            margin: 0;
-            padding: 0;
-            margin-top: 0.5em;
-            color: #e9e9e9a2;
-            }
-        .gallery-spoiler-text {
-          background: white;
-          color: transparent;
-          cursor: help;
-          user-select: none;
-          transition: background 0.2s ease, color 0.1s ease;;
-        }
-            .gallery-spoiler-text:hover,
-            .gallery-spoiler-text:focus {
-              background: black;
-              color: inherit;
-            }
-
-        ul {
-            list-style-type: none;
-            margin: 0;
-            padding-left: 0;
-        }
-        a {
-            color: #E9E9E9;
-            text-decoration: underline;
-            position: relative;
-        }
-        ul li::before {
-            content: "* ";
-        }
-    </style>
 
 </head>
 
@@ -191,6 +112,16 @@
 
         </div> <!--container-main-->
 
+        <div class="sidebar sidebar-right" id="links-tree">
+            <div class="box" style="margin: 0;">
+                <h5 style="padding-bottom: 0;">Tree</h5>
+                <ul style="margin-bottom: 0;">
+                    <li><a href="/">Back</a></li>
+                </ul>
+            </div>      
+
+        </div>
+        
         
         </div> <!--sidebar-->
         <div id="stripes">

gallery/20240708_amsterdam.html

@@ -7,80 +7,13 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="/style.css">
+    <link rel="stylesheet" href="/style_gallery.css">
+
 
     <script defer src="/assets/scripts/heartbeat.js"></script>
     <script defer src="/assets/scripts/onekoswap.js"></script>
     <script defer src="/assets/scripts/oneko.js" data-cat="/assets/oneko.gif"></script>
 
-    <style>
-        h6 {
-            margin-bottom: 1rem;
-        }
-        .gallery-divider {
-            width: 100%; /* Fill the horizontal space */
-            white-space: nowrap; /* Prevent wrapping */
-            overflow: hidden; /* Hide overflow */
-            font-size: 2rem;
-            margin: 0;
-            margin-top: 1em;
-            margin-bottom: 1em;
-        }
-        .masonry { /* Masonry container */
-            column-count: 2;
-            column-gap: 1em;
-        }
-            .gallery-masonry-img { /* Masonry bricks or child elements */
-              background-color: #eee;
-              display: inline-block;
-              margin: 0 0 1em;
-              width: 100%;
-            }
-
-        .gallery-img {
-            margin-top: 1em;
-            margin-bottom: 3em;
-            display: block;
-            margin-left: auto;
-            margin-right: auto;
-            width: 60%;
-            height: auto;
-        }
-
-        .gallery-video-box {
-            margin-top: 1em;
-            margin-bottom: 3em;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-            .gallery-video {
-                width: 100%;
-                height: auto;
-            }
-            .gallery-media-caption {
-                font-weight: 500;
-                font-style: italic;
-                font-size: 1.2rem;
-                margin: 0;
-                padding: 0;
-                margin-top: 0.5em;
-                color: #e9e9e9a2;
-                }
-
-            .gallery-spoiler-text {
-              background: white;
-              color: transparent;
-              cursor: help;
-              user-select: none;
-              transition: background 0.2s ease, color 0.1s ease;;
-            }
-            .gallery-spoiler-text:hover,
-            .gallery-spoiler-text:focus {
-              background: black;
-              color: inherit;
-            }
-    </style>
-
 </head>
 
 <body>
@@ -146,7 +79,7 @@
                 <!-- must resist the urge to dynamically generate this, fuck js -->
                  <h5 style="display: inline-block;  padding: 0;">Current directory:</h5>
                  <p style="display: inline-block;">
-                <img src="/assets/icons/tux.svg" id="directory-icon">/<a class="link" href="/">home/quinten</a>/<a class="link" href="/gallery.html">gallery</a>/<a class="link" href="/gallery/20250301_porter.html">20250301_porter</a>
+                <img src="/assets/icons/tux.svg" id="directory-icon">/<a class="link" href="/">home/quinten</a>/<a class="link" href="/gallery.html">gallery</a>/<a class="link" href="/gallery/20240708_amsterdam.html">20240708_amsterdam</a>
                 </p>
             </div>
 

gallery/20240802_chamonix.html

@@ -7,79 +7,12 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="/style.css">
+    <link rel="stylesheet" href="/style_gallery.css">
 
     <script defer src="/assets/scripts/heartbeat.js"></script>
     <script defer src="/assets/scripts/onekoswap.js"></script>
     <script defer src="/assets/scripts/oneko.js" data-cat="/assets/oneko.gif"></script>
 
-    <style>
-        h6 {
-            margin-bottom: 1rem;
-        }
-        .gallery-divider {
-            width: 100%; /* Fill the horizontal space */
-            white-space: nowrap; /* Prevent wrapping */
-            overflow: hidden; /* Hide overflow */
-            font-size: 2rem;
-            margin: 0;
-            margin-top: 1em;
-            margin-bottom: 1em;
-        }
-        .masonry { /* Masonry container */
-            column-count: 2;
-            column-gap: 1em;
-        }
-            .gallery-masonry-img { /* Masonry bricks or child elements */
-              background-color: #eee;
-              display: inline-block;
-              margin: 0 0 1em;
-              width: 100%;
-            }
-
-        .gallery-img {
-            margin-top: 1em;
-            margin-bottom: 3em;
-            display: block;
-            margin-left: auto;
-            margin-right: auto;
-            width: 60%;
-            height: auto;
-        }
-
-        .gallery-video-box {
-            margin-top: 1em;
-            margin-bottom: 3em;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-            .gallery-video {
-                width: 100%;
-                height: auto;
-            }
-            .gallery-media-caption {
-                font-weight: 500;
-                font-style: italic;
-                font-size: 1.2rem;
-                margin: 0;
-                padding: 0;
-                margin-top: 0.5em;
-                color: #e9e9e9a2;
-                }
-
-            .gallery-spoiler-text {
-              background: white;
-              color: transparent;
-              cursor: help;
-              user-select: none;
-              transition: background 0.2s ease, color 0.1s ease;;
-            }
-            .gallery-spoiler-text:hover,
-            .gallery-spoiler-text:focus {
-              background: black;
-              color: inherit;
-            }
-    </style>
 
 </head>
 
@@ -146,7 +79,7 @@
                 <!-- must resist the urge to dynamically generate this, fuck js -->
                  <h5 style="display: inline-block;  padding: 0;">Current directory:</h5>
                  <p style="display: inline-block;">
-                <img src="/assets/icons/tux.svg" id="directory-icon">/<a class="link" href="/">home/quinten</a>/<a class="link" href="/gallery.html">gallery</a>
+                <img src="/assets/icons/tux.svg" id="directory-icon">/<a class="link" href="/">home/quinten</a>/<a class="link" href="/gallery.html">gallery</a>/<a class="link" href="/gallery/20240802_chamonix.html">20240802_chamonix</a>
                 </p>
             </div>
 

gallery/20250301_porter.html

@@ -7,79 +7,12 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="/style.css">
+    <link rel="stylesheet" href="/style_gallery.css">
 
     <script defer src="/assets/scripts/heartbeat.js"></script>
     <script defer src="/assets/scripts/onekoswap.js"></script>
     <script defer src="/assets/scripts/oneko.js" data-cat="/assets/oneko.gif"></script>
 
-    <style>
-        h6 {
-            margin-bottom: 1rem;
-        }
-        .gallery-divider {
-            width: 100%; /* Fill the horizontal space */
-            white-space: nowrap; /* Prevent wrapping */
-            overflow: hidden; /* Hide overflow */
-            font-size: 2rem;
-            margin: 0;
-            margin-top: 1em;
-            margin-bottom: 1em;
-        }
-        .masonry { /* Masonry container */
-            column-count: 2;
-            column-gap: 1em;
-        }
-            .gallery-masonry-img { /* Masonry bricks or child elements */
-              background-color: #eee;
-              display: inline-block;
-              margin: 0 0 1em;
-              width: 100%;
-            }
-
-        .gallery-img {
-            margin-top: 1em;
-            margin-bottom: 3em;
-            display: block;
-            margin-left: auto;
-            margin-right: auto;
-            width: 60%;
-            height: auto;
-        }
-
-        .gallery-video-box {
-            margin-top: 1em;
-            margin-bottom: 3em;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-            .gallery-video {
-                width: 100%;
-                height: auto;
-            }
-            .gallery-media-caption {
-                font-weight: 500;
-                font-style: italic;
-                font-size: 1.2rem;
-                margin: 0;
-                padding: 0;
-                margin-top: 0.5em;
-                color: #e9e9e9a2;
-                }
-
-            .gallery-spoiler-text {
-              background: white;
-              color: transparent;
-              cursor: help;
-              user-select: none;
-              transition: background 0.2s ease, color 0.1s ease;;
-            }
-            .gallery-spoiler-text:hover,
-            .gallery-spoiler-text:focus {
-              background: black;
-              color: inherit;
-            }
-    </style>
 
 </head>
 

gallery/template.html

@@ -7,79 +7,12 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="/style.css">
+    <link rel="stylesheet" href="/style_gallery.css">
 
     <script defer src="/assets/scripts/heartbeat.js"></script>
     <script defer src="/assets/scripts/onekoswap.js"></script>
     <script defer src="/assets/scripts/oneko.js" data-cat="/assets/oneko.gif"></script>
 
-    <style>
-        h6 {
-            margin-bottom: 1rem;
-        }
-        .gallery-divider {
-            width: 100%; /* Fill the horizontal space */
-            white-space: nowrap; /* Prevent wrapping */
-            overflow: hidden; /* Hide overflow */
-            font-size: 2rem;
-            margin: 0;
-            margin-top: 1em;
-            margin-bottom: 1em;
-        }
-        .masonry { /* Masonry container */
-            column-count: 2;
-            column-gap: 1em;
-        }
-            .gallery-masonry-img { /* Masonry bricks or child elements */
-              background-color: #eee;
-              display: inline-block;
-              margin: 0 0 1em;
-              width: 100%;
-            }
-
-        .gallery-img {
-            margin-top: 1em;
-            margin-bottom: 3em;
-            display: block;
-            margin-left: auto;
-            margin-right: auto;
-            width: 60%;
-            height: auto;
-        }
-
-        .gallery-video-box {
-            margin-top: 1em;
-            margin-bottom: 3em;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-            .gallery-video {
-                width: 100%;
-                height: auto;
-            }
-            .gallery-media-caption {
-                font-weight: 500;
-                font-style: italic;
-                font-size: 1.2rem;
-                margin: 0;
-                padding: 0;
-                margin-top: 0.5em;
-                color: #e9e9e9a2;
-                }
-
-            .gallery-spoiler-text {
-              background: white;
-              color: transparent;
-              cursor: help;
-              user-select: none;
-              transition: background 0.2s ease, color 0.1s ease;;
-            }
-            .gallery-spoiler-text:hover,
-            .gallery-spoiler-text:focus {
-              background: black;
-              color: inherit;
-            }
-    </style>
 
 </head>
 
@@ -146,7 +79,7 @@
                 <!-- must resist the urge to dynamically generate this, fuck js -->
                  <h5 style="display: inline-block;  padding: 0;">Current directory:</h5>
                  <p style="display: inline-block;">
-                <img src="/assets/icons/tux.svg" id="directory-icon">/<a class="link" href="/">home/quinten</a>/<a class="link" href="/gallery.html">gallery</a>/<a class="link" href="/gallery/20250301_porter.html">20250301_porter</a>
+                <img src="/assets/icons/tux.svg" id="directory-icon">/<a class="link" href="/">home/quinten</a>/<a class="link" href="/gallery.html">gallery</a>/<a class="link" href="template.html">TEMPLATE</a>
                 </p>
             </div>
 

style_gallery.css

@@ -0,0 +1,69 @@
+h6 {
+    margin-bottom: 1rem;
+}
+.gallery-divider {
+    width: 100%; /* Fill the horizontal space */
+    white-space: nowrap; /* Prevent wrapping */
+    overflow: hidden; /* Hide overflow */
+    font-size: 2rem;
+    margin: 0;
+    margin-top: 1em;
+    margin-bottom: 1em;
+}
+.masonry { /* Masonry container */
+    column-count: 2;
+    column-gap: 1em;
+}
+    .gallery-masonry-img { /* Masonry bricks or child elements */
+      background-color: #eee;
+      display: inline-block;
+      margin: 0 0 1em;
+      width: 100%;
+    }
+
+.gallery-img {
+    margin-top: 1em;
+    margin-bottom: 3em;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 60%;
+    height: auto;
+}
+
+.gallery-video-box {
+    margin-top: 1em;
+    margin-bottom: 3em;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+    .gallery-video {
+        width: 100%;
+        height: auto;
+    }
+    .gallery-media-caption {
+        font-weight: 500;
+        font-style: italic;
+        font-size: 1.2rem;
+        margin: 0;
+        padding: 0;
+        margin-top: 0.5em;
+        color: #e9e9e9a2;
+        }
+
+    .gallery-spoiler-text {
+      background: white;
+      color: transparent;
+      cursor: help;
+      user-select: none;
+      transition: background 0.2s ease, color 0.1s ease;;
+    }
+    .gallery-spoiler-text:hover,
+    .gallery-spoiler-text:focus {
+      background: black;
+      color: inherit;
+    }
+#links-tree ul li:first-child::before {
+content: "← "; /* arrow for "BACK" button */
+}