merge all files together as one

SVG/Camera.svg

-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><path d="M82,14.75H14A5,5,0,0,0,9,19.7V34.47a5,5,0,0,0,5,5h.72v8.83a33,33,0,0,0,33,33h.62a33,33,0,0,0,33-33V39.42H82a5,5,0,0,0,5-5V19.7A5,5,0,0,0,82,14.75Zm-1,5.9V32.78H14.92V20.65ZM47.69,75.25a26.88,26.88,0,0,1-9.44-1.7V61.05a9.52,9.52,0,0,1,9.5-9.5h.5a9.52,9.52,0,0,1,9.5,9.5v12.5a26.88,26.88,0,0,1-9.44,1.7Zm27.62-27A27,27,0,0,1,63.75,70.39V61.05a15.52,15.52,0,0,0-15.5-15.5h-.5a15.52,15.52,0,0,0-15.5,15.5v9.34A27,27,0,0,1,20.69,48.25V39.42H75.31Z"/><circle cx="47.96" cy="60.02" r="3"/></svg>
\ No newline at end of file

SVG/Cloud_wind.svg

-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><path d="M89.46,45.8a16.85,16.85,0,0,0,.61-4.54A17.37,17.37,0,0,0,72.72,23.91a17.16,17.16,0,0,0-5,.74,22.68,22.68,0,0,0-42.66,5.93A15.59,15.59,0,0,0,12.18,44a17.34,17.34,0,0,0,6,33.63H32.8a3,3,0,0,0,0-6H18.14a11.35,11.35,0,0,1-2.43-22.43,3,3,0,0,0,2.36-3,2.09,2.09,0,0,0,0-.26,9.56,9.56,0,0,1,9.47-9.54h.17a3,3,0,0,0,3.05-2.81,16.68,16.68,0,0,1,32.49-4.1A3,3,0,0,0,65,31.32a3,3,0,0,0,2.52-.12A11.34,11.34,0,0,1,83.11,45.82a3,3,0,0,0,1.31,3.85,11.35,11.35,0,0,1-2.16,20.84A3,3,0,0,0,84,76.26,17.35,17.35,0,0,0,89.46,45.8Z"/><path d="M57.23,59.84H30a3,3,0,0,0,0,6H57.23a9.36,9.36,0,1,0-8.62-13,3,3,0,0,0,5.53,2.34,3.36,3.36,0,1,1,3.09,4.66Z"/><path d="M69.05,71.62H41.82a3,3,0,1,0,0,6H69.05A3.36,3.36,0,1,1,66,82.28a3,3,0,0,0-5.52,2.34,9.35,9.35,0,1,0,8.62-13Z"/></svg>
\ No newline at end of file

SVG/Forecast.svg

-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><defs><style>.cls-1{fill:none;}</style></defs><polyline points="58.42 54.02 48.92 71.5 58.93 71.5 48.65 90.26 39.87 90.26 46.84 77.5 33.95 77.5 46.75 53.95"/><path class="cls-1" d="M27.53,36.87a16.53,16.53,0,0,1,4.2-1.32,17.17,17.17,0,0,1,9.55-14.89,14.5,14.5,0,0,0-14.07-1.08h0a14.45,14.45,0,0,0-5.38,21.91A17.25,17.25,0,0,1,27.53,36.87Z"/><path d="M89.08,46.72A17.09,17.09,0,0,0,72.72,24.65a17.25,17.25,0,0,0-4,.47,17.12,17.12,0,0,0-9.25-10.39L57,20.19a11.16,11.16,0,0,1,6.5,9.18l.37,4.36L67.8,31.8l.25-.13A11.13,11.13,0,0,1,83.83,41.76a10.91,10.91,0,0,1-1.14,4.86l-1.28,2.62L84,50.59a11.11,11.11,0,0,1-5.11,21H65.16v6H78.89A17.1,17.1,0,0,0,89.08,46.72Z"/><path d="M17.11,71.56a11.12,11.12,0,0,1-4.67-21.2L9.92,44.92a17.11,17.11,0,0,0,7.19,32.64h12v-6Z"/><path d="M20.27,48.45,23,50.69l1.78-3c.64-1.11,2.84-4.22,5.27-5.34a11.08,11.08,0,0,1,4.61-1l3.79.06-.57-3.53A10.87,10.87,0,0,1,37.72,36a11.1,11.1,0,0,1,9.72-11l5.22-.65-3-3.84,9-9.06L54.49,7.2l-9.06,9.06a20.24,20.24,0,0,0-9.16-3.78V0h-6V12.48a20.09,20.09,0,0,0-5.59,1.66h0A20.27,20.27,0,0,0,21,16.38L11.78,7.2,7.54,11.44l9.23,9.23A20.48,20.48,0,0,0,13,30H.58v6H13.11A20.38,20.38,0,0,0,20.27,48.45Zm6.94-28.87h0a14.5,14.5,0,0,1,14.07,1.08,17.17,17.17,0,0,0-9.55,14.89,16.53,16.53,0,0,0-4.2,1.32,17.25,17.25,0,0,0-5.7,4.62,14.45,14.45,0,0,1,5.38-21.91Z"/></svg>
\ No newline at end of file

