Add setup instructions to README

.gitignore

@@ -1,3 +1,4 @@
 /online
 /releases/*
+/releases
 /config.php

README.md

@@ -3,3 +3,9 @@
 The official Supercardinality website.
 
 https://uncensored.hu/supercardinality/
+
+## Setup
+
+Create the `config.php` file based on `config.php.example`.
+
+Host the repo root using a PHP capable web server.

config.php.example

@@ -1,4 +1,8 @@
 <?php
 
-$contact_name = "Example Contact";
+$contact_name = "Thayol"; // The contact name displayed on the page.
-$contact_link = "https://example.com";
+$contact_link = "mailto:thayol@uncensored.hu"; // Can be any type of link. This will be a href on the contact name.
+
+$online_services_source_url = "https://git.uncensored.hu/supercardinality/supercardinality-online"; // The URL to the online services source.
+
+$releases_dir = "releases"; // The path to scan for releases.

favicon/supercardinality.svg

@@ -6,11 +6,15 @@
       <stop offset="0%" stop-color="#f7e3a1"/>
       <stop offset="100%" stop-color="#dcae44"/>
     </linearGradient>
+    <radialGradient id="gold-glow" cx="50%" cy="50%" r="50%">
+      <stop offset="0%"  stop-color="#dcae44" stop-opacity="0.15"/>
+      <stop offset="60%" stop-color="#dcae44" stop-opacity="0.15"/>
+      <stop offset="100%" stop-color="#dcae44" stop-opacity="0"/>
+    </radialGradient>
     <linearGradient id="gold-dark" x1="0" y1="0" x2="1" y2="1">
       <stop offset="0%" stop-color="#a87c26"/>
       <stop offset="100%" stop-color="#6b4713"/>
     </linearGradient>
-    <filter id="glow-blur"><feGaussianBlur stdDeviation="5"/></filter>
     <mask id="uc-mask">
       <rect width="100" height="100" fill="white"></rect>
     </mask>
@@ -33,7 +37,7 @@
       <use href="#rose-large-arm" transform="rotate(240 50 50)"/>
     </g>
   </defs>
-  <circle cx="50" cy="50" r="40" fill="url(#gold-light)" opacity="0.15" filter="url(#glow-blur)"></circle>
+  <circle cx="50" cy="50" r="50" fill="url(#gold-glow)"></circle>
   <g mask="url(#uc-mask)"><use href="#compass-rose"></use></g>
   <circle cx="50" cy="50" r="10" fill="url(#gold-light)" stroke="black" stroke-width="0.5"></circle>
   <path d="M 55 45 A 5 3.9 0 1 0 50 50 A 5 3.9 0 1 1 45 55" stroke="url(#gold-dark)" fill="none" stroke-width="2" />

functions.php

@@ -1,46 +0,0 @@
-<?php
-
-function timestamp_in_words($timestamp) {
-  if (!is_numeric($timestamp) || $timestamp < 0) {
-    return "";
-  }
-
-  $seconds = time() - $timestamp;
-  $future = $seconds < 0;
-  $seconds = abs($seconds);
-
-  $minutes = round($seconds / 60);
-  $hours = round($seconds / 3600);
-  $days = round($seconds / 86400);
-  $months = round($seconds / 2592000);
-  $years = round($seconds / 31536000);
-
-  if ($seconds < 60) { $w = 'less than a minute'; }
-  elseif ($seconds < 90) { $w = 'about a minute'; }
-  elseif ($minutes < 50) { $w = "$minutes minutes"; }
-  elseif ($hours < 2) { $w = 'about an hour'; }
-  elseif ($hours < 24) { $w = "$hours hours"; }
-  elseif ($days < 2) { $w = 'a day'; }
-  elseif ($days < 30) { $w = "$days days"; }
-  elseif ($days < 45) { $w = 'about a month'; }
-  elseif ($days < 365) { $w = "$months months"; }
-  elseif ($years < 2) { $w = 'about a year'; }
-  else { $w = "$years years"; }
-
-  return $future ? "$w from now" : "$w ago";
-}
-
-function guess_os() {
-  $os_guess = 'linux';
-  $user_agent = $_SERVER['HTTP_USER_AGENT'] ?? '';
-  if (stripos($user_agent, 'Android') !== false) {}
-  elseif (stripos($user_agent, 'iPhone') !== false) {}
-  elseif (stripos($user_agent, 'iPad') !== false) {}
-  elseif (stripos($user_agent, 'CrOS') !== false) { $os_guess = 'linux'; }
-  elseif (stripos($user_agent, 'Windows') !== false) { $os_guess = 'windows'; }
-  elseif (stripos($user_agent, 'Macintosh') !== false) {}
-  elseif (stripos($user_agent, 'Linux') !== false) { $os_guess = 'linux'; }
-  elseif (stripos($user_agent, 'FreeBSD') !== false) {}
-
-  return $os_guess;
-}

index.php

@@ -1,4 +1,96 @@
-<?php require "script.php"; ?>
+<?php
+
+require "config.php";
+
+function timestamp_in_words($timestamp) {
+  if (!is_numeric($timestamp) || $timestamp < 0) {
+    return "";
+  }
+
+  $seconds = time() - $timestamp;
+  $future = $seconds < 0;
+  $seconds = abs($seconds);
+
+  $minutes = round($seconds / 60);
+  $hours = round($seconds / 3600);
+  $days = round($seconds / 86400);
+  $months = round($seconds / 2592000);
+  $years = round($seconds / 31536000);
+
+  if ($seconds < 60) { $w = 'less than a minute'; }
+  elseif ($seconds < 90) { $w = 'about a minute'; }
+  elseif ($minutes < 50) { $w = "$minutes minutes"; }
+  elseif ($hours < 2) { $w = 'about an hour'; }
+  elseif ($hours < 24) { $w = "$hours hours"; }
+  elseif ($days < 2) { $w = 'a day'; }
+  elseif ($days < 30) { $w = "$days days"; }
+  elseif ($days < 45) { $w = 'about a month'; }
+  elseif ($days < 365) { $w = "$months months"; }
+  elseif ($years < 2) { $w = 'about a year'; }
+  else { $w = "$years years"; }
+
+  return $future ? "$w from now" : "$w ago";
+}
+
+function guess_os() {
+  $os_guess = 'linux';
+  $user_agent = $_SERVER['HTTP_USER_AGENT'] ?? '';
+  if (stripos($user_agent, 'Android') !== false) {}
+  elseif (stripos($user_agent, 'iPhone') !== false) {}
+  elseif (stripos($user_agent, 'iPad') !== false) {}
+  elseif (stripos($user_agent, 'CrOS') !== false) { $os_guess = 'linux'; }
+  elseif (stripos($user_agent, 'Windows') !== false) { $os_guess = 'windows'; }
+  elseif (stripos($user_agent, 'Macintosh') !== false) {}
+  elseif (stripos($user_agent, 'Linux') !== false) { $os_guess = 'linux'; }
+  elseif (stripos($user_agent, 'FreeBSD') !== false) {}
+
+  return $os_guess;
+}
+
+$options = [
+  "linux" => [
+    "name" => "Linux",
+    "architecture" => "x86-64",
+    "download_path" => "",
+    "download_filename" => "supercardinality",
+  ],
+  "windows" => [
+    "name" => "Windows",
+    "architecture" => "x86-64",
+    "download_path" => "",
+    "download_filename" => "supercardinality.exe",
+  ],
+];
+
+$os_guess = guess_os();
+
+$latest = json_decode(file_get_contents($releases_dir . '/latest.json'), true);
+$version = empty($latest["version"]) ? "" : $latest["version"];
+$version_timestamp = empty($latest["timestamp"]) ? -1 : $latest["timestamp"];
+$version_timestamp_in_words = timestamp_in_words($version_timestamp);
+
+if (!empty($latest["linux_path"])) {
+  $options["linux"]["download_path"] =  $latest["linux_path"];
+  if (!str_contains($latest["linux_path"], "://")) {
+    $options["linux"]["download_path"] = $releases_dir . "/" . $options["linux"]["download_path"];
+  }
+}
+
+if (!empty($latest["windows_path"])) {
+  $options["windows"]["download_path"] = $latest["windows_path"];
+  if (!str_contains($latest["windows_path"], "://")) {
+    $options["windows"]["download_path"] = $releases_dir . "/" . $options["windows"]["download_path"];
+  }
+}
+
+$display_other_builds = false;
+foreach($options as $os => $target) {
+  if (!empty($target["download_path"])) {
+    $display_other_builds = true;
+  }
+}
+
+?>
 <!doctype html>
 <html>
   <head>
@@ -31,16 +123,29 @@
         NO MID NO FEED
       </p>
 
+      <?php if (empty($options[$os_guess]["download_path"])): ?>
+      <a class="recommended build disabled">
+        <div>
+          Download unavailable
+        </div>
+      </a>
+      <?php else: ?>
       <a class="recommended build" href="<?= $options[$os_guess]["download_path"] ?>" download="<?= $options[$os_guess]["download_filename"] ?>">
         <div>
-
           Download for <?= $options[$os_guess]["name"] ?>
         </div>
       </a>
+      <?php endif; ?>
 
+      <?php if ($display_other_builds): ?>
       <ul class="other-builds">
         <p>Other builds</p>
         <?php foreach($options as $os => $target): ?>
+        <?php
+          if (empty($target["download_path"])) {
+            continue;
+          }
+        ?>
         <li>
           <a class="other build" href="<?= $target["download_path"] ?>" download="<?= $target["download_filename"] ?>">
             <?= $target["name"] ?><span class="architecture"><?= $target["architecture"] ?></span>
@@ -48,9 +153,14 @@
         </li>
         <?php endforeach; ?>
       </ul>
+      <?php endif; ?>
     </main>
     <footer>
-      <p>In case of any questions, message <a href="<?= $contact_link ?>"><?= $contact_name ?></a>.</p>
+      <p>
+        Online services are <a class="blend" href="<?= $online_services_source_url ?>">open source</a>.
+        <br>
+        In case of any questions, message <a href="<?= $contact_link ?>"><?= $contact_name ?></a>.
+      </p>
 
       <?php if (!empty($version)): ?>
       <p>

options.php

@@ -1,16 +0,0 @@
-<?php
-
-$options = [
-  "linux" => [
-    "name" => "Linux",
-    "architecture" => "x86-64",
-    "download_path" => "releases/supercardinality",
-    "download_filename" => "supercardinality",
-  ],
-  "windows" => [
-    "name" => "Windows",
-    "architecture" => "x86-64",
-    "download_path" => "releases/supercardinality.exe",
-    "download_filename" => "supercardinality.exe",
-  ],
-];

script.php

@@ -1,20 +0,0 @@
-<?php
-
-require "config.php";
-require "functions.php";
-require "options.php";
-
-$os_guess = guess_os();
-
-$latest = json_decode(file_get_contents('releases/latest.json'), true);
-$version = empty($latest["version"]) ? "" : $latest["version"];
-$version_timestamp = empty($latest["timestamp"]) ? -1 : $latest["timestamp"];
-$version_timestamp_in_words = timestamp_in_words($version_timestamp);
-
-if (!empty($latest["linux_path"])) {
-  $options["linux"]["download_path"] = "releases/" . $latest["linux_path"];
-}
-
-if (!empty($latest["windows_path"])) {
-  $options["windows"]["download_path"] = "releases/" . $latest["windows_path"];
-}

styles.css

@@ -119,6 +119,11 @@ footer {
     &:hover,
     &:active {
       background: var(--gold);
+
+      & > * {
+        background: #211e29;
+        color: white;
+      }
     }
 
     & > * {
@@ -129,11 +134,18 @@ footer {
       color: var(--gold);
       font: 600 19px/1 var(--serif);
       letter-spacing: 0.1em;
+    }
+
+    &.disabled {
+      filter: brightness(50%);
 
       &:hover,
       &:active {
-        background: #211e29;
+        background: linear-gradient(152deg, var(--gold) 0%, var(--gold-mid) 28%, var(--gold-very-dark) 54%, var(--gold-mid) 76%, var(--gold) 100%);
-        color: white;
+        & > * {
+          background: #17131a;
+          color: var(--gold);
+        }
       }
     }
   }
@@ -209,3 +221,7 @@ footer {
   background-position: center;
   background-size: contain;
 }
+
+.blend {
+  color: inherit !important;
+}