Update web login screen to show frosted minimal chat UI in background

khoj-ai · Feb 23, 2024 · e10b260 · e10b260
1 parent 1b03185
commit e10b260
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 2 deletions.
diff --git a/src/khoj/interface/web/assets/khoj.css b/src/khoj/interface/web/assets/khoj.css
@@ -9,6 +9,7 @@
     --primary-focus: rgba(255, 179, 0, 0.125);
     --primary-inverse: rgba(0, 0, 0, 0.75);
     --background-color: #f5f4f3;
+    --frosted-background-color: rgba(245, 244, 243, 0.75);
     --main-text-color: #475569;
     --summer-sun: #fcc50b;
     --water: #44b9da;
@@ -26,6 +27,7 @@
         --primary-focus: rgba(255, 179, 0, 0.25);
         --primary-inverse: rgba(0, 0, 0, 0.75);
         --background-color: #f5f4f3;
+        --frosted-background-color: rgba(245, 244, 243, 0.75);
         --main-text-color: #475569;
         --summer-sun: #fcc50b;
         --water: #44b9da;
@@ -42,6 +44,7 @@
     --primary-focus: rgba(255, 179, 0, 0.25);
     --primary-inverse: rgba(0, 0, 0, 0.75);
     --background-color: #f5f4f3;
+    --frosted-background-color: rgba(245, 244, 243, 0.75);
     --main-text-color: #475569;
     --summer-sun: #fcc50b;
     --water: #44b9da;

diff --git a/src/khoj/interface/web/assets/samples/desktop-plain-chat-sample.png b/src/khoj/interface/web/assets/samples/desktop-plain-chat-sample.png
diff --git a/src/khoj/interface/web/assets/samples/phone-plain-chat-sample.png b/src/khoj/interface/web/assets/samples/phone-plain-chat-sample.png
diff --git a/src/khoj/interface/web/login.html b/src/khoj/interface/web/login.html
@@ -65,13 +65,24 @@
             padding: 0px;
             margin: 0px;
             height: 100%;
-            background: var(--background-color);
+            background: url('/static/assets/samples/desktop-plain-chat-sample.png') no-repeat center center fixed;
+            background-size: contain;
             color: var(--main-text-color);
             font-family: var(--font-family);
             font-size: 20px;
             font-weight: 300;
             line-height: 1.5em;
         }
+        body::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: var(--frosted-background-color);
+            backdrop-filter: blur(10px);
+        }
         body > * {
             padding: 10px;
             margin: 10px;
@@ -100,9 +111,9 @@
             grid-template-rows: 1fr auto auto 1fr;
             gap: 32px;
             min-height: 300px;
-            background: var(--background-color);
             margin-left: 25%;
             margin-right: 25%;
+            z-index: 1;
         }
 
         div.g_id_signin {
@@ -118,9 +129,14 @@
         }
 
         @media only screen and (max-width: 700px) {
+            body{
+                background: url('/static/assets/samples/phone-plain-chat-sample.png') no-repeat center center fixed;
+                background-size: contain;
+            }
             div#login-modal {
                 margin-left: 10%;
                 margin-right: 10%;
+                z-index: 1;
             }
         }