From 7a5cd0616262245cf8c91d4677259646596dd3db Mon Sep 17 00:00:00 2001
From: sabaimran <65192171+sabaimran@users.noreply.github.com>
Date: Wed, 2 Oct 2024 14:26:46 -0700
Subject: [PATCH] Improve the login page (#931)

* Init version of improved login page
* Use split screen view, add a gradient
---
 src/khoj/interface/web/login.html | 452 ++++++++++++++++++------------
 1 file changed, 277 insertions(+), 175 deletions(-)
diff --git a/src/khoj/interface/web/login.html b/src/khoj/interface/web/login.html
index d9f9a83e..a1090ed0 100644
--- a/src/khoj/interface/web/login.html
+++ b/src/khoj/interface/web/login.html
@@ -1,219 +1,321 @@
 <html>
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0">
-        <title>Khoj - Login</title>
 
-        <link rel="icon" type="image/png" sizes="128x128" href="https://assets.khoj.dev/khoj_lantern_128x128.png">
-        <link rel="manifest" href="/static/khoj.webmanifest">
-        <link rel="stylesheet" href="/static/assets/khoj.css">
-        <meta property="og:image" content="https://assets.khoj.dev/khoj_hero.png">
-    </head>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+    <title>Khoj - Login</title>
+    <link rel="icon" type="image/png" sizes="128x128" href="https://assets.khoj.dev/khoj_lantern_128x128.png">
+    <link rel="manifest" href="/static/khoj.webmanifest">
+    <link rel="stylesheet" href="/static/assets/khoj.css">
+    <meta property="og:image" content="https://assets.khoj.dev/khoj_hero.png">
+</head>
 
-    <body>
-        <div class="khoj-header"></div>
-            <!-- Login Modal -->
+<body>
+    <div class="split-container">
+        <!-- Left side with login -->
+        <div class="split left">
             <div id="login-modal">
-                <img class="khoj-logo" src="https://assets.khoj.dev/khoj_lantern_128x128.png" alt="Khoj"></img>
+                <img class="khoj-logo" src="https://assets.khoj.dev/khoj_lantern_128x128.png" alt="Khoj">
                 <div class="login-modal-title">Login to Khoj</div>
+                <!-- Sign Up/Login with Google OAuth -->
+                <div class="g_id_signin" data-shape="circle" data-text="continue_with" data-logo_alignment="center"
+                    data-size="large" data-type="standard"></div>
+                <div id="g_id_onload" data-client_id="{{ google_client_id }}" data-ux_mode="popup"
+                    data-use_fedcm_for_prompt="true" data-login_uri="{{ redirect_uri }}" data-auto-select="true"></div>
+
+                <!-- Divider -->
+                <div class="divider">OR</div>
                 <!-- Sign in with Magic Link -->
                 <div class="khoj-magic-link">
                     <input type="email" id="email" placeholder="Email" autofocus required>
-                    <button id="magic-link-button">Send Magic Link</button>
+                    <button id="magic-link-button">Get Login Link</button>
                 </div>
-                <!-- Divider -->
-                <div style="text-align: center; font-size: 16px; font-weight: 500; border-top: 1px solid black;">OR</div>
-                <!-- Sign Up/Login with Google OAuth -->
-                <div
-                    class="g_id_signin"
-                    data-shape="circle"
-                    data-text="continue_with"
-                    data-logo_alignment="center"
-                    data-size="large"
-                    data-type="standard">
-                </div>
-                <div id="g_id_onload"
-                    data-client_id="{{ google_client_id }}"
-                    data-ux_mode="popup"
-                    data-use_fedcm_for_prompt="true"
-                    data-login_uri="{{ redirect_uri }}"
-                    data-auto-select="true">
+
+            </div>
+            <!-- Footer links -->
+            <div class="footer-links">
+                <a href="https://khoj.dev/terms-of-service" target="_blank">Terms of Service</a>
+                <span class="divider-vertical"></span>
+                <a href="https://khoj.dev/privacy-policy" target="_blank">Privacy Policy</a>
+            </div>
+        </div>
+        <!-- Right side with content -->
+        <div class="split right">
+            <div class="right-content">
+                <h1>Unlock Your Second Brain</h1>
+                <p>Transform the way you think, create, and remember</p>
+                <div class="features">
+                    <div class="feature">
+                        <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2"
+                            fill="none">
+                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+                            <path d="M14 2v6h6" />
+                            <path d="M16 13H8" />
+                            <path d="M16 17H8" />
+                            <path d="M10 9H8" />
+                        </svg>
+                        <span>Get answers across your documents and the internet</span>
+                    </div>
+                    <div class="feature">
+                        <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2"
+                            fill="none">
+                            <path
+                                d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
+                            <path d="M3.3 7l8.7 5 8.7-5" />
+                        </svg>
+                        <span>Go deeper in the topics personal to you</span>
+                    </div>
+                    <div class="feature">
+                        <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2"
+                            fill="none">
+                            <path d="M12 2L2 7l10 5 10-5-10-5z" />
+                            <path d="M2 17l10 5 10-5" />
+                            <path d="M2 12l10 5 10-5" />
+                        </svg>
+                        <span>Use specialized agents</span>
+                    </div>
                 </div>
             </div>
-
-            <div class="khoj-footer"></div>
         </div>
-    </body>
+    </div>
+
+    <style>
+        body {
+            margin: 0;
+            height: 100vh;
+            font-family: 'Arial', sans-serif;
+            color: #333;
+            overflow: hidden;
+        }
+
+        .split-container {
+            display: flex;
+            height: 100vh;
+        }
+
+        .split {
+            flex: 1;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+        }
+
+        .left {
+            background-color: #fff;
+        }
+
+        .right {
+            background: linear-gradient(135deg, #FFA07A 0%, #c4e4c6 100%);
+            color: white;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .right::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            opacity: 0.1;
+        }
+
+        .right-content {
+            text-align: center;
+            padding: 2rem;
+            position: relative;
+            z-index: 1;
+        }
+
+        .right-content h1 {
+            font-size: 3rem;
+            margin-bottom: 1rem;
+            font-weight: 700;
+        }
+
+        .right-content p {
+            font-size: 1.2rem;
+            margin-bottom: 3rem;
+            opacity: 0.9;
+        }
+
+        .features {
+            display: flex;
+            flex-direction: column;
+            gap: 1.5rem;
+            align-items: center;
+        }
+
+        .feature {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            font-size: 1.1rem;
+        }
+
+        .feature svg {
+            width: 24px;
+            height: 24px;
+            stroke: white;
+        }
+
+        #login-modal {
+            display: grid;
+            background: white;
+            border-radius: 10px;
+            padding: 40px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            text-align: center;
+            width: max-content;
+        }
+
+        .khoj-logo {
+            width: 80px;
+            margin-bottom: 20px;
+        }
+
+        .login-modal-title {
+            font-size: 24px;
+            font-weight: 600;
+            margin-bottom: 20px;
+        }
+
+        .khoj-magic-link {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        #email {
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            width: 100%;
+            font-size: 16px;
+        }
+
+        #magic-link-button {
+            padding: 10px;
+            border: none;
+            border-radius: 5px;
+            background-color: #FFA07A;
+            color: white;
+            cursor: pointer;
+            font-size: 16px;
+            transition: background-color 0.3s;
+        }
+
+        #magic-link-button:hover {
+            background-color: #FFA07A
+        }
+
+        #magic-link-button:disabled {
+            background-color: #cccccc;
+            cursor: not-allowed;
+        }
+
+        .divider {
+            display: flex;
+            align-items: center;
+            text-align: center;
+            color: #000;
+            /* Adjust the text color as needed */
+            margin: 20px 0;
+            /* Adjust the margin as needed */
+        }
+
+        .divider::before,
+        .divider::after {
+            content: '';
+            flex: 1;
+            border-bottom: 1px solid #000;
+            /* Adjust the line color as needed */
+            margin: 0 10px;
+            /* Adjust the spacing as needed */
+        }
+
+        .g_id_signin {
+            margin: 0 auto;
+            display: block;
+        }
+
+        .footer-links {
+            width: 100%;
+            text-align: center;
+            font-size: 0.9em;
+            color: #666;
+            margin-top: 20px;
+        }
+
+        .footer-links a {
+            color: #666;
+            text-decoration: none;
+            margin: 0 10px;
+        }
+
+        .footer-links a:hover {
+            text-decoration: underline;
+        }
+
+        .divider-vertical {
+            display: inline-block;
+            width: 1px;
+            height: 12px;
+            background-color: #666;
+            margin: 0 10px;
+            vertical-align: middle;
+        }
+
+        @media (max-width: 768px) {
+            .split-container {
+                flex-direction: column;
+            }
+
+            .right {
+                display: none;
+            }
+
+            .left {
+                padding: 2rem;
+            }
+        }
+    </style>
 
     <script>
         const magicLinkButton = document.getElementById('magic-link-button');
         const emailInput = document.getElementById('email');
