Programming-Learning-System-Proto/signup.html at main · Dhozii/Programming-Learning-System-Proto · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up - Programming Learning System</title>
<style>
body { font-family: Arial; background-color: #f5f5f5; display:flex; justify-content:center; align-items:center; height:100vh; margin:0; }
.signup-container { background:white; padding:30px; border-radius:15px; box-shadow:0px 4px 10px rgba(0,0,0,0.2); width:90%; max-width:350px; text-align:center; }
h1 { color: #A389D4; margin-bottom:15px; }
input { width:90%; padding:10px; margin:8px 0; border-radius:8px; border:1px solid #ccc; }
button { width:95%; padding:10px; background-color:#A389D4; color:white; border:none; border-radius:10px; font-size:16px; cursor:pointer; }
button:hover { background-color:#8e74c1; }
</style>
</head>
<body>
<div class="signup-container">
<h1>Sign Up</h1>
<input type="text" id="username" placeholder="Username">
<input type="password" id="password" placeholder="Password">
<br>
<button onclick="signup()">Create Account</button>
<p>Already have an account? <a href="login.html">Login</a></p>
</div>
<script>
function signup() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    if(username === "" || password === "") { alert("Please enter both username and password"); return; }
    if(localStorage.getItem(username) !== null) { alert("Username already exists. Choose another."); return; }
    localStorage.setItem(username, password);
    alert("Account created! You can now log in.");
    window.location.href = "login.html";
}
</script>
</body>
</html>