Webapp: Update singlepage index preloader, meta

GiovanH · Oct 8, 2024 · 12b76b2 · 12b76b2
1 parent 3d4628b
commit 12b76b2
Showing 1 changed file with 29 additions and 14 deletions.
diff --git a/public/index.html b/public/index.html
@@ -6,22 +6,27 @@
     <meta name="viewport" content="initial-scale=0.0, width=650">
     <link rel="icon" href="<%= BASE_URL %>icons/default.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="prepreloader">
-      <div class="loadcard">
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" height="520px" width="520px" xmlns="http://www.w3.org/2000/svg" viewBox="-260 -260 520 520" class="spiro"><g><g id="halfSpiro" class="left"><path id="thePath" d="M-0.0  -71.3  Q-10.85 -10.45  -74.5  -1.35  -138.15 7.8    -181.15 -45.15 -224.1  -98.05  -221.0  -156.1  -217.9  -214.1  -184.95 -258.3"></path><use href="#thePath" style="transform: rotate(36deg);"></use><use href="#thePath" style="transform: rotate(72deg);"></use><use href="#thePath" style="transform: rotate(108deg);"></use><use href="#thePath" style="transform: rotate(144deg);"></use><use href="#thePath" style="transform: rotate(180deg);"></use><use href="#thePath" style="transform: rotate(216deg);"></use><use href="#thePath" style="transform: rotate(252deg);"></use><use href="#thePath" style="transform: rotate(288deg);"></use><use href="#thePath" style="transform: rotate(324deg);"></use></g><g id="halfSpiro" class="right"><path id="thePath" d="M-0.0  -71.3  Q-10.85 -10.45  -74.5  -1.35  -138.15 7.8    -181.15 -45.15 -224.1  -98.05  -221.0  -156.1  -217.9  -214.1  -184.95 -258.3"></path><use href="#thePath" style="transform: rotate(36deg);"></use><use href="#thePath" style="transform: rotate(72deg);"></use><use href="#thePath" style="transform: rotate(108deg);"></use><use href="#thePath" style="transform: rotate(144deg);"></use><use href="#thePath" style="transform: rotate(180deg);"></use><use href="#thePath" style="transform: rotate(216deg);"></use><use href="#thePath" style="transform: rotate(252deg);"></use><use href="#thePath" style="transform: rotate(288deg);"></use><use href="#thePath" style="transform: rotate(324deg);"></use></g></g></svg>
-      </div>
+    <meta name="og:title" content="The Unofficial Homestuck Collection Web Beta (Static)">
+    <meta name="og:description" content="An unofficial restoration of Homestuck and its related works.">
+    <meta name="og:image" content="https://homestuck.giovanh.com/unofficial-homestuck-collection/images/collection.gif">
+    <link rel="apple-touch-icon" href="./icons/ios.png">
     <style>
       body {
         background-color: #35bfff;
       }
       div.loadcard {
-        text-align: center;
         filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
+        text-align: center;
+      }
+
+      .loadcard p {
+        font-family: Verdana, Geneva, Tahoma, sans-serif;
+        font-size: 16px;
+        color: white;
+
+        text-align: center;
+        font-weight: bold;
+        text-shadow: 1px 1px 0px black;
       }
       svg.spiro {
         max-width: 100%;
@@ -43,12 +48,12 @@
         }
       }
       @keyframes spin {
-      from {
+        from {
           transform: rotate(0deg);
-      }
-      to {
+        }
+        to {
           transform: rotate(360deg);
-      }
+        }
       }
       .loadcard svg.spiro > g {
         transform: translate(0, 145px);
@@ -72,6 +77,16 @@
         transform-origin: -24px -145px;
       }
       </style>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="prepreloader">
+      <div class="loadcard">
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" height="520px" width="520px" xmlns="http://www.w3.org/2000/svg" viewBox="-260 -260 520 520" class="spiro"><g><g id="halfSpiro" class="left"><path id="thePath" d="M-0.0  -71.3 Q-10.85 -10.45 -74.5 -1.35 -138.15 7.8 -181.15 -45.15 -224.1  -98.05 -221.0 -156.1 -217.9 -214.1 -184.95 -258.3"></path><use href="#thePath" style="transform: rotate(36deg);"></use><use href="#thePath" style="transform: rotate(72deg);"></use><use href="#thePath" style="transform: rotate(108deg);"></use><use href="#thePath" style="transform: rotate(144deg);"></use><use href="#thePath" style="transform: rotate(180deg);"></use><use href="#thePath" style="transform: rotate(216deg);"></use><use href="#thePath" style="transform: rotate(252deg);"></use><use href="#thePath" style="transform: rotate(288deg);"></use><use href="#thePath" style="transform: rotate(324deg);"></use></g><g id="halfSpiro" class="right"><path id="thePath2" d="M-0.0 -71.3 Q-10.85 -10.45 -74.5 -1.35 -138.15 7.8 -181.15 -45.15 -224.1 -98.05 -221.0 -156.1 -217.9 -214.1 -184.95 -258.3"></path><use href="#thePath" style="transform: rotate(36deg);"></use><use href="#thePath" style="transform: rotate(72deg);"></use><use href="#thePath" style="transform: rotate(108deg);"></use><use href="#thePath" style="transform: rotate(144deg);"></use><use href="#thePath" style="transform: rotate(180deg);"></use><use href="#thePath" style="transform: rotate(216deg);"></use><use href="#thePath" style="transform: rotate(252deg);"></use><use href="#thePath" style="transform: rotate(288deg);"></use><use href="#thePath" style="transform: rotate(324deg);"></use></g></g></svg>
+      <p>Loading...</p>
+      </div>
     </div>
     <div id="app"></div>
     <!-- built files will be auto injected -->