Skip to content

Commit 56764da

Browse files
xkeshavxkeshav
authored
Merge pull request #38 from recursivezero/feature/RZA-250025
Feature/RZA-250025 : Added 12khadi page
2 parents 89c089f + 34853d5 commit 56764da

File tree

11 files changed

+523
-169
lines changed

11 files changed

+523
-169
lines changed

‎docs/pages.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,16 @@ This document describes the functionality and purpose of each page in the applic
2121

2222
### Interactive Learning Pages
2323

24+
#### Barahkhadi Page (/pages/barahkhadi/index.astro)
25+
26+
![Barahkhadi page](../src/assets/screenshots/barahkhadi.png)
27+
28+
- Grid display of Hindi consonants organized in traditional groups
29+
- Quick view popover showing barahkhadi variations for each consonant
30+
- Interactive buttons to show/hide variations
31+
- Clickable consonants leading to detailed pages
32+
- Responsive layout with consonant groups
33+
2434
#### Varnmala Page (/pages/varnmala.astro)
2535

2636
![Varnmala page](../src/assets/screenshots/varnmala.png)

‎src/assets/screenshots/barahkhadi.png‎

186 KB
Loading

‎src/assets/styles/barahkhadi/consonant.css‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
.container__consonant {
2+
height: 100%;
3+
padding: 2rem;
4+
5+
& .consonant__header {
6+
display: flex;
7+
align-items: center;
8+
gap: 2rem;
9+
margin-bottom: 2rem;
10+
}
11+
12+
& .back__link {
13+
color: var(--primary);
14+
text-decoration: none;
15+
font-size: 1.2rem;
16+
}
17+
18+
& .combinations__grid {
19+
display: grid;
20+
grid-template-columns: repeat(4, 1fr);
21+
gap: 1rem;
22+
padding: 1rem;
23+
max-height: calc(100vh - 12rem);
24+
overflow-y: auto;
25+
border: 1px solid var(--border);
26+
border-radius: 1rem;
27+
scrollbar-width: thin;
28+
scrollbar-color: var(--primary) var(--background);
29+
}
30+
31+
& .combination__card {
32+
background-color: color-mix(in srgb, var(--secondary) 15%, var(--background) 85%);
33+
border-radius: 0.5rem;
34+
padding: 2rem 1rem;
35+
display: grid;
36+
place-items: center;
37+
gap: 0.5rem;
38+
}
39+
40+
& .combination__content {
41+
display: flex;
42+
flex-direction: column;
43+
align-items: center;
44+
gap: 0.5rem;
45+
}
46+
47+
& .combination__result {
48+
font-size: 3rem;
49+
font-weight: bold;
50+
}
51+
52+
@container (min-width: 768px) {
53+
.combination-result {
54+
font-size: 4rem;
55+
}
56+
}
57+
58+
@container (max-width: 480px) {
59+
.combinations-grid {
60+
grid-template-columns: 1fr;
61+
}
62+
}
63+
}

