-
Notifications
You must be signed in to change notification settings - Fork 0
/
register.html
132 lines (120 loc) · 4.07 KB
/
register.html
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register - Waste Management System</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
<style>
body {
background-color: #d5edff; /* Light background for a fresh look */
font-family: Cambria, serif; /* Cambria font */
margin: 0;
padding: 0;
}
h1 {
color: #000747; /* Darker shade for the headings */
text-align: center; /* Centering the headings */
}
h2 {
color: #ff7878; /* Darker shade for the headings */
text-align: center; /* Centering the headings */
}
header {
background-color: #ffddc7; /* Lighter background for the header */
padding: 20px;
}
p {
text-align: center; /* Center-aligning the paragraph */
color: #555; /* Softer text color */
}
.container {
padding: 40px 20px; /* Increased padding for better spacing */
max-width: 600px;
margin: 50px auto; /* Center the container */
background-color: #ffffff; /* White background for the form */
border-radius: 10px; /* Rounded corners */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}
.form-group {
margin-bottom: 20px; /* Spacing between form groups */
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #000000; /* Label color */
}
.form-group input {
width: calc(100% - 22px);
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
font-size: 1em;
}
.form-group input:focus {
border-color: #00796b; /* Highlight border color on focus */
outline: none; /* Remove outline */
}
button {
display: inline-block;
width: 100%;
padding: 15px;
background-color: #007bff; /* Button color */
color: #ffffff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
margin: 20px 0; /* Margin for spacing */
transition: background-color 0.3s ease, transform 0.2s;
}
button:hover {
background-color: #0069d9; /* Darker shade on hover */
transform: scale(1.05);
}
.text-center {
text-align: center; /* Center-aligning text */
}
</style>
</head>
<body>
<!-- Header Section -->
<header>
<h1><a href="index.html" id="home-link" style="text-decoration: none; color: inherit;">Waste Management System</a></h1>
</header>
<!-- Registration Form Section -->
<div id="content" class="container">
<h2>Create Your Account</h2>
<p>Please fill in the details below to register an account.</p>
<form id="register-form" action="register.php" method="POST">
<!-- Username Field -->
<div class="form-group">
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Choose a username" required>
</div>
<!-- Email Field -->
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
</div>
<!-- Password Field -->
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Create a password" required>
</div>
<!-- Confirm Password Field -->
<div class="form-group">
<label for="confirm-password">Confirm Password:</label>
<input type="password" id="confirm-password" name="confirm-password" placeholder="Re-enter your password" required>
</div>
<!-- Submit Button -->
<button type="submit">Register</button>
</form>
<!-- Link to Login Page -->
<p class="text-center">Already have an account? <a href="login.html">Login here</a>.</p>
</div>
</body>
</html>