SVG/Home.svg

-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><path d="M91.06,49.88,48,10,4.94,49.88,9,54.28l3-2.78V86H42V56.88H54V86H84V51.5l3,2.78ZM78,80.08H60V50.93H36V80.08H18V46L48,18.16,78,46Z"/></svg>
\ No newline at end of file

SVG/Humidity.svg

-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><path d="M33.06,22.15c-5-9.29-6.15-9.29-7.58-9.29s-2.62,0-7.62,9.3c-3.15,5.87-4.76,10.25-4.76,13a12.38,12.38,0,0,0,24.75,0C37.85,32.42,36.24,28,33.06,22.15Zm-7.58,19.4a6.38,6.38,0,0,1-6.38-6.37c0-2.76,3.84-10.09,6.37-14.24,2.57,4.2,6.38,11.52,6.38,14.24A6.38,6.38,0,0,1,25.48,41.55Z"/><path d="M79.93,22.15c-5-9.29-6.15-9.29-7.58-9.29s-2.61,0-7.61,9.3C61.58,28,60,32.41,60,35.18a12.38,12.38,0,0,0,24.75,0C84.73,32.42,83.11,28,79.93,22.15Zm-7.58,19.4A6.38,6.38,0,0,1,66,35.18C66,32.43,69.8,25.12,72.33,21c2.55,4.2,6.4,11.54,6.4,14.22A6.38,6.38,0,0,1,72.35,41.55Z"/><path d="M48.57,50.21c-1.4,0-2.62,0-7.61,9.3-3.16,5.87-4.77,10.26-4.77,13a12.38,12.38,0,1,0,24.75,0c0-2.75-1.61-7.14-4.79-13C51.13,50.21,50,50.21,48.57,50.21Zm0,28.7a6.38,6.38,0,0,1-6.38-6.38c0-2.75,3.84-10.08,6.37-14.24,2.57,4.2,6.38,11.52,6.38,14.24A6.38,6.38,0,0,1,48.57,78.91Z"/></svg>
\ No newline at end of file

SVG/Precipitation.svg

-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><path d="M45,48a3,3,0,0,0-3,3V70.17a7.63,7.63,0,0,1-15.15,1.26,3,3,0,1,0-5.92,1A13.63,13.63,0,0,0,48,70.17V51A3,3,0,0,0,45,48Z"/><path d="M48,11.83V8.53a3,3,0,0,0-6,0v3.3A42.19,42.19,0,0,0,3.7,47.54a3,3,0,0,0,2.22,3.33h0l.05,0a1.83,1.83,0,0,0,.25.06h0a2.92,2.92,0,0,0,.5,0,3,3,0,0,0,2.88-2.14,10.29,10.29,0,0,1,19.71,0,3,3,0,0,0,5.75,0,10.28,10.28,0,0,1,19.7,0,3,3,0,0,0,5.74,0,10.29,10.29,0,0,1,19.72,0A3,3,0,0,0,83.59,51h.12l.29-.07h0a3,3,0,0,0,2.21-3.33A42.18,42.18,0,0,0,48,11.83Zm9.72,29.83a16.24,16.24,0,0,0-25.45,0,16.15,16.15,0,0,0-18.67-5A36,36,0,0,1,45,17.71,35.94,35.94,0,0,1,76.36,36.66a16.15,16.15,0,0,0-18.67,5Z"/><path d="M12,17.31a5.68,5.68,0,0,0,5.68-5.69C17.65,8.48,13,1.29,12,1.29S6.28,8.48,6.28,11.62A5.69,5.69,0,0,0,12,17.31Z"/><path d="M84.18,7.58c-1.06,0-5.68,7.19-5.68,10.33a5.68,5.68,0,1,0,11.36,0C89.86,14.77,85.22,7.58,84.18,7.58Z"/></svg>
\ No newline at end of file

SVG/Temperature.svg

