From c93fae31e1a18ac028eb56af302d870e3bdc8e26 Mon Sep 17 00:00:00 2001
From: litemotiv <litemotiv@tilde.club>
Date: Sat, 2 Nov 2024 12:45:35 +0100
Subject: [PATCH] Simplify active users scroller and prevent loop from
 finishing early

---
 index.php | 43 +++++++++++++++++++++----------------------
 style.css | 55 +++++++++++++------------------------------------------
 2 files changed, 34 insertions(+), 64 deletions(-)

diff --git a/index.php b/index.php
index 5c142bb..bed7765 100644
--- a/index.php
+++ b/index.php
@@ -18,29 +18,28 @@ if (isset($_GET['notice'])) {
 
 <!-- <p class="advisory">GMAIL USERS: We no longer accept gmail.com addresses for signups since you would not receive your account information email.</p> -->
 <!-- Active Users Scrolling List -->
-<div class="active-users-container">
-    <h2 style="display: inline;">Currently Active Users:</h2>
-    <div class="active-users-list">
-        <ul>
-        <?php
-        $activeUsers = json_decode(file_get_contents('online-users.json'), true);
+<div id="active-users">
+    <h2>Currently Active Users:</h2>
+	<?php
+	$activeUsers = json_decode(file_get_contents('/usr/share/nginx/html/online-users.json'), true);
 
-        if (!empty($activeUsers)) {
-            foreach ($activeUsers as $user) {
-                $username = htmlspecialchars($user);
-                echo "<li><a href='/~$username'>$username</a></li>";
-            }
-            // Repeat the list for seamless scrolling
-            foreach ($activeUsers as $user) {
-                $username = htmlspecialchars($user);
-                echo "<li><a href='/~$username'>$username</a></li>";
-            }
-        } else {
-            echo "<li>No active users at the moment.</li>";
-        }
-        ?>
-        </ul>
-    </div>
+	if (!empty($activeUsers)) 
+	{
+		echo '<marquee scrollamount="2">';
+
+		foreach ($activeUsers as $user) 
+		{
+			$username = htmlspecialchars($user);
+			echo "<a href='/~$username'>$username</a> &nbsp;";
+		}
+
+		echo '</marquee>';
+	} 
+	else 
+	{
+		echo "<li>No active users at the moment.</li>";
+	}
+	?>
 </div>
 <div class="grid">
     <div class="row">
diff --git a/style.css b/style.css
index 146cb52..b6c9a6a 100644
--- a/style.css
+++ b/style.css
@@ -298,53 +298,24 @@ pre {
     font-weight: bold;
     color: #fb5 !important; /* Use !important to override other styles */
 }
-.active-users-container {
+
+#active-users {
     margin-top: 20px;
     display: flex;
     align-items: center;
-    white-space: nowrap;
+	gap:10px;
 }
 
-.active-users-list {
-    overflow: hidden;
-    box-sizing: border-box;
-    padding-left: 10px; /* Space between heading and scrolling list */
-    background-color: #111;
-    color: #fb5;
-    width: 100%; /* Make the list take up the rest of the available space */
-    position: relative;
-}
+	#active-users h2 {
+		flex-shrink:0;
+	}
 
-.active-users-list ul {
-    display: flex;
-    padding: 0;
-    margin: 0;
-    list-style-type: none;
-    white-space: nowrap;
-    animation: scroll-left 30s linear infinite; /* Adjust the duration as needed */
-}
+	#active-users a {
+		color: #fb5;
+		text-decoration: none;
+	}
 
-.active-users-list li {
-    display: inline-block;
-    padding: 0 20px; /* Space between usernames */
-    font-family: "courier new", monospace;
-}
-
-.active-users-list a {
-    color: #fb5;
-    text-decoration: none;
-}
-
-.active-users-list a:hover {
-    color: #f70;
-}
-
-@keyframes scroll-left {
-    0% {
-        transform: translateX(0);
-    }
-    100% {
-        transform: translateX(-100%);
-    }
-}
+		#active-users a:hover {
+			color: #f70;
+		}