Skip to content

Commit 24d3b1d

Browse files
khumnathkhumnath
committed
show only one converter with selection slider
1 parent 65a6f58 commit 24d3b1d

File tree

1 file changed

+198
-128
lines changed

1 file changed

+198
-128
lines changed

‎docs/index.html‎

Lines changed: 198 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -8,158 +8,220 @@
88
<script type="text/javascript" src="bikram.js"></script>
99
<script type="text/javascript" src="tithi.js"></script>
1010
<style>
11-
body {
12-
font-family: 'Eczar', sans-serif;
13-
margin: 0;
14-
padding: 0;
15-
box-sizing: border-box;
16-
display: flex;
17-
flex-direction: column;
18-
align-items: center;
19-
justify-content: center;
20-
min-height: 88vh;
21-
background-color: #f0f2f5;
22-
}
11+
body, h1, h2, h3, label, input, select, button, div {
12+
margin: 0;
13+
padding: 0;
14+
box-sizing: border-box;
15+
font-family: Eczar, sans-serif;
16+
}
2317

24-
h1, h2, h3 {
25-
text-align: center;
26-
margin: 20px 0;
27-
color: #333;
28-
}
18+
.container {
19+
display: flex;
20+
flex-direction: column;
21+
align-items: center;
22+
width: 100%;
23+
padding: 20px;
24+
}
2925

30-
.container {
31-
width: 90%;
32-
max-width: 1200px;
33-
background: white;
34-
padding: 20px;
35-
border-radius: 10px;
36-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
37-
display: flex;
38-
flex-direction: column;
39-
align-items: center;
40-
}
26+
#title {
27+
font-size: 2em;
28+
margin-bottom: 20px;
29+
color: #343a40;
30+
}
4131

42-
.language-toggle {
43-
display: flex;
44-
flex-direction: column;
45-
align-items: center;
46-
margin: 20px 0;
47-
max-width: 300px;
48-
width: 100%;
49-
}
32+
.language-toggle {
33+
display: flex;
34+
align-items: center;
35+
justify-content: center;
36+
margin-bottom: 20px;
37+
}
5038

51-
label {
52-
margin: 10px 0 5px;
53-
font-weight: 500;
54-
color: #555;
55-
}
39+
#languageLabel {
40+
margin-right: 10px;
41+
}
5642

57-
select, input, button {
58-
padding: 12px 20px;
59-
margin: 5px 0;
60-
width: 100%;
61-
box-sizing: border-box;
62-
border: 1px solid #ddd;
63-
border-radius: 5px;
64-
font-size: 16px;
65-
}
43+
.language-toggle select {
44+
width: auto;
45+
padding: 5px;
46+
}
6647

67-
button {
68-
background-color: #007bff; /* Blue */
69-
color: white;
70-
border: none;
71-
cursor: pointer;
72-
transition: background-color 0.3s;
73-
}
48+
.btn-container {
49+
display: flex;
50+
align-items: center;
51+
}
7452

75-
button:hover {
76-
background-color: #0056b3; /* Darker blue */
77-
}
53+
.btn-color-mode-switch {
54+
position: relative;
55+
width: 60px;
56+
height: 30px;
57+
margin: 0 10px;
58+
cursor: pointer;
59+
}
7860

79-
#bikramResult, #gregorianResult {
80-
margin-top: 20px;
81-
font-weight: bold;
82-
color: #007bff;
83-
}
61+
.btn-color-mode-switch input {
62+
opacity: 0;
63+
width: 100%;
64+
height: 100%;
65+
position: absolute;
66+
cursor: pointer;
67+
}
8468

85-
.converters {
86-
display: flex;
87-
flex-direction: row;
88-
justify-content: space-between;
89-
flex-wrap: wrap;
90-
width: 100%;
91-
}
69+
.slider {
70+
position: absolute;
71+
width: 100%;
72+
height: 100%;
73+
background-color: #007bff;
74+
border-radius: 15px;
75+
transition: background-color 0.4s;
76+
}
9277

93-
.converter-container {
94-
flex: 1 1 calc(50% - 20px); /* Adjust width for two columns with margin */
95-
background: #fff;
96-
padding: 20px;
97-
border-radius: 10px;
98-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
99-
margin: 10px;
100-
box-sizing: border-box;
101-
}
78+
.slider:before {
79+
content: '⇚';
80+
color: blue;
81+
position: absolute;
82+
width: 50%;
83+
height: 100%;
84+
background-color: #fff;
85+
border-radius: 15px;
86+
transition: transform 0.4s;
87+
}
10288