-
         magicLinkButton.addEventListener('click', async () => {
             const email = emailInput.value;
             if (!email) {
                 alert('Please enter a valid email address');
                 return;
             }
-
             if (!email.includes('@')) {
                 alert('Please enter a valid email address');
                 return;
             }
-
             magicLinkButton.disabled = true;
             magicLinkButton.innerText = 'Check your email for a sign-in link!';
-
             const response = await fetch('/auth/magic', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify({ "email": email }),
-            })
-
+            });
             if (response.status === 200) {
                 console.log('Magic link sent to your email');
             } else {
                 alert('Failed to send magic link');
+                magicLinkButton.disabled = false;
+                magicLinkButton.innerText = 'Get Login Link';
             }
         });
     </script>
 
-    <style>
-        @media only screen and (max-width: 700px) {
-            body {
-                display: grid;
-                grid-template-columns: 1fr;
-                grid-template-rows: 1fr auto 1fr;
-                font-size: small!important;
-            }
-            body > * {
-                grid-column: 1;
-            }
-        }
-        @media only screen and (min-width: 700px) {
-            body {
-                display: grid;
-                grid-template-columns: 1fr min(50vw, 100%) 1fr;
-                grid-template-rows: 1fr auto 1fr;
-            }
-            body > * {
-                grid-column: 2;
-            }
-        }
-        body {
-            padding: 0px;
-            margin: 0px;
-            height: 100%;
-            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;
-        }
-
-        @keyframes gradient {
-            0% {
-                background-position: 0% 50%;
-            }
-            50% {
-                background-position: 100% 50%;
-            }
-            100% {
-                background-position: 0% 50%;
-            }
-        }
-
-        a.khoj-logo {
-            text-align: center;
-            justify-self: center;
-        }
-
-        div#login-modal {
-            display: grid;
-            grid-template-columns: 1fr;
-            gap: 32px;
-            min-height: 300px;
-            margin-left: 25%;
-            margin-right: 25%;
-            z-index: 1;
-        }
-
-        .khoj-magic-link {
-            display: grid;
-            grid-template-columns: 1fr;
-            gap: 16px;
-            text-align: center;
-        }
-
-        #email {
-            padding: 10px;
-            font-size: 16px;
-            border: 1px solid var(--main-text-color);
-            border-radius: 5px;
-            width: 100%;
-        }
-
-        #email:focus {
-            box-shadow: 0 0 10px var(--main-text-color);
-        }
-
-        #magic-link-button {
-            padding: 10px;
-            font-size: 16px;
-            border: 1px solid var(--main-text-color);
-            border-radius: 5px;
-            width: 100%;
-            background: var(--main-text-color);
-            color: var(--frosted-background-color);
-            cursor: pointer;
-        }
-
-        #magic-link-button:hover {
-            box-shadow: 0 0 10px var(--main-text-color);
-        }
-
-        div.g_id_signin {
-            margin: 0 auto;
-            display: block;
-        }
-
-        div.login-modal-title {
-            text-align: center;
-            line-height: 28px;
-            font-size: 24px;
-            font-weight: 500;
-        }
-
-        @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;
-            }
-        }
-
-    </style>
     <script src="https://accounts.google.com/gsi/client" async defer></script>
+</body>
+
 </html>
