हिंदूभूमि-ஹிந்துபூமி

Guruvayoor Mahatmyam

<!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">
                    &#9776;
                </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>

You missed

Uncategorized

2–திருப்பாவை 2வது பாசுரம் விளக்க உரை

December 23, 2025 shreeg76
Uncategorized

play list 1—————— 1) திருவாசகம் சொற்பொழிவு வேதப்ரம்ஹ ஶ்ரீ கோபாலக்ருஷ்ண #thiruvasagam @aanmeegamtamilnadu #viral

December 7, 2025 shreeg76
Uncategorized

2)பகவத்கீதை அத்யாய 1 ஶ்லோகம 15 -43 BhagavadGita tamil

December 4, 2025 shreeg76
Uncategorized

ஸ்ரீமத் வால்மீகி ராமாயணம்

December 2, 2025 shreeg76