~/Projects/ui
git clone https://code.lsong.org/ui
Commit
- Commit
- 2af0e78ad32c7ce6f1b65dd6648c1359049e5779
- Author
- David Mraz <[email protected]>
- Date
- 2023-06-10 11:28:26 +0200 +0200
- Diffstat
login-01/email.svg | 5 +
login-01/index.html | 68 +++++++++++++++
login-01/password.svg | 1
login-01/script.js | 11 ++
login-01/style.css | 200 +++++++++++++++++++++++++++++++++++++++++++++
feat: login
diff --git a/login-01/astronaut.jpg b/login-01/astronaut.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c6a58ad83e8363b3f64d458842ec256a464d7c57
Binary files /dev/null and b/login-01/astronaut.jpg differ
diff --git a/login-01/email.svg b/login-01/email.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7030d4b982ed7237a194e1b20050f8b6bc7871a7
--- /dev/null
+++ b/login-01/email.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mail" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#d2d0e6" fill="none" stroke-linecap="round" stroke-linejoin="round">
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+ <path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z" />
+ <path d="M3 7l9 6l9 -6" />
+</svg>
\ No newline at end of file
diff --git a/login-01/index.html b/login-01/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..02f8e5d63c657eb650df7c05fb11890f374d88ff
--- /dev/null
+++ b/login-01/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+ <header>
+ <title>Login Example</title>
+ <link rel="stylesheet" href="style.css">
+ </header>
+ <body>
+ <span class="background"></span>
+ <span class="centering">
+ <form class="my-form">
+ <span class="login-welcome-row">
+ <img
+ class="login-welcome"
+ src="astronaut.jpg"
+ />
+ <!-- optimize the image in production -->
+ <h1>LogIn!</h1>
+ </span>
+ <div class="text-field">
+ <label for="email">Email:</label>
+ <input
+ aria-label="Email"
+ type="email"
+ id="email"
+ name="email"
+ placeholder="Your Email"
+ required
+ >
+ <img
+ alt="Email Icon"
+ title="Email Icon"
+ src="email.svg"
+ >
+ </div>
+ <div class="text-field">
+ <label for="password">Password:</label>
+ <input
+ id="password"
+ type="password"
+ aria-label="Password"
+ name="password"
+ placeholder="Your Password"
+ title="Minimum 6 characters at least 1 Alphabet and 1 Number"
+ pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$"
+ required
+ >
+ <img
+ alt="Password Icon"
+ title="Password Icon"
+ src="password.svg"
+ >
+ </div>
+ <input type="submit" class="my-form__button" value="Login" />
+ <div class="my-form__actions">
+ <div class="my-form__row">
+ <span>Did you forget your password?</span>
+ <a href="#" title="Reset Password">Reset Password</a>
+ </div>
+ <div class="my-form__signup">
+ <a href="#" title="Create Account">Create Account</a>
+ </div>
+ </div>
+ </form>
+ </span>
+ <script src="script.js"></script>
+ </body>
+</html>
+
diff --git a/login-01/password.svg b/login-01/password.svg
new file mode 100644
index 0000000000000000000000000000000000000000..707256700a4a458395ed6033a84a3237290ead58
--- /dev/null
+++ b/login-01/password.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke="#d2d0e6" stroke-linecap="round" stroke-linejoin="round" class="feather feather-key"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"></path></svg>
\ No newline at end of file
diff --git a/login-01/script.js b/login-01/script.js
new file mode 100644
index 0000000000000000000000000000000000000000..24cf6716fe2ffcf7c7fae8f41198646eb026a194
--- /dev/null
+++ b/login-01/script.js
@@ -0,0 +1,11 @@
+let loginForm = document.querySelector(".my-form");
+
+loginForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+ let email = document.getElementById("email");
+ let password = document.getElementById("password");
+
+ console.log('Email:', email.value);
+ console.log('Password:', password.value);
+ // process and send to API
+});
\ No newline at end of file
diff --git a/login-01/style.css b/login-01/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..1f4835463af0d7295308896a34744f5a911ef934
--- /dev/null
+++ b/login-01/style.css
@@ -0,0 +1,200 @@
+@import url('https://fonts.googleapis.com/css2?family=Mulish&display=swap');
+
+:root {
+ --primary: #DD946F ;
+ --primary-hover: #CD7D7C;
+ --secondary: #EFD0F8;
+ --secondary-hover: #B8A1D9;
+ --aura: #9265CA80;
+ --background: #261E5A;
+}
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ background-color: var(--background);
+ font-family: Mulish;
+}
+
+h1 {
+ color: var(--secondary);
+}
+
+.background {
+ content: "";
+ position: absolute;
+ height: 100vh;
+ width: 100vw;
+ display: grid;
+ place-items: center;
+ background-image: url(universe.jpg);
+ /* https://www.freepik.com/free-vector/gradient
+ -galaxy-background_14658088.htm optimize in prod*/
+ opacity: 0.5;
+ background-size: 100%;
+ background-repeat: no-repeat;
+ background-size: auto;
+
+}
+
+.centering {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ width: 100vw;
+}
+
+.my-form {
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ gap: 16px;
+ background-color: var(--background);
+ border: 1px solid var(--primary);
+ border-radius: 16px;
+ box-shadow: 0 20px 60px var(--aura);
+ min-width: 280px;
+ max-width: 460px;
+ width: 100%;
+ padding: 32px;
+}
+
+.login-welcome {
+ height: 80px;
+ width: 80px;
+ border-radius: 50%;
+ object-fit: cover;
+}
+
+.login-welcome-row {
+ display: flex;
+ width: 100%;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.my-form__button {
+ background-color: var(--primary);
+ color: var(--background);
+ white-space: nowrap;
+ border: none;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-top: 16px;
+ line-height: 50px;
+ outline: none;
+ font-size: 18px;
+ letter-spacing: .025em;
+ text-decoration: none;
+ cursor: pointer;
+ font-weight: 800;
+ min-height: 50px;
+ width: 100%;
+ border-radius: 8px;
+ box-shadow: 0 5px 10px rgba(0,0,0,.15);
+ transition: all .3s ease;
+ -webkit-transition: all .3s ease;
+}
+
+.text-field input {
+ color: var(--secondary);
+ font-size: 16px;
+ font-weight: 500;
+ max-width: 100%;
+ width: 100%;
+ border: 1px solid var(--secondary);
+ height: 50px;
+ letter-spacing: .03rem;
+ background-color: transparent;
+ outline: none;
+ transition: .25s;
+ border-radius: 8px;
+ text-indent: 20px;
+ margin-top: 8px;
+}
+
+
+.my-form__button:hover {
+ background-color: var(--primary-hover);
+}
+
+.text-field {
+ position: relative;
+}
+
+.text-field input::-webkit-input-placeholder { /* Edge */
+ color: var(--secondary-hover);
+}
+
+.text-field img {
+ position: absolute;
+ right: -2px;
+ bottom: -4px;
+ width: 30px;
+ height: 30px;
+ transform: translate(-50%,-50%);
+ transform-origin: center;
+}
+
+.text-field input:focus {
+ border: 1px solid var(--primary);
+}
+
+.text-field label {
+ color: var(--secondary);
+ font-size: 14px;
+ font-weight: 600;
+ letter-spacing: .03rem;
+ z-index: 10;
+}
+
+.input-icon {
+ position: absolute;
+ bottom: 0;
+ top: 55%;
+ right: 8px;
+ transform: translate(-50%, -50%);
+ transform-origin: center;
+}
+
+.my-form__actions {
+ display: flex;
+ flex-direction: column;
+ color: var(--secondary);
+ gap: 16px;
+ margin-top: 8px;
+}
+
+.my-form__actions a {
+ color: var(--secondary);
+ font-weight: 600;
+}
+
+.my-form__actions a:hover {
+ color: #a7a2cb;
+}
+
+.my-form__row {
+ display: flex;
+ justify-content: space-between;
+}
+
+.my-form__signup {
+ display: flex;
+ justify-content: center;
+}
+
+.my-form__signup a {
+ color: var(--primary);
+ font-weight: 800;
+ text-decoration: none;
+ font-size: 18px;
+}
+
+.my-form__signup a:hover {
+ color: var(--primary-hover);
+}
\ No newline at end of file
diff --git a/login-01/universe.jpg b/login-01/universe.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..540b5680ebcf6c205dded96f05b3e2b78febbccd
Binary files /dev/null and b/login-01/universe.jpg differ
