add unsocial's index.html b00tc4mp#169

aleixpr27 · Oct 4, 2024 · 759577e · 759577e
1 parent c7cf2c6
commit 759577e
Showing 1 changed file with 210 additions and 0 deletions.
diff --git a/staff/aleix-palau/unsocial/index.html b/staff/aleix-palau/unsocial/index.html
@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UN$OC14L</title>
+
+    <link rel="shortcut icon"
+        href="https://cdn.vectorstock.com/i/500p/00/40/creative-hidden-hacker-logo-vector-22540040.jpg"
+        type="image/x-icon">
+
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Tiny5&display=swap');
+
+        :root {
+            --color: lime;
+            --font: 'Tiny5';
+            font-family: var(--font);
+        }
+
+        body {
+            background-color: black;
+            color: var(--color);
+        }
+
+        h1 {
+            font-size: 100px;
+            margin: 0px;
+        }
+
+        input {
+            background-color: gainsboro;
+            font-family: inherit;
+        }
+
+        a:visited {
+            color: var(--color);
+        }
+    </style>
+</head>
+
+<body>
+    <h1>UN$OC14L</h1>
+
+    <section>
+        <h2>Login</h2>
+
+        <form>
+            <label for="username">Username</label>
+            <input type="text" id="username" />
+
+            <label for="password">Password</label>
+            <input type="password" id="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="email" />
+
+            <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>
+        <form>
+            <button type="submit">Logout</button>
+        </form>
+
+    </section>
+
+    <script>
+
+        var users = [
+            { name: 'Forrest Gump', email: '[email protected]', username: 'runner4life', password: '123123' },
+            { name: 'Luke Skywalker', email: '[email protected]', username: 'orphan4life', password: 'urnotmyfather' },
+        ]
+
+        var sections = document.querySelectorAll('section')
+
+        var loginSection = sections[0]
+        loginSection.style.display = ''
+
+        var registerSection = sections[1]
+        registerSection.style.display = 'none'
+
+        var homeSection = sections[2]
+        homeSection.style.display = 'none'
+
+        var anchors = document.querySelectorAll('a')
+
+        var registerAnchor = anchors[0]
+        registerAnchor.addEventListener('click', 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 loginForm = forms[0]
+
+        loginForm.addEventListener('submit', function (event) {
+            event.preventDefault()
+
+            var loginInputs = loginForm.querySelectorAll('input')
+
+            var usernameLoginInput = loginInputs[0]
+            var loginUsername = usernameLoginInput.value
+
+            var passwordLoginInput = loginInputs[1]
+            var loginPassword = passwordLoginInput.value
+
+
+
+            for (var i = 0; i < users.length; i++) {
+                if (users[i].username === loginUsername) {
+                    if (users[i].password === loginPassword) {
+                        loginSection.style.display = 'none'
+                        homeSection.style.display = ''
+                        loginForm.reset()
+                        document.children[0].children[1].children[3].children[1].textContent = 'Hello, ' + users[i].name
+                        return
+                    } else {
+                        alert('Incorrect password')
+                        return
+                    }
+                }
+                else {
+                    alert('User not found')
+                    return
+                }
+            }
+
+        })
+
+
+
+        var registerForm = forms[1]
+
+        registerForm.addEventListener('submit', 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 = ''
+        })
+
+        var homeForm = forms[2]
+
+        homeForm.addEventListener('submit', function (event) {
+            event.preventDefault()
+            loginSection.style.display = ''
+            homeSection.style.display = 'none'
+        })
+
+    </script>
+</body>
+
+</html>