\n\t\t\t\t
\n\t\t\t
\r\n\r\n\r\n \r\n \r\n Weather App<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.6.0\/css\/all.min.css\" integrity=\"sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U\/M7pSPA\/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" \/>\r\n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/swiper\/swiper-bundle.min.css\" \/>\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/karachiweather.com\/wp-content\/uploads\/wp-coder\/style-1.css\">\r\n\t\r\n\t<style>\r\n\t\t@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');\r\n\r\n\t\t*{\r\n padding: 0%;\r\n margin: 0%;\r\n box-sizing: border-box;\r\n font-family: \"Poppins\", sans-serif;\r\n \r\n}\r\n\r\nbody{\r\n scroll-behavior: smooth;\r\n}\r\n\r\n.main{\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.box{\r\n width: 500px;\r\n height: 70px;\r\n margin: 0 auto;\r\n margin-top: 10px;\r\n margin-bottom: 10px;\r\n display: none;\r\n}\r\n\r\n.box img{\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\r\n.l-r{\r\n width: 100px;\r\n height: 300px;\r\n margin: 0 auto;\r\n margin-top: 40px; \r\n display: none;\r\n}\r\n\r\n.l-r img{\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n}\r\n\r\n.section{\r\n width: 95%;\r\n height: max-content;\r\n margin: 0 auto;\r\n padding: 5px 10px;\r\n color: #1f1f1f;\r\n}\r\n\r\n#choose-area{\r\n cursor: pointer;\r\n}\r\n.container{\r\n color: #1f1f1f;\r\n padding: 10px 20px;\r\n display: flex;\r\n gap: 5px; \r\n align-items: center;\r\n margin-left: 2vw;\r\n}\r\n.div-1, .div-2 {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.sub-container{\r\n display: flex;\r\n gap: 5px;\r\n align-items: center;\r\n}\r\n\r\n.input{\r\n width: 400px;\r\n background-color: #939292;\r\n height: 40px;\r\n margin-left: 8vw;\r\n display: flex;\r\n align-items: center;\r\n border-radius: 10px;\r\n justify-content: space-between;\r\n padding: 0 15px;\r\n display: none;\r\n}\r\n\r\n\r\n.input input{\r\n width: 80%;\r\n padding: 0 10px;\r\n border: none;\r\n outline: none;\r\n background-color: transparent;\r\n font-size: 18px;\r\n color: white;\r\n}\r\n\r\n\r\n\r\n.input i{\r\n font-size: 22px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n color: white;\r\n}\r\n\r\nh2 sup{\r\n font-weight: bold;\r\n color: rgb(17, 97, 235);\r\n}\r\n\r\n.div-2 a{\r\n color: rgb(39, 140, 230);\r\n text-decoration: none;\r\n margin-right: 10px;\r\n font-size: 20px;\r\n}\r\n\r\n\r\n.container-1{\r\n display: flex;\r\n color: #1f1f1f;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 30px;\r\n}\r\n\r\n\r\n\r\n.div-3{\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 10px;\r\n margin-right: 4vw;\r\n}\r\n.div-3 img{\r\n width: 90px;\r\n object-fit: contain;\r\n}\r\n\r\n\r\n.img-temp{\r\n display: flex;\r\n gap: 10px;\r\n align-items: flex-start;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n.text-1{\r\n margin-top: .3vw;\r\n font-size: 16px;\r\n line-height: 28px;\r\n color: #939292;\r\n}\r\n\r\n.text-2{\r\n font-size: 16px;\r\n color: #939292;\r\n}\r\n\r\n.div-4{\r\n margin-top: 16px;\r\n}\r\n\r\n.div-4,.text-2{\r\n display: flex;\r\n flex-direction: column;\r\n line-height: 28px;\r\n align-items: flex-end;\r\n justify-content: flex-end;\r\n \r\n}\r\n.div-4 h3{\r\n font-size: 20px;\r\n}\r\n\r\n.links{\r\n margin-left: 2.2vw;\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 20px;\r\n}\r\n\r\n.links a {\r\n color: #1f1f1f;\r\n text-decoration: none;\r\n cursor: pointer;\r\n margin-right: 10px;\r\n font-size: 18px;\r\n font-weight: 600;\r\n position: relative; \/* Necessary for positioning the ::after element *\/\r\n}\r\n\r\n.links a::after {\r\n content: '';\r\n display: block;\r\n width: 100%;\r\n height: 3px;\r\n background-color: rgb(255, 234, 7); \r\n position: absolute;\r\n left: 0;\r\n bottom: -8px; \r\n transform: scaleX(0); \r\n transition: transform 0.3s ease; \r\n}\r\n\r\n.links a:hover::after {\r\n transform: scaleX(1); \r\n}\r\n\r\n\r\n.line{\r\n font-size: 23px;\r\n font-weight: 600;\r\n color: #434141;\r\n}\r\n\r\n\r\n\r\n.city {\r\n border: 1px solid #ccc;\r\n padding: 10px;\r\n margin-bottom: 5px;\r\n}\r\n\r\n.heading{\r\n text-align: center;\r\n margin-top: 1vw;\r\n margin-bottom: 20px;\r\n font-size: 35px !important;\r\n font-weight: 600;\r\n\tcolor:black !important;\r\n}\r\n\r\n#weather-container_1{\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-around;\r\n margin-top: 20px;\r\n margin-left: 2vw;\r\n \r\n \r\n}\r\n\r\n\r\n\r\n.city{\r\n display: flex;\r\n border: 1px solid transparent;\r\n outline: none;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 30px;\r\n}\r\n\r\n\r\n.city h2{\r\n font-size: 20px;\r\n font-weight: 400;\r\n}\r\n\r\n\r\n.city p{\r\n font-size: 18px;\r\n}\r\n\r\n.today-weahter{\r\n width: 90%;\r\n}\r\n\r\n\r\n \r\n\r\n.weather-wrapper {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-evenly;\r\n margin-top: 50px;\r\n gap: 0px;\r\n transition: transform 0.3s ease-in-out;\r\n \r\n}\r\n\r\n\r\n\r\n.w-1 {\r\n min-width: 120px; \r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n text-align: center;\r\n gap: 8px;\r\n}\r\n\r\n.weather-wrapper h4 {\r\n font-size: 18px;\r\n font-weight: 500;\r\n color: #939292;\r\n}\r\n\r\n.weather-wrapper h3 {\r\n font-size: 20px;\r\n margin-bottom: 4px;\r\n}\r\n\r\n.weather-wrapper p {\r\n margin-top: 4px;\r\n font-size: 20px;\r\n font-weight: 500;\r\n}\r\n\r\n.weather-wrapper p span {\r\n color: #939292;\r\n}\r\n\r\n.w-update {\r\n transition: .3s ease-in-out;\r\n padding: 6px;\r\n}\r\n\r\n.w-update img{\r\n width: 80px;\r\n}\r\n\r\n.w-update:hover {\r\n background-color: #55525269;\r\n border-radius: 12px;\r\n transition: .3s ease-in-out;\r\n}\r\n\r\n.cities{\r\n width: 100%;\r\n}\r\n\r\n.tab-container {\r\n color: #000;\r\n display: flex;\r\n flex-direction: column;\r\n margin: 0 auto;\r\n margin-top: 10px;\r\n \r\n}\r\n.tabs {\r\n display: flex;\r\n cursor: pointer;\r\n border-bottom: 2px solid #ccc;\r\n}\r\n\r\n.tabs p{\r\n font-size: 18px;\r\n letter-spacing: 1px;\r\n}\r\n.tab {\r\n padding: 10px 20px;\r\n flex: 1;\r\n text-align: center;\r\n margin-bottom: 5px;\r\n\r\n}\r\n\r\n.tab.active {\r\n font-weight: 700;\r\n}\r\n.tab-content {\r\n padding: 20px;\r\n border-radius: 5px;\r\n width: 100%;\r\n}\r\n\r\n.Comprehensive{\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n flex-direction: column;\r\n width: 70%;\r\n margin: 0% auto;\r\n text-align: center;\r\n\t\r\n}\r\n\r\n.Comprehensive h1{\r\n margin: 15px 0px;\r\n font-weight: 600;\r\n\tfont-size:30px !important;\r\n\tcolor: black !important;\r\n}\r\n\r\n.Comprehensive p{\r\n margin: 8px 0px;\r\n font-size: 19px;\r\n}\r\n\r\n.today-weahter h1{\r\n text-align: center;\r\n margin-top: 40px;\r\n margin-bottom: 20px;\r\n\tcolor:black !important;\r\n\tfont-size:30px !important;\r\n}\r\n\r\n.today-weahter{\r\n\r\n margin-top: 40px;\r\n margin-bottom: 100px;\r\n}\r\n\r\n.weather-details{\r\n width: 100%;\r\n margin: 0% auto;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-evenly;\r\n padding: 20px 30px;\r\n}\r\n\r\n.c-1,.c-2,.c-3{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n gap: 10px;\r\n margin: 20px 0px;\r\n font-size: 16px;\r\n font-weight: 600;\r\n word-spacing: 5px;\r\n padding: 20px;\r\n width: 70%;\r\n height: 180px;\r\n}\r\n\r\n.c-3 img{\r\n width: 18px;\r\n height: 18px;\r\n}\r\n\r\n.arrow{\r\n transform: rotate(134deg);\r\n}\r\n\r\n.swiper-container{\r\n overflow: hidden;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.temp{\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 4px;\r\n}\r\n\r\n.temp h1{\r\n font-size: 1.8vw;\r\n font-weight: 500;\r\n}\r\n.temp h1 sup{\r\n font-size: 1.8vw;\r\n font-weight: 500;\r\n}\r\n\r\n.slider-container .prev{\r\n display: none;\r\n}\r\n\r\n\r\n@media screen and (max-width: 1450px){\r\n .slider-container {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-evenly;\r\n margin: 0 auto;\r\n margin-top: 15px;\r\n \r\n }\r\n .weather-wrapper {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-evenly;\r\n margin-top: 50px;\r\n gap: 60px;\r\n transition: transform 0.3s ease-in-out;\r\n \r\n }\r\n\r\n\r\n .weather-wrapper {\r\n \r\n margin-top: 20px;\r\n\r\n \r\n }\r\n\r\n .container-1{\r\n padding: 0px 10px;\r\n }\r\n \r\n \r\n\r\n}\r\n\r\n\r\n@media screen and (max-width: 1300px) {\r\n \r\n .section{\r\n height: max-content;\r\n margin: 0 auto;\r\n padding: 5px 10px;\r\n }\r\n button.prev, button.next {\r\n display: block;\r\n background: none;\r\n border: none;\r\n font-size: 24px;\r\n cursor: pointer;\r\n padding: 10px;\r\n z-index: 1;\r\n }\r\n\r\n .c-1,.c-2,.c-3{\r\n display: flex;\r\n align-items: center;\r\n text-align: center;\r\n gap: 10px;\r\n margin: 20px 0px;\r\n font-size: 13px;\r\n font-weight: 500;\r\n word-spacing: 5px;\r\n padding: 20px;\r\n width: 100%;\r\n height: 180px;\r\n }\r\n\r\n .c-3 img{\r\n width: 15px;\r\n height: 15px;\r\n }\r\n\r\n \r\n .input{\r\n width: 30vw;\r\n background-color: #939292;\r\n height: 40px;\r\n margin-left: 8vw;\r\n display: flex;\r\n align-items: center;\r\n border-radius: 10px;\r\n justify-content: space-between;\r\n padding: 0 15px;\r\n display: none;\r\n }\r\n .w-1 {\r\n min-width: 130px; \r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n align-items: center;\r\n text-align: center;\r\n margin: 0 auto;\r\n gap: 25px;\r\n }\r\n\r\n .weather-wrapper{\r\n gap: 15px;\r\n \r\n }\r\n .slider-container {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto;\r\n margin-top: 15px;\r\n \r\n }\r\n\r\n .temp{\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 4px;\r\n }\r\n \r\n .temp h1{\r\n font-size: 1.5vw;\r\n font-weight: 500;\r\n }\r\n .temp h1 sup{\r\n font-size: 1.5vw;\r\n font-weight: 500;\r\n }\r\n\r\n \r\n .div-3 img{\r\n width: 70px;\r\n object-fit: contain;\r\n }\r\n\r\n}\r\n\r\n@media screen and (max-width: 1100px) {\r\n .c-1,.c-2{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n gap: 10px;\r\n margin: 20px 0px;\r\n font-size: 12px;\r\n font-weight: 500;\r\n word-spacing: 2px;\r\n padding: 20px;\r\n width: 100%;\r\n }\r\n\r\n .temp{\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 4px;\r\n }\r\n \r\n .temp h1{\r\n font-size: 2.2vw;\r\n font-weight: 500;\r\n }\r\n .temp h1 sup{\r\n font-size: 2.2vw;\r\n font-weight: 500;\r\n }\r\n}\r\n\r\n@media screen and (max-width: 900px) {\r\n button.prev, button.next {\r\n display: block;\r\n background: none;\r\n border: none;\r\n font-size: 24px;\r\n cursor: pointer;\r\n padding: 10px;\r\n z-index: 1;\r\n }\r\n .text-1{\r\n line-height: 30px;\r\n }\r\n\r\n .input{\r\n width: 30vw;\r\n background-color: #939292;\r\n height: 40px;\r\n margin-left: 8vw;\r\n display: flex;\r\n align-items: center;\r\n border-radius: 10px;\r\n justify-content: space-between;\r\n padding: 0 15px;\r\n display: none;\r\n }\r\n\r\n \r\n.city h2{\r\n font-size: 20px;\r\n}\r\n\r\n\r\n\r\n.city p{\r\n font-size: 16px;\r\n}\r\n\r\n.c-1,.c-2{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n gap: 10px;\r\n margin: 5px 0px;\r\n font-size: 14px;\r\n font-weight: 600;\r\n word-spacing: 3px;\r\n padding: 20px;\r\n width: 100%;\r\n height: max-content;\r\n}\r\n\r\n.c-3{\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n gap: 10px;\r\n margin: 5px 0px;\r\n font-size: 14px;\r\n font-weight: 600;\r\n word-spacing: 3px;\r\n padding: 20px;\r\n height: max-content;\r\n\r\n}\r\n\r\n.c-3 img{\r\n width: 17px;\r\n height: 17px;\r\n}\r\n\r\n.weather-details{\r\n gap: -20px;\r\n margin: 0% auto;\r\n flex-wrap: wrap;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-evenly;\r\n padding: 20px 10px;\r\n\r\n}\r\n\r\n.weather-wrapper{\r\n gap: 0px;\r\n justify-content: center;\r\n align-items: center;\r\n \r\n}\r\n.slider-container {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto;\r\n margin-top: 15px;\r\n \r\n}\r\n\r\n.weather-wrapper h4 {\r\n font-size: 17px;\r\n font-weight: 500;\r\n color: #939292;\r\n}\r\n\r\n.weather-wrapper h3 {\r\n font-size: 20px;\r\n margin-bottom: 4px;\r\n}\r\n\r\n.weather-wrapper p {\r\n margin-top: 6px;\r\n font-size: 20px;\r\n font-weight: 500;\r\n}\r\n}\r\n\r\n@media screen and (max-width: 768px){\r\n .l-r{\r\n display: none;\r\n width: 55px;\r\n height: 300px;\r\n border: 2px solid black;\r\n margin: 0 auto;\r\n margin-top: 40px; \r\n }\r\n\r\n .main{\r\n justify-content: center;\r\n }\r\n\r\n .section{\r\n width: 100%;\r\n }\r\n\r\n \r\n\r\n .div-3 img{\r\n width: 100px;\r\n height: 80px;\r\n }\r\n\r\n .temp{\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 4px;\r\n }\r\n \r\n .temp h1{\r\n font-size: 2.5vw;\r\n font-weight: 500;\r\n }\r\n .temp h1 sup{\r\n font-size: 2.5vw;\r\n font-weight: 500;\r\n }\r\n\r\n \r\n .links{\r\n margin-left: 5vw;\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 20px;\r\n }\r\n \r\n}\r\n\r\n\r\n@media screen and (max-width: 700px) {\r\n \r\n .temp h1{\r\n font-size: 2.5vw;\r\n font-weight: 500;\r\n }\r\n .temp h1 sup{\r\n font-size: 2.5vw;\r\n font-weight: 500;\r\n }\r\n .text-1{\r\n line-height: 30px;;\r\n }\r\n\r\n .weather-wrapper {\r\n overflow: hidden;\r\n width: 75%;\r\n }\r\n\r\n .input{\r\n width: 50vw;\r\n background-color: #939292;\r\n height: 40px;\r\n margin-left: 8vw;\r\n display: flex;\r\n align-items: center;\r\n border-radius: 10px;\r\n justify-content: space-between;\r\n padding: 0 15px;\r\n display: none;\r\n }\r\n\r\n .container{\r\n flex-direction: column;\r\n align-items: flex-start;\r\n }\r\n\r\n .w-1 {\r\n min-width: 130px; \r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n align-items: center;\r\n text-align: center;\r\n margin: 0 auto;\r\n gap: 15px;\r\n }\r\n\r\n \r\n .weather-wrapper h4 {\r\n font-size: 16px;\r\n font-weight: 500;\r\n color: #939292;\r\n }\r\n \r\n .weather-wrapper h3 {\r\n font-size: 16px;\r\n }\r\n \r\n .weather-wrapper p {\r\n font-size: 17px;\r\n font-weight: 500;\r\n }\r\n \r\n .section{\r\n height: max-content;\r\n margin: 0 auto;\r\n margin-top: 0px;\r\n padding: 5px 10px;\r\n }\r\n\r\n \r\n.city{\r\n display: flex;\r\n border: 1px solid transparent;\r\n outline: none;\r\n align-items: flex-start;\r\n flex-direction: column;\r\n justify-content: center;\r\n padding: 30px;\r\n gap: 10px;\r\n}\r\n \r\n.c-1,.c-2,.c-3{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n gap: 10px;\r\n margin: 20px 0px;\r\n font-size: 17px;\r\n font-weight: 600;\r\n word-spacing: 5px;\r\n padding: 20px;\r\n width: 85%;\r\n}\r\n\r\n\r\n\r\n.c-3 img{\r\n width: 17px;\r\n height: 17px;\r\n}\r\n\r\n.weather-details{\r\n width: 80%;\r\n margin: 0% auto;\r\n flex-wrap: wrap;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-evenly;\r\n padding: 20px 10px;\r\n\r\n}\r\n\r\n.weather-wrapper {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-evenly;\r\n gap: 0px;\r\n transition: transform 0.3s ease-in-out;\r\n}\r\n\r\n.tab-container{\r\n text-align: center;\r\n}\r\n \r\n}\r\n\r\n\r\n@media screen and (max-width: 610px){\r\n .box{\r\n height: 55px;\r\n }\r\n .temp{\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 4px;\r\n }\r\n \r\n .temp h1{\r\n font-size: 3vw;\r\n font-weight: 500;\r\n }\r\n .temp h1 sup{\r\n font-size: 2.8vw;\r\n font-weight: 500;\r\n }\r\n\r\n .input{\r\n width: 52vw;\r\n background-color: #939292;\r\n height: 40px;\r\n margin-left: 8vw;\r\n display: flex;\r\n align-items: center;\r\n border-radius: 10px;\r\n justify-content: space-between;\r\n padding: 0 15px;\r\n display: none;\r\n }\r\n \r\n .container-1{\r\n flex-direction: column;\r\n justify-content: center;\r\n\r\n }\r\n \r\n .div-3{\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n gap: 10vw;\r\n }\r\n .text-1{\r\n margin-left: 13vw;\r\n font-size: 16px;\r\n }\r\n\r\n .div-4{\r\n float: right;\r\n align-items: flex-end;\r\n justify-content: flex-end;\r\n margin-left: 60vw;\r\n }\r\n\r\n \r\n.section{\r\n width: 100%;\r\n height: max-content;\r\n margin: 0 auto;\r\n padding: 0px ;\r\n}\r\n\r\n.slider-container {\r\n margin-top: 12px;\r\n}\r\n\r\n.w-1 {\r\n min-width: 100px; \r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n text-align: center;\r\n gap: 2px;\r\n}\r\n\r\n\r\n.container-1 img{\r\n width: 70px;\r\n object-fit: contain;\r\n}\r\n\r\n.w-update img{\r\n width: 70px;\r\n}\r\n\r\n.heading{\r\n font-size: 26px;\r\n font-weight: 700;\r\n margin-bottom: 10px;\r\n margin-top: 15px;\r\n}\r\n\r\n.tabs {\r\n display: flex;\r\n justify-content: center;\r\n cursor: pointer;\r\n border-bottom: 2px solid #ccc;\r\n font-size: 14px;\r\n}\r\n.tab {\r\n padding: 5px 10px;\r\n flex: 1;\r\n text-align: center;\r\n}\r\n\r\n.Comprehensive{\r\n width: 85%;\r\n}\r\n\r\n.Comprehensive p{\r\n margin: 8px 0px;\r\n font-size: 17px;\r\n}\r\n\r\n.input i{\r\n font-size: 18px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n color: white;\r\n}\r\n\r\n.c-1,.c-2,.c-3{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n gap: 10px;\r\n margin: 20px 0px;\r\n font-size: 14px;\r\n font-weight: 600;\r\n word-spacing: 5px;\r\n padding: 20px;\r\n width: 85%;\r\n}\r\n\r\n\r\n.weather-wrapper h4 {\r\n font-size: 16px;\r\n font-weight: 500;\r\n color: #939292;\r\n}\r\n\r\n.weather-wrapper h3 {\r\n font-size: 16px;\r\n}\r\n\r\n.weather-wrapper p {\r\n font-size: 16px;\r\n font-weight: 500;\r\n}\r\n \r\n}\r\n\r\n\r\n\r\n@media screen and (max-width: 530px){\r\n .box{\r\n width: 450px;\r\n height: 60px;\r\n margin: 0 auto;\r\n margin-top: 5px;\r\n }\r\n \r\n .div-3{\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: space-between;\r\n }\r\n .text-1{\r\n margin-left: 8vw;\r\n }\r\n\r\n .div-4{\r\n float: right;\r\n align-items: flex-end;\r\n justify-content: flex-end;\r\n margin-left: 55vw;\r\n }\r\n\r\n .links{\r\n margin-left: 6vw;\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 15px;\r\n }\r\n \r\n .links a {\r\n color: #1f1f1f;\r\n text-decoration: none;\r\n margin-right: 6px;\r\n font-size: 18px;\r\n font-weight: 600;\r\n position: relative; \r\n }\r\n\r\n .weather-wrapper {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-evenly;\r\n margin-top: 0px;\r\n gap: 0px;\r\n transition: transform 0.3s ease-in-out;\r\n \r\n }\r\n\r\n .w-1 {\r\n min-width: 130px; \r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n align-items: center;\r\n text-align: center;\r\n margin: 0 auto;\r\n }\r\n\r\n \r\n .c-1,.c-2,.c-3{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n gap: 10px;\r\n margin: 20px 0px;\r\n font-size: 15px;\r\n font-weight: 600;\r\n word-spacing: 5px;\r\n padding: 20px;\r\n width: 85%;\r\n }\r\n\r\n .c-3 img{\r\n width: 15px ;\r\n height: 15px;\r\n }\r\n\r\n .input input{\r\n font-size: 15px;\r\n color: white;\r\n }\r\n .text-2{\r\n font-size: 16px;\r\n color: #939292;\r\n }\r\n \r\n .div-4 h3{\r\n font-size: 20px;\r\n }\r\n \r\n .input{\r\n width: 46vw;\r\n background-color: #939292;\r\n height: 35px;\r\n display: flex;\r\n align-items: center;\r\n border-radius: 10px;\r\n justify-content: space-between;\r\n padding: 0 15px;\r\n display: none;\r\n }\r\n \r\n}\r\n\r\n@media screen and (max-width: 481px){\r\n .input{\r\n width: 40vw;\r\n background-color: #939292;\r\n height: 35px;\r\n display: flex;\r\n align-items: center;\r\n border-radius: 10px;\r\n justify-content: space-between;\r\n padding: 0 15px;\r\n display: none;\r\n }\r\n \r\n \r\n \r\n\r\n .text-1 p{\r\n font-size: 14px;\r\n }\r\n .div-4 h3{\r\n font-size: 18px;\r\n font-weight: 600;\r\n }\r\n\r\n .text-2 p{\r\n font-size: 15px;\r\n }\r\n \r\n .div-4{\r\n float: right;\r\n align-items: flex-end;\r\n justify-content: flex-end;\r\n }\r\n\r\n \r\n\r\n .container-1 img{\r\n width: 80px;\r\n object-fit: contain;\r\n }\r\n\r\n .tabs {\r\n display: flex;\r\n justify-content: center;\r\n cursor: pointer;\r\n border-bottom: 2px solid #ccc; \r\n }\r\n\r\n .tabs p{\r\n font-size: 14px;\r\n }\r\n .tab {\r\n padding: 2px 5px;\r\n flex: 1;\r\n text-align: center;\r\n }\r\n .container-1 img{\r\n width: 80px;\r\n height: 70px;\r\n }\r\n\r\n .c-1,.c-2,.c-3{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n gap: 10px;\r\n margin: 20px 0px;\r\n font-size: 15px;\r\n font-weight: 600;\r\n word-spacing: 5px;\r\n padding: 20px;\r\n width: 85%;\r\n }\r\n\r\n .c-3 img{\r\n width: 15px ;\r\n height: 15px;\r\n }\r\n\r\n\r\n .temp{\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 4px;\r\n }\r\n \r\n .temp h1{\r\n font-size: 3.5vw;\r\n font-weight: 500;\r\n }\r\n .temp h1 sup{\r\n font-size: 3.2vw;\r\n font-weight: 500;\r\n }\r\n\r\n\r\n .sub-container{\r\n display: flex;\r\n gap: 5px;\r\n align-items: center;\r\n justify-content: space-between;\r\n }\r\n \r\n}\r\n\r\n@media screen and (max-width: 450px){\r\n \r\n .text-1{\r\n margin-left: 4vw;\r\n }\r\n\r\n .text-1 p{\r\n font-size: 14px;\r\n }\r\n \r\n\r\n .text-2 p{\r\n font-size: 15px;\r\n }\r\n\r\n \r\n .div-4{\r\n float: right;\r\n align-items: flex-end;\r\n justify-content: flex-end;\r\n }\r\n\r\n\r\n .temp{\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 4px;\r\n }\r\n \r\n .temp h1{\r\n font-size: 3.5vw;\r\n font-weight: 500;\r\n }\r\n .temp h1 sup{\r\n font-size: 3.2vw;\r\n font-weight: 500;\r\n }\r\n .div-2 a{\r\n font-size: 14px;\r\n }\r\n\r\n \r\n .F{\r\n color: #939292;\r\n }\r\n \r\n\r\n\r\n\r\n .links{\r\n margin-left: 3vw;\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 10px;\r\n }\r\n \r\n .links a {\r\n text-decoration: none;\r\n margin-right: 3px;\r\n font-size: 17px;\r\n font-weight: 600;\r\n position: relative;\r\n }\r\n\r\n .w-1 {\r\n min-width: 150px; \r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n text-align: center;\r\n gap: 4px;\r\n }\r\n\r\n\r\n .section{\r\n height: max-content;\r\n margin: 0 auto;\r\n }\r\n \r\n \r\n .slider-container {\r\n margin-top: 12px;\r\n \r\n }\r\n\r\n .Comprehensive h1{\r\n font-size: 22px;\r\n }\r\n\r\n .Comprehensive p{\r\n margin: 8px 0px;\r\n font-size: 15px;\r\n }\r\n\r\n \r\n .c-1,.c-2,.c-3{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n gap: 10px;\r\n margin: 20px 0px;\r\n font-size: 13px;\r\n font-weight: 600;\r\n word-spacing: 5px;\r\n padding: 20px;\r\n width: 95%;\r\n }\r\n\r\n .c-3 img{\r\n width: 13px ;\r\n height: 13px;\r\n }\r\n\r\n .box{\r\n width: 400px;\r\n height: 60px;\r\n margin: 0 auto;\r\n margin-top: 5px;\r\n }\r\n\r\n .input{\r\n width: 45vw;\r\n background-color: #939292;\r\n height: 35px;\r\n display: flex;\r\n align-items: center;\r\n border-radius: 10px;\r\n justify-content: space-between;\r\n padding: 0 15px;\r\n display: none;\r\n }\r\n}\r\n\r\n\r\n\r\n@media screen and (max-width: 430px){\r\n \r\n .section{\r\n width: 100%;\r\n height: max-content;\r\n margin: 0 auto;\r\n \r\n }\r\n \r\n \r\n\r\n \r\n .div-4{\r\n float: right;\r\n align-items: flex-end;\r\n justify-content: flex-end;\r\n }\r\n\r\n .container-1 img{\r\n width: 70px;\r\n object-fit: contain;\r\n }\r\n\r\n \r\n .F{\r\n color: #939292;\r\n }\r\n \r\n\r\n .div-4 h3{\r\n font-size: 17px;\r\n }\r\n\r\n .div-4 p{\r\n font-size: 15px;\r\n }\r\n\r\n \r\n .links{\r\n margin-left: 4vw;\r\n display: flex;\r\n align-items: center;\r\n gap: 5px;\r\n }\r\n \r\n .links a {\r\n text-decoration: none;\r\n margin-right: 3px;\r\n font-size: 16px;\r\n font-weight: 600;\r\n position: relative;\r\n }\r\n\r\n .weather-wrapper {\r\n gap: 3px;\r\n }\r\n \r\n\r\n .w-1 {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n text-align: center;\r\n gap: 4px;\r\n }\r\n\r\n\r\n .input input::placeholder{\r\n font-size: 15px;\r\n }\r\n}\r\n\r\n\r\n@media screen and (max-width: 400px) {\r\n .text-1{\r\n margin-left: 2vw;\r\n }\r\n\r\n .text-1 p{\r\n font-size: 13px;\r\n }\r\n .div-4 h3{\r\n font-size: 18px;\r\n font-weight: 600;\r\n }\r\n\r\n .text-2 p{\r\n font-size: 14px;\r\n }\r\n\r\n \r\n .div-4{\r\n float: right;\r\n align-items: flex-end;\r\n justify-content: flex-end;\r\n }\r\n\r\n .container-1 img{\r\n width: 60px;\r\n object-fit: contain;\r\n }\r\n .temp{\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 4px;\r\n }\r\n \r\n .temp h1{\r\n font-size: 3.5vw;\r\n font-weight: 500;\r\n }\r\n .temp h1 sup{\r\n font-size: 3.2vw;\r\n font-weight: 500;\r\n }\r\n\r\n .box{\r\n width: 370px;\r\n margin-top: 5px;\r\n }\r\n\r\n .heading{\r\n font-size: 22px;\r\n font-weight: 700;\r\n margin-bottom: 10px;\r\n margin-top: 15px;\r\n }\r\n}\r\n\r\n\r\n@media screen and (max-width: 380px){\r\n \r\n .section{\r\n width: 100%;\r\n height: max-content;\r\n margin: 0 auto;\r\n \r\n }\r\n \r\n \r\n\r\n \r\n .div-4{\r\n float: right;\r\n align-items: flex-end;\r\n justify-content: flex-end;\r\n }\r\n\r\n .container-1 img{\r\n width: 60px;\r\n object-fit: contain;\r\n }\r\n .temp{\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 4px;\r\n }\r\n \r\n .temp h1{\r\n font-size: 3.5vw;\r\n font-weight: 500;\r\n }\r\n .temp h1 sup{\r\n font-size: 3.2vw;\r\n font-weight: 500;\r\n }\r\n\r\n .F{\r\n color: #939292;\r\n }\r\n \r\n\r\n .div-4 p{\r\n font-size: 15px;\r\n }\r\n\r\n \r\n .links{\r\n margin-left: 4vw;\r\n display: flex;\r\n align-items: center;\r\n gap: 5px;\r\n }\r\n \r\n .links a {\r\n text-decoration: none;\r\n margin-right: 3px;\r\n font-size: 16px;\r\n font-weight: 600;\r\n position: relative;\r\n }\r\n\r\n .weather-wrapper {\r\n gap: 3px;\r\n }\r\n \r\n\r\n .w-1 {\r\n min-width: 130px; \r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n text-align: center;\r\n gap: 4px;\r\n }\r\n\r\n .div-2 a{\r\n color: rgb(39, 140, 230);\r\n font-size: 14px;\r\n }\r\n\r\n .input input::placeholder{\r\n font-size: 15px;\r\n }\r\n\r\n .box{\r\n width: 340px;\r\n }\r\n}\r\n\r\n@media screen and (max-width: 370px){\r\n \r\n .section{\r\n width: 100%;\r\n height: max-content;\r\n margin: 0 auto;\r\n }\r\n \r\n \r\n\r\n \r\n .div-4{\r\n float: right;\r\n align-items: flex-end;\r\n justify-content: flex-end;\r\n }\r\n\r\n .container-1 img{\r\n width: 50px;\r\n object-fit: contain;\r\n }\r\n .temp{\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 4px;\r\n margin-top: 2.4vw;\r\n }\r\n \r\n .temp h1{\r\n font-size: 4vw;\r\n font-weight: 500;\r\n }\r\n .temp h1 sup{\r\n font-size: 4vw;\r\n font-weight: 500;\r\n }\r\n \r\n \r\n \r\n\r\n .div-4 h3{\r\n font-size: 14px;\r\n }\r\n\r\n .div-4 p{\r\n font-size: 14px;\r\n }\r\n\r\n \r\n .links{\r\n margin-left: 4vw;\r\n display: flex;\r\n align-items: center;\r\n gap: 5px;\r\n }\r\n \r\n .links a {\r\n text-decoration: none;\r\n margin-right: 3px;\r\n font-size: 16px;\r\n font-weight: 600;\r\n position: relative;\r\n }\r\n\r\n .weather-wrapper {\r\n gap: 3px;\r\n }\r\n \r\n\r\n .w-1 {\r\n min-width: 130px; \r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n text-align: center;\r\n gap: 4px;\r\n }\r\n\r\n .div-2 a{\r\n color: rgb(39, 140, 230);\r\n font-size: 14px;\r\n }\r\n\r\n .input input::placeholder{\r\n font-size: 15px;\r\n }\r\n\r\n .text-1 p{\r\n font-size: 14px;\r\n }\r\n}\t\r\n\t<\/style>\r\n\t\r\n \r\n<\/head>\r\n<body>\r\n\r\n\t<div class=\"box\">\r\n <img decoding=\"async\" src=\".\/images\/s-1.webp\" alt=\"\">\r\n <\/div>\r\n\r\n <div class=\"main\">\r\n <div class=\"l-r\">\r\n <img decoding=\"async\" src=\".\/images\/s-1.webp\" alt=\"\">\r\n <\/div>\r\n <section class=\"section\">\r\n <div class=\"container\">\r\n <div class=\"div-1\">\r\n <p>Result For <span style=\"font-weight: bold; font-size: 18px;\" class=\"city-name\">City Name<\/span><\/p>\r\n <\/div>\r\n <div class=\"sub-container\">\r\n <div class=\"div-2\">\r\n <a id=\"choose-area\" onclick=\"choose_area()\">Choose area<\/a>\r\n <i class=\"fa-solid fa-ellipsis-vertical\"><\/i>\r\n <\/div>\r\n <div class=\"input\" id=\"input-data\">\r\n <input type=\"text\" id=\"weather-data\" placeholder=\"Enter city name...\">\r\n <i class=\"fa-solid fa-magnifying-glass\" onclick=\"get_data();\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"container-1\">\r\n <div class=\"div-3\">\r\n <div class=\"img-temp\">\r\n <img decoding=\"async\" src=\"https:\/\/karachiweather.com\/wp-content\/uploads\/2024\/09\/image.png\">\r\n <div class=\"temp\"><h1 id=\"temperature\"><sup>\u00b0C<\/sup><\/h1> <h1>|<sup>\u00b0F<\/sup><\/h1><\/div>\r\n <\/div>\r\n <div class=\"temperature-toggle\">\r\n <span id=\"temperature-unit\" onclick=\"toggleTemperature()\"><\/span>\r\n <\/div>\r\n <div class=\"text-1\">\r\n <p>Precipitation: <span>2%<\/span><\/p>\r\n <p>Humidity: <span id=\"Humidity\"> %<\/span><\/p>\r\n <p>Wind: <span id=\"wind\"> km\/h<\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"div-4\">\r\n <h3>Weather<\/h3>\r\n <div class=\"text-2\">\r\n <p id=\"currentDay\">Day<\/p>\r\n <p id=\"time\"><\/p>\r\n <p id=\"Pre\"><\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"links\">\r\n <a>Temperature<\/a><span class=\"line\">|<\/span>\r\n <a>Precipitation<\/a><span class=\"line\">|<\/span>\r\n <a>Wind<\/a>\r\n <\/div>\r\n \r\n <div class=\"slider-container\">\r\n <button class=\"prev\">\u2190<\/button>\r\n <div class=\"slider weather-wrapper\">\r\n <!-- Forecast data will be appended here -->\r\n <\/div>\r\n <button class=\"next\">\u2192<\/button>\r\n <\/div>\r\n \r\n\r\n \r\n <\/section>\r\n <div class=\"l-r\">\r\n <img decoding=\"async\" src=\".\/images\/s-1.webp\" alt=\"\"> \r\n <\/div>\r\n<\/div>\r\n\r\n <div class=\"box\">\r\n\r\n <img decoding=\"async\" src=\".\/images\/s-2.webp\" alt=\"\">\r\n <\/div>\r\n\r\n \r\n\r\n <div class=\"main\">\r\n <div class=\"l-r\">\r\n <img decoding=\"async\" src=\".\/images\/s-1.webp\" alt=\"\">\r\n <\/div>\r\n \r\n <section class=\"cities section\">\r\n \r\n <h1 class=\"heading\">Weather Forecast for Other Cities<\/h1>\r\n \r\n <div class=\" tab-container\">\r\n <div class=\"tabs\">\r\n <div class=\"tab active\" data-tab=\"home\"><p>Temperature<\/p><\/div>\r\n <div class=\"tab\" data-tab=\"profile\"><p>Condition<\/p><\/div>\r\n <div class=\"tab\" data-tab=\"contact\"><p>Precipitation<\/p><\/div>\r\n <\/div>\r\n <div class=\"tab-content\">\r\n <div class=\"content\" id=\"home\"><div id=\"weather-container_1\"><\/div><\/div>\r\n <div class=\"content\" id=\"profile\" style=\"display:none;\"><div id=\"weather-container_2\"><\/div><\/div>\r\n <div class=\"content\" id=\"contact\" style=\"display:none;\"> <div id=\"weather-container_3\"><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"l-r\">\r\n <img decoding=\"async\" src=\".\/images\/s-1.webp\" alt=\"\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"box\">\r\n <img decoding=\"async\" src=\".\/images\/s-1.webp\" alt=\"\">\r\n <\/div>\r\n \r\n \r\n\r\n <section class=\"Comprehensive\">\r\n <h1>Comprehensive Daily Insights for Your Day<\/h1>\r\n <p>Get an in-depth look at today\u2019s weather in Karachi with our comprehensive weather details. Stay informed with real-time data on how the weather feels, high and low temperatures, humidity levels, wind speed, and more. Plus, check out the sunrise and sunset times, UV index, and even the current moon phase. Our detailed weather insights ensure you\u2019re prepared for whatever the day has in store.<\/p>\r\n <\/section>\r\n\r\n <div class=\"box\">\r\n <img decoding=\"async\" src=\".\/images\/s-1.webp\" alt=\"\">\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n<div class=\"main\">\r\n <div class=\"l-r\">\r\n <img decoding=\"async\" src=\".\/images\/s-1.webp\" alt=\"\">\r\n <\/div>\r\n\r\n <div class=\"today-weahter section city-weather-wrapper\">\r\n <h1>Weather Today in <span id=\"city\">City Name<\/span> <\/h1>\r\n <div class=\"weather-details\">\r\n <div class=\"c-1\">\r\n <div class=\"weather-detail\">\r\n <i class=\"fa-solid fa-temperature-quarter\"><\/i> Feels Like : <span id=\"feels-like\">32 \u00b0C<\/span>\r\n <\/div>\r\n <div class=\"weather-detail\">\r\n <i class=\"fa-solid fa-temperature-high\"><\/i> High\/Low : <span id=\"high-low\">20<\/span>\r\n <\/div>\r\n <div class=\"weather-detail\">\r\n <i class=\"fa-solid fa-droplet\"><\/i> Humidity : <span id=\"humidity\">81<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n\r\n <div class=\"c-2\">\r\n <div class=\"weather-detail\">\r\n <i class=\"fa-solid fa-up-right-and-down-left-from-center arrow\"><\/i> Pressure : <span id=\"pressure\">35<\/span>\r\n <\/div>\r\n <div class=\"weather-detail\">\r\n <i class=\"fa-solid fa-eye\"><\/i> Visibility : <span id=\"visibility\">18<\/span>\r\n <\/div>\r\n <div class=\"weather-detail\">\r\n <i class=\"fa-solid fa-wind\"><\/i> Wind : <span id=\"wind-speed\">74<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"c-3\">\r\n <div class=\"weather-detail\">\r\n <img decoding=\"async\" src=\"https:\/\/karachiweather.com\/wp-content\/uploads\/2024\/09\/uv-index.png\" alt=\"\"> UV Index: <span id=\"uv-index\">6<\/span>\r\n <\/div>\r\n <div class=\"weather-detail\">\r\n <img decoding=\"async\" src=\"https:\/\/karachiweather.com\/wp-content\/uploads\/2024\/09\/moon.png\" alt=\"\"> Moon Phase: <span id=\"moon-phase\">90<\/span>\r\n <\/div>\r\n <div class=\"weather-detail\">\r\n <img decoding=\"async\" src=\"https:\/\/karachiweather.com\/wp-content\/uploads\/2024\/09\/sunrise.png\" alt=\"\"> <span id=\"sunrise-sunset\">0\/0<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"l-r\">\r\n <img decoding=\"async\" src=\".\/images\/s-1.webp\" alt=\"\">\r\n <\/div>\r\n<\/div>\r\n\r\n <div class=\"box\">\r\n <img decoding=\"async\" src=\".\/images\/s-1.webp\" alt=\"\">\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n<script src=\"https:\/\/karachiweather.com\/wp-content\/uploads\/wp-coder\/style-1.css\">\r\n<\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n\r\n <script>\r\n\t\t\t\/\/ Add your OpenWeather API Key here\r\nconst cutiapiKey = `6f6abb460ce13abe9cf89189d36e4ae5`;\r\nlet weather_icon = document.getElementById(\"weather-icon\");\r\nconst defaultCity = 'Karachi'; \/\/ Default city to display\r\n\r\n\/\/ Array of other cities\r\nconst cities = ['Multan', 'Islamabad', 'Lahore', 'Faisalabad', 'Rawalpindi'];\r\n\r\n\/\/ Function to fetch weather data for a specific city\r\nasync function fetchWeather(city) {\r\n const response = await fetch(`https:\/\/api.openweathermap.org\/data\/2.5\/weather?q=${city}&appid=${cutiapiKey}&units=metric`);\r\n if (!response.ok) {\r\n throw new Error('Weather data not found');\r\n }\r\n return await response.json();\r\n}\r\n\r\n\/\/ Fetch weather data from OpenWeather API\r\nasync function fetchWeatherData(city) {\r\n try {\r\n const currentWeatherResponse = await fetch(\r\n `https:\/\/api.openweathermap.org\/data\/2.5\/weather?q=${city}&units=metric&appid=${cutiapiKey}`\r\n );\r\n const currentWeather = await currentWeatherResponse.json();\r\n\r\n const forecastResponse = await fetch(\r\n `https:\/\/api.openweathermap.org\/data\/2.5\/forecast?q=${city}&units=metric&appid=${cutiapiKey}`\r\n );\r\n const forecastData = await forecastResponse.json();\r\n\r\n return { currentWeather, forecastData };\r\n } catch (error) {\r\n console.error('Error fetching weather data:', error);\r\n return null;\r\n }\r\n}\r\n\r\n\/\/ Function to get data from input and fetch weather\r\nasync function get_data() {\r\n const city = document.getElementById('weather-data').value;\r\n\r\n \/\/ Alert if the input is empty\r\n if (!city) {\r\n alert('Please enter a city name.');\r\n return; \/\/ Stop further execution if no city is entered\r\n }\r\n\r\n const weatherData = await fetchWeatherData(city);\r\n if (weatherData) {\r\n updateUI(weatherData);\r\n } else {\r\n alert('City not found or an error occurred');\r\n }\r\n}\r\n\r\n\/\/ Update the HTML with the fetched data\r\nasync function updateUI(weatherData) {\r\n const city = weatherData.currentWeather.name;\r\n const temperature = weatherData.currentWeather.main.temp;\r\n const humidity = weatherData.currentWeather.main.humidity;\r\n const windSpeed = weatherData.currentWeather.wind.speed;\r\n const feelsLike = weatherData.currentWeather.main.feels_like;\r\n const tempMin = weatherData.currentWeather.main.temp_min;\r\n const tempMax = weatherData.currentWeather.main.temp_max;\r\n const pressure = weatherData.currentWeather.main.pressure;\r\n const visibility = weatherData.currentWeather.visibility \/ 1000; \/\/ convert meters to kilometers\r\n const sunrise = new Date(weatherData.currentWeather.sys.sunrise * 1000).toLocaleTimeString();\r\n const sunset = new Date(weatherData.currentWeather.sys.sunset * 1000).toLocaleTimeString();\r\n const uvIndex = await fetchUVIndex(weatherData.currentWeather.coord);\r\n const moonPhase = calculateMoonPhase(new Date());\r\n const precipitation = weatherData.currentWeather.weather[0].description;\r\n\r\n \/\/ Update the current weather UI\r\n document.querySelector('.city-name').innerText = city;\r\n document.getElementById(\"city\").innerText = city;\r\n document.getElementById('Pre').innerText = `${precipitation}`;\r\n document.getElementById('Humidity').innerText = `${humidity} %`;\r\n document.getElementById('wind').innerText = `${windSpeed} km\/h`;\r\n document.getElementById('temperature').innerText = `${Math.round(temperature)} \u00b0C`;\r\n\r\n document.getElementById('currentDay').innerText = new Date().toLocaleDateString('en-US', { weekday: 'long' });\r\n\r\n \/\/ Update additional weather details\r\n document.getElementById('feels-like').innerText = `${Math.round(feelsLike)} \u00b0C`;\r\n document.getElementById('high-low').innerText = `${Math.round(tempMax)} \u00b0C \/ ${Math.round(tempMin)} \u00b0C`;\r\n document.getElementById('humidity').innerText = `${humidity} %`;\r\n document.getElementById('pressure').innerText = `${pressure} hPa`;\r\n document.getElementById('visibility').innerText = `${visibility} km`;\r\n document.getElementById('wind-speed').innerText = `${windSpeed} km\/h`;\r\n document.getElementById('uv-index').innerText = uvIndex;\r\n document.getElementById('moon-phase').innerText = moonPhase;\r\n document.getElementById('sunrise-sunset').innerText = `Sunrise: ${sunrise} \\n Sunset: ${sunset}`;\r\n\r\n const forecastWrapper = document.querySelector('.weather-wrapper');\r\n forecastWrapper.innerHTML = ''; \/\/ Clear the existing forecast\r\n\r\n \r\n\r\n let forecastHTML = '';\r\n \r\n for (let i = 0; i < weatherData.forecastData.list.length; i += 8) { \/\/ Every 8th item represents a day\r\n const forecast = weatherData.forecastData.list[i];\r\n const day = new Date(forecast.dt_txt).toLocaleDateString('en-US', { weekday: 'long' });\r\n const time = new Date(forecast.dt_txt).toLocaleTimeString('en-US', {\r\n hour: '2-digit',\r\n minute: '2-digit',\r\n hour12: true \/\/ This ensures AM\/PM is used\r\n });\r\n\r\n const temp = Math.round(forecast.main.temp);\r\n const id = forecast.weather[0].id;\r\n let img_url = \"https:\/\/karachiweather.com\/wp-content\/uploads\/2024\/09\/c.png\"; \/\/ Default image URL\r\n\r\n \/\/ Apply condition-based image logic (add your logic here)\r\n\r\n forecastHTML += `\r\n <div class=\"w-1\">\r\n <div class=\"time\">\r\n <h4>${time}<\/h4>\r\n <h4>${day}<\/h4> <!-- Display day and time -->\r\n <\/div>\r\n <div class=\"w-update\">\r\n <img decoding=\"async\" src=\"${img_url}\" alt=\"Weather icon\">\r\n <p>${temp}<sup>\u00b0<\/sup> <span>27<sup>\u00b0<\/sup><\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n forecastWrapper.innerHTML = forecastHTML;\r\n}\r\n\r\n\r\n\r\n\r\n\/\/ Fetch UV index data\r\nasync function fetchUVIndex(coord) {\r\n try {\r\n const uvResponse = await fetch(\r\n `https:\/\/api.openweathermap.org\/data\/2.5\/uvi?lat=${coord.lat}&lon=${coord.lon}&appid=${cutiapiKey}`\r\n );\r\n const uvData = await uvResponse.json();\r\n return uvData.value;\r\n } catch (error) {\r\n console.error('Error fetching UV index:', error);\r\n return 'N\/A';\r\n }\r\n}\r\n\r\n\/\/ Function to calculate moon phase\r\nfunction calculateMoonPhase(date) {\r\n const synodicMonth = 29.53058867; \/\/ Average length of a synodic month\r\n const newMoon = new Date('2020-06-21'); \/\/ A known new moon date\r\n const diffInDays = (date - newMoon) \/ (1000 * 3600 * 24);\r\n const moonPhase = (diffInDays % synodicMonth) \/ synodicMonth;\r\n\r\n if (moonPhase < 0.03 || moonPhase > 0.97) return 'New Moon';\r\n else if (moonPhase < 0.22) return 'Waxing Crescent';\r\n else if (moonPhase < 0.28) return 'First Quarter';\r\n else if (moonPhase < 0.47) return 'Waxing Gibbous';\r\n else if (moonPhase < 0.53) return 'Full Moon';\r\n else if (moonPhase < 0.72) return 'Waning Gibbous';\r\n else if (moonPhase < 0.78) return 'Last Quarter';\r\n else return 'Waning Crescent';\r\n}\r\n\r\n\/\/ Function to toggle the input area\r\nfunction choose_area() {\r\n const input_data = document.getElementById(\"input-data\");\r\n if (input_data.style.display === \"flex\") {\r\n input_data.style.display = \"none\"; \/\/ Hide the input area\r\n } else {\r\n input_data.style.display = \"flex\"; \/\/ Show the input area\r\n }\r\n}\r\n\r\n\/\/ Function to display weather data for Karachi and other cities\r\nasync function displayWeather() {\r\n \/\/ Display Karachi weather data\r\n const karachiWeatherData = await fetchWeatherData(defaultCity);\r\n if (karachiWeatherData) {\r\n updateUI(karachiWeatherData);\r\n } else {\r\n alert('Karachi weather data not found or an error occurred');\r\n }\r\n\r\n \/\/ Display weather data for other cities\r\n await displayWeatherTemperature();\r\n await displayWeatherDetails();\r\n await displayPrecipitation();\r\n}\r\n\r\n\/\/ Display weather data for temperature and description\r\nasync function displayWeatherTemperature() {\r\n const container = document.getElementById('weather-container_1');\r\n container.innerHTML = '';\r\n\r\n for (const city of cities) {\r\n try {\r\n const weatherData = await fetchWeather(city);\r\n const weatherDiv = document.createElement('div');\r\n weatherDiv.className = 'city';\r\n weatherDiv.innerHTML = `\r\n <h2>${weatherData.name}<\/h2>\r\n <p>Temp :${Math.round(weatherData.main.temp)}<sup>\u00b0C<\/sup><\/p>\r\n <p>Weather :${weatherData.weather[0].description}<\/p>\r\n `;\r\n container.appendChild(weatherDiv);\r\n } catch (error) {\r\n console.error(`Could not fetch weather for ${city}:`, error);\r\n }\r\n }\r\n}\r\n\r\n\/\/ Display additional weather details\r\nasync function displayWeatherDetails() {\r\n const container = document.getElementById('weather-container_2');\r\n container.innerHTML = '';\r\n\r\n for (const city of cities) {\r\n try {\r\n const weatherData = await fetchWeather(city);\r\n const detailDiv = document.createElement('div');\r\n detailDiv.className = 'city';\r\n detailDiv.innerHTML = `\r\n <h2>${weatherData.name}<\/h2>\r\n <p>Humidity: ${weatherData.main.humidity}%<\/p>\r\n <p>Wind : ${weatherData.wind.speed} km\/h<\/p>\r\n `;\r\n container.appendChild(detailDiv);\r\n } catch (error) {\r\n console.error(`Could not fetch details for ${city}:`, error);\r\n }\r\n }\r\n}\r\n\r\n\/\/ Display precipitation data\r\nasync function displayPrecipitation() {\r\n const container = document.getElementById('weather-container_3');\r\n container.innerHTML = '';\r\n\r\n for (const city of cities) {\r\n try {\r\n const weatherData = await fetchWeather(city);\r\n const precipitation = weatherData.rain ? weatherData.rain['1h'] : 0; \/\/ Get 1-hour precipitation if available\r\n const weatherDiv = document.createElement('div');\r\n weatherDiv.className = 'city';\r\n weatherDiv.innerHTML = `\r\n <h2>${weatherData.name}<\/h2>\r\n <p>Pressure : ${weatherData.main.pressure} hPa<\/p>\r\n <p>Precipitation : ${precipitation} mm<\/p>\r\n `;\r\n container.appendChild(weatherDiv);\r\n } catch (error) {\r\n const errorDiv = document.createElement('div');\r\n errorDiv.className = 'city';\r\n errorDiv.innerHTML = `\r\n <h2>${city}<\/h2>\r\n <p>${error.message}<\/p>\r\n `;\r\n container.appendChild(errorDiv);\r\n }\r\n }\r\n}\r\n\r\nconst tabs = document.querySelectorAll('.tab');\r\nconst contents = document.querySelectorAll('.content');\r\n\r\ntabs.forEach(tab => {\r\n tab.addEventListener('click', () => {\r\n \/\/ Remove active class from all tabs\r\n tabs.forEach(t => t.classList.remove('active'));\r\n \/\/ Hide all content\r\n contents.forEach(c => c.style.display = 'none');\r\n\r\n \/\/ Add active class to clicked tab\r\n tab.classList.add('active');\r\n \/\/ Show corresponding content\r\n const activeTab = tab.getAttribute('data-tab');\r\n document.getElementById(activeTab).style.display = 'block';\r\n });\r\n});\r\n\r\n\/\/ Initialize the page by displaying the weather for Karachi and other cities\r\nwindow.onload = async () => {\r\n await displayWeather(); \/\/ Display weather for default city on load\r\n await displayWeatherDetails(); \/\/ Display additional details\r\n await displayPrecipitation(); \/\/ Display precipitation data\r\n};\r\n\r\n\/\/ Function to get current time in 12-hour format\r\nfunction currentTime() {\r\n const now = new Date();\r\n let hours = now.getHours();\r\n const minutes = now.getMinutes();\r\n const ampm = hours >= 12 ? 'PM' : 'AM';\r\n\r\n \/\/ Convert hours to 12-hour format\r\n hours = hours % 12;\r\n hours = hours ? hours : 12; \/\/ hour 0 becomes 12\r\n\r\n \/\/ Format minutes to two digits\r\n const formattedMinutes = minutes < 10 ? '0' + minutes : minutes;\r\n\r\n \/\/ Create time string\r\n return `${hours}:${formattedMinutes} ${ampm}`;\r\n}\r\n\r\n\/\/ Update the time displayed on the page\r\nfunction updateDisplayedTime() {\r\n document.getElementById(\"time\").innerText = currentTime();\r\n}\r\n\r\n\/\/ Call the function once to set initial time\r\nupdateDisplayedTime();\r\n\/\/ Set interval to update time every minute (60000 ms)\r\nsetInterval(updateDisplayedTime, 60000);\r\n\r\n\r\n\r\n\r\n\r\nconst weather = document.querySelector('.weather-wrapper');\r\nconst weatherItems = document.querySelectorAll('.w-1');\r\nconst itemWidth = 150 + 25; \/\/ Width of each card + gap\r\nlet currentPosition = 0;\r\nlet isTransitioning = false;\r\n\r\nconst transitionDuration = 0.5; \/\/ Transition duration for smooth effect\r\n\r\n\/\/ Next Slide Function\r\nfunction slideNext() {\r\n if (isTransitioning) return;\r\n isTransitioning = true;\r\n\r\n currentPosition -= itemWidth;\r\n weather.style.transition = `transform ${transitionDuration}s ease-in-out`;\r\n weather.style.transform = `translateX(${currentPosition}px)`;\r\n\r\n \/\/ Wait for the transition to end\r\n weather.addEventListener('transitionend', () => {\r\n \/\/ Move first item to the end once it slides out of view\r\n weather.appendChild(weather.querySelector('.w-1'));\r\n\r\n \/\/ Reset position instantly without animation\r\n currentPosition += itemWidth;\r\n weather.style.transition = \"none\"; \/\/ Disable transition for instant repositioning\r\n weather.style.transform = `translateX(${currentPosition}px)`;\r\n\r\n \/\/ Re-enable transitions for next swipe\r\n setTimeout(() => {\r\n weather.style.transition = `transform ${transitionDuration}s ease-in-out`;\r\n isTransitioning = false;\r\n }, 20); \/\/ Small delay to re-enable transition\r\n }, { once: true });\r\n}\r\n\r\n\r\n\r\n\/\/ Event Listeners for next and previous buttons\r\ndocument.querySelector('.next').addEventListener('click', slideNext);\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html><\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2f2bb6e e-flex e-con-boxed e-con e-parent\" data-id=\"2f2bb6e\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6bbdb23 e-flex e-con-boxed e-con e-parent\" data-id=\"6bbdb23\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1277","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/karachiweather.com\/wp-json\/wp\/v2\/pages\/1277","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/karachiweather.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/karachiweather.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/karachiweather.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/karachiweather.com\/wp-json\/wp\/v2\/comments?post=1277"}],"version-history":[{"count":25,"href":"https:\/\/karachiweather.com\/wp-json\/wp\/v2\/pages\/1277\/revisions"}],"predecessor-version":[{"id":2458,"href":"https:\/\/karachiweather.com\/wp-json\/wp\/v2\/pages\/1277\/revisions\/2458"}],"wp:attachment":[{"href":"https:\/\/karachiweather.com\/wp-json\/wp\/v2\/media?parent=1277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}