add basic page web b00tc4mp#129

Antuan94 · Oct 23, 2024 · 4d8e54d · 4d8e54d
1 parent e1685b6
commit 4d8e54d
Showing 1 changed file with 91 additions and 2 deletions.
diff --git a/staff/antonio-guillen-illan/app/index.html b/staff/antonio-guillen-illan/app/index.html
@@ -4,12 +4,101 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Hello World</title>
+    <title>App</title>
 </head>
 
 <body>
-    <h1>Hello World</h1>
+    <h1>Your Natural Space</h1>
 
+    <section>
+        <h2>Welcome</h2>
+        <p>Please, <a href="">register</a> or <a href="">login</a></p>
+    </section>
+
+    <section>
+        <h2>Register</h2>
+        <form>
+            <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="username" id="username">
+
+            <label for="password">Password</label>
+            <input type="password" id="Password">
+
+            <button type="submit">Register</button>
+        </form>
+
+        <p>Error...</p>
+
+        <a href="">login</a>
+    </section>
+
+    <section>
+        <h2>login</h2>
+
+        <form>
+            <label for="username">Username</label>
+            <input type="username" id="username">
+
+            <label for="password">Password</label>
+            <input type="password" id="password">
+
+            <button type="submit">login</button>
+        </form>
+
+        <p>Error...</p>
+        <a href="">Register</a>
+
+    </section>
+
+    <section>
+        <h2>Home</h2>
+
+        <p>Hello, Antuan</p>
+
+        <button>Logout</button>
+    </section>
+
+    <script>
+        var sections = document.querySelectorAll('section')
+
+        var welcomeSection = sections[0]
+        var registerSection = sections[1]
+        var loginSection = sections[2]
+        var homeSection = sections[3]
+
+        registerSection.style.display = 'none'
+        loginSection.style.display = 'none'
+        homeSection.style.display = 'none'
+        var welcomeLinks = welcomeSection.querySelectorAll('a')
+
+        var welcomeRegisterLink = welcomeLinks[0]
+        var welcomeLoginLink = welcomeLinks[1]
+
+        welcomeRegisterLink.addEventListener('click', function (event) {
+            event.preventDefault()
+
+            welcomeSection.style.display = 'none'
+            registerSection.style.display = ''
+
+
+        })
+
+        welcomeLoginLink.addEventListener('click', function (event) {
+            event.preventDefault()
+
+            welcomeSection.style.display = 'none'
+            loginSection.style.display = ''
+        })
+
+
+
+    </script>
 </body>
 
 </html>