-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><path d="M33.14,60.89V56.32a3,3,0,0,0-6,0v4.57a9.33,9.33,0,0,0-6.43,8.83V70A9.31,9.31,0,0,0,30,79.31h.3A9.31,9.31,0,0,0,39.57,70v-.3A9.32,9.32,0,0,0,33.14,60.89Z"/><path d="M93.34,45.9v-6H83.81a14.62,14.62,0,0,0-2-5l6.78-6.77-4.25-4.24-6.66,6.66a14.81,14.81,0,0,0-5.61-2.36V18.65h-6v9.53a14.7,14.7,0,0,0-5.6,2.36l-6.67-6.66-4.24,4.24,6.77,6.77a14.6,14.6,0,0,0-2,5H44.83v6h9.53a14.74,14.74,0,0,0,2.16,5.32l-7,7,4.24,4.24,7-7a14.54,14.54,0,0,0,5.31,2.17v9.53h6V57.63a14.66,14.66,0,0,0,5.32-2.17l6.95,7,4.25-4.24-7-7a14.94,14.94,0,0,0,2.17-5.32ZM78.08,43.09a8.82,8.82,0,0,1-8.81,8.81h-.38a8.82,8.82,0,0,1-8.81-8.81v-.37A8.78,8.78,0,0,1,62,37.3l1.53-1.52a8.76,8.76,0,0,1,5.41-1.88h.38a8.74,8.74,0,0,1,5.41,1.88l1.53,1.52a8.76,8.76,0,0,1,1.87,5.42Z"/><path d="M42.34,57V20.68a12.65,12.65,0,0,0-25.29,0V57.83a17.32,17.32,0,0,0-4.92,12v.47A17.64,17.64,0,0,0,29.9,87.77h.48A17.64,17.64,0,0,0,48.14,70.31v-.47A17.17,17.17,0,0,0,42.34,57Zm-.2,13.34A11.63,11.63,0,0,1,30.38,81.77H29.9A11.64,11.64,0,0,1,18.13,70.31v-.47A11.37,11.37,0,0,1,22,61.36a3,3,0,0,0,1-2.25V20.68a6.65,6.65,0,0,1,13.29,0v.92H29.53v6h6.81v6.11H29.53v6h6.81v6.11H29.53v6h6.81v6.57a3,3,0,0,0,1.19,2.4,11.27,11.27,0,0,1,4.61,9.05Z"/></svg>
\ No newline at end of file

SVG/Wind.svg

-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><path d="M50.72,35.5H8.29a3,3,0,1,1,0-6H50.72a8.58,8.58,0,1,0-8.57-8.58,3,3,0,0,1-6,0A14.58,14.58,0,1,1,50.72,35.5Z"/><path d="M72,77.79a18,18,0,0,1-18-18,3,3,0,0,1,6,0,12,12,0,1,0,12-12H8.29a3,3,0,0,1,0-6H72a18,18,0,0,1,0,36Z"/><path d="M33.24,83.58A14.68,14.68,0,0,1,18.58,68.91a3,3,0,0,1,6,0,8.67,8.67,0,1,0,8.66-8.67h-25a3,3,0,0,1,0-6h25a14.67,14.67,0,0,1,0,29.34Z"/></svg>
\ No newline at end of file

SVG/Wind_dust.svg

-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><path d="M63.63,48.22H10.81a3,3,0,0,1,0-6H63.63a8.56,8.56,0,1,0-8.56-8.56,3,3,0,0,1-6,0A14.57,14.57,0,1,1,63.63,48.22Z"/><path d="M77.43,76.18A11.26,11.26,0,0,1,66.19,64.94a3,3,0,0,1,6,0,5.24,5.24,0,1,0,5.24-5.24H39.79a3,3,0,0,1,0-6H77.43a11.24,11.24,0,1,1,0,22.48Z"/><path d="M36.56,36.66H20.84a3,3,0,1,1,0-6H36.56a3,3,0,1,1,0,6Z"/><path d="M30.9,59.7H15.19a3,3,0,1,1,0-6H30.9a3,3,0,0,1,0,6Z"/><path d="M53.52,70.68H37.81a3,3,0,0,1,0-6H53.52a3,3,0,1,1,0,6Z"/><circle cx="40.95" cy="22.84" r="3"/><circle cx="75.2" cy="11.99" r="3"/><circle cx="85.67" cy="22.84" r="3"/><circle cx="79.67" cy="45.22" r="3"/><circle cx="62.73" cy="33.66" r="3"/><circle cx="51.92" cy="78.78" r="3"/><circle cx="68.73" cy="83.81" r="3"/></svg>
\ No newline at end of file

css/main.css

