diff --git a/css.css b/css.css index 8966fc1..f4762c0 100644 --- a/css.css +++ b/css.css @@ -138,4 +138,15 @@ font-size: 12px; padding: 3px 6px; } - } \ No newline at end of file + } + .segment-label{ +position:absolute; +font-weight:bold; +font-size:18px; +color:#facc15; +transform:translate(-50%,-50%); +background:rgba(0,0,0,0.35); +padding:6px 10px; +border-radius:6px; +border:1px solid rgba(255,255,255,0.2); +} diff --git a/index.php b/index.php index 8f9b19d..adcaa36 100644 --- a/index.php +++ b/index.php @@ -9,31 +9,36 @@ -
+

Prajwal's Astro Analysis

-

Analyze planetary positioning, nakshatra, and horoscope from selected date, time, and location.

+

+ Analyze planetary positioning, nakshatra, and horoscope from selected date, time, and location. +

-
+ +
+
-
+
+
+
+
-
+
+ +
- +
-
-
-
Geocentric Positioning of Planets
-
+
+ +
+ Geocentric Positioning of Planets, Nakshatra, and Horoscope +
+
+
- Earth +
+
+
+
+
+
- - const centerX = 260; - const centerY = 260; - const radius = 220; - - for (let i = 0; i < 12; i++) { - const angleDeg = i * 30; - const angleRad = (angleDeg - 90) * Math.PI / 180; - - // segment lines - const line = document.createElement("div"); - line.classList.add("segment-line"); - line.style.transform = `translateX(-50%) rotate(${angleDeg}deg)`; - astroCircle.appendChild(line); - - // segment number positions - const number = document.createElement("div"); - number.classList.add("segment-number"); - number.innerText = i + 1; - - const numberRadius = radius - 25; - const x = centerX + numberRadius * Math.cos(angleRad); - const y = centerY + numberRadius * Math.sin(angleRad); - - number.style.left = `${x}px`; - number.style.top = `${y}px`; - - astroCircle.appendChild(number); - } - + diff --git a/js.js b/js.js new file mode 100644 index 0000000..9828f0d --- /dev/null +++ b/js.js @@ -0,0 +1,47 @@ +document.addEventListener("DOMContentLoaded", function() { + + const astroCircle = document.getElementById("astroCircle"); + + const labels = [ + "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12" + ]; + + const circleSize = astroCircle.offsetWidth; + const centerX = circleSize / 2; + const centerY = circleSize / 2; + + const radius = circleSize / 2; + + // numbers will be placed OUTSIDE the circle + const numberRadius = radius + 25; + + for (let i = 0; i < 12; i++) { + + const angleDeg = i * 30; + const angleRad = (angleDeg - 90) * Math.PI / 180; + + // draw segment divider + const line = document.createElement("div"); + line.classList.add("segment-line"); + line.style.transform = `translateX(-50%) rotate(${angleDeg}deg)`; + astroCircle.appendChild(line); + + // place number in center of segment + const midAngle = angleDeg + 15; + const midRad = (midAngle - 90) * Math.PI / 180; + + const x = centerX + numberRadius * Math.cos(midRad); + const y = centerY + numberRadius * Math.sin(midRad); + + const number = document.createElement("div"); + number.classList.add("segment-number"); + number.innerText = labels[i]; + + number.style.left = `${x}px`; + number.style.top = `${y}px`; + + astroCircle.appendChild(number); + + } + + }); \ No newline at end of file