v0.1.0-pre.045

2026-07-25 18:35:51 +02:00
parent c2dbd207d3
commit 01764a485a
9 changed files with 329 additions and 132 deletions
--- a/kb-app-demo-desktop/frontend/sass/splash.scss
+++ b/kb-app-demo-desktop/frontend/sass/splash.scss
@@ -1,8 +1,117 @@
-/* file: kb-app-demo-desktop/frontend/sass/splash.scss */
-/* version: 1 */
-html, body { width: 100%; height: 100%; margin: 0; background: transparent; overflow: hidden; }
-body { display: grid; place-items: center; font-family: sans-serif; }
-#splash-container { width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 1rem; opacity: 0; background: radial-gradient(circle, #1f2937, #030712); color: #f9fafb; }
-#splash-container img { width: min(55vw, 420px); max-height: 55vh; object-fit: contain; }
-#splash-container h1 { margin: 0; letter-spacing: .08em; }
-#messages-container { min-height: 1.5rem; color: #d1d5db; }
+// file: kb-app-demo-desktop/frontend/sass/splash.scss
+// version: 2
+
+@font-face {
+    font-family: 'Dos Amazigh';
+    src: url('../fonts/DOS_Amazigh.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+html,
+body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    background-color: transparent;
+    overflow: hidden;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: Arial, sans-serif;
+}
+
+#splash-container {
+    position: relative;
+    width: 960px;
+    height: 637px;
+    opacity: 0;
+    will-change: opacity;
+}
+
+#splash-image {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+
+#app-name {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-family: 'Dos Amazigh', sans-serif;
+    font-size: 96px;
+    font-weight: bold;
+    color: #fff;
+    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    z-index: 2;
+    text-align: center;
+}
+
+#debug-info,
+#messages-container {
+    overflow-y: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+#debug-info::-webkit-scrollbar,
+#messages-container::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    height: 0;
+}
+
+#debug-info {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 50%;
+    max-height: 30%;
+    color: white;
+    font-family: monospace;
+    font-size: 12px;
+    background-color: rgba(0, 0, 0, 0.1);
+    padding: 8px;
+    z-index: 3;
+    box-sizing: border-box;
+}
+
+#messages-container {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    max-height: 30%;
+    background-color: rgba(0, 0, 0, 0.1);
+    padding: 10px 10px 40px;
+    z-index: 2;
+    box-sizing: border-box;
+}
+
+.splash-message {
+    margin-bottom: 8px;
+    padding: 6px 10px;
+    border-radius: 4px;
+    animation: fadeIn 0.3s ease-in-out;
+    font-weight: bold;
+    color: #fff;
+}
+
+.splash-message.info { background-color: rgba(33, 150, 243, 0.2); }
+.splash-message.warning { background-color: rgba(255, 152, 0, 0.2); }
+.splash-message.error { background-color: rgba(244, 67, 54, 0.2); }
+.splash-message.success { background-color: rgba(76, 175, 80, 0.2); }
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}