103-
@media (max-width: 768px) {
104-
.converters {
105-
flex-direction: column;
106-
}
89+
.btn-color-mode-switch input:checked + .slider:before {
90+
transform: translateX(100%);
91+
content: '⇛';
92+
color: blue;
93+
}
10794

108-
.converter-container {
109-
flex: 1 1 100%; /* Full width on small screens */
110-
margin-bottom: 20px;
111-
}
112-
}
95+
.converter-container {
96+
display: none;
97+
flex-direction: column;
98+
align-items: center;
99+
}
113100

101+
.converter-container.active {
102+
display: flex;
103+
}
104+
105+
label {
106+
margin-top: 10px;
107+
margin-bottom: 5px;
108+
color: #343a40;
109+
}
110+
111+
input[type="number"], select {
112+
padding: 10px;
113+
margin-bottom: 10px;
114+
width: 200px;
115+
border: 1px solid #ced4da;
116+
border-radius: 5px;
117+
transition: border-color 0.3s;
118+
}
119+
120+
input[type="number"]:focus, select:focus {
121+
border-color: #007bff;
122+
outline: none;
123+
}
124+
125+
button {
126+
padding: 10px 20px;
127+
background-color: #007bff;
128+
color: white;
129+
border: none;
130+
border-radius: 5px;
131+
cursor: pointer;
132+
margin-top: 10px;
133+
transition: background-color 0.3s;
134+
}
135+
136+
button:hover {
137+
background-color: #0056b3;
138+
}
139+
140+
/* Results */
141+
h3 {
142+
margin-top: 20px;
143+
color: #000000;
144+
}
114145
</style>
115146
</head>
116147
<body>
117-
<h1 id="title">Date Converter</h1>
148+
<div class="container">
149+
<h1 id="title">Date Converter</h1>
118150

119151
<div class="language-toggle">
120152
<label for="language" id="languageLabel">Select Language:</label>
121153
<select id="language" onchange="changeLanguage()">
122-
<option value="nepali">Nepali</option>
123-
<option value="english">English</option>
154+
<option id="english" value="english">English</option>
155+
<option id="nepali" value="nepali">Nepali</option>
124156
</select>
125157
</div>
126158

127-
<div class="container">
128-
<div class="converters">
129-
<div class="converter-container">
130-
<h2 id="convertToBikramTitle">Gregorian to Bikram Sambat</h2>
131-
<label for="gYear" id="gYearLabel">Year:</label>
132-
<input type="number" id="gYear" placeholder="YYYY" />
133-
134-
<label for="gMonth" id="gMonthLabel">Month:</label>
135-
<select id="gMonth"></select>
136-
137-
<label for="gDay" id="gDayLabel">Day:</label>
138-
<input type="number" id="gDay" placeholder="DD" />
139-
140-
<button onclick="convertToBikram()" id="convertToBikramButton">Convert to Bikram Sambat</button>
141-
142-
<h3 id="bikramResult"></h3>
143-
</div>
144-
145-
<div class="converter-container">
146-
<h2 id="convertToGregorianTitle">Bikram Sambat to Gregorian</h2>
147-
<label for="bsYear" id="bsYearLabel">Year:</label>
148-
<input type="number" id="bsYear" placeholder="YYYY" />
149-
150-
<label for="bsMonth" id="bsMonthLabel">Month:</label>
151-
<select id="bsMonth"></select>
152-
153-
<label for="bsDay" id="bsDayLabel">Day:</label>
154-
<input type="number" id="bsDay" placeholder="DD" />
155-
156-
<button onclick="convertToGregorian()" id="convertToGregorianButton">Convert to Gregorian</button>
157-
158-
<h3 id="gregorianResult"></h3>
159-
</div>
159+
<div class="btn-container">
160+
<div class="converter-title" id="convertToBikramTitle">Gregorian to Bikram Sambat</div>
161+
<label class="btn-color-mode-switch">
162+
<input type="checkbox" id="converterToggle" onclick="toggleConverter()">
163+
<div class="slider"></div>
164+
</label>
165+
<div class="converter-title" id="convertToGregorianTitle">Bikram Sambat to Gregorian</div>
166+
</div><br>
167+
168+
<div class="converter-container active" id="gregorianToBikramContainer">
169+
<div class="form-group">
170+
<label for="gYear" id="gYearLabel">Year:</label>
171+
<input type="number" id="gYear" placeholder="YYYY" />
172+
</div>
173+
174+
<div class="form-group">
175+
<label for="gMonth" id="gMonthLabel">Month:</label>
176+
<select id="gMonth"></select>
160177
</div>
178+
179+
<div class="form-group">
180+
<label for="gDay" id="gDayLabel">Day:</label>
181+
<input type="number" id="gDay" placeholder="DD" />
182+
</div>
183+
184+
<button onclick="convertToBikram()" id="convertToBikramButton">Convert to Bikram Sambat</button>
185+
186+
<h3 id="bikramResult"></h3>
161187
</div>
188+
189+
<div class="converter-container" id="bikramToGregorianContainer">
190+
<div class="form-group">
191+
<label for="bsYear" id="bsYearLabel">Year:</label>
192+
<input type="number" id="bsYear" placeholder="YYYY" />
193+
</div>
194+
195+
<div class="form-group">
196+
<label for="bsMonth" id="bsMonthLabel">Month:</label>
197+
<select id="bsMonth"></select>
198+
</div>
199+
200+
<div class="form-group">
201+
<label for="bsDay" id="bsDayLabel">Day:</label>
202+
<input type="number" id="bsDay" placeholder="DD" />
203+
</div>
204+
205+
<button onclick="convertToGregorian()" id="convertToGregorianButton">Convert to Gregorian</button>
206+
207+
<h3 id="gregorianResult"></h3>
208+
</div>
209+
</div>
162210
<script>
211+
function toggleConverter() {
212+
const gregorianToBikramContainer = document.getElementById('gregorianToBikramContainer');
213+
const bikramToGregorianContainer = document.getElementById('bikramToGregorianContainer');
214+
const converterToggle = document.getElementById('converterToggle');
215+
216+
// Update the display of the containers based on the checked state
217+
if (converterToggle.checked) {
218+
gregorianToBikramContainer.classList.remove('active');
219+
bikramToGregorianContainer.classList.add('active');
220+
} else {
221+
gregorianToBikramContainer.classList.add('active');
222+
bikramToGregorianContainer.classList.remove('active');
223+
}
224+
}
163225