‎src/assets/styles/barahkhadi/index.css‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
.container__barahkhadi {
2+
padding: 1rem;
3+
height: 100%;
4+
overflow-y: auto;
5+
6+
& .consonants__rows {
7+
display: flex;
8+
flex-direction: column;
9+
}
10+
11+
& .consonant__row {
12+
padding: 1rem;
13+
background-color: color-mix(in srgb, var(--background) 97%, var(--text) 3%);
14+
border-radius: 0.5rem;
15+
}
16+
17+
& .consonants__grid {
18+
display: grid;
19+
gap: 1.25rem;
20+
grid-template-columns: repeat(auto-fit, 250px);
21+
justify-content: center;
22+
}
23+
24+
& .consonant__card {
25+
width: 250px;
26+
height: 250px;
27+
position: relative;
28+
background-color: color-mix(in srgb, var(--secondary) 15%, var(--background) 85%);
29+
border-radius: 0.5rem;
30+
display: grid;
31+
place-items: center;
32+
text-decoration: none;
33+
transition: transform 0.2s ease;
34+
overflow: hidden;
35+
}
36+
37+
& .consonant__card:hover {
38+
transform: none;
39+
background-color: color-mix(in srgb, var(--primary) 15%, var(--background) 85%);
40+
transition: all 0.2s ease;
41+
}
42+
43+
& .consonant {
44+
font-size: 7rem;
45+
font-weight: bold;
46+
color: var(--text);
47+
}
48+
49+
& .consonants__container {
50+
scrollbar-width: thin;
51+
scrollbar-color: var(--primary) var(--background);
52+
}
53+
54+
& .consonant__card {
55+
position: relative;
56+
z-index: 1;
57+
overflow: hidden;
58+
}
59+
60+
& .consonant__card:hover {
61+
z-index: 1000;
62+
}
63+
64+
& .quick-view-btn {
65+
position: absolute;
66+
top: 8px;
67+
right: 8px;
68+
padding: 6px;
69+
font-size: 1.2rem;
70+
background: color-mix(in srgb, var(--text) 10%, var(--background) 90%);
71+
border: 1px solid var(--border);
72+
border-radius: 8px;
73+
cursor: pointer;
74+
color: var(--text);
75+
line-height: 1;
76+
z-index: 2;
77+
display: flex;
78+
align-items: center;
79+
justify-content: center;
80+
width: 32px;
81+
height: 32px;
82+
transition: all 0.2s ease;
83+
}
84+
85+
& .quick-view-btn:hover {
86+
background: color-mix(in srgb, var(--text) 15%, var(--background) 85%);
87+
transform: scale(1.05);
88+
}
89+
90+
& .quick-view-btn:active {
91+
transform: scale(0.95);
92+
}
93+
94+
& .barahkhadi__popover {
95+
visibility: hidden;
96+
opacity: 0;
97+
position: absolute;
98+
top: 0;
99+
left: 0;
100+
width: 100%;
101+
height: 100%;
102+
padding: 0.75rem;
103+
background: var(--background);
104+
border: 1px solid var(--border);
105+
border-radius: 0.5rem;
106+
box-shadow: 0 4px 12px color-mix(in srgb, var(--text) 15%, transparent);
107+
transition: opacity 0.2s, visibility 0.2s;
108+
display: flex;
109+
align-items: flex-end;
110+
justify-content: center;
111+
color: var(--text);
112+
overflow: hidden;
113+
z-index: 1;
114+
}
115+
116+
& .consonant__card[data-active="true"] .barahkhadi__popover {
117+
visibility: visible;
118+
opacity: 1;
119+
}
120+
121+
& .letter__card[data-active="true"] .barahkhadi__popover {
122+
visibility: visible;
123+
opacity: 1;
124+
}
125+
126+
& .variations__grid {
127+
display: grid;
128+
grid-template-columns: repeat(4, 1fr);
129+
gap: 0.4rem;
130+
width: 100%;
131+
max-height: 100%;
132+
overflow-y: auto;
133+
}
134+
135+
& .variation {
136+
font-size: 1.5rem;
137+
padding: 0.4rem;
138+
text-align: center;
139+
background: color-mix(in srgb, var(--text) 5%, var(--background) 95%);
140+
border-radius: 4px;
141+
color: var(--text);
142+
border: 1px solid var(--border);
143+
}
144+
145+
& .group__row {
146+
padding: 1rem;
147+
background-color: color-mix(in srgb, var(--background) 97%, var(--text) 3%);
148+
border-radius: 0.5rem;
149+
}
150+
151+
& .row__grid {
152+
display: grid;
153+
gap: 1.25rem;
154+
grid-template-columns: repeat(auto-fit, 250px);
155+
justify-content: center;
156+
}
157+
158+
& .letter__card {
159+
width: 250px;
160+
height: 250px;
161+
position: relative;
162+
background-color: color-mix(in srgb, var(--secondary) 15%, var(--background) 85%);
163+
border-radius: 0.5rem;
164+
display: grid;
165+
place-items: center;
166+
text-decoration: none;
167+
transition: transform 0.2s ease;
168+
overflow: hidden;
169+
}
170+
171+
& .letter__card:hover {
172+
transform: none;
173+
background-color: color-mix(in srgb, var(--primary) 15%, var(--background) 85%);
174+
transition: all 0.2s ease;
175+
}
176+
}

