Skip to content

Commit 65a6f58

Browse files
khumnathkhumnath
committed
ui change
1 parent 5b7725d commit 65a6f58

File tree

1 file changed

+67
-50
lines changed

1 file changed

+67
-50
lines changed

‎docs/index.html‎

Lines changed: 67 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -17,30 +17,34 @@
1717
flex-direction: column;
1818
align-items: center;
1919
justify-content: center;
20-
min-height: 100vh;
20+
min-height: 88vh;
2121
background-color: #f0f2f5;
2222
}
2323

2424
h1, h2, h3 {
2525
text-align: center;
26-
margin: 10px 0;
26+
margin: 20px 0;
2727
color: #333;
2828
}
2929

3030
.container {
3131
width: 90%;
32-
max-width: 600px;
32+
max-width: 1200px;
3333
background: white;
3434
padding: 20px;
3535
border-radius: 10px;
3636
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
37+
display: flex;
38+
flex-direction: column;
39+
align-items: center;
3740
}
3841

39-
.language-toggle, .conversion-form {
42+
.language-toggle {
4043
display: flex;
4144
flex-direction: column;
4245
align-items: center;
4346
margin: 20px 0;
47+
max-width: 300px;
4448
width: 100%;
4549
}
4650

@@ -51,10 +55,9 @@
5155
}
5256

5357
select, input, button {
54-
padding: 3px 19px;
58+
padding: 12px 20px;
5559
margin: 5px 0;
5660
width: 100%;
57-
max-width: 250px;
5861
box-sizing: border-box;
5962
border: 1px solid #ddd;
6063
border-radius: 5px;
@@ -67,7 +70,6 @@
6770
border: none;
6871
cursor: pointer;
6972
transition: background-color 0.3s;
70-
font-family: 'Eczar', sans-serif;
7173
}
7274

7375
button:hover {
@@ -80,31 +82,39 @@
8082
color: #007bff;
8183
}
8284

83-
@media (min-width: 600px) {
84-
.language-toggle, .conversion-form {
85-
flex-direction: column;
86-
justify-content: space-between;
87-
}
85+
.converters {
86+
display: flex;
87+
flex-direction: row;
88+
justify-content: space-between;
89+
flex-wrap: wrap;
90+
width: 100%;
91+
}
8892

89-
.conversion-form label, .conversion-form select, .conversion-form input, .conversion-form button {
90-
width: 48%;
91-
}
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+
}
92102

93-
.conversion-form button {
94-
width: 100%;
103+
@media (max-width: 768px) {
104+
.converters {
105+
flex-direction: column;
95106
}
96-
}
97107

98-
@media (min-width: 768px) {
99-
.container {
100-
padding: 40px;
108+
.converter-container {
109+
flex: 1 1 100%; /* Full width on small screens */
110+
margin-bottom: 20px;
101111
}
102112
}
103113

104114
</style>
105115
</head>
106116
<body>
107-
<h1 id="title">Date Converter</h1>
117+
<h1 id="title">Date Converter</h1>
108118

109119
<div class="language-toggle">
110120
<label for="language" id="languageLabel">Select Language:</label>
@@ -114,34 +124,41 @@ <h1 id="title">Date Converter</h1>
114124
</select>
115125
</div>
116126

117-
<h2 id="convertToBikramTitle">Gregorian to Bikram Sambat</h2>
118-
<label for="gYear" id="gYearLabel">Year:</label>
119-
<input type="number" id="gYear" placeholder="YYYY" />
120-
121-
<label for="gMonth" id="gMonthLabel">Month:</label>
122-
<select id="gMonth"></select>
123-
124-
<label for="gDay" id="gDayLabel">Day:</label>
125-
<input type="number" id="gDay" placeholder="DD" />
126-
127-
<button onclick="convertToBikram()" id="convertToBikramButton">Convert to Bikram Sambat</button>
128-
129-
<h3 id="bikramResult"></h3>
130-
131-
<h2 id="convertToGregorianTitle">Bikram Sambat to Gregorian</h2>
132-
<label for="bsYear" id="bsYearLabel">Year:</label>
133-
<input type="number" id="bsYear" placeholder="YYYY" />
134-
135-
<label for="bsMonth" id="bsMonthLabel">Month:</label>
136-
<select id="bsMonth"></select>
137-
138-
<label for="bsDay" id="bsDayLabel">Day:</label>
139-
<input type="number" id="bsDay" placeholder="DD" />
140-
141-
<button onclick="convertToGregorian()" id="convertToGregorianButton">Convert to Gregorian</button>
142-
143-
<h3 id="gregorianResult"></h3>
144-
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>
160+
</div>
161+
</div>
145162
<script>
146163

147164
function populateDateDropdowns() {

0 commit comments

Comments
 (0)