ADD: Styled splash screen

2024-02-08 15:40:11 +01:00
parent f47f39a53a
commit b6cfdad3db
2 changed files with 61 additions and 23 deletions
--- a/loading.html
+++ b/loading.html
@@ -2,24 +2,61 @@
 <html lang="en">
 <head>
  <meta charset="UTF-8">
-  <link rel="icon" href="/src/assets/favicon.png">
+  <link rel="icon" href="src/assets/favicon.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ZERO/ONE Starting...</title>
+  <link rel="stylesheet" href="src/assets/main.css">
  <style>
      body {
-          background: black;
+          background: black url(src/assets/images/splashBG.png) center;
+          background-size: cover;
          color: white;
-          display: flex;
-          justify-content: center;
-          align-items: center;
          height: 100vh;
-          margin: 0;
+          overflow: hidden;
+      }
+
+      .badge {
+          background: #f79c1e;
+          color: black;
+          display: inline-block;
+          align-self: center;
+          width: fit-content;
+          border-radius: 4px;
+          padding: 4px 8px;
+      }
+
+      .title {
+          margin-top: 10vh;
+          gap: 8px;
+      }
+
+      .status {
+          margin-top: 10vh;
+      }
+
+      .footer {
+          font-size: 0.5rem;
      }
  </style>
 </head>
 <body>
-<div>
-  <h1 style="font-family: 'Comic Sans MS', sans-serif">LOADING</h1>
+<div class="flex h-full flex-col text-center justify-between items-center p-2 px-8 select-none">
+  <div class="title flex flex-col gap-2">
+    <h1 class="text-5xl">ZERO<span class="opacity-70">/</span>ONE</h1>
+    <p class="text-muted-foreground">Configuration Suite v0.1</p>
+    <div class="badge text-xs">PUBLIC BETA</div>
+    <div class="status">
+      <p>Stand by...</p>
+      <p class="text-muted-foreground text-sm">The goblins are turning the cogs.</p>
+    </div>
+  </div>
+  <div class="footer flex flex-col gap-2 text-muted-foreground">
+    <img class="w-3 self-center" src="/src/assets/icons/binarisEmblem.svg" alt="binaris-logo">
+    <p>Copyright 2024 Binaris Circuitry Ltd.</p>
+    <p>This software is licensed under the Apache License, Version 2.0 (the "License"). Usage of this
+      software is
+      permitted only in compliance with the terms of the License.</p>
+  </div>
 </div>
 </body>
 </html>