‎src/assets/styles/english.css‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,80 @@
1818
color: var(--letter__txt--2);
1919
transition: color 0.5s ease-in;
2020
}
21+
22+
/* Controls styles */
23+
.controls {
24+
position: relative;
25+
background-color: color-mix(in srgb, var(--background) 95%, var(--text) 5%);
26+
padding: 1rem;
27+
z-index: 100;
28+
display: flex;
29+
justify-content: space-around;
30+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
31+
color: var(--text);
32+
}
33+
34+
.control-group {
35+
display: flex;
36+
align-items: center;
37+
gap: 1rem;
38+
accent-color: var(--primary);
39+
}
40+
41+
.control-group label {
42+
font-weight: bold;
43+
color: var(--text);
44+
}
45+
46+
.control-group select,
47+
.control-group button {
48+
padding: 0.5rem;
49+
border-radius: 4px;
50+
border: 1px solid var(--border);
51+
background-color: var(--background);
52+
color: var(--text);
53+
}
54+
55+
.control-group button {
56+
cursor: pointer;
57+
transition: all 0.3s;
58+
}
59+
60+
.control-group button:hover,
61+
.control-group select:hover {
62+
background-color: color-mix(in srgb, var(--background) 90%, var(--text) 10%);
63+
border-color: var(--primary);
64+
}
65+
66+
/* Background styles */
67+
.bg-gradient1 {
68+
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
69+
}
70+
71+
.bg-gradient2 {
72+
background: linear-gradient(45deg, #a8e6cf, #dcedc1);
73+
}
74+
75+
.bg-pattern1 {
76+
background-image: repeating-linear-gradient(45deg,
77+
rgba(0, 0, 0, 0.1) 0px,
78+
rgba(0, 0, 0, 0.1) 2px,
79+
transparent 2px,
80+
transparent 4px);
81+
}
82+
83+
.no-background {
84+
background: none !important;
85+
}
86+
87+
@keyframes letterPop {
88+
0% {
89+
transform: scale(0.8);
90+
opacity: 0.5;
91+
}
92+
93+
100% {
94+
transform: scale(1);
95+
opacity: 1;
96+
}
97+
}

‎src/pages/barahkhadi/[consonant].astro‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
import "@/assets/styles/barahkhadi/consonant.css";
3+
import BaseLayout from "@/layouts/Base";
4+
5+
import { hindiConsonants as consonants, matras } from "@/utils/common";
6+
7+
export function getStaticPaths() {
8+
return consonants.map((consonant) => ({ params: { consonant } }));
9+
}
10+
11+
const { consonant } = Astro.params;
12+
13+
const combinations = [consonant, ...Object.values(matras).map((matra) => consonant + matra)];
14+
---
15+
16+
<BaseLayout meta={{ title: `Barahkhadi - ${consonant}` }}>
17+
<div class="container__consonant">
18+
<div class="consonant__header">
19+
<a href="/barahkhadi" class="back__link">← Back</a>
20+
<h1>{consonant}</h1>
21+
</div>
22+
<div class="combinations__grid">
23+
{
24+
combinations.map((result) => (
25+
<div class="combination__card">
26+
<span class="combination__result">{result}</span>
27+
</div>
28+
))
29+
}
30+
</div>
31+
</div>
32+
</BaseLayout>

0 commit comments

Comments
 (0)