feat: add active users and update user list style

index.php

@@ -20,8 +20,26 @@ include 'header.php';
 
 $slogans = file("slogans.txt");
 $slogan = $slogans[rand(0, count($slogans) - 1)];
+$activeUsers = json_decode(file_get_contents('/opt/html/online.json'), true);
 
 ?>
+<pre class="scroll">
+<h3>Użytkownicy online: <?php
+if (!empty($activeUsers)) {
+    echo '<marquee scrollamount="3" behavior="alternate">';
+    foreach ($activeUsers as $user) {
+        $username = htmlspecialchars($user);
+        echo "<a href='/~$username'>$username</a> &nbsp;";
+    }
+    echo '</marquee>';
+} else {
+    echo "/dev/null";
+}
+
+?></h3>
+
+</pre>
+
 <pre class="ascii">
    /$$               /$$       /$$
   | $$              | $$      | $$

static/css/main.css

@@ -103,11 +103,54 @@ footer#footer > *:not(:last-child)::after {
 }
 
 pre.ascii {
+    margin-top: 2rem;
     margin-bottom: 2rem;
     font-size: 1rem;
     overflow: auto;
 }
 
+.scroll {
+    display: flex;
+    overflow: hidden;
+    white-space: pre;
+    align-items: center;
+}
+
+.scroll h3 {
+    flex-shrink:0;
+}
+
+.scroll a:before {
+    content:"~";
+}
+
+.scroll marquee {
+    margin-bottom: -.3rem;
+    width: 60%;
+}
+
+.scroll a {
+    padding: .3rem
+}
+
+.user-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
+}
+
+.user-list a {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 10em;
+    padding-bottom: .3rem;
+    padding-top: .3rem;
+}
+
+.user-list a:before {
+    content:"~";
+}
+
 .user_home {
   display: grid;
   grid-template-columns: 100px 30px 100px 100px 40px 120px 15px;

users.php

@@ -1,20 +1,45 @@
-<?php 
+<?php
+
 include 'header.php';
+
+$activeUsers = json_decode(file_get_contents('/opt/html/online.json'), true);
+
 ?>
 <h1>> Users </h1>
 <article id="content">
-Lista użytkowników i linki do ich blogów
+Lista użytkowników obecnie aktywnych:
+
+<div class="user-list">
+    <?php
+
+    if (!empty($activeUsers)) {
+        foreach ($activeUsers as $user) {
+            $username = htmlspecialchars($user);
+            echo "<a class=\"users\" href='/~$username'>$username</a>";
+        }
+    } else {
+        echo "...";
+    }
+
+    ?>
+</div>
+
+<br>
+
+Lista użytkowników i linki do ich blogów:
 <ul>
-<?php
-$host=htmlspecialchars($_SERVER['SERVER_NAME']);
-//$host="";
-foreach (scandir("/home/") as $file) {
-    if (in_array($file, array('.', '..'))) continue;
-    echo "<li><a href=\"/~$file\">~$file</a></li>";
-}
 
-?>
+<div class="user-list">
+    <?php
+    $host=htmlspecialchars($_SERVER['SERVER_NAME']);
+    //$host="";
+    foreach (scandir("/home/") as $file) {
+        if (in_array($file, array('.', '..'))) continue;
+        echo "<a href=\"/~$file\">$file</a>";
+    }
 
+    ?>
+</div>
 
 </ul>
 </article>