Hugging Face's logo

Spaces:
RobinsAIWorld
/
sanctissimissa
Running

App Files Community
RobinsAIWorld commited on
Commit
c6910c2
·
verified ·
1 Parent(s): bd48be1

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +698 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Sanctissimissa Infosite
3
- emoji: 👁
4
- colorFrom: red
5
- colorTo: pink
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: sanctissimissa-infosite
3
+ emoji: 🐳
4
+ colorFrom: purple
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,698 @@
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>Sanctissi Missa Architecture</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ liturgical: {
15
+ 50: '#f8fafc',
16
+ 100: '#f1f5f9',
17
+ 200: '#e2e8f0',
18
+ 300: '#cbd5e1',
19
+ 400: '#94a3b8',
20
+ 500: '#64748b',
21
+ 600: '#475569',
22
+ 700: '#334155',
23
+ 800: '#1e293b',
24
+ 900: '#0f172a',
25
+ purple: '#4C1D95',
26
+ gold: '#D4AF37',
27
+ red: '#B91C1C',
28
+ blue: '#1D4ED8'
29
+ }
30
+ }
31
+ }
32
+ }
33
+ }
34
+ </script>
35
+ <style>
36
+ @import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@300;400;600&family=Source+Sans+Pro:wght@300;400;600&display=swap');
37
+
38
+ body {
39
+ font-family: 'Source Sans Pro', sans-serif;
40
+ background-color: #f8fafc;
41
+ }
42
+
43
+ h1, h2, h3, h4 {
44
+ font-family: 'Crimson Pro', serif;
45
+ color: #1e293b;
46
+ }
47
+
48
+ .diagram-container {
49
+ position: relative;
50
+ overflow: auto;
51
+ padding: 2rem;
52
+ background-color: white;
53
+ border-radius: 0.75rem;
54
+ box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
55
+ }
56
+
57
+ .diagram-grid {
58
+ display: grid;
59
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
60
+ gap: 1.5rem;
61
+ }
62
+
63
+ .diagram-node {
64
+ padding: 1.5rem;
65
+ border-radius: 0.5rem;
66
+ position: relative;
67
+ transition: all 0.3s ease;
68
+ }
69
+
70
+ .diagram-node:hover {
71
+ transform: translateY(-5px);
72
+ box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
73
+ }
74
+
75
+ .connector {
76
+ position: absolute;
77
+ background-color: #cbd5e1;
78
+ z-index: -1;
79
+ }
80
+
81
+ .connector.horizontal {
82
+ height: 2px;
83
+ }
84
+
85
+ .connector.vertical {
86
+ width: 2px;
87
+ }
88
+
89
+ .feature-card {
90
+ transition: all 0.3s ease;
91
+ cursor: pointer;
92
+ }
93
+
94
+ .feature-card:hover {
95
+ transform: scale(1.02);
96
+ box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
97
+ }
98
+
99
+ .interactive-term {
100
+ position: relative;
101
+ display: inline-block;
102
+ cursor: pointer;
103
+ border-bottom: 1px dashed #4C1D95;
104
+ color: #4C1D95;
105
+ }
106
+
107
+ .tooltip {
108
+ visibility: hidden;
109
+ position: absolute;
110
+ z-index: 100;
111
+ bottom: 125%;
112
+ left: 50%;
113
+ transform: translateX(-50%);
114
+ padding: 0.5rem;
115
+ background-color: #1e293b;
116
+ color: white;
117
+ border-radius: 0.25rem;
118
+ font-size: 0.875rem;
119
+ white-space: nowrap;
120
+ opacity: 0;
121
+ transition: opacity 0.3s;
122
+ }
123
+
124
+ .interactive-term:hover .tooltip {
125
+ visibility: visible;
126
+ opacity: 1;
127
+ }
128
+
129
+ .sidebar {
130
+ scrollbar-width: thin;
131
+ scrollbar-color: #cbd5e1 #f1f5f9;
132
+ }
133
+
134
+ .sidebar::-webkit-scrollbar {
135
+ width: 6px;
136
+ }
137
+
138
+ .sidebar::-webkit-scrollbar-track {
139
+ background: #f1f5f9;
140
+ }
141
+
142
+ .sidebar::-webkit-scrollbar-thumb {
143
+ background-color: #cbd5e1;
144
+ border-radius: 3px;
145
+ }
146
+
147
+ @media (max-width: 768px) {
148
+ .diagram-grid {
149
+ grid-template-columns: 1fr;
150
+ }
151
+ }
152
+ </style>
153
+ </head>
154
+ <body class="bg-liturgical-50">
155
+ <!-- Header -->
156
+ <header class="bg-white shadow-md sticky top-0 z-50">
157
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
158
+ <div class="flex items-center">
159
+ <div class="bg-liturgical-purple text-white p-2 rounded-lg mr-3">
160
+ <i class="fas fa-church text-xl"></i>
161
+ </div>
162
+ <div>
163
+ <h1 class="text-xl font-bold text-liturgical-800">Sanctissi Missa</h1>
164
+ <p class="text-sm text-liturgical-500">Modern Architecture Documentation</p>
165
+ </div>
166
+ </div>
167
+ <div class="flex items-center space-x-4">
168
+ <button class="bg-liturgical-purple text-white px-4 py-2 rounded-lg hover:bg-liturgical-900 transition">
169
+ <i class="fas fa-download mr-2"></i>Export PDF
170
+ </button>
171
+ <button id="theme-toggle" class="p-2 rounded-full bg-liturgical-100 hover:bg-liturgical-200">
172
+ <i class="fas fa-moon text-liturgical-800"></i>
173
+ </button>
174
+ </div>
175
+ </div>
176
+ </header>
177
+
178
+ <div class="container mx-auto px-4 py-8 flex flex-col lg:flex-row">
179
+ <!-- Sidebar Navigation -->
180
+ <nav class="lg:w-64 lg:pr-6 mb-8 lg:mb-0">
181
+ <div class="bg-white rounded-lg shadow p-4 sidebar overflow-y-auto max-h-[calc(100vh-5rem)] sticky top-24">
182
+ <h3 class="font-bold text-lg mb-4 text-liturgical-800">Documentation Sections</h3>
183
+ <ul class="space-y-2">
184
+ <li><a href="#overview" class="block py-2 px-3 rounded hover:bg-liturgical-100 text-liturgical-700">Overview</a></li>
185
+ <li><a href="#repository-structure" class="block py-2 px-3 rounded hover:bg-liturgical-100 text-liturgical-700">Repository Structure</a></li>
186
+ <li><a href="#design-decisions" class="block py-2 px-3 rounded hover:bg-liturgical-100 text-liturgical-700">Design Decisions</a></li>
187
+ <li><a href="#implementation-details" class="block py-2 px-3 rounded hover:bg-liturgical-100 text-liturgical-700">Implementation Details</a></li>
188
+ <li><a href="#educational-architecture" class="block py-2 px-3 rounded hover:bg-liturgical-100 text-liturgical-700">Educational Architecture</a></li>
189
+ <li><a href="#content-structure" class="block py-2 px-3 rounded hover:bg-liturgical-100 text-liturgical-700">Content Structure</a></li>
190
+ <li><a href="#interactive-elements" class="block py-2 px-3 rounded hover:bg-liturgical-100 text-liturgical-700">Interactive Elements</a></li>
191
+ <li><a href="#features-checklist" class="block py-2 px-3 rounded hover:bg-liturgical-100 text-liturgical-700">Features Checklist</a></li>
192
+ <li><a href="#technical-implementation" class="block py-2 px-3 rounded hover:bg-liturgical-100 text-liturgical-700">Technical Implementation</a></li>
193
+ <li><a href="#ux-guidelines" class="block py-2 px-3 rounded hover:bg-liturgical-100 text-liturgical-700">UX Guidelines</a></li>
194
+ <li><a href="#performance" class="block py-2 px-3 rounded hover:bg-liturgical-100 text-liturgical-700">Performance</a></li>
195
+ </ul>
196
+
197
+ <div class="mt-8 pt-6 border-t border-liturgical-200">
198
+ <h3 class="font-bold text-lg mb-4 text-liturgical-800">Quick Links</h3>
199
+ <div class="space-y-3">
200
+ <a href="#" class="flex items-center text-liturgical-700 hover:text-liturgical-900">
201
+ <i class="fas fa-code-branch mr-2 text-liturgical-purple"></i>
202
+ <span>GitHub Repository</span>
203
+ </a>
204
+ <a href="#" class="flex items-center text-liturgical-700 hover:text-liturgical-900">
205
+ <i class="fas fa-book mr-2 text-liturgical-purple"></i>
206
+ <span>API Documentation</span>
207
+ </a>
208
+ <a href="#" class="flex items-center text-liturgical-700 hover:text-liturgical-900">
209
+ <i class="fas fa-file-contract mr-2 text-liturgical-purple"></i>
210
+ <span>License Information</span>
211
+ </a>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ </nav>
216
+
217
+ <!-- Main Content -->
218
+ <main class="flex-1">
219
+ <!-- Overview Section -->
220
+ <section id="overview" class="mb-12">
221
+ <div class="bg-white rounded-lg shadow p-6">
222
+ <div class="flex items-center mb-6">
223
+ <div class="bg-liturgical-purple text-white p-3 rounded-lg mr-4">
224
+ <i class="fas fa-layer-group text-2xl"></i>
225
+ </div>
226
+ <h2 class="text-2xl font-bold text-liturgical-800">Project Overview</h2>
227
+ </div>
228
+
229
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
230
+ <div class="bg-liturgical-50 p-4 rounded-lg border border-liturgical-200">
231
+ <h3 class="font-bold text-lg mb-2 text-liturgical-800">Modern Implementation</h3>
232
+ <p class="text-liturgical-600">Clean-room implementation in TypeScript/React Native with modern architectural patterns.</p>
233
+ </div>
234
+ <div class="bg-liturgical-50 p-4 rounded-lg border border-liturgical-200">
235
+ <h3 class="font-bold text-lg mb-2 text-liturgical-800">Educational Focus</h3>
236
+ <p class="text-liturgical-600">Comprehensive educational layer to enhance understanding of the Traditional Latin Mass.</p>
237
+ </div>
238
+ <div class="bg-liturgical-50 p-4 rounded-lg border border-liturgical-200">
239
+ <h3 class="font-bold text-lg mb-2 text-liturgical-800">Clear Separation</h3>
240
+ <p class="text-liturgical-600">Maintains strict boundaries between reference implementation and modern rewrite.</p>
241
+ </div>
242
+ </div>
243
+
244
+ <div class="bg-liturgical-900 text-white rounded-lg p-6">
245
+ <div class="flex items-start">
246
+ <i class="fas fa-info-circle text-2xl mt-1 mr-3 text-liturgical-gold"></i>
247
+ <div>
248
+ <h3 class="text-xl font-bold mb-2">Architectural Philosophy</h3>
249
+ <p>This architecture ensures clear separation between the reference implementation and our modern rewrite, maintaining proper licensing boundaries while enabling efficient development of a TypeScript/React Native application with comprehensive educational features.</p>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </section>
255
+
256
+ <!-- Repository Structure -->
257
+ <section id="repository-structure" class="mb-12">
258
+ <div class="bg-white rounded-lg shadow p-6">
259
+ <div class="flex items-center mb-6">
260
+ <div class="bg-liturgical-purple text-white p-3 rounded-lg mr-4">
261
+ <i class="fas fa-folder-tree text-2xl"></i>
262
+ </div>
263
+ <h2 class="text-2xl font-bold text-liturgical-800">Repository Structure</h2>
264
+ </div>
265
+
266
+ <div class="mb-6">
267
+ <h3 class="text-xl font-semibold mb-4 text-liturgical-700">Project Organization</h3>
268
+ <div class="bg-liturgical-50 p-4 rounded-lg font-mono text-sm overflow-x-auto">
269
+ sanctissi-missa/<br>
270
+ ├── <span class="text-liturgical-purple font-bold">reference/</span> # Original Divinum Officium (Perl)<br>
271
+ ├── <span class="text-liturgical-blue font-bold">typescript-app/</span> # Modern TypeScript Implementation<br>
272
+ └── <span class="text-liturgical-red font-bold">docs/</span> # Project Documentation
273
+ </div>
274
+ </div>
275
+
276
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
277
+ <div class="border border-liturgical-200 rounded-lg overflow-hidden">
278
+ <div class="bg-liturgical-purple text-white p-3 font-bold">
279
+ <i class="fas fa-code mr-2"></i>Reference Implementation
280
+ </div>
281
+ <div class="p-4">
282
+ <ul class="list-disc pl-5 space-y-2 text-liturgical-700">
283
+ <li>Original Divinum Officium Perl codebase</li>
284
+ <li>Used solely as functional reference</li>
285
+ <li>Maintains clear licensing boundaries</li>
286
+ </ul>
287
+ </div>
288
+ </div>
289
+
290
+ <div class="border border-liturgical-200 rounded-lg overflow-hidden">
291
+ <div class="bg-liturgical-blue text-white p-3 font-bold">
292
+ <i class="fab fa-react mr-2"></i>TypeScript Implementation
293
+ </div>
294
+ <div class="p-4">
295
+ <ul class="list-disc pl-5 space-y-2 text-liturgical-700">
296
+ <li>Clean-room implementation</li>
297
+ <li>TypeScript/React Native stack</li>
298
+ <li>Modern development practices</li>
299
+ </ul>
300
+ </div>
301
+ </div>
302
+
303
+ <div class="border border-liturgical-200 rounded-lg overflow-hidden">
304
+ <div class="bg-liturgical-red text-white p-3 font-bold">
305
+ <i class="fas fa-book mr-2"></i>Documentation
306
+ </div>
307
+ <div class="p-4">
308
+ <ul class="list-disc pl-5 space-y-2 text-liturgical-700">
309
+ <li>Centralized documentation</li>
310
+ <li>Architectural guidelines</li>
311
+ <li>Development standards</li>
312
+ </ul>
313
+ </div>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ </section>
318
+
319
+ <!-- Design Decisions -->
320
+ <section id="design-decisions" class="mb-12">
321
+ <div class="bg-white rounded-lg shadow p-6">
322
+ <div class="flex items-center mb-6">
323
+ <div class="bg-liturgical-purple text-white p-3 rounded-lg mr-4">
324
+ <i class="fas fa-pencil-ruler text-2xl"></i>
325
+ </div>
326
+ <h2 class="text-2xl font-bold text-liturgical-800">Design Decisions</h2>
327
+ </div>
328
+
329
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
330
+ <div class="bg-liturgical-50 p-5 rounded-lg border border-liturgical-200">
331
+ <div class="flex items-start mb-3">
332
+ <div class="bg-liturgical-purple text-white p-2 rounded mr-3">
333
+ <i class="fas fa-sitemap"></i>
334
+ </div>
335
+ <h3 class="text-lg font-bold text-liturgical-800">Parent Repository Pattern</h3>
336
+ </div>
337
+ <p class="text-liturgical-700">Main repository serves as an organizational wrapper maintaining clear separation between reference and implementation while providing centralized documentation.</p>
338
+ </div>
339
+
340
+ <div class="bg-liturgical-50 p-5 rounded-lg border border-liturgical-200">
341
+ <div class="flex items-start mb-3">
342
+ <div class="bg-liturgical-blue text-white p-2 rounded mr-3">
343
+ <i class="fas fa-project-diagram"></i>
344
+ </div>
345
+ <h3 class="text-lg font-bold text-liturgical-800">Submodule Structure</h3>
346
+ </div>
347
+ <p class="text-liturgical-700">Clear separation between reference implementation and modern TypeScript application with independent, non-derivative codebase.</p>
348
+ </div>
349
+
350
+ <div class="bg-liturgical-50 p-5 rounded-lg border border-liturgical-200">
351
+ <div class="flex items-start mb-3">
352
+ <div class="bg-liturgical-gold text-white p-2 rounded mr-3">
353
+ <i class="fas fa-broom"></i>
354
+ </div>
355
+ <h3 class="text-lg font-bold text-liturgical-800">Clean Room Implementation</h3>
356
+ </div>
357
+ <p class="text-liturgical-700">Complete separation from original codebase with independent development approach using modern architectural patterns.</p>
358
+ </div>
359
+
360
+ <div class="bg-liturgical-50 p-5 rounded-lg border border-liturgical-200">
361
+ <div class="flex items-start mb-3">
362
+ <div class="bg-liturgical-red text-white p-2 rounded mr-3">
363
+ <i class="fas fa-file-alt"></i>
364
+ </div>
365
+ <h3 class="text-lg font-bold text-liturgical-800">Documentation Strategy</h3>
366
+ </div>
367
+ <p class="text-liturgical-700">Centralized documentation with clear architectural guidelines, development standards, and comprehensive API documentation.</p>
368
+ </div>
369
+ </div>
370
+
371
+ <div class="bg-liturgical-100 border-l-4 border-liturgical-purple p-4 rounded">
372
+ <div class="flex">
373
+ <div class="flex-shrink-0">
374
+ <i class="fas fa-exclamation-circle text-liturgical-purple text-xl mt-1 mr-3"></i>
375
+ </div>
376
+ <div>
377
+ <h3 class="font-bold text-liturgical-800">Critical Design Principle</h3>
378
+ <p class="text-liturgical-700">Maintain strict separation between reference and implementation to preserve licensing boundaries while enabling modern development practices.</p>
379
+ </div>
380
+ </div>
381
+ </div>
382
+ </div>
383
+ </section>
384
+
385
+ <!-- Educational Architecture -->
386
+ <section id="educational-architecture" class="mb-12">
387
+ <div class="bg-white rounded-lg shadow p-6">
388
+ <div class="flex items-center mb-6">
389
+ <div class="bg-liturgical-purple text-white p-3 rounded-lg mr-4">
390
+ <i class="fas fa-graduation-cap text-2xl"></i>
391
+ </div>
392
+ <h2 class="text-2xl font-bold text-liturgical-800">Educational Layer Architecture</h2>
393
+ </div>
394
+
395
+ <div class="diagram-container mb-8">
396
+ <div class="diagram-grid">
397
+ <!-- Content Types -->
398
+ <div class="diagram-node bg-liturgical-purple text-white">
399
+ <h3 class="font-bold text-lg mb-2">Content Types</h3>
400
+ <ul class="text-sm">
401
+ <li class="flex items-center mb-1"><i class="fas fa-bolt mr-2"></i> Quick Definitions</li>
402
+ <li class="flex items-center mb-1"><i class="fas fa-file-alt mr-2"></i> Detailed Explanations</li>
403
+ <li class="flex items-center mb-1"><i class="fas fa-landmark mr-2"></i> Historical Context</li>
404
+ <li class="flex items-center mb-1"><i class="fas fa-pray mr-2"></i> Spiritual Significance</li>
405
+ <li class="flex items-center mb-1"><i class="fas fa-language mr-2"></i> Latin Insights</li>
406
+ <li class="flex items-center"><i class="fas fa-volume-up mr-2"></i> Pronunciations</li>
407
+ </ul>
408
+ </div>
409
+
410
+ <!-- Access Methods -->
411
+ <div class="diagram-node bg-liturgical-blue text-white">
412
+ <h3 class="font-bold text-lg mb-2">Access Methods</h3>
413
+ <ul class="text-sm">
414
+ <li class="flex items-center mb-1"><i class="fas fa-hand-pointer mr-2"></i> Tap/Click</li>
415
+ <li class="flex items-center mb-1"><i class="fas fa-mouse-pointer mr-2"></i> Hover States</li>
416
+ <li class="flex items-center mb-1"><i class="fas fa-search mr-2"></i> Quick Search</li>
417
+ <li class="flex items-center"><i class="fas fa-bookmark mr-2"></i> Reference Index</li>
418
+ </ul>
419
+ </div>
420
+
421
+ <!-- Display Methods -->
422
+ <div class="diagram-node bg-liturgical-gold text-white">
423
+ <h3 class="font-bold text-lg mb-2">Display Methods</h3>
424
+ <ul class="text-sm">
425
+ <li class="flex items-center mb-1"><i class="fas fa-comment-alt mr-2"></i> Interactive Tooltips</li>
426
+ <li class="flex items-center mb-1"><i class="fas fa-columns mr-2"></i> Side Panels</li>
427
+ <li class="flex items-center mb-1"><i class="fas fa-window-restore mr-2"></i> Bottom Sheets</li>
428
+ <li class="flex items-center"><i class="fas fa-book-open mr-2"></i> Reference Drawer</li>
429
+ </ul>
430
+ </div>
431
+
432
+ <!-- Knowledge Levels -->
433
+ <div class="diagram-node bg-liturgical-red text-white">
434
+ <h3 class="font-bold text-lg mb-2">Knowledge Levels</h3>
435
+ <ul class="text-sm">
436
+ <li class="flex items-center mb-1"><i class="fas fa-star mr-2"></i> Basic Introduction</li>
437
+ <li class="flex items-center mb-1"><i class="fas fa-star-half-alt mr-2"></i> Intermediate</li>
438
+ <li class="flex items-center mb-1"><i class="fas fa-stars mr-2"></i> Advanced Theology</li>
439
+ <li class="flex items-center"><i class="fas fa-language mr-2"></i> Language Details</li>
440
+ </ul>
441
+ </div>
442
+ </div>
443
+ </div>
444
+
445
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
446
+ <div>
447
+ <h3 class="text-xl font-semibold mb-4 text-liturgical-800">Content-Display Relationships</h3>
448
+ <ul class="bg-liturgical-50 p-4 rounded-lg">
449
+ <li class="mb-2 flex items-center">
450
+ <span class="bg-liturgical-purple text-white px-2 py-1 rounded mr-2">Quick</span>
451
+ <i class="fas fa-arrow-right mx-2 text-liturgical-500"></i>
452
+ <span class="bg-liturgical-gold text-white px-2 py-1 rounded">Tooltip</span>
453
+ </li>
454
+ <li class="mb-2 flex items-center">
455
+ <span class="bg-liturgical-purple text-white px-2 py-1 rounded mr-2">Detail</span>
456
+ <i class="fas fa-arrow-right mx-2 text-liturgical-500"></i>
457
+ <span class="bg-liturgical-gold text-white px-2 py-1 rounded">Panel</span>
458
+ </li>
459
+ <li class="mb-2 flex items-center">
460
+ <span class="bg-liturgical-purple text-white px-2 py-1 rounded mr-2">History</span>
461
+ <i class="fas fa-arrow-right mx-2 text-liturgical-500"></i>
462
+ <span class="bg-liturgical-gold text-white px-2 py-1 rounded">Drawer</span>
463
+ </li>
464
+ <li class="flex items-center">
465
+ <span class="bg-liturgical-purple text-white px-2 py-1 rounded mr-2">Spirit</span>
466
+ <i class="fas fa-arrow-right mx-2 text-liturgical-500"></i>
467
+ <span class="bg-liturgical-gold text-white px-2 py-1 rounded">Sheet</span>
468
+ </li>
469
+ </ul>
470
+ </div>
471
+
472
+ <div>
473
+ <h3 class="text-xl font-semibold mb-4 text-liturgical-800">Access-Content Relationships</h3>
474
+ <ul class="bg-liturgical-50 p-4 rounded-lg">
475
+ <li class="mb-2 flex items-center">
476
+ <span class="bg-liturgical-blue text-white px-2 py-1 rounded mr-2">Tap</span>
477
+ <i class="fas fa-arrow-right mx-2 text-liturgical-500"></i>
478
+ <span class="bg-liturgical-purple text-white px-2 py-1 rounded">Quick</span>
479
+ </li>
480
+ <li class="mb-2 flex items-center">
481
+ <span class="bg-liturgical-blue text-white px-2 py-1 rounded mr-2">Hover</span>
482
+ <i class="fas fa-arrow-right mx-2 text-liturgical-500"></i>
483
+ <span class="bg-liturgical-purple text-white px-2 py-1 rounded">Detail</span>
484
+ </li>
485
+ <li class="mb-2 flex items-center">
486
+ <span class="bg-liturgical-blue text-white px-2 py-1 rounded mr-2">Search</span>
487
+ <i class="fas fa-arrow-right mx-2 text-liturgical-500"></i>
488
+ <span class="bg-liturgical-blue text-white px-2 py-1 rounded">Index</span>
489
+ </li>
490
+ <li class="flex items-center">
491
+ <span class="bg-liturgical-blue text-white px-2 py-1 rounded mr-2">Index</span>
492
+ <i class="fas fa-arrow-right mx-2 text-liturgical-500"></i>
493
+ <span class="bg-liturgical-purple text-white px-2 py-1 rounded">All Content</span>
494
+ </li>
495
+ </ul>
496
+ </div>
497
+ </div>
498
+ </div>
499
+ </section>
500
+
501
+ <!-- Features Checklist -->
502
+ <section id="features-checklist" class="mb-12">
503
+ <div class="bg-white rounded-lg shadow p-6">
504
+ <div class="flex items-center mb-6">
505
+ <div class="bg-liturgical-purple text-white p-3 rounded-lg mr-4">
506
+ <i class="fas fa-tasks text-2xl"></i>
507
+ </div>
508
+ <h2 class="text-2xl font-bold text-liturgical-800">Educational Features Checklist</h2>
509
+ </div>
510
+
511
+ <div class="mb-8">
512
+ <h3 class="text-xl font-semibold mb-4 text-liturgical-800 border-b pb-2">Content Accessibility</h3>
513
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
514
+ <div class="feature-card bg-liturgical-50 p-4 rounded-lg border border-liturgical-200">
515
+ <div class="flex justify-between items-start mb-2">
516
+ <h4 class="font-bold text-liturgical-800">Interactive Terms</h4>
517
+ <div class="bg-liturgical-purple text-white px-2 py-1 rounded text-xs">High Priority</div>
518
+ </div>
519
+ <p class="text-sm text-liturgical-600 mb-3">Enable quick understanding of Latin terms</p>
520
+ <div class="flex items-center">
521
+ <div class="w-8 h-8 rounded-full bg-liturgical-200 flex items-center justify-center">
522
+ <i class="fas fa-check text-liturgical-800"></i>
523
+ </div>
524
+ <span class="ml-2 text-sm text-liturgical-700">Implemented</span>
525
+ </div>
526
+ </div>
527
+
528
+ <div class="feature-card bg-liturgical-50 p-4 rounded-lg border border-liturgical-200">
529
+ <div class="flex justify-between items-start mb-2">
530
+ <h4 class="font-bold text-liturgical-800">Saint Information</h4>
531
+ <div class="bg-liturgical-purple text-white px-2 py-1 rounded text-xs">High Priority</div>
532
+ </div>
533
+ <p class="text-sm text-liturgical-600 mb-3">Provide context for feast days</p>
534
+ <div class="flex items-center">
535
+ <div class="w-8 h-8 rounded-full bg-liturgical-200 flex items-center justify-center">
536
+ <i class="fas fa-check text-liturgical-800"></i>
537
+ </div>
538
+ <span class="ml-2 text-sm text-liturgical-700">Implemented</span>
539
+ </div>
540
+ </div>
541
+
542
+ <div class="feature-card bg-liturgical-50 p-4 rounded-lg border border-liturgical-200">
543
+ <div class="flex justify-between items-start mb-2">
544
+ <h4 class="font-bold text-liturgical-800">Liturgical Explanations</h4>
545
+ <div class="bg-liturgical-purple text-white px-2 py-1 rounded text-xs">High Priority</div>
546
+ </div>
547
+ <p class="text-sm text-liturgical-600 mb-3">Clarify ritual significance</p>
548
+ <div class="flex items-center">
549
+ <div class="w-8 h-8 rounded-full bg-liturgical-200 flex items-center justify-center">
550
+ <i class="fas fa-spinner text-liturgical-800"></i>
551
+ </div>
552
+ <span class="ml-2 text-sm text-liturgical-700">In Progress</span>
553
+ </div>
554
+ </div>
555
+
556
+ <div class="feature-card bg-liturgical-50 p-4 rounded-lg border border-liturgical-200">
557
+ <div class="flex justify-between items-start mb-2">
558
+ <h4 class="font-bold text-liturgical-800">Latin Insights</h4>
559
+ <div class="bg-liturgical-purple text-white px-2 py-1 rounded text-xs">High Priority</div>
560
+ </div>
561
+ <p class="text-sm text-liturgical-600 mb-3">Bridge language understanding</p>
562
+ <div class="flex items-center">
563
+ <div class="w-8 h-8 rounded-full bg-liturgical-200 flex items-center justify-center">
564
+ <i class="fas fa-spinner text-liturgical-800"></i>
565
+ </div>
566
+ <span class="ml-2 text-sm text-liturgical-700">In Progress</span>
567
+ </div>
568
+ </div>
569
+ </div>
570
+ </div>
571
+
572
+ <div class="mb-8">
573
+ <h3 class="text-xl font-semibold mb-4 text-liturgical-800 border-b pb-2">User Interface Elements</h3>
574
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
575
+ <div class="feature-card bg-liturgical-50 p-4 rounded-lg border border-liturgical-200">
576
+ <div class="flex justify-between items-start mb-2">
577
+ <h4 class="font-bold text-liturgical-800">Tooltip System</h4>
578
+ <div class="bg-liturgical-purple text-white px-2 py-1 rounded text-xs">High Priority</div>
579
+ </div>
580
+ <p class="text-sm text-liturgical-600 mb-3">Quick access to definitions</p>
581
+ <div class="flex items-center">
582
+ <div class="w-8 h-8 rounded-full bg-liturgical-200 flex items-center justify-center">
583
+ <i class="fas fa-check text-liturgical-800"></i>
584
+ </div>
585
+ <span class="ml-2 text-sm text-liturgical-700">Implemented</span>
586
+ </div>
587
+ </div>
588
+
589
+ <div class="feature-card bg-liturgical-50 p-4 rounded-lg border border-liturgical-200">
590
+ <div class="flex justify-between items-start mb-2">
591
+ <h4 class="font-bold text-liturgical-800">Side Panel</h4>
592
+ <div class="bg-liturgical-purple text-white px-2 py-1 rounded text-xs">High Priority</div>
593
+ </div>
594
+ <p class="text-sm text-liturgical-600 mb-3">Detailed explanations</p>
595
+ <div class="flex items-center">
596
+ <div class="w-8 h-8 rounded-full bg-liturgical-200 flex items-center justify-center">
597
+ <i class="fas fa-check text-liturgical-800"></i>
598
+ </div>
599
+ <span class="ml-2 text-sm text-liturgical-700">Implemented</span>
600
+ </div>
601
+ </div>
602
+
603
+ <div class="feature-card bg-liturgical-50 p-4 rounded-lg border border-liturgical-200">
604
+ <div class="flex justify-between items-start mb-2">
605
+ <h4 class="font-bold text-liturgical-800">Bottom Sheet</h4>
606
+ <div class="bg-liturgical-purple text-white px-2 py-1 rounded text-xs">High Priority</div>
607
+ </div>
608
+ <p class="text-sm text-liturgical-600 mb-3">Mobile-friendly deep dives</p>
609
+ <div class="flex items-center">
610
+ <div class="w-8 h-8 rounded-full bg-liturgical-200 flex items-center justify-center">
611
+ <i class="fas fa-spinner text-liturgical-800"></i>
612
+ </div>
613
+ <span class="ml-2 text-sm text-liturgical-700">In Progress</span>
614
+ </div>
615
+ </div>
616
+
617
+ <div class="feature-card bg-liturgical-50 p-4 rounded-lg border border-liturgical-200">
618
+ <div class="flex justify-between items-start mb-2">
619
+ <h4 class="font-bold text-liturgical-800">Reference Drawer</h4>
620
+ <div class="bg-liturgical-600 text-white px-2 py-1 rounded text-xs">Medium Priority</div>
621
+ </div>
622
+ <p class="text-sm text-liturgical-600 mb-3">Comprehensive resource access</p>
623
+ <div class="flex items-center">
624
+ <div class="w-8 h-8 rounded-full bg-liturgical-200 flex items-center justify-center">
625
+ <i class="fas fa-circle-notch text-liturgical-800"></i>
626
+ </div>
627
+ <span class="ml-2 text-sm text-liturgical-700">Planned</span>
628
+ </div>
629
+ </div>
630
+ </div>
631
+ </div>
632
+ </div>
633
+ </section>
634
+
635
+ <!-- Footer -->
636
+ <footer class="mt-12 pt-8 border-t border-liturgical-200">
637
+ <div class="flex flex-col md:flex-row justify-between items-center">
638
+ <div class="mb-4 md:mb-0">
639
+ <div class="flex items-center">
640
+ <div class="bg-liturgical-purple text-white p-2 rounded-lg mr-3">
641
+ <i class="fas fa-church"></i>
642
+ </div>
643
+ <div>
644
+ <h3 class="font-bold text-lg text-liturgical-800">Sanctissi Missa</h3>
645
+ <p class="text-sm text-liturgical-600">Modern Architecture Documentation</p>
646
+ </div>
647
+ </div>
648
+ </div>
649
+ <div class="text-center md:text-right">
650
+ <p class="text-liturgical-600">Copyright (C)2025 Robin L. M. Cheung, MBA</p>
651
+ <p class="text-sm text-liturgical-500 mt-1">All rights reserved</p>
652
+ </div>
653
+ </div>
654
+ </footer>
655
+ </main>
656
+ </div>
657
+
658
+ <script>
659
+ // Interactive term tooltips
660
+ document.querySelectorAll('.interactive-term').forEach(term => {
661
+ term.addEventListener('click', function() {
662
+ const tooltip = this.querySelector('.tooltip');
663
+ tooltip.classList.toggle('hidden');
664
+ });
665
+ });
666
+
667
+ // Theme toggle
668
+ const themeToggle = document.getElementById('theme-toggle');
669
+ themeToggle.addEventListener('click', function() {
670
+ document.body.classList.toggle('dark');
671
+ const icon = themeToggle.querySelector('i');
672
+ if (document.body.classList.contains('dark')) {
673
+ document.body.classList.add('bg-gray-900', 'text-gray-100');
674
+ icon.classList.remove('fa-moon');
675
+ icon.classList.add('fa-sun');
676
+ } else {
677
+ document.body.classList.remove('bg-gray-900', 'text-gray-100');
678
+ icon.classList.remove('fa-sun');
679
+ icon.classList.add('fa-moon');
680
+ }
681
+ });
682
+
683
+ // Smooth scrolling for anchor links
684
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
685
+ anchor.addEventListener('click', function(e) {
686
+ e.preventDefault();
687
+ const target = document.querySelector(this.getAttribute('href'));
688
+ if (target) {
689
+ window.scrollTo({
690
+ top: target.offsetTop - 80,
691
+ behavior: 'smooth'
692
+ });
693
+ }
694
+ });
695
+ });
696
+ </script>
697
+ <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=RobinsAIWorld/sanctissimissa-infosite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
698
+ </html>