Skip to content

Commit e5341d3

Browse files
CiphroxCiphrox
committed
added vedic page
1 parent 8f7fa0d commit e5341d3

File tree

4 files changed

+328
-0
lines changed

4 files changed

+328
-0
lines changed

‎src/assets/json/vedic.json‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
{
2+
"time_units": [
3+
{
4+
"name": "क्षण",
5+
"seconds": 1,
6+
"minutes": 0.01667,
7+
"years": 0.0000000317
8+
},
9+
{
10+
"name": "पल",
11+
"seconds": 24,
12+
"minutes": 0.4,
13+
"years": 0.00000076
14+
},
15+
{
16+
"name": "घटी",
17+
"seconds": 1440,
18+
"minutes": 24,
19+
"years": 0.000027
20+
},
21+
{
22+
"name": "प्रहर",
23+
"seconds": 10800,
24+
"minutes": 180,
25+
"years": 0.000342
26+
},
27+
{
28+
"name": "दिन",
29+
"seconds": 86400,
30+
"minutes": 1440,
31+
"years": 0.00274
32+
},
33+
{
34+
"name": "पक्ष",
35+
"seconds": 1296000,
36+
"minutes": 21600,
37+
"years": 0.0317
38+
},
39+
{
40+
"name": "मास",
41+
"seconds": 2592000,
42+
"minutes": 43200,
43+
"years": 0.0635
44+
},
45+
{
46+
"name": "ऋतु",
47+
"seconds": 5184000,
48+
"minutes": 86400,
49+
"years": 0.127
50+
},
51+
{
52+
"name": "अयन",
53+
"seconds": 15552000,
54+
"minutes": 259200,
55+
"years": 0.381
56+
},
57+
{
58+
"name": "वर्ष",
59+
"seconds": 31104000,
60+
"minutes": 518400,
61+
"years": 1
62+
},
63+
{
64+
"name": "युग",
65+
"seconds": 1209600000,
66+
"minutes": 20160000,
67+
"years": 38880
68+
},
69+
{
70+
"name": "कल्प",
71+
"seconds": 31104000000000,
72+
"minutes": 518400000000,
73+
"years": 1000000000
74+
}
75+
]
76+
}

‎src/assets/styles/vedic.css‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
.container__vedic {
2+
min-height: 100vh;
3+
padding: 3rem 1.5rem;
4+
5+
& .vedic__layout {
6+
max-width: 1200px;
7+
margin: 0 auto;
8+
display: grid;
9+
align-items: center;
10+
gap: 2rem;
11+
grid-template-columns: 1fr 1.2fr;
12+
}
13+
14+
& .converter__card,
15+
& .units__card {
16+
height: fit-content;
17+
border-radius: 1rem;
18+
padding: 2rem;
19+
border: 2px solid var(--border);
20+
background-color: color-mix(in srgb, var(--background) 97%, var(--text) 3%);
21+
}
22+
23+
& .converter__form {
24+
display: flex;
25+
flex-direction: column;
26+
gap: 2rem;
27+
}
28+
29+
& .form__group {
30+
display: flex;
31+
flex-direction: column;
32+
gap: 0.75rem;
33+
}
34+
35+
& .form__group label {
36+
color: var(--text);
37+
font-size: 1.125rem;
38+
font-weight: 500;
39+
}
40+
41+
& input,
42+
& select {
43+
width: 100%;
44+
padding: 1rem;
45+
border-radius: 0.75rem;
46+
border: 1px solid var(--border);
47+
background-color: var(--background);
48+
color: var(--text);
49+
font-size: 1.125rem;
50+
}
51+
52+
& input:focus,
53+
& select:focus {
54+
outline: none;
55+
border-color: var(--primary);
56+
box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent);
57+
}
58+
59+
& .convert__button {
60+
width: 100%;
61+
padding: 1rem;
62+
border-radius: 0.75rem;
63+
background-color: var(--primary);
64+
color: var(--background);
65+
font-size: 1.125rem;
66+
font-weight: 500;
67+
border: none;
68+
cursor: pointer;
69+
transition: opacity 0.2s;
70+
}
71+
72+
& .convert__button:hover {
73+
opacity: 0.9;
74+
}
75+
76+
& .result__display {
77+
display: none;
78+
padding: 1.5rem;
79+
border-radius: 0.75rem;
80+
background-color: color-mix(in srgb, var(--background) 95%, var(--text) 5%);
81+
color: var(--text);
82+
text-align: center;
83+
font-size: 1.25rem;
84+
font-weight: 500;
85+
}
86+
87+
& .units__title {
88+
color: var(--text);
89+
font-size: 1.5rem;
90+
font-weight: 600;
91+
margin-bottom: 1.5rem;
92+
}
93+
94+
& .units__grid {
95+
display: grid;
96+
gap: 1rem;
97+
max-height: 600px;
98+
overflow-y: auto;
99+
padding-right: 0.5rem;
100+
}
101+
102+
& .unit__item {
103+
padding: 1.25rem;
104+
border-radius: 0.75rem;
105+
border: 1px solid var(--border);
106+
background-color: var(--background);
107+
}
108+
109+
& .unit__header {
110+
display: flex;
111+
justify-content: space-between;
112+
align-items: baseline;
113+
}
114+
115+
& .unit__header h3 {
116+
color: var(--primary);
117+
font-size: 1.25rem;
118+
font-weight: 500;
119+
}
120+
121+
& .approx {
122+
color: var(--text);
123+
opacity: 0.6;
124+
font-size: 0.875rem;
125+
}
126+
127+
& .unit__details {
128+
margin-top: 0.75rem;
129+
display: grid;
130+
gap: 0.375rem;
131+
color: var(--text);
132+
}
133+
134+
& .unit__value {
135+
display: flex;
136+
align-items: center;
137+
gap: 0.5rem;
138+
}
139+
140+
& .icon {
141+
opacity: 0.6;
142+
}
143+
144+
@media (max-width: 768px) {
145+
& .vedic__layout {
146+
grid-template-columns: 1fr;
147+
}
148+
}
149+
}

