4Set-Server/checking_system_home.html at master · herman925/4Set-Server · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checking System - 4Set Pipeline</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="assets/js/tailwind.config.js"></script>
    <link rel="stylesheet" href="assets/css/theme_pantone_light_1.css" />
    <link rel="stylesheet" href="assets/css/index.css" />
    <link rel="stylesheet" href="assets/css/global.css" />
    <link rel="stylesheet" href="assets/css/checking-system-home.css" />
    <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono&family=Noto+Sans+TC&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
</head>
<body class="min-h-screen hero-background">
    <div class="relative overflow-hidden">
        <!-- Decorative Background Elements -->
        <div id="background-circles"></div>
        <div class="absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-white/70 to-transparent"></div>

        <main class="relative z-10 mx-auto min-h-screen w-full max-w-4xl px-6 py-12 lg:py-16">

            <!-- Header Section -->
            <div class="mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                <div class="flex flex-col gap-2">
                    <h1 class="hero-title text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-[color:var(--foreground)]">
                        <i data-lucide="search-check" class="w-8 h-8 sm:w-10 sm:h-10 inline-block mr-2 text-[color:var(--primary)]"></i>
                        Checking System
                    </h1>
                    <p class="hero-subtitle text-base sm:text-lg text-[color:var(--muted-foreground)] max-w-2xl">
                        Search and analyse submitted data from every angle
                    </p>
                </div>
                <a href="index.html" class="hero-button secondary-button flex items-center gap-2 px-6 py-3 text-sm font-semibold self-start">
                    <i data-lucide="arrow-left" class="w-4 h-4"></i>
                    <span>Go Back Home</span>
                </a>
            </div>

            <!-- System Status Pills -->
            <div class="entry-card mb-6 p-4">
                <div class="flex items-center justify-between gap-3 flex-wrap">
                    <!-- Left side: Status Pills -->
                    <div class="flex items-center gap-3">
                        <!-- Decryption Status Pill -->
                        <div id="decryption-status-badge" class="badge-error flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-medium">
                            <span class="status-indicator inline-block h-2 w-2 rounded-full"></span>
                            <span id="decryption-status-text">Not Decrypted</span>
                        </div>

                        <!-- JotForm Cache Status Pill -->
                        <div id="system-health-badge" class="badge-error flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-medium">
                            <span class="status-indicator inline-block h-2 w-2 rounded-full"></span>
                            <span id="status-text">System Not Ready</span>
                        </div>

                        <span class="text-xs text-[color:var(--muted-foreground)]">Last Synced: <span class="font-mono" id="snapshot-timestamp">—</span></span>
                    </div>

                    <!-- Right side: Emergency Reset -->
                    <div id="emergency-reset-badge" class="badge-error flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-medium cursor-pointer hover:opacity-80 transition-opacity" title="Emergency: Purge all cached data (password required)">
                        <i data-lucide="alert-triangle" class="w-3 h-3"></i>
                        <span>Emergency Reset</span>
                    </div>
                </div>
            </div>

            <!-- Filter Chips Display -->
            <div class="entry-card p-4 mb-4">
                <div class="flex items-center justify-between flex-wrap gap-2">
                    <div id="filter-chips" class="flex flex-wrap items-center gap-2">
                        <span class="text-xs text-[color:var(--muted-foreground)]">No filters applied</span>
                    </div>
                    <span id="filter-count" class="text-xs text-[color:var(--muted-foreground)] font-medium">0 filters applied</span>
                </div>
            </div>

            <!-- Main Filter Card -->
            <div class="entry-card p-6 lg:p-8 mb-6">
                <h2 class="text-xl font-semibold text-[color:var(--foreground)] mb-6 flex items-center gap-2">
                    <i data-lucide="sliders-horizontal" class="w-5 h-5 text-[color:var(--primary)]"></i>
                    Configure Filters
                </h2>

                <div class="space-y-4">
                    <!-- Dynamic Filter Rows Container -->
                    <div id="filters-container" class="space-y-3">
                        <!-- Filter rows will be dynamically inserted here -->
                    </div>

                    <!-- Helper Text -->
                    <div class="info-box">
                        <i data-lucide="info" class="w-4 h-4"></i>
                        <p class="text-xs text-[color:var(--muted-foreground)]">
                            <strong>Filter Rules:</strong> District and Group are independent (can use both). Once you select School → Class → Student, higher levels become unavailable to prevent conflicts.
                        </p>
                    </div>

                    <!-- Add Filter Button -->
                    <div class="pt-2">
                        <button id="add-filter-btn" class="flex items-center gap-1.5 text-sm font-medium text-[color:var(--primary)] hover:text-[color:var(--primary)]/80 transition-colors">
                            <i data-lucide="plus-circle" class="w-4 h-4"></i>
                            Add filter
                        </button>
                    </div>
                </div>

                <!-- Action Footer -->
                <div class="mt-6 pt-6 border-t border-[color:var(--border)] flex flex-col sm:flex-row items-center justify-end gap-4">
                    <div class="flex items-center gap-3">
                        <button id="clear-all-btn" class="hero-button secondary-button text-sm font-semibold px-6 py-2 rounded-full">
                            Clear All
                        </button>
                        <button id="start-checking-btn" class="hero-button bg-[color:var(--primary)] text-white px-8 py-2.5 text-sm font-semibold rounded-full" disabled>
                            Start Checking
                        </button>
                    </div>
                </div>
            </div>

            <!-- Recent Checks -->
            <div class="entry-card p-6">
                <h3 class="text-sm font-semibold text-[color:var(--muted-foreground)] uppercase tracking-wider mb-4 flex items-center gap-2">
                    <i data-lucide="history" class="w-4 h-4"></i>
                    Recent Checks
                </h3>
                <div id="recent-checks-container" class="flex flex-wrap items-center gap-2">
                    <p class="text-xs text-[color:var(--muted-foreground)]">No recent checks</p>
                </div>
            </div>

        </main>
    </div>

    <!-- Password Entry Modal -->
    <div id="password-modal" class="modal-backdrop hidden">
        <div class="modal-panel">
            <h2 class="text-xl font-semibold text-[color:var(--foreground)] mb-2">System Authentication</h2>
            <p class="text-sm text-[color:var(--muted-foreground)] mb-6">Enter the system password to decrypt data files</p>

            <form id="password-form" class="space-y-4">
                <div>
                    <input type="password"
                           id="system-password-input"
                           class="modal-input"
                           placeholder="System Password"
                           autocomplete="current-password">
                </div>

                <div id="password-error" class="modal-error"></div>

                <button type="submit"
                        id="password-submit-btn"
                        class="hero-button bg-[color:var(--primary)] text-white w-full py-3 text-sm font-semibold rounded-full">
                    Unlock
                </button>
            </form>
        </div>
    </div>

    <!-- Loading Overlay -->
    <div id="loading-overlay" class="loading-overlay hidden">
        <div class="loading-spinner"></div>
        <div class="loading-text">Loading...</div>
    </div>

    <!-- JavaScript Modules -->
    <script src="https://cdn.jsdelivr.net/npm/localforage@1.10.0/dist/localforage.min.js"></script><!-- IndexedDB wrapper -->
    <script src="assets/js/encryption.js"></script>
    <script src="assets/js/checking-system-data-loader.js"></script>
    <script src="assets/js/task-validator.js"></script><!-- TaskValidator (required for validation cache) -->
    <script src="assets/js/jotform-cache.js"></script><!-- Global JotForm cache (IndexedDB) -->
    <script src="assets/js/qualtrics-api.js"></script><!-- Qualtrics API wrapper -->
    <script src="assets/js/qualtrics-transformer.js"></script><!-- Qualtrics data transformer -->
    <script src="assets/js/grade-detector.js"></script><!-- Grade detection utility (K1/K2/K3) -->
    <script src="assets/js/data-merger.js"></script><!-- JotForm + Qualtrics merger -->
    <script src="assets/js/cache-manager-ui.js"></script><!-- Cache UI controls -->
    <script src="assets/js/checking-system-filters.js"></script>
    <script src="assets/js/checking-system-router.js"></script>
    <script src="assets/js/checking-system-app.js"></script>

    <!-- Initialize Icons -->
    <script>
        if (typeof lucide !== 'undefined') lucide.createIcons();
    </script>
    <script>
      // Load background animation config and render
      (async () => {
        try {
          const response = await fetch('config/checking_system_config.json');
          const config = await response.json();

          if (config.backgroundAnimation) {
            const container = document.getElementById('background-circles');
            if (!container) return;

            let html = '<div class="fixed inset-0 pointer-events-none z-0">';

            // Add circles
            if (config.backgroundAnimation.circles) {
              config.backgroundAnimation.circles.forEach(circle => {
                const positionStyles = Object.entries(circle.position)
                  .map(([key, value]) => `${key}: ${value}`)
                  .join('; ');
                const sizeStyles = Object.entries(circle.size)
                  .map(([key, value]) => `${key}: ${value}`)
                  .join('; ');

                html += `<div class="absolute rounded-full border ${circle.animation}"
                         style="${positionStyles}; ${sizeStyles};
                                border-color: ${circle.color};
                                animation-duration: ${circle.animationDuration};
                                animation-delay: ${circle.animationDelay};"></div>`;
              });
            }

            // Add blobs
            if (config.backgroundAnimation.blobs) {
              config.backgroundAnimation.blobs.forEach(blob => {
                const positionStyles = Object.entries(blob.position)
                  .map(([key, value]) => `${key}: ${value}`)
                  .join('; ');
                const sizeStyles = Object.entries(blob.size)
                  .map(([key, value]) => `${key}: ${value}`)
                  .join('; ');

                html += `<div class="absolute rounded-full"
                         style="${positionStyles}; ${sizeStyles};
                                background-color: ${blob.color};
                                filter: blur(${blob.blur});"></div>`;
              });
            }

            html += '</div>';
            container.innerHTML = html;
          }
        } catch (error) {
          console.error('[CheckingSystemHome] Failed to load background animation config:', error);
        }
      })();
    </script>
</body>
</html>