From f82f9c3e35db689180d64710e7f9fc9e92d92576 Mon Sep 17 00:00:00 2001 From: Viraj Mathur <70805976+Viraj-Mathur@users.noreply.github.com> Date: Thu, 12 Oct 2023 01:53:47 +0530 Subject: [PATCH] switch location adjusted (#38) --- index.html | 11 +- index.js | 4 +- style.css | 361 ++++++++++++++++++----------------------------------- 3 files changed, 132 insertions(+), 244 deletions(-) diff --git a/index.html b/index.html index 0dd0d99..898bf95 100644 --- a/index.html +++ b/index.html @@ -21,6 +21,12 @@ <!-- Logo section --> <div class="logo"> <a href="https://doofenshmirtz-evil-incorp.github.io/Fuelish/" target="_blank" rel="noopener noreferrer"><img class="logo-image" src="images/logo.png" width="150px" alt=""></a> + + <label class="switch"> + <input type="checkbox" id="mode-toggle"> + <i class="icontoggle fa fa-moon-o" id="toggle-icon" aria-hidden="true"></i> + </label> + </div> <!-- Search box section --> <div class="container"> @@ -35,10 +41,7 @@ <option value="" selected disabled style="color: azure;">Select a city</option> </select> <br> - <label class="switch"> - <input type="checkbox" id="mode-toggle"> - <i class="icontoggle fa fa-moon-o" id="toggle-icon" aria-hidden="true"></i> - </label> + </div> <!-- Map section --> diff --git a/index.js b/index.js index e2ab685..fe04b8f 100644 --- a/index.js +++ b/index.js @@ -413,7 +413,7 @@ modeToggle.addEventListener("change", () => { const classtogglename=document.getElementById("toggle-icon"); classtogglename.classList.remove('fa-moon-o'); classtogglename.classList.add('fa-sun-o'); - classtogglename.style.color="white" + classtogglename.style.color="black" mapContainer.classList.add("light-mode"); } else { @@ -428,3 +428,5 @@ modeToggle.addEventListener("change", () => { classtogglename.style.color="white" } }); + + diff --git a/style.css b/style.css index b619851..10d670f 100644 --- a/style.css +++ b/style.css @@ -1,34 +1,48 @@ -*{ +/* Reset CSS */ +* { margin: 0; padding: 0; border: 0; outline: none; box-sizing: border-box; } + +/* Body Styles */ html, body { min-height: 100%; max-height: 200%; } -body{ + +body { display: flex; align-items: center; - justify-content:center; - background:rgb(0, 0, 0) + justify-content: center; + background: rgb(0, 0, 0); } -.light-mode -{ - background:white; +/* Light and Dark Mode Styles */ +.light-mode { + background: white; } +.light-mode .logo-image { + content: url('images/logo2.png'); +} + +.dark .favicon { + color: url('images/favicon2.png'); +} + +/* Footer Styles */ .footer { - position:relative; + position: relative; left: 0; bottom: 0; width: 100%; text-align: center; - } +} +/* Page Container Styles */ #page-container { position: relative; min-height: 80vh; @@ -37,43 +51,28 @@ body{ padding-bottom: 10%; } -.logo{ - z-index: 2; - position:relative; - top: 0; +/* Logo Styles */ +.logo { + /* z-index: 2; */ + position: relative; + /* top: 0; */ } -.light-mode .logo-image -{ - content: url('images/logo2.png'); -} -.dark .favicon -{ - color:url('images/favicon2.png') +/* Name Styles */ +.light-mode .name1, .light-mode .name2 { + color: black; } -.light-mode .name1 -{ - color:black; -} -.light-mode .name2 -{ - color:black -} - .name1 -{ +.name1, .name2 { color: white; } -.name2 -{ - color:white -} - +/* Container Styles */ .container { position: relative; margin-top: 15vh; - margin-bottom: auto;border-radius: 3px; + margin-bottom: auto; + border-radius: 3px; width: 300px; height: 150px; background: #1d404a; @@ -82,6 +81,7 @@ body{ transition: 0.6s ease-out; } +/* Leaflet Styles */ .leaflet-container { margin-top: 0px; margin-left: auto; @@ -89,66 +89,29 @@ body{ height: 50%; width: 97%; max-height: 40%; - display:None; -} - -.leaflet-control-attribution svg { - width:0 -} - .leaflet-layer, - .leaflet-control-zoom-in, - .leaflet-control-zoom-out, - .leaflet-control-attribution { - filter: invert(100%) hue-rotate(180deg) brightness(100%) contrast(100%); -} - -.light-mode .leaflet-layer, -.light-mode .leaflet-control-zoom-in, -.light-mode .leaflet-control-zoom-out, -.light-mode .leaflet-control-attribution { - filter: invert(0%) hue-rotate(0deg) brightness(100%) contrast(100%); + display: none; } - - -.leaflet-popup-content-wrapper, .leaflet-popup-tip { - background: rgb(190, 12, 12); - color: #7a2323; - box-shadow: 0 3px 14px rgba(207, 16, 16, 0.4); - } - -select[name="state"] -{ +/* Select Styles */ +select[name="state"], select[name="city"] { font-family: 'Courier New', Courier, monospace; text-align: center; - background-color:#547f85; + background-color: #547f85; color: white; - position:relative; + position: relative; width: 70%; height: 20%; padding: 2%; z-index: 2; border-radius: 3px; - -} - -select[name="city"] { - font-family: 'Courier New', Courier, monospace; - text-align: center; - background-color:#547f85; - color: white; - position: relative; - padding: 2%; - width: 70%; - z-index: 2; - border-radius: 3px; } select option:disabled { color: black; } -.search-box button{ +/* Search Box Styles */ +.search-box button { z-index: 2; cursor: pointer; width: 50px; @@ -160,13 +123,13 @@ select option:disabled { transition: 0.4s ease; } -.search-box button:hover{ +.search-box button:hover { color: #d01212; background: #004E58; } -.nearby -{ +/* Nearby Styles */ +.nearby { z-index: 2; margin-top: 10px; text-align: center; @@ -177,37 +140,15 @@ select option:disabled { opacity: 0; } -.price-box{ - z-index: 2; - width: 100%; - display: flex; - justify-content: space-between; - margin-top: 10px; - margin-left: 2%; -} - -.price-box .price-petrol{ +/* Price Box Styles */ +.price-box, .change { z-index: 2; - float: left; - color: #000000; - font-size: 1.5rem; - font-weight: 800; - margin-top: 10px; - margin-left: 30px; -} - -.price-box .price-diesel{ - z-index: 2; - float: left; - color: #000000; - font-size: 1rem; - font-weight: 800; - margin-top: 10px; - text-align: center; - margin-right: 15%; + scale: 0; + opacity: 0; } -.price-box .price-petrol, .price-box .price-diesel span{ +/* Price Styles */ +.price-box .price-petrol, .price-box .price-diesel { z-index: 2; text-align: center; position: relative; @@ -217,16 +158,8 @@ select option:disabled { padding-right: 10%; } -.change{ - z-index: 2; - width: 100%; - display: flex; - justify-content: space-between; - margin-top: -10px; - margin-left: 5%; -} - -.change .petrol-change, .change .diesel-change{ +/* Change Styles */ +.change .petrol-change, .change .diesel-change { z-index: 2; display: flex; position: relative; @@ -236,7 +169,7 @@ select option:disabled { margin-left: -10%; } -.change .petrol-change{ +.change .petrol-change { z-index: 2; justify-content: center; font-weight: bold; @@ -244,15 +177,16 @@ select option:disabled { text-align: center; } -.change .diesel-change{ +.change .diesel-change { z-index: 2; margin-right: 8%; justify-content: center; - font-weight: bold;padding-left: 5%; + font-weight: bold; + padding-left: 5%; text-align: center; } -.change i{ +.change i { z-index: 2; color: #06283D; font-size: 26px; @@ -260,38 +194,34 @@ select option:disabled { margin-top: 6px; } -.change span{ +.change span { z-index: 2; color: #06283D; font-size: 22px; font-weight: 500; } -.change p{ +.change p { z-index: 2; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; color: #000000; font-size: 14px; font-weight: 500; } -.price-box, .change{ - z-index: 2; - scale: 0; - opacity: 0; -} -.light-mode .price-box , -.light-mode .price-petrol , -.light-mode .price-diesel , -.light-mode .change p -{ +/* Light Mode Styles */ +.light-mode .price-box, +.light-mode .price-petrol, +.light-mode .price-diesel, +.light-mode .change p { color: rgb(255, 255, 255); } -footer{ +/* Footer Styles */ +footer { z-index: 2; color: rgb(255, 252, 252); - text-align: center; + text-align: center; bottom: 0; right: 0; left: 0; @@ -302,123 +232,76 @@ footer{ height: 2.5rem; } -.light-mode footer -{ - color:rgb(0, 0, 0); +/* Light Mode Footer Styles */ +.light-mode footer { + color: rgb(0, 0, 0); } -footer a{ + +/* Footer Link Styles */ +footer a { color: rgb(145, 222, 234); } -.fadeIn{ +/* Fade In Animation */ +.fadeIn { animation: 0.5s fadeIn forwards; animation-delay: 0.5s; } - - -@keyframes fadeIn{ - to { - scale: 1; - opacity: 1; - } -} - - -/* @media only screen and (min-width: 768px) { - .leaflet-container { - position:fixed; - left: 0; - top:0; - right:0; - bottom: 0; - margin-top: 0; - margin-left: 0; - margin-right: 0; - height: 100vh; - max-height: 100vh; - width: 100vw; - display:block; - z-index: -3; - } - .container { - z-index: 1; - position: fixed; - left: 1%; - } - - .search-box{ - position: relative; - z-index: 2; - } - footer{ - display: flex; - position: fixed; - flex-direction: column; - width: max-content; - margin-bottom: 5vh; - } -} - -@media (max-width: 767px) -{ */ - .price-box .price-diesel, - .price-box .price-petrol, - .change p - { - color:white; - } -/* } */ -/* Styles for the toggle button container */ - -/* @media (prefers-color-scheme: dark) { - body { - background-color: #121212; - color: #fff; - } - } */ - - /* Styles for the toggle switch */ - .switch { - margin-left: 15px; - margin-top: 20px; - position: relative; +/* Toggle Switch Styles */ +.switch { + position: absolute; + top: 18px; /* Adjusted value for alignment */ + left: 286px; /* Adjusted value for alignment */ padding: 0; - width: 70%; - z-index: 2; width: 20px; height: 10px; + z-index: 2; + +} + +.switch input:checked { + background-color: #2196F3; +} + + + Light Mode Switch Background */ + .light-mode .switch input:checked { + background-color: black /* Your desired background color for light mode */; + } - } - #toggle-icon{ - padding-top:15px; + .switch input:checked { + transform: translateX(26px); +} + + +#toggle-icon { + padding-top: 15px; padding-bottom: 17px; color: white; - font-size:larger - } - + font-size: larger; +} - #mode-toggle{ - right:-21px; +#mode-toggle { + right: -21px; position: fixed; - } - - input:checked { +} + +input:checked { background-color: #2196F3; - } - - input:checked { +} + +input:checked { transform: translateX(26px); - } - +} - .light-mode .leaflet-container { +/* Light Mode Leaflet Styles */ +.light-mode .leaflet-container { background-color: #121212; - } - - .light-mode .leaflet-popup-content-wrapper, - .light-mode .leaflet-popup-tip { - background: #222; - color: #fff; - } - +} + +.light-mode .leaflet-popup-content-wrapper, +.light-mode .leaflet-popup-tip { + background: #222; + color: #1d1919; +}