-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
189 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Vibrain - Empower Your Mind</title> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"> | ||
| <script src="https://unpkg.com/[email protected]"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/js/all.min.js"></script> | ||
| <style> | ||
| .hero { | ||
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | ||
| } | ||
| .hero-body { | ||
| padding: 3rem 1.5rem; | ||
| } | ||
| .button { | ||
| margin: 0.5rem; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <section class="hero is-fullheight"> | ||
| <div class="hero-body"> | ||
| <div class="container has-text-centered"> | ||
| <h1 class="title is-1 has-text-white"> | ||
| Vibrain | ||
| </h1> | ||
| <h2 class="subtitle is-3 has-text-white"> | ||
| Empower Your Mind, Unleash Your Potential | ||
| </h2> | ||
| <div id="loginContent" | ||
| hx-get="/login-status" | ||
| hx-trigger="load" | ||
| hx-swap="innerHTML"> | ||
| <!-- Content will be loaded here --> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,147 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Login - Vibrain</title> | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" | ||
| /> | ||
| <script src="https://unpkg.com/[email protected]"></script> | ||
| <style> | ||
| @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap"); | ||
|
|
||
| body { | ||
| font-family: "Poppins", sans-serif; | ||
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | ||
| height: 100vh; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
| .login-container { | ||
| background: rgba(255, 255, 255, 0.9); | ||
| border-radius: 20px; | ||
| padding: 40px; | ||
| box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37); | ||
| backdrop-filter: blur(4px); | ||
| border: 1px solid rgba(255, 255, 255, 0.18); | ||
| max-width: 400px; | ||
| width: 100%; | ||
| } | ||
| .title, | ||
| .subtitle { | ||
| color: #4a4a4a; | ||
| } | ||
| .social-login .button { | ||
| margin-bottom: 15px; | ||
| transition: transform 0.3s ease, box-shadow 0.3s ease; | ||
| } | ||
| .social-login .button:hover { | ||
| transform: translateY(-3px); | ||
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); | ||
| } | ||
| .button.is-github { | ||
| background-color: #24292e; | ||
| color: white; | ||
| } | ||
| .button.is-google { | ||
| background-color: #4285f4; | ||
| color: white; | ||
| } | ||
| .login-divider { | ||
| margin: 20px 0; | ||
| text-align: center; | ||
| position: relative; | ||
| } | ||
| .login-divider::before { | ||
| content: ""; | ||
| position: absolute; | ||
| top: 50%; | ||
| left: 0; | ||
| right: 0; | ||
| height: 1px; | ||
| background-color: #dbdbdb; | ||
| } | ||
| .login-divider span { | ||
| position: relative; | ||
| background-color: white; | ||
| padding: 0 10px; | ||
| color: #7a7a7a; | ||
| } | ||
| .login-footer { | ||
| text-align: center; | ||
| margin-top: 20px; | ||
| font-size: 0.9em; | ||
| color: #7a7a7a; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class="login-container"> | ||
| <h1 class="title has-text-centered">Welcome Back</h1> | ||
| <h2 class="subtitle has-text-centered is-6"> | ||
| Please login to continue | ||
| </h2> | ||
| <div class="social-login"> | ||
| <button | ||
| class="button is-fullwidth is-github" | ||
| hx-get="/oauth/github/login" | ||
| hx-trigger="click" | ||
| hx-target="#login-result" | ||
| > | ||
| <span class="icon"> | ||
| <i class="fab fa-github"></i> | ||
| </span> | ||
| <span>Continue with GitHub</span> | ||
| </button> | ||
| <button | ||
| class="button is-fullwidth is-google" | ||
| hx-get="/oauth/google/login" | ||
| hx-trigger="click" | ||
| hx-target="#login-result" | ||
| > | ||
| <span class="icon"> | ||
| <i class="fab fa-google"></i> | ||
| </span> | ||
| <span>Continue with Google</span> | ||
| </button> | ||
| </div> | ||
| <div class="login-divider"> | ||
| <span>or</span> | ||
| </div> | ||
| <div class="field"> | ||
| <div class="control has-icons-left"> | ||
| <input class="input" type="email" placeholder="Email" /> | ||
| <span class="icon is-small is-left"> | ||
| <i class="fas fa-envelope"></i> | ||
| </span> | ||
| </div> | ||
| </div> | ||
| <div class="field"> | ||
| <div class="control has-icons-left"> | ||
| <input | ||
| class="input" | ||
| type="password" | ||
| placeholder="Password" | ||
| /> | ||
| <span class="icon is-small is-left"> | ||
| <i class="fas fa-lock"></i> | ||
| </span> | ||
| </div> | ||
| </div> | ||
| <div class="field"> | ||
| <button class="button is-primary is-fullwidth">Login</button> | ||
| </div> | ||
| <div id="login-result" class="mt-4"></div> | ||
| <div class="login-footer"> | ||
| <p>Don't have an account? <a href="#">Sign up</a></p> | ||
| </div> | ||
| </div> | ||
| <script | ||
| defer | ||
| src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" | ||
| ></script> | ||
| </body> | ||
| </html> |