<!DOCTYPE html>
<html lang="ta" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>குருவாயூர் மஹாத்மியம் - ஓர் ஊடாடும் அனுபவம்</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Tamil:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Noto Sans Tamil', sans-serif;
}
.chart-container {
position: relative;
width: 100%;
max-width: 700px;
margin-left: auto;
margin-right: auto;
height: 350px;
max-height: 400px;
}
/* Custom scrollbar for better aesthetics */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #D97706;
border-radius: 4px;
}
.step-connector::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
width: 2px;
height: 20px;
background-color: #cbd5e1;
transform: translateX(-50%);
}
.step-connector:last-child::after {
display: none;
}
</style>
<!-- Chosen Palette: Warm Neutrals & Spiritual Gold. Background: #FFFBEB (Warm Beige), Primary Text: #451a03 (Deep Brown), Accents: #D97706 (Gold/Amber) & #15803d (Tulsi Green). Designed to evoke the feeling of Sandalwood, Lamps, and Tulsi. -->
<!-- Application Structure Plan:
1. **Hero & Invocation:** Sets the spiritual tone immediately with the Sloka and introduction.
2. **Janamejaya's History (Timeline):** A vertical interactive stepper to explain the cause-and-effect of the legend clearly.
3. **The Healing Miracle (Data Viz):** A Chart.js line chart visualizing the 40-day recovery process, turning the "Mandalam" concept into tangible data.
4. **Idol's Journey (Flow):** A card-based process flow showing the movement of the idol from Vaikuntham to Kerala.
5. **Devotee Stories (Tabs):** Tabbed interface to switch between Bhattathiri and Poonthanam, allowing focused reading without clutter.
6. **Krishnanattam (Grid):** A cultural section displaying the art form's details in a clean grid.
7. **Temple Info (Table):** Practical information presented clearly.
This structure moves from Myth -> Evidence (Healing) -> Origin (Idol) -> Human Connection (Devotees) -> Culture -> Practicality.
-->
<!-- Visualization & Content Choices:
1. Healing Chart: Goal -> Inform/Change. Method -> Line Chart (Chart.js). Interaction -> Tooltips showing details per week. Justification -> Visualizing "gradual healing" is more impactful than a list.
2. Janamejaya Timeline: Goal -> Change/Process. Method -> Vertical Flex List with Icons. Interaction -> Hover effects. Justification -> Linear storytelling.
3. Idol Journey: Goal -> Process/Flow. Method -> Styled Cards with directional cues. Justification -> Shows the passage of time and location changes.
4. No SVG/Mermaid Confirmation: Unicode icons and HTML/CSS shapes used instead.
-->
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
</head>
<body class="bg-[#FFFBEB] text-slate-800">
<!-- Navigation -->
<nav class="sticky top-0 z-50 bg-[#FFFBEB]/95 backdrop-blur shadow-md border-b border-orange-100">
<div class="max-w-6xl mx-auto px-4">
<div class="flex justify-between items-center h-16">
<span class="text-xl font-bold text-amber-700">குருவாயூர் மஹாத்மியம்</span>
<div class="hidden md:flex space-x-6 text-sm font-semibold text-amber-900">
<a href="#history" class="hover:text-amber-600 transition">வரலாறு</a>
<a href="#healing" class="hover:text-amber-600 transition">நிவாரணம்</a>
<a href="#idol" class="hover:text-amber-600 transition">விக்ரகம்</a>
<a href="#devotees" class="hover:text-amber-600 transition">பக்தர்கள்</a>
<a href="#art" class="hover:text-amber-600 transition">கலை</a>
</div>
<!-- Mobile Menu Button (Functional via JS) -->
<button id="mobile-menu-btn" class="md:hidden text-amber-800 focus:outline-none text-2xl">
☰
</button>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden pb-4">
<a href="#history" class="block py-2 text-amber-900 hover:bg-orange-100 px-2 rounded">வரலாறு</a>
<a href="#healing" class="block py-2 text-amber-900 hover:bg-orange-100 px-2 rounded">நிவாரணம்</a>
<a href="#idol" class="block py-2 text-amber-900 hover:bg-orange-100 px-2 rounded">விக்ரகம்</a>
<a href="#devotees" class="block py-2 text-amber-900 hover:bg-orange-100 px-2 rounded">பக்தர்கள்</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<header class="relative bg-gradient-to-b from-orange-100 to-[#FFFBEB] py-16 px-4 text-center">
<div class="max-w-4xl mx-auto">
<div class="mb-4 text-amber-600 text-4xl">🕉️</div>
<h1 class="text-3xl md:text-5xl font-bold text-amber-800 mb-6 leading-tight">
பூலோக வைகுண்டம்: குருவாயூர்
</h1>
<p class="text-lg text-slate-700 mb-8 max-w-2xl mx-auto">
நாரத புராணத்தில் குறிப்பிடப்பட்டுள்ள "ரோகஹர க்ஷேத்ரம்". இது வெறும் புராணக் கதை அல்ல; நம்பிக்கையின் சக்தி மற்றும் தெய்வீக அருளின் சாட்சி.
</p>
<div class="bg-white p-6 rounded-xl shadow-lg border-l-4 border-amber-500 max-w-2xl mx-auto transform hover:scale-[1.02] transition duration-300">
<p class="font-bold text-amber-800 mb-2">தினசரி வந்தன ஸ்லோகம்</p>
<p class="italic text-slate-600 mb-3">"குருவாயுபுரே ரம்யே வாசுதேவ: சதா ஸ்தித: |<br>பக்தானாம் ரோகஹந்தாஸௌ ஸ்வயம் ஸ்ரீகிருஷ்ணரூபத்ருக் ||"</p>
<p class="text-sm text-slate-500">பொருள்: அழகிய குருவாயூரில், பக்தர்களின் நோய்களைப் போக்கும் ஸ்ரீகிருஷ்ண வடிவில் வாசுதேவன் எப்போதும் உறைகிறார்.</p>
</div>
</div>
</header>
<main class="max-w-6xl mx-auto px-4 py-8 space-y-20">
<!-- Section 1: History (Timeline) -->
<section id="history" class="scroll-mt-20">
<div class="text-center mb-10">
<h2 class="text-2xl font-bold text-amber-800">புராண வரலாறு: ஜனமேஜயனின் கதை</h2>
<p class="text-slate-600 mt-2 max-w-3xl mx-auto">
மகாபாரத வம்சத்து அரசன் ஜனமேஜயன் எவ்வாறு ஒரு சாபத்திற்கு ஆளாகி, பின்னர் குருவாயூரப்பனின் அருளால் மீண்டார் என்பதை விளக்கும் காலவரிசை.
</p>
</div>
<div class="grid md:grid-cols-2 gap-8 items-center">
<div class="space-y-6">
<!-- Step 1 -->
<div class="flex gap-4 relative">
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-red-100 text-red-600 flex items-center justify-center text-xl font-bold z-10 border-2 border-white shadow">🐍</div>
<div class="border-l-2 border-slate-200 pl-8 pb-8 -ml-6 mt-6">
<h3 class="font-bold text-lg text-slate-800">கட்டம் 1: சாபம்</h3>
<p class="text-sm text-slate-600">பரீக்ஷித் மன்னன் முனிவரை அவமதித்ததால், சர்ப்ப ராஜன் தக்ஷகனால் கடிக்கப்பட்டு உயிரிழந்தார். இது கர்ம வினையின் தொடக்கம்.</p>
</div>
</div>
<!-- Step 2 -->
<div class="flex gap-4 relative">
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-orange-100 text-orange-600 flex items-center justify-center text-xl font-bold z-10 border-2 border-white shadow">🔥</div>
<div class="border-l-2 border-slate-200 pl-8 pb-8 -ml-6 mt-6">
<h3 class="font-bold text-lg text-slate-800">கட்டம் 2: பழிவாங்கல்</h3>
<p class="text-sm text-slate-600">தந்தையின் மரணத்திற்கு பழிவாங்க ஜனமேஜயன் 'சர்ப்ப சத்ரம்' (சர்ப்ப யாகம்) நடத்தினார்.</p>
</div>
</div>
<!-- Step 3 -->
<div class="flex gap-4 relative">
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-gray-100 text-gray-600 flex items-center justify-center text-xl font-bold z-10 border-2 border-white shadow">🦠</div>
<div class="border-l-2 border-slate-200 pl-8 pb-8 -ml-6 mt-6">
<h3 class="font-bold text-lg text-slate-800">கட்டம் 3: விளைவு</h3>
<p class="text-sm text-slate-600">யாகத்தின் பாவத்தால் கொடிய குஷ்ட நோய் தாக்கியது.</p>
</div>
</div>
<!-- Step 4 -->
<div class="flex gap-4 relative">
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-xl font-bold z-10 border-2 border-white shadow">🙏</div>
<div class="border-l-0 pl-8 pb-0 -ml-6 mt-6"> <!-- Removed border for last item -->
<h3 class="font-bold text-lg text-slate-800">கட்டம் 4: வழிகாட்டல்</h3>
<p class="text-sm text-slate-600">தத்தாத்ரேய முனிவர் குருவாயூரின் மகிமையை எடுத்துரைத்து, அங்குள்ள காற்றின் தெய்வீக சக்தியை (Divya Shakti) விளக்கினார்.</p>
</div>
</div>
</div>
<div class="bg-white p-6 rounded-2xl shadow-xl border border-amber-100">
<h3 class="text-xl font-bold text-amber-700 mb-4 text-center">✨ தீர்வு: ருத்ர பூமி</h3>
<p class="text-slate-600 text-sm leading-relaxed mb-4">
தத்தாத்ரேயரின் அறிவுரைப்படி, ஜனமேஜயன் குருவாயூர் வந்தடைந்தார். சிவபெருமானே தவமிருந்த இடமாதலால் இது <strong>ருத்ர பூமி</strong> என அழைக்கப்படுகிறது.
</p>
<div class="bg-amber-50 p-4 rounded-lg">
<ul class="space-y-2 text-sm text-amber-900">
<li>✔️ <strong>சிகிச்சை:</strong> ருத்ர தீர்த்தத்தில் நீராடல்</li>
<li>✔️ <strong>மருந்து:</strong> மூலிகை குணம் கொண்ட வாயு (காற்று)</li>
<li>✔️ <strong>காலம்:</strong> 40 நாட்கள் (ஒரு மண்டலம்)</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Section 2: Healing Graph (Chart.js) -->
<section id="healing" class="scroll-mt-20 bg-white rounded-3xl p-6 md:p-10 shadow-sm border border-slate-100">
<div class="text-center mb-8">
<h2 class="text-2xl font-bold text-amber-800">நிவாரணம்: 40 நாள் அற்புதம்</h2>
<p class="text-slate-600 mt-2">
ஜனமேஜயன் குருவாயூரில் தங்கி வழிபட்ட 40 நாட்களில், அவரது உடல்நிலையில் ஏற்பட்ட முன்னேற்றத்தின் தரவுப் பார்வை.
</p>
</div>
<div class="chart-container">
<canvas id="healingChart"></canvas>
</div>
<div class="mt-6 flex flex-wrap justify-center gap-4">
<div class="bg-green-50 px-4 py-2 rounded-full text-green-800 text-xs font-bold border border-green-200">
100% குணம் (40ம் நாள்)
</div>
<div class="bg-blue-50 px-4 py-2 rounded-full text-blue-800 text-xs font-bold border border-blue-200">
தரவு: நாரத புராணம்
</div>
</div>
</section>
<!-- Section 3: Idol Journey (Visual Flow) -->
<section id="idol" class="scroll-mt-20">
<div class="text-center mb-10">
<h2 class="text-2xl font-bold text-amber-800">விக்ரகத்தின் தெய்வீகப் பயணம்</h2>
<p class="text-slate-600 mt-2 max-w-3xl mx-auto">
வைகுண்டத்திலிருந்து பூலோகம் வந்து, பல யுகங்களைக் கடந்து கேரளாவை அடைந்த வரலாறு. இவ்விக்ரகம் மகாவிஷ்ணுவின் முழுமையான 'சதுர்புஜ' வடிவமாகும்.
</p>
</div>
<!-- Horizontal Scroll Container for Flow -->
<div class="flex overflow-x-auto pb-8 space-x-4 md:space-x-8 px-4 hide-scrollbar snap-x">
<!-- Card 1 -->
<div class="flex-shrink-0 w-64 bg-white p-6 rounded-xl shadow-md border-t-4 border-purple-500 snap-center">
<div class="text-2xl mb-2">🌌</div>
<h3 class="font-bold text-slate-800">1. வைகுண்டம்</h3>
<p class="text-xs text-slate-500 mt-2">மகாவிஷ்ணு இவ்விக்ரகத்தை முதலில் பிரம்மாவிடம் அளித்தார்.</p>
</div>
<div class="flex-shrink-0 flex items-center text-slate-300">➔</div>
<!-- Card 2 -->
<div class="flex-shrink-0 w-64 bg-white p-6 rounded-xl shadow-md border-t-4 border-indigo-500 snap-center">
<div class="text-2xl mb-2">⏳</div>
<h3 class="font-bold text-slate-800">2. சத்திய யுகம்</h3>
<p class="text-xs text-slate-500 mt-2">பிரம்மா இதனை சுதபா மற்றும் பிருஷ்ணி தம்பதியிடம் அளித்தார்.</p>
</div>
<div class="flex-shrink-0 flex items-center text-slate-300">➔</div>
<!-- Card 3 -->
<div class="flex-shrink-0 w-64 bg-white p-6 rounded-xl shadow-md border-t-4 border-blue-500 snap-center">
<div class="text-2xl mb-2">👑</div>
<h3 class="font-bold text-slate-800">3. வாமன அவதாரம்</h3>
<p class="text-xs text-slate-500 mt-2">கஷ்யபர் மற்றும் அதிதி தேவியால் வழிபடப்பட்டது.</p>
</div>
<div class="flex-shrink-0 flex items-center text-slate-300">➔</div>
<!-- Card 4 -->
<div class="flex-shrink-0 w-64 bg-white p-6 rounded-xl shadow-md border-t-4 border-green-500 snap-center">
<div class="text-2xl mb-2">🦚</div>
<h3 class="font-bold text-slate-800">4. த்வாரகை</h3>
<p class="text-xs text-slate-500 mt-2">ஸ்ரீ கிருஷ்ணர் துவாரகையில் தினமும் பூஜித்த விக்ரகம் இதுவே.</p>
</div>
<div class="flex-shrink-0 flex items-center text-slate-300">➔</div>
<!-- Card 5 -->
<div class="flex-shrink-0 w-64 bg-white p-6 rounded-xl shadow-md border-t-4 border-yellow-500 snap-center">
<div class="text-2xl mb-2">🌊</div>
<h3 class="font-bold text-slate-800">5. பிரளயம்</h3>
<p class="text-xs text-slate-500 mt-2">த்வாரகை அழியும் போது உத்தவர் மூலம் மீட்கப்பட்டது.</p>
</div>
<div class="flex-shrink-0 flex items-center text-slate-300">➔</div>
<!-- Card 6 -->
<div class="flex-shrink-0 w-64 bg-white p-6 rounded-xl shadow-md border-t-4 border-orange-500 snap-center">
<div class="text-2xl mb-2">🌬️</div>
<h3 class="font-bold text-slate-800">6. குரு & வாயு</h3>
<p class="text-xs text-slate-500 mt-2">குரு பகவானும் வாயு தேவனும் இதனை எடுத்து வந்தனர்.</p>
</div>
<div class="flex-shrink-0 flex items-center text-slate-300">➔</div>
<!-- Card 7 -->
<div class="flex-shrink-0 w-64 bg-amber-100 p-6 rounded-xl shadow-lg border-2 border-amber-400 snap-center">
<div class="text-2xl mb-2">🛕</div>
<h3 class="font-bold text-amber-900">7. குருவாயூர்</h3>
<p class="text-xs text-amber-800 mt-2">சிவபெருமானின் ஆசியுடன் ருத்ர தீர்த்தக் கரையில் பிரதிஷ்டை செய்யப்பட்டது.</p>
</div>
</div>
<p class="text-center text-xs text-slate-400 mt-2 md:hidden">நகர்த்த ஸ்வைப் செய்யவும் (Swipe to scroll)</p>
</section>
<!-- Section 4: Devotees (Interactive Tabs) -->
<section id="devotees" class="scroll-mt-20">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-8">
<h2 class="text-2xl font-bold text-amber-800">பக்தர்களின் அனுபவங்கள்</h2>
<p class="text-slate-600 mt-2">
ஞானத்தால் இறைவனை அடைந்தவரும், பக்தியால் இறைவனை அடைந்தவரும்.
</p>
</div>
<!-- Tabs -->
<div class="flex justify-center space-x-4 mb-6">
<button onclick="showDevotee('bhattathiri')" id="btn-bhattathiri" class="px-6 py-2 rounded-full font-bold transition duration-300 bg-amber-600 text-white shadow-lg">
நாராயண பட்டத்ரி
</button>
<button onclick="showDevotee('poonthanam')" id="btn-poonthanam" class="px-6 py-2 rounded-full font-bold transition duration-300 bg-white text-slate-600 border border-slate-200 hover:bg-slate-50">
பூந்தானம் நம்பூதிரி
</button>
</div>
<!-- Content Area -->
<div class="bg-white p-8 rounded-2xl shadow-lg border border-amber-100 min-h-[300px]">
<!-- Bhattathiri Content -->
<div id="content-bhattathiri" class="animate-fade-in">
<div class="flex items-start gap-4">
<div class="bg-amber-100 p-3 rounded-lg text-2xl">📜</div>
<div>
<h3 class="text-xl font-bold text-slate-800">மேல்பத்தூர் நாராயண பட்டத்ரி - அறிஞரின் பக்தி</h3>
<p class="text-amber-600 font-semibold text-sm mt-1">படைப்பு: நாராயணீயம் (1034 ஸ்லோகங்கள்)</p>
</div>
</div>
<div class="mt-6 space-y-4 text-slate-600 leading-relaxed">
<p><strong>வரலாறு:</strong> கடுமையான வாத நோயால் பாதிக்கப்பட்ட இவர், குருவாயூரப்பனைப் புகழ்ந்து பாடினார். ஒவ்வொரு தசகம் (10 ஸ்லோகம்) முடியும் போதும் அவரது நோய் படிப்படியாக குணமானது.</p>
<div class="bg-slate-50 p-4 rounded-lg border-l-4 border-amber-400 italic">
"குருவாயூர் அப்பனை வணங்குவோர், இவ்வுலக துன்பங்களிலிருந்து விடுபட்டு, நித்ய ஆனந்தத்தை அடைவர்."
</div>
</div>
</div>
<!-- Poonthanam Content -->
<div id="content-poonthanam" class="hidden animate-fade-in">
<div class="flex items-start gap-4">
<div class="bg-green-100 p-3 rounded-lg text-2xl">🙏</div>
<div>
<h3 class="text-xl font-bold text-slate-800">பூந்தானம் நம்பூதிரி - எளிய பக்தி</h3>
<p class="text-green-600 font-semibold text-sm mt-1">படைப்பு: ஞானப்பன (மலையாளக் காவியம்)</p>
</div>
</div>
<div class="mt-6 space-y-4 text-slate-600 leading-relaxed">
<p><strong>வரலாறு:</strong> சமஸ்கிருதம் அறியாத எளிய பக்தர். இவரது தூய அன்பிற்கு கட்டுப்பட்டு, பகவான் குழந்தை கிருஷ்ணனாக நேரில் வந்து விளையாடினார். பாண்டித்தியத்தை விட பக்தியே பெரிது என்பதை உலகம் இவரால் அறிந்தது.</p>
<div class="bg-slate-50 p-4 rounded-lg border-l-4 border-green-400 italic">
"கிருஷ்ணா, நீயே என் குரு, நீயே என் தெய்வம். உன்னைத் தவிர வேறு புகலிடம் எனக்கு இல்லை."
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section 5: Krishnanattam (Grid) -->
<section id="art" class="scroll-mt-20">
<div class="bg-[#fcf8f2] rounded-3xl p-8 border border-amber-100">
<div class="text-center mb-8">
<h2 class="text-2xl font-bold text-amber-800">கிருஷ்ணாட்டம்: தெய்வீகக் கலை</h2>
<p class="text-slate-600 mt-2 max-w-2xl mx-auto">
17-ஆம் நூற்றாண்டில் உருவான கலை வடிவம். கோழிக்கோடு சாமூத்திரி மன்னர் மானவேதனால் "கிருஷ்ணகீதி" அடிப்படையில் உருவாக்கப்பட்டது.
</p>
</div>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-white p-5 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition">
<div class="text-purple-600 font-bold mb-2">தோற்றம்</div>
<p class="text-sm text-slate-600">குருவாயூரில் மட்டுமே நிகழ்த்தப்படும் தனித்துவம். பகவான் கிருஷ்ணர் குழந்தையாக வந்து வில்வமங்கலம் சுவாமியாருடன் விளையாடியதன் நினைவாக உருவானது.</p>
</div>
<div class="bg-white p-5 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition">
<div class="text-purple-600 font-bold mb-2">அமைப்பு</div>
<p class="text-sm text-slate-600">மொத்தம் 8 நாடகங்கள். அவதாரம் முதல் ஸ்வர்க்காரோஹணம் வரை கிருஷ்ணரின் வாழ்க்கையை விவரிக்கிறது.</p>
</div>
<div class="bg-white p-5 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition">
<div class="text-purple-600 font-bold mb-2">வழிபாடு</div>
<p class="text-sm text-slate-600">இது வெறும் கலை அல்ல; பக்தர்கள் தங்கள் வேண்டுதல்களை நிறைவேற்ற பகவானுக்குச் சமர்ப்பிக்கும் ஒரு நேர்த்திக்கடன்.</p>
</div>
</div>
</div>
</section>
<!-- Section 6: Temple Info (Table) -->
<section class="max-w-3xl mx-auto scroll-mt-20">
<h2 class="text-2xl font-bold text-amber-800 mb-6 text-center">கோயில் நேரங்கள்</h2>
<div class="overflow-hidden rounded-xl shadow-lg border border-slate-200">
<table class="w-full text-left border-collapse bg-white">
<thead class="bg-amber-600 text-white">
<tr>
<th class="p-4 font-semibold">நிகழ்வு</th>
<th class="p-4 font-semibold">நேரம்</th>
<th class="p-4 font-semibold hidden sm:table-cell">விவரம்</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100">
<tr class="hover:bg-amber-50 transition">
<td class="p-4 font-medium text-slate-800">நிர்மால்ய தர்ஷனம்</td>
<td class="p-4 text-slate-600">காலை 3:00</td>
<td class="p-4 text-xs text-slate-500 hidden sm:table-cell">மிகவும் புனிதமானது</td>
</tr>
<tr class="hover:bg-amber-50 transition">
<td class="p-4 font-medium text-slate-800">உச்சிக்கால பூஜை</td>
<td class="p-4 text-slate-600">மதியம் 12:30 - 4:30</td>
<td class="p-4 text-xs text-slate-500 hidden sm:table-cell">நடை சாத்தல்</td>
</tr>
<tr class="hover:bg-amber-50 transition">
<td class="p-4 font-medium text-slate-800">மாலை தரிசனம்</td>
<td class="p-4 text-slate-600">மாலை 4:30 - இரவு 9:15</td>
<td class="p-4 text-xs text-slate-500 hidden sm:table-cell">தீபாராதனை நேரம்</td>
</tr>
</tbody>
</table>
</div>
<p class="text-xs text-center text-slate-500 mt-4">* விசேஷ நாட்களில் நேரங்கள் மாறலாம்.</p>
</section>
</main>
<!-- Footer -->
<footer class="bg-amber-900 text-amber-100 py-12 mt-12">
<div class="max-w-4xl mx-auto px-4 text-center">
<h3 class="text-2xl font-bold mb-4">ஓம் நமோ நாராயணாய</h3>
<p class="italic text-lg mb-8 opacity-90">
"தர்மக்ஷேத்ரே குருக்ஷேத்ரே... என்று தொடங்கும் பகவத் கீதையைப் போலவே,<br>
குருபவனபுரே என்று தொடங்கும் பக்தியின் கீதை இங்கே எழுதப்பட்டது."
</p>
<div class="border-t border-amber-800 pt-8 text-sm opacity-75">
<p>குருவாயூர் மஹாத்மியம் - டிஜிட்டல் தொகுப்பு</p>
</div>
</div>
</footer>
<!-- JavaScript Logic -->
<script>
// Data for Chart
const healingData = {
labels: ['வாரம் 1', 'வாரம் 2', 'வாரம் 3', 'வாரம் 4', 'வாரம் 5', 'நாள் 40'],
data: [10, 30, 50, 75, 90, 100]
};
// Initialize Chart
document.addEventListener('DOMContentLoaded', function() {
const ctx = document.getElementById('healingChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: healingData.labels,
datasets: [{
label: 'குணமாகும் சதவீதம் (%)',
data: healingData.data,
borderColor: '#D97706', // Amber-600
backgroundColor: 'rgba(217, 119, 6, 0.1)',
borderWidth: 3,
pointBackgroundColor: '#fff',
pointBorderColor: '#D97706',
pointRadius: 6,
pointHoverRadius: 8,
fill: true,
tension: 0.4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: true,
position: 'bottom',
labels: {
font: { family: "'Noto Sans Tamil', sans-serif" }
}
},
tooltip: {
backgroundColor: '#fff',
titleColor: '#92400e',
bodyColor: '#1e293b',
borderColor: '#fbbf24',
borderWidth: 1,
padding: 10,
displayColors: false,
callbacks: {
label: function(context) {
return `முன்னேற்றம்: ${context.raw}%`;
}
}
}
},
scales: {
y: {
beginAtZero: true,
max: 100,
grid: { color: '#f1f5f9' },
ticks: { font: { family: "'Noto Sans Tamil', sans-serif" } }
},
x: {
grid: { display: false },
ticks: { font: { family: "'Noto Sans Tamil', sans-serif" } }
}
}
}
});
});
// Tab Logic for Devotees Section
function showDevotee(devotee) {
const bhattathiriContent = document.getElementById('content-bhattathiri');
const poonthanamContent = document.getElementById('content-poonthanam');
const btnBhattathiri = document.getElementById('btn-bhattathiri');
const btnPoonthanam = document.getElementById('btn-poonthanam');
if (devotee === 'bhattathiri') {
bhattathiriContent.classList.remove('hidden');
poonthanamContent.classList.add('hidden');
// Style Active Button
btnBhattathiri.classList.add('bg-amber-600', 'text-white', 'shadow-lg');
btnBhattathiri.classList.remove('bg-white', 'text-slate-600', 'border', 'border-slate-200');
// Style Inactive Button
btnPoonthanam.classList.add('bg-white', 'text-slate-600', 'border', 'border-slate-200');
btnPoonthanam.classList.remove('bg-amber-600', 'text-white', 'shadow-lg');
} else {
bhattathiriContent.classList.add('hidden');
poonthanamContent.classList.remove('hidden');
// Style Active Button
btnPoonthanam.classList.add('bg-amber-600', 'text-white', 'shadow-lg');
btnPoonthanam.classList.remove('bg-white', 'text-slate-600', 'border', 'border-slate-200');
// Style Inactive Button
btnBhattathiri.classList.add('bg-white', 'text-slate-600', 'border', 'border-slate-200');
btnBhattathiri.classList.remove('bg-amber-600', 'text-white', 'shadow-lg');
}
}
// Mobile Menu Toggle
const btn = document.getElementById('mobile-menu-btn');
const menu = document.getElementById('mobile-menu');
btn.addEventListener('click', () => {
menu.classList.toggle('hidden');
});
</script>
</body>
</html>
