From 373c362f340229f2b0cf50b207f2c1ef9ebe0b78 Mon Sep 17 00:00:00 2001 From: Sambit Mondal Date: Sat, 26 Oct 2024 19:40:04 +0530 Subject: [PATCH] Fixed the UI --- css/style.css | 126 +++++++++++------ index.html | 378 ++++++++++++++++++++++++++------------------------ 2 files changed, 279 insertions(+), 225 deletions(-) diff --git a/css/style.css b/css/style.css index d352b17..f444e13 100644 --- a/css/style.css +++ b/css/style.css @@ -8,6 +8,7 @@ body { margin: 0px; background: #000; } + .autocomplete { position: relative; display: inline-block; @@ -28,18 +29,18 @@ body { .autocomplete-items div { padding: 10px; cursor: pointer; - background-color: #fff; + background-color: #fff; backdrop-filter: blur(25px); - border-bottom: 1px solid #d4d4d4; + border-bottom: 1px solid #d4d4d4; } .autocomplete-items div:hover { - background-color: #e9e9e9; + background-color: #e9e9e9; } .autocomplete-active { - background-color: DodgerBlue !important; - color: #ffffff; + background-color: DodgerBlue !important; + color: #ffffff; } .whtrlive { @@ -77,22 +78,27 @@ body { } .sidebar::-webkit-scrollbar-track { - background: transparent; /* Hide track when not needed */ + background: transparent; + /* Hide track when not needed */ border-radius: 10px; } .sidebar::-webkit-scrollbar-thumb { - background: rgba(136, 136, 136, 0.6); /* Semi-transparent thumb */ + background: rgba(136, 136, 136, 0.6); + /* Semi-transparent thumb */ border-radius: 10px; - background-clip: padding-box; /* Ensure border is visible */ + background-clip: padding-box; + /* Ensure border is visible */ } .sidebar::-webkit-scrollbar-thumb:hover { - background: rgba(85, 85, 85, 0.8); /* Darker on hover */ + background: rgba(85, 85, 85, 0.8); + /* Darker on hover */ } .sidebar::-webkit-scrollbar-corner { - background: transparent; /* Hide corner when not needed */ + background: transparent; + /* Hide corner when not needed */ } #locationInput { @@ -201,16 +207,55 @@ body { margin: -10px 0px 0px 0px; } +.container .bottom { + width: 100%; + display: flex; + justify-content: center; + align-items: end; +} + +.container .bottom .left { + width: 50%; + padding-right: 10px; +} + +.container .bottom .right { + width: 50%; + padding-left: 10px; +} + +.container .bottom .left .place { + display: flex; + align-items: start; + gap: 15px; + margin-top: 25px; +} + .container .bottom .left h1, .container .bottom .left h2, .container .bottom .left h3 { margin: 0px; } +.container .bottom .left #displayPlace { + font-size: 24px; +} + .container .bottom .day { color: #d7e3fc; } +.right .weather-temperature h1 { + font-size: 45px; + width: 100%; + margin-bottom: 15px; +} + +.right .tomorrow-temperature { + text-align: center; + font-size: 20px; +} + .sidebar h4 { margin-bottom: 0px; } @@ -220,11 +265,6 @@ body { margin: 0px; } -.place { - display: flex; - align-items: center; -} - .clear-history { background-color: transparent; color: white; @@ -241,6 +281,7 @@ body { gap: 20px; margin-bottom: 20px; } + .clear-history:hover { color: black; background-color: white; @@ -282,24 +323,24 @@ body { @media (max-width: 768px) { .whtrlive { - flex-direction: column; + flex-direction: column; } .sidebar { width: 100%; padding: 15px; border-right: none; - margin-bottom: 20px; + margin-bottom: 20px; } .container { - width: 100%; + width: 100%; padding: 15px; } .cities { - line-height: 2rem; - font-size: 18px; + line-height: 2rem; + font-size: 18px; } .weather-temperature .today-temperature { @@ -316,21 +357,21 @@ body { .clear-history { font-size: 14px; - padding: 10px 15px; - width: 100%; - text-align: center; + padding: 10px 15px; + width: 100%; + text-align: center; } - + .clear-history:hover { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.1); } } @media (max-width: 480px) { .sidebar { padding: 10px; - background: rgba(0, 0, 0, 0.5); + background: rgba(0, 0, 0, 0.5); } .container { @@ -338,7 +379,7 @@ body { } .time { - font-size: 28px; + font-size: 28px; } .weather-temperature .today-temperature { @@ -353,35 +394,37 @@ body { /* Logo adjustments */ .container .top img { - width: 70%; - max-width: 120px; + width: 70%; + max-width: 120px; } - + .container .top { flex-direction: column; - align-items: center; + align-items: center; } .container .bottom { - flex-direction: column; - align-items: center; + flex-direction: column; + align-items: center; text-align: center; } .weather-temperature { - flex-direction: column; - align-items: center; + flex-direction: column; + align-items: center; } .weather-icon { - width: 60px; + width: 60px; } } + /* Style for the Explore Button */ .explore-btn { position: absolute; - right: 20px; /* Position it to the right */ + right: 20px; + /* Position it to the right */ top: 50%; transform: translateY(-50%); background-color: #2a65a5; @@ -401,7 +444,8 @@ body { } .explore-btn svg { - margin-left: 10px; /* Space between text and chevron icon */ + margin-left: 10px; + /* Space between text and chevron icon */ } ::-webkit-scrollbar { @@ -435,6 +479,7 @@ body { } } + footer { color: white; bottom: 0; @@ -444,6 +489,5 @@ footer { text-align: center; padding: 10px; font-size: 0.625rem; - z-index: 1000; -} - + z-index: 1000; +} \ No newline at end of file diff --git a/index.html b/index.html index 291f5bd..e1da745 100644 --- a/index.html +++ b/index.html @@ -5,207 +5,217 @@ - - - - - - - - whtr.live - Minimalistic Weather Website - + + + + + + - - + + whtr.live - Minimalistic Weather Website + - - - + + - - - - - - - - - + + + - -
-
-
-
- -
- -
-

Cities

-
-
    -
  • New York
    • -
  • California
    • -
  • Paris
    • -
  • Tokyo
    • -
  • Bali
    • -
  • Sydney
    • -
  • Dubai
    • -
+ + + + + + + + + + + +
+
+
+
+
-
-

Last Visited

-
    - Empty.. -
-
+
+

More Information

+
    +
  • +
    +

    Sunrise

    +

    6:37 AM

    -

    6:09 PM

    -
- - -
-
-

February 25, 2023

-

Saturday

-

- - - -
London
-

+ +
  • +
    +

    Sunset

    +

    6:21 PM

    +
    +
    • +
  • +
    +

    Wind Speed

    +

    14km/h

    +
    +
    • +
  • +
    +

    Humidity

    +

    21%

    -
    -
    - weather status icon -

    40°C / 104°F

    -
    -

    - Tommorow: 20°C / 68°F -

    +
    • +
  • +
    +

    Precipitation

    +

    0%

    +
    • +
  • +
    +

    Cloudy

    +

    69%

    +
    +
    • + +

    Version 1.1

    +
    +
    +
    +
    + logo +

    Dev by Ato & Apixul

    +
    +

    6:09 PM

    +
    + + +
    +
    +

    February 25, 2023

    +

    Saturday

    +

    + + + + +
    London
    +

    +
    +
    +
    + weather status icon +

    40°C / 104°F

    +
    +

    + Tommorow: 20°C / 68°F +

    -
    - © 2024 All Rights Reserved | Developed By Ato and Apixul -
    +
    + © 2024 All Rights Reserved | Developed By Ato and Apixul +
    +
    + + + + - - AOS.init({ - duration: 700, - }); - + + + - - - - + \ No newline at end of file