Hugging Face's logo

Spaces:
CORVO-AI
/
hamza
Paused

App Files Community
CORVO-AI commited on
Commit
21820f1
·
verified ·
1 Parent(s): 55bccfc

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +878 -275
templates/index.html CHANGED
@@ -1,276 +1,879 @@
1
- <!-- templates/index.html -->
2
- <!DOCTYPE html>
3
- <html lang="en">
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>TDM Quiz - Dr Hamza Abu Nawara</title>
8
- <style>
9
- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Source+Serif+4:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
10
-
11
- :root {
12
- --navy: #0a1628;
13
- --blue-dark: #0d2137;
14
- --blue-mid: #1a3a5c;
15
- --blue: #1e5799;
16
- --blue-light: #2980b9;
17
- --blue-pale: #e8f4fd;
18
- --blue-wash: #f0f7fc;
19
- --text: #1a1a2e;
20
- --text-mid: #4a5568;
21
- --text-light: #718096;
22
- --text-faint: #a0aec0;
23
- --white: #ffffff;
24
- --off-white: #f8fafc;
25
- --border: #d2dce6;
26
- --border-light: #e2e8f0;
27
- }
28
-
29
- * { margin: 0; padding: 0; box-sizing: border-box; }
30
-
31
- body {
32
- font-family: 'Inter', -apple-system, sans-serif;
33
- background: linear-gradient(160deg, var(--navy) 0%, var(--blue-dark) 40%, var(--blue-mid) 100%);
34
- min-height: 100vh;
35
- display: flex;
36
- align-items: center;
37
- justify-content: center;
38
- color: var(--text);
39
- position: relative;
40
- overflow-x: hidden;
41
- }
42
-
43
- .bg-grid {
44
- position: fixed;
45
- top: 0; left: 0; width: 100%; height: 100%;
46
- background-image:
47
- linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
48
- linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
49
- background-size: 30px 30px;
50
- pointer-events: none;
51
- }
52
-
53
- .card {
54
- background: var(--white);
55
- width: 480px;
56
- max-width: 94vw;
57
- position: relative;
58
- z-index: 2;
59
- box-shadow: 0 25px 80px rgba(0,0,0,0.3);
60
- border-radius: 8px;
61
- overflow: hidden;
62
- }
63
-
64
- .card-header {
65
- background: linear-gradient(135deg, var(--navy), var(--blue-mid));
66
- padding: 35px 35px 30px;
67
- text-align: center;
68
- }
69
-
70
- .card-photo {
71
- width: 80px;
72
- height: 80px;
73
- border-radius: 50%;
74
- border: 3px solid rgba(41,128,185,0.5);
75
- margin: 0 auto 16px;
76
- overflow: hidden;
77
- box-shadow: 0 0 30px rgba(41,128,185,0.2);
78
- }
79
-
80
- .card-photo img { width: 100%; height: 100%; object-fit: cover; }
81
-
82
- .card-dept {
83
- font-size: 9px;
84
- letter-spacing: 4px;
85
- text-transform: uppercase;
86
- color: var(--blue-light);
87
- font-weight: 600;
88
- margin-bottom: 12px;
89
- }
90
-
91
- .card-line {
92
- width: 40px; height: 2px;
93
- background: var(--blue-light);
94
- margin: 0 auto 12px;
95
- }
96
-
97
- .card-title {
98
- font-family: 'Source Serif 4', serif;
99
- font-size: 24px;
100
- font-weight: 700;
101
- color: var(--white);
102
- margin-bottom: 4px;
103
- }
104
-
105
- .card-subtitle {
106
- font-size: 12px;
107
- color: rgba(255,255,255,0.4);
108
- letter-spacing: 1px;
109
- }
110
-
111
- .card-body { padding: 28px 35px 35px; }
112
-
113
- .card-notice {
114
- font-size: 11px;
115
- line-height: 1.8;
116
- color: var(--text-mid);
117
- padding: 12px 16px;
118
- background: var(--blue-wash);
119
- border-left: 3px solid var(--blue);
120
- margin-bottom: 24px;
121
- }
122
-
123
- .card-notice strong { color: var(--blue); }
124
-
125
- .total-badge {
126
- display: inline-block;
127
- padding: 4px 14px;
128
- background: var(--blue-pale);
129
- color: var(--blue);
130
- font-size: 11px;
131
- font-weight: 700;
132
- margin-bottom: 20px;
133
- }
134
-
135
- .field-label {
136
- font-size: 10px;
137
- letter-spacing: 2px;
138
- text-transform: uppercase;
139
- color: var(--text-light);
140
- font-weight: 600;
141
- margin-bottom: 12px;
142
- }
143
-
144
- .options-grid {
145
- display: grid;
146
- grid-template-columns: 1fr 1fr;
147
- gap: 8px;
148
- margin-bottom: 24px;
149
- }
150
-
151
- .opt-radio { display: none; }
152
-
153
- .opt-label {
154
- display: flex;
155
- align-items: center;
156
- justify-content: center;
157
- padding: 12px 10px;
158
- border: 2px solid var(--border);
159
- cursor: pointer;
160
- font-size: 14px;
161
- font-weight: 600;
162
- color: var(--text-mid);
163
- transition: all 0.2s ease;
164
- text-align: center;
165
- border-radius: 4px;
166
- }
167
-
168
- .opt-label:hover {
169
- border-color: var(--blue);
170
- color: var(--blue);
171
- background: var(--blue-pale);
172
- }
173
-
174
- .opt-radio:checked + .opt-label {
175
- border-color: var(--blue);
176
- background: var(--blue);
177
- color: var(--white);
178
- }
179
-
180
- .opt-label .num {
181
- font-size: 18px;
182
- font-weight: 800;
183
- margin-right: 6px;
184
- }
185
-
186
- .opt-label .txt {
187
- font-size: 12px;
188
- font-weight: 500;
189
- }
190
-
191
- .start-btn {
192
- width: 100%;
193
- padding: 14px;
194
- background: var(--blue);
195
- color: var(--white);
196
- border: none;
197
- cursor: pointer;
198
- font-family: 'Inter', sans-serif;
199
- font-size: 13px;
200
- font-weight: 700;
201
- letter-spacing: 2px;
202
- text-transform: uppercase;
203
- transition: all 0.2s ease;
204
- border-radius: 4px;
205
- }
206
-
207
- .start-btn:hover { background: var(--blue-light); }
208
-
209
- .card-footer {
210
- padding: 12px 35px;
211
- border-top: 1px solid var(--border-light);
212
- text-align: center;
213
- }
214
-
215
- .card-footer p {
216
- font-size: 9px;
217
- color: var(--text-faint);
218
- letter-spacing: 1px;
219
- }
220
-
221
- @media (max-width: 520px) {
222
- .card-header { padding: 28px 24px 24px; }
223
- .card-body { padding: 24px 24px 28px; }
224
- .card-title { font-size: 20px; }
225
- }
226
- </style>
227
- </head>
228
- <body>
229
- <div class="bg-grid"></div>
230
-
231
- <div class="card">
232
- <div class="card-header">
233
- <div class="card-photo">
234
- <img src="{{ url_for('static', filename='hamza.jpeg') }}" alt="Dr Hamza Abu Nawara">
235
- </div>
236
- <div class="card-dept">Department of Clinical Pharmacy</div>
237
- <div class="card-line"></div>
238
- <h1 class="card-title">TDM Quiz</h1>
239
- <p class="card-subtitle">Therapeutic Decision-Making</p>
240
- </div>
241
-
242
- <div class="card-body">
243
- <div class="card-notice">
244
- These more than 300 cases are based on prior clinical notes and previous
245
- exam scenarios. Some questions may have <strong>more than one correct answer</strong>
246
- and may require selecting multiple options.
247
- </div>
248
-
249
- <div class="total-badge">{{ total }} Questions Available</div>
250
-
251
- <form action="/quiz" method="POST">
252
- <div class="field-label">Select Number of Questions</div>
253
- <div class="options-grid">
254
- <input type="radio" name="count" value="30" id="c30" class="opt-radio" checked>
255
- <label for="c30" class="opt-label"><span class="num">30</span><span class="txt">Questions</span></label>
256
-
257
- <input type="radio" name="count" value="50" id="c50" class="opt-radio">
258
- <label for="c50" class="opt-label"><span class="num">50</span><span class="txt">Questions</span></label>
259
-
260
- <input type="radio" name="count" value="100" id="c100" class="opt-radio">
261
- <label for="c100" class="opt-label"><span class="num">100</span><span class="txt">Questions</span></label>
262
-
263
- <input type="radio" name="count" value="150" id="c150" class="opt-radio">
264
- <label for="c150" class="opt-label"><span class="num">150</span><span class="txt">Questions</span></label>
265
- </div>
266
-
267
- <button type="submit" class="start-btn">Start Quiz</button>
268
- </form>
269
- </div>
270
-
271
- <div class="card-footer">
272
- <p>Collected by Dr Hamza Abu Nawara | For Educational Purposes Only</p>
273
- </div>
274
- </div>
275
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
276
  </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>TDM Quiz - Dr Hamza Abu Nawara</title>
