create app views b00tc4mp#181

Rafa0297 · Oct 4, 2024 · 13addf5 · 13addf5
1 parent 3fe2a8b
commit 13addf5
Showing 1 changed file with 114 additions and 0 deletions.
diff --git a/staff/rafael-infante/unsocial/index.html b/staff/rafael-infante/unsocial/index.html
@@ -5,9 +5,123 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Unsocial</title>
+  <link rel="shortcut icon" href="https://b00tc4mp.com/favicon.ico" type="image/x-icon">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:[email protected]&display=swap');
+
+    :root {
+      --font: 'Noto Sans JP';
+      font-family: var(--font);
+    }
+  </style>
 </head>
 
 <body>
+  <h1>Unsocial</h1>
+
+  <section>
+    <h2>Login</h2>
+    <form>
+      <label for="login-user">Username</label>
+      <input type="text" id="login-user">
+
+      <label for="login-password">Password</label>
+      <input type="password" id="login-password">
+      <button type="submit">Login</button>
+    </form>
+    <a href="">Register</a>
+  </section>
+
+  <section>
+    <h2>Register</h2>
+    <form>
+      <label for="name">Name</label>
+      <input type="text" id="name">
+
+      <label for="email">Email</label>
+      <input type="email" id="name">
+
+      <label for="username">Username</label>
+      <input type="text" id="username">
+
+      <label for="password">Password</label>
+      <input type="password" id="password">
+      <button type="submit">Register</button>
+    </form>
+    <a href="">Login</a>
+  </section>
+
+  <section>
+    <h2>Home</h2>
+    <h3>Hello, User!</h3>
+    <button>Logout</button>
+  </section>
+
+  <script>
+    var users = [
+      { name: 'Peter Pan', email: '[email protected]', username: 'peterpan', password: '123123123' },
+      { name: 'Wendy Darling', email: '[email protected]', username: 'wendydarling', password: '123123123' }
+    ]
+
+    var sections = document.querySelectorAll('section')
+    var loginSection = sections[0]
+    var registerSection = sections[1]
+    var homeSection = sections[2]
+
+    registerSection.style.display = 'none'
+    homeSection.style.display = 'none'
+
+    var anchors = document.querySelectorAll('a')
+    var registerAnchor = anchors[0]
+
+    registerAnchor.onclick = function (event) {
+      event.preventDefault()
+      loginSection.style.display = 'none'
+      registerSection.style.display = ''
+    }
+
+    var loginAnchor = anchors[1]
+
+    loginAnchor.addEventListener('click', function (event) {
+      event.preventDefault()
+      registerSection.style.display = 'none'
+      loginSection.style.display = ''
+    })
+
+    var forms = document.querySelectorAll('form')
+    var registerForm = forms[1]
+
+    registerForm.onsubmit = function (event) {
+      event.preventDefault()
+      var inputs = registerForm.querySelectorAll('input')
+
+      var nameInput = inputs[0]
+      var name = nameInput.value
+
+      var emailInput = inputs[1]
+      var email = emailInput.value
+
+      var usernameInput = inputs[2]
+      var username = usernameInput.value
+
+      var passwordInput = inputs[3]
+      var password = passwordInput.value
+
+      var user = {
+        name: name,
+        email: email,
+        username: username,
+        password: password
+      }
+
+      users.push(user)
+
+      registerForm.reset()
+      registerSection.style.display = 'none'
+      loginSection.style.display = ''
+    }
+
+  </script>
 
 </body>