From 1637e9dfcf9e7d27e6c327fae5018ec0bbf1d953 Mon Sep 17 00:00:00 2001
From: Dorian Niemiec <dorian.niemiec@svrjs.org>
Date: Wed, 11 Sep 2024 05:39:13 +0200
Subject: [PATCH] feat: redesign index, tests and licenses pages

---
 templates/index.ejs          |  10 +--
 templates/layout.ejs         | 123 ++++++++++++++++++++++++++++-------
 templates/licenseElement.ejs |   8 +--
 templates/licenses.ejs       |   2 +-
 templates/tests.ejs          |  14 ++--
 5 files changed, 116 insertions(+), 41 deletions(-)

diff --git a/templates/index.ejs b/templates/index.ejs
index 1e1adef..4424cdf 100644
--- a/templates/index.ejs
+++ b/templates/index.ejs
@@ -1,18 +1,18 @@
     <h1>Welcome to <%= name %> <%= version %></h1>
     <% if (version.indexOf("Nightly-") == 0) { %>
-    <div style="background-color: #ffff00; color: #000000; border-color: #ff7f00; border-width: 5px; border-style: solid; padding: 5px; display: inline-block;">
+    <div class="warning">
       <b style="font-size: 26px">WARNING!</b><br />
       This version is only for test purposes and may be unstable.
     </div>
     <br />
     <% } %>
     <br />
-    <img src="/logo.png" style="width: 400px; max-width: 100%;" />
+    <img src="/logo.png" class="logo" />
     <br />
     <p>If you see this page that means that the server is working properly. You can further configure the server and replace <i>index.html</i> and <i>tests.html</i> pages with custom ones.</p>
     <p>Default <i>config.json</i> looks like this:</p>