7
+ <style>
8
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Source+Serif+4:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
9
+
10
+ :root {
11
+ --navy: #0a1628;
12
+ --blue-dark: #0d2137;
13
+ --blue-mid: #1a3a5c;
14
+ --blue: #1e5799;
15
+ --blue-light: #2980b9;
16
+ --blue-bright: #3498db;
17
+ --blue-pale: #e8f4fd;
18
+ --blue-wash: #f0f7fc;
19
+ --text: #1a1a2e;
20
+ --text-mid: #4a5568;
21
+ --text-light: #718096;
22
+ --text-faint: #a0aec0;
23
+ --white: #ffffff;
24
+ --off-white: #f8fafc;
25
+ --border: #d2dce6;
26
+ --border-light: #e2e8f0;
27
+ --green: #27ae60;
28
+ --whatsapp: #25d366;
29
+ }
30
+
31
+ * { margin: 0; padding: 0; box-sizing: border-box; }
32
+
33
+ body {
34
+ font-family: 'Inter', -apple-system, sans-serif;
35
+ background: var(--navy);
36
+ min-height: 100vh;
37
+ color: var(--text);
38
+ overflow-x: hidden;
39
+ }
40
+
41
+ /* ===== BACKGROUND ===== */
42
+ .bg {
43
+ position: fixed;
44
+ top: 0; left: 0; width: 100%; height: 100%;
45
+ z-index: 0;
46
+ }
47
+
48
+ .bg-gradient {
49
+ position: absolute;
50
+ top: 0; left: 0; width: 100%; height: 100%;
51
+ background:
52
+ radial-gradient(ellipse at 20% 50%, rgba(30,87,153,0.15) 0%, transparent 50%),
53
+ radial-gradient(ellipse at 80% 20%, rgba(41,128,185,0.1) 0%, transparent 50%),
54
+ radial-gradient(ellipse at 50% 80%, rgba(30,87,153,0.08) 0%, transparent 50%),
55
+ linear-gradient(160deg, #060d19 0%, #0a1628 30%, #0d2137 60%, #0f2847 100%);
56
+ }
57
+
58
+ .bg-grid {
59
+ position: absolute;
60
+ top: 0; left: 0; width: 100%; height: 100%;
61
+ background-image:
62
+ linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
63
+ linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
64
+ background-size: 40px 40px;
65
+ }
66
+
67
+ .bg-line-v {
68
+ position: absolute;
69
+ top: 0; height: 100%; width: 1px;
70
+ background: linear-gradient(180deg, transparent 0%, rgba(41,128,185,0.12) 30%, rgba(41,128,185,0.12) 70%, transparent 100%);
71
+ }
72
+
73
+ .bg-line-v:nth-child(1) { left: 10%; }
74
+ .bg-line-v:nth-child(2) { left: 90%; }
75
+
76
+ .bg-line-h {
77
+ position: absolute;
78
+ left: 0; width: 100%; height: 1px;
79
+ background: linear-gradient(90deg, transparent 0%, rgba(41,128,185,0.08) 30%, rgba(41,128,185,0.08) 70%, transparent 100%);
80
+ }
81
+
82
+ .bg-line-h:nth-child(3) { top: 15%; }
83
+ .bg-line-h:nth-child(4) { top: 85%; }
84
+
85
+ .bg-glow {
86
+ position: absolute;
87
+ border-radius: 50%;
88
+ filter: blur(80px);
89
+ opacity: 0.07;
90
+ }
91
+
92
+ .bg-glow-1 {
93
+ width: 500px; height: 500px;
94
+ background: var(--blue-light);
95
+ top: -100px; right: -100px;
96
+ }
97
+
98
+ .bg-glow-2 {
99
+ width: 400px; height: 400px;
100
+ background: var(--blue);
101
+ bottom: -100px; left: -100px;
102
+ }
103
+
104
+ /* ===== LAYOUT ===== */
105
+ .page {
106
+ position: relative;
107
+ z-index: 1;
108
+ min-height: 100vh;
109
+ display: flex;
110
+ align-items: center;
111
+ justify-content: center;
112
+ padding: 40px 20px;
113
+ }
114
+
115
+ .container {
116
+ width: 100%;
117
+ max-width: 960px;
118
+ display: grid;
119
+ grid-template-columns: 1fr 1fr;
120
+ gap: 0;
121
+ background: transparent;
122
+ border-radius: 12px;
123
+ overflow: hidden;
124
+ box-shadow: 0 30px 100px rgba(0,0,0,0.4);
125
+ }
126
+
127
+ /* ===== LEFT PANEL ===== */
128
+ .left-panel {
129
+ background: linear-gradient(160deg, #0c1a2e 0%, #112240 50%, #0d2137 100%);
130
+ padding: 50px 40px;
131
+ display: flex;
132
+ flex-direction: column;
133
+ justify-content: center;
134
+ align-items: center;
135
+ text-align: center;
136
+ position: relative;
137
+ overflow: hidden;
138
+ }
139
+
140
+ .left-panel::before {
141
+ content: '';
142
+ position: absolute;
143
+ top: 0; left: 0; width: 100%; height: 100%;
144
+ background: radial-gradient(ellipse at 50% 30%, rgba(41,128,185,0.08) 0%, transparent 60%);
145
+ pointer-events: none;
146
+ }
147
+
148
+ .left-accent {
149
+ position: absolute;
150
+ top: 0; right: 0;
151
+ width: 3px; height: 100%;
152
+ background: linear-gradient(180deg, transparent, var(--blue-light), var(--blue), transparent);
153
+ opacity: 0.3;
154
+ }
155
+
156
+ .photo-wrapper {
157
+ position: relative;
158
+ margin-bottom: 28px;
159
+ }
160
+
161
+ .photo-ring {
162
+ width: 140px;
163
+ height: 140px;
164
+ border-radius: 50%;
165
+ padding: 4px;
166
+ background: linear-gradient(135deg, var(--blue-light), var(--blue), var(--blue-mid));
167
+ position: relative;
168
+ }
169
+
170
+ .photo-ring::before {
171
+ content: '';
172
+ position: absolute;
173
+ top: -8px; left: -8px; right: -8px; bottom: -8px;
174
+ border-radius: 50%;
175
+ border: 1px solid rgba(41,128,185,0.2);
176
+ }
177
+
178
+ .photo-ring::after {
179
+ content: '';
180
+ position: absolute;
181
+ top: -16px; left: -16px; right: -16px; bottom: -16px;
182
+ border-radius: 50%;
183
+ border: 1px solid rgba(41,128,185,0.08);
184
+ }
185
+
186
+ .photo-img {
187
+ width: 100%;
188
+ height: 100%;
189
+ border-radius: 50%;
190
+ object-fit: cover;
191
+ display: block;
192
+ }
193
+
194
+ .photo-status {
195
+ position: absolute;
196
+ bottom: 8px; right: 8px;
197
+ width: 20px; height: 20px;
198
+ background: var(--green);
199
+ border-radius: 50%;
200
+ border: 3px solid #112240;
201
+ }
202
+
203
+ .author-dept {
204
+ font-size: 9px;
205
+ letter-spacing: 4px;
206
+ text-transform: uppercase;
207
+ color: var(--blue-light);
208
+ font-weight: 600;
209
+ margin-bottom: 14px;
210
+ }
211
+
212
+ .author-name {
213
+ font-family: 'Source Serif 4', serif;
214
+ font-size: 22px;
215
+ font-weight: 700;
216
+ color: var(--white);
217
+ margin-bottom: 4px;
218
+ }
219
+
220
+ .author-cred {
221
+ font-size: 11px;
222
+ color: rgba(255,255,255,0.35);
223
+ letter-spacing: 1px;
224
+ margin-bottom: 24px;
225
+ }
226
+
227
+ /* ===== CONTACT LINKS ===== */
228
+ .contact-links {
229
+ display: flex;
230
+ flex-direction: column;
231
+ gap: 8px;
232
+ width: 100%;
233
+ max-width: 260px;
234
+ margin-bottom: 24px;
235
+ }
236
+
237
+ .contact-link {
238
+ display: flex;
239
+ align-items: center;
240
+ gap: 10px;
241
+ padding: 10px 14px;
242
+ border-radius: 6px;
243
+ text-decoration: none;
244
+ transition: all 0.2s ease;
245
+ border: 1px solid rgba(255,255,255,0.06);
246
+ background: rgba(255,255,255,0.02);
247
+ }
248
+
249
+ .contact-link:hover {
250
+ background: rgba(255,255,255,0.06);
251
+ border-color: rgba(255,255,255,0.12);
252
+ transform: translateX(4px);
253
+ }
254
+
255
+ .contact-icon {
256
+ width: 32px;
257
+ height: 32px;
258
+ border-radius: 6px;
259
+ display: flex;
260
+ align-items: center;
261
+ justify-content: center;
262
+ flex-shrink: 0;
263
+ }
264
+
265
+ .contact-icon svg {
266
+ width: 16px;
267
+ height: 16px;
268
+ }
269
+
270
+ .contact-icon.whatsapp {
271
+ background: rgba(37,211,102,0.12);
272
+ }
273
+
274
+ .contact-icon.whatsapp svg { fill: var(--whatsapp); }
275
+
276
+ .contact-icon.gmail {
277
+ background: rgba(234,67,53,0.12);
278
+ }
279
+
280
+ .contact-icon.gmail svg { fill: #ea4335; }
281
+
282
+ .contact-info {
283
+ flex: 1;
284
+ text-align: left;
285
+ }
286
+
287
+ .contact-label {
288
+ font-size: 8px;
289
+ letter-spacing: 2px;
290
+ text-transform: uppercase;
291
+ color: rgba(255,255,255,0.3);
292
+ font-weight: 600;
293
+ margin-bottom: 1px;
294
+ }
295
+
296
+ .contact-value {
297
+ font-size: 11px;
298
+ color: rgba(255,255,255,0.6);
299
+ font-weight: 500;
300
+ }
301
+
302
+ .contact-link:hover .contact-value {
303
+ color: rgba(255,255,255,0.85);
304
+ }
305
+
306
+ .contact-arrow {
307
+ font-size: 12px;
308
+ color: rgba(255,255,255,0.15);
309
+ transition: all 0.2s;
310
+ }
311
+
312
+ .contact-link:hover .contact-arrow {
313
+ color: rgba(255,255,255,0.4);
314
+ transform: translateX(2px);
315
+ }
316
+
317
+ /* ===== LEFT DIVIDER & STATS ===== */
318
+ .left-divider {
319
+ width: 40px; height: 1px;
320
+ background: linear-gradient(90deg, transparent, var(--blue-light), transparent);
321
+ margin: 0 auto 24px;
322
+ }
323
+
324
+ .left-stats {
325
+ display: flex;
326
+ gap: 24px;
327
+ margin-bottom: 24px;
328
+ }
329
+
330
+ .left-stat { text-align: center; }
331
+
332
+ .left-stat-num {
333
+ font-size: 28px;
334
+ font-weight: 800;
335
+ color: var(--white);
336
+ line-height: 1;
337
+ margin-bottom: 4px;
338
+ }
339
+
340
+ .left-stat-label {
341
+ font-size: 8px;
342
+ letter-spacing: 2px;
343
+ text-transform: uppercase;
344
+ color: rgba(255,255,255,0.3);
345
+ font-weight: 500;
346
+ }
347
+
348
+ .left-features {
349
+ width: 100%;
350
+ max-width: 260px;
351
+ }
352
+
353
+ .left-feature {
354
+ display: flex;
355
+ align-items: center;
356
+ gap: 10px;
357
+ padding: 8px 0;
358
+ border-bottom: 1px solid rgba(255,255,255,0.04);
359
+ }
360
+
361
+ .left-feature:last-child { border-bottom: none; }
362
+
363
+ .left-feature-dot {
364
+ width: 6px; height: 6px;
365
+ background: var(--blue-light);
366
+ border-radius: 50%;
367
+ flex-shrink: 0;
368
+ }
369
+
370
+ .left-feature-text {
371
+ font-size: 11px;
372
+ color: rgba(255,255,255,0.45);
373
+ line-height: 1.5;
374
+ }
375
+
376
+ /* ===== RIGHT PANEL ===== */
377
+ .right-panel {
378
+ background: var(--white);
379
+ padding: 50px 40px;
380
+ display: flex;
381
+ flex-direction: column;
382
+ justify-content: center;
383
+ }
384
+
385
+ .right-label {
386
+ font-size: 9px;
387
+ letter-spacing: 4px;
388
+ text-transform: uppercase;
389
+ color: var(--blue);
390
+ font-weight: 700;
391
+ margin-bottom: 8px;
392
+ }
393
+
394
+ .right-title {
395
+ font-family: 'Source Serif 4', serif;
396
+ font-size: 28px;
397
+ font-weight: 700;
398
+ color: var(--navy);
399
+ margin-bottom: 6px;
400
+ line-height: 1.2;
401
+ }
402
+
403
+ .right-subtitle {
404
+ font-size: 13px;
405
+ color: var(--text-light);
406
+ margin-bottom: 28px;
407
+ }
408
+
409
+ .notice-box {
410
+ padding: 14px 16px;
411
+ background: var(--blue-wash);
412
+ border-left: 3px solid var(--blue);
413
+ margin-bottom: 28px;
414
+ font-size: 11.5px;
415
+ line-height: 1.8;
416
+ color: var(--text-mid);
417
+ }
418
+
419
+ .notice-box strong { color: var(--blue); }
420
+
421
+ .form-section-label {
422
+ font-size: 10px;
423
+ letter-spacing: 2px;
424
+ text-transform: uppercase;
425
+ color: var(--text-light);
426
+ font-weight: 600;
427
+ margin-bottom: 14px;
428
+ display: flex;
429
+ align-items: center;
430
+ gap: 8px;
431
+ }
432
+
433
+ .form-section-label::after {
434
+ content: '';
435
+ flex: 1;
436
+ height: 1px;
437
+ background: var(--border-light);
438
+ }
439
+
440
+ .options-grid {
441
+ display: grid;
442
+ grid-template-columns: 1fr 1fr;
443
+ gap: 10px;
444
+ margin-bottom: 10px;
445
+ }
446
+
447
+ .opt-card {
448
+ display: flex;
449
+ flex-direction: column;
450
+ align-items: center;
451
+ justify-content: center;
452
+ padding: 18px 10px;
453
+ border: 2px solid var(--border);
454
+ border-radius: 8px;
455
+ cursor: pointer;
456
+ transition: all 0.2s ease;
457
+ text-align: center;
458
+ position: relative;
459
+ overflow: hidden;
460
+ }
461
+
462
+ .opt-card::before {
463
+ content: '';
464
+ position: absolute;
465
+ top: 0; left: 0; width: 100%; height: 3px;
466
+ background: var(--blue);
467
+ transform: scaleX(0);
468
+ transition: transform 0.2s ease;
469
+ }
470
+
471
+ .opt-card:hover {
472
+ border-color: var(--blue);
473
+ background: var(--blue-pale);
474
+ }
475
+
476
+ .opt-card:hover::before { transform: scaleX(1); }
477
+
478
+ .opt-radio:checked + .opt-card {
479
+ border-color: var(--blue);
480
+ background: var(--blue-pale);
481
+ box-shadow: 0 2px 12px rgba(30,87,153,0.12);
482
+ }
483
+
484
+ .opt-radio:checked + .opt-card::before { transform: scaleX(1); }
485
+
486
+ .opt-card .num {
487
+ font-size: 26px;
488
+ font-weight: 900;
489
+ color: var(--blue);
490
+ line-height: 1;
491
+ margin-bottom: 4px;
492
+ }
493
+
494
+ .opt-card .txt {
495
+ font-size: 10px;
496
+ font-weight: 600;
497
+ color: var(--text-light);
498
+ letter-spacing: 1px;
499
+ text-transform: uppercase;
500
+ }
501
+
502
+ .opt-check {
503
+ position: absolute;
504
+ top: 8px; right: 8px;
505
+ width: 18px; height: 18px;
506
+ border-radius: 50%;
507
+ border: 2px solid var(--border);
508
+ display: flex;
509
+ align-items: center;
510
+ justify-content: center;
511
+ transition: all 0.2s ease;
512
+ }
513
+
514
+ .opt-check::after {
515
+ content: '';
516
+ width: 8px; height: 8px;
517
+ border-radius: 50%;
518
+ background: var(--blue);
519
+ transform: scale(0);
520
+ transition: transform 0.2s ease;
521
+ }
522
+
523
+ .opt-radio:checked + .opt-card .opt-check {
524
+ border-color: var(--blue);
525
+ }
526
+
527
+ .opt-radio:checked + .opt-card .opt-check::after {
528
+ transform: scale(1);
529
+ }
530
+
531
+ .custom-input-row {
532
+ display: flex;
533
+ gap: 10px;
534
+ margin-bottom: 24px;
535
+ }
536
+
537
+ .custom-input {
538
+ flex: 1;
539
+ padding: 12px 14px;
540
+ border: 2px solid var(--border);
541
+ border-radius: 6px;
542
+ font-family: 'Inter', sans-serif;
543
+ font-size: 13px;
544
+ font-weight: 600;
545
+ color: var(--text);
546
+ outline: none;
547
+ transition: border-color 0.2s;
548
+ }
549
+
550
+ .custom-input:focus { border-color: var(--blue); }
551
+
552
+ .custom-input::placeholder {
553
+ color: var(--text-faint);
554
+ font-weight: 400;
555
+ }
556
+
557
+ .custom-apply {
558
+ padding: 12px 18px;
559
+ background: var(--off-white);
560
+ border: 2px solid var(--border);
561
+ border-radius: 6px;
562
+ cursor: pointer;
563
+ font-family: 'Inter', sans-serif;
564
+ font-size: 11px;
565
+ font-weight: 700;
566
+ color: var(--blue);
567
+ letter-spacing: 1px;
568
+ text-transform: uppercase;
569
+ transition: all 0.2s;
570
+ }
571
+
572
+ .custom-apply:hover {
573
+ background: var(--blue-pale);
574
+ border-color: var(--blue);
575
+ }
576
+
577
+ .start-btn {
578
+ width: 100%;
579
+ padding: 16px;
580
+ background: linear-gradient(135deg, var(--blue), var(--blue-light));
581
+ color: var(--white);
582
+ border: none;
583
+ border-radius: 6px;
584
+ cursor: pointer;
585
+ font-family: 'Inter', sans-serif;
586
+ font-size: 13px;
587
+ font-weight: 700;
588
+ letter-spacing: 3px;
589
+ text-transform: uppercase;
590
+ transition: all 0.25s ease;
591
+ position: relative;
592
+ overflow: hidden;
593
+ }
594
+
595
+ .start-btn::before {
596
+ content: '';
597
+ position: absolute;
598
+ top: 0; left: -100%; width: 100%; height: 100%;
599
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
600
+ transition: left 0.5s ease;
601
+ }
602
+
603
+ .start-btn:hover::before { left: 100%; }
604
+ .start-btn:hover { box-shadow: 0 6px 24px rgba(30,87,153,0.35); transform: translateY(-1px); }
605
+
606
+ .form-footer {
607
+ margin-top: 20px;
608
+ padding-top: 16px;
609
+ border-top: 1px solid var(--border-light);
610
+ display: flex;
611
+ justify-content: space-between;
612
+ align-items: center;
613
+ }
614
+
615
+ .form-footer-text {
616
+ font-size: 9px;
617
+ color: var(--text-faint);
618
+ letter-spacing: 1px;
619
+ }
620
+
621
+ .form-footer-badge {
622
+ font-size: 9px;
623
+ letter-spacing: 2px;
624
+ text-transform: uppercase;
625
+ color: var(--blue);
626
+ font-weight: 700;
627
+ padding: 4px 12px;
628
+ background: var(--blue-pale);
629
+ border-radius: 3px;
630
+ }
631
+
632
+ /* ===== RESPONSIVE ===== */
633
+ @media (max-width: 800px) {
634
+ .container {
635
+ grid-template-columns: 1fr;
636
+ max-width: 500px;
637
+ }
638
+
639
+ .left-panel { padding: 35px 30px; }
640
+ .left-accent { display: none; }
641
+ .photo-ring { width: 100px; height: 100px; }
642
+ .photo-ring::before { top: -6px; left: -6px; right: -6px; bottom: -6px; }
643
+ .photo-ring::after { top: -12px; left: -12px; right: -12px; bottom: -12px; }
644
+ .author-name { font-size: 18px; }
645
+ .left-stats { gap: 18px; }
646
+ .left-stat-num { font-size: 22px; }
647
+ .contact-links { max-width: 100%; }
648
+ .right-panel { padding: 30px 24px; }
649
+ .right-title { font-size: 22px; }
650
+ }
651
+
652
+ @media (max-width: 480px) {
653
+ .page { padding: 20px 10px; }
654
+ .left-panel { padding: 28px 20px; }
655
+ .right-panel { padding: 24px 18px; }
656
+ .left-stats { gap: 14px; }
657
+ .left-stat-num { font-size: 20px; }
658
+ .right-title { font-size: 20px; }
659
+ .options-grid { gap: 8px; }
660
+ .opt-card { padding: 14px 8px; }
661
+ .opt-card .num { font-size: 22px; }
662
+ .contact-link { padding: 8px 10px; }
663
+ }
664
+ </style>
665
+ </head>
666
+ <body>
667
+
668
+ <!-- BACKGROUND -->
669
+ <div class="bg">
670
+ <div class="bg-gradient"></div>
671
+ <div class="bg-grid"></div>
672
+ <div class="bg-line-v"></div>
673
+ <div class="bg-line-v"></div>
674
+ <div class="bg-line-h"></div>
675
+ <div class="bg-line-h"></div>
676
+ <div class="bg-glow bg-glow-1"></div>
677
+ <div class="bg-glow bg-glow-2"></div>
678
+ </div>
679
+
680
+ <!-- PAGE -->
681
+ <div class="page">
682
+ <div class="container">
683
+
684
+ <!-- LEFT PANEL -->
685
+ <div class="left-panel">
686
+ <div class="left-accent"></div>
687
+
688
+ <div class="photo-wrapper">
689
+ <div class="photo-ring">
690
+ <img class="photo-img" src="{{ url_for('static', filename='hamza.jpeg') }}" alt="Dr Hamza Abu Nawara">
691
+ </div>
692
+ <div class="photo-status"></div>
693
+ </div>
694
+
695
+ <div class="author-dept">Department of Clinical Pharmacy</div>
696
+ <h2 class="author-name">Dr Hamza Abu Nawara</h2>
697
+ <p class="author-cred">Clinical Pharmacy Practice</p>
698
+
699
+ <!-- CONTACT LINKS -->
700
+ <div class="contact-links">
701
+ <a href="https://wa.me/447462804244" target="_blank" class="contact-link">
702
+ <div class="contact-icon whatsapp">
703
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
704
+ <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
705
+ </svg>
706
+ </div>
707
+ <div class="contact-info">
708
+ <div class="contact-label">WhatsApp</div>
709
+ <div class="contact-value">+44 7462 804244</div>
710
+ </div>
711
+ <span class="contact-arrow">&#8250;</span>
712
+ </a>
713
+
714
+ <a href="mailto:Hamza.abunawara@gmail.com" class="contact-link">
715
+ <div class="contact-icon gmail">
716
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
717
+ <path d="M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 010 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.455 4.64 12 9.548l6.545-4.91 1.528-1.145C21.69 2.28 24 3.434 24 5.457z"/>
718
+ </svg>
719
+ </div>
720
+ <div class="contact-info">
721
+ <div class="contact-label">Email</div>
722
+ <div class="contact-value">Hamza.abunawara@gmail.com</div>
723
+ </div>
724
+ <span class="contact-arrow">&#8250;</span>
725
+ </a>
726
+ </div>
727
+
728
+ <div class="left-divider"></div>
729
+
730
+ <div class="left-stats">
731
+ <div class="left-stat">
732
+ <div class="left-stat-num">{{ total }}</div>
733
+ <div class="left-stat-label">Questions</div>
734
+ </div>
735
+ <div class="left-stat">
736
+ <div class="left-stat-num">15+</div>
737
+ <div class="left-stat-label">Topics</div>
738
+ </div>
739
+ <div class="left-stat">
740
+ <div class="left-stat-num">300+</div>
741
+ <div class="left-stat-label">Cases</div>
742
+ </div>
743
+ </div>
744
+
745
+ <div class="left-features">
746
+ <div class="left-feature">
747
+ <div class="left-feature-dot"></div>
748
+ <div class="left-feature-text">Randomized questions each attempt</div>
749
+ </div>
750
+ <div class="left-feature">
751
+ <div class="left-feature-dot"></div>
752
+ <div class="left-feature-text">Multi-answer clinical scenarios</div>
753
+ </div>
754
+ <div class="left-feature">
755
+ <div class="left-feature-dot"></div>
756
+ <div class="left-feature-text">Detailed clinical reasoning provided</div>
757
+ </div>
758
+ <div class="left-feature">
759
+ <div class="left-feature-dot"></div>
760
+ <div class="left-feature-text">Instant score and performance grade</div>
761
+ </div>
762
+ </div>
763
+ </div>
764
+
765
+ <!-- RIGHT PANEL -->
766
+ <div class="right-panel">
767
+ <div class="right-label">Therapeutic Decision-Making</div>
768
+ <h1 class="right-title">Start Your<br>Clinical Quiz</h1>
769
+ <p class="right-subtitle">Test your pharmacotherapy knowledge with case-based MCQs</p>
770
+
771
+ <div class="notice-box">
772
+ These more than 300 cases are based on prior clinical notes and previous
773
+ exam scenarios. Some questions may have <strong>more than one correct answer</strong>
774
+ and may require selecting multiple options. All appropriate answers should
775
+ be chosen based on the clinical context.
776
+ </div>
777
+
778
+ <form action="/quiz" method="POST" id="quizForm">
779
+
780
+ <div class="form-section-label">Number of Questions</div>
781
+
782
+ <div class="options-grid">
783
+ <input type="radio" name="count" value="30" id="c30" class="opt-radio" checked>
784
+ <label for="c30" class="opt-card">
785
+ <div class="opt-check"></div>
786
+ <span class="num">30</span>
787
+ <span class="txt">Questions</span>
788
+ </label>
789
+
790
+ <input type="radio" name="count" value="50" id="c50" class="opt-radio">
791
+ <label for="c50" class="opt-card">
792
+ <div class="opt-check"></div>
793
+ <span class="num">50</span>
794
+ <span class="txt">Questions</span>
795
+ </label>
796
+
797
+ <input type="radio" name="count" value="100" id="c100" class="opt-radio">
798
+ <label for="c100" class="opt-card">
799
+ <div class="opt-check"></div>
800
+ <span class="num">100</span>
801
+ <span class="txt">Questions</span>
802
+ </label>
803
+
804
+ <input type="radio" name="count" value="150" id="c150" class="opt-radio">
805
+ <label for="c150" class="opt-card">
806
+ <div class="opt-check"></div>
807
+ <span class="num">150</span>
808
+ <span class="txt">Questions</span>
809
+ </label>
810
+ </div>
811
+
812
+ <div class="form-section-label">Or Enter Custom Amount</div>
813
+
814
+ <div class="custom-input-row">
815
+ <input type="number" class="custom-input" id="customCount"
816
+ placeholder="e.g. 75" min="1" max="{{ total }}">
817
+ <button type="button" class="custom-apply" onclick="applyCustom()">Apply</button>
818
+ </div>
819
+
820
+ <button type="submit" class="start-btn">Begin Quiz</button>
821
+ </form>
822
+
823
+ <div class="form-footer">
824
+ <span class="form-footer-text">For Educational Purposes Only</span>
825
+ <span class="form-footer-badge">First Edition 2025</span>
826
+ </div>
827
+ </div>
828
+
829
+ </div>
830
+ </div>
831
+
832
+ <script>
833
+ function applyCustom() {
834
+ const val = document.getElementById('customCount').value;
835
+ const max = {{ total }};
836
+
837
+ if (!val || val < 1) {
838
+ alert('Please enter a valid number');
839
+ return;
840
+ }
841
+
842
+ let num = parseInt(val);
843
+ if (num > max) num = max;
844
+
845
+ // Deselect all radio buttons
846
+ document.querySelectorAll('.opt-radio').forEach(r => r.checked = false);
847
+
848
+ // Check if matches existing option
849
+ const existing = document.getElementById('c' + num);
850
+ if (existing) {
851
+ existing.checked = true;
852
+ } else {
853
+ // Create hidden input
854
+ let hidden = document.getElementById('customHidden');
855
+ if (!hidden) {
856
+ hidden = document.createElement('input');
857
+ hidden.type = 'hidden';
858
+ hidden.name = 'count';
859
+ hidden.id = 'customHidden';
860
+ document.getElementById('quizForm').appendChild(hidden);
861
+ }
862
+ hidden.value = num;
863
+ }
864
+
865
+ document.getElementById('customCount').value = num;
866
+ }
867
+
868
+ // Remove hidden input when radio selected
869
+ document.querySelectorAll('.opt-radio').forEach(r => {
870
+ r.addEventListener('change', () => {
871
+ const hidden = document.getElementById('customHidden');
872
+ if (hidden) hidden.remove();
873
+ document.getElementById('customCount').value = '';
874
+ });
875
+ });
876
+ </script>
877
+
878
+ </body>
879
  </html>