TildeClub
/
site
mirror of https://github.com/tildeclub/site.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Simplify active users scroller and prevent loop from finishing early

This commit is contained in:
litemotiv 2024-11-02 12:45:35 +01:00
parent b113fe11a3
commit c93fae31e1
2 changed files with 34 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
index.php
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> -->
<!-- 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">

55
style.css
View File

@ -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;
}