164226
function populateDateDropdowns() {
165227
const today = new Date();
@@ -246,13 +308,15 @@ <h3 id="gregorianResult"></h3>
246308
const translations = {
247309
english: {
248310
title: "Date Converter",
311+
english: "English",
312+
nepali: "Nepali",
249313
languageLabel: "Select Language:",
250-
convertToBikramTitle: "Convert Gregorian to Bikram Sambat",
314+
convertToBikramTitle: "Convert to Bikram Sambat",
251315
gYearLabel: "Year:",
252316
gMonthLabel: "Month:",
253317
gDayLabel: "Day:",
254318
convertToBikramButton: "Convert to Bikram Sambat",
255-
convertToGregorianTitle: "Convert Bikram Sambat to Gregorian",
319+
convertToGregorianTitle: "Convert to Gregorian",
256320
bsYearLabel: "Year:",
257321
bsMonthLabel: "Month:",
258322
bsDayLabel: "Day:",
@@ -262,6 +326,8 @@ <h3 id="gregorianResult"></h3>
262326
},
263327
nepali: {
264328
title: "मिति रूपान्तरण",
329+
english: "अङ्ग्रेजी",
330+
nepali: "नेपाली",
265331
languageLabel: "भाषा चयन गर्नुहोस्:",
266332
convertToBikramTitle: "विक्रम सम्बतमा रूपान्तरण",
267333
gYearLabel: "वर्ष:",
@@ -285,6 +351,8 @@ <h3 id="gregorianResult"></h3>
285351
const lang = translations[currentLanguage];
286352

287353
document.getElementById("title").innerText = lang.title;
354+
document.getElementById("nepali").innerText = lang.nepali;
355+
document.getElementById("english").innerText = lang.english;
288356
document.getElementById("languageLabel").innerText = lang.languageLabel;
289357
document.getElementById("convertToBikramTitle").innerText = lang.convertToBikramTitle;
290358
document.getElementById("gYearLabel").innerText = lang.gYearLabel;
@@ -309,6 +377,7 @@ <h3 id="gregorianResult"></h3>
309377

310378

311379

380+
312381
function updateDropdowns(gMonths, bsMonths) {
313382
const gMonthSelect = document.getElementById("gMonth");
314383
const bsMonthSelect = document.getElementById("bsMonth");
@@ -382,6 +451,7 @@ <h3 id="gregorianResult"></h3>
382451
const weekdayName = bikram.getWeekdayName(gYear, gMonth, gDay);
383452
document.getElementById("gregorianResult").innerText = ` ${gYear} ${gMonthName} ${gDay} ${weekdayName}`;
384453
}
454+
385455
</script>
386456
</body>
387457
</html>

0 commit comments

Comments
 (0)