<!DOCTYPE html>
\n<html lang=”en”>
\n<head>
\n <meta charset=”UTF-8″>
\n <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
\n <title>JIVANSAR – Planetary Intelligence System<\/title>
\n <script src=”https:\/\/cdn.tailwindcss.com”><\/script>
\n <script src=”https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/js\/all.min.js”><\/script>
\n <style>
\n @import url(‘https:\/\/fonts.googleapis.com\/css2?family=Rajdhani:wght@400;600;700&family=Noto+Sans+Devanagari:wght@400;700&display=swap’);<\/p>\n
:root {
\n –astro-gold: #FFD700;
\n –astro-dark: #0f172a;
\n –astro-panel: #1e293b;
\n }<\/p>\n
body {
\n font-family: ‘Rajdhani’, ‘Noto Sans Devanagari’, sans-serif;
\n background-color: var(–astro-dark);
\n color: #e2e8f0;
\n background-image: radial-gradient(circle at top right, #334155 0%, #0f172a 60%);
\n }<\/p>\n
.glass {
\n background: rgba(30, 41, 59, 0.7);
\n backdrop-filter: blur(8px);
\n border: 1px solid rgba(255, 255, 255, 0.1);
\n }<\/p>\n
\/* SVG Chart Styles *\/
\n .chart-line { stroke: var(–astro-gold); stroke-width: 1.5; }
\n .chart-text { fill: #fff; font-size: 10px; font-family: sans-serif; }
\n .chart-sign-num { fill: rgba(255, 215, 0, 0.5); font-size: 12px; }<\/p>\n
.tab-active { border-bottom: 2px solid var(–astro-gold); color: var(–astro-gold); }
\n .tab-inactive { color: #94a3b8; }<\/p>\n
.dignity-exalted { color: #4ade80; font-weight: bold; } \/* Green *\/
\n .dignity-debilitated { color: #f87171; font-weight: bold; } \/* Red *\/
\n .dignity-combust { color: #fbbf24; font-style: italic; } \/* Orange *\/<\/p>\n
\/* Toggle Switch *\/
\n .toggle-checkbox:checked { right: 0; border-color: #68D391; }
\n .toggle-checkbox:checked + .toggle-label { background-color: #68D391; }
\n <\/style>
\n<\/head>
\n<body class=”min-h-screen flex flex-col items-center p-2 md:p-6″><\/p>\n
<!– HEADER –>
\n <header class=”w-full max-w-6xl flex justify-between items-center mb-6 glass p-4 rounded-xl”>
\n <div class=”flex items-center gap-3″>
\n <i class=”fa-solid fa-solar-system text-3xl text-yellow-500″><\/i>
\n <div>
\n <h1 class=”text-2xl font-bold tracking-widest text-yellow-500″>JIVANSAR<\/h1>
\n <p class=”text-xs text-gray-400″>Autonomous Planetary Engine<\/p>
\n <\/div>
\n <\/div>
\n <div class=”flex gap-2″>
\n <button onclick=”app.setLanguage(‘en’)” id=”btn-en” class=”text-xs font-bold px-3 py-1 bg-yellow-600 rounded text-white”>ENG<\/button>
\n <button onclick=”app.setLanguage(‘hi’)” id=”btn-hi” class=”text-xs font-bold px-3 py-1 bg-slate-700 rounded text-gray-300″>\u0939\u093f\u0902\u0926\u0940<\/button>
\n <\/div>
\n <\/header><\/p>\n
<!– MAIN INPUT & DASHBOARD –>
\n <main class=”w-full max-w-6xl grid grid-cols-1 lg:grid-cols-12 gap-6″><\/p>\n
<!– SIDEBAR: INPUTS –>
\n <div class=”lg:col-span-3 glass p-5 rounded-xl h-fit”>
\n <h2 class=”text-lg font-bold text-yellow-500 mb-4 border-b border-gray-600 pb-2″ data-t=”inputDetails”>Input Details<\/h2><\/p>\n
<form id=”astroForm” onsubmit=”app.calculate(event)” class=”space-y-3″>
\n <div>
\n <label class=”text-xs text-gray-400″>Name<\/label>
\n <input type=”text” id=”name” value=”JIVANSAR” class=”w-full bg-slate-900 border border-slate-700 rounded p-2 text-sm focus:border-yellow-500 outline-none text-white”>
\n <\/div>
\n <div class=”grid grid-cols-2 gap-2″>
\n <div>
\n <label class=”text-xs text-gray-400″ data-t=”dob”>Date<\/label>
\n <input type=”date” id=”dob” class=”w-full bg-slate-900 border border-slate-700 rounded p-2 text-sm text-white”>
\n <\/div>
\n <div>
\n <label class=”text-xs text-gray-400″ data-t=”tob”>Time<\/label>
\n <input type=”time” id=”tob” value=”12:00″ class=”w-full bg-slate-900 border border-slate-700 rounded p-2 text-sm text-white”>
\n <\/div>
\n <\/div>
\n <div class=”grid grid-cols-2 gap-2″>
\n <div>
\n <label class=”text-xs text-gray-400″ data-t=”lat”>Lat<\/label>
\n <input type=”number” step=”0.01″ id=”lat” value=”28.61″ class=”w-full bg-slate-900 border border-slate-700 rounded p-2 text-sm text-white”>
\n <\/div>
\n <div>
\n <label class=”text-xs text-gray-400″ data-t=”lon”>Lon<\/label>
\n <input type=”number” step=”0.01″ id=”lon” value=”77.20″ class=”w-full bg-slate-900 border border-slate-700 rounded p-2 text-sm text-white”>
\n <\/div>
\n <\/div>
\n <div>
\n <label class=”text-xs text-gray-400″ data-t=”timezone”>Timezone<\/label>
\n <select id=”tz” class=”w-full bg-slate-900 border border-slate-700 rounded p-2 text-sm text-white”>
\n <option value=”5.5″>India (+5:30)<\/option>
\n <option value=”0″>UTC (0:00)<\/option>
\n <option value=”-5″>EST (-5:00)<\/option>
\n <\/select>
\n <\/div><\/p>\n
<button type=”submit” class=”w-full bg-yellow-600 hover:bg-yellow-500 text-white font-bold py-2 rounded shadow-lg transition” data-t=”calcBtn”>Calculate Positions<\/button>
\n <\/form><\/p>\n
<!– Numerology Mini Widget –>
\n <div id=”numerologyBox” class=”mt-6 hidden border-t border-gray-600 pt-4″>
\n <h3 class=”text-sm font-bold text-yellow-500 mb-2″ data-t=”numerology”>Numerology<\/h3>
\n <div class=”flex justify-between text-center”>
\n <div class=”bg-slate-800 p-2 rounded w-[48%]”>
\n <span class=”block text-xs text-gray-400″ data-t=”mulank”>Mulank<\/span>
\n <span class=”text-xl font-bold text-blue-400″ id=”valMulank”>0<\/span>
\n <\/div>
\n <div class=”bg-slate-800 p-2 rounded w-[48%]”>
\n <span class=”block text-xs text-gray-400″ data-t=”bhagyank”>Bhagyank<\/span>
\n <span class=”text-xl font-bold text-purple-400″ id=”valBhagyank”>0<\/span>
\n <\/div>
\n <\/div>
\n <\/div>
\n <\/div><\/p>\n
<!– MAIN DASHBOARD AREA –>
\n <div class=”lg:col-span-9 hidden” id=”dashboard”><\/p>\n
<!– TABS –>
\n <div class=”flex border-b border-gray-700 mb-4″>
\n <button onclick=”app.switchTab(‘positions’)” id=”tab-positions” class=”px-4 py-2 text-sm font-bold tab-active transition” data-t=”tabPlanets”>Planetary Data<\/button>
\n <button onclick=”app.switchTab(‘chart’)” id=”tab-chart” class=”px-4 py-2 text-sm font-bold tab-inactive transition” data-t=”tabChart”>Kundli Chart<\/button>
\n <button onclick=”app.switchTab(‘conjunctions’)” id=”tab-conjunctions” class=”px-4 py-2 text-sm font-bold tab-inactive transition” data-t=”tabConjunctions”>Conjunctions<\/button>
\n <\/div><\/p>\n
<!– VIEW: POSITIONS –>
\n <div id=”view-positions” class=”animate-fade-in”>
\n <div class=”glass rounded-xl overflow-hidden”>
\n <table class=”w-full text-left text-sm”>
\n <thead class=”bg-slate-800 text-gray-400 uppercase text-xs”>
\n <tr>
\n <th class=”p-3″ data-t=”planet”>Planet<\/th>
\n <th class=”p-3″ data-t=”sign”>Sign<\/th>
\n <th class=”p-3″ data-t=”degree”>Degree<\/th>
\n <th class=”p-3″ data-t=”house”>House<\/th>
\n <th class=”p-3″ data-t=”status”>Status<\/th>
\n <\/tr>
\n <\/thead>
\n <tbody id=”planetTableBody” class=”divide-y divide-gray-700″>
\n <!– JS Generated –>
\n <\/tbody>
\n <\/table>
\n <\/div>
\n <\/div><\/p>\n
<!– VIEW: CHART –>
\n <div id=”view-chart” class=”hidden flex justify-center items-center py-6 glass rounded-xl”>
\n <div id=”chartContainer” class=”w-[350px] h-[350px] bg-slate-900 border border-yellow-800 relative shadow-2xl”>
\n <!– SVG Injected Here –>
\n <\/div>
\n <\/div><\/p>\n
<!– VIEW: CONJUNCTIONS –>
\n <div id=”view-conjunctions” class=”hidden glass p-4 rounded-xl”>
\n <h3 class=”text-lg font-bold text-yellow-500 mb-4″ data-t=”yogaTitle”>Planetary Conjunctions (Yogas)<\/h3>
\n <ul id=”conjunctionList” class=”space-y-2″>
\n <!– JS Generated –>
\n <\/ul>
\n <div id=”noConj” class=”text-gray-500 italic text-sm hidden” data-t=”noConj”>No major conjunctions detected within 10 degrees.<\/div>
\n <\/div><\/p>\n
<\/div>
\n <\/main><\/p>\n
<!– FOOTER –>
\n <footer class=”mt-8 text-center text-gray-500 text-xs”>
\n <p>JIVANSAR Engine v1.0 | Calculations based on Lahiri Ayanamsa (Sidereal)<\/p>
\n <\/footer><\/p>\n
<!– LOGIC ENGINE –>
\n <script>
\n class AstroEngine {
\n constructor() {
\n this.lang = ‘en’;
\n this.planets = {};
\n this.translations = {
\n en: {
\n inputDetails: “Input Details”, dob: “Date”, tob: “Time”, lat: “Lat”, lon: “Lon”, timezone: “Timezone”,
\n calcBtn: “Calculate Positions”, numerology: “Numerology”, mulank: “Root (Mulank)”, bhagyank: “Destiny (Bhagyank)”,
\n tabPlanets: “Planetary Status”, tabChart: “Kundli Chart”, tabConjunctions: “Conjunctions”,
\n planet: “Planet”, sign: “Sign”, degree: “Degree”, house: “House”, status: “Dignity”,
\n yogaTitle: “Planetary Conjunctions”, noConj: “No close conjunctions found.”,
\n signs: [“Aries”, “Taurus”, “Gemini”, “Cancer”, “Leo”, “Virgo”, “Libra”, “Scorpio”, “Sagittarius”, “Capricorn”, “Aquarius”, “Pisces”],
\n planetsList: {Sun:”Sun”, Moon:”Moon”, Mars:”Mars”, Mercury:”Mercury”, Jupiter:”Jupiter”, Venus:”Venus”, Saturn:”Saturn”, Rahu:”Rahu”, Ketu:”Ketu”, Ascendant:”Ascendant”}
\n },
\n hi: {
\n inputDetails: “\u091c\u0928\u094d\u092e \u0935\u093f\u0935\u0930\u0923”, dob: “\u0926\u093f\u0928\u093e\u0902\u0915”, tob: “\u0938\u092e\u092f”, lat: “\u0905\u0915\u094d\u0937\u093e\u0902\u0936”, lon: “\u0926\u0947\u0936\u093e\u0902\u0924\u0930”, timezone: “\u0938\u092e\u092f \u0915\u094d\u0937\u0947\u0924\u094d\u0930”,
\n calcBtn: “\u0917\u0923\u0928\u093e \u0915\u0930\u0947\u0902”, numerology: “\u0905\u0902\u0915 \u091c\u094d\u092f\u094b\u0924\u093f\u0937”, mulank: “\u092e\u0942\u0932\u093e\u0902\u0915”, bhagyank: “\u092d\u093e\u0917\u094d\u092f\u093e\u0902\u0915”,
\n tabPlanets: “\u0917\u094d\u0930\u0939 \u0938\u094d\u0925\u093f\u0924\u093f”, tabChart: “\u0932\u0917\u094d\u0928 \u0915\u0941\u0902\u0921\u0932\u0940”, tabConjunctions: “\u092f\u0941\u0924\u093f \u0935\u093f\u091a\u093e\u0930”,
\n planet: “\u0917\u094d\u0930\u0939”, sign: “\u0930\u093e\u0936\u093f”, degree: “\u0905\u0902\u0936”, house: “\u092d\u093e\u0935”, status: “\u0905\u0935\u0938\u094d\u0925\u093e”,
\n yogaTitle: “\u0917\u094d\u0930\u0939 \u092f\u0941\u0924\u093f (\u092f\u094b\u0917)”, noConj: “\u0915\u094b\u0908 \u0928\u093f\u0915\u091f \u092f\u0941\u0924\u093f \u0928\u0939\u0940\u0902 \u092e\u093f\u0932\u0940\u0964”,
\n signs: [“\u092e\u0947\u0937”, “\u0935\u0943\u0937\u092d”, “\u092e\u093f\u0925\u0941\u0928”, “\u0915\u0930\u094d\u0915”, “\u0938\u093f\u0902\u0939”, “\u0915\u0928\u094d\u092f\u093e”, “\u0924\u0941\u0932\u093e”, “\u0935\u0943\u0936\u094d\u091a\u093f\u0915”, “\u0927\u0928\u0941”, “\u092e\u0915\u0930”, “\u0915\u0941\u0902\u092d”, “\u092e\u0940\u0928”],
\n planetsList: {Sun:”\u0938\u0942\u0930\u094d\u092f”, Moon:”\u091a\u0902\u0926\u094d\u0930”, Mars:”\u092e\u0902\u0917\u0932”, Mercury:”\u092c\u0941\u0927”, Jupiter:”\u0917\u0941\u0930\u0941”, Venus:”\u0936\u0941\u0915\u094d\u0930”, Saturn:”\u0936\u0928\u093f”, Rahu:”\u0930\u093e\u0939\u0941”, Ketu:”\u0915\u0947\u0924\u0941”, Ascendant:”\u0932\u0917\u094d\u0928”}
\n }
\n };<\/p>\n
\/\/ Initialize Date
\n const now = new Date();
\n document.getElementById(‘dob’).value = now.toISOString().split(‘T’)[0];
\n }<\/p>\n
setLanguage(l) {
\n this.lang = l;
\n document.getElementById(‘btn-en’).className = l===’en’ ? “text-xs font-bold px-3 py-1 bg-yellow-600 rounded text-white” : “text-xs font-bold px-3 py-1 bg-slate-700 rounded text-gray-300”;
\n document.getElementById(‘btn-hi’).className = l===’hi’ ? “text-xs font-bold px-3 py-1 bg-yellow-600 rounded text-white” : “text-xs font-bold px-3 py-1 bg-slate-700 rounded text-gray-300”;<\/p>\n
\/\/ Update text
\n document.querySelectorAll(‘[data-t]’).forEach(el => {
\n const key = el.getAttribute(‘data-t’);
\n if(this.translations[l][key]) el.innerText = this.translations[l][key];
\n });<\/p>\n
\/\/ Re-render if data exists
\n if(Object.keys(this.planets).length > 0) this.renderDashboard();
\n }<\/p>\n
\/\/ — ASTRO MATH (Simplified VSOP\/Kepler for JS) —
\n toJulian(date, timeIso, tz) {
\n const d = new Date(`${date}T${timeIso}:00`);
\n \/\/ Adjust for TZ to get UTC
\n const utcHrs = d.getHours() + d.getMinutes()\/60 – parseFloat(tz);<\/p>\n
let Y = d.getFullYear(), M = d.getMonth()+1, D = d.getDate();
\n if(M <= 2) { Y–; M+=12; }
\n const A = Math.floor(Y\/100);
\n const B = 2 – A + Math.floor(A\/4);
\n return Math.floor(365.25*(Y+4716)) + Math.floor(30.6001*(M+1)) + D + B – 1524.5 + (utcHrs\/24.0);
\n }<\/p>\n
normalize(deg) {
\n deg = deg % 360;
\n return deg < 0 ? deg + 360 : deg;
\n }<\/p>\n
getPlanetLong(planet, jd) {
\n const T = (jd – 2451545.0) \/ 36525;
\n let L=0, M=0;
\n \/\/ Simplified mean elements
\n if(planet === ‘Sun’) {
\n L = 280.466 + 36000.770*T;
\n M = 357.529 + 35999.050*T;
\n return this.normalize(L + (1.915 * Math.sin(M * Math.PI\/180)));
\n }
\n \/\/ Mock positions for other planets for this standalone demo (Full VSOP is 2000 lines)
\n \/\/ In a real production script, insert full orbital elements here.
\n \/\/ using a pseudo-random deterministic seed based on date for demonstration of UI logic
\n \/\/ THIS IS A SIMULATION FOR THE UI.
\n \/\/ Replace this block with ‘astronomy-engine’ library for precision.
\n const rates = {Moon: 13.176, Mars: 0.524, Mercury: 4.09, Jupiter: 0.083, Venus: 1.602, Saturn: 0.033, Rahu: -0.052};
\n const seeds = {Moon: 218, Mars: 355, Mercury: 252, Jupiter: 34, Venus: 181, Saturn: 50, Rahu: 125};<\/p>\n
let base = seeds[planet] + ((jd – 2451545.0) * rates[planet]);
\n return this.normalize(base);
\n }<\/p>\n
getAscendant(jd, lat, lon) {
\n \/\/ Rough calculation for UI demonstration
\n \/\/ Real calc requires Sidereal Time iteration
\n const sunLong = this.getPlanetLong(‘Sun’, jd);
\n \/\/ Sun is at Ascendant at sunrise (approx 6am).
\n \/\/ Add 15 deg per hour from sunrise.
\n const d = new Date();
\n const hours = d.getHours() + d.getMinutes()\/60; \/\/ Approximate from current time input
\n return this.normalize(sunLong + ((hours – 6) * 15) + lon);
\n }<\/p>\n
\/\/ — CALCULATE —
\n calculate(e) {
\n e.preventDefault();
\n const dob = document.getElementById(‘dob’).value;
\n const tob = document.getElementById(‘tob’).value;
\n const lat = parseFloat(document.getElementById(‘lat’).value);
\n const lon = parseFloat(document.getElementById(‘lon’).value);
\n const tz = document.getElementById(‘tz’).value;<\/p>\n
if(!dob || !tob) return alert(“Please fill all fields”);<\/p>\n
const jd = this.toJulian(dob, tob, tz);
\n const ayanamsa = 24.0; \/\/ Fixed Approx Lahiri<\/p>\n
\/\/ 1. Calculate Longitudes
\n const pNames = [‘Sun’, ‘Moon’, ‘Mars’, ‘Mercury’, ‘Jupiter’, ‘Venus’, ‘Saturn’, ‘Rahu’];<\/p>\n
\/\/ Calculate Ascendant first
\n let ascGeo = this.getAscendant(jd, lat, lon); \/\/ Tropical
\n let ascSid = this.normalize(ascGeo – ayanamsa); \/\/ Sidereal<\/p>\n
this.planets = {
\n ‘Ascendant’: { long: ascSid, speed: 0 }
\n };<\/p>\n
pNames.forEach(p => {
\n let trop = this.getPlanetLong(p, jd);
\n let sid = this.normalize(trop – ayanamsa);
\n this.planets[p] = { long: sid };
\n });<\/p>\n
\/\/ Ketu is opposite Rahu
\n this.planets[‘Ketu’] = { long: this.normalize(this.planets[‘Rahu’].long + 180) };<\/p>\n
\/\/ 2. Process Data (Sign, House, Dignity)
\n this.processData();<\/p>\n
\/\/ 3. Numerology
\n this.calcNumerology(dob);<\/p>\n
\/\/ 4. Show Dashboard
\n document.getElementById(‘dashboard’).classList.remove(‘hidden’);
\n document.getElementById(‘numerologyBox’).classList.remove(‘hidden’);
\n this.renderDashboard();
\n }<\/p>\n
processData() {
\n const ascSign = Math.floor(this.planets[‘Ascendant’].long \/ 30);
\n const sunDist = (p) => Math.abs(this.planets[‘Sun’].long – this.planets[p].long);<\/p>\n
for(let p in this.planets) {
\n let l = this.planets[p].long;
\n let signIdx = Math.floor(l \/ 30);
\n let deg = l % 30;<\/p>\n
\/\/ House (Whole Sign)
\n let house = (signIdx – ascSign) + 1;
\n if(house <= 0) house += 12;<\/p>\n
\/\/ Dignity Logic (Simplified Vedic)
\n let status = “”;
\n let isCombust = false;<\/p>\n
\/\/ Exaltation Points (Approx)
\n if(p===’Sun’ && signIdx===0) status = “Exalted”; \/\/ Aries
\n if(p===’Moon’ && signIdx===1) status = “Exalted”; \/\/ Taurus
\n if(p===’Mars’ && signIdx===9) status = “Exalted”; \/\/ Capricorn
\n if(p===’Jupiter’ && signIdx===3) status = “Exalted”; \/\/ Cancer
\n if(p===’Venus’ && signIdx===11) status = “Exalted”; \/\/ Pisces
\n if(p===’Saturn’ && signIdx===6) status = “Exalted”; \/\/ Libra
\n if(p===’Mercury’ && signIdx===5) status = “Exalted”; \/\/ Virgo<\/p>\n
\/\/ Debilitation
\n if(p===’Sun’ && signIdx===6) status = “Debilitated”;
\n if(p===’Moon’ && signIdx===7) status = “Debilitated”;
\n if(p===’Mars’ && signIdx===3) status = “Debilitated”;
\n if(p===’Jupiter’ && signIdx===9) status = “Debilitated”;
\n if(p===’Venus’ && signIdx===5) status = “Debilitated”;
\n if(p===’Saturn’ && signIdx===0) status = “Debilitated”;<\/p>\n
\/\/ Combustion
\n if(p !== ‘Sun’ && p !== ‘Rahu’ && p !== ‘Ketu’ && p !== ‘Ascendant’) {
\n let d = Math.min(Math.abs(this.planets[‘Sun’].long – l), 360 – Math.abs(this.planets[‘Sun’].long – l));
\n if(d < 10) isCombust = true;
\n }<\/p>\n
this.planets[p].data = {
\n signIndex: signIdx,
\n degree: deg,
\n house: house,
\n status: status,
\n isCombust: isCombust
\n };
\n }
\n }<\/p>\n
calcNumerology(dob) {
\n const parts = dob.split(‘-‘); \/\/ YYYY-MM-DD
\n const day = parseInt(parts[2]);
\n const fullStr = parts.join(”);<\/p>\n
const reduce = (n) => {
\n while(n > 9) n = n.toString().split(”).reduce((a,b)=>parseInt(a)+parseInt(b), 0);
\n return <\/p>\n