Hugging Face's logo

Spaces:
dickiethinking
/
justicemail-crusader
Running

App Files Community
dickiethinking commited on
Commit
7771b0c
·
verified ·
1 Parent(s): 261c82f

there needs to be login and signup pages and user profiles

Browse files
Files changed (3) hide show
  1. login.html +54 -0
  2. profile.html +122 -0
  3. signup.html +69 -0
login.html ADDED
@@ -0,0 +1,54 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Login | Court Crusader</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ </head>
11
+ <body class="bg-gray-900 text-gray-100 min-h-screen">
12
+ <custom-navbar></custom-navbar>
13
+
14
+ <main class="container mx-auto px-4 py-8 flex items-center justify-center min-h-[80vh]">
15
+ <div class="w-full max-w-md bg-gray-800 rounded-xl p-8 shadow-2xl border border-gray-700">
16
+ <h1 class="text-3xl font-bold mb-6 text-center text-red-500">Login</h1>
17
+
18
+ <form class="space-y-6">
19
+ <div>
20
+ <label class="block text-gray-300 mb-2">Email</label>
21
+ <input type="email" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:ring-2 focus:ring-red-500 focus:border-transparent" placeholder="your@email.com">
22
+ </div>
23
+
24
+ <div>
25
+ <label class="block text-gray-300 mb-2">Password</label>
26
+ <input type="password" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:ring-2 focus:ring-red-500 focus:border-transparent" placeholder="••••••••">
27
+ </div>
28
+
29
+ <div class="flex items-center justify-between">
30
+ <div class="flex items-center">
31
+ <input id="remember-me" type="checkbox" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-600 rounded bg-gray-700">
32
+ <label for="remember-me" class="ml-2 block text-sm text-gray-300">Remember me</label>
33
+ </div>
34
+ <a href="#" class="text-sm text-rose-400 hover:text-rose-300">Forgot password?</a>
35
+ </div>
36
+
37
+ <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg transition">Login</button>
38
+
39
+ <div class="text-center text-gray-400">
40
+ Don't have an account? <a href="signup.html" class="text-rose-400 hover:text-rose-300">Sign up</a>
41
+ </div>
42
+ </form>
43
+ </div>
44
+ </main>
45
+
46
+ <custom-footer></custom-footer>
47
+ <script src="components/navbar.js"></script>
48
+ <script src="components/footer.js"></script>
49
+ <script src="script.js"></script>
50
+ <script>
51
+ feather.replace();
52
+ </script>
53
+ </body>
54
+ </html>
profile.html ADDED
@@ -0,0 +1,122 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>My Profile | Court Crusader</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ </head>
11
+ <body class="bg-gray-900 text-gray-100 min-h-screen">
12
+ <custom-navbar></custom-navbar>
13
+
14
+ <main class="container mx-auto px-4 py-8">
15
+ <div class="flex flex-col md:flex-row gap-8">
16
+ <!-- Profile Sidebar -->
17
+ <div class="md:w-1/3 lg:w-1/4">
18
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700">
19
+ <div class="flex flex-col items-center mb-6">
20
+ <div class="w-24 h-24 rounded-full bg-gray-700 mb-4 overflow-hidden">
21
+ <img src="http://static.photos/people/200x200/42" alt="Profile" class="w-full h-full object-cover">
22
+ </div>
23
+ <h2 class="text-xl font-bold">John Doe</h2>
24
+ <p class="text-gray-400 text-sm">Member since: Jan 2023</p>
25
+ </div>
26
+
27
+ <nav class="space-y-2">
28
+ <a href="#" class="flex items-center space-x-3 px-4 py-3 bg-gray-700 rounded-lg text-red-400">
29
+ <i data-feather="user" class="w-5 h-5"></i>
30
+ <span>Profile</span>
31
+ </a>
32
+ <a href="#" class="flex items-center space-x-3 px-4 py-3 hover:bg-gray-700 rounded-lg text-gray-300 hover:text-red-400 transition">
33
+ <i data-feather="file-text" class="w-5 h-5"></i>
34
+ <span>My Cases</span>
35
+ </a>
36
+ <a href="#" class="flex items-center space-x-3 px-4 py-3 hover:bg-gray-700 rounded-lg text-gray-300 hover:text-red-400 transition">
37
+ <i data-feather="alert-triangle" class="w-5 h-5"></i>
38
+ <span>Reports</span>
39
+ </a>
40
+ <a href="#" class="flex items-center space-x-3 px-4 py-3 hover:bg-gray-700 rounded-lg text-gray-300 hover:text-red-400 transition">
41
+ <i data-feather="settings" class="w-5 h-5"></i>
42
+ <span>Settings</span>
43
+ </a>
44
+ <a href="#" class="flex items-center space-x-3 px-4 py-3 hover:bg-gray-700 rounded-lg text-gray-300 hover:text-red-400 transition">
45
+ <i data-feather="log-out" class="w-5 h-5"></i>
46
+ <span>Logout</span>
47
+ </a>
48
+ </nav>
49
+ </div>
50
+ </div>
51
+
52
+ <!-- Main Content -->
53
+ <div class="md:w-2/3 lg:w-3/4">
54
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700 mb-6">
55
+ <h2 class="text-2xl font-bold mb-6 text-red-500">Profile Information</h2>
56
+
57
+ <form class="space-y-6">
58
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
59
+ <div>
60
+ <label class="block text-gray-300 mb-2">First Name</label>
61
+ <input type="text" value="John" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:ring-2 focus:ring-red-500 focus:border-transparent">
62
+ </div>
63
+ <div>
64
+ <label class="block text-gray-300 mb-2">Last Name</label>
65
+ <input type="text" value="Doe" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:ring-2 focus:ring-red-500 focus:border-transparent">
66
+ </div>
67
+ </div>
68
+
69
+ <div>
70
+ <label class="block text-gray-300 mb-2">Email</label>
71
+ <input type="email" value="john.doe@example.com" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:ring-2 focus:ring-red-500 focus:border-transparent">
72
+ </div>
73
+
74
+ <div>
75
+ <label class="block text-gray-300 mb-2">Phone Number</label>
76
+ <input type="tel" value="+64 21 123 4567" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:ring-2 focus:ring-red-500 focus:border-transparent">
77
+ </div>
78
+
79
+ <div>
80
+ <label class="block text-gray-300 mb-2">Address</label>
81
+ <textarea rows="3" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:ring-2 focus:ring-red-500 focus:border-transparent">123 Justice St, Auckland, New Zealand</textarea>
82
+ </div>
83
+
84
+ <button type="submit" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg transition">Update Profile</button>
85
+ </form>
86
+ </div>
87
+
88
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700">
89
+ <h2 class="text-2xl font-bold mb-6 text-red-500">Change Password</h2>
90
+
91
+ <form class="space-y-6">
92
+ <div>
93
+ <label class="block text-gray-300 mb-2">Current Password</label>
94
+ <input type="password" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:ring-2 focus:ring-red-500 focus:border-transparent" placeholder="••••••••">
95
+ </div>
96
+
97
+ <div>
98
+ <label class="block text-gray-300 mb-2">New Password</label>
99
+ <input type="password" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:ring-2 focus:ring-red-500 focus:border-transparent" placeholder="••••••••">
100
+ </div>
101
+
102
+ <div>
103
+ <label class="block text-gray-300 mb-2">Confirm New Password</label>
104
+ <input type="password" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:ring-2 focus:ring-red-500 focus:border-transparent" placeholder="••••••••">
105
+ </div>
106
+
107
+ <button type="submit" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg transition">Change Password</button>
108
+ </form>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </main>
113
+
114
+ <custom-footer></custom-footer>
115
+ <script src="components/navbar.js"></script>
116
+ <script src="components/footer.js"></script>
117
+ <script src="script.js"></script>
118
+ <script>
119
+ feather.replace();
120
+ </script>
121
+ </body>
122
+ </html>
signup.html ADDED
@@ -0,0 +1,69 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Sign Up | Court Crusader</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ </head>
11
+ <body class="bg-gray-900 text-gray-100 min-h-screen">
12
+ <custom-navbar></custom-navbar>
13
+
14
+ <main class="container mx-auto px-4 py-8 flex items-center justify-center min-h-[80vh]">
15
+ <div class="w-full max-w-md bg-gray-800 rounded-xl p-8 shadow-2xl border border-gray-700">
16
+ <h1 class="text-3xl font-bold mb-6 text-center text-red-500">Create Account</h1>
17
+
18
+ <form class="space-y-6">
19
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
20
+ <div>
21
+ <label class="block text-gray-300 mb-2">First Name</label>
22
+ <input type="text" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:ring-2 focus:ring-red-500 focus:border-transparent">
23
+ </div>
24
+ <div>
25
+ <label class="block text-gray-300 mb-2">Last Name</label>
26
+ <input type="text" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:ring-2 focus:ring-red-500 focus:border-transparent">
27
+ </div>
28
+ </div>
29
+
30
+ <div>
31
+ <label class="block text-gray-300 mb-2">Email</label>
32
+ <input type="email" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:ring-2 focus:ring-red-500 focus:border-transparent" placeholder="your@email.com">
33
+ </div>
34
+
35
+ <div>
36
+ <label class="block text-gray-300 mb-2">Password</label>
37
+ <input type="password" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:ring-2 focus:ring-red-500 focus:border-transparent" placeholder="••••••••">
38
+ </div>
39
+
40
+ <div>
41
+ <label class="block text-gray-300 mb-2">Confirm Password</label>
42
+ <input type="password" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:ring-2 focus:ring-red-500 focus:border-transparent" placeholder="••••••••">
43
+ </div>
44
+
45
+ <div class="flex items-center">
46
+ <input id="terms" type="checkbox" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-600 rounded bg-gray-700">
47
+ <label for="terms" class="ml-2 block text-sm text-gray-300">
48
+ I agree to the <a href="#" class="text-rose-400 hover:text-rose-300">Terms of Service</a> and <a href="#" class="text-rose-400 hover:text-rose-300">Privacy Policy</a>
49
+ </label>
50
+ </div>
51
+
52
+ <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg transition">Create Account</button>
53
+
54
+ <div class="text-center text-gray-400">
55
+ Already have an account? <a href="login.html" class="text-rose-400 hover:text-rose-300">Login</a>
56
+ </div>
57
+ </form>
58
+ </div>
59
+ </main>
60
+
61
+ <custom-footer></custom-footer>
62
+ <script src="components/navbar.js"></script>
63
+ <script src="components/footer.js"></script>
64
+ <script src="script.js"></script>
65
+ <script>
66
+ feather.replace();
67
+ </script>
68
+ </body>
69
+ </html>