| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Mandukya Upanishad with Gaudapada Karikas</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| parchment: '#F3F0E0', |
| sand: '#E8DFCA', |
| earth: '#5D4037', |
| moss: '#4A7057', |
| gold: '#B38B59', |
| deepblue: '#263238' |
| }, |
| fontFamily: { |
| sans: ['Montserrat', 'sans-serif'], |
| serif: ['Crimson Text', 'serif'] |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| .swami-quote::before { |
| content: """; |
| position: absolute; |
| top: -20px; |
| left: -20px; |
| font-size: 5rem; |
| color: rgba(179, 139, 89, 0.3); |
| font-family: serif; |
| } |
| .active-chapter { |
| border-bottom: 3px solid #B38B59; |
| } |
| .chapter-content { |
| transition: max-height 0.5s ease-in-out; |
| overflow: hidden; |
| } |
| .sticky-nav { |
| position: sticky; |
| top: 0; |
| backdrop-filter: blur(5px); |
| z-index: 10; |
| } |
| .hide-scrollbar { |
| -ms-overflow-style: none; |
| scrollbar-width: none; |
| } |
| .hide-scrollbar::-webkit-scrollbar { |
| display: none; |
| } |
| .tagline-box { |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), |
| inset 0 -8px 20px rgba(0, 0, 0, 0.1); |
| } |
| .mandukya-bg { |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><rect width="200" height="200" fill="rgba(232,223,202,0.2)" stroke="rgba(179,139,89,0.2)" stroke-width="0.5" stroke-dasharray="2,4"/></svg>'); |
| background-attachment: local; |
| } |
| </style> |
| </head> |
| <body class="bg-parchment text-deepblue font-serif"> |
| |
| <header class="bg-deepblue text-sand py-8 px-4 text-center"> |
| <h1 class="text-3xl md:text-5xl font-bold mb-2 font-serif font-semibold">Mandukya Upanishad</h1> |
| <p class="text-xl italic mb-4">with Gaudapada Karikas</p> |
| <div class="max-w-3xl mx-auto mb-4"> |
| <p class="text-gold mb-2">Source: "The Upanishads - A New Translation" by Swami Nikhilananda</p> |
| <div class="swami-quote relative px-6 py-4 mt-8 text-lime-100 italic border-l-4 border-gold"> |
| <p>"The essence of the Consciousness manifesting as the self in the three states, It is the cessation of all phenomena; It is all peace, all bliss and non-dual."</p> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <nav class="sticky-nav bg-sand/70 py-4 px-6 border-b border-earth/30"> |
| <div class="flex overflow-x-auto pb-2 hide-scrollbar whitespace-nowrap space-x-4 px-2"> |
| <a href="#chapter1" class="nav-link active-chapter font-sans px-4 py-2 hover:bg-earth/10 transition-colors">Chapter I</a> |
| <a href="#chapter2" class="nav-link font-sans px-4 py-2 hover:bg-earth/10 transition-colors">Chapter II</a> |
| <a href="#chapter3" class="nav-link font-sans px-4 py-2 hover:bg-earth/10 transition-colors">Chapter III</a> |
| <a href="#chapter4" class="nav-link font-sans px-4 py-2 hover:bg-earth/10 transition-colors">Chapter IV</a> |
| <a href="#salutation" class="nav-link font-sans px-4 py-2 hover:bg-earth/10 transition-colors">Salutation</a> |
| </div> |
| </nav> |
|
|
| |
| <main class="max-w-5xl mx-auto px-4 py-8 mt-6"> |
| |
| <section class="tagline-box bg-sand rounded-xl p-8 my-12 text-center border border-earth/20"> |
| <h2 class="text-3xl font-bold mb-4 font-serif">Agama Prakarana</h2> |
| <p class="text-2xl italic text-earth mb-6">The Chapter based on Vedic Testimony</p> |
| <p class="text-xl max-w-3xl mx-auto mb-4">AUM, the word, is all this, the whole universe. All that is past, present and future is, indeed, AUM.</p> |
| <div class="text-6xl mt-8 text-earth font-bold font-mono tracking-widest">A U M</div> |
| </section> |
|
|
| |
| <section id="chapter1" class="mb-16 mandukya-bg rounded-lg p-6 border border-earth/20"> |
| <h2 class="text-3xl font-bold mb-6 text-earth flex items-center"> |
| <span class="mr-3">Chapter I</span> |
| <span class="text-sm px-3 py-1 bg-earth/10 text-earth rounded-full font-mono">Agama Prakarana</span> |
| </h2> |
|
|
| <div class="verse-block mb-10 bg-parchment p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow border-l-4 border-moss"> |
| <div class="verse-number text-gold font-bold mb-2">I</div> |
| <p class="verse-text text-lg">Harih Aum! AUM, the word, is all this, the whole universe. A clear explanation of it is as follows: All that is past, present and future is, indeed, AUM. And whatever else there is, beyond the threefold division of time—that also is truly AUM.</p> |
| </div> |
|
|
| <div class="verse-block mb-10 bg-parchment p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow border-l-4 border-moss"> |
| <div class="verse-number text-gold font-bold mb-2">II</div> |
| <p class="verse-text text-lg">All this is, indeed, Brahman. This Atman is Brahman. This same Atman has four quarters.</p> |
| </div> |
|
|
| |
| |
| <div class="verse-block mb-10 bg-parchment p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow border-l-4 border-moss"> |
| <div class="verse-number text-gold font-bold mb-2">VII</div> |
| <p class="verse-text text-lg">Turiya is not that which is conscious of the inner (subjective) world, nor that which is conscious of the outer (objective) world, nor that which is conscious of both, nor that which is a mass of consciousness. It is not simple consciousness nor is It unconsciousness. It is unperceived, unrelated, incomprehensible, uninferable, unthinkable and indescribable. The essence of the Consciousness manifesting as the self in the three states, It is the cessation of all phenomena; It is all peace, all bliss and non-dual. This is what is known as the Fourth (Turiya). This is Atman and this has to be realized.</p> |
| </div> |
|
|
| <h3 class="text-2xl font-bold mt-12 mb-6 text-earth">Gaudapada Karikas</h3> |
| |
| <div class="karika-block mb-8 bg-parchment p-5 rounded-lg border-l-4 border-gold"> |
| <div class="flex items-start"> |
| <div class="karika-number mr-4 bg-gold text-white w-10 h-10 rounded-full flex items-center justify-center">1</div> |
| <p class="karika-text flex-1">Visva is all-pervading, the experiencer of external objects. Taijasa is the cognizer of internal objects. Prajna is a mass of consciousness. It is one alone that is thus known in the three states.</p> |
| </div> |
| </div> |
|
|
| |
| |
| <div class="karika-block mb-8 bg-parchment p-5 rounded-lg border-l-4 border-gold"> |
| <div class="flex items-start"> |
| <div class="karika-number mr-4 bg-gold text-white w-10 h-10 rounded-full flex items-center justify-center">26</div> |
| <p class="karika-text flex-1">AUM is verily the lower Brahman. It is also stated to be the Higher Brahman. AUM is beginningless and unique. There is nothing outside it. It is unrelated to any effect and is immutable.</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="chapter2" class="mb-16 mandukya-bg rounded-lg p-6 border border-earth/20"> |
| <h2 class="text-3xl font-bold mb-6 text-earth flex items-center"> |
| <span class="mr-3">Chapter II</span> |
| <span class="text-sm px-3 py-1 bg-earth/10 text-earth rounded-full font-mono">Vaitathya Prakarana</span> |
| </h2> |
| <p class="text-lg italic text-earth mb-6">The Chapter on Illusion</p> |
| |
| <div class="verse-block mb-10 bg-parchment p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow border-l-4 border-moss"> |
| <div class="verse-number text-gold font-bold mb-2">1</div> |
| <p class="verse-text text-lg">The wise declare the unreality of all entities seen in dreams, because they are located within the body and the space therein is confined.</p> |
| </div> |
| |
| |
| </section> |
| |
| |
| <section id="chapter3" class="mb-16 mandukya-bg rounded-lg p-6 border border-earth/20"> |
| <h2 class="text-3xl font-bold mb-6 text-earth flex items-center"> |
| <span class="mr-3">Chapter III</span> |
| <span class="text-sm px-3 py-1 bg-earth/10 text-earth rounded-full font-mono">Advaita Prakarana</span> |
| </h2> |
| <p class="text-lg italic text-earth mb-6">The Chapter on Non-duality</p> |
| |
| <div class="verse-block mb-10 bg-parchment p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow border-l-4 border-moss"> |
| <div class="verse-number text-gold font-bold mb-2">1</div> |
| <p class="verse-text text-lg">The jiva, betaking himself to devotional worship, abides in the manifest Brahman. He thinks that before the creation all was of the same nature as the birthless Reality. Therefore he is said to possess a narrow intellect.</p> |
| </div> |
| |
| |
| </section> |
| |
| |
| <section id="chapter4" class="mb-16 mandukya-bg rounded-lg p-6 border border-earth/20"> |
| <h2 class="text-3xl font-bold mb-6 text-earth flex items-center"> |
| <span class="mr-3">Chapter IV</span> |
| <span class="text-sm px-3 py-1 bg-earth/10 text-earth rounded-full font-mono">Alatasanti Prakarana</span> |
| </h2> |
| <p class="text-lg italic text-earth mb-6">The Chapter on the Quenching of the Fire-brand</p> |
| |
| <div class="verse-block mb-10 bg-parchment p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow border-l-4 border-moss"> |
| <div class="verse-number text-gold font-bold mb-2">1</div> |
| <p class="verse-text text-lg">I bow to the best among men, who, by means of knowledge, which is like akasa and which is non-different from the goal of knowledge, realized the nature of the jivas (dharmas), which, too, are like akasa.</p> |
| </div> |
| |
| |
| </section> |
| |
| |
| <section id="salutation" class="mt-16 p-8 bg-gradient-to-r from-earth to-gold rounded-xl text-sand"> |
| <h2 class="text-3xl font-bold mb-6">Final Salutation</h2> |
| <p class="mb-6 text-lg italic">by Sri Sankaracharya</p> |
| |
| <div class="salutation-text bg-deepblue/80 p-6 rounded-lg"> |
| <p class="mb-4">I salute Brahman, the destroyer of the fear of those who take refuge in It—which, though unborn, appears to be associated with birth through Its own majestic powers; which, though motionless, appears to be moving; and which, though non- dual, appears to have assumed many forms to those whose vision is deluded by the perception of diverse objects and their attributes.</p> |
| |
| <p class="mb-4">I prostrate myself at the feet of the teacher of my teacher, the most adored among the adorable, who—out of sheer compassion for the beings drowned in the deep ocean of the world, infested by the terrible sharks of incessant births and deaths—rescued, for the benefit of all, this nectar, hardly attainable even by the immortals...</p> |
| |
| <p class="mt-8 text-center text-4xl">Aum Tat Sat</p> |
| <p class="text-center mt-4 font-sans">Peace! Peace! Peace!</p> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <footer class="bg-deepblue text-sand py-8 px-4 mt-12"> |
| <div class="max-w-4xl mx-auto text-center"> |
| <p class="font-sans mb-4">The Mandukya Upanishad explores the symbol AUM, the states of consciousness, and the non-dual Turiya</p> |
| <p class="text-xs text-gold/80 mt-8">"The large and small appearing in dream are imagined within the space of one's own body. How then can there be any difference between the waking and dream world?" — Gaudapada Karikas</p> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const navLinks = document.querySelectorAll('.nav-link'); |
| |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| const id = entry.target.getAttribute('id'); |
| navLinks.forEach(link => { |
| link.classList.remove('active-chapter'); |
| if (link.getAttribute('href') === `#${id}`) { |
| link.classList.add('active-chapter'); |
| } |
| }); |
| } |
| }); |
| }, { threshold: 0.3 }); |
| |
| |
| document.querySelectorAll('section[id]').forEach(section => { |
| observer.observe(section); |
| }); |
| |
| |
| navLinks.forEach(link => { |
| link.addEventListener('click', function(e) { |
| e.preventDefault(); |
| const targetId = this.getAttribute('href'); |
| const targetSection = document.querySelector(targetId); |
| |
| if (targetSection) { |
| window.scrollTo({ |
| top: targetSection.offsetTop - 100, |
| behavior: 'smooth' |
| }); |
| } |
| }); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
