Merge pull request #16 from AdarshRaj241408/main

Enhancement: Add Explore Button with Day/Night Mode and Chevron Icon Update
whtrapp · Oct 24, 2024 · b70d64c · b70d64c
2 parents 2ec0c61 + 3dd3b91
commit b70d64c
Show file tree

Hide file tree

Showing 4 changed files with 403 additions and 256 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/css/style.css b/css/style.css
@@ -189,3 +189,36 @@ body {
 .clear-history:hover svg {
   fill: black;
 }
+
+/* Style for the Explore Button */
+.explore-btn {
+  position: absolute;
+  right: 20px; /* Position it to the right */
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: #2a65a5;
+  color: white;
+  border: none;
+  padding: 12px 20px;
+  font-size: 18px;
+  cursor: pointer;
+  border-radius: 50px;
+  display: flex;
+  align-items: center;
+  transition: background-color 0.3s ease;
+}
+
+.explore-btn:hover {
+  background-color: #0056b3;
+}
+
+.explore-btn svg {
+  margin-left: 10px; /* Space between text and chevron icon */
+}
+
+@media screen and (max-width: 768px) {
+  .explore-btn {
+    padding: 10px 16px;
+    font-size: 16px;
+  }
+}
diff --git a/index.html b/index.html
@@ -7,7 +7,10 @@
 <html lang="en">
   <head>
     <!--Meta Tags-->
-    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"/>
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="upgrade-insecure-requests"
+    />
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -30,7 +33,10 @@
       name="description"
       content="Minimalistic Website for Checking Weather. Type your location and see the website!"
     />
-    <meta name="keywords" content="Weather, Live Weather, Weather Updates, Weather Today, Todays Weather Updates, Weather Status, whtr.live"/>
+    <meta
+      name="keywords"
+      content="Weather, Live Weather, Weather Updates, Weather Today, Todays Weather Updates, Weather Status, whtr.live"
+    />
     <meta name="robots" content="index, follow" />
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="language" content="English" />
@@ -41,7 +47,19 @@
       <div class="sidebar" data-aos="fade-right">
         <form id="locationInput">
           <input type="text" class="search" placeholder="Search Location.." />
-          <button class="searchbtn"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#fff" viewBox="0 0 256 256"><path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path></svg></button>
+          <button class="searchbtn">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              fill="#fff"
+              viewBox="0 0 256 256"
+            >
+              <path
+                d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"
+              ></path>
+            </svg>
+          </button>
         </form>
         <h4>Cities</h4>
         <div class="cities-div">
@@ -60,7 +78,19 @@ <h4>Last Visited</h4>
         <ul id="lastVisitedList" class="cities">
           Empty..
         </ul>
-        <button id="clearHistory" class="clear-history"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 256 256"><path d="M235.29,216.7C212.86,205.69,200,182.12,200,152V134.69a15.94,15.94,0,0,0-10.09-14.87l-28.65-11.46A8,8,0,0,1,156.79,98l22.32-56.67C184,28.79,178,14.21,165.34,9.51a24,24,0,0,0-30.7,13.71L112.25,80.08a8,8,0,0,1-10.41,4.5L73.11,73.08a15.91,15.91,0,0,0-17.38,3.66C34.68,98.4,24,123.71,24,152a111.53,111.53,0,0,0,31.15,77.53A8.06,8.06,0,0,0,61,232H232a8,8,0,0,0,8-7.51A8.21,8.21,0,0,0,235.29,216.7ZM115.11,216a87.52,87.52,0,0,1-24.26-41.71,8.21,8.21,0,0,0-9.25-6.18A8,8,0,0,0,75.28,178a105.33,105.33,0,0,0,18.36,38H64.44A95.62,95.62,0,0,1,40,152a85.92,85.92,0,0,1,7.73-36.3l137.8,55.13c3,18.06,10.55,33.5,21.89,45.19Z"></path></svg> Clear History</button>
+        <button id="clearHistory" class="clear-history">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="18"
+            height="18"
+            viewBox="0 0 256 256"
+          >
+            <path
+              d="M235.29,216.7C212.86,205.69,200,182.12,200,152V134.69a15.94,15.94,0,0,0-10.09-14.87l-28.65-11.46A8,8,0,0,1,156.79,98l22.32-56.67C184,28.79,178,14.21,165.34,9.51a24,24,0,0,0-30.7,13.71L112.25,80.08a8,8,0,0,1-10.41,4.5L73.11,73.08a15.91,15.91,0,0,0-17.38,3.66C34.68,98.4,24,123.71,24,152a111.53,111.53,0,0,0,31.15,77.53A8.06,8.06,0,0,0,61,232H232a8,8,0,0,0,8-7.51A8.21,8.21,0,0,0,235.29,216.7ZM115.11,216a87.52,87.52,0,0,1-24.26-41.71,8.21,8.21,0,0,0-9.25-6.18A8,8,0,0,0,75.28,178a105.33,105.33,0,0,0,18.36,38H64.44A95.62,95.62,0,0,1,40,152a85.92,85.92,0,0,1,7.73-36.3l137.8,55.13c3,18.06,10.55,33.5,21.89,45.19Z"
+            ></path>
+          </svg>
+          Clear History
+        </button>
         <hr />
         <h4>More Information</h4>
         <ul class="more-info">
@@ -111,11 +141,37 @@ <h4>More Information</h4>
           </div>
           <h1 class="time">6:09&nbsp;PM</h1>
         </div>
+        <!-- Explore Button -->
+        <button id="exploreBtn" class="explore-btn">
+          Explore
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            fill="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path d="M9 18l6-6-6-6" />
+          </svg>
+        </button>
         <div class="bottom" data-aos="fade-up">
           <div class="left">
             <h2 class="date">February 25, 2023</h2>
             <h2 class="day">Saturday</h2>
-            <h1 class="place"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#fff" viewBox="0 0 256 256"><path d="M128,16a88.1,88.1,0,0,0-88,88c0,75.3,80,132.17,83.41,134.55a8,8,0,0,0,9.18,0C136,236.17,216,179.3,216,104A88.1,88.1,0,0,0,128,16Zm0,56a32,32,0,1,1-32,32A32,32,0,0,1,128,72Z"></path></svg> London</h1>
+            <h1 class="place">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="32"
+                height="32"
+                fill="#fff"
+                viewBox="0 0 256 256"
+              >
+                <path
+                  d="M128,16a88.1,88.1,0,0,0-88,88c0,75.3,80,132.17,83.41,134.55a8,8,0,0,0,9.18,0C136,236.17,216,179.3,216,104A88.1,88.1,0,0,0,128,16Zm0,56a32,32,0,1,1-32,32A32,32,0,0,1,128,72Z"
+                ></path>
+              </svg>
+              London
+            </h1>
           </div>
           <div class="right">
             <div class="weather-temperature">