feat: redesign index, tests and licenses pages

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;">
+    <code class="example-configuration">
-      <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;">{
+      <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>
       <% }); %>

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;
+        background-color: #f9f9fa;
-        -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+        border: 1px solid #e4e4e7;
-        -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+        border-radius: 7px;
-        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
         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;
+          background-color: #0c0a09;
-          color: #ffffff
+          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)
         }
 
         pre,
         code {
-          background-color: #002000;
+          background-color: #191817;
-          -webkit-box-shadow: 0 2px 4px 0 rgba(127, 127, 127, 0.1);
+          border-color: #27272a;
-          -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)
+
+        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>

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 class="license-card">
-        <div style="float: right;">License: <%= license ? license : "Unknown" %></div>
+        <div class="license-type">License: <%= license ? license : "Unknown" %></div>
-        <div style="font-size: 20px;">
+        <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>

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/>

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" />