|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
|
|
<title>Sanctissi-Missa - Modern Architecture</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
} |
|
|
.mermaid { |
|
|
background-color: #1e293b; |
|
|
padding: 1rem; |
|
|
border-radius: 0.5rem; |
|
|
overflow-x: auto; |
|
|
} |
|
|
.mermaid text { |
|
|
fill: white !important; |
|
|
} |
|
|
.feature-box { |
|
|
@apply p-4 border rounded-lg shadow-sm hover:shadow-md transition-shadow; |
|
|
} |
|
|
.feature-title { |
|
|
@apply font-semibold text-lg; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-white"> |
|
|
|
|
|
|
|
|
<header class="bg-gray-800 text-white p-6 shadow-md"> |
|
|
<div class="container mx-auto"> |
|
|
<h1 class="text-3xl font-bold">Sanctissi-Missa - Modern Architecture</h1> |
|
|
<p class="text-sm mt-1">©2025 Robin L. M. Cheung, MBA</p> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="container mx-auto p-6 space-y-10"> |
|
|
|
|
|
|
|
|
<section> |
|
|
<h2 class="text-2xl font-semibold mb-4">Repository Structure</h2> |
|
|
<p class="mb-4">The project is organized as a parent repository with two key submodules:</p> |
|
|
<pre class="bg-gray-800 p-4 rounded-lg overflow-x-auto"> |
|
|
sanctissi-missa/ |
|
|
├── reference/ # Original Divinum Officium (Perl) |
|
|
├── typescript-app/ # Modern TypeScript Implementation |
|
|
└── docs/ # Project Documentation |
|
|
</pre> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section> |
|
|
<h2 class="text-2xl font-semibold mb-4">Design Decisions</h2> |
|
|
<div class="space-y-4"> |
|
|
<div class="feature-box bg-gray-800 border-gray-700"> |
|
|
<h3 class="feature-title">Parent Repository Pattern</h3> |
|
|
<ul class="list-disc list-inside mt-2 space-y-1"> |
|
|
<li>Main repository serves as an organizational wrapper</li> |
|
|
<li>Maintains clear separation between reference and implementation</li> |
|
|
<li>Provides centralized documentation and project management</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="feature-box bg-gray-800 border-gray-700"> |
|
|
<h3 class="feature-title">Submodule Structure</h3> |
|
|
<ul class="list-disc list-inside mt-2 space-y-1"> |
|
|
<li><strong>Reference Implementation</strong> (<code>/reference</code>): Original Divinum Officium Perl codebase</li> |
|
|
<li><strong>TypeScript Implementation</strong> (<code>/typescript-app</code>): Clean-room implementation in TypeScript/React Native</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="feature-box bg-gray-800 border-gray-700"> |
|
|
<h3 class="feature-title">Clean Room Implementation</h3> |
|
|
<ul class="list-disc list-inside mt-2 space-y-1"> |
|
|
<li>Complete separation from original codebase</li> |
|
|
<li>Independent development approach</li> |
|
|
<li>Modern architectural patterns</li> |
|
|
<li>TypeScript/React Native stack</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section> |
|
|
<h2 class="text-2xl font-semibold mb-4">Educational Layer Architecture</h2> |
|
|
<div class="mermaid"> |
|
|
graph TB |
|
|
subgraph "Content Types" |
|
|
Quick[Quick Definitions] |
|
|
Detail[Detailed Explanations] |
|
|
History[Historical Context] |
|
|
Spirit[Spiritual Significance] |
|
|
Latin[Latin Insights] |
|
|
Audio[Pronunciations] |
|
|
end |
|
|
|
|
|
subgraph "Access Methods" |
|
|
Tap[Tap/Click] |
|
|
Hover[Hover States] |
|
|
Search[Quick Search] |
|
|
Index[Reference Index] |
|
|
end |
|
|
|
|
|
subgraph "Display Methods" |
|
|
Tooltip[Interactive Tooltips] |
|
|
Panel[Side Panels] |
|
|
Sheet[Bottom Sheets] |
|
|
Drawer[Reference Drawer] |
|
|
end |
|
|
|
|
|
subgraph "Knowledge Levels" |
|
|
Basic[Basic Introduction] |
|
|
Inter[Intermediate] |
|
|
Adv[Advanced Theology] |
|
|
Lang[Language Details] |
|
|
end |
|
|
|
|
|
Quick --> Tooltip |
|
|
Detail --> Panel |
|
|
History --> Drawer |
|
|
Spirit --> Sheet |
|
|
Latin --> Panel |
|
|
Audio --> Tooltip |
|
|
|
|
|
Tap --> Quick |
|
|
Hover --> Detail |
|
|
Search --> Index |
|
|
Index --> All[All Content] |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section> |
|
|
<h2 class="text-2xl font-semibold mb-4">Educational Features Checklist</h2> |
|
|
<table class="min-w-full bg-gray-800 border border-gray-700 rounded-lg overflow-hidden"> |
|
|
<thead class="bg-gray-700"> |
|
|
<tr> |
|
|
<th class="px-4 py-2 text-left">Feature</th> |
|
|
<th class="px-4 py-2 text-left">Status</th> |
|
|
<th class="px-4 py-2 text-left">Rationale</th> |
|
|
<th class="px-4 py-2 text-left">Priority</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="divide-y divide-gray-700"> |
|
|
<tr> |
|
|
<td class="px-4 py-2">Interactive Terms</td> |
|
|
<td class="px-4 py-2">🔲</td> |
|
|
<td class="px-4 py-2">Enable quick understanding of Latin terms</td> |
|
|
<td class="px-4 py-2">High</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-2">Saint Information</td> |
|
|
<td class="px-4 py-2">🔲</td> |
|
|
<td class="px-4 py-2">Provide context for feast days</td> |
|
|
<td class="px-4 py-2">High</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-2">Liturgical Explanations</td> |
|
|
<td class="px-4 py-2">🔲</td> |
|
|
<td class="px-4 py-2">Clarify ritual significance</td> |
|
|
<td class="px-4 py-2">High</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-2">Latin Insights</td> |
|
|
<td class="px-4 py-2">🔲</td> |
|
|
<td class="px-4 py-2">Bridge language understanding</td> |
|
|
<td class="px-4 py-2">High</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="text-center text-sm text-gray-500 mt-10"> |
|
|
©2025 Robin L. M. Cheung, MBA. All rights reserved. |
|
|
</footer> |
|
|
</main> |
|
|
|
|
|
<script> |
|
|
mermaid.initialize({ startOnLoad: true }); |
|
|
</script> |
|
|
<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-qwensite.hf.space/logo.svg" alt="qwensite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-qwensite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >QwenSite</a> - 🧬 <a href="https://enzostvs-qwensite.hf.space?remix=RobinsAIWorld/hello-word-infosite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
