Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sanctissi Missa Architecture</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| liturgical: { | |
| 50: '#f8fafc', | |
| 100: '#f1f5f9', | |
| 200: '#e2e8f0', | |
| 300: '#cbd5e1', | |
| 400: '#94a3b8', | |
| 500: '#64748b', | |
| 600: '#475569', | |
| 700: '#334155', | |
| 800: '#1e293b', | |
| 900: '#0f172a', | |
| purple: '#4C1D95', | |
| gold: '#D4AF37', | |
| red: '#B91C1C', | |
| blue: '#1D4ED8' | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@300;400;600&family=Source+Sans+Pro:wght@300;400;600&display=swap'); | |
| body { | |
| font-family: 'Source Sans Pro', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| h1, h2, h3, h4 { | |
| font-family: 'Crimson Pro', serif; | |
| color: #1e293b; | |
| } | |
| .diagram-container { | |
| position: relative; | |
| overflow: auto; | |
| padding: 2rem; | |
| background-color: white; | |
| border-radius: 0.75rem; | |
| box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); | |
| } | |
| .diagram-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .diagram-node { | |
| padding: 1.5rem; | |
| border-radius: 0.5rem; | |
| position: relative; | |
| transition: all 0.3s ease; | |
| } | |
| .diagram-node:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); | |
| } | |
| .connector { | |
| position: absolute; | |
| background-color: #cbd5e1; | |
| z-index: -1; | |
| } | |
| .connector.horizontal { | |
| height: 2px; | |
| } | |
| .connector.vertical { | |
| width: 2px; | |
| } | |
| .feature-card { | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .feature-card:hover { | |
| transform: scale(1.02); | |
| box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); | |
| } | |
| .interactive-term { | |
| position: relative; | |
| display: inline-block; | |
| cursor: pointer; | |
| border-bottom: 1px dashed #4C1D95; | |
| color: #4C1D95; | |
| } | |
| .tooltip { | |
| visibility: hidden; | |
| position: absolute; | |
| z-index: 100; | |
| bottom: 125%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| padding: 0.5rem; | |
| background-color: #1e293b; | |
| color: white; | |
| border-radius: 0.25rem; | |
| font-size: 0.875rem; | |
| white-space: nowrap; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .interactive-term:hover .tooltip { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| .sidebar { | |
| scrollbar-width: thin; | |
| scrollbar-color: #cbd5e1 #f1f5f9; | |
| } | |
| .sidebar::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .sidebar::-webkit-scrollbar-track { | |
| background: #f1f5f9; | |
| } | |
| .sidebar::-webkit-scrollbar-thumb { | |
| background-color: #cbd5e1; | |
| border-radius: 3px; | |
| } | |
| @media (max-width: 768px) { | |
| .diagram-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-liturgical-50"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-md sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="bg-liturgical-purple text-white p-2 rounded-lg mr-3"> | |
| <i class="fas fa-church text-xl"></i> | |
| </div> | |
| <div> | |
| <h1 class="text-xl font-bold text-liturgical-800">Sanctissi Missa</h1> | |
| <p class="text-sm text-liturgical-500">Modern Architecture Documentation</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-liturgical-purple text-white px-4 py-2 rounded-lg hover:bg-liturgical-900 transition"> | |
| <i class="fas fa-download mr-2"></i>Export PDF | |
| </button> | |
| <button id="theme-toggle" class="p-2 rounded-full bg-liturgical-100 hover:bg-liturgical-200"> | |
| <i class="fas fa-moon text-liturgical-800"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="container mx-auto px-4 py-8 flex flex-col lg:flex-row"> | |
| <!-- Sidebar Navigation --> | |
| <nav class="lg:w-64 lg:pr-6 mb-8 lg:mb-0"> | |
| <div class="bg-white rounded-lg shadow p-4 sidebar overflow-y-auto max-h-[calc(100vh-5rem)] sticky top-24"> | |
| <h3 class="font-bold text-lg mb-4 text-liturgical-800">Documentation Sections</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#overview" class="block py-2 px-3 rounded hover:bg-liturgical-100 text-liturgical-700">Overview</a></li> | |
| <li><a href="#repository-structure" class="block py-2 px-3 rounded hover:bg-liturgical-100 text-liturgical-700">Repository Structure</a></li> | |
| <li><a href="#design-decisions" class="block py-2 px-3 rounded hover:bg-liturgical-100 text-liturgical-700">Design Decisions</a></li> | |
| <li><a href="#implementation-details" class="block py-2 px-3 rounded hover:bg-liturgical-100 text-liturgical-700">Implementation Details</a></li> | |
| <li><a href="#educational-architecture" class="block py-2 px-3 rounded hover:bg-liturgical-100 text-liturgical-700">Educational Architecture</a></li> | |
| <li><a href="#content-structure" class="block py-2 px-3 rounded hover:bg-liturgical-100 text-liturgical-700">Content Structure</a></li> | |
| <li><a href="#interactive-elements" class="block py-2 px-3 rounded hover:bg-liturgical-100 text-liturgical-700">Interactive Elements</a></li> | |
| <li><a href="#features-checklist" class="block py-2 px-3 rounded hover:bg-liturgical-100 text-liturgical-700">Features Checklist</a></li> | |
| <li><a href="#technical-implementation" class="block py-2 px-3 rounded hover:bg-liturgical-100 text-liturgical-700">Technical Implementation</a></li> | |
| <li><a href="#ux-guidelines" class="block py-2 px-3 rounded hover:bg-liturgical-100 text-liturgical-700">UX Guidelines</a></li> | |
| <li><a href="#performance" class="block py-2 px-3 rounded hover:bg-liturgical-100 text-liturgical-700">Performance</a></li> | |
| </ul> | |
| <div class="mt-8 pt-6 border-t border-liturgical-200"> | |
| <h3 class="font-bold text-lg mb-4 text-liturgical-800">Quick Links</h3> | |
| <div class="space-y-3"> | |
| <a href="#" class="flex items-center text-liturgical-700 hover:text-liturgical-900"> | |
| <i class="fas fa-code-branch mr-2 text-liturgical-purple"></i> | |
| <span>GitHub Repository</span> | |
| </a> | |
| <a href="#" class="flex items-center text-liturgical-700 hover:text-liturgical-900"> | |
| <i class="fas fa-book mr-2 text-liturgical-purple"></i> | |
| <span>API Documentation</span> | |
| </a> | |
| <a href="#" class="flex items-center text-liturgical-700 hover:text-liturgical-900"> | |
| <i class="fas fa-file-contract mr-2 text-liturgical-purple"></i> | |
| <span>License Information</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="flex-1"> | |
| <!-- Overview Section --> | |
| <section id="overview" class="mb-12"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center mb-6"> | |
| <div class="bg-liturgical-purple text-white p-3 rounded-lg mr-4"> | |
| <i class="fas fa-layer-group text-2xl"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold text-liturgical-800">Project Overview</h2> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <div class="bg-liturgical-50 p-4 rounded-lg border border-liturgical-200"> | |
| <h3 class="font-bold text-lg mb-2 text-liturgical-800">Modern Implementation</h3> | |
| <p class="text-liturgical-600">Clean-room implementation in TypeScript/React Native with modern architectural patterns.</p> | |
| </div> | |
| <div class="bg-liturgical-50 p-4 rounded-lg border border-liturgical-200"> | |
| <h3 class="font-bold text-lg mb-2 text-liturgical-800">Educational Focus</h3> | |
| <p class="text-liturgical-600">Comprehensive educational layer to enhance understanding of the Traditional Latin Mass.</p> | |
| </div> | |
| <div class="bg-liturgical-50 p-4 rounded-lg border border-liturgical-200"> | |
| <h3 class="font-bold text-lg mb-2 text-liturgical-800">Clear Separation</h3> | |
| <p class="text-liturgical-600">Maintains strict boundaries between reference implementation and modern rewrite.</p> | |
| </div> | |
| </div> | |
| <div class="bg-liturgical-900 text-white rounded-lg p-6"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-info-circle text-2xl mt-1 mr-3 text-liturgical-gold"></i> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2">Architectural Philosophy</h3> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Repository Structure --> | |
| <section id="repository-structure" class="mb-12"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center mb-6"> | |
| <div class="bg-liturgical-purple text-white p-3 rounded-lg mr-4"> | |
| <i class="fas fa-folder-tree text-2xl"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold text-liturgical-800">Repository Structure</h2> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-semibold mb-4 text-liturgical-700">Project Organization</h3> | |
| <div class="bg-liturgical-50 p-4 rounded-lg font-mono text-sm overflow-x-auto"> | |
| sanctissi-missa/<br> | |
| ├── <span class="text-liturgical-purple font-bold">reference/</span> # Original Divinum Officium (Perl)<br> | |
| ├── <span class="text-liturgical-blue font-bold">typescript-app/</span> # Modern TypeScript Implementation<br> | |
| └── <span class="text-liturgical-red font-bold">docs/</span> # Project Documentation | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="border border-liturgical-200 rounded-lg overflow-hidden"> | |
| <div class="bg-liturgical-purple text-white p-3 font-bold"> | |
| <i class="fas fa-code mr-2"></i>Reference Implementation | |
| </div> | |
| <div class="p-4"> | |
| <ul class="list-disc pl-5 space-y-2 text-liturgical-700"> | |
| <li>Original Divinum Officium Perl codebase</li> | |
| <li>Used solely as functional reference</li> | |
| <li>Maintains clear licensing boundaries</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border border-liturgical-200 rounded-lg overflow-hidden"> | |
| <div class="bg-liturgical-blue text-white p-3 font-bold"> | |
| <i class="fab fa-react mr-2"></i>TypeScript Implementation | |
| </div> | |
| <div class="p-4"> | |
| <ul class="list-disc pl-5 space-y-2 text-liturgical-700"> | |
| <li>Clean-room implementation</li> | |
| <li>TypeScript/React Native stack</li> | |
| <li>Modern development practices</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border border-liturgical-200 rounded-lg overflow-hidden"> | |
| <div class="bg-liturgical-red text-white p-3 font-bold"> | |
| <i class="fas fa-book mr-2"></i>Documentation | |
| </div> | |
| <div class="p-4"> | |
| <ul class="list-disc pl-5 space-y-2 text-liturgical-700"> | |
| <li>Centralized documentation</li> | |
| <li>Architectural guidelines</li> | |
| <li>Development standards</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Design Decisions --> | |
| <section id="design-decisions" class="mb-12"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center mb-6"> | |
| <div class="bg-liturgical-purple text-white p-3 rounded-lg mr-4"> | |
| <i class="fas fa-pencil-ruler text-2xl"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold text-liturgical-800">Design Decisions</h2> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
| <div class="bg-liturgical-50 p-5 rounded-lg border border-liturgical-200"> | |
| <div class="flex items-start mb-3"> | |
| <div class="bg-liturgical-purple text-white p-2 rounded mr-3"> | |
| <i class="fas fa-sitemap"></i> | |
| </div> | |
| <h3 class="text-lg font-bold text-liturgical-800">Parent Repository Pattern</h3> | |
| </div> | |
| <p class="text-liturgical-700">Main repository serves as an organizational wrapper maintaining clear separation between reference and implementation while providing centralized documentation.</p> | |
| </div> | |
| <div class="bg-liturgical-50 p-5 rounded-lg border border-liturgical-200"> | |
| <div class="flex items-start mb-3"> | |
| <div class="bg-liturgical-blue text-white p-2 rounded mr-3"> | |
| <i class="fas fa-project-diagram"></i> | |
| </div> | |
| <h3 class="text-lg font-bold text-liturgical-800">Submodule Structure</h3> | |
| </div> | |
| <p class="text-liturgical-700">Clear separation between reference implementation and modern TypeScript application with independent, non-derivative codebase.</p> | |
| </div> | |
| <div class="bg-liturgical-50 p-5 rounded-lg border border-liturgical-200"> | |
| <div class="flex items-start mb-3"> | |
| <div class="bg-liturgical-gold text-white p-2 rounded mr-3"> | |
| <i class="fas fa-broom"></i> | |
| </div> | |
| <h3 class="text-lg font-bold text-liturgical-800">Clean Room Implementation</h3> | |
| </div> | |
| <p class="text-liturgical-700">Complete separation from original codebase with independent development approach using modern architectural patterns.</p> | |
| </div> | |
| <div class="bg-liturgical-50 p-5 rounded-lg border border-liturgical-200"> | |
| <div class="flex items-start mb-3"> | |
| <div class="bg-liturgical-red text-white p-2 rounded mr-3"> | |
| <i class="fas fa-file-alt"></i> | |
| </div> | |
| <h3 class="text-lg font-bold text-liturgical-800">Documentation Strategy</h3> | |
| </div> | |
| <p class="text-liturgical-700">Centralized documentation with clear architectural guidelines, development standards, and comprehensive API documentation.</p> | |
| </div> | |
| </div> | |
| <div class="bg-liturgical-100 border-l-4 border-liturgical-purple p-4 rounded"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-exclamation-circle text-liturgical-purple text-xl mt-1 mr-3"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-liturgical-800">Critical Design Principle</h3> | |
| <p class="text-liturgical-700">Maintain strict separation between reference and implementation to preserve licensing boundaries while enabling modern development practices.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Educational Architecture --> | |
| <section id="educational-architecture" class="mb-12"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center mb-6"> | |
| <div class="bg-liturgical-purple text-white p-3 rounded-lg mr-4"> | |
| <i class="fas fa-graduation-cap text-2xl"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold text-liturgical-800">Educational Layer Architecture</h2> | |
| </div> | |
| <div class="diagram-container mb-8"> | |
| <div class="diagram-grid"> | |
| <!-- Content Types --> | |
| <div class="diagram-node bg-liturgical-purple text-white"> | |
| <h3 class="font-bold text-lg mb-2">Content Types</h3> | |
| <ul class="text-sm"> | |
| <li class="flex items-center mb-1"><i class="fas fa-bolt mr-2"></i> Quick Definitions</li> | |
| <li class="flex items-center mb-1"><i class="fas fa-file-alt mr-2"></i> Detailed Explanations</li> | |
| <li class="flex items-center mb-1"><i class="fas fa-landmark mr-2"></i> Historical Context</li> | |
| <li class="flex items-center mb-1"><i class="fas fa-pray mr-2"></i> Spiritual Significance</li> | |
| <li class="flex items-center mb-1"><i class="fas fa-language mr-2"></i> Latin Insights</li> | |
| <li class="flex items-center"><i class="fas fa-volume-up mr-2"></i> Pronunciations</li> | |
| </ul> | |
| </div> | |
| <!-- Access Methods --> | |
| <div class="diagram-node bg-liturgical-blue text-white"> | |
| <h3 class="font-bold text-lg mb-2">Access Methods</h3> | |
| <ul class="text-sm"> | |
| <li class="flex items-center mb-1"><i class="fas fa-hand-pointer mr-2"></i> Tap/Click</li> | |
| <li class="flex items-center mb-1"><i class="fas fa-mouse-pointer mr-2"></i> Hover States</li> | |
| <li class="flex items-center mb-1"><i class="fas fa-search mr-2"></i> Quick Search</li> | |
| <li class="flex items-center"><i class="fas fa-bookmark mr-2"></i> Reference Index</li> | |
| </ul> | |
| </div> | |
| <!-- Display Methods --> | |
| <div class="diagram-node bg-liturgical-gold text-white"> | |
| <h3 class="font-bold text-lg mb-2">Display Methods</h3> | |
| <ul class="text-sm"> | |
| <li class="flex items-center mb-1"><i class="fas fa-comment-alt mr-2"></i> Interactive Tooltips</li> | |
| <li class="flex items-center mb-1"><i class="fas fa-columns mr-2"></i> Side Panels</li> | |
| <li class="flex items-center mb-1"><i class="fas fa-window-restore mr-2"></i> Bottom Sheets</li> | |
| <li class="flex items-center"><i class="fas fa-book-open mr-2"></i> Reference Drawer</li> | |
| </ul> | |
| </div> | |
| <!-- Knowledge Levels --> | |
| <div class="diagram-node bg-liturgical-red text-white"> | |
| <h3 class="font-bold text-lg mb-2">Knowledge Levels</h3> | |
| <ul class="text-sm"> | |
| <li class="flex items-center mb-1"><i class="fas fa-star mr-2"></i> Basic Introduction</li> | |
| <li class="flex items-center mb-1"><i class="fas fa-star-half-alt mr-2"></i> Intermediate</li> | |
| <li class="flex items-center mb-1"><i class="fas fa-stars mr-2"></i> Advanced Theology</li> | |
| <li class="flex items-center"><i class="fas fa-language mr-2"></i> Language Details</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4 text-liturgical-800">Content-Display Relationships</h3> | |
| <ul class="bg-liturgical-50 p-4 rounded-lg"> | |
| <li class="mb-2 flex items-center"> | |
| <span class="bg-liturgical-purple text-white px-2 py-1 rounded mr-2">Quick</span> | |
| <i class="fas fa-arrow-right mx-2 text-liturgical-500"></i> | |
| <span class="bg-liturgical-gold text-white px-2 py-1 rounded">Tooltip</span> | |
| </li> | |
| <li class="mb-2 flex items-center"> | |
| <span class="bg-liturgical-purple text-white px-2 py-1 rounded mr-2">Detail</span> | |
| <i class="fas fa-arrow-right mx-2 text-liturgical-500"></i> | |
| <span class="bg-liturgical-gold text-white px-2 py-1 rounded">Panel</span> | |
| </li> | |
| <li class="mb-2 flex items-center"> | |
| <span class="bg-liturgical-purple text-white px-2 py-1 rounded mr-2">History</span> | |
| <i class="fas fa-arrow-right mx-2 text-liturgical-500"></i> | |
| <span class="bg-liturgical-gold text-white px-2 py-1 rounded">Drawer</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <span class="bg-liturgical-purple text-white px-2 py-1 rounded mr-2">Spirit</span> | |
| <i class="fas fa-arrow-right mx-2 text-liturgical-500"></i> | |
| <span class="bg-liturgical-gold text-white px-2 py-1 rounded">Sheet</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4 text-liturgical-800">Access-Content Relationships</h3> | |
| <ul class="bg-liturgical-50 p-4 rounded-lg"> | |
| <li class="mb-2 flex items-center"> | |
| <span class="bg-liturgical-blue text-white px-2 py-1 rounded mr-2">Tap</span> | |
| <i class="fas fa-arrow-right mx-2 text-liturgical-500"></i> | |
| <span class="bg-liturgical-purple text-white px-2 py-1 rounded">Quick</span> | |
| </li> | |
| <li class="mb-2 flex items-center"> | |
| <span class="bg-liturgical-blue text-white px-2 py-1 rounded mr-2">Hover</span> | |
| <i class="fas fa-arrow-right mx-2 text-liturgical-500"></i> | |
| <span class="bg-liturgical-purple text-white px-2 py-1 rounded">Detail</span> | |
| </li> | |
| <li class="mb-2 flex items-center"> | |
| <span class="bg-liturgical-blue text-white px-2 py-1 rounded mr-2">Search</span> | |
| <i class="fas fa-arrow-right mx-2 text-liturgical-500"></i> | |
| <span class="bg-liturgical-blue text-white px-2 py-1 rounded">Index</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <span class="bg-liturgical-blue text-white px-2 py-1 rounded mr-2">Index</span> | |
| <i class="fas fa-arrow-right mx-2 text-liturgical-500"></i> | |
| <span class="bg-liturgical-purple text-white px-2 py-1 rounded">All Content</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Checklist --> | |
| <section id="features-checklist" class="mb-12"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center mb-6"> | |
| <div class="bg-liturgical-purple text-white p-3 rounded-lg mr-4"> | |
| <i class="fas fa-tasks text-2xl"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold text-liturgical-800">Educational Features Checklist</h2> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="text-xl font-semibold mb-4 text-liturgical-800 border-b pb-2">Content Accessibility</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> | |
| <div class="feature-card bg-liturgical-50 p-4 rounded-lg border border-liturgical-200"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h4 class="font-bold text-liturgical-800">Interactive Terms</h4> | |
| <div class="bg-liturgical-purple text-white px-2 py-1 rounded text-xs">High Priority</div> | |
| </div> | |
| <p class="text-sm text-liturgical-600 mb-3">Enable quick understanding of Latin terms</p> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-liturgical-200 flex items-center justify-center"> | |
| <i class="fas fa-check text-liturgical-800"></i> | |
| </div> | |
| <span class="ml-2 text-sm text-liturgical-700">Implemented</span> | |
| </div> | |
| </div> | |
| <div class="feature-card bg-liturgical-50 p-4 rounded-lg border border-liturgical-200"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h4 class="font-bold text-liturgical-800">Saint Information</h4> | |
| <div class="bg-liturgical-purple text-white px-2 py-1 rounded text-xs">High Priority</div> | |
| </div> | |
| <p class="text-sm text-liturgical-600 mb-3">Provide context for feast days</p> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-liturgical-200 flex items-center justify-center"> | |
| <i class="fas fa-check text-liturgical-800"></i> | |
| </div> | |
| <span class="ml-2 text-sm text-liturgical-700">Implemented</span> | |
| </div> | |
| </div> | |
| <div class="feature-card bg-liturgical-50 p-4 rounded-lg border border-liturgical-200"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h4 class="font-bold text-liturgical-800">Liturgical Explanations</h4> | |
| <div class="bg-liturgical-purple text-white px-2 py-1 rounded text-xs">High Priority</div> | |
| </div> | |
| <p class="text-sm text-liturgical-600 mb-3">Clarify ritual significance</p> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-liturgical-200 flex items-center justify-center"> | |
| <i class="fas fa-spinner text-liturgical-800"></i> | |
| </div> | |
| <span class="ml-2 text-sm text-liturgical-700">In Progress</span> | |
| </div> | |
| </div> | |
| <div class="feature-card bg-liturgical-50 p-4 rounded-lg border border-liturgical-200"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h4 class="font-bold text-liturgical-800">Latin Insights</h4> | |
| <div class="bg-liturgical-purple text-white px-2 py-1 rounded text-xs">High Priority</div> | |
| </div> | |
| <p class="text-sm text-liturgical-600 mb-3">Bridge language understanding</p> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-liturgical-200 flex items-center justify-center"> | |
| <i class="fas fa-spinner text-liturgical-800"></i> | |
| </div> | |
| <span class="ml-2 text-sm text-liturgical-700">In Progress</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="text-xl font-semibold mb-4 text-liturgical-800 border-b pb-2">User Interface Elements</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> | |
| <div class="feature-card bg-liturgical-50 p-4 rounded-lg border border-liturgical-200"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h4 class="font-bold text-liturgical-800">Tooltip System</h4> | |
| <div class="bg-liturgical-purple text-white px-2 py-1 rounded text-xs">High Priority</div> | |
| </div> | |
| <p class="text-sm text-liturgical-600 mb-3">Quick access to definitions</p> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-liturgical-200 flex items-center justify-center"> | |
| <i class="fas fa-check text-liturgical-800"></i> | |
| </div> | |
| <span class="ml-2 text-sm text-liturgical-700">Implemented</span> | |
| </div> | |
| </div> | |
| <div class="feature-card bg-liturgical-50 p-4 rounded-lg border border-liturgical-200"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h4 class="font-bold text-liturgical-800">Side Panel</h4> | |
| <div class="bg-liturgical-purple text-white px-2 py-1 rounded text-xs">High Priority</div> | |
| </div> | |
| <p class="text-sm text-liturgical-600 mb-3">Detailed explanations</p> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-liturgical-200 flex items-center justify-center"> | |
| <i class="fas fa-check text-liturgical-800"></i> | |
| </div> | |
| <span class="ml-2 text-sm text-liturgical-700">Implemented</span> | |
| </div> | |
| </div> | |
| <div class="feature-card bg-liturgical-50 p-4 rounded-lg border border-liturgical-200"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h4 class="font-bold text-liturgical-800">Bottom Sheet</h4> | |
| <div class="bg-liturgical-purple text-white px-2 py-1 rounded text-xs">High Priority</div> | |
| </div> | |
| <p class="text-sm text-liturgical-600 mb-3">Mobile-friendly deep dives</p> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-liturgical-200 flex items-center justify-center"> | |
| <i class="fas fa-spinner text-liturgical-800"></i> | |
| </div> | |
| <span class="ml-2 text-sm text-liturgical-700">In Progress</span> | |
| </div> | |
| </div> | |
| <div class="feature-card bg-liturgical-50 p-4 rounded-lg border border-liturgical-200"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h4 class="font-bold text-liturgical-800">Reference Drawer</h4> | |
| <div class="bg-liturgical-600 text-white px-2 py-1 rounded text-xs">Medium Priority</div> | |
| </div> | |
| <p class="text-sm text-liturgical-600 mb-3">Comprehensive resource access</p> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-liturgical-200 flex items-center justify-center"> | |
| <i class="fas fa-circle-notch text-liturgical-800"></i> | |
| </div> | |
| <span class="ml-2 text-sm text-liturgical-700">Planned</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="mt-12 pt-8 border-t border-liturgical-200"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <div class="flex items-center"> | |
| <div class="bg-liturgical-purple text-white p-2 rounded-lg mr-3"> | |
| <i class="fas fa-church"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg text-liturgical-800">Sanctissi Missa</h3> | |
| <p class="text-sm text-liturgical-600">Modern Architecture Documentation</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center md:text-right"> | |
| <p class="text-liturgical-600">Copyright (C)2025 Robin L. M. Cheung, MBA</p> | |
| <p class="text-sm text-liturgical-500 mt-1">All rights reserved</p> | |
| </div> | |
| </div> | |
| </footer> | |
| </main> | |
| </div> | |
| <script> | |
| // Interactive term tooltips | |
| document.querySelectorAll('.interactive-term').forEach(term => { | |
| term.addEventListener('click', function() { | |
| const tooltip = this.querySelector('.tooltip'); | |
| tooltip.classList.toggle('hidden'); | |
| }); | |
| }); | |
| // Theme toggle | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| themeToggle.addEventListener('click', function() { | |
| document.body.classList.toggle('dark'); | |
| const icon = themeToggle.querySelector('i'); | |
| if (document.body.classList.contains('dark')) { | |
| document.body.classList.add('bg-gray-900', 'text-gray-100'); | |
| icon.classList.remove('fa-moon'); | |
| icon.classList.add('fa-sun'); | |
| } else { | |
| document.body.classList.remove('bg-gray-900', 'text-gray-100'); | |
| icon.classList.remove('fa-sun'); | |
| icon.classList.add('fa-moon'); | |
| } | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| window.scrollTo({ | |
| top: target.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| </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-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> | |
| </html> |