zenlog/signup.html at main · 03musab/zenlog · 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
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
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CalmNest - Sign Up</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
    /* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body Styling */
body {
    font-family: 'Arial', sans-serif;
    background-color: #121212; /* Dark background */
    color: #e0e0e0; /* Light text color */
    height: 100vh; /* Ensure body covers full viewport height */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Container Styling */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full height of viewport */
}

/* Auth Box Styling */
.auth-box {
    background-color: #1e1e1e; /* Dark gray background for the form */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    max-width: 400px;
    width: 100%;
    text-align: center;
}

/* Heading Styles */
h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: #81d4fa; /* Light blue for the heading */
}

/* Text Light */
.text-light {
    color: #0a82be; /* Light gray for description text */
}

/* Form Label Styling */
.form-label {
    color: #ffffff;
}

/* Input Styling */
.form-control {
    background-color: #ffffff;
    border: 1px solid #424242;
    color: #000000;
}

.form-control:focus {
    background-color: #424242;
    border-color: #81d4fa;
    color: #fff;
    box-shadow: none;
}

/* Button Styling */
.btn-primary {
    background-color: #1e88e5; /* Custom blue for buttons */
    border: none;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #9900ff; /* Darker blue on hover */
}

.btn-primary:focus {
    box-shadow: 0 0 10px rgba(30, 136, 229, 0.8);
}

/* Link Styling */
a {
    text-decoration: none;
    color: #81d4fa; /* Light blue for links */
}

a:hover {
    color: #29b6f6; /* Lighter blue on hover */
}

/* Form Text Under the Button */
p {
    font-size: 0.9rem;
    margin-top: 20px;
}

</style>
</head>
<body>
    <div class="container d-flex justify-content-center align-items-center vh-100">
        <div class="auth-box">
            <h2 class="text-primary">Sign Up</h2>
            <p class="text-light">Create your CalmNest account to start tracking your mental health.</p>
            <form action="signup.php" method="POST">
                <div class="mb-3">
                    <label for="username" class="form-label text-light">Username</label>
                    <input type="text" class="form-control" id="username" name="username" placeholder="Enter your username" required>
                </div>
                <div class="mb-3">
                    <label for="email" class="form-label text-light">Email</label>
                    <input type="email" class="form-control" id="email" name="email" placeholder="Enter your email" required>
                </div>
                <div class="mb-3">
                    <label for="password" class="form-label text-light">Password</label>
                    <input type="password" class="form-control" id="password" name="password" placeholder="Enter your password" required>
                </div>
                <button type="submit" class="btn btn-primary w-100">Sign Up</button>
                <p class="text-light mt-3">Already have an account? <a href="login.html" class="text-primary">Log In</a></p>
            </form>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>