-    <code style="padding: 5px; text-align: left; display: block; display: inline-block;">
-      <pre style="margin: 0.2em; white-space: pre-wrap; overflow-wrap: break-word; word-wrap: break-word; word-break: break-all; word-break: break-word; -webkit-box-shadow: none;  -moz-box-shadow: none; box-shadow: none;">{
+    <code class="example-configuration">
+      <pre>{
   "users": [],
   "port": 80,
   "pubport": 80,
@@ -77,7 +77,7 @@
 }</pre>
     </code>
     <p>Changes:</p>
-    <ul style="display: inline-block; margin: 0;">
+    <ul>
       <% changes.forEach((change) => {%>
         <li><%= change %></li>
       <% }); %>
diff --git a/templates/layout.ejs b/templates/layout.ejs
index 70f2b21..203af50 100644
--- a/templates/layout.ejs
+++ b/templates/layout.ejs
@@ -6,22 +6,18 @@
     <meta charset="UTF-8" />
     <style>
       html {
-        background-color: #dfffdf;
+        background-color: #ffffff;
         color: #000000;
-        font-family: FreeSans, Helvetica, Tahoma, Verdana, Arial, sans-serif;
+        font-family: Poppins, FreeSans, Helvetica, Tahoma, Verdana, Arial, sans-serif;
         margin: 0.75em;
         text-align: center;
       }
 
       body {
-        background-color: #ffffff;
         padding: 0.5em 0.5em 0.1em;
         margin: 0.5em auto;
         width: 90%;
         max-width: 800px;
-        -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
-        -moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
-        box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15)
       }
 
       h1 {
@@ -32,10 +28,9 @@
 
       pre,
       code {
-        background-color: #dfffdf;
-        -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
-        -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
-        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+        background-color: #f9f9fa;
+        border: 1px solid #e4e4e7;
+        border-radius: 7px;
         display: block;
         padding: 0.2em;
         font-family: "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Hack, Menlo, Consolas, Monaco, monospace;
@@ -44,25 +39,105 @@
         width: 95%;
       }
 
+      iframe {
+        border: 1px solid #e4e4e7;
+        border-radius: 10px;
+        background-color: #ffffff;
+        width: 100%;
+        max-width: 600px;
+        height: 300px;
+      }
+
+      .warning {
+        background-color: #ffff00;
+        color: #000000;
+        border: 5px solid #ff7f00;
+        border-radius: 10px;
+        padding: 5px;
+        display: inline-block;
+      }
+
+      .logo {
+        width: 400px;
+        max-width: 100%;
+      }
+
+      code.example-configuration {
+        padding: 5px;
+        text-align: left;
+        display: block;
+        display: inline-block;
+      }
+
+      code.example-configuration pre {
+        margin: 0.2em;
+        white-space: pre-wrap;
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        word-break: break-all;
+        word-break: break-word;
+        border: 0;
+      }
+
+      ul {
+        display: inline-block;
+        margin: 0;
+      }
+
+      .license-svrjs {
+        display: inline-block;
+        text-align: left;
+        border: 2px solid #e4e4e7;
+        border-radius: 10px;
+        background-color: #ffffff;
+        padding: 8px;
+      }
+
+      .license-card {
+        width: 100%;
+        background-color: #f9f9fa;
+        border: 1px solid #e4e4e7;
+        border-radius: 7px;
+        text-align: left;
+        margin: 10px 0;
+      }
+
+      .license-card .license-type {
+        float: right;
+      }
+
+      .license-card .license-name {
+        font-size: 20px;
+      }
+
+      .license-card .license-description {
+        font-size: 12px;
+      }
+
       @media screen and (prefers-color-scheme: dark) {
         html {
-          background-color: #002000;
-          color: #ffffff
-        }
-
-        body {
-          background-color: #000f00;
-          -webkit-box-shadow: 0 5px 10px 0 rgba(127, 127, 127, 0.15);
-          -moz-box-shadow: 0 5px 10px 0 rgba(127, 127, 127, 0.15);
-          box-shadow: 0 5px 10px 0 rgba(127, 127, 127, 0.15)
+          background-color: #0c0a09;
+          color: #ffffff;
         }
 
         pre,
         code {
-          background-color: #002000;
-          -webkit-box-shadow: 0 2px 4px 0 rgba(127, 127, 127, 0.1);
-          -moz-box-shadow: 0 2px 4px 0 rgba(127, 127, 127, 0.1);
-          box-shadow: 0 2px 4px 0 rgba(127, 127, 127, 0.1)
+          background-color: #191817;
+          border-color: #27272a;
+        }
+
+        iframe {
+          border-color: #27272a;
+        }
+
+        .license-svrjs {
+          background-color: #191817;
+          border-color: #27272a;
+        }
+
+        .license-card {
+          background-color: #191817;
+          border-color: #27272a;
         }
 
         a {
@@ -70,7 +145,7 @@
         }
 
         a:hover {
-          color: #00ff00
+          color: #ffffff
         }
       }
     </style>
diff --git a/templates/licenseElement.ejs b/templates/licenseElement.ejs
index 2aa41ae..28a330f 100644
--- a/templates/licenseElement.ejs
+++ b/templates/licenseElement.ejs
@@ -1,9 +1,9 @@
-      <div style="width: 100%; background-color: #ccc; background-color: rgba(200, 200, 200, 0.3); border: 1px solid green; text-align: left; margin: 10px 0;">
-        <div style="float: right;">License: <%= license ? license : "Unknown" %></div>
-        <div style="font-size: 20px;">
+      <div class="license-card">
+        <div class="license-type">License: <%= license ? license : "Unknown" %></div>
+        <div class="license-name">
           <b><%= moduleName %></b><% if (author) { %> (by <%= author %>)<% } %>
         </div>
-        <div style="font-size: 12px;">
+        <div class="license-description">
           <%= description %><% if (required) { %><br/>
           <b>Required by <%= name %>.</b><% } %>
         </div>
diff --git a/templates/licenses.ejs b/templates/licenses.ejs
index d82befb..069bfa9 100644
--- a/templates/licenses.ejs
+++ b/templates/licenses.ejs
@@ -1,6 +1,6 @@
     <h1><%= name %> <%= version %> Licenses</h1>
     <h2><%= name %> <%= version %></h2>
-    <div style="display: inline-block; text-align: left; border-width: 2px; border-style: solid; border-color: gray; padding: 8px;">
+    <div class="license-svrjs">
       MIT License<br/>
       <br/>
       Copyright (c) 2018-2024 SVR.JS<br/>
diff --git a/templates/tests.ejs b/templates/tests.ejs
index 304c825..83d6f7d 100644
--- a/templates/tests.ejs
+++ b/templates/tests.ejs
@@ -1,18 +1,18 @@
     <h1><%= name %> <%= version %> Tests</h1>
     <h2>Directory (without trailing slash)</h2>
-    <iframe src="/testdir" width="75%" height="300px"></iframe>
+    <iframe src="/testdir"></iframe>
     <h2>Directory (with query)</h2>
-    <iframe src="/testdir/?query=value" width="75%" height="300px"></iframe>
+    <iframe src="/testdir/?query=value"></iframe>
     <h2>Directory (personalized)</h2>
-    <iframe src="/testdir/.personalized" width="75%" height="300px"></iframe>
+    <iframe src="/testdir/.personalized"></iframe>
     <h2>404 Error</h2>
-    <iframe src="/tfhgfhggf" width="75%" height="300px"></iframe>
+    <iframe src="/tfhgfhggf"></iframe>
     <h2>Server Side Javascript</h2>
-    <iframe src="/hello.svr" width="75%" height="300px"></iframe>
+    <iframe src="/hello.svr"></iframe>
     <h2>Proxy test</h2>
-    <iframe src="/proxy.svr/this/hello.svr" width="75%" height="300px" id="proxy"></iframe>
+    <iframe src="/proxy.svr/this/hello.svr"></iframe>
     <h2>URL rewriting test (/testdir_rewritten => /testdir)</h2>
-    <iframe src="/testdir_rewritten" width="75%" height="300px"></iframe>
+    <iframe src="/testdir_rewritten"></iframe>
     <br/>
     <br/>
     <img src="/powered.png" />