Jolly Timeline (Siwalik Added)<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Nunito:wght@400;700;900&display=swap\" rel=\"stylesheet\">\n <style>\n \/* Scoped Styles *\/\n .jolly-timeline-widget {\n font-family: 'Nunito', sans-serif;\n background-color: transparent;\n }\n \n \/* Smooth Slide Transition *\/\n .jolly-timeline-widget .info-card {\n transition: max-height 0.3s ease-out, opacity 0.3s ease-out;\n max-height: 0;\n opacity: 0;\n overflow: hidden;\n }\n \n .jolly-timeline-widget .info-card.active {\n max-height: 500px;\n opacity: 1;\n }\n\n \/* Dot Hover *\/\n .jolly-timeline-widget .node-dot {\n transition: transform 0.2s ease;\n }\n .jolly-timeline-widget .node-dot:hover {\n transform: scale(1.1);\n }\n\n \/* Animations *\/\n @keyframes pulse-ring {\n 0% { transform: scale(0.33); opacity: 0; }\n 80%, 100% { opacity: 0; }\n }\n .jolly-timeline-widget .active-rose::before { content: ''; position: absolute; left: -6px; top: -6px; width: 28px; height: 28px; background-color: rgba(244, 63, 94, 0.4); border-radius: 50%; animation: pulse-ring 1.5s infinite; }\n .jolly-timeline-widget .active-amber::before { content: ''; position: absolute; left: -6px; top: -6px; width: 28px; height: 28px; background-color: rgba(245, 158, 11, 0.4); border-radius: 50%; animation: pulse-ring 1.5s infinite; }\n .jolly-timeline-widget .active-emerald::before { content: ''; position: absolute; left: -6px; top: -6px; width: 28px; height: 28px; background-color: rgba(16, 185, 129, 0.4); border-radius: 50%; animation: pulse-ring 1.5s infinite; }\n .jolly-timeline-widget .active-indigo::before { content: ''; position: absolute; left: -6px; top: -6px; width: 28px; height: 28px; background-color: rgba(99, 102, 241, 0.4); border-radius: 50%; animation: pulse-ring 1.5s infinite; }\n .jolly-timeline-widget .active-sky::before { content: ''; position: absolute; left: -6px; top: -6px; width: 28px; height: 28px; background-color: rgba(14, 165, 233, 0.4); border-radius: 50%; animation: pulse-ring 1.5s infinite; }\n <\/style>\n<\/head>\n<body class=\"p-4\">\n\n \n <div class=\"jolly-timeline-widget max-w-2xl mx-auto bg-white rounded-3xl shadow-lg border border-slate-200 overflow-hidden mb-8\">\n \n \n <div class=\"bg-gradient-to-r from-rose-400 via-purple-400 to-blue-400 p-8 text-center\">\n <h2 class=\"text-3xl font-black text-white tracking-tight drop-shadow-sm\">\ud83c\udfd4\ufe0f Evolution of the Himalaya: A Simplified Interactive Infographic<\/h2>\n <p class=\"text-white\/90 font-bold mt-2 text-lg\">The 55 Million Year Adventure<\/p>\n <\/div>\n\n \n <div class=\"p-6 sm:p-8 relative min-h-[600px]\">\n \n \n <div class=\"absolute left-10 sm:left-12 top-8 bottom-8 w-1 bg-slate-100 border-l-2 border-dashed border-slate-300\"><\/div>\n\n \n <div class=\"relative pl-12 sm:pl-16 mb-6 timeline-item\" data-index=\"0\">\n <div class=\"js-trigger absolute left-[32px] sm:left-[40px] top-1 w-4 h-4 bg-rose-200 rounded-full border-2 border-white cursor-pointer z-10 node-dot shadow-sm\"><\/div>\n <div class=\"js-trigger cursor-pointer\">\n <span class=\"inline-block px-2 py-0.5 rounded-full bg-rose-100 text-rose-600 text-xs font-black uppercase tracking-wide mb-1\">~ 55 Ma<\/span>\n <h3 class=\"text-xl font-black text-slate-700 hover:text-rose-500 transition-colors\">The Great Collision \ud83d\udca5<\/h3>\n <\/div>\n <div class=\"info-card js-card active\">\n <div class=\"mt-4 bg-rose-50 p-5 rounded-2xl border-2 border-rose-100 text-slate-700\">\n <p class=\"font-bold text-rose-900 mb-2\">Ocean Closed Forever!<\/p>\n <p class=\"text-sm leading-relaxed\">BAM! The Indian plate crashes into Asia. The Tethys Sea disappears, and the land starts to crumple. Indian Plate slows down from ~15 cm\/year to ~5 cm\/year.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"relative pl-12 sm:pl-16 mb-6 timeline-item\" data-index=\"1\">\n <div class=\"js-trigger absolute left-[32px] sm:left-[40px] top-1 w-4 h-4 bg-amber-200 rounded-full border-2 border-white cursor-pointer z-10 node-dot shadow-sm\"><\/div>\n <div class=\"js-trigger cursor-pointer\">\n <span class=\"inline-block px-2 py-0.5 rounded-full bg-amber-100 text-amber-600 text-xs font-black uppercase tracking-wide mb-1\">~ 23 – 18 Ma<\/span>\n <h3 class=\"text-xl font-black text-slate-700 hover:text-amber-500 transition-colors\">High Himalaya Rises \ud83c\udfd4\ufe0f<\/h3>\n <\/div>\n <div class=\"info-card js-card\">\n <div class=\"mt-4 bg-amber-50 p-5 rounded-2xl border-2 border-amber-100 text-slate-700\">\n <p class=\"font-bold text-amber-900 mb-2\">Mountains Grow in Size!<\/p>\n <p class=\"text-sm leading-relaxed\">Things get squeezy! Intense pressure pushes rocks up to form the high crystalline mountains (the tall snowy ones!).<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"relative pl-12 sm:pl-16 mb-6 timeline-item\" data-index=\"2\">\n <div class=\"js-trigger absolute left-[32px] sm:left-[40px] top-1 w-4 h-4 bg-emerald-200 rounded-full border-2 border-white cursor-pointer z-10 node-dot shadow-sm\"><\/div>\n <div class=\"js-trigger cursor-pointer\">\n <span class=\"inline-block px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-600 text-xs font-black uppercase tracking-wide mb-1\">~ 13 to ~ 2 Ma<\/span>\n <h3 class=\"text-xl font-black text-slate-700 hover:text-emerald-500 transition-colors\">Lesser Himalaya Forms & Grows \ud83c\udf0a<\/h3>\n <\/div>\n <div class=\"info-card js-card\">\n <div class=\"mt-4 bg-emerald-50 p-5 rounded-2xl border-2 border-emerald-100 text-slate-700\">\n <p class=\"font-bold text-emerald-900 mb-2\">Rivers Carve Valleys!<\/p>\n <p class=\"text-sm leading-relaxed\">The hills rise up. This blocks ancient rivers, creating massive lakes and the beautiful valleys we see today. Between 2.5 to 2 ma, the rate of growth accelerates.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"relative pl-12 sm:pl-16 mb-6 timeline-item\" data-index=\"3\">\n <div class=\"js-trigger absolute left-[32px] sm:left-[40px] top-1 w-4 h-4 bg-indigo-200 rounded-full border-2 border-white cursor-pointer z-10 node-dot shadow-sm\"><\/div>\n <div class=\"js-trigger cursor-pointer\">\n <span class=\"inline-block px-2 py-0.5 rounded-full bg-indigo-100 text-indigo-600 text-xs font-black uppercase tracking-wide mb-1\">~ 1.8 Ma<\/span>\n <h3 class=\"text-xl font-black text-slate-700 hover:text-indigo-500 transition-colors\">Siwalik Grows \ud83d\udc35<\/h3>\n <\/div>\n <div class=\"info-card js-card\">\n <div class=\"mt-4 bg-indigo-50 p-5 rounded-2xl border-2 border-indigo-100 text-slate-700\">\n <p class=\"font-bold text-indigo-900 mb-2\">The Foothills Appear<\/p>\n <p class=\"text-sm leading-relaxed\">Sediments washed down from the big mountains pile up. These soft rocks with fossils, including <i>Ramapithecus<\/i>, a humanoid ape, are then pushed up to form the Chure (Siwalik) range.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"relative pl-12 sm:pl-16 mb-6 timeline-item\" data-index=\"4\">\n <div class=\"js-trigger absolute left-[32px] sm:left-[40px] top-1 w-4 h-4 bg-sky-200 rounded-full border-2 border-white cursor-pointer z-10 node-dot shadow-sm\"><\/div>\n <div class=\"js-trigger cursor-pointer\">\n <span class=\"inline-block px-2 py-0.5 rounded-full bg-sky-100 text-sky-600 text-xs font-black uppercase tracking-wide mb-1\">Today<\/span>\n <h3 class=\"text-xl font-black text-slate-700 hover:text-sky-500 transition-colors\">Ground Keeps Shaking \u26a1<\/h3>\n <\/div>\n <div class=\"info-card js-card\">\n <div class=\"mt-4 bg-sky-50 p-5 rounded-2xl border-2 border-sky-100 text-slate-700\">\n <p class=\"font-bold text-sky-900 mb-2\">Active Faults<\/p>\n <p class=\"text-sm leading-relaxed\">The collision hasn’t stopped! The ground is still moving about 20mm every year, causing earthquakes along the MFT.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-slate-50 p-4 border-t border-slate-100 flex justify-between items-center\">\n <button class=\"js-prev-btn bg-white border border-slate-200 hover:bg-slate-100 text-slate-500 text-xs font-black uppercase tracking-wide px-4 py-3 rounded-xl transition-colors shadow-sm\">\n Previous\n <\/button>\n <span class=\"text-xs font-bold text-slate-400 uppercase tracking-widest\">Select an Era<\/span>\n <button class=\"js-next-btn bg-rose-500 hover:bg-rose-600 text-white text-xs font-black uppercase tracking-wide px-4 py-3 rounded-xl shadow-md transition-colors\">\n Next\n <\/button>\n <\/div>\n <\/div>\n \n\n <script>\n (function() {\n function initJollyWidget(widget) {\n if (widget.hasAttribute('data-initialized')) return;\n widget.setAttribute('data-initialized', 'true');\n\n let currentStep = 0;\n const items = widget.querySelectorAll('.timeline-item');\n const totalSteps = items.length;\n const prevBtn = widget.querySelector('.js-prev-btn');\n const nextBtn = widget.querySelector('.js-next-btn');\n \n \/\/ Theme definitions (Added Indigo for Siwalik)\n const colorThemes = [\n { bg: 'bg-rose-500', active: 'active-rose', dotDefault: 'bg-rose-200' },\n { bg: 'bg-amber-500', active: 'active-amber', dotDefault: 'bg-amber-200' },\n { bg: 'bg-emerald-500', active: 'active-emerald', dotDefault: 'bg-emerald-200' },\n { bg: 'bg-indigo-500', active: 'active-indigo', dotDefault: 'bg-indigo-200' }, \/\/ New Siwalik Theme\n { bg: 'bg-sky-500', active: 'active-sky', dotDefault: 'bg-sky-200' }\n ];\n\n function updateUI() {\n items.forEach((item, index) => {\n const card = item.querySelector('.js-card');\n const dot = item.querySelector('.node-dot');\n const theme = colorThemes[index];\n\n if (index === currentStep) {\n card.classList.add('active');\n dot.classList.remove('bg-rose-200', 'bg-amber-200', 'bg-emerald-200', 'bg-indigo-200', 'bg-sky-200');\n dot.classList.add(theme.bg, theme.active);\n } else {\n card.classList.remove('active');\n dot.classList.remove(theme.bg, theme.active);\n dot.classList.add(theme.dotDefault);\n }\n });\n }\n\n items.forEach((item, index) => {\n const triggers = item.querySelectorAll('.js-trigger');\n triggers.forEach(trigger => {\n trigger.addEventListener('click', () => {\n currentStep = index;\n updateUI();\n });\n });\n });\n\n if(nextBtn) {\n nextBtn.addEventListener('click', () => {\n if (currentStep < totalSteps - 1) {\n currentStep++;\n updateUI();\n }\n });\n }\n\n if(prevBtn) {\n prevBtn.addEventListener('click', () => {\n if (currentStep > 0) {\n currentStep--;\n updateUI();\n }\n });\n }\n\n updateUI();\n }\n\n function initAllWidgets() {\n const widgets = document.querySelectorAll('.jolly-timeline-widget');\n widgets.forEach(initJollyWidget);\n }\n\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', initAllWidgets);\n } else {\n initAllWidgets();\n }\n\n setInterval(initAllWidgets, 1000);\n\n })();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Jolly Timeline (Siwalik Added) \ud83c\udfd4\ufe0f Evolution of the Himalaya: A Simplified Interactive Infographic The 55 Million Year Adventure ~ 55 Ma The Great Collision \ud83d\udca5 Ocean Closed Forever! BAM! The Indian plate crashes into Asia. The Tethys Sea disappears, and the land starts to crumple. Indian Plate slows down from ~15 cm\/year to ~5 cm\/year. […]<\/p>\n","protected":false},"author":1,"featured_media":332,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[42],"tags":[40,39,38,41],"class_list":["post-307","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-geology-interactive","tag-evolution-of-the-himalaya","tag-geology-of-the-himalaya","tag-interactive","tag-timeline-of-the-himalaya"],"jetpack_featured_media_url":"https:\/\/www.dhakalankit.com.np\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-30-162257.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.dhakalankit.com.np\/ne\/wp-json\/wp\/v2\/posts\/307","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dhakalankit.com.np\/ne\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dhakalankit.com.np\/ne\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dhakalankit.com.np\/ne\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dhakalankit.com.np\/ne\/wp-json\/wp\/v2\/comments?post=307"}],"version-history":[{"count":22,"href":"https:\/\/www.dhakalankit.com.np\/ne\/wp-json\/wp\/v2\/posts\/307\/revisions"}],"predecessor-version":[{"id":365,"href":"https:\/\/www.dhakalankit.com.np\/ne\/wp-json\/wp\/v2\/posts\/307\/revisions\/365"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dhakalankit.com.np\/ne\/wp-json\/wp\/v2\/media\/332"}],"wp:attachment":[{"href":"https:\/\/www.dhakalankit.com.np\/ne\/wp-json\/wp\/v2\/media?parent=307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dhakalankit.com.np\/ne\/wp-json\/wp\/v2\/categories?post=307"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dhakalankit.com.np\/ne\/wp-json\/wp\/v2\/tags?post=307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":307,"date":"2026-01-30T16:25:09","date_gmt":"2026-01-30T10:40:09","guid":{"rendered":"https:\/\/www.dhakalankit.com.np\/?p=307"},"modified":"2026-02-08T11:26:21","modified_gmt":"2026-02-08T05:41:21","slug":"interactive-evolution-of-the-himalaya","status":"publish","type":"post","link":"https:\/\/www.dhakalankit.com.np\/ne\/2026\/01\/30\/interactive-evolution-of-the-himalaya\/","title":{"rendered":"Interactive: Evolution of the himalaya"},"content":{"rendered":"\n\n\n\n \n \n Jolly Timeline (Siwalik Added)<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Nunito:wght@400;700;900&display=swap\" rel=\"stylesheet\">\n <style>\n \/* Scoped Styles *\/\n .jolly-timeline-widget {\n font-family: 'Nunito', sans-serif;\n background-color: transparent;\n }\n \n \/* Smooth Slide Transition *\/\n .jolly-timeline-widget .info-card {\n transition: max-height 0.3s ease-out, opacity 0.3s ease-out;\n max-height: 0;\n opacity: 0;\n overflow: hidden;\n }\n \n .jolly-timeline-widget .info-card.active {\n max-height: 500px;\n opacity: 1;\n }\n\n \/* Dot Hover *\/\n .jolly-timeline-widget .node-dot {\n transition: transform 0.2s ease;\n }\n .jolly-timeline-widget .node-dot:hover {\n transform: scale(1.1);\n }\n\n \/* Animations *\/\n @keyframes pulse-ring {\n 0% { transform: scale(0.33); opacity: 0; }\n 80%, 100% { opacity: 0; }\n }\n .jolly-timeline-widget .active-rose::before { content: ''; position: absolute; left: -6px; top: -6px; width: 28px; height: 28px; background-color: rgba(244, 63, 94, 0.4); border-radius: 50%; animation: pulse-ring 1.5s infinite; }\n .jolly-timeline-widget .active-amber::before { content: ''; position: absolute; left: -6px; top: -6px; width: 28px; height: 28px; background-color: rgba(245, 158, 11, 0.4); border-radius: 50%; animation: pulse-ring 1.5s infinite; }\n .jolly-timeline-widget .active-emerald::before { content: ''; position: absolute; left: -6px; top: -6px; width: 28px; height: 28px; background-color: rgba(16, 185, 129, 0.4); border-radius: 50%; animation: pulse-ring 1.5s infinite; }\n .jolly-timeline-widget .active-indigo::before { content: ''; position: absolute; left: -6px; top: -6px; width: 28px; height: 28px; background-color: rgba(99, 102, 241, 0.4); border-radius: 50%; animation: pulse-ring 1.5s infinite; }\n .jolly-timeline-widget .active-sky::before { content: ''; position: absolute; left: -6px; top: -6px; width: 28px; height: 28px; background-color: rgba(14, 165, 233, 0.4); border-radius: 50%; animation: pulse-ring 1.5s infinite; }\n <\/style>\n<\/head>\n<body class=\"p-4\">\n\n \n <div class=\"jolly-timeline-widget max-w-2xl mx-auto bg-white rounded-3xl shadow-lg border border-slate-200 overflow-hidden mb-8\">\n \n \n <div class=\"bg-gradient-to-r from-rose-400 via-purple-400 to-blue-400 p-8 text-center\">\n <h2 class=\"text-3xl font-black text-white tracking-tight drop-shadow-sm\">\ud83c\udfd4\ufe0f Evolution of the Himalaya: A Simplified Interactive Infographic<\/h2>\n <p class=\"text-white\/90 font-bold mt-2 text-lg\">The 55 Million Year Adventure<\/p>\n <\/div>\n\n \n <div class=\"p-6 sm:p-8 relative min-h-[600px]\">\n \n \n <div class=\"absolute left-10 sm:left-12 top-8 bottom-8 w-1 bg-slate-100 border-l-2 border-dashed border-slate-300\"><\/div>\n\n \n <div class=\"relative pl-12 sm:pl-16 mb-6 timeline-item\" data-index=\"0\">\n <div class=\"js-trigger absolute left-[32px] sm:left-[40px] top-1 w-4 h-4 bg-rose-200 rounded-full border-2 border-white cursor-pointer z-10 node-dot shadow-sm\"><\/div>\n <div class=\"js-trigger cursor-pointer\">\n <span class=\"inline-block px-2 py-0.5 rounded-full bg-rose-100 text-rose-600 text-xs font-black uppercase tracking-wide mb-1\">~ 55 Ma<\/span>\n <h3 class=\"text-xl font-black text-slate-700 hover:text-rose-500 transition-colors\">The Great Collision \ud83d\udca5<\/h3>\n <\/div>\n <div class=\"info-card js-card active\">\n <div class=\"mt-4 bg-rose-50 p-5 rounded-2xl border-2 border-rose-100 text-slate-700\">\n <p class=\"font-bold text-rose-900 mb-2\">Ocean Closed Forever!<\/p>\n <p class=\"text-sm leading-relaxed\">BAM! The Indian plate crashes into Asia. The Tethys Sea disappears, and the land starts to crumple. Indian Plate slows down from ~15 cm\/year to ~5 cm\/year.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"relative pl-12 sm:pl-16 mb-6 timeline-item\" data-index=\"1\">\n <div class=\"js-trigger absolute left-[32px] sm:left-[40px] top-1 w-4 h-4 bg-amber-200 rounded-full border-2 border-white cursor-pointer z-10 node-dot shadow-sm\"><\/div>\n <div class=\"js-trigger cursor-pointer\">\n <span class=\"inline-block px-2 py-0.5 rounded-full bg-amber-100 text-amber-600 text-xs font-black uppercase tracking-wide mb-1\">~ 23 – 18 Ma<\/span>\n <h3 class=\"text-xl font-black text-slate-700 hover:text-amber-500 transition-colors\">High Himalaya Rises \ud83c\udfd4\ufe0f<\/h3>\n <\/div>\n <div class=\"info-card js-card\">\n <div class=\"mt-4 bg-amber-50 p-5 rounded-2xl border-2 border-amber-100 text-slate-700\">\n <p class=\"font-bold text-amber-900 mb-2\">Mountains Grow in Size!<\/p>\n <p class=\"text-sm leading-relaxed\">Things get squeezy! Intense pressure pushes rocks up to form the high crystalline mountains (the tall snowy ones!).<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"relative pl-12 sm:pl-16 mb-6 timeline-item\" data-index=\"2\">\n <div class=\"js-trigger absolute left-[32px] sm:left-[40px] top-1 w-4 h-4 bg-emerald-200 rounded-full border-2 border-white cursor-pointer z-10 node-dot shadow-sm\"><\/div>\n <div class=\"js-trigger cursor-pointer\">\n <span class=\"inline-block px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-600 text-xs font-black uppercase tracking-wide mb-1\">~ 13 to ~ 2 Ma<\/span>\n <h3 class=\"text-xl font-black text-slate-700 hover:text-emerald-500 transition-colors\">Lesser Himalaya Forms & Grows \ud83c\udf0a<\/h3>\n <\/div>\n <div class=\"info-card js-card\">\n <div class=\"mt-4 bg-emerald-50 p-5 rounded-2xl border-2 border-emerald-100 text-slate-700\">\n <p class=\"font-bold text-emerald-900 mb-2\">Rivers Carve Valleys!<\/p>\n <p class=\"text-sm leading-relaxed\">The hills rise up. This blocks ancient rivers, creating massive lakes and the beautiful valleys we see today. Between 2.5 to 2 ma, the rate of growth accelerates.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"relative pl-12 sm:pl-16 mb-6 timeline-item\" data-index=\"3\">\n <div class=\"js-trigger absolute left-[32px] sm:left-[40px] top-1 w-4 h-4 bg-indigo-200 rounded-full border-2 border-white cursor-pointer z-10 node-dot shadow-sm\"><\/div>\n <div class=\"js-trigger cursor-pointer\">\n <span class=\"inline-block px-2 py-0.5 rounded-full bg-indigo-100 text-indigo-600 text-xs font-black uppercase tracking-wide mb-1\">~ 1.8 Ma<\/span>\n <h3 class=\"text-xl font-black text-slate-700 hover:text-indigo-500 transition-colors\">Siwalik Grows \ud83d\udc35<\/h3>\n <\/div>\n <div class=\"info-card js-card\">\n <div class=\"mt-4 bg-indigo-50 p-5 rounded-2xl border-2 border-indigo-100 text-slate-700\">\n <p class=\"font-bold text-indigo-900 mb-2\">The Foothills Appear<\/p>\n <p class=\"text-sm leading-relaxed\">Sediments washed down from the big mountains pile up. These soft rocks with fossils, including <i>Ramapithecus<\/i>, a humanoid ape, are then pushed up to form the Chure (Siwalik) range.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"relative pl-12 sm:pl-16 mb-6 timeline-item\" data-index=\"4\">\n <div class=\"js-trigger absolute left-[32px] sm:left-[40px] top-1 w-4 h-4 bg-sky-200 rounded-full border-2 border-white cursor-pointer z-10 node-dot shadow-sm\"><\/div>\n <div class=\"js-trigger cursor-pointer\">\n <span class=\"inline-block px-2 py-0.5 rounded-full bg-sky-100 text-sky-600 text-xs font-black uppercase tracking-wide mb-1\">Today<\/span>\n <h3 class=\"text-xl font-black text-slate-700 hover:text-sky-500 transition-colors\">Ground Keeps Shaking \u26a1<\/h3>\n <\/div>\n <div class=\"info-card js-card\">\n <div class=\"mt-4 bg-sky-50 p-5 rounded-2xl border-2 border-sky-100 text-slate-700\">\n <p class=\"font-bold text-sky-900 mb-2\">Active Faults<\/p>\n <p class=\"text-sm leading-relaxed\">The collision hasn’t stopped! The ground is still moving about 20mm every year, causing earthquakes along the MFT.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-slate-50 p-4 border-t border-slate-100 flex justify-between items-center\">\n <button class=\"js-prev-btn bg-white border border-slate-200 hover:bg-slate-100 text-slate-500 text-xs font-black uppercase tracking-wide px-4 py-3 rounded-xl transition-colors shadow-sm\">\n Previous\n <\/button>\n <span class=\"text-xs font-bold text-slate-400 uppercase tracking-widest\">Select an Era<\/span>\n <button class=\"js-next-btn bg-rose-500 hover:bg-rose-600 text-white text-xs font-black uppercase tracking-wide px-4 py-3 rounded-xl shadow-md transition-colors\">\n Next\n <\/button>\n <\/div>\n <\/div>\n \n\n <script>\n (function() {\n function initJollyWidget(widget) {\n if (widget.hasAttribute('data-initialized')) return;\n widget.setAttribute('data-initialized', 'true');\n\n let currentStep = 0;\n const items = widget.querySelectorAll('.timeline-item');\n const totalSteps = items.length;\n const prevBtn = widget.querySelector('.js-prev-btn');\n const nextBtn = widget.querySelector('.js-next-btn');\n \n \/\/ Theme definitions (Added Indigo for Siwalik)\n const colorThemes = [\n { bg: 'bg-rose-500', active: 'active-rose', dotDefault: 'bg-rose-200' },\n { bg: 'bg-amber-500', active: 'active-amber', dotDefault: 'bg-amber-200' },\n { bg: 'bg-emerald-500', active: 'active-emerald', dotDefault: 'bg-emerald-200' },\n { bg: 'bg-indigo-500', active: 'active-indigo', dotDefault: 'bg-indigo-200' }, \/\/ New Siwalik Theme\n { bg: 'bg-sky-500', active: 'active-sky', dotDefault: 'bg-sky-200' }\n ];\n\n function updateUI() {\n items.forEach((item, index) => {\n const card = item.querySelector('.js-card');\n const dot = item.querySelector('.node-dot');\n const theme = colorThemes[index];\n\n if (index === currentStep) {\n card.classList.add('active');\n dot.classList.remove('bg-rose-200', 'bg-amber-200', 'bg-emerald-200', 'bg-indigo-200', 'bg-sky-200');\n dot.classList.add(theme.bg, theme.active);\n } else {\n card.classList.remove('active');\n dot.classList.remove(theme.bg, theme.active);\n dot.classList.add(theme.dotDefault);\n }\n });\n }\n\n items.forEach((item, index) => {\n const triggers = item.querySelectorAll('.js-trigger');\n triggers.forEach(trigger => {\n trigger.addEventListener('click', () => {\n currentStep = index;\n updateUI();\n });\n });\n });\n\n if(nextBtn) {\n nextBtn.addEventListener('click', () => {\n if (currentStep < totalSteps - 1) {\n currentStep++;\n updateUI();\n }\n });\n }\n\n if(prevBtn) {\n prevBtn.addEventListener('click', () => {\n if (currentStep > 0) {\n currentStep--;\n updateUI();\n }\n });\n }\n\n updateUI();\n }\n\n function initAllWidgets() {\n const widgets = document.querySelectorAll('.jolly-timeline-widget');\n widgets.forEach(initJollyWidget);\n }\n\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', initAllWidgets);\n } else {\n initAllWidgets();\n }\n\n setInterval(initAllWidgets, 1000);\n\n })();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Jolly Timeline (Siwalik Added) \ud83c\udfd4\ufe0f Evolution of the Himalaya: A Simplified Interactive Infographic The 55 Million Year Adventure ~ 55 Ma The Great Collision \ud83d\udca5 Ocean Closed Forever! BAM! The Indian plate crashes into Asia. The Tethys Sea disappears, and the land starts to crumple. Indian Plate slows down from ~15 cm\/year to ~5 cm\/year. […]<\/p>\n","protected":false},"author":1,"featured_media":332,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[42],"tags":[40,39,38,41],"class_list":["post-307","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-geology-interactive","tag-evolution-of-the-himalaya","tag-geology-of-the-himalaya","tag-interactive","tag-timeline-of-the-himalaya"],"jetpack_featured_media_url":"https:\/\/www.dhakalankit.com.np\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-30-162257.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.dhakalankit.com.np\/ne\/wp-json\/wp\/v2\/posts\/307","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dhakalankit.com.np\/ne\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dhakalankit.com.np\/ne\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dhakalankit.com.np\/ne\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dhakalankit.com.np\/ne\/wp-json\/wp\/v2\/comments?post=307"}],"version-history":[{"count":22,"href":"https:\/\/www.dhakalankit.com.np\/ne\/wp-json\/wp\/v2\/posts\/307\/revisions"}],"predecessor-version":[{"id":365,"href":"https:\/\/www.dhakalankit.com.np\/ne\/wp-json\/wp\/v2\/posts\/307\/revisions\/365"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dhakalankit.com.np\/ne\/wp-json\/wp\/v2\/media\/332"}],"wp:attachment":[{"href":"https:\/\/www.dhakalankit.com.np\/ne\/wp-json\/wp\/v2\/media?parent=307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dhakalankit.com.np\/ne\/wp-json\/wp\/v2\/categories?post=307"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dhakalankit.com.np\/ne\/wp-json\/wp\/v2\/tags?post=307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}