Spaces:

CommanderLazarus
/

cosmic-conspiracies-uncovered

Running

App Files Files Community

CommanderLazarus commited on Jan 15

Commit

37bcab5

verified ·

1 Parent(s): 41dcef6

Tell me about the rat temple in India. Tell me about holy rats. Give me their rat types. Also include information about the Monkey King, while detailing monkey temple practices in India. It is about Hanuman and the ratties.

Browse files

Files changed (4) hide show

components/image-card.js +32 -0
components/navbar.js +4 -4
index.html +1 -0
sacred-animals.html +153 -0

components/image-card.js ADDED Viewed

	@@ -0,0 +1,32 @@

+class CustomImageCard extends HTMLElement {
+    connectedCallback() {
+        const image = this.getAttribute('image') || 'http://static.photos/travel/640x360/1';
+        const title = this.getAttribute('title') || 'Image Title';
+        const description = this.getAttribute('description') || 'Description not available';
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .image-card {
+                    transition: all 0.3s ease;
+                }
+                .image-card:hover {
+                    transform: translateY(-5px);
+                    box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.3);
+                }
+                .image-container {
+                    height: 200px;
+                }
+            </style>
+            <div class="image-card bg-gray-800 rounded-xl overflow-hidden border border-gray-700 h-full flex flex-col">
+                <div class="image-container bg-cover bg-center" style="background-image: url('${image}')"></div>
+                <div class="p-4 flex-grow">
+                    <h3 class="text-lg font-bold mb-2">${title}</h3>
+                    <p class="text-gray-400 text-sm">${description}</p>
+                </div>
+            </div>
+        `;
+    }
+}
+customElements.define('custom-image-card', CustomImageCard);

components/navbar.js CHANGED Viewed

@@ -35,9 +35,9 @@ class CustomNavbar extends HTMLElement {
                         <div class="hidden md:flex items-center space-x-8">
                             <a href="#" class="nav-link">NHI Research</a>
                             <a href="#" class="nav-link">Declassified Docs</a>
-                            <a href="#" class="nav-link">Sightings Map</a>
                             <a href="#" class="nav-link">Whistleblowers</a>
-                            <button id="darkModeToggle" class="p-2 rounded-full hover:bg-gray-700">
                                 <i data-feather="moon"></i>
                             </button>
                         </div>
@@ -52,9 +52,9 @@ class CustomNavbar extends HTMLElement {
                         <div class="flex flex-col space-y-4">
                             <a href="#" class="nav-link">NHI Research</a>
                             <a href="#" class="nav-link">Declassified Docs</a>
-                            <a href="#" class="nav-link">Sightings Map</a>
                             <a href="#" class="nav-link">Whistleblowers</a>
-                            <button id="darkModeToggleMobile" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700 w-full">
                                 <i data-feather="moon"></i>
                                 <span>Toggle Dark Mode</span>
                             </button>

                         <div class="hidden md:flex items-center space-x-8">
                             <a href="#" class="nav-link">NHI Research</a>
                             <a href="#" class="nav-link">Declassified Docs</a>
+                            <a href="sacred-animals.html" class="nav-link">Sacred Animals</a>
                             <a href="#" class="nav-link">Whistleblowers</a>
+<button id="darkModeToggle" class="p-2 rounded-full hover:bg-gray-700">
                                 <i data-feather="moon"></i>
                             </button>
                         </div>
                         <div class="flex flex-col space-y-4">
                             <a href="#" class="nav-link">NHI Research</a>
                             <a href="#" class="nav-link">Declassified Docs</a>
+                            <a href="sacred-animals.html" class="nav-link">Sacred Animals</a>
                             <a href="#" class="nav-link">Whistleblowers</a>
+<button id="darkModeToggleMobile" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700 w-full">
                                 <i data-feather="moon"></i>
                                 <span>Toggle Dark Mode</span>
                             </button>

index.html CHANGED Viewed

@@ -11,6 +11,7 @@
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
 <script src="components/news-card.js"></script>
 </head>
 <body class="bg-gray-900 text-gray-100 min-h-screen">
     <custom-navbar></custom-navbar>

     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
 <script src="components/news-card.js"></script>
+<script src="components/image-card.js"></script>
 </head>
 <body class="bg-gray-900 text-gray-100 min-h-screen">
     <custom-navbar></custom-navbar>

sacred-animals.html ADDED Viewed

	@@ -0,0 +1,153 @@

+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sacred Animals of India | Karni Mata & Hanuman Temples</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="components/image-card.js"></script>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-8">
+        <!-- Hero Section -->
+        <section class="relative h-96 rounded-xl overflow-hidden mb-12 bg-[url('http://static.photos/travel/1200x630/42')] bg-cover bg-center">
+            <div class="absolute inset-0 bg-gradient-to-r from-amber-900/80 to-yellow-900/80"></div>
+            <div class="absolute inset-0 flex flex-col justify-center items-center text-center px-4">
+                <h1 class="text-4xl md:text-6xl font-bold mb-4">Sacred Animals of India</h1>
+                <p class="text-xl md:text-2xl max-w-3xl mb-8">Where rats are worshipped and monkeys revered</p>
+            </div>
+        </section>
+        <!-- Karni Mata Rat Temple -->
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold mb-8 text-center">Karni Mata Temple - Home of 25,000 Sacred Rats</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
+                <div>
+                    <p class="mb-4">Located in Deshnoke, Rajasthan, the Karni Mata Temple is one of India's most unusual places of worship, home to approximately 25,000 black rats that are revered as holy beings.</p>
+                    <ul class="list-disc pl-5 mb-4 space-y-2">
+                        <li>Built in the early 20th century in Mughal style with marble carvings</li>
+                        <li>Rats are believed to be reincarnated descendants of Karni Mata</li>
+                        <li>Devotees consider eating food nibbled by rats as highly auspicious</li>
+                        <li>Spotting a rare white rat brings exceptional good fortune</li>
+                    </ul>
+                </div>
+                <div class="bg-gray-800 rounded-xl p-4 border border-gray-700">
+                    <h3 class="text-xl font-bold mb-4 text-center">Types of Sacred Rats</h3>
+                    <div class="grid grid-cols-2 gap-4">
+                        <div class="bg-gray-700/50 p-3 rounded-lg">
+                            <h4 class="font-medium text-amber-400 mb-1">Black Rats</h4>
+                            <p class="text-sm">Most common, considered regular devotees</p>
+                        </div>
+                        <div class="bg-gray-700/50 p-3 rounded-lg">
+                            <h4 class="font-medium text-yellow-200 mb-1">White Rats</h4>
+                            <p class="text-sm">Extremely rare, believed to be Karni Mata or her sons</p>
+                        </div>
+                        <div class="bg-gray-700/50 p-3 rounded-lg">
+                            <h4 class="font-medium text-amber-300 mb-1">Golden Rats</h4>
+                            <p class="text-sm">Occasional sightings, signify divine blessings</p>
+                        </div>
+                        <div class="bg-gray-700/50 p-3 rounded-lg">
+                            <h4 class="font-medium text-gray-300 mb-1">Temple Guardians</h4>
+                            <p class="text-sm">Older rats that protect the temple grounds</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Temple Practices -->
+        <section class="mb-16 bg-gray-800 rounded-xl p-8 border border-gray-700">
+            <h2 class="text-3xl font-bold mb-6 text-center">Temple Rituals & Practices</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div class="bg-gray-700/30 p-6 rounded-lg">
+                    <h3 class="text-xl font-bold mb-3 flex items-center">
+                        <i data-feather="moon" class="mr-2 text-amber-400"></i> Night Feeding
+                    </h3>
+                    <p>Priests prepare massive quantities of grain, milk and sweets each evening for the rats' nocturnal feasts.</p>
+                </div>
+                <div class="bg-gray-700/30 p-6 rounded-lg">
+                    <h3 class="text-xl font-bold mb-3 flex items-center">
+                        <i data-feather="heart" class="mr-2 text-amber-400"></i> Rat Blessings
+                    </h3>
+                    <p>Devotees sit quietly allowing rats to crawl over them, considered a sacred blessing from the deities.</p>
+                </div>
+                <div class="bg-gray-700/30 p-6 rounded-lg">
+                    <h3 class="text-xl font-bold mb-3 flex items-center">
+                        <i data-feather="shield" class="mr-2 text-amber-400"></i> Protection
+                    </h3>
+                    <p>Killing a rat in the temple requires replacing it with a gold or silver rat statue as penance.</p>
+                </div>
+            </div>
+        </section>
+        <!-- Hanuman Monkey Temples -->
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold mb-8 text-center">Hanuman & Monkey Temples</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div>
+                    <h3 class="text-2xl font-bold mb-4">The Monkey King</h3>
+                    <p class="mb-4">Hanuman, the monkey god, is one of Hinduism's most beloved deities, known for his strength, devotion and role in the Ramayana epic.</p>
+                    <ul class="list-disc pl-5 mb-4 space-y-2">
+                        <li>Son of the wind god Vayu, possesses immense strength and magical powers</li>
+                        <li>Played crucial role in rescuing Sita from demon king Ravana</li>
+                        <li>Symbol of loyalty, courage and selfless service</li>
+                        <li>Worshipped on Tuesdays and Saturdays with special prayers</li>
+                    </ul>
+                </div>
+                <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
+                    <h3 class="text-xl font-bold mb-4">Famous Monkey Temples</h3>
+                    <div class="space-y-4">
+                        <div>
+                            <h4 class="font-bold text-amber-400">Galta Ji, Jaipur</h4>
+                            <p class="text-sm">Home to hundreds of monkeys who bathe in the temple's sacred pools.</p>
+                        </div>
+                        <div>
+                            <h4 class="font-bold text-amber-400">Vrindavan Hanuman Temple</h4>
+                            <p class="text-sm">Features a 40-foot tall statue of Hanuman where monkeys freely roam.</p>
+                        </div>
+                        <div>
+                            <h4 class="font-bold text-amber-400">Jakhu Temple, Shimla</h4>
+                            <p class="text-sm">Hilltop temple with aggressive monkeys who steal food from visitors.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Image Gallery -->
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold mb-8 text-center">Sacred Animal Gallery</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <custom-image-card
+                    image="http://static.photos/temple/640x360/1"
+                    title="Karni Mata Rat Temple"
+                    description="Devotees feeding the sacred rats at Deshnoke">
+                </custom-image-card>
+                <custom-image-card
+                    image="http://static.photos/monkeys/640x360/2"
+                    title="Hanuman Statue"
+                    description="Monkeys gathering around a Hanuman idol in Vrindavan">
+                </custom-image-card>
+                <custom-image-card
+                    image="http://static.photos/ritual/640x360/3"
+                    title="Rat Blessing Ceremony"
+                    description="A priest performing rituals with the temple rats">
+                </custom-image-card>
+            </div>
+        </section>
+    </main>
+    <custom-footer></custom-footer>
+    <script>
+        feather.replace();
+    </script>
+    <script src="script.js"></script>
+</body>
+</html>