Unsocial, comopo.. b00tc4mp#179

vicko87 · Oct 13, 2024 · 29074cd · 29074cd
1 parent 7c92121
commit 29074cd
Show file tree

Hide file tree

Showing 44 changed files with 2,834 additions and 194 deletions.
diff --git a/staff/victoria-kolomytseva/unsocial.1/.gitkeep b/staff/victoria-kolomytseva/unsocial.1/.gitkeep
diff --git a/staff/victoria-kolomytseva/unsocial.1/index.1.html b/staff/victoria-kolomytseva/unsocial.1/index.1.html
@@ -0,0 +1,217 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <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=Archivo+Black&display=swap');
+
+        :root {
+            --color: #dccde1;
+
+            --font: 'Archivo Black';
+            font-family: var(--font);
+        }
+
+        body {
+            background-color: #311845;
+            color: var(--color);
+            text-align: center;
+            width: 100%;
+            height: 100vh;
+            margin: 0;
+        }
+
+        h1 {
+            margin-top: 200px;
+            text-align: center;
+        }
+
+
+
+        section {
+            text-align: center;
+        }
+
+        form {
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+        }
+
+        input {
+            background-color: inherit;
+            font-family: inherit;
+        }
+    </style>
+
+</head>
+
+<body>
+    <h1>Unsocial</h1>
+    <section>
+        <h2>login</h2>
+
+        <form id="loginForm">
+            <label for="username">Username</label>
+            <input type="text" id="username" required />
+            <label>Password</label>
+            <input type="password" id="password" required />
+
+            <button type="submit">Login</button>
+        </form>
+
+        <a href="">Register</a>
+    </section>
+
+    <section class="register">
+        <h2>Register</h2>
+
+        <form id="registerForm">
+            <label for="name">Name</label>
+            <input type="text" id="name" />
+
+            <label for="email">E-mail</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>
+
+        <button>Logout</button>
+    </section>
+
+    <script>
+        var users = [
+            { name: 'Peter Pan', email: '[email protected]', username: 'peterpan', password: '123' },
+            { name: 'Wendy Darling', email: '[email protected]', username: 'wendydarling', password: '123' }
+        ]
+
+        var loggedInUser = null
+
+        var sections = document.querySelectorAll('section')
+
+        var loginSection = sections[0]
+        // loginSection.style.display = 'none'
+
+        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.onclick = function (event) {
+        registerAnchor.addEventListener('click', function (event) {
+            event.preventDefault()
+
+            loginSection.style.display = 'none'
+            registerSection.style.display = ''
+            // }
+        })
+        var loginAnchor = anchors[1]
+        // loginAnchor.onclick = function (event) {
+        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) {
+        registerForm.addEventListener('submit', function (event) {
+            event.preventDefault()
+            console.log('register form')
+            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[users.length] = user
+            users.push(user)
+            console.log('register form use: ', user)
+
+            registerForm.reset()
+
+            registerSection.style.display = 'none'
+            loginSection.style.display = ''
+            //}
+        })
+        var loginform = forms[0]
+        var userLogin = []
+        loginform.addEventListener("submit", function (event) {
+            event.preventDefault()
+            var loginInputs = loginform.querySelectorAll("input")
+
+            var usernameInputLogin = loginInputs[0]
+            var usernameLogin = usernameInputLogin.value
+
+            var passwordInputLogin = loginInputs[1]
+            var passwordLogin = passwordInputLogin.value
+
+            var login = { username: usernameLogin, password: passwordLogin }
+
+
+
+            loginform.reset()
+            var user = users.find(
+                (users) => users.username === usernameLogin && users.password === passwordLogin
+            )
+
+
+            if (user) {
+                loginSection.style.display = 'none'
+                homeSection.style.display = ""
+                var h3 = homeSection.querySelector('h3')
+                h3.innerText = "Hello, " + user.name + "!"
+            } else {
+                alert("Usuario o passoword Mal")
+            }
+            return
+        })
+
+        var control = document.querySelectorAll("button")
+        var controlLogout = control[2]
+        controlLogout.addEventListener('click', function (event) {
+            loginSection.style.display = ''
+            homeSection.style.display = "none"
+        })
+
+    </script>
+
+</body>
+
+</html>