wantech commited on
Commit
fbc01dd
·
verified ·
1 Parent(s): 8846f5d

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +526 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Test
3
- emoji: 👀
4
- colorFrom: gray
5
- colorTo: green
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: test
3
+ emoji: 🐳
4
+ colorFrom: yellow
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
index.html CHANGED
@@ -1,19 +1,526 @@
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>Registration Application ERD</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .entity {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .entity:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
16
+ }
17
+ .relationship-line {
18
+ position: absolute;
19
+ background-color: #6b7280;
20
+ transform-origin: left center;
21
+ }
22
+ .diagram-container {
23
+ min-height: 600px;
24
+ overflow: auto;
25
+ }
26
+ @media (max-width: 768px) {
27
+ .diagram-container {
28
+ transform: scale(0.7);
29
+ transform-origin: top left;
30
+ width: 140%;
31
+ }
32
+ }
33
+ </style>
34
+ </head>
35
+ <body class="bg-gray-50">
36
+ <div class="container mx-auto px-4 py-8">
37
+ <header class="mb-8 text-center">
38
+ <h1 class="text-3xl md:text-4xl font-bold text-indigo-700 mb-2">Registration Application Database Design</h1>
39
+ <p class="text-gray-600 max-w-2xl mx-auto">Entity Relationship Diagram for a comprehensive registration system</p>
40
+ <div class="mt-4 flex justify-center space-x-4">
41
+ <button id="toggle-view" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">
42
+ <i class="fas fa-exchange-alt mr-2"></i>Toggle View
43
+ </button>
44
+ <button id="download-btn" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition">
45
+ <i class="fas fa-download mr-2"></i>Download Diagram
46
+ </button>
47
+ </div>
48
+ </header>
49
+
50
+ <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
51
+ <div class="diagram-container relative" id="erd-diagram">
52
+ <!-- Main Entities -->
53
+ <div class="entity absolute top-20 left-1/4 w-64 bg-blue-50 border-2 border-blue-300 rounded-lg p-4 shadow-md" data-entity="applicant">
54
+ <div class="flex justify-between items-center mb-2">
55
+ <h3 class="font-bold text-blue-800 text-lg">Applicant</h3>
56
+ <i class="fas fa-user text-blue-500"></i>
57
+ </div>
58
+ <ul class="text-sm text-gray-700 space-y-1">
59
+ <li><span class="font-semibold">applicant_id</span> (PK)</li>
60
+ <li>first_name</li>
61
+ <li>last_name</li>
62
+ <li>date_of_birth</li>
63
+ <li>gender</li>
64
+ <li>email</li>
65
+ <li>phone</li>
66
+ <li>address</li>
67
+ <li>created_at</li>
68
+ <li>updated_at</li>
69
+ </ul>
70
+ </div>
71
+
72
+ <div class="entity absolute top-20 right-1/4 w-64 bg-purple-50 border-2 border-purple-300 rounded-lg p-4 shadow-md" data-entity="application">
73
+ <div class="flex justify-between items-center mb-2">
74
+ <h3 class="font-bold text-purple-800 text-lg">Application</h3>
75
+ <i class="fas fa-file-alt text-purple-500"></i>
76
+ </div>
77
+ <ul class="text-sm text-gray-700 space-y-1">
78
+ <li><span class="font-semibold">application_id</span> (PK)</li>
79
+ <li><span class="font-semibold">applicant_id</span> (FK)</li>
80
+ <li>application_date</li>
81
+ <li>status</li>
82
+ <li>program_type</li>
83
+ <li>term</li>
84
+ <li>year</li>
85
+ <li>submission_date</li>
86
+ <li>review_date</li>
87
+ <li>decision_date</li>
88
+ </ul>
89
+ </div>
90
+
91
+ <div class="entity absolute top-80 left-1/4 w-64 bg-green-50 border-2 border-green-300 rounded-lg p-4 shadow-md" data-entity="document">
92
+ <div class="flex justify-between items-center mb-2">
93
+ <h3 class="font-bold text-green-800 text-lg">Document</h3>
94
+ <i class="fas fa-file-upload text-green-500"></i>
95
+ </div>
96
+ <ul class="text-sm text-gray-700 space-y-1">
97
+ <li><span class="font-semibold">document_id</span> (PK)</li>
98
+ <li><span class="font-semibold">application_id</span> (FK)</li>
99
+ <li>document_type</li>
100
+ <li>file_name</li>
101
+ <li>file_path</li>
102
+ <li>upload_date</li>
103
+ <li>verified</li>
104
+ <li>verification_date</li>
105
+ </ul>
106
+ </div>
107
+
108
+ <div class="entity absolute top-80 right-1/4 w-64 bg-yellow-50 border-2 border-yellow-300 rounded-lg p-4 shadow-md" data-entity="payment">
109
+ <div class="flex justify-between items-center mb-2">
110
+ <h3 class="font-bold text-yellow-800 text-lg">Payment</h3>
111
+ <i class="fas fa-credit-card text-yellow-500"></i>
112
+ </div>
113
+ <ul class="text-sm text-gray-700 space-y-1">
114
+ <li><span class="font-semibold">payment_id</span> (PK)</li>
115
+ <li><span class="font-semibold">application_id</span> (FK)</li>
116
+ <li>amount</li>
117
+ <li>payment_date</li>
118
+ <li>payment_method</li>
119
+ <li>transaction_id</li>
120
+ <li>status</li>
121
+ <li>receipt_number</li>
122
+ </ul>
123
+ </div>
124
+
125
+ <div class="entity absolute top-80 left-1/2 transform -translate-x-1/2 w-64 bg-red-50 border-2 border-red-300 rounded-lg p-4 shadow-md" data-entity="education">
126
+ <div class="flex justify-between items-center mb-2">
127
+ <h3 class="font-bold text-red-800 text-lg">Education</h3>
128
+ <i class="fas fa-graduation-cap text-red-500"></i>
129
+ </div>
130
+ <ul class="text-sm text-gray-700 space-y-1">
131
+ <li><span class="font-semibold">education_id</span> (PK)</li>
132
+ <li><span class="font-semibold">applicant_id</span> (FK)</li>
133
+ <li>institution_name</li>
134
+ <li>degree</li>
135
+ <li>field_of_study</li>
136
+ <li>start_date</li>
137
+ <li>end_date</li>
138
+ <li>gpa</li>
139
+ <li>country</li>
140
+ </ul>
141
+ </div>
142
+
143
+ <div class="entity absolute top-440 left-1/4 w-64 bg-indigo-50 border-2 border-indigo-300 rounded-lg p-4 shadow-md" data-entity="reference">
144
+ <div class="flex justify-between items-center mb-2">
145
+ <h3 class="font-bold text-indigo-800 text-lg">Reference</h3>
146
+ <i class="fas fa-user-friends text-indigo-500"></i>
147
+ </div>
148
+ <ul class="text-sm text-gray-700 space-y-1">
149
+ <li><span class="font-semibold">reference_id</span> (PK)</li>
150
+ <li><span class="font-semibold">application_id</span> (FK)</li>
151
+ <li>name</li>
152
+ <li>email</li>
153
+ <li>phone</li>
154
+ <li>relationship</li>
155
+ <li>institution</li>
156
+ <li>position</li>
157
+ <li>submission_status</li>
158
+ </ul>
159
+ </div>
160
+
161
+ <div class="entity absolute top-440 right-1/4 w-64 bg-pink-50 border-2 border-pink-300 rounded-lg p-4 shadow-md" data-entity="test_score">
162
+ <div class="flex justify-between items-center mb-2">
163
+ <h3 class="font-bold text-pink-800 text-lg">Test Score</h3>
164
+ <i class="fas fa-star text-pink-500"></i>
165
+ </div>
166
+ <ul class="text-sm text-gray-700 space-y-1">
167
+ <li><span class="font-semibold">test_score_id</span> (PK)</li>
168
+ <li><span class="font-semibold">applicant_id</span> (FK)</li>
169
+ <li>test_type</li>
170
+ <li>score</li>
171
+ <li>test_date</li>
172
+ <li>reporting_date</li>
173
+ <li>valid_until</li>
174
+ </ul>
175
+ </div>
176
+
177
+ <!-- Relationships -->
178
+ <div class="relationship-line" id="line1" style="width: 100px; height: 2px; top: 120px; left: 280px;"></div>
179
+ <div class="relationship-line" id="line2" style="width: 2px; height: 180px; top: 120px; left: 380px;"></div>
180
+ <div class="relationship-line" id="line3" style="width: 100px; height: 2px; top: 300px; left: 280px;"></div>
181
+ <div class="relationship-line" id="line4" style="width: 100px; height: 2px; top: 300px; left: 480px;"></div>
182
+ <div class="relationship-line" id="line5" style="width: 2px; height: 180px; top: 120px; left: 580px;"></div>
183
+ <div class="relationship-line" id="line6" style="width: 100px; height: 2px; top: 300px; left: 580px;"></div>
184
+ <div class="relationship-line" id="line7" style="width: 2px; height: 120px; top: 300px; left: 680px;"></div>
185
+
186
+ <!-- Relationship labels -->
187
+ <div class="absolute top-150 left-360 bg-white px-2 py-1 rounded text-xs font-bold text-gray-700">1 to N</div>
188
+ <div class="absolute top-220 left-280 bg-white px-2 py-1 rounded text-xs font-bold text-gray-700">1 to N</div>
189
+ <div class="absolute top-220 left-480 bg-white px-2 py-1 rounded text-xs font-bold text-gray-700">1 to N</div>
190
+ <div class="absolute top-150 left-580 bg-white px-2 py-1 rounded text-xs font-bold text-gray-700">1 to N</div>
191
+ <div class="absolute top-220 left-580 bg-white px-2 py-1 rounded text-xs font-bold text-gray-700">1 to N</div>
192
+ <div class="absolute top-360 left-680 bg-white px-2 py-1 rounded text-xs font-bold text-gray-700">1 to N</div>
193
+ </div>
194
+ </div>
195
+
196
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
197
+ <div class="bg-white rounded-xl shadow-lg p-6">
198
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Database Schema Explanation</h2>
199
+ <ul class="space-y-3">
200
+ <li class="flex items-start">
201
+ <span class="bg-blue-100 text-blue-800 p-1 rounded mr-2"><i class="fas fa-user"></i></span>
202
+ <div>
203
+ <h3 class="font-semibold">Applicant</h3>
204
+ <p class="text-sm text-gray-600">Stores personal information about individuals applying for registration.</p>
205
+ </div>
206
+ </li>
207
+ <li class="flex items-start">
208
+ <span class="bg-purple-100 text-purple-800 p-1 rounded mr-2"><i class="fas fa-file-alt"></i></span>
209
+ <div>
210
+ <h3 class="font-semibold">Application</h3>
211
+ <p class="text-sm text-gray-600">Tracks each application submission with status and timeline information.</p>
212
+ </div>
213
+ </li>
214
+ <li class="flex items-start">
215
+ <span class="bg-green-100 text-green-800 p-1 rounded mr-2"><i class="fas fa-file-upload"></i></span>
216
+ <div>
217
+ <h3 class="font-semibold">Document</h3>
218
+ <p class="text-sm text-gray-600">Manages all supporting documents uploaded with each application.</p>
219
+ </div>
220
+ </li>
221
+ <li class="flex items-start">
222
+ <span class="bg-yellow-100 text-yellow-800 p-1 rounded mr-2"><i class="fas fa-credit-card"></i></span>
223
+ <div>
224
+ <h3 class="font-semibold">Payment</h3>
225
+ <p class="text-sm text-gray-600">Records all payment transactions related to application fees.</p>
226
+ </div>
227
+ </li>
228
+ </ul>
229
+ </div>
230
+
231
+ <div class="bg-white rounded-xl shadow-lg p-6">
232
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Key Relationships</h2>
233
+ <ul class="space-y-3">
234
+ <li class="flex items-start">
235
+ <span class="bg-red-100 text-red-800 p-1 rounded mr-2"><i class="fas fa-graduation-cap"></i></span>
236
+ <div>
237
+ <h3 class="font-semibold">Education</h3>
238
+ <p class="text-sm text-gray-600">Stores academic history of applicants with institution details.</p>
239
+ </div>
240
+ </li>
241
+ <li class="flex items-start">
242
+ <span class="bg-indigo-100 text-indigo-800 p-1 rounded mr-2"><i class="fas fa-user-friends"></i></span>
243
+ <div>
244
+ <h3 class="font-semibold">Reference</h3>
245
+ <p class="text-sm text-gray-600">Manages reference contacts provided by applicants.</p>
246
+ </div>
247
+ </li>
248
+ <li class="flex items-start">
249
+ <span class="bg-pink-100 text-pink-800 p-1 rounded mr-2"><i class="fas fa-star"></i></span>
250
+ <div>
251
+ <h3 class="font-semibold">Test Score</h3>
252
+ <p class="text-sm text-gray-600">Tracks standardized test scores submitted by applicants.</p>
253
+ </div>
254
+ </li>
255
+ <li class="flex items-start">
256
+ <span class="bg-gray-100 text-gray-800 p-1 rounded mr-2"><i class="fas fa-project-diagram"></i></span>
257
+ <div>
258
+ <h3 class="font-semibold">Relationships</h3>
259
+ <p class="text-sm text-gray-600">All entities relate back to Applicant and Application with 1-to-many relationships.</p>
260
+ </div>
261
+ </li>
262
+ </ul>
263
+ </div>
264
+ </div>
265
+
266
+ <div class="bg-white rounded-xl shadow-lg p-6">
267
+ <h2 class="text-xl font-bold text-gray-800 mb-4">SQL Schema Generation</h2>
268
+ <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto">
269
+ <pre class="text-sm text-gray-800">
270
+ -- Applicant Table
271
+ CREATE TABLE applicants (
272
+ applicant_id SERIAL PRIMARY KEY,
273
+ first_name VARCHAR(100) NOT NULL,
274
+ last_name VARCHAR(100) NOT NULL,
275
+ date_of_birth DATE NOT NULL,
276
+ gender VARCHAR(20),
277
+ email VARCHAR(255) NOT NULL UNIQUE,
278
+ phone VARCHAR(50),
279
+ address TEXT,
280
+ created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
281
+ updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
282
+ );
283
+
284
+ -- Application Table
285
+ CREATE TABLE applications (
286
+ application_id SERIAL PRIMARY KEY,
287
+ applicant_id INTEGER REFERENCES applicants(applicant_id),
288
+ application_date DATE NOT NULL,
289
+ status VARCHAR(50) NOT NULL,
290
+ program_type VARCHAR(100),
291
+ term VARCHAR(50),
292
+ year INTEGER,
293
+ submission_date TIMESTAMP,
294
+ review_date TIMESTAMP,
295
+ decision_date TIMESTAMP
296
+ );
297
+
298
+ -- Document Table
299
+ CREATE TABLE documents (
300
+ document_id SERIAL PRIMARY KEY,
301
+ application_id INTEGER REFERENCES applications(application_id),
302
+ document_type VARCHAR(100) NOT NULL,
303
+ file_name VARCHAR(255) NOT NULL,
304
+ file_path TEXT NOT NULL,
305
+ upload_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
306
+ verified BOOLEAN DEFAULT FALSE,
307
+ verification_date TIMESTAMP
308
+ );
309
+
310
+ -- Payment Table
311
+ CREATE TABLE payments (
312
+ payment_id SERIAL PRIMARY KEY,
313
+ application_id INTEGER REFERENCES applications(application_id),
314
+ amount DECIMAL(10,2) NOT NULL,
315
+ payment_date TIMESTAMP NOT NULL,
316
+ payment_method VARCHAR(50),
317
+ transaction_id VARCHAR(100),
318
+ status VARCHAR(50) NOT NULL,
319
+ receipt_number VARCHAR(100)
320
+ );
321
+
322
+ -- Education Table
323
+ CREATE TABLE education (
324
+ education_id SERIAL PRIMARY KEY,
325
+ applicant_id INTEGER REFERENCES applicants(applicant_id),
326
+ institution_name VARCHAR(255) NOT NULL,
327
+ degree VARCHAR(100),
328
+ field_of_study VARCHAR(255),
329
+ start_date DATE,
330
+ end_date DATE,
331
+ gpa DECIMAL(3,2),
332
+ country VARCHAR(100)
333
+ );
334
+
335
+ -- Reference Table
336
+ CREATE TABLE references (
337
+ reference_id SERIAL PRIMARY KEY,
338
+ application_id INTEGER REFERENCES applications(application_id),
339
+ name VARCHAR(255) NOT NULL,
340
+ email VARCHAR(255),
341
+ phone VARCHAR(50),
342
+ relationship VARCHAR(100),
343
+ institution VARCHAR(255),
344
+ position VARCHAR(255),
345
+ submission_status VARCHAR(50) DEFAULT 'Pending'
346
+ );
347
+
348
+ -- Test Score Table
349
+ CREATE TABLE test_scores (
350
+ test_score_id SERIAL PRIMARY KEY,
351
+ applicant_id INTEGER REFERENCES applicants(applicant_id),
352
+ test_type VARCHAR(100) NOT NULL,
353
+ score VARCHAR(50),
354
+ test_date DATE,
355
+ reporting_date DATE,
356
+ valid_until DATE
357
+ );
358
+ </pre>
359
+ </div>
360
+ </div>
361
+
362
+ <div class="bg-white rounded-xl shadow-lg p-6 mt-8">
363
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Database Operations</h2>
364
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
365
+ <div>
366
+ <h3 class="font-semibold mb-3">Add New Applicant</h3>
367
+ <form id="applicant-form" class="space-y-4">
368
+ <div>
369
+ <label class="block text-sm font-medium text-gray-700">First Name</label>
370
+ <input type="text" name="first_name" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
371
+ </div>
372
+ <div>
373
+ <label class="block text-sm font-medium text-gray-700">Last Name</label>
374
+ <input type="text" name="last_name" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
375
+ </div>
376
+ <div>
377
+ <label class="block text-sm font-medium text-gray-700">Email</label>
378
+ <input type="email" name="email" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
379
+ </div>
380
+ <button type="submit" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
381
+ Submit Applicant Data
382
+ </button>
383
+ </form>
384
+ </div>
385
+ <div>
386
+ <h3 class="font-semibold mb-3">Query Database</h3>
387
+ <div class="space-y-4">
388
+ <select id="entity-select" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
389
+ <option value="applicants">Applicants</option>
390
+ <option value="applications">Applications</option>
391
+ <option value="documents">Documents</option>
392
+ </select>
393
+ <button id="fetch-data" class="w-full bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2">
394
+ Fetch Data
395
+ </button>
396
+ <div id="query-results" class="bg-gray-100 p-4 rounded-md overflow-auto max-h-60 hidden">
397
+ <pre class="text-sm text-gray-800"></pre>
398
+ </div>
399
+ </div>
400
+ </div>
401
+ </div>
402
+ </div>
403
+ </div>
404
+
405
+ <script>
406
+ =======
407
+
408
+ 2. Now let's add the backend connection functionality to the script section:
409
+
410
+ <<<<<<< SEARCH
411
+ });
412
+ });
413
+ </script>
414
+ =======
415
+ });
416
+
417
+ // Backend connection functionality
418
+ const API_BASE_URL = 'http://localhost:3000/api'; // Update with your backend URL
419
+
420
+ // Handle applicant form submission
421
+ document.getElementById('applicant-form').addEventListener('submit', async function(e) {
422
+ e.preventDefault();
423
+ const formData = new FormData(this);
424
+ const data = Object.fromEntries(formData.entries());
425
+
426
+ try {
427
+ const response = await fetch(`${API_BASE_URL}/applicants`, {
428
+ method: 'POST',
429
+ headers: {
430
+ 'Content-Type': 'application/json'
431
+ },
432
+ body: JSON.stringify(data)
433
+ });
434
+
435
+ const result = await response.json();
436
+ alert('Applicant added successfully!');
437
+ console.log('Success:', result);
438
+ } catch (error) {
439
+ console.error('Error:', error);
440
+ alert('Error submitting applicant data');
441
+ }
442
+ });
443
+
444
+ // Handle data fetching
445
+ document.getElementById('fetch-data').addEventListener('click', async function() {
446
+ const entity = document.getElementById('entity-select').value;
447
+ const resultsDiv = document.getElementById('query-results');
448
+ const pre = resultsDiv.querySelector('pre');
449
+
450
+ try {
451
+ const response = await fetch(`${API_BASE_URL}/${entity}`);
452
+ const data = await response.json();
453
+
454
+ resultsDiv.classList.remove('hidden');
455
+ pre.textContent = JSON.stringify(data, null, 2);
456
+ } catch (error) {
457
+ console.error('Error:', error);
458
+ resultsDiv.classList.remove('hidden');
459
+ pre.textContent = 'Error fetching data';
460
+ }
461
+ });
462
+ });
463
+ </script>
464
+ document.addEventListener('DOMContentLoaded', function() {
465
+ // Toggle between compact and detailed view
466
+ const toggleViewBtn = document.getElementById('toggle-view');
467
+ const entities = document.querySelectorAll('.entity');
468
+ let isCompact = false;
469
+
470
+ toggleViewBtn.addEventListener('click', function() {
471
+ isCompact = !isCompact;
472
+
473
+ entities.forEach(entity => {
474
+ if (isCompact) {
475
+ entity.classList.add('w-40');
476
+ entity.classList.remove('w-64');
477
+ entity.querySelector('ul').classList.add('hidden');
478
+ } else {
479
+ entity.classList.remove('w-40');
480
+ entity.classList.add('w-64');
481
+ entity.querySelector('ul').classList.remove('hidden');
482
+ }
483
+ });
484
+
485
+ toggleViewBtn.innerHTML = isCompact
486
+ ? '<i class="fas fa-expand mr-2"></i>Expand View'
487
+ : '<i class="fas fa-compress mr-2"></i>Compact View';
488
+ });
489
+
490
+ // Download functionality (simulated)
491
+ const downloadBtn = document.getElementById('download-btn');
492
+ downloadBtn.addEventListener('click', function() {
493
+ alert('Diagram download would be initiated here in a real implementation.');
494
+ });
495
+
496
+ // Add hover effects to entities
497
+ entities.forEach(entity => {
498
+ entity.addEventListener('mouseenter', function() {
499
+ const entityType = this.getAttribute('data-entity');
500
+ document.querySelectorAll(`[data-entity="${entityType}"]`).forEach(el => {
501
+ el.classList.add('ring-2', 'ring-offset-2');
502
+ if (entityType === 'applicant') el.classList.add('ring-blue-400');
503
+ if (entityType === 'application') el.classList.add('ring-purple-400');
504
+ if (entityType === 'document') el.classList.add('ring-green-400');
505
+ if (entityType === 'payment') el.classList.add('ring-yellow-400');
506
+ if (entityType === 'education') el.classList.add('ring-red-400');
507
+ if (entityType === 'reference') el.classList.add('ring-indigo-400');
508
+ if (entityType === 'test_score') el.classList.add('ring-pink-400');
509
+ });
510
+ });
511
+
512
+ entity.addEventListener('mouseleave', function() {
513
+ const entityType = this.getAttribute('data-entity');
514
+ document.querySelectorAll(`[data-entity="${entityType}"]`).forEach(el => {
515
+ el.classList.remove('ring-2', 'ring-offset-2',
516
+ 'ring-blue-400', 'ring-purple-400',
517
+ 'ring-green-400', 'ring-yellow-400',
518
+ 'ring-red-400', 'ring-indigo-400',
519
+ 'ring-pink-400');
520
+ });
521
+ });
522
+ });
523
+ });
524
+ </script>
525
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=wantech/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
526
+ </html>