diff options
| author | Alexis Hovorka <[email protected]> | 2024-02-16 23:48:02 -0700 |
|---|---|---|
| committer | Alexis Hovorka <[email protected]> | 2024-02-16 23:48:02 -0700 |
| commit | c5aa364e0e372d0e29063a27bd17811446db8b6a (patch) | |
| tree | 5c5b10471f7356b66b74277071e61e5e0447edc5 /app/public/index.html | |
| parent | 773e7f747fa096031be427b22257137cf894d587 (diff) | |
[feat] Flesh out basic UI
Diffstat (limited to 'app/public/index.html')
| -rw-r--r-- | app/public/index.html | 71 |
1 files changed, 52 insertions, 19 deletions
diff --git a/app/public/index.html b/app/public/index.html index c7b44c7..593e6b3 100644 --- a/app/public/index.html +++ b/app/public/index.html @@ -56,26 +56,59 @@ <link rel="stylesheet" href="style.css"> </head> <body> - <h1>Notes</h1> + <dialog id="sign-in-dialog"> + <form id="sign-in-form" class="card" method="dialog"> + <h1 class="logo"><img src="logo-icon.svg" alt="" class="logo-icon"> Notes</h1> + <p id="sign-in-error" class="error-message"></p> + <div> + <input type="text" id="sign-in-username" name="username" placeholder="Username" autocomplete="username" autocorrect="off" autocapitalize="off" spellcheck="false" required autofocus> + <input type="password" id="sign-in-password" name="password" placeholder="Password" autocomplete="current-password" autocorrect="off" autocapitalize="off" spellcheck="false" required> + <label> + <input type="checkbox" id="sign-in-keep-session" name="keepSession"> + <span class="checkbox-icon"></span> Keep me signed in + </label> + <button id="sign-in-basic-go"><span class="loading-spinner"></span>Sign in</button> + </div> + <!--div> + <input type="text" inputmode="numeric" id="sign-in-otp" name="otp" placeholder="OTP Code" autocomplete="one-time-code" autocorrect="off" autocapitalize="off" spellcheck="false" pattern="\d{6,6}" required> + <button id="sign-in-otp-go">Sign in</button> + </div> + <div> + <input type="password" id="sign-in-new-password" name="newPassword" placeholder="New password" autocomplete="new-password" autocorrect="off" autocapitalize="off" spellcheck="false" minlength=8 maxlength=512 required> + <input type="password" id="sign-in-new-password-confirm" name="newPasswordConfirm" placeholder="Confirm new password" autocomplete="new-password" autocorrect="off" autocapitalize="off" spellcheck="false" minlength=8 maxlength=512 required> + <button id="sign-in-change-password-go">Change password</button> + </div--> + </form> + </dialog> - <form> - <input type="text" id="username" name="username"> - <input type="password" id="password" name="password"> - <input type="checkbox" id="keep-session" name="keepSession"> - <button id="login">Log In</button> - </form> - <br> - <input type="password" id="new-password" name="newPassword"> - <button id="change-password">Change Password</button> - <br> - <input type="text" id="new-username" name="newUsername"> - <button id="change-username">Change Username</button> - <br> - <input type="text" id="uid" name="uid"> - <button id="logout">Log Out</button> - <button id="logout-everywhere">Log Out Everywhere</button> - <div id="notes"></div> - <button id="new-note">New Note</button> + <div id="menu" class="card-shadow"> + <div class="card"> + <input type="password" id="new-password" name="newPassword" placeholder="New password" autocomplete="new-password" autocorrect="off" autocapitalize="off" spellcheck="false"> + <button id="change-password">Change password</button> + <br> + <input type="text" id="new-username" name="newUsername" placeholder="New username" autocomplete="none" autocorrect="off" autocapitalize="off" spellcheck="false"> + <button id="change-username">Change username</button> + <br> + <button id="log-out">Log out</button> + <button id="log-out-everywhere">Log out everywhere</button> + <br> + <!--input type="text" inputmode="search" id="search" name="search" placeholder="Search…" list="search-hints"--> + <input type="search" id="search" name="search" placeholder="Search…" list="search-hints" incremental> + <datalist id="search-hints"> + <option value="#hash"></option> + <option value="#tag"></option> + </datalist> + </div> + </div> + + <div id="notes" class="notes-column"></div> + <div id="toolbar"> + <button class="toolbar-btn" id="menu-btn"></button> + <button class="toolbar-btn" id="window-btn"></button> + <button class="toolbar-btn" id="search-btn"></button> + <button class="toolbar-btn" id="conflict-btn"></button> + <button class="toolbar-fab" id="add-btn"></button> + </div> <!--script src="sock.js"></script--> <script src="main.js"></script> |