Spaces:
Running
Running
File size: 27,266 Bytes
9914a44 |
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 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sancta Missa - Liquid Glass Theme</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">
<style>
:root {
--glass-color: rgba(255, 255, 255, 0.2);
--glass-border: rgba(255, 255, 255, 0.3);
--glass-highlight: rgba(255, 255, 255, 0.4);
}
body {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
color: #f8f9fa;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.glass-panel {
background: var(--glass-color);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 0.75rem;
border: 1px solid var(--glass-border);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.36);
overflow: hidden;
transition: all 0.3s ease;
}
.glass-panel:hover {
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
transform: translateY(-2px);
}
.glass-button {
background: var(--glass-highlight);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid var(--glass-border);
transition: all 0.3s ease;
}
.glass-button:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-1px);
}
.accordion-item {
border-bottom: 1px solid var(--glass-border);
}
.accordion-item:last-child {
border-bottom: none;
}
.accordion-header {
cursor: pointer;
transition: all 0.3s ease;
}
.accordion-header:hover {
background: var(--glass-highlight);
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.accordion-content.open {
max-height: 1000px;
}
.map-line {
position: relative;
height: 100%;
width: 4px;
background: linear-gradient(to bottom, #4f46e5, #ec4899);
}
.map-stop {
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: #4f46e5;
border: 3px solid white;
left: -6px;
}
.map-stop.active {
background: #ec4899;
box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.5);
}
.map-label {
position: absolute;
left: 30px;
white-space: nowrap;
background: var(--glass-color);
backdrop-filter: blur(5px);
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.875rem;
}
.hamburger {
display: none;
}
@media (max-width: 768px) {
.hamburger {
display: block;
}
.map-container {
position: fixed;
top: 0;
left: -300px;
width: 300px;
height: 100vh;
z-index: 50;
transition: left 0.3s ease;
}
.map-container.open {
left: 0;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 40;
}
.overlay.open {
display: block;
}
}
.rubric {
color: #ec4899;
font-style: italic;
}
.latin {
font-style: italic;
}
.section-title {
color: #4f46e5;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.cross {
color: #ec4899;
font-size: 1.25em;
}
</style>
</head>
<body class="min-h-screen p-4">
<div class="container mx-auto">
<!-- Header -->
<div class="glass-panel p-6 mb-6">
<div class="flex justify-between items-center">
<div>
<h1 class="text-2xl font-bold text-white">Sancta Missa</h1>
<p class="text-sm opacity-80">Sacratissimi Cordis Domini Nostri Jesu Christi ~ I. classis</p>
</div>
<button id="hamburger" class="glass-button p-2 rounded-lg md:hidden">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
<div class="flex flex-col md:flex-row gap-6">
<!-- Map Navigation -->
<div id="map-container" class="map-container glass-panel p-4 w-full md:w-64 flex-shrink-0">
<div class="relative h-full pl-6">
<div class="map-line"></div>
<div class="map-stop top-0 active" data-section="intro"></div>
<div class="map-label top-0" data-section="intro">Introitus</div>
<div class="map-stop top-1/4" data-section="kyrie"></div>
<div class="map-label top-1/4" data-section="kyrie">Kyrie</div>
<div class="map-stop top-2/4" data-section="gloria"></div>
<div class="map-label top-2/4" data-section="gloria">Gloria</div>
<div class="map-stop top-3/4" data-section="oratio"></div>
<div class="map-label top-3/4" data-section="oratio">Oratio</div>
<div class="map-stop bottom-0" data-section="evangelium"></div>
<div class="map-label bottom-0" data-section="evangelium">Evangelium</div>
</div>
</div>
<!-- Content -->
<div class="flex-1">
<div class="glass-panel overflow-hidden">
<!-- Introitus -->
<div class="accordion-item" id="intro">
<div class="accordion-header p-4 flex justify-between items-center">
<h2 class="section-title">Introitus</h2>
<i class="fas fa-chevron-down transform transition-transform"></i>
</div>
<div class="accordion-content px-4 pb-0">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 pb-4">
<div>
<p class="rubric">Ps 32:11; 32:19</p>
<p class="latin"><span class="font-bold text-xl text-red-400">C</span>ogitationes Cordis eius in generatione et generationem: ut éruat a morte ánimas eórum et alat eos in fame.</p>
<p class="rubric">Ps 32:1</p>
<p class="latin">Exsultáte, iusti, in Dómino: rectos decet collaudátio.</p>
<p class="rubric">℣. Glória Patri, et Fílio, et Spirítui Sancto.</p>
<p class="rubric">℟. Sicut erat in princípio, et nunc, et semper, et in sǽcula sæculórum. Amen.</p>
<p class="latin"><span class="font-bold text-xl text-red-400">C</span>ogitationes Cordis eius in generatione et generationem: ut éruat a morte ánimas eórum et alat eos in fame.</p>
</div>
<div>
<p class="rubric">Introit</p>
<p class="latin"><span class="font-bold text-xl text-red-400">T</span>he thoughts of His Heart are to all generations: to deliver them from death and preserve them in spite of famine.</p>
<p class="rubric">Ps 32:1</p>
<p class="latin">Exult, you just, in the Lord; praise from the upright is fitting.</p>
<p class="rubric">℣. Glory be to the Father, and to the Son, and to the Holy Ghost.</p>
<p class="rubric">℟. As it was in the beginning, is now, and ever shall be, world without end. Amen.</p>
<p class="latin"><span class="font-bold text-xl text-red-400">T</span>he thoughts of His Heart are to all generations: to deliver them from death and preserve them in spite of famine.</p>
</div>
</div>
</div>
</div>
<!-- Kyrie -->
<div class="accordion-item" id="kyrie">
<div class="accordion-header p-4 flex justify-between items-center">
<h2 class="section-title">Kyrie</h2>
<i class="fas fa-chevron-down transform transition-transform"></i>
</div>
<div class="accordion-content px-4 pb-0">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 pb-4">
<div>
<p class="rubric">℣. Kýrie, eléison.</p>
<p class="rubric">℟. Kýrie, eléison.</p>
<p class="rubric">℣. Kýrie, eléison.</p>
<p class="rubric">℟. Christe, eléison.</p>
<p class="rubric">℣. Christe, eléison.</p>
<p class="rubric">℟. Christe, eléison.</p>
<p class="rubric">℣. Kýrie, eléison.</p>
<p class="rubric">℟. Kýrie, eléison.</p>
<p class="rubric">℣. Kýrie, eléison.</p>
</div>
<div>
<p class="rubric">℣. Lord, have mercy.</p>
<p class="rubric">℟. Lord, have mercy.</p>
<p class="rubric">℣. Lord, have mercy.</p>
<p class="rubric">℟. Christ, have mercy.</p>
<p class="rubric">℣. Christ, have mercy.</p>
<p class="rubric">℟. Christ, have mercy.</p>
<p class="rubric">℣. Lord, have mercy.</p>
<p class="rubric">℟. Lord, have mercy.</p>
<p class="rubric">℣. Lord, have mercy.</p>
</div>
</div>
</div>
</div>
<!-- Gloria -->
<div class="accordion-item" id="gloria">
<div class="accordion-header p-4 flex justify-between items-center">
<h2 class="section-title">Gloria</h2>
<i class="fas fa-chevron-down transform transition-transform"></i>
</div>
<div class="accordion-content px-4 pb-0">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 pb-4">
<div>
<p class="latin"><span class="font-bold text-xl text-red-400">G</span>lória in excélsis Deo. Et in terra pax homínibus bonæ voluntátis. Laudámus te. Benedícimus te. Adorámus te. Glorificámus te. Grátias ágimus tibi propter magnam glóriam tuam. Dómine Deus, Rex cæléstis, Deus Pater omnípotens. Dómine Fili unigénite, Iesu Christe. Dómine Deus, Agnus Dei, Fílius Patris. Qui tollis peccáta mundi, miserére nobis. Qui tollis peccáta mundi, súscipe deprecatiónem nostram. Qui sedes ad déxteram Patris, miserére nobis. Quóniam tu solus Sanctus. Tu solus Dóminus. Tu solus Altíssimus, Iesu Christe. Cum Sancto Spíritu <span class="cross">✝</span> in glória Dei Patris. Amen.</p>
</div>
<div>
<p class="latin"><span class="font-bold text-xl text-red-400">G</span>lory be to God on high, and on earth peace to men of good will. We praise Thee. We bless Thee. We adore Thee. We glorify Thee. We give Thee thanks for Thy great glory. O Lord God, heavenly King, God the Father almighty. O Lord Jesus Christ, the only begotten Son. O Lord God, Lamb of God, Son of the Father. Who takest away the sins of the world, have mercy on us. Who takest away the sins of the world, receive our prayer. Who sittest at the right hand of the Father, have mercy on us. For Thou only art holy. Thou only art the Lord. Thou only art most high, O Jesus Christ. Together with the Holy Ghost <span class="cross">✝</span> in the glory of God the Father. Amen.</p>
</div>
</div>
</div>
</div>
<!-- Oratio -->
<div class="accordion-item" id="oratio">
<div class="accordion-header p-4 flex justify-between items-center">
<h2 class="section-title">Oratio</h2>
<i class="fas fa-chevron-down transform transition-transform"></i>
</div>
<div class="accordion-content px-4 pb-0">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 pb-4">
<div>
<p class="rubric">℣. Dóminus vobíscum.</p>
<p class="rubric">℟. Et cum spíritu tuo.</p>
<p class="latin"><span class="font-bold text-xl text-red-400">O</span>rémus.</p>
<p class="latin">Deus, qui nobis in Corde Fílii tui, nostris vulneráto peccátis, infinítos dilectiónis thesáuros misericórditer largíri dignáris: concéde, quǽsumus; ut, illi devótum pietátis nostræ præstántes obséquium, dignæ quoque satisfactiónis exhibeámus offícium.</p>
<p class="latin"><span class="font-bold text-xl text-red-400">P</span>er eúndem Dóminum nostrum Iesum Christum Fílium tuum, qui tecum vivit et regnat in unitáte Spíritus Sancti, Deus, per ómnia sǽcula sæculórum.</p>
<p class="rubric">℟. Amen.</p>
</div>
<div>
<p class="rubric">℣. The Lord be with you.</p>
<p class="rubric">℟. And with thy spirit.</p>
<p class="latin"><span class="font-bold text-xl text-red-400">L</span>et us pray.</p>
<p class="latin">O God, Who in the Heart of Your Son, wounded by our sins, mercifully lavish upon us the infinite riches of love, grant, we beseech You, that as we offer Him the faithful service of our devotion, we may also show forth fitting reparation.</p>
<p class="latin"><span class="font-bold text-xl text-red-400">T</span>hrough the same Jesus Christ, thy Son, Our Lord, Who liveth and reigneth with thee in the unity of the Holy Ghost, God, world without end.</p>
<p class="rubric">℟. Amen.</p>
</div>
</div>
</div>
</div>
<!-- Evangelium -->
<div class="accordion-item" id="evangelium">
<div class="accordion-header p-4 flex justify-between items-center">
<h2 class="section-title">Evangelium</h2>
<i class="fas fa-chevron-down transform transition-transform"></i>
</div>
<div class="accordion-content px-4 pb-0">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 pb-4">
<div>
<p class="latin"><span class="font-bold text-xl text-red-400">M</span>unda cor meum ac lábia mea, omnípotens Deus, qui lábia Isaíæ Prophétæ cáculo mundásti igníto: ita me tua grata miseratióne dignáre mundáre, ut sanctum Evangélium tuum digne váleam nuntiáre. Per Christum, Dóminum nostrum. Amen.</p>
<p class="latin"><span class="font-bold text-xl text-red-400">I</span>ube, Dómine, benedícere. Dóminus sit in corde meo et in lábiis meis: ut digne et competénter annúntiem Evangélium suum. Amen.</p>
<p class="rubric">℣. Dóminus vobíscum.</p>
<p class="rubric">℟. Et cum spíritu tuo.</p>
<p class="latin"><span class="font-bold text-xl text-red-400">S</span>equéntia <span class="cross">+</span> sancti Evangélii secúndum Ioánnem</p>
<p class="rubric">℟. Glória tibi, Dómine.</p>
<p class="rubric">Ioannes 19:31-37</p>
<p class="latin">In illo témpore: Iudǽi - quóniam Parascéve erat, - ut non remanérent in cruce córpora sábbato - erat enim magnus dies ille sábbati, - rogavérunt Pilátum, ut frangeréntur eórum crura, et tolleréntur. Venérunt ergo mílites: et primi quidem fregérunt crura et alteríus, qui crucifíxus est cum eo. Ad Iesum autem cum veníssent, ut vidérunt eum iam mórtuum, non fregérunt eius crura, sed unus mílitum láncea latus eius apéruit, et contínuo exívit sanguis et aqua. Et qui vidit, testimónium perhíbuit: et verum est testimónium eius. Et ille scit quia vera dicit, ut et vos credátis. Facta sunt enim hæc ut Scriptúra implerétur: Os non comminuétis ex eo. Et íterum alia Scriptúra dicit: Vidébunt in quem transfixérunt.</p>
<p class="rubric">℟. Laus tibi, Christe.</p>
<p class="rubric">℣. Per Evangélica dicta, deléntur nostra delícta.</p>
</div>
<div>
<p class="latin"><span class="font-bold text-xl text-red-400">C</span>leanse my heart and my lips, O almighty God, who didst cleanse the lips of the prophet Isaias with a burning coal, and vouchsafe, through Thy gracious mercy, so to purify me, that I may worthily announce Thy holy Gospel. Through Christ our Lord. Amen.</p>
<p class="latin"><span class="font-bold text-xl text-red-400">G</span>ive me Thy blessing, O Lord. The Lord be in my heart and on my lips, that I may worthily and in a becoming manner, proclaim His holy Gospel. Amen.</p>
<p class="rubric">℣. The Lord be with you.</p>
<p class="rubric">℟. And with thy spirit.</p>
<p class="latin"><span class="font-bold text-xl text-red-400">C</span>ontinuation <span class="cross">✝</span> of the Holy Gospel according to John</p>
<p class="rubric">℟. Glory be to Thee, O Lord.</p>
<p class="rubric">John 19:31-37</p>
<p class="latin">At that time, the Jews, since it was the Preparation Day, in order that the bodies might not remain upon the cross on the Sabbath - for that Sabbath was a solemn day, - besought Pilate that their legs might be broken, and that they might be taken away. The soldiers therefore came and broke the legs of the first, and of the other, who had been crucified with Him. But when they came to Jesus, and saw that He was already dead, they did not break His legs; but one of the soldiers opened His side with a lance, and immediately there came out blood and water. And he who saw it has borne witness, and his witness is true; and he knows that he tells the truth, that you also may believe. For these things came to pass that the Scripture might be fulfilled, Not a bone of Him shall you break. And again another Scripture says, They shall look upon Him Whom they have pierced.</p>
<p class="rubric">℟. Praise be to Thee, O Christ.</p>
<p class="rubric">℣. By the words of the Gospel may our sins be blotted out.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="overlay" class="overlay"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Accordion functionality
const accordionHeaders = document.querySelectorAll('.accordion-header');
accordionHeaders.forEach(header => {
header.addEventListener('click', () => {
const accordionItem = header.parentElement;
const accordionContent = header.nextElementSibling;
const icon = header.querySelector('i');
if (accordionContent.classList.contains('open')) {
accordionContent.classList.remove('open');
icon.classList.remove('rotate-180');
} else {
accordionContent.classList.add('open');
icon.classList.add('rotate-180');
}
});
});
// Open first accordion by default
const firstAccordion = document.querySelector('.accordion-item');
if (firstAccordion) {
const firstContent = firstAccordion.querySelector('.accordion-content');
const firstIcon = firstAccordion.querySelector('.accordion-header i');
firstContent.classList.add('open');
firstIcon.classList.add('rotate-180');
}
// Map navigation functionality
const mapStops = document.querySelectorAll('.map-stop');
const mapLabels = document.querySelectorAll('.map-label');
const accordionItems = document.querySelectorAll('.accordion-item');
mapStops.forEach(stop => {
stop.addEventListener('click', () => {
const sectionId = stop.getAttribute('data-section');
// Remove active class from all stops
mapStops.forEach(s => s.classList.remove('active'));
// Add active class to clicked stop
stop.classList.add('active');
// Scroll to corresponding section
const section = document.getElementById(sectionId);
if (section) {
section.scrollIntoView({ behavior: 'smooth' });
// Open the accordion
const accordionContent = section.querySelector('.accordion-content');
const accordionIcon = section.querySelector('.accordion-header i');
if (!accordionContent.classList.contains('open')) {
accordionContent.classList.add('open');
accordionIcon.classList.add('rotate-180');
}
}
});
});
// Highlight map stop when corresponding section is in view
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
const sectionId = entry.target.id;
const correspondingStop = document.querySelector(`.map-stop[data-section="${sectionId}"]`);
if (entry.isIntersecting) {
mapStops.forEach(s => s.classList.remove('active'));
if (correspondingStop) {
correspondingStop.classList.add('active');
}
}
});
}, { threshold: 0.5 });
accordionItems.forEach(item => {
observer.observe(item);
});
// Hamburger menu for mobile
const hamburger = document.getElementById('hamburger');
const mapContainer = document.getElementById('map-container');
const overlay = document.getElementById('overlay');
if (hamburger && mapContainer && overlay) {
hamburger.addEventListener('click', () => {
mapContainer.classList.toggle('open');
overlay.classList.toggle('open');
});
overlay.addEventListener('click', () => {
mapContainer.classList.remove('open');
overlay.classList.remove('open');
});
}
});
</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/flyinghalfmassed" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |