Hugging Face's logo

Spaces:
Britzzy
/
skillup-nigeria
Running

App Files Community
Britzzy commited on
Commit
ce00ad9
·
verified ·
1 Parent(s): f91bb12

hwaders not workinf - Initial Deployment

Browse files
Files changed (6) hide show
  1. README.md +6 -4
  2. contact.html +191 -0
  3. index.html +293 -18
  4. login.html +144 -0
  5. prompts.txt +125 -0
  6. register.html +251 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Skillup Nigeria
3
- emoji: 📈
4
  colorFrom: blue
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: skillup-nigeria
3
+ emoji: 🐳
4
  colorFrom: blue
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
contact.html ADDED
@@ -0,0 +1,191 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Contact Us - SkillUp Nigeria</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <style>
13
+ .form-gradient {
14
+ background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
15
+ }
16
+ .btn-primary {
17
+ background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
18
+ }
19
+ .btn-primary:hover {
20
+ background: linear-gradient(90deg, #4338ca 0%, #6d28d9 100%);
21
+ }
22
+ </style>
23
+ </head>
24
+ <body class="font-sans bg-gray-50">
25
+ <!-- Navigation -->
26
+ <nav class="bg-white shadow-sm fixed w-full z-10">
27
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
28
+ <div class="flex justify-between h-16">
29
+ <div class="flex items-center">
30
+ <div class="flex-shrink-0 flex items-center">
31
+ <i data-feather="book-open" class="text-indigo-600 h-8 w-8"></i>
32
+ <a href="index.html" class="ml-2 text-xl font-bold text-gray-900">SkillUp Nigeria</a>
33
+ </div>
34
+ </div>
35
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
36
+ <a href="index.html#features" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Features</a>
37
+ <a href="index.html#how-it-works" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">How It Works</a>
38
+ <a href="index.html#leaderboards" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Leaderboards</a>
39
+ <a href="index.html#about" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">About</a>
40
+ </div>
41
+ <div class="flex items-center">
42
+ <a href="login.html" class="text-gray-900 px-3 py-2 text-sm font-medium">Login</a>
43
+ <a href="register.html" class="btn-primary text-white px-4 py-2 rounded-md text-sm font-medium shadow-sm hover:shadow-md transition duration-300">Register</a>
44
+ </div>
45
+ </div>
46
+ </div>
47
+ </nav>
48
+
49
+ <!-- Contact Section -->
50
+ <section class="min-h-screen py-20">
51
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
52
+ <div class="text-center mb-16" data-aos="fade-up">
53
+ <h1 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Contact Us</h1>
54
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">Have questions? We'd love to hear from you.</p>
55
+ </div>
56
+
57
+ <div class="grid md:grid-cols-2 gap-12">
58
+ <div data-aos="fade-right">
59
+ <h2 class="text-2xl font-bold text-gray-900 mb-6">Get in Touch</h2>
60
+ <p class="text-gray-600 mb-8">We're here to help and answer any questions you might have. We look forward to hearing from you!</p>
61
+
62
+ <div class="space-y-6">
63
+ <div class="flex items-start">
64
+ <div class="flex-shrink-0 bg-indigo-100 rounded-md p-3">
65
+ <i data-feather="mail" class="h-6 w-6 text-indigo-600"></i>
66
+ </div>
67
+ <div class="ml-4">
68
+ <h3 class="text-lg font-medium text-gray-900">Email Us</h3>
69
+ <p class="mt-1 text-gray-600">support@skillupnigeria.com</p>
70
+ <p class="text-gray-600">info@skillupnigeria.com</p>
71
+ </div>
72
+ </div>
73
+
74
+ <div class="flex items-start">
75
+ <div class="flex-shrink-0 bg-green-100 rounded-md p-3">
76
+ <i data-feather="phone" class="h-6 w-6 text-green-600"></i>
77
+ </div>
78
+ <div class="ml-4">
79
+ <h3 class="text-lg font-medium text-gray-900">Call Us</h3>
80
+ <p class="mt-1 text-gray-600">+234 123 456 7890</p>
81
+ <p class="text-gray-600">Mon-Fri from 8am to 5pm</p>
82
+ </div>
83
+ </div>
84
+
85
+ <div class="flex items-start">
86
+ <div class="flex-shrink-0 bg-purple-100 rounded-md p-3">
87
+ <i data-feather="map-pin" class="h-6 w-6 text-purple-600"></i>
88
+ </div>
89
+ <div class="ml-4">
90
+ <h3 class="text-lg font-medium text-gray-900">Visit Us</h3>
91
+ <p class="mt-1 text-gray-600">123 Education Street</p>
92
+ <p class="text-gray-600">Lagos, Nigeria</p>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </div>
97
+
98
+ <div class="bg-white p-8 rounded-xl shadow-md" data-aos="fade-left">
99
+ <h2 class="text-2xl font-bold text-gray-900 mb-6">Send us a Message</h2>
100
+ <form class="space-y-6">
101
+ <div>
102
+ <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
103
+ <div class="mt-1">
104
+ <input type="text" name="name" id="name" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
105
+ </div>
106
+ </div>
107
+
108
+ <div>
109
+ <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
110
+ <div class="mt-1">
111
+ <input type="email" name="email" id="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
112
+ </div>
113
+ </div>
114
+
115
+ <div>
116
+ <label for="subject" class="block text-sm font-medium text-gray-700">Subject</label>
117
+ <div class="mt-1">
118
+ <input type="text" name="subject" id="subject" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
119
+ </div>
120
+ </div>
121
+
122
+ <div>
123
+ <label for="message" class="block text-sm font-medium text-gray-700">Message</label>
124
+ <div class="mt-1">
125
+ <textarea id="message" name="message" rows="4" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"></textarea>
126
+ </div>
127
+ </div>
128
+
129
+ <div>
130
+ <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white btn-primary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
131
+ Send Message
132
+ </button>
133
+ </div>
134
+ </form>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ </section>
139
+
140
+ <!-- Footer -->
141
+ <footer class="bg-gray-900 text-white py-12">
142
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
143
+ <div class="grid md:grid-cols-4 gap-8">
144
+ <div>
145
+ <h3 class="text-lg font-semibold mb-4">SkillUp Nigeria</h3>
146
+ <p class="text-gray-400">Empowering Nigerian students through collaborative learning and friendly competition.</p>
147
+ </div>
148
+ <div>
149
+ <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
150
+ <ul class="space-y-2">
151
+ <li><a href="index.html" class="text-gray-400 hover:text-white">Home</a></li>
152
+ <li><a href="index.html#features" class="text-gray-400 hover:text-white">Features</a></li>
153
+ <li><a href="index.html#how-it-works" class="text-gray-400 hover:text-white">How It Works</a></li>
154
+ <li><a href="#" class="text-gray-400 hover:text-white">Leaderboards</a></li>
155
+ </ul>
156
+ </div>
157
+ <div>
158
+ <h3 class="text-lg font-semibold mb-4">Support</h3>
159
+ <ul class="space-y-2">
160
+ <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li>
161
+ <li><a href="contact.html" class="text-gray-400 hover:text-white">Contact Us</a></li>
162
+ <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
163
+ <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li>
164
+ </ul>
165
+ </div>
166
+ <div>
167
+ <h3 class="text-lg font-semibold mb-4">Connect With Us</h3>
168
+ <div class="flex space-x-4">
169
+ <a href="https://facebook.com" target="_blank" class="text-gray-400 hover:text-white"><i data-feather="facebook"></i></a>
170
+ <a href="https://twitter.com" target="_blank" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a>
171
+ <a href="https://instagram.com" target="_blank" class="text-gray-400 hover:text-white"><i data-feather="instagram"></i></a>
172
+ <a href="https://linkedin.com" target="_blank" class="text-gray-400 hover:text-white"><i data-feather="linkedin"></i></a>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
177
+ <p>&copy; 2023 SkillUp Nigeria. All rights reserved.</p>
178
+ </div>
179
+ </div>
180
+ </footer>
181
+
182
+ <script>
183
+ AOS.init({
184
+ duration: 800,
185
+ easing: 'ease-in-out',
186
+ once: true
187
+ });
188
+ feather.replace();
189
+ </script>
190
+ </body>
191
+ </html>
index.html CHANGED
@@ -1,19 +1,294 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SkillUp Nigeria - Collaborative Learning Platform</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <style>
13
+ .hero-gradient {
14
+ background: linear-gradient(135deg, #4f46e5 0%, #10b981 100%);
15
+ }
16
+ .feature-card:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
19
+ }
20
+ .btn-primary {
21
+ background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
22
+ }
23
+ .btn-primary:hover {
24
+ background: linear-gradient(90deg, #4338ca 0%, #6d28d9 100%);
25
+ }
26
+ </style>
27
+ </head>
28
+ <body class="font-sans bg-gray-50" id="how-it-works">
29
+ <!-- Navigation -->
30
+ <nav class="bg-white shadow-sm fixed w-full z-10">
31
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
32
+ <div class="flex justify-between h-16">
33
+ <div class="flex items-center">
34
+ <div class="flex-shrink-0 flex items-center">
35
+ <i data-feather="book-open" class="text-indigo-600 h-8 w-8"></i>
36
+ <span class="ml-2 text-xl font-bold text-gray-900">SkillUp Nigeria</span>
37
+ </div>
38
+ </div>
39
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
40
+ <a href="#features" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Features</a>
41
+ <a href="#how-it-works" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">How It Works</a>
42
+ <a href="#leaderboards" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Leaderboards</a>
43
+ <a href="#about" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">About</a>
44
+ </div>
45
+ <div class="flex items-center">
46
+ <a href="register.html" class="btn-primary text-white px-4 py-2 rounded-md text-sm font-medium shadow-sm hover:shadow-md transition duration-300">Get Started</a>
47
+ </div>
48
+ </div>
49
+ </div>
50
+ </nav>
51
+
52
+ <!-- Hero Section -->
53
+ <section class="hero-gradient pt-24 pb-20 text-white">
54
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
55
+ <div class="md:flex md:items-center md:justify-between">
56
+ <div class="md:w-1/2" data-aos="fade-right">
57
+ <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl mb-6">Learn Together, Grow Together</h1>
58
+ <p class="text-xl text-indigo-100 mb-8">Nigeria's first collaborative quiz platform where students create questions, form study groups, and compete on leaderboards.</p>
59
+ <div class="flex space-x-4">
60
+ <a href="register.html" class="btn-primary text-white px-6 py-3 rounded-md text-lg font-medium shadow-lg hover:shadow-xl transition duration-300">Join Now</a>
61
+ <a href="#how-it-works" class="bg-white text-indigo-600 px-6 py-3 rounded-md text-lg font-medium shadow-lg hover:shadow-xl transition duration-300">How It Works</a>
62
+ </div>
63
+ </div>
64
+ <div class="md:w-1/2 mt-10 md:mt-0" data-aos="fade-left">
65
+ <img src="http://static.photos/education/1200x630/1" alt="Students learning together" class="rounded-lg shadow-2xl">
66
+ </div>
67
+ </div>
68
+ </div>
69
+ </section>
70
+
71
+ <!-- Features Section -->
72
+ <section class="py-20 bg-white">
73
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
74
+ <div class="text-center mb-16" data-aos="fade-up">
75
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Powerful Features for Collaborative Learning</h2>
76
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">Everything you need to make learning interactive and fun</p>
77
+ </div>
78
+
79
+ <div class="grid md:grid-cols-3 gap-8">
80
+ <!-- Feature 1 -->
81
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="100">
82
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-100 text-indigo-600 mb-6">
83
+ <i data-feather="edit-2" class="h-6 w-6"></i>
84
+ </div>
85
+ <h3 class="text-lg font-medium text-gray-900 mb-3">Question Contribution</h3>
86
+ <p class="text-gray-500">Students contribute 5-10 questions per subject, building a rich knowledge base together.</p>
87
+ </div>
88
+
89
+ <!-- Feature 2 -->
90
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="200">
91
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-100 text-green-600 mb-6">
92
+ <i data-feather="users" class="h-6 w-6"></i>
93
+ </div>
94
+ <h3 class="text-lg font-medium text-gray-900 mb-3">Dynamic Groups</h3>
95
+ <p class="text-gray-500">Form study cohorts of 5 students who've submitted questions on the same topic.</p>
96
+ </div>
97
+
98
+ <!-- Feature 3 -->
99
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="300">
100
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 mb-6">
101
+ <i data-feather="award" class="h-6 w-6"></i>
102
+ </div>
103
+ <h3 class="text-lg font-medium text-gray-900 mb-3">Competitive Quizzes</h3>
104
+ <p class="text-gray-500">Test your knowledge with quizzes generated from your group's combined questions.</p>
105
+ </div>
106
+
107
+ <!-- Feature 4 -->
108
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="100">
109
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600 mb-6">
110
+ <i data-feather="clock" class="h-6 w-6"></i>
111
+ </div>
112
+ <h3 class="text-lg font-medium text-gray-900 mb-3">Timed Challenges</h3>
113
+ <p class="text-gray-500">10-minute prep time followed by dynamic quiz durations based on question count.</p>
114
+ </div>
115
+
116
+ <!-- Feature 5 -->
117
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="200">
118
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-yellow-100 text-yellow-600 mb-6">
119
+ <i data-feather="bar-chart-2" class="h-6 w-6"></i>
120
+ </div>
121
+ <h3 class="text-lg font-medium text-gray-900 mb-3">Group Leaderboards</h3>
122
+ <p class="text-gray-500">See how you rank against your peers immediately after each quiz.</p>
123
+ </div>
124
+
125
+ <!-- Feature 6 -->
126
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="300">
127
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-red-100 text-red-600 mb-6">
128
+ <i data-feather="globe" class="h-6 w-6"></i>
129
+ </div>
130
+ <h3 class="text-lg font-medium text-gray-900 mb-3">National Rankings</h3>
131
+ <p class="text-gray-500">Compete for the top spot on weekly state and national leaderboards.</p>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </section>
136
+
137
+ <!-- How It Works Section -->
138
+ <section class="py-20 bg-gray-50">
139
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
140
+ <div class="text-center mb-16" data-aos="fade-up">
141
+ <h2 id="how-it-works" class="text-3xl font-extrabold text-gray-900 sm:text-4xl">How SkillUp Nigeria Works</h2>
142
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">Three simple steps to collaborative learning success</p>
143
+ </div>
144
+
145
+ <div class="grid md:grid-cols-3 gap-8">
146
+ <!-- Step 1 -->
147
+ <div class="bg-white p-8 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="100">
148
+ <div class="flex items-center justify-center h-16 w-16 rounded-full bg-indigo-100 text-indigo-600 mb-6 mx-auto">
149
+ <span class="text-2xl font-bold">1</span>
150
+ </div>
151
+ <h3 class="text-xl font-medium text-gray-900 mb-3 text-center">Create Your Questions</h3>
152
+ <p class="text-gray-500 text-center">Register and contribute 5-10 questions on subjects you've studied. Tag them by subject and specific topic.</p>
153
+ </div>
154
+
155
+ <!-- Step 2 -->
156
+ <div class="bg-white p-8 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="200">
157
+ <div class="flex items-center justify-center h-16 w-16 rounded-full bg-green-100 text-green-600 mb-6 mx-auto">
158
+ <span class="text-2xl font-bold">2</span>
159
+ </div>
160
+ <h3 class="text-xl font-medium text-gray-900 mb-3 text-center">Form Your Study Group</h3>
161
+ <p class="text-gray-500 text-center">Be the first to submit questions on a topic to initiate a group, or accept invitations to join existing groups.</p>
162
+ </div>
163
+
164
+ <!-- Step 3 -->
165
+ <div class="bg-white p-8 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="300">
166
+ <div class="flex items-center justify-center h-16 w-16 rounded-full bg-purple-100 text-purple-600 mb-6 mx-auto">
167
+ <span class="text-2xl font-bold">3</span>
168
+ </div>
169
+ <h3 class="text-xl font-medium text-gray-900 mb-3 text-center">Take the Quiz & Compete</h3>
170
+ <p class="text-gray-500 text-center">After 10 minutes of prep time, take the quiz with questions from all group members and see your ranking!</p>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </section>
175
+
176
+ <!-- Testimonials -->
177
+ <section class="py-20 bg-white">
178
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
179
+ <div class="text-center mb-16" data-aos="fade-up">
180
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">What Students Are Saying</h2>
181
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">Hear from students who've improved their learning with SkillUp Nigeria</p>
182
+ </div>
183
+
184
+ <div class="grid md:grid-cols-3 gap-8">
185
+ <!-- Testimonial 1 -->
186
+ <div class="bg-gray-50 p-8 rounded-xl" data-aos="fade-up" data-aos-delay="100">
187
+ <div class="flex items-center mb-4">
188
+ <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/1" alt="Amina">
189
+ <div class="ml-4">
190
+ <h4 class="text-lg font-medium text-gray-900">Amina</h4>
191
+ <p class="text-indigo-600">SS2 Student, Lagos</p>
192
+ </div>
193
+ </div>
194
+ <p class="text-gray-600">"Creating questions helped me understand topics better. The group quizzes are so much fun and really test my knowledge!"</p>
195
+ </div>
196
+
197
+ <!-- Testimonial 2 -->
198
+ <div class="bg-gray-50 p-8 rounded-xl" data-aos="fade-up" data-aos-delay="200">
199
+ <div class="flex items-center mb-4">
200
+ <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/2" alt="Chike">
201
+ <div class="ml-4">
202
+ <h4 class="text-lg font-medium text-gray-900">Chike</h4>
203
+ <p class="text-indigo-600">JSS3 Student, Enugu</p>
204
+ </div>
205
+ </div>
206
+ <p class="text-gray-600">"I love competing on the leaderboards. Seeing my name move up each week motivates me to study harder."</p>
207
+ </div>
208
+
209
+ <!-- Testimonial 3 -->
210
+ <div class="bg-gray-50 p-8 rounded-xl" data-aos="fade-up" data-aos-delay="300">
211
+ <div class="flex items-center mb-4">
212
+ <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/3" alt="Fatima">
213
+ <div class="ml-4">
214
+ <h4 class="text-lg font-medium text-gray-900">Fatima</h4>
215
+ <p class="text-indigo-600">Primary 6 Student, Kano</p>
216
+ </div>
217
+ </div>
218
+ <p class="text-gray-600">"Learning with friends makes studying enjoyable. We help each other understand difficult topics through our questions."</p>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </section>
223
+
224
+ <!-- CTA Section -->
225
+ <section class="hero-gradient py-16 text-white">
226
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center" data-aos="zoom-in">
227
+ <h2 class="text-3xl font-extrabold sm:text-4xl mb-6">Ready to Transform Your Learning Experience?</h2>
228
+ <p class="text-xl text-indigo-100 mb-8 max-w-3xl mx-auto">Join thousands of Nigerian students who are making learning collaborative, competitive, and fun.</p>
229
+ <a href="register.html" class="inline-block bg-white text-indigo-600 px-8 py-3 rounded-md text-lg font-medium shadow-lg hover:shadow-xl transition duration-300">Sign Up Now - It's Free!</a>
230
+ </div>
231
+ </section>
232
+
233
+ <!-- Footer -->
234
+ <footer class="bg-gray-900 text-white py-12">
235
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
236
+ <div class="grid md:grid-cols-4 gap-8">
237
+ <div>
238
+ <h3 class="text-lg font-semibold mb-4">SkillUp Nigeria</h3>
239
+ <p class="text-gray-400">Empowering Nigerian students through collaborative learning and friendly competition.</p>
240
+ </div>
241
+ <div>
242
+ <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
243
+ <ul class="space-y-2">
244
+ <li><a href="index.html" class="text-gray-400 hover:text-white">Home</a></li>
245
+ <li><a href="#" class="text-gray-400 hover:text-white">Features</a></li>
246
+ <li><a href="#how-it-works" class="text-gray-400 hover:text-white">How It Works</a></li>
247
+ <li><a href="#" class="text-gray-400 hover:text-white">Leaderboards</a></li>
248
+ </ul>
249
+ </div>
250
+ <div>
251
+ <h3 class="text-lg font-semibold mb-4">Support</h3>
252
+ <ul class="space-y-2">
253
+ <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li>
254
+ <li><a href="contact.html" class="text-gray-400 hover:text-white">Contact Us</a></li>
255
+ <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
256
+ <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li>
257
+ </ul>
258
+ </div>
259
+ <div>
260
+ <h3 class="text-lg font-semibold mb-4">Connect With Us</h3>
261
+ <div class="flex space-x-4">
262
+ <a href="https://facebook.com" target="_blank" class="text-gray-400 hover:text-white"><i data-feather="facebook"></i></a>
263
+ <a href="https://twitter.com" target="_blank" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a>
264
+ <a href="https://instagram.com" target="_blank" class="text-gray-400 hover:text-white"><i data-feather="instagram"></i></a>
265
+ <a href="https://linkedin.com" target="_blank" class="text-gray-400 hover:text-white"><i data-feather="linkedin"></i></a>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
270
+ <p>&copy; 2023 SkillUp Nigeria. All rights reserved.</p>
271
+ </div>
272
+ </div>
273
+ </footer>
274
+
275
+ <script>
276
+ AOS.init({
277
+ duration: 800,
278
+ easing: 'ease-in-out',
279
+ once: true
280
+ });
281
+ feather.replace();
282
+
283
+ // Smooth scrolling for anchor links
284
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
285
+ anchor.addEventListener('click', function (e) {
286
+ e.preventDefault();
287
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
288
+ behavior: 'smooth'
289
+ });
290
+ });
291
+ });
292
+ </script>
293
+ </body>
294
  </html>
login.html ADDED
@@ -0,0 +1,144 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Login - SkillUp Nigeria</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <style>
13
+ .form-gradient {
14
+ background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
15
+ }
16
+ .btn-primary {
17
+ background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
18
+ }
19
+ .btn-primary:hover {
20
+ background: linear-gradient(90deg, #4338ca 0%, #6d28d9 100%);
21
+ }
22
+ </style>
23
+ </head>
24
+ <body class="font-sans bg-gray-50">
25
+ <!-- Navigation -->
26
+ <nav class="bg-white shadow-sm fixed w-full z-10">
27
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
28
+ <div class="flex justify-between h-16">
29
+ <div class="flex items-center">
30
+ <div class="flex-shrink-0 flex items-center">
31
+ <i data-feather="book-open" class="text-indigo-600 h-8 w-8"></i>
32
+ <a href="index.html" class="ml-2 text-xl font-bold text-gray-900">SkillUp Nigeria</a>
33
+ </div>
34
+ </div>
35
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
36
+ <a href="index.html#features" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Features</a>
37
+ <a href="index.html#how-it-works" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">How It Works</a>
38
+ <a href="index.html#leaderboards" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Leaderboards</a>
39
+ <a href="index.html#about" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">About</a>
40
+ </div>
41
+ <div class="flex items-center">
42
+ <a href="login.html" class="text-gray-900 px-3 py-2 text-sm font-medium">Login</a>
43
+ <a href="register.html" class="btn-primary text-white px-4 py-2 rounded-md text-sm font-medium shadow-sm hover:shadow-md transition duration-300">Register</a>
44
+ </div>
45
+ </div>
46
+ </div>
47
+ </nav>
48
+
49
+ <!-- Login Form -->
50
+ <section class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
51
+ <div class="max-w-md w-full space-y-8" data-aos="fade-up">
52
+ <div>
53
+ <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">Sign in to your account</h2>
54
+ <p class="mt-2 text-center text-sm text-gray-600">Welcome back to SkillUp Nigeria</p>
55
+ </div>
56
+ <form class="mt-8 space-y-6 bg-white p-8 rounded-xl shadow-md" action="#" method="POST">
57
+ <div class="rounded-md shadow-sm -space-y-px">
58
+ <div>
59
+ <label for="email" class="sr-only">Email address</label>
60
+ <input id="email" name="email" type="email" autocomplete="email" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="Email address">
61
+ </div>
62
+ <div>
63
+ <label for="password" class="sr-only">Password</label>
64
+ <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="Password">
65
+ </div>
66
+ </div>
67
+
68
+ <div class="flex items-center justify-between">
69
+ <div class="flex items-center">
70
+ <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
71
+ <label for="remember-me" class="ml-2 block text-sm text-gray-900"> Remember me </label>
72
+ </div>
73
+
74
+ <div class="text-sm">
75
+ <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500"> Forgot your password? </a>
76
+ </div>
77
+ </div>
78
+
79
+ <div>
80
+ <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white btn-primary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
81
+ Sign in
82
+ </button>
83
+ </div>
84
+ </form>
85
+ <div class="text-center">
86
+ <p class="text-sm text-gray-600">
87
+ Don't have an account? <a href="register.html" class="font-medium text-indigo-600 hover:text-indigo-500">Register now</a>
88
+ </p>
89
+ </div>
90
+ </div>
91
+ </section>
92
+
93
+ <!-- Footer -->
94
+ <footer class="bg-gray-900 text-white py-12">
95
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
96
+ <div class="grid md:grid-cols-4 gap-8">
97
+ <div>
98
+ <h3 class="text-lg font-semibold mb-4">SkillUp Nigeria</h3>
99
+ <p class="text-gray-400">Empowering Nigerian students through collaborative learning and friendly competition.</p>
100
+ </div>
101
+ <div>
102
+ <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
103
+ <ul class="space-y-2">
104
+ <li><a href="index.html" class="text-gray-400 hover:text-white">Home</a></li>
105
+ <li><a href="index.html#features" class="text-gray-400 hover:text-white">Features</a></li>
106
+ <li><a href="index.html#how-it-works" class="text-gray-400 hover:text-white">How It Works</a></li>
107
+ <li><a href="#" class="text-gray-400 hover:text-white">Leaderboards</a></li>
108
+ </ul>
109
+ </div>
110
+ <div>
111
+ <h3 class="text-lg font-semibold mb-4">Support</h3>
112
+ <ul class="space-y-2">
113
+ <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li>
114
+ <li><a href="contact.html" class="text-gray-400 hover:text-white">Contact Us</a></li>
115
+ <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
116
+ <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li>
117
+ </ul>
118
+ </div>
119
+ <div>
120
+ <h3 class="text-lg font-semibold mb-4">Connect With Us</h3>
121
+ <div class="flex space-x-4">
122
+ <a href="https://facebook.com" target="_blank" class="text-gray-400 hover:text-white"><i data-feather="facebook"></i></a>
123
+ <a href="https://twitter.com" target="_blank" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a>
124
+ <a href="https://instagram.com" target="_blank" class="text-gray-400 hover:text-white"><i data-feather="instagram"></i></a>
125
+ <a href="https://linkedin.com" target="_blank" class="text-gray-400 hover:text-white"><i data-feather="linkedin"></i></a>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
130
+ <p>&copy; 2023 SkillUp Nigeria. All rights reserved.</p>
131
+ </div>
132
+ </div>
133
+ </footer>
134
+
135
+ <script>
136
+ AOS.init({
137
+ duration: 800,
138
+ easing: 'ease-in-out',
139
+ once: true
140
+ });
141
+ feather.replace();
142
+ </script>
143
+ </body>
144
+ </html>
prompts.txt ADDED
@@ -0,0 +1,125 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ Here is a comprehensive project prompt for the "Collaborative Learning & Quiz Platform":
2
+
3
+ ---
4
+
5
+ ## Project Prompt: Collaborative Student Quiz Platform (MVP)
6
+
7
+ **Project Title:** SkillUp Nigeria: Collaborative Quiz & Learning Platform
8
+
9
+ **Overview:**
10
+ Develop an engaging and secure web-based platform designed to foster collaborative learning and competitive quizzing among primary and secondary school students. "SkillUp Nigeria" will empower students to create their own study questions, form dynamic peer-to-peer study groups (cohorts), participate in shared quizzes based on their collective questions, and track their performance through a robust system of leaderboards. The platform aims to gamify the learning process, encourage peer interaction, and provide valuable performance insights.
11
+
12
+ **Target Audience:**
13
+ Primary and Secondary School Students across Nigeria.
14
+
15
+ **I. Core Functionality (Minimum Viable Product - MVP):**
16
+
17
+ 1. **Student Registration & Profile Management:**
18
+ * **Registration Form:** A secure and intuitive registration process collecting essential student details.
19
+ * **Required Fields:** First Name, Surname, Nickname, Age, Gender, Email Address, Phone Number, State of Residence, Local Government Area (LGA), School Name, Current Class/Grade (e.g., Primary 4, JSS 2, SS 1), Password, Password Confirmation.
20
+ * **Profile Editing:** Students must be able to view and update their non-sensitive profile information after registration.
21
+ * **Security:** Implement robust password hashing (e.g., bcrypt), email verification for account activation, and secure storage for all personal data.
22
+
23
+ 2. **Question Contribution System:**
24
+ * **Personal Question Bank:** Each registered student can contribute between **5 to 10 unique multiple-choice questions** (with 4 options and a single correct answer specified) or short-answer questions per subject/topic they have studied.
25
+ * **Subject & Topic Tagging:** Questions must be categorized by Subject (e.g., Mathematics, English, Basic Science) and specific Topic (e.g., Algebra, Nouns, Photosynthesis).
26
+ * **Question Management Dashboard:** Students will have a personal dashboard to view, edit (before group formation), and delete their own contributed questions.
27
+ * **Quality Control (MVP Consideration):** Simple validation to ensure all fields are filled, and a correct answer is marked.
28
+
29
+ 3. **Dynamic Group (Cohort) Formation:**
30
+ * **Initiation:** The *first student* who submits questions for a particular subject/topic on a given day gains the ability to initiate a group for that subject/topic.
31
+ * **Request System:** The initiating student can send invitations to other registered students who have submitted questions for the *same subject/topic on the same day*.
32
+ * **Accept/Reject:** Invited students will receive a notification and can choose to accept or reject the group invitation.
33
+ * **Group Size:** Each group must consist of exactly **5 students**.
34
+ * **Persistent Invitations:** The initiating student can continue sending invitations until five students have accepted. Once a group reaches 5 members, no further invitations can be sent or accepted for that specific group.
35
+ * **Contribution by Accepted Members:** Once a student accepts a group invitation, they will also be prompted to submit their own 5-10 questions if they haven't already for that specific subject/topic, contributing to the group's question pool.
36
+ * **Group Naming:**
37
+ * **Automatic Generation:** The system will automatically generate a unique, pronounceable, and memorable name for each group (e.g., "The Innovators," "Logic Legends," "Quantum Squad").
38
+ * **Subject-Specificity:** Groups are always formed around a single, specific subject and topic.
39
+
40
+ 4. **Collaborative Quiz Generation & Mechanics:**
41
+ * **Question Merging:** Once a group of 5 students is formed, all contributed questions from its members (totaling between 25 and 50 questions, as each student contributes 5-10) are automatically merged into a single, comprehensive quiz for that specific group. **Constraint: Each group quiz will not exceed 50 questions, and each student cannot submit more than 10 questions.**
42
+ * **Preparation Period:** After the questions are merged, there will be a mandatory **10-minute countdown** displayed to all group members, allowing them to prepare mentally before the quiz begins.
43
+ * **Quiz Commencement:** After the 10-minute preparation, the quiz automatically starts, and the timer begins counting down.
44
+ * **Quiz Interface:** A clean and user-friendly interface displaying one question at a time.
45
+ * **Navigation:** Students can navigate freely between "Previous Question" and "Next Question."
46
+ * **No Pause Feature:** The quiz timer cannot be paused once started.
47
+ * **Dynamic Time Limit:** The quiz duration will be between **20 and 45 minutes**, dynamically adjusted based on the total number of questions in the group's merged quiz (e.g., 1 minute per question + a fixed buffer).
48
+ * **Automatic Submission:** The quiz is automatically submitted for all participants once the allocated time elapses.
49
+
50
+ 5. **Scoring & Leaderboards:**
51
+ * **Individual Score Display:** Immediately after quiz submission, each student sees their raw score and percentage correct.
52
+ * **Group Leaderboard:**
53
+ * Accessible **only to members of that specific group**.
54
+ * Displays ranks from 1st to 5th, showing each member's score and position.
55
+ * **Metrics per Student:** Raw Score, Percentage Correct, Average Time Spent per Question, and "Perfectness Score" (e.g., a metric representing the ratio of correct answers to total attempted questions).
56
+ * **State Leaderboard:**
57
+ * Accessible to **all students within the same state**.
58
+ * Resets **every week (e.g., Monday 12:00 AM UTC)**.
59
+ * Displays the top-performing students from that state.
60
+ * **National Leaderboard:**
61
+ * Accessible to **all registered students across Nigeria**.
62
+ * Displays the **top 50 students nationally**.
63
+ * Resets **every week (e.g., Monday 12:00 AM UTC)**.
64
+ * **Gamification (Crown Icon):** The student who achieves the highest score nationally (or the highest aggregate score over a specific period) will have a "crown" icon prominently displayed next to their name on the National Leaderboard for the entire week, until another student surpasses their achievement or the leaderboard resets.
65
+
66
+ **II. Technical Considerations for MVP:**
67
+
68
+ 1. **Frontend (User Interface & Experience):**
69
+ * **Technologies:** React, Vue.js, or Angular for a dynamic, responsive Single Page Application (SPA).
70
+ * **Design:** Modern, intuitive, and engaging UI/UX suitable for primary and secondary school students. Emphasis on clear navigation, readability, and gamified elements.
71
+ * **Responsiveness:** Full responsiveness across desktop, tablet, and mobile devices.
72
+ * **Key Screens:** Registration/Login, Student Dashboard, Question Submission Form, Group Invitation/Acceptance Interface, Active Quiz Interface, Score Display, Group Leaderboard, State Leaderboard, National Leaderboard, User Profile.
73
+
74
+ 2. **Backend & API:**
75
+ * **Technologies:** Python (Django/Flask), Node.js (Express), or PHP (Laravel).
76
+ * **API Design:** A robust RESTful API for all frontend-backend communication.
77
+ * **Core Modules:**
78
+ * User Authentication & Authorization (JWT tokens).
79
+ * User Profile Management.
80
+ * Question CRUD (Create, Read, Update, Delete) Operations.
81
+ * Group Creation, Invitation, Acceptance, and Member Management Logic.
82
+ * Quiz Generation, Real-time Timer Management, Answer Processing, and Score Calculation.
83
+ * Leaderboard Data Aggregation and Retrieval (optimized for performance).
84
+ * Notification System (e.g., for group invitations, quiz start).
85
+ * **Real-time Capabilities (for MVP):** While WebSockets could enhance real-time quiz start and notifications, for an MVP, a well-implemented polling mechanism or server-sent events might be acceptable to manage complexity.
86
+
87
+ 3. **Database:**
88
+ * **Type:** Relational Database (e.g., PostgreSQL or MySQL).
89
+ * **Schema Design:**
90
+ * `Users`: Stores student personal details, authentication info, state, LGA, school, class.
91
+ * `Subjects`: List of subjects (e.g., Math, English).
92
+ * `Topics`: Specific topics within subjects.
93
+ * `Questions`: Stores question text, options, correct answer, type (MCQ/Short Answer), creator ID, subject ID, topic ID.
94
+ * `Groups`: Stores group ID, name, creation date, subject ID, topic ID, status (active/completed).
95
+ * `GroupMembers`: Links users to groups, stores role (initiator/member), join date.
96
+ * `Invitations`: Tracks group invitations (sender, receiver, group ID, status).
97
+ * `Quizzes`: Stores quiz ID, group ID, start/end times, total questions, duration.
98
+ * `QuizAttempts`: Stores individual student attempts, quiz ID, user ID, score, submission time.
99
+ * `UserAnswers`: Stores individual answers submitted for each question during an attempt.
100
+ * `LeaderboardData`: Optimized tables or materialized views for fast retrieval of state and national leaderboard data, including weekly reset logic.
101
+
102
+ 4. **System Architecture & Security:**
103
+ * **Scalability:** Design the architecture with future growth in mind.
104
+ * **Cloud Deployment:** Plan for deployment on a cloud platform (e.g., AWS, Google Cloud, Azure).
105
+ * **Security:**
106
+ * **Data Encryption:** Encrypt sensitive user data at rest and in transit (SSL/TLS for all communication).
107
+ * **Authentication & Authorization:** Secure user login, robust session management, and role-based access control.
108
+ * **Input Validation:** Implement comprehensive input validation to prevent common web vulnerabilities (SQL injection, XSS, CSRF).
109
+ * **API Security:** Implement rate limiting and other API protection mechanisms.
110
+ * **Privacy:** Strict adherence to data privacy principles, particularly concerning student data.
111
+ * **Auditing:** Include basic logging for security events and system activities.
112
+
113
+ **III. Deliverables for MVP:**
114
+
115
+ * A fully functional web application demonstrating all core functionalities listed above.
116
+ * Clear and concise API documentation.
117
+ * Database schema design.
118
+ * A basic administrator panel for user management and content oversight.
119
+ * Deployment instructions for a chosen cloud platform.
120
+ * Comprehensive technical documentation covering architecture, technologies used, and future considerations.
121
+
122
+ This prompt provides a detailed blueprint for developing the "SkillUp Nigeria" platform, focusing on a perfect, working MVP that addresses all specified requirements.
123
+ akkk button working
124
+ button not worling
125
+ hwaders not workinf
register.html ADDED
@@ -0,0 +1,251 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Register - SkillUp Nigeria</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <style>
13
+ .form-gradient {
14
+ background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
15
+ }
16
+ .btn-primary {
17
+ background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
18
+ }
19
+ .btn-primary:hover {
20
+ background: linear-gradient(90deg, #4338ca 0%, #6d28d9 100%);
21
+ }
22
+ </style>
23
+ </head>
24
+ <body class="font-sans bg-gray-50">
25
+ <!-- Navigation -->
26
+ <nav class="bg-white shadow-sm fixed w-full z-10">
27
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
28
+ <div class="flex justify-between h-16">
29
+ <div class="flex items-center">
30
+ <div class="flex-shrink-0 flex items-center">
31
+ <i data-feather="book-open" class="text-indigo-600 h-8 w-8"></i>
32
+ <a href="index.html" class="ml-2 text-xl font-bold text-gray-900">SkillUp Nigeria</a>
33
+ </div>
34
+ </div>
35
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
36
+ <a href="index.html#features" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Features</a>
37
+ <a href="index.html#how-it-works" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">How It Works</a>
38
+ <a href="index.html#leaderboards" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Leaderboards</a>
39
+ <a href="index.html#about" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">About</a>
40
+ </div>
41
+ <div class="flex items-center">
42
+ <a href="login.html" class="text-gray-900 px-3 py-2 text-sm font-medium">Login</a>
43
+ <a href="register.html" class="btn-primary text-white px-4 py-2 rounded-md text-sm font-medium shadow-sm hover:shadow-md transition duration-300">Register</a>
44
+ </div>
45
+ </div>
46
+ </div>
47
+ </nav>
48
+
49
+ <!-- Registration Form -->
50
+ <section class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
51
+ <div class="max-w-md w-full space-y-8" data-aos="fade-up">
52
+ <div>
53
+ <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">Create your account</h2>
54
+ <p class="mt-2 text-center text-sm text-gray-600">Join thousands of Nigerian students learning together</p>
55
+ </div>
56
+ <form class="mt-8 space-y-6 bg-white p-8 rounded-xl shadow-md" action="#" method="POST">
57
+ <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
58
+ <div class="sm:col-span-3">
59
+ <label for="first-name" class="block text-sm font-medium text-gray-700">First name</label>
60
+ <div class="mt-1">
61
+ <input type="text" name="first-name" id="first-name" autocomplete="given-name" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
62
+ </div>
63
+ </div>
64
+
65
+ <div class="sm:col-span-3">
66
+ <label for="last-name" class="block text-sm font-medium text-gray-700">Surname</label>
67
+ <div class="mt-1">
68
+ <input type="text" name="last-name" id="last-name" autocomplete="family-name" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
69
+ </div>
70
+ </div>
71
+
72
+ <div class="sm:col-span-3">
73
+ <label for="nickname" class="block text-sm font-medium text-gray-700">Nickname</label>
74
+ <div class="mt-1">
75
+ <input type="text" name="nickname" id="nickname" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
76
+ </div>
77
+ </div>
78
+
79
+ <div class="sm:col-span-3">
80
+ <label for="age" class="block text-sm font-medium text-gray-700">Age</label>
81
+ <div class="mt-1">
82
+ <input type="number" name="age" id="age" min="5" max="25" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
83
+ </div>
84
+ </div>
85
+
86
+ <div class="sm:col-span-3">
87
+ <label for="gender" class="block text-sm font-medium text-gray-700">Gender</label>
88
+ <div class="mt-1">
89
+ <select id="gender" name="gender" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
90
+ <option value="">Select</option>
91
+ <option value="male">Male</option>
92
+ <option value="female">Female</option>
93
+ <option value="other">Other</option>
94
+ </select>
95
+ </div>
96
+ </div>
97
+
98
+ <div class="sm:col-span-3">
99
+ <label for="email" class="block text-sm font-medium text-gray-700">Email address</label>
100
+ <div class="mt-1">
101
+ <input type="email" name="email" id="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
102
+ </div>
103
+ </div>
104
+
105
+ <div class="sm:col-span-3">
106
+ <label for="phone" class="block text-sm font-medium text-gray-700">Phone number</label>
107
+ <div class="mt-1">
108
+ <input type="tel" name="phone" id="phone" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
109
+ </div>
110
+ </div>
111
+
112
+ <div class="sm:col-span-3">
113
+ <label for="state" class="block text-sm font-medium text-gray-700">State of Residence</label>
114
+ <div class="mt-1">
115
+ <select id="state" name="state" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
116
+ <option value="">Select State</option>
117
+ <option value="lagos">Lagos</option>
118
+ <option value="abuja">Abuja (FCT)</option>
119
+ <option value="rivers">Rivers</option>
120
+ <option value="kano">Kano</option>
121
+ <option value="oyo">Oyo</option>
122
+ <option value="enugu">Enugu</option>
123
+ <option value="kaduna">Kaduna</option>
124
+ <option value="delta">Delta</option>
125
+ <option value="anambra">Anambra</option>
126
+ <option value="edo">Edo</option>
127
+ </select>
128
+ </div>
129
+ </div>
130
+
131
+ <div class="sm:col-span-3">
132
+ <label for="lga" class="block text-sm font-medium text-gray-700">Local Government Area</label>
133
+ <div class="mt-1">
134
+ <input type="text" name="lga" id="lga" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
135
+ </div>
136
+ </div>
137
+
138
+ <div class="sm:col-span-3">
139
+ <label for="school" class="block text-sm font-medium text-gray-700">School Name</label>
140
+ <div class="mt-1">
141
+ <input type="text" name="school" id="school" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
142
+ </div>
143
+ </div>
144
+
145
+ <div class="sm:col-span-3">
146
+ <label for="class" class="block text-sm font-medium text-gray-700">Current Class/Grade</label>
147
+ <div class="mt-1">
148
+ <select id="class" name="class" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
149
+ <option value="">Select Class</option>
150
+ <option value="primary-1">Primary 1</option>
151
+ <option value="primary-2">Primary 2</option>
152
+ <option value="primary-3">Primary 3</option>
153
+ <option value="primary-4">Primary 4</option>
154
+ <option value="primary-5">Primary 5</option>
155
+ <option value="primary-6">Primary 6</option>
156
+ <option value="jss-1">JSS 1</option>
157
+ <option value="jss-2">JSS 2</option>
158
+ <option value="jss-3">JSS 3</option>
159
+ <option value="sss-1">SSS 1</option>
160
+ <option value="sss-2">SSS 2</option>
161
+ <option value="sss-3">SSS 3</option>
162
+ </select>
163
+ </div>
164
+ </div>
165
+
166
+ <div class="sm:col-span-3">
167
+ <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
168
+ <div class="mt-1">
169
+ <input type="password" name="password" id="password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
170
+ </div>
171
+ </div>
172
+
173
+ <div class="sm:col-span-3">
174
+ <label for="confirm-password" class="block text-sm font-medium text-gray-700">Confirm Password</label>
175
+ <div class="mt-1">
176
+ <input type="password" name="confirm-password" id="confirm-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
177
+ </div>
178
+ </div>
179
+ </div>
180
+
181
+ <div class="flex items-center">
182
+ <input id="terms" name="terms" type="checkbox" required class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
183
+ <label for="terms" class="ml-2 block text-sm text-gray-900">I agree to the <a href="#" class="text-indigo-600 hover:text-indigo-500">Terms and Conditions</a></label>
184
+ </div>
185
+
186
+ <div>
187
+ <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white btn-primary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
188
+ Register
189
+ </button>
190
+ </div>
191
+ </form>
192
+ <div class="text-center">
193
+ <p class="text-sm text-gray-600">
194
+ Already have an account? <a href="login.html" class="font-medium text-indigo-600 hover:text-indigo-500">Sign in</a>
195
+ </p>
196
+ </div>
197
+ </div>
198
+ </section>
199
+
200
+ <!-- Footer -->
201
+ <footer class="bg-gray-900 text-white py-12">
202
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
203
+ <div class="grid md:grid-cols-4 gap-8">
204
+ <div>
205
+ <h3 class="text-lg font-semibold mb-4">SkillUp Nigeria</h3>
206
+ <p class="text-gray-400">Empowering Nigerian students through collaborative learning and friendly competition.</p>
207
+ </div>
208
+ <div>
209
+ <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
210
+ <ul class="space-y-2">
211
+ <li><a href="index.html" class="text-gray-400 hover:text-white">Home</a></li>
212
+ <li><a href="index.html#features" class="text-gray-400 hover:text-white">Features</a></li>
213
+ <li><a href="index.html#how-it-works" class="text-gray-400 hover:text-white">How It Works</a></li>
214
+ <li><a href="#" class="text-gray-400 hover:text-white">Leaderboards</a></li>
215
+ </ul>
216
+ </div>
217
+ <div>
218
+ <h3 class="text-lg font-semibold mb-4">Support</h3>
219
+ <ul class="space-y-2">
220
+ <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li>
221
+ <li><a href="contact.html" class="text-gray-400 hover:text-white">Contact Us</a></li>
222
+ <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
223
+ <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li>
224
+ </ul>
225
+ </div>
226
+ <div>
227
+ <h3 class="text-lg font-semibold mb-4">Connect With Us</h3>
228
+ <div class="flex space-x-4">
229
+ <a href="https://facebook.com" target="_blank" class="text-gray-400 hover:text-white"><i data-feather="facebook"></i></a>
230
+ <a href="https://twitter.com" target="_blank" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a>
231
+ <a href="https://instagram.com" target="_blank" class="text-gray-400 hover:text-white"><i data-feather="instagram"></i></a>
232
+ <a href="https://linkedin.com" target="_blank" class="text-gray-400 hover:text-white"><i data-feather="linkedin"></i></a>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
237
+ <p>&copy; 2023 SkillUp Nigeria. All rights reserved.</p>
238
+ </div>
239
+ </div>
240
+ </footer>
241
+
242
+ <script>
243
+ AOS.init({
244
+ duration: 800,
245
+ easing: 'ease-in-out',
246
+ once: true
247
+ });
248
+ feather.replace();
249
+ </script>
250
+ </body>
251
+ </html>