-* {
-  box-sizing: border-box;
-}
-
-head {
-  min-width: 390px;
-  max-width: 575.98px;
-  display: flex;
-  flex-direction: column;
-}
-
-body {
-  font-size: 14px;
-  font-family: 'Poppins';
-  background: linear-gradient(360deg, rgba(235, 238, 255, 0.6) 0%, rgba(245, 246, 252, 0.6) 100%);
-  margin-left: auto;
-  margin-right: auto;
-  min-width: 390px;
-  max-width: 575.98px;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-footer{
-  margin-top: auto;
-}
-
-a.disabled {
-  pointer-events: none;
-  cursor: default;
-  color: #A1A8B9;
-}
-
-button.headertab {
-  background-color: #FFFFFF;
-  border-width: 0em;
-  align-items: center;
-  white-space: normal;
-}
-
-.inactive-headertab {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #A1A8B9;
-  background-color: #FFFFFF;
-  border-width: 0em;
-  font-family: Poppins;
-  font-weight: Medium;
-  font-size: 14px;
-  width: 100%;
-  white-space: normal;
-}
-
-.active-headertab {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #4C80F8;
-  background-color: #FFFFFF;
-  border-width: 0em;
-  font-family: Poppins;
-  font-weight: bold;
-  font-size: 14px;
-  width: 100%;
-  white-space: normal;
-}
-
-.tab-line {
-  width: 100%;
-  height: 15%;
-  align-items: flex-end;
-  justify-content: end;
-
-  background: #4C80F8;
-  border-radius: 6px 6px 0px 0px;
-
-  flex: none;
-  order: 3;
-  flex-grow: 0;
-}
-
-.text-title-in-card {
-  color: rgba(54,69,90,1);
-  font-family: Poppins;
-  font-weight: Medium;
-  font-size: 14px;
-}
-
-.text-subtitle-in-card {
-  color: rgba(161,168,185,1);
-  font-family: Poppins;
-  font-weight: Light;
-  font-size: 14px;
-}
-
-.center-item-in-card {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.text-on-card {
-  color: rgba(161,168,185,1);
-  font-family: Poppins;
-  font-weight: Light;
-  font-size: 12px;
-  text-align: left;
-}
-
-.aqi-value {
-  color: rgba(54,69,90,1);
-  font-family: Poppins;
-  font-weight: Medium;
-  font-size: 32px;
-  opacity: 1;
-  text-align: center;
-}
-
-/*Filter styles*/
-.saturate { filter: saturate(3); }
-.grayscale { filter: grayscale(100%); }
-.contrast { filter: contrast(160%); }
-.brightness { filter: brightness(0.25); }
-.blur { filter: blur(3px); }
-.invert { filter: invert(100%); }
-.sepia { filter: sepia(100%); }
-.huerotate { filter: hue-rotate(180deg); }
-.rss.opacity { filter: opacity(50%); }
\ No newline at end of file

images/Home.svg

-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><path d="M91.06,49.88,48,10,4.94,49.88,9,54.28l3-2.78V86H42V56.88H54V86H84V51.5l3,2.78ZM78,80.08H60V50.93H36V80.08H18V46L48,18.16,78,46Z"/></svg>
\ No newline at end of file

readme.md

-เว็บ weather ของ hitachi
-/ เปลี่ยน title ตรง HitaChi เป็น One City Center Building
-- แต่ละหน้าให้อัพเดททุกๆ 1 ชั่วโมง รอบการอัพเดท คือ นาทีที่ 0 ของ ชั่วโมงนั้นๆ เข่น 08.00, 09.00 ฝั่งอัพเดทข้อมูล json จะปรับตามให้เวลาอัพเดทใกล้เคียงกันก่อนหน้าแสดงผลจะมาโหลดข้อมูล
-- style ปรับให้สัดส่วนลงตัวตามที่ออกแบบไว้ และรายละเอียดความหนาบางขนาดแต่ละจุดเมื่อมีการเปลี่ยนแปลง เช่น กดปุ่มเมนูอะไรเปลี่ยนบ้าง, ขนาดหน้าจอใหญ่เล็ก อะไรต้องขยับขนาดตามด้วย ถ้าหน้าจอใหญ่มาก กำหนดความกว้างจอใหญ่สุดตามความเหมาะสม
-/ รูปภาพแนะนำให้แปะ src เข้าไว้แต่แรกเลยเวลาเข้าหน้าจะได้ไม่เจอภาพว่างเปล่า
-- jQuery ถ้า script ไม่เวิร์คในบางครั้งก็ใข้ document.getElemen... แบบธรรมดาก็ได้(ลองเช็คความเหมาะสม เพราะบาง browser เวอร์ชั่นมีผล)
-
-* เปลี่ยนคำ title ขอให้แก้ทันทีนะ ส่วนข้ออื่นขอแก้มาดูวันศุกร์ก่อน ถ้าติดอะไรลองถามทีม front ดูเผื่อมีคำแนะนำ
\ No newline at end of file