Improve splash screen

sungaila · Sep 6, 2023 · e2db8d7 · e2db8d7
1 parent b1b1af2
commit e2db8d7
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 5 deletions.
diff --git a/src/WebConverter/wwwroot/css/app.css b/src/WebConverter/wwwroot/css/app.css
@@ -107,4 +107,13 @@ a, .btn-link {
     .invert-on-dark {
         filter: invert(1);
     }
+}
+
+@media (min-width: 1000px) {
+    .sidebar-dummy {
+        width: 300px;
+        height: 100vh;
+        position: sticky;
+        top: 0;
+    }
 }
diff --git a/src/WebConverter/wwwroot/index.html b/src/WebConverter/wwwroot/index.html
@@ -17,11 +17,23 @@
 
 <body>
     <div id="app">
-        <img src="icon-512-maskable.png" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 4rem; height: 4rem" alt="PDFtoImage Logo" />
-        <svg class="loading-progress" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.8">
-            <circle r="40%" cx="50%" cy="50%" />
-            <circle r="40%" cx="50%" cy="50%" />
-        </svg>
+        <div class="page">
+            <div class="sidebar sidebar-dummy" style="background: #2E7D32;">
+                <div class="top-row navbar navbar-dark" style="height: 3.5rem; background-color: #1B5E20">
+                    <div class="container-fluid">
+                        <a class="navbar-brand" />
+                    </div>
+                </div>
+            </div>
+
+            <main>
+                <img src="icon-512-maskable.png" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 4rem; height: 4rem" alt="PDFtoImage Logo" />
+                <svg class="loading-progress" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.8">
+                    <circle r="40%" cx="50%" cy="50%" />
+                    <circle r="40%" cx="50%" cy="50%" />
+                </svg>
+            </main>
+        </div>
     </div>
 
     <div id="blazor-error-ui">