brickwizard60/holy-scriptures-rpg-tracker
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>Holy Scriptures RPG Tracker</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <link rel="stylesheet" href="style.css">11</head>12<body class="bg-gray-900 text-white min-h-screen">13 <custom-header></custom-header>14 15 <main class="container mx-auto px-4 py-12">16 <section class="mb-16">17 <div class="text-center mb-12">18 <h1 class="text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-yellow-400 to-amber-600">Jesus Christ RNG</h1>19 <p class="text-xl text-gray-300 max-w-3xl mx-auto">Track your divine journey through the five realms of creation</p>20 </div>21 22 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">23 <!-- Region Cards -->24 <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">25 <div class="h-48 bg-cover bg-center" style="background-image: url('http://static.photos/aerial/640x360/1')"></div>26 <div class="p-6">27 <h3 class="text-2xl font-bold mb-2 text-amber-400">The Garden of Origins</h3>28 <p class="text-gray-300 mb-4">Rediscover the birthplace of mankind</p>29 <div class="flex justify-between items-center">30 <span class="text-sm text-amber-300">Completion: 25%</span>31 <a href="garden.html" class="px-4 py-2 bg-amber-600 rounded-lg hover:bg-amber-700 transition">Explore</a>32 </div>33 </div>34 </div>35 36 <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">37 <div class="h-48 bg-cover bg-center" style="background-image: url('http://static.photos/black/640x360/2')"></div>38 <div class="p-6">39 <h3 class="text-2xl font-bold mb-2 text-red-400">The Wastes of Sin</h3>40 <p class="text-gray-300 mb-4">Survive the corrupted lands of fallen man</p>41 <div class="flex justify-between items-center">42 <span class="text-sm text-red-300">Completion: 10%</span>43 <a href="wastes.html" class="px-4 py-2 bg-red-600 rounded-lg hover:bg-red-700 transition">Explore</a>44 </div>45 </div>46 </div>47 48 <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">49 <div class="h-48 bg-cover bg-center" style="background-image: url('http://static.photos/red/640x360/3')"></div>50 <div class="p-6">51 <h3 class="text-2xl font-bold mb-2 text-red-500">Abyssal Hellscape</h3>52 <p class="text-gray-300 mb-4">Descend into the depths of damnation</p>53 <div class="flex justify-between items-center">54 <span class="text-sm text-red-400">Completion: 0%</span>55 <a href="abyss.html" class="px-4 py-2 bg-red-800 rounded-lg hover:bg-red-900 transition">Explore</a>56 </div>57 </div>58 </div>59 </div>60 </section>61 62 <section class="mb-16">63 <h2 class="text-3xl font-bold mb-8 text-center">Your Divine Progression</h2>64 <div class="bg-gray-800 rounded-xl p-6 shadow-lg">65 <div class="grid grid-cols-1 md:grid-cols-3 gap-6">66 <div class="text-center">67 <div class="radial-progress text-amber-500 mx-auto" style="--value:65; --size:12rem; --thickness: 1rem;">65%</div>68 <h3 class="text-xl font-semibold mt-4">Faith</h3>69 <p class="text-gray-300">Miracles & Healing</p>70 </div>71 <div class="text-center">72 <div class="radial-progress text-red-500 mx-auto" style="--value:42; --size:12rem; --thickness: 1rem;">42%</div>73 <h3 class="text-xl font-semibold mt-4">Wrath</h3>74 <p class="text-gray-300">Holy Fire & Smite</p>75 </div>76 <div class="text-center">77 <div class="radial-progress text-purple-500 mx-auto" style="--value:28; --size:12rem; --thickness: 1rem;">28%</div>78 <h3 class="text-xl font-semibold mt-4">Sacrifice</h3>79 <p class="text-gray-300">Support & Martyrdom</p>80 </div>81 </div>82 </div>83 </section>84 </main>85 86 <custom-footer></custom-footer>87 88 <script src="components/header.js"></script>89 <script src="components/footer.js"></script>90 <script src="script.js"></script>91 <script>feather.replace();</script>92<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>93</body>94</html>