mth3h4mm3r/html-css-js
0
1 2<!DOCTYPE html>3<html lang="uk">4<head>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <title>Святе Писання - Онлайн Біблія</title>8 <link rel="stylesheet" href="style.css">9 <script src="https://cdn.tailwindcss.com"></script>10</head>11<body class="bg-gray-50 min-h-screen flex">12 <!-- Sidebar Navigation -->13 <aside class="w-80 bg-white shadow-lg h-screen sticky top-0 overflow-y-auto">14 <div class="p-4">15 <h2 class="text-xl font-bold text-gray-800 mb-4">Навігація по Біблії</h2>16 <!-- Testaments with Books -->17 <div id="testaments" class="mb-6">18 <h3 class="text-lg font-semibold text-gray-700 mb-2">Заповіти</h3>19 <div id="testamentList" class="space-y-2"></div>20 </div>21</div>22 </aside>23 24 <!-- Main Content -->25 <main class="flex-grow container mx-auto px-4 py-8">26 <div class="max-w-4xl mx-auto">27 <!-- Bible Text Display -->28 <div id="bibleText" class="bg-white rounded-lg shadow-lg p-8 hidden">29 <div class="flex justify-between items-center mb-6">30 <h2 id="chapterTitle" class="text-3xl font-bold text-gray-800"></h2>31 <div class="flex gap-2">32 <button onclick="previousChapter()" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition duration-200">33 ←34 </button>35 <button onclick="nextChapter()" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition duration-200">36 →37 </button>38 </div>39 </div>40 <div id="verses" class="space-y-4 text-gray-700 leading-relaxed text-lg"></div>41 </div>42 </div>43 </main>44 45 <script src="script.js"></script>46</body>47</html>48