‎src/pages/vedic.astro‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
---
2+
import BaseLayout from "@/layouts/Base";
3+
import "@/assets/styles/vedic.css";
4+
import vedicData from "@/assets/json/vedic.json";
5+
6+
const timeUnits = vedicData.time_units;
7+
---
8+
9+
<BaseLayout meta={{ title: "Vedic Time" }}>
10+
<div class="container__vedic">
11+
<div class="vedic__layout">
12+
<!-- Converter Card -->
13+
<div class="converter__card">
14+
<form id="converter__form" class="converter__form">
15+
<div class="form__group">
16+
<label for="input__value">Enter Value</label>
17+
<input type="number" id="input__value" placeholder="Enter value" required />
18+
</div>
19+
20+
<div class="form__grid">
21+
{
22+
["From", "To"].map((label) => (
23+
<div class="form__group">
24+
<label for={`${label.toLowerCase()}__unit`}>{label}</label>
25+
<select id={`${label.toLowerCase()}__unit`}>
26+
{timeUnits.map((unit) => (
27+
<option value={unit.name}>{unit.name}</option>
28+
))}
29+
</select>
30+
</div>
31+
))
32+
}
33+
</div>
34+
35+
<button type="submit" class="convert__button">Convert</button>
36+
<div id="result" class="result__display"></div>
37+
</form>
38+
</div>
39+
40+
<!-- Units Reference -->
41+
<div class="units__card">
42+
<h2 class="units__title">Vedic Time Units</h2>
43+
<div class="units__grid">
44+
{
45+
timeUnits.map((unit) => (
46+
<div class="unit__item">
47+
<div class="unit__header">
48+
<h3>{unit.name}</h3>
49+
<span class="approx">≈</span>
50+
</div>
51+
<div class="unit__details">
52+
<div class="unit__value">
53+
<span class="icon">🕛</span>
54+
{unit.seconds.toLocaleString()} seconds
55+
</div>
56+
<div class="unit__value">
57+
<span class="icon">⏳</span>
58+
{unit.minutes.toLocaleString()} minutes
59+
</div>
60+
<div class="unit__value">
61+
<span class="icon">📅</span>
62+
{unit.years.toLocaleString()} years
63+
</div>
64+
</div>
65+
</div>
66+
))
67+
}
68+
</div>
69+
</div>
70+
</div>
71+
</div>
72+
</BaseLayout>
73+
74+
<script define:vars={{ timeUnits }}>
75+
function convert(value, fromUnit, toUnit) {
76+
const from = timeUnits.find((u) => u.name === fromUnit);
77+
const to = timeUnits.find((u) => u.name === toUnit);
78+
if (!from || !to) return null;
79+
80+
const seconds = value * from.seconds;
81+
return seconds / to.seconds;
82+
}
83+
84+
document.getElementById("converter__form").addEventListener("submit", (e) => {
85+
e.preventDefault();
86+
const value = parseFloat(document.getElementById("input__value").value);
87+
const fromUnit = document.getElementById("from__unit").value;
88+
const toUnit = document.getElementById("to__unit").value;
89+
90+
const result = convert(value, fromUnit, toUnit);
91+
const resultBox = document.getElementById("result");
92+
resultBox.style.display = "block";
93+
resultBox.textContent = `${value} ${fromUnit} = ${result.toLocaleString(undefined, {
94+
maximumFractionDigits: 4
95+
})} ${toUnit}`;
96+
});
97+
</script>

‎src/utils/constants.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,12 @@ export const NavbarLinks: LinkProps[] = [
6767
path: "/map",
6868
isActive: true
6969
},
70+
{
71+
name: "Vedic",
72+
title: "Vedic",
73+
path: "/vedic",
74+
isActive: true
75+
},
7076
{
7177
name: "Societree",
7278
title: "Clan",

0 commit comments

Comments
 (0)