From 65a6f587342ecdd2e6b3ecd2269c45ce2ae87840 Mon Sep 17 00:00:00 2001 From: khumnath Date: Fri, 22 Nov 2024 12:57:10 +0900 Subject: [PATCH] ui change --- docs/index.html | 117 +++++++++++++++++++++++++++--------------------- 1 file changed, 67 insertions(+), 50 deletions(-) diff --git a/docs/index.html b/docs/index.html index f034f57..e2e7d46 100644 --- a/docs/index.html +++ b/docs/index.html @@ -17,30 +17,34 @@ flex-direction: column; align-items: center; justify-content: center; - min-height: 100vh; + min-height: 88vh; background-color: #f0f2f5; } h1, h2, h3 { text-align: center; - margin: 10px 0; + margin: 20px 0; color: #333; } .container { width: 90%; - max-width: 600px; + max-width: 1200px; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; + align-items: center; } -.language-toggle, .conversion-form { +.language-toggle { display: flex; flex-direction: column; align-items: center; margin: 20px 0; + max-width: 300px; width: 100%; } @@ -51,10 +55,9 @@ } select, input, button { - padding: 3px 19px; + padding: 12px 20px; margin: 5px 0; width: 100%; - max-width: 250px; box-sizing: border-box; border: 1px solid #ddd; border-radius: 5px; @@ -67,7 +70,6 @@ border: none; cursor: pointer; transition: background-color 0.3s; - font-family: 'Eczar', sans-serif; } button:hover { @@ -80,31 +82,39 @@ color: #007bff; } -@media (min-width: 600px) { - .language-toggle, .conversion-form { - flex-direction: column; - justify-content: space-between; - } +.converters { + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + width: 100%; +} - .conversion-form label, .conversion-form select, .conversion-form input, .conversion-form button { - width: 48%; - } +.converter-container { + flex: 1 1 calc(50% - 20px); /* Adjust width for two columns with margin */ + background: #fff; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + margin: 10px; + box-sizing: border-box; +} - .conversion-form button { - width: 100%; +@media (max-width: 768px) { + .converters { + flex-direction: column; } -} -@media (min-width: 768px) { - .container { - padding: 40px; + .converter-container { + flex: 1 1 100%; /* Full width on small screens */ + margin-bottom: 20px; } } -

Date Converter

+

Date Converter

@@ -114,34 +124,41 @@

Date Converter

-

Gregorian to Bikram Sambat

- - - - - - - - - - - -

- -

Bikram Sambat to Gregorian

- - - - - - - - - - - -

- +
+
+
+

Gregorian to Bikram Sambat

+ + + + + + + + + + + +

+
+ +
+

Bikram Sambat to Gregorian

+ + + + + + + + + + + +

+
+
+