Merge pull request #57 from litemotiv/online_users

Simplify active users scroller and prevent loop from finishing early
This commit is contained in:
deepend-tildeclub 2024-12-07 17:22:29 -07:00 committed by GitHub
commit b45ec60cc2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 34 additions and 64 deletions

View File

@ -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> --> <!-- <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 --> <!-- Active Users Scrolling List -->
<div class="active-users-container"> <div id="active-users">
<h2 style="display: inline;">Currently Active Users:</h2> <h2>Currently Active Users:</h2>
<div class="active-users-list"> <?php
<ul> $activeUsers = json_decode(file_get_contents('/usr/share/nginx/html/online-users.json'), true);
<?php
$activeUsers = json_decode(file_get_contents('online-users.json'), true);
if (!empty($activeUsers)) { if (!empty($activeUsers))
foreach ($activeUsers as $user) { {
$username = htmlspecialchars($user); echo '<marquee scrollamount="2">';
echo "<li><a href='/~$username'>$username</a></li>";
} foreach ($activeUsers as $user)
// Repeat the list for seamless scrolling {
foreach ($activeUsers as $user) { $username = htmlspecialchars($user);
$username = htmlspecialchars($user); echo "<a href='/~$username'>$username</a> &nbsp;";
echo "<li><a href='/~$username'>$username</a></li>"; }
}
} else { echo '</marquee>';
echo "<li>No active users at the moment.</li>"; }
} else
?> {
</ul> echo "<li>No active users at the moment.</li>";
</div> }
?>
</div> </div>
<div class="grid"> <div class="grid">
<div class="row"> <div class="row">

View File

@ -298,53 +298,24 @@ pre {
font-weight: bold; font-weight: bold;
color: #fb5 !important; /* Use !important to override other styles */ color: #fb5 !important; /* Use !important to override other styles */
} }
.active-users-container {
#active-users {
margin-top: 20px; margin-top: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
white-space: nowrap; gap:10px;
} }
.active-users-list { #active-users h2 {
overflow: hidden; flex-shrink:0;
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-list ul { #active-users a {
display: flex; color: #fb5;
padding: 0; text-decoration: none;
margin: 0; }
list-style-type: none;
white-space: nowrap;
animation: scroll-left 30s linear infinite; /* Adjust the duration as needed */
}
.active-users-list li { #active-users a:hover {
display: inline-block; color: #f70;
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%);
}
}