feat: Structured project

NyctibiusVII · Dec 14, 2023 · f45d3ee · f45d3ee
1 parent 8dbe1b4
commit f45d3ee
Show file tree

Hide file tree

Showing 6 changed files with 136 additions and 10 deletions.
diff --git a/CHANGELOG b/CHANGELOG
@@ -9,14 +9,22 @@ All notable changes in the "Ceap" project will be documented in this file.
 
 Check [Keep a Changelog](https://keepachangelog.com/pt-BR/1.0.0/) for recommendations on how to structure this file.
 
-## [0.0.1] - 2023-12-14
+## [0.0.1, 0.1.2] - 2023-12-14
 ### Added
-- `public/favicon.svg`
-- `src/index.html`
-- `src/script.js`
-- `src/styles.css`
-- `.editorconfig`
-- `.gitignore`
+- Fav icon `public/favicon.svg`
+- Init `src/index.html`
+- Init `src/script.js`
+- Init `src/styles.css`
+- Set configs `.editorconfig`
+- Set configs `.gitignore`
 - `CHANGELOG`
 - `CONTRIBUTING`
 - `LICENSE`
+---
+### Added
+- Arrow icon `public/assets/arrow.svg`
+- Full white logo `public/assets/logo-icon.svg`
+### Changed
+- Structuring html `src/index.html`
+- Toggle functions (section login / password visibility) `src/script.js`
+- Basic test styling `src/styles.css`
diff --git a/public/assets/arrow.svg b/public/assets/arrow.svg
diff --git a/public/assets/logo-icon.svg b/public/assets/logo-icon.svg
diff --git a/src/index.html b/src/index.html
@@ -7,11 +7,49 @@
         <link href="../public/favicon.svg" rel="shortcut icon" type="image/svg">
         <link href="styles.css" rel="stylesheet">
 
-        <title>Login Ceap</title>
+        <title>Ceap - Login</title>
     </head>
 
     <body>
-        <h1>Hello World!</h1>
+        <image src="../public/assets/logo-icon.svg" alt="" width="80" height="80" />
+
+        <main>
+            <section id="section-login-default">
+                <h1>Login</h1>
+
+                <form action="/">
+                    <div class="email-container">
+                        <label for="email-input">Email</label>
+                        <input type="email" name="email-input" id="email-input" placeholder="[email protected]" required>
+                    </div>
+                    <div class="password-container">
+                        <label for="password-input">Senha</label>
+                        <input type="password" name="password-input" id="password-input" placeholder="**********" required>
+                        <span onclick="togglePasswordVisibility()" class="password-eye">👁</span>
+                    </div>
+
+                    <button type="submit">Continuar</button>
+                </form>
+            </section>
+
+            <button id="toggle-login-type" class="type-login-default" type="button" onclick="toggleLogin()">
+                Área de visitantes
+                <image src="../public/assets/arrow.svg" alt="" width="20" height="20" />
+            </button>
+
+            <section id="section-login-voucher">
+                <h2>Área de visitantes</h2>
+
+                <form action="/">
+                    <div class="voucher-container">
+                        <label for="voucher-input">Voucher</label>
+                        <input type="text" name="voucher-input" id="voucher-input" placeholder="abc-1234-defg-567" required>
+                    </div>
+
+                    <button type="submit">Continuar</button>
+                </form>
+            </section>
+        </main>
     </body>
 
     <script src="script.js" type="text/javascript"></script>

diff --git a/src/script.js b/src/script.js
@@ -1 +1,39 @@
-console.log("Hello World")
+function toggleLogin() {
+    const toggleLoginType = document.getElementById('toggle-login-type')
+    const sectionLoginDefault = document.getElementById('section-login-default')
+    const sectionLoginVoucher = document.getElementById('section-login-voucher')
+
+    toggleLoginType.className =
+        toggleLoginType.className === 'type-login-voucher'
+            ? 'type-login-default'
+            : 'type-login-voucher'
+
+    if(toggleLoginType.className === 'type-login-voucher') {
+        toggleLoginType.textContent = 'Área de colaboradores'
+
+        sectionLoginDefault.style.height = '0'
+        sectionLoginVoucher.style.height = '100%'
+
+        return
+    }
+
+    toggleLoginType.textContent = 'Área de visitantes'
+
+    sectionLoginDefault.style.height = '100%'
+    sectionLoginVoucher.style.height = '0'
+}
+
+function togglePasswordVisibility() {
+    const passwordInput = document.getElementById('password-input')
+    const passwordEye = document.querySelector('.password-eye')
+
+    passwordEye.classList.toggle('hidden')
+
+    if(passwordInput.type === 'password') {
+        passwordInput.type = 'text'
+
+        return
+    }
+
+    passwordInput.type = 'password'
+  }
diff --git a/src/styles.css b/src/styles.css
@@ -1,12 +1,44 @@
 * {
+    border: 1px solid #00f;
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
 body {
+    width: calc(100vw - 2px);
+    height: calc(100vh - 2px);
     background-color: #242424;
     color: #fff;
     font-family: 'Roboto', sans-serif;
     font-size: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+main {
+    width: 20em;
+    background-color: #f00;
+}
+
+section {
+    width: 100%;
+    height: 100%;
+    background-color: #0f0;
+    margin: 1em;
+}
+section#section-login-voucher {
+    height: 0;
+}
+
+.password-eye {
+    width: 1em;
+    height: 1em;
+    background-color: #00f;
+    padding: 0.2em;
+    position: relative;
+    top: 0.5em;
+    right: 0.5em;
+    cursor: pointer;
 }