Add variables in their proper accordion sections for dynamic portions of the Irdinary of the Mass (ie. portions that are not the Propers but change according to type of Mass/day of weel, type of saint, etc.) One example is the doubled antiphons - Initial Deployment
a382506
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sanctissima Missa - Latin Mass Generator</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-red': '#dc2626', | |
| 'liturgical-white': '#f8fafc', | |
| 'liturgical-purple': '#7e22ce', | |
| 'liturgical-green': '#16a34a', | |
| 'liturgical-black': '#0f172a', | |
| 'liturgical-rose': '#f43f5e' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap'); | |
| body { | |
| font-family: 'Crimson Text', serif; | |
| background-color: #f9f7f2; | |
| background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23d1d5db' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E"); | |
| } | |
| .liturgical-section { | |
| transition: all 0.3s ease; | |
| } | |
| .latin-text { | |
| font-weight: 600; | |
| line-height: 1.6; | |
| } | |
| .english-text { | |
| font-style: italic; | |
| line-height: 1.6; | |
| } | |
| .rubric { | |
| color: #64748b; | |
| font-size: 0.9rem; | |
| } | |
| .seasonal-color { | |
| display: inline-block; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| margin-right: 8px; | |
| } | |
| .accordion-content { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease-out; | |
| } | |
| .accordion-content.open { | |
| max-height: 2000px; | |
| } | |
| .accordion-header { | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .accordion-header:hover { | |
| background-color: rgba(220, 38, 38, 0.05); | |
| } | |
| .hover-translation:hover .english-text { | |
| display: block ; | |
| } | |
| .hover-translation .english-text { | |
| display: none; | |
| } | |
| @media print { | |
| .no-print { | |
| display: none ; | |
| } | |
| body { | |
| background: white; | |
| } | |
| .print-section { | |
| page-break-inside: avoid; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="bg-liturgical-red text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-3 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i class="fas fa-church text-2xl mr-3"></i> | |
| <h1 class="text-2xl font-bold">Sanctissima Missa</h1> | |
| <span class="ml-3 text-sm bg-white text-liturgical-red px-2 py-1 rounded">Extraordinary Form</span> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center bg-white bg-opacity-20 px-3 py-1 rounded-full"> | |
| <i class="fas fa-calendar-alt mr-2"></i> | |
| <span id="current-date">July 28, 2025</span> | |
| </div> | |
| <button id="settings-btn" class="bg-white bg-opacity-20 hover:bg-opacity-30 px-4 py-2 rounded-full transition"> | |
| <i class="fas fa-cog mr-2"></i> Settings | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-grow container mx-auto px-4 py-6"> | |
| <div class="flex flex-col lg:flex-row gap-6"> | |
| <!-- Left Sidebar - Calendar and Info --> | |
| <div class="w-full lg:w-1/4 space-y-6"> | |
| <!-- Feast Information --> | |
| <div class="bg-white rounded-lg shadow p-5"> | |
| <h2 class="text-xl font-bold text-liturgical-red mb-3">Feast of the Day</h2> | |
| <div class="flex items-center mb-3"> | |
| <div class="seasonal-color bg-liturgical-white border border-gray-300"></div> | |
| <h3 class="text-lg font-semibold">{{FEAST_NAME}}</h3> | |
| </div> | |
| <p class="text-gray-600 mb-2">{{FEAST_CLASS}}</p> | |
| <p class="text-sm text-gray-500 italic">{{FEAST_DESCRIPTION}}</p> | |
| <div class="mt-4 pt-3 border-t border-gray-100"> | |
| <h4 class="font-semibold text-gray-700 mb-2">Liturgical Season</h4> | |
| <p class="flex items-center"> | |
| <span class="seasonal-color {{SEASON_COLOR_CLASS}}"></span> | |
| {{LITURGICAL_SEASON}} | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Liturgical Calendar --> | |
| <div class="bg-white rounded-lg shadow p-5"> | |
| <h2 class="text-xl font-bold text-liturgical-red mb-3">Liturgical Calendar</h2> | |
| <div class="space-y-2"> | |
| {{#CALENDAR_DAYS}} | |
| <div class="flex justify-between items-center p-2 {{DAY_CLASS}} rounded {{DAY_FONT_WEIGHT}}"> | |
| <span>{{DAY_DATE}}</span> | |
| <span>{{DAY_FEAST}}</span> | |
| </div> | |
| {{/CALENDAR_DAYS}} | |
| </div> | |
| </div> | |
| <!-- Display Options --> | |
| <div class="bg-white rounded-lg shadow p-5"> | |
| <h2 class="text-xl font-bold text-liturgical-red mb-3">Display Options</h2> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="flex items-center"> | |
| <input type="radio" name="display-mode" class="mr-2" checked> | |
| <span>Side-by-side view</span> | |
| </label> | |
| </div> | |
| <div> | |
| <label class="flex items-center"> | |
| <input type="radio" name="display-mode" class="mr-2"> | |
| <span>Interlinear view</span> | |
| </label> | |
| </div> | |
| <div> | |
| <label class="flex items-center"> | |
| <input type="radio" name="display-mode" class="mr-2"> | |
| <span>Latin only</span> | |
| </label> | |
| </div> | |
| <div> | |
| <label class="flex items-center"> | |
| <input type="radio" name="display-mode" class="mr-2"> | |
| <span>English only</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-3 border-t border-gray-100"> | |
| <h3 class="font-semibold mb-2">Text Size</h3> | |
| <div class="flex items-center space-x-2"> | |
| <button class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">A-</button> | |
| <div class="w-24 h-2 bg-gray-200 rounded-full"></div> | |
| <button class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">A+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content Area --> | |
| <div class="w-full lg:w-3/4"> | |
| <!-- Mass Sections Accordion --> | |
| <div class="bg-white rounded-lg shadow mb-6"> | |
| <div class="accordion-header p-4 flex justify-between items-center border-b border-gray-100"> | |
| <h2 class="text-xl font-bold text-liturgical-red">{{MASS_TITLE}}</h2> | |
| <i class="fas fa-chevron-down text-gray-500"></i> | |
| </div> | |
| <div class="accordion-content open"> | |
| <div class="p-4"> | |
| <!-- Preparation Section --> | |
| <div class="liturgical-section mb-6"> | |
| <h3 class="text-lg font-semibold text-liturgical-red mb-3 flex items-center"> | |
| <i class="fas fa-pray mr-2"></i> Preparation | |
| </h3> | |
| <div class="hover-translation mb-4"> | |
| <p class="latin-text">In nomine Patris, et Filii, et Spiritus Sancti. Amen.</p> | |
| <p class="english-text">In the name of the Father, and of the Son, and of the Holy Spirit. Amen.</p> | |
| </div> | |
| <div class="hover-translation mb-4"> | |
| <p class="latin-text">Introibo ad altare Dei.</p> | |
| <p class="english-text">I will go in to the altar of God.</p> | |
| </div> | |
| <div class="hover-translation mb-4"> | |
| <p class="latin-text">Ad Deum qui lætificat iuventutem meam.</p> | |
| <p class="english-text">To God who giveth joy to my youth.</p> | |
| </div> | |
| <div class="rubric mb-4"> | |
| The priest makes the Sign of the Cross, saying: | |
| </div> | |
| {{#PREPARATION_PRAYERS}} | |
| <div class="hover-translation mb-4"> | |
| <p class="latin-text">{{LATIN_TEXT}}</p> | |
| <p class="english-text">{{ENGLISH_TEXT}}</p> | |
| </div> | |
| {{/PREPARATION_PRAYERS}} | |
| {{#PREPARATION_ANTIPHONS}} | |
| <div class="hover-translation mb-4"> | |
| <p class="latin-text">{{ANTIPHON_LATIN}}</p> | |
| <p class="english-text">{{ANTIPHON_ENGLISH}}</p> | |
| </div> | |
| {{/PREPARATION_ANTIPHONS}} | |
| </div> | |
| <!-- Catechumens Section --> | |
| <div class="liturgical-section mb-6"> | |
| <h3 class="text-lg font-semibold text-liturgical-red mb-3 flex items-center"> | |
| <i class="fas fa-users mr-2"></i> Instruction of Catechumens | |
| </h3> | |
| <div class="rubric mb-4"> | |
| The priest turns to the people and says: | |
| </div> | |
| {{#CATECHUMENS_PRAYERS}} | |
| <div class="hover-translation mb-4"> | |
| <p class="latin-text">{{LATIN_TEXT}}</p> | |
| <p class="english-text">{{ENGLISH_TEXT}}</p> | |
| </div> | |
| {{/CATECHUMENS_PRAYERS}} | |
| {{#CATECHUMENS_ANTIPHONS}} | |
| <div class="hover-translation mb-4"> | |
| <p class="latin-text">{{ANTIPHON_LATIN}}</p> | |
| <p class="english-text">{{ANTIPHON_ENGLISH}}</p> | |
| </div> | |
| {{/CATECHUMENS_ANTIPHONS}} | |
| </div> | |
| <!-- Faithful Section --> | |
| <div class="liturgical-section mb-6"> | |
| <h3 class="text-lg font-semibold text-liturgical-red mb-3 flex items-center"> | |
| <i class="fas fa-cross mr-2"></i> Sacrifice of the Faithful | |
| </h3> | |
| {{#FAITHFUL_PRAYERS}} | |
| <div class="hover-translation mb-4"> | |
| <p class="latin-text">{{LATIN_TEXT}}</p> | |
| <p class="english-text">{{ENGLISH_TEXT}}</p> | |
| </div> | |
| {{/FAITHFUL_PRAYERS}} | |
| {{#FAITHFUL_ANTIPHONS}} | |
| <div class="hover-translation mb-4"> | |
| <p class="latin-text">{{ANTIPHON_LATIN}}</p> | |
| <p class="english-text">{{ANTIPHON_ENGLISH}}</p> | |
| </div> | |
| {{/FAITHFUL_ANTIPHONS}} | |
| <div class="rubric mb-4"> | |
| {{CANON_DESCRIPTION}} | |
| </div> | |
| {{#CANON_PRAYERS}} | |
| <div class="hover-translation mb-4"> | |
| <p class="latin-text">{{LATIN_TEXT}}</p> | |
| <p class="english-text">{{ENGLISH_TEXT}}</p> | |
| </div> | |
| {{/CANON_PRAYERS}} | |
| {{#CANON_ANTIPHONS}} | |
| <div class="hover-translation mb-4"> | |
| <p class="latin-text">{{ANTIPHON_LATIN}}</p> | |
| <p class="english-text">{{ANTIPHON_ENGLISH}}</p> | |
| </div> | |
| {{/CANON_ANTIPHONS}} | |
| </div> | |
| <!-- Communion Section --> | |
| <div class="liturgical-section mb-6"> | |
| <h3 class="text-lg font-semibold text-liturgical-red mb-3 flex items-center"> | |
| <i class="fas fa-wine-bottle mr-2"></i> Communion | |
| </h3> | |
| {{#COMMUNION_PRAYERS}} | |
| <div class="hover-translation mb-4"> | |
| <p class="latin-text">{{LATIN_TEXT}}</p> | |
| <p class="english-text">{{ENGLISH_TEXT}}</p> | |
| </div> | |
| {{/COMMUNION_PRAYERS}} | |
| {{#COMMUNION_ANTIPHONS}} | |
| <div class="hover-translation mb-4"> | |
| <p class="latin-text">{{ANTIPHON_LATIN}}</p> | |
| <p class="english-text">{{ANTIPHON_ENGLISH}}</p> | |
| </div> | |
| {{/COMMUNION_ANTIPHONS}} | |
| </div> | |
| <!-- Dismissal Section --> | |
| <div class="liturgical-section"> | |
| <h3 class="text-lg font-semibold text-liturgical-red mb-3 flex items-center"> | |
| <i class="fas fa-door-open mr-2"></i> Dismissal | |
| </h3> | |
| {{#DISMISSAL_PRAYERS}} | |
| <div class="hover-translation mb-4"> | |
| <p class="latin-text">{{LATIN_TEXT}}</p> | |
| <p class="english-text">{{ENGLISH_TEXT}}</p> | |
| </div> | |
| {{/DISMISSAL_PRAYERS}} | |
| {{#DISMISSAL_ANTIPHONS}} | |
| <div class="hover-translation mb-4"> | |
| <p class="latin-text">{{ANTIPHON_LATIN}}</p> | |
| <p class="english-text">{{ANTIPHON_ENGLISH}}</p> | |
| </div> | |
| {{/DISMISSAL_ANTIPHONS}} | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Additional Information --> | |
| <div class="bg-white rounded-lg shadow p-5"> | |
| <h2 class="text-xl font-bold text-liturgical-red mb-3">About This Feast</h2> | |
| <p class="mb-3">{{FEAST_HISTORY}}</p> | |
| <p>{{MASS_INFO}}</p> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-liturgical-red text-white py-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h3 class="text-xl font-bold">Sanctissima Missa</h3> | |
| <p class="text-sm opacity-80">Traditional Latin Mass Generator</p> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="hover:opacity-80"><i class="fab fa-github text-xl"></i></a> | |
| <a href="#" class="hover:opacity-80"><i class="fas fa-book text-xl"></i></a> | |
| <a href="#" class="hover:opacity-80"><i class="fas fa-info-circle text-xl"></i></a> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-white border-opacity-20 text-center text-sm opacity-80"> | |
| <p>Built with reverence for the Traditional Latin Mass and modern web technologies.</p> | |
| <p class="mt-1">Based on the 1960 Rubrics and Butler's Algorithm for liturgical calculations.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Settings Modal --> | |
| <div id="settings-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-md"> | |
| <div class="p-5 border-b border-gray-200"> | |
| <h3 class="text-xl font-bold text-liturgical-red">Settings</h3> | |
| </div> | |
| <div class="p-5 space-y-4"> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Display Mode</label> | |
| <select class="w-full p-2 border border-gray-300 rounded"> | |
| <option>Side-by-side view</option> | |
| <option>Interlinear view</option> | |
| <option>Latin only</option> | |
| <option>English only</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Theme</label> | |
| <div class="flex space-x-2"> | |
| <button class="w-8 h-8 rounded-full bg-liturgical-red border-2 border-white shadow"></button> | |
| <button class="w-8 h-8 rounded-full bg-liturgical-purple border-2 border-white shadow"></button> | |
| <button class="w-8 h-8 rounded-full bg-liturgical-green border-2 border-white shadow"></button> | |
| <button class="w-8 h-8 rounded-full bg-liturgical-black border-2 border-white shadow"></button> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Text Size</label> | |
| <div class="flex items-center space-x-2"> | |
| <button class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">A-</button> | |
| <div class="flex-grow h-2 bg-gray-200 rounded-full"> | |
| <div class="h-full bg-liturgical-red rounded-full w-1/2"></div> | |
| </div> | |
| <button class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">A+</button> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="hover-translation" class="mr-2"> | |
| <label for="hover-translation">Enable hover translations</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="dark-mode" class="mr-2"> | |
| <label for="dark-mode">Dark mode</label> | |
| </div> | |
| </div> | |
| <div class="p-5 border-t border-gray-200 flex justify-end"> | |
| <button id="close-settings" class="px-4 py-2 bg-gray-200 rounded mr-2">Cancel</button> | |
| <button class="px-4 py-2 bg-liturgical-red text-white rounded">Save Settings</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Accordion functionality | |
| document.querySelectorAll('.accordion-header').forEach(header => { | |
| header.addEventListener('click', () => { | |
| const content = header.nextElementSibling; | |
| const icon = header.querySelector('i'); | |
| content.classList.toggle('open'); | |
| icon.classList.toggle('fa-chevron-down'); | |
| icon.classList.toggle('fa-chevron-up'); | |
| }); | |
| }); | |
| // Settings modal | |
| const settingsBtn = document.getElementById('settings-btn'); | |
| const settingsModal = document.getElementById('settings-modal'); | |
| const closeSettings = document.getElementById('close-settings'); | |
| settingsBtn.addEventListener('click', () => { | |
| settingsModal.classList.remove('hidden'); | |
| }); | |
| closeSettings.addEventListener('click', () => { | |
| settingsModal.classList.add('hidden'); | |
| }); | |
| // Close modal when clicking outside | |
| window.addEventListener('click', (e) => { | |
| if (e.target === settingsModal) { | |
| settingsModal.classList.add('hidden'); | |
| } | |
| }); | |
| // Hover translation functionality | |
| const hoverTranslations = document.querySelectorAll('.hover-translation'); | |
| hoverTranslations.forEach(item => { | |
| item.addEventListener('mouseenter', () => { | |
| const englishText = item.querySelector('.english-text'); | |
| if (englishText) { | |
| englishText.style.display = 'block'; | |
| } | |
| }); | |
| item.addEventListener('mouseleave', () => { | |
| const englishText = item.querySelector('.english-text'); | |
| if (englishText) { | |
| englishText.style.display = 'none'; | |
| } | |
| }); | |
| }); | |
| </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/extraordinary-from-template" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |