From 13addf50b6ea51743af5004d0e66cce3f8c95e30 Mon Sep 17 00:00:00 2001
From: Rafa0297 <158144592+Rafa0297@users.noreply.github.com>
Date: Fri, 4 Oct 2024 17:47:21 +0200
Subject: [PATCH] create app views #181

---
 staff/rafael-infante/unsocial/index.html | 114 +++++++++++++++++++++++
 1 file changed, 114 insertions(+)
diff --git a/staff/rafael-infante/unsocial/index.html b/staff/rafael-infante/unsocial/index.html
index 10e86c74..8923465d 100644
--- 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:wght@100..900&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: 'peter@pan.com', username: 'peterpan', password: '123123123' },
+      { name: 'Wendy Darling', email: 'wendy@darling.com', 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>
 
