ItchyDesk/orthodoxprayerpal
0
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>OrthodoxPrayerPal - Orthodox Spiritual Companion</title>7<link rel="icon" type="image/x-icon" href="/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>11 <style>12 @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');13 14 body {15 font-family: 'Cormorant Garamond', serif;16 }17 18 .title-font {19 font-family: 'Playfair Display', serif;20 }21 22 .byzantine-border {23 border: 2px solid #d4a762;24 border-radius: 0 20px 0 20px;25 }26 27 .iconic-shadow {28 box-shadow: 0 4px 15px rgba(212, 167, 98, 0.3);29 }30 31 .candle-flame {32 background: linear-gradient(to top, #ffd700, #ff8c00);33 border-radius: 50% 50% 20% 20%;34 box-shadow: 0 0 20px 5px #ff8c00, 0 0 40px 10px #ff4500;35 animation: flicker 2s infinite alternate;36 }37 38 @keyframes flicker {39 0%, 100% { transform: scale(1); opacity: 1; }40 50% { transform: scale(1.1); opacity: 0.8; }41 }42 43 .fresco-bg {44 background-image: url('http://static.photos/vintage/1024x576/42');45 background-size: cover;46 background-position: center;47 background-blend-mode: overlay;48 background-color: rgba(20, 20, 30, 0.9);49 }50 </style>51</head>52<body class="bg-gray-900 text-amber-50 min-h-screen">53 <div id="vanta-bg" class="fixed inset-0 opacity-20 z-0"></div>54 55 <header class="relative z-10 bg-gray-900 bg-opacity-80 backdrop-blur-sm border-b border-amber-800">56 <div class="container mx-auto px-4 py-6">57 <div class="flex justify-between items-center">58 <div class="flex items-center space-x-4">59 <i data-feather="cross" class="text-amber-500 w-8 h-8"></i>60 <h1 class="title-font text-2xl md:text-3xl text-amber-200">OrthodoxPrayerPal</h1>61</div>62 <div class="hidden md:flex space-x-6">63 <button id="prayersBtn" class="text-amber-100 hover:text-amber-300 transition">Prayers</button>64 <button id="saintsBtn" class="text-amber-100 hover:text-amber-300 transition">Saints</button>65 <button id="gospelBtn" class="text-amber-100 hover:text-amber-300 transition">Gospel</button>66 <button id="calendarBtn" class="text-amber-100 hover:text-amber-300 transition">Calendar</button>67 <button id="candleBtn" class="text-amber-100 hover:text-amber-300 transition">Candle</button>68 </div>69 <button class="md:hidden" id="mobileMenuBtn">70 <i data-feather="menu" class="w-6 h-6 text-amber-300"></i>71 </button>72 </div>73 </div>74 </header>75 76 <main class="relative z-10 pb-20">77 <!-- Hero Section -->78 <section class="fresco-bg py-20 px-4">79 <div class="container mx-auto text-center">80 <h2 class="title-font text-4xl md:text-6xl mb-6 text-amber-100">Welcome to OrthodoxPrayerPal</h2>81<p class="text-xl md:text-2xl mb-8 text-amber-200 max-w-3xl mx-auto">Your digital companion for Orthodox Christian spirituality, prayer, and daily devotion.</p>82 <div class="flex flex-wrap justify-center gap-4">83 <button class="bg-amber-700 hover:bg-amber-600 text-amber-50 px-6 py-3 rounded-md transition">Today's Prayers</button>84 <button class="border border-amber-600 hover:bg-amber-800 hover:bg-opacity-40 text-amber-200 px-6 py-3 rounded-md transition">Light a Candle</button>85 </div>86 </div>87 </section>88 89 <!-- Features Grid -->90 <section class="py-16 px-4">91 <div class="container mx-auto">92 <h2 class="title-font text-3xl text-center mb-12 text-amber-100">Sacred Features</h2>93 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">94 <!-- Prayer Card -->95 <div class="bg-gray-800 bg-opacity-70 p-6 rounded-lg byzantine-border iconic-shadow hover:translate-y-1 transition">96 <div class="text-amber-500 mb-4">97 <i data-feather="book-open" class="w-10 h-10"></i>98 </div>99 <h3 class="title-font text-xl mb-3 text-amber-100">Daily Prayers</h3>100 <p class="text-amber-200 mb-4">Morning and evening prayers, communion preparation, and seasonal prayers.</p>101 <button class="text-amber-400 hover:text-amber-300 flex items-center">102 Open <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>103 </button>104 </div>105 106 <!-- Saints Card -->107 <div class="bg-gray-800 bg-opacity-70 p-6 rounded-lg byzantine-border iconic-shadow hover:translate-y-1 transition">108 <div class="text-amber-500 mb-4">109 <i data-feather="users" class="w-10 h-10"></i>110 </div>111 <h3 class="title-font text-xl mb-3 text-amber-100">Lives of Saints</h3>112 <p class="text-amber-200 mb-4">Daily commemorations with icons, biographies, and spiritual wisdom.</p>113 <button class="text-amber-400 hover:text-amber-300 flex items-center">114 Explore <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>115 </button>116 </div>117 118 <!-- Gospel Card -->119 <div class="bg-gray-800 bg-opacity-70 p-6 rounded-lg byzantine-border iconic-shadow hover:translate-y-1 transition">120 <div class="text-amber-500 mb-4">121 <i data-feather="book" class="w-10 h-10"></i>122 </div>123 <h3 class="title-font text-xl mb-3 text-amber-100">Gospel Readings</h3>124 <p class="text-amber-200 mb-4">Daily scripture readings with commentary from Church Fathers.</p>125 <button class="text-amber-400 hover:text-amber-300 flex items-center">126 Read <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>127 </button>128 </div>129 130 <!-- Calendar Card -->131 <div class="bg-gray-800 bg-opacity-70 p-6 rounded-lg byzantine-border iconic-shadow hover:translate-y-1 transition">132 <div class="text-amber-500 mb-4">133 <i data-feather="calendar" class="w-10 h-10"></i>134 </div>135 <h3 class="title-font text-xl mb-3 text-amber-100">Church Calendar</h3>136 <p class="text-amber-200 mb-4">Feasts, fasts, and commemorations throughout the liturgical year.</p>137 <button class="text-amber-400 hover:text-amber-300 flex items-center">138 View <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>139 </button>140 </div>141 </div>142 </div>143 </section>144 145 <!-- Candle Section -->146 <section class="py-16 px-4 bg-gray-800 bg-opacity-50">147 <div class="container mx-auto">148 <div class="flex flex-col md:flex-row items-center">149 <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">150 <h2 class="title-font text-3xl mb-6 text-amber-100">Virtual Candle Lighting</h2>151 <p class="text-amber-200 mb-6">Offer a prayer with our virtual candle lighting. While not replacing actual church candles, this can be a meaningful way to focus your prayer intentions.</p>152 <button class="bg-amber-700 hover:bg-amber-600 text-amber-50 px-6 py-3 rounded-md transition flex items-center">153 <i data-feather="zap" class="mr-2"></i> Light a Candle154 </button>155 </div>156 <div class="md:w-1/2 flex justify-center">157 <div class="relative">158 <div class="w-24 h-48 bg-gradient-to-b from-amber-100 to-amber-300 rounded-md mx-auto"></div>159 <div class="candle-flame w-6 h-12 absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-full"></div>160 <div class="text-center mt-4 text-amber-300">Click to light</div>161 </div>162 </div>163 </div>164 </div>165 </section>166 167 <!-- Daily Saint -->168 <section class="py-16 px-4">169 <div class="container mx-auto">170 <h2 class="title-font text-3xl text-center mb-12 text-amber-100">Saint of the Day</h2>171 <div class="max-w-4xl mx-auto bg-gray-800 bg-opacity-70 p-8 rounded-lg byzantine-border">172 <div class="flex flex-col md:flex-row gap-8">173 <div class="md:w-1/3 flex justify-center">174 <img src="http://static.photos/vintage/320x240/7" alt="Icon of Saint" class="rounded-lg border border-amber-600 w-full max-w-xs">175 </div>176 <div class="md:w-2/3">177 <h3 class="title-font text-2xl mb-4 text-amber-100">St. John Chrysostom</h3>178 <p class="text-amber-200 mb-4"><span class="font-semibold text-amber-300">Commemorated:</span> November 13</p>179 <p class="text-amber-200 mb-4">Archbishop of Constantinople, brilliant preacher and interpreter of Scripture known for his divine eloquence.</p>180 <blockquote class="border-l-4 border-amber-500 pl-4 my-6 italic text-amber-200">181 "The road to Hell is paved with the bones of priests and monks, and the skulls of bishops are the lamp posts that light the path."182 </blockquote>183 <button class="text-amber-400 hover:text-amber-300 flex items-center">184 Read More <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>185 </button>186 </div>187 </div>188 </div>189 </div>190 </section>191 </main>192 193 <footer class="relative z-10 bg-gray-900 bg-opacity-90 border-t border-amber-900 py-8">194 <div class="container mx-auto px-4">195 <div class="flex flex-col md:flex-row justify-between items-center">196 <div class="mb-4 md:mb-0">197 <div class="flex items-center space-x-2">198 <i data-feather="cross" class="text-amber-500"></i>199 <span class="title-font text-lg text-amber-200">OrthodoxPrayerPal</span>200 </div>201 <p class="text-amber-400 text-sm mt-2">Your Daily Orthodox Companion</p>202</div>203 <div class="flex space-x-4">204 <a href="#" class="text-amber-400 hover:text-amber-300"><i data-feather="facebook"></i></a>205 <a href="#" class="text-amber-400 hover:text-amber-300"><i data-feather="instagram"></i></a>206 <a href="#" class="text-amber-400 hover:text-amber-300"><i data-feather="twitter"></i></a>207 </div>208 </div>209 <div class="border-t border-amber-900 mt-6 pt-6 text-center text-amber-500 text-sm">210 <p>© 2023 OrthodoxPrayerPal. All spiritual content is property of the Orthodox Church.</p>211<p class="mt-2">This application is not affiliated with any specific Orthodox jurisdiction.</p>212 </div>213 </div>214 </footer>215 216 <!-- Mobile Menu -->217 <div id="mobileMenu" class="fixed inset-0 bg-gray-900 bg-opacity-95 z-50 hidden flex flex-col items-center justify-center">218 <button id="closeMobileMenu" class="absolute top-6 right-6 text-amber-300">219 <i data-feather="x" class="w-8 h-8"></i>220 </button>221 <div class="flex flex-col items-center space-y-8">222 <button class="text-2xl text-amber-200 hover:text-amber-300">Prayers</button>223 <button class="text-2xl text-amber-200 hover:text-amber-300">Saints</button>224 <button class="text-2xl text-amber-200 hover:text-amber-300">Gospel</button>225 <button class="text-2xl text-amber-200 hover:text-amber-300">Calendar</button>226 <button class="text-2xl text-amber-200 hover:text-amber-300">Candle</button>227 </div>228 </div>229 230 <script>231 // Initialize Vanta.js background232 VANTA.NET({233 el: "#vanta-bg",234 mouseControls: true,235 touchControls: true,236 gyroControls: false,237 minHeight: 200.00,238 minWidth: 200.00,239 scale: 1.00,240 scaleMobile: 1.00,241 color: 0xd4a762,242 backgroundColor: 0x11111b,243 points: 10.00,244 maxDistance: 22.00,245 spacing: 17.00246 });247 248 // Mobile menu functionality249 const mobileMenuBtn = document.getElementById('mobileMenuBtn');250 const mobileMenu = document.getElementById('mobileMenu');251 const closeMobileMenu = document.getElementById('closeMobileMenu');252 253 mobileMenuBtn.addEventListener('click', () => {254 mobileMenu.classList.remove('hidden');255 mobileMenu.classList.add('flex');256 });257 258 closeMobileMenu.addEventListener('click', () => {259 mobileMenu.classList.add('hidden');260 mobileMenu.classList.remove('flex');261 });262 263 // Feather icons264 feather.replace();265 266 // Candle lighting animation267 const candle = document.querySelector('.candle-flame');268 let isLit = false;269 270 candle.addEventListener('click', () => {271 isLit = !isLit;272 if (isLit) {273 candle.style.animation = 'flicker 2s infinite alternate';274 candle.style.opacity = '1';275 } else {276 candle.style.animation = 'none';277 candle.style.opacity = '0';278 }279 });280 </script>281</body>282</html>283