Skip to content

H
hitachi-weather
Commit 0e5eba93 by Kornkitt Poolsup
Options

merge all files together as one

parent 0b16ca41
Showing with 784 additions and 598 deletions
SVG/Artboard 21.svg 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
SVG/Camera.svg deleted 100644 → 0
<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 deleted 100644 → 0
<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 deleted 100644 → 0
<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 deleted 100644 → 0
<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 deleted 100644 → 0
<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 deleted 100644 → 0
<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 deleted 100644 → 0
<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 deleted 100644 → 0
<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 deleted 100644 → 0
<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 deleted 100644 → 0
* {
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 deleted 100644 → 0
<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
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>One City Center Building</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
<link href="./css/main.css" rel="stylesheet" />
<nav class="navbar shadow-sm mt-2 bg-body rounded" style="background-color: #FFFFFF; width: 100%; padding-bottom: 6px;" >
<div class="container-fluid">
<span class="navbar-brand mb-0 h1" style="color: #36455A;"><b>Good Morning</b></span>
</div>
<div class="container-fluid">
<p id="showtime" onload="startTime()" style="color: #6A6F7D;">-</p>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>One City Center Building</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
<!-- <link href="./css/main.css" rel="stylesheet" /> -->
<!-- <?xml version="1.0" encoding="utf-8"?> -->
<style>
* {
box-sizing: border-box;
}
head {
min-width: 320px;
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: 320px;
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%);
}
</style>
<nav class="navbar shadow-sm mt-2 bg-body rounded"
style="background-color: #FFFFFF; width: 100%; padding-bottom: 6px;">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1" style="color: #36455A;"><b>Good Morning</b></span>
</div>
<div class="container-fluid">
<p id="showtime" style="color: #6A6F7D;">-</p>
</div>
<hr>
<div class="container-fluid" style="display: inline-block;">
<div class="row row-flex">
<div class="col-4">
<button class="active-headertab" id="home-menu-tab" type="button" onclick="navigate('home')" disabled>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" style="width: 40px;">
<defs>
<style>
.cls-1 {
fill: #4c80f8;
}
</style>
</defs>
<path class="cls-1"
d="M29.3,62.2V60.07a3.3,3.3,0,0,0-6.6,0V62.2a10.26,10.26,0,0,0-7.09,9.72v.33A10.25,10.25,0,0,0,25.84,82.47h.32A10.25,10.25,0,0,0,36.39,72.25v-.33A10.26,10.26,0,0,0,29.3,62.2Z" />
<circle class="cls-1" cx="26" cy="72.09" r="10.39" />
<path class="cls-1"
d="M39.43,57.88v-40a13.92,13.92,0,0,0-27.84,0V58.83A19,19,0,0,0,6.17,72.05v.51A19.43,19.43,0,0,0,25.74,91.79h.52A19.43,19.43,0,0,0,45.83,72.56v-.51A18.89,18.89,0,0,0,39.43,57.88Zm-.21,14.68a12.8,12.8,0,0,1-13,12.62h-.52a12.8,12.8,0,0,1-13-12.62v-.51a12.48,12.48,0,0,1,4.3-9.33,3.32,3.32,0,0,0,1.12-2.48V17.91a7.32,7.32,0,0,1,14.63,0v1h-7.5v6.6h7.5v6.73h-7.5v6.61h7.5V45.6h-7.5v6.61h7.5v7.23a3.3,3.3,0,0,0,1.31,2.64,12.42,12.42,0,0,1,5.08,10Z" />
<path class="cls-1"
d="M72.17,27.45A9,9,0,1,0,65,24,9,9,0,0,0,72.17,27.45Zm-3-9.43a3.08,3.08,0,0,1,3-2.68l.39,0a3,3,0,0,1,2,1.15,3.06,3.06,0,1,1-4.83,3.75A3,3,0,0,1,69.12,18Z" />
<path class="cls-1"
d="M53.43,70.11A8.35,8.35,0,0,0,63.68,83.3,8.35,8.35,0,0,0,53.43,70.11ZM60.89,77A2.28,2.28,0,0,1,60,78.56a2.35,2.35,0,1,1-2.89-3.71,2.31,2.31,0,0,1,1.44-.5l.3,0a2.34,2.34,0,0,1,2,2.63Z" />
<path class="cls-1" d="M86.93,29.45a3.3,3.3,0,1,0,2.87,3.68A3.3,3.3,0,0,0,86.93,29.45Z" />
<path class="cls-1" d="M78.61,67.37a3.3,3.3,0,1,0,2.88,3.68A3.31,3.31,0,0,0,78.61,67.37Z" />
<path class="cls-1" d="M57.12,10.82a3.31,3.31,0,1,0-3.3-3.31A3.31,3.31,0,0,0,57.12,10.82Z" />
<path class="cls-1" d="M51.15,26.23a3.3,3.3,0,1,0-3.31-3.3A3.3,3.3,0,0,0,51.15,26.23Z" />
<path class="cls-1"
d="M79.1,41.88a3,3,0,0,0-3,2.58H74.78a9.83,9.83,0,0,0-2.1-3.61l.7-1.2a3.07,3.07,0,0,0,1.1.24,3,3,0,0,0,1.5-5.6l-4.46-2.58a3,3,0,0,0-3.35,4.95l-.68,1.18a9.57,9.57,0,0,0-4.17,0l-.68-1.18a3,3,0,0,0-3.35-4.95l-4.46,2.58a3,3,0,0,0,1.5,5.6,3.07,3.07,0,0,0,1.1-.24l.7,1.2A9.83,9.83,0,0,0,56,44.46H54.67a3,3,0,0,0-6,.42V50a3,3,0,0,0,6,.43H56a9.87,9.87,0,0,0,2.1,3.6l-.69,1.19a3,3,0,0,0-2.61,5.37l4.46,2.58a3,3,0,0,0,3.35-5l.68-1.18a9.57,9.57,0,0,0,4.17,0l.68,1.18a3,3,0,0,0,3.35,5L76,60.62a3,3,0,0,0-2.61-5.37l-.69-1.19a9.87,9.87,0,0,0,2.1-3.6h1.36a3,3,0,0,0,6-.43V44.88A3,3,0,0,0,79.1,41.88ZM61.56,47.46A3.85,3.85,0,1,1,65.4,51.3,3.84,3.84,0,0,1,61.56,47.46Z" />
</svg>
</button>
<div id="home-tab-line" class="tab-line" style="visibility: visible;"></div>
</div>
<div class="col-4">
<button class="inactive-headertab" id="camera-menu-tab" type="button" onclick="navigate('camera')">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" style="width: 40px;"><defs><style>.cls-1{fill:#a1a8b9;}</style></defs><path class="cls-1" 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 class="cls-1" cx="47.96" cy="60.02" r="3"/></svg>
</button>
<div id="camera-tab-line" class="tab-line" style="visibility: hidden;"></div>
</div>
<div class="col-4">
<button class="inactive-headertab" id="forecast-menu-tab" type="button" onclick="navigate('forecast')">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" style="width: 40px;"><defs><style>.cls-1{fill:#a1a8b9;}.cls-2{fill:none;}</style></defs><polyline class="cls-1" 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-2" 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 class="cls-1" 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 class="cls-1" 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 class="cls-1" 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>
</button>
<div id="forecast-tab-line" class="tab-line" style="visibility: hidden;"></div>
</div>
</div>
<hr>
<div class="container-fluid" style="display: inline-block;">
<div class="row row-flex" >
<div class="col-4">
<button class="active-headertab" id="home-menu-tab" type="button" onclick="navigate('home')" style="display: inline-block;" disabled>
<!-- <svg id="home-icon" data-name="Home Icon" width=24 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> -->
<img id="home-icon" src="images/home-active.png" width="24" >
<span style="display: block;">Home</span>
</button>
<div id="home-tab-line" class="tab-line" style="visibility: visible;"></div>
</div>
<div class="col-4">
<button class="inactive-headertab" id="camera-menu-tab" type="button" onclick="navigate('camera')" style="display: inline-block;">
<!-- <svg id="camera-icon" data-name="Camera Icon" width=24 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> -->
<img id="camera-icon" src="images/camera.png" width="24" >
<span style="display: block;">Camera</span>
</button>
<div id="camera-tab-line" class="tab-line" style="visibility: hidden;"></div>
</div>
<div class="col-4">
<button class="inactive-headertab" id="forecast-menu-tab" type="button" onclick="navigate('forecast')" style="display: inline-block;">
<!-- <svg id="forecast-icon" data-name="Forecast Icon" width=24 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> -->
<img id="forecast-icon" src="images/forecast.png" width="24" >
<span style="display: block;">Forecast</span>
</button>
<div id="forecast-tab-line" class="tab-line" style="visibility: hidden;"></div>
</div>
</div>
</nav>
</head>
<body>
<!-- <div class="container-fluid"> -->
<!-- Homepage -->
<div class="container-fluid mt-3" id="homepage" style="display: inline-block;">
<div class="row row-flex" style="color: #36455A;">
<div class="card shadow-sm p-3 mb-2 bg-body rounded"
style="border-width: 0px; display: flex; justify-content: center; height: 100%;">
<!-- <div class="card-body"> -->
<div class="row">
<div class="col">
<svg version="1.1" id="airquality-icon" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 96 96"
style="enable-background:new 0 0 96 96; width: 2rem;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #737373;
}
</style>
<path class="st0"
d="M50.7,35.5H8.3c-1.7,0-3-1.3-3-3c0-1.7,1.3-3,3-3h42.4c4.7,0,8.6-3.8,8.6-8.6c0-4.7-3.8-8.6-8.6-8.6s-8.6,3.8-8.6,8.6c0,0,0,0,0,0c0,1.7-1.3,3-3,3s-3-1.3-3-3c0-8.1,6.5-14.6,14.6-14.6s14.6,6.5,14.6,14.6C65.3,29,58.8,35.5,50.7,35.5C50.7,35.5,50.7,35.5,50.7,35.5z" />
<path class="st0"
d="M72,77.8c-9.9,0-18-8.1-18-18c0-1.7,1.3-3,3-3s3,1.3,3,3c0,6.6,5.4,12,12,12s12-5.4,12-12s-5.4-12-12-12H8.3c-1.7,0-3-1.3-3-3s1.3-3,3-3H72c9.9,0,18,8.1,18,18S81.9,77.8,72,77.8z" />
<path class="st0"
d="M33.2,83.6c-8.1,0-14.7-6.6-14.7-14.7c0-1.7,1.3-3,3-3s3,1.3,3,3c0,4.8,3.9,8.7,8.7,8.7c4.8,0,8.7-3.9,8.7-8.7c0-4.8-3.9-8.7-8.7-8.7c0,0,0,0,0,0h-25c-1.7,0-3-1.3-3-3s1.3-3,3-3h25c8.1,0,14.7,6.6,14.7,14.7C47.9,77,41.3,83.6,33.2,83.6z" />
</svg>
</div>
<div class="col" style="text-align: right;">
<p class="card-title" style="font-size: medium; font-weight: 500;"><b>Air Quality</b></p>
<p class="card-subtitle mb-2 text-muted" style="font-size: small; font-weight: 300;">PM2.5
(μg./m<sup>3</sup>)</p>
</div>
</div>
</nav>
</head>
<body>
<!-- <div class="container-fluid"> -->
<!-- Homepage -->
<div class="container-fluid mt-3" id="homepage" style="display: inline-block;">
<div class="row row-flex" style="color: #36455A;">
<div class="col-6">
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px; display: flex; justify-content: center; height: 100%;">
<div class="card-body">
<img src="./images/wind.png" width="24">
<p class="card-title" style="font-size: medium; font-weight: 500;"><b>Air Quality</b></p>
<p class="card-subtitle mb-2 text-muted" style="font-size: small; font-weight: 300;">PM2.5 (μg./m<sup>3</sup>)</p>
<div style="text-align: center;">
<img id="home-pm25-pic" src="icon/pm1.png" width="48">
<p id="home-pm25" style="font-size: 3rem; color: #36455A; position: relative; font-weight: 500;">-</p>
<p style="font-weight: 400; color: #6A6F7D;">US AQI</p>
<span id="pm25state" class="badge rounded-pill text-light" style="background-color: #A1A8B9; font-weight: 500;">-</span>
</div>
<div id="airquality-value" style="text-align: center; display: block; border-radius: 6px;">
<div class="row">
<div class="col" id="home-pm25-pic" style="vertical-align: middle; justify-content: center;">
<!-- <img id="home-pm25-pic" src="icon/pm1.png" width="48"> -->
</div>
<div class="col">
<p id="home-pm25" style="font-size: 3rem; color: #36455A; position: relative; font-weight: 500;">-</p>
<p style="font-weight: 400; color: #6A6F7D;">US AQI</p>
</div>
<div class="card-footer bg-transparent border-light">
<p id="pm25describe" class="text-on-card mt-2" style="font-size: small; margin-top: auto;">Take a walk or play outside, the air is great today.</p>
<div class="col">
<span id="pm25state" class="badge rounded-pill text-light"
style="background-color: #A1A8B9; font-weight: 500; align-items: center;">-</span>
</div>
</div>
</div>
<div class="col-6">
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px; display: flex; justify-content: center; height: 50%;">
<div class="card-body">
<img src="./images/thermometer.png" width="24">
<div style="color: #A1A8B9;">
<b><p id="home-temperature" style="font-size: 2rem; display: inline; color: #36455A;">-</p></b> (°C)
</div>
<p class="card-text" style="color: #6A6F7D;">Temperature</p>
</div>
<!-- </div> -->
<div class="card-footer bg-transparent border-light">
<p id="pm25describe" class="text-on-card mt-2" style="font-size: small; margin-top: auto;">Take a walk or play
outside, the air is great today.</p>
</div>
</div>
</div>
<div class="row row-flex" style="color: #36455A;">
<div class="col-6">
<div class="card shadow-sm p-3 mb-2 bg-body rounded"
style="border-width: 0px; display: flex; justify-content: center; ">
<!-- <div class="card-body"> -->
<svg version="1.1" id="thermometer-icon" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 96 96"
style="enable-background:new 0 0 96 96; width: 2rem;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #737373;
}
</style>
<path class="st0" d="M33.1,60.9v-4.6c0-1.7-1.3-3-3-3s-3,1.3-3,3l0,0v4.6c-3.8,1.2-6.4,4.8-6.4,8.8V70c0,5.1,4.2,9.3,9.3,9.3h0.3
c5.1,0,9.3-4.2,9.3-9.3v-0.3C39.5,65.7,37,62.1,33.1,60.9z" />
<path class="st0" d="M93.3,45.9v-6h-9.5c-0.4-1.8-1-3.5-2-5l6.8-6.8l-4.2-4.2l-6.7,6.7c-1.7-1.2-3.6-2-5.6-2.4v-9.5h-6v9.5
c-2,0.4-3.9,1.2-5.6,2.4l-6.7-6.7l-4.2,4.2l6.8,6.8c-1,1.5-1.6,3.2-2,5h-9.5v6h9.5c0.4,1.9,1.1,3.7,2.2,5.3l-7,7l4.2,4.2l7-7
c1.6,1.1,3.4,1.8,5.3,2.2v9.5h6v-9.5c1.9-0.4,3.7-1.1,5.3-2.2l6.9,7l4.2-4.2l-7-7c1.1-1.6,1.8-3.4,2.2-5.3H93.3z M78.1,43.1
c0,4.9-3.9,8.8-8.8,8.8h-0.4c-4.9,0-8.8-3.9-8.8-8.8v-0.4c0-2,0.7-3.9,1.9-5.4l1.5-1.5c1.5-1.2,3.4-1.9,5.4-1.9h0.4
c2,0,3.9,0.7,5.4,1.9l1.5,1.5c1.2,1.5,1.9,3.5,1.9,5.4L78.1,43.1z" />
<path class="st0"
d="M42.3,57V20.7c-0.2-7-6-12.5-13-12.3C22.6,8.6,17.2,14,17,20.7v37.2c-3.1,3.2-4.9,7.5-4.9,12v0.5
c0.1,9.7,8,17.5,17.8,17.5h0.5C40.1,87.8,48,80,48.1,70.3v-0.5C48.1,64.9,46,60.3,42.3,57z M42.1,70.3c-0.1,6.4-5.4,11.5-11.8,11.4
h-0.5c-6.4,0.1-11.7-5.1-11.8-11.5v-0.5c0-3.2,1.4-6.3,3.9-8.5c0.6-0.6,1-1.4,1-2.2V20.7c0.1-3.7,3.2-6.5,6.9-6.4
c3.5,0.1,6.3,2.9,6.4,6.4v0.9h-6.8v6h6.8v6.1h-6.8v6h6.8v6.1h-6.8v6h6.8v6.6c0,0.9,0.4,1.8,1.2,2.4c2.9,2.1,4.6,5.5,4.6,9.1V70.3z" />
</svg>
<div style="color: #A1A8B9;">
<b>
<p id="home-temperature" style="font-size: 2rem; display: inline; color: #36455A;">-</p>
</b> (°C)
</div>
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px; display: flex; justify-content: center; height: 50%;">
<div class="card-body">
<img src="./images/droplet.png" width="24">
<div style="color: #A1A8B9;">
<b><p id="home-humidity" style="font-size: 2rem; display: inline; color: #36455A;">-</p></b> %HR
</div>
<p class="card-text" style="color: #6A6F7D;">Humidity</p>
</div>
<p class="card-text" style="color: #6A6F7D;">Temperature</p>
<!-- </div> -->
</div>
</div>
<div class="col-6">
<div class="card shadow-sm p-3 mb-2 bg-body rounded"
style="border-width: 0px; display: flex; justify-content: center; ">
<!-- <div class="card-body"> -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 96 96" style="enable-background:new 0 0 96 96; width: 2rem;"
xml:space="preserve">
<style type="text/css">
.st0 {
fill: #737373;
}
</style>
<path class="st0" d="M33.1,22.1c-5-9.3-6.1-9.3-7.6-9.3s-2.6,0-7.6,9.3c-3.1,5.9-4.8,10.2-4.8,13c0.2,6.8,5.9,12.2,12.7,12
c6.6-0.2,11.8-5.5,12-12C37.8,32.4,36.2,28,33.1,22.1z M25.5,41.5c-3.5,0-6.4-2.9-6.4-6.4c0-2.8,3.8-10.1,6.4-14.2
c2.6,4.2,6.4,11.5,6.4,14.2C31.8,38.7,29,41.5,25.5,41.5z" />
<path class="st0" d="M79.9,22.1c-5-9.3-6.2-9.3-7.6-9.3s-2.6,0-7.6,9.3C61.6,28,60,32.4,60,35.2c0.2,6.8,5.9,12.2,12.7,12
c6.6-0.2,11.8-5.5,12-12C84.7,32.4,83.1,28,79.9,22.1z M72.3,41.5c-3.5,0-6.3-2.9-6.3-6.4c0-2.8,3.8-10.1,6.3-14.2
c2.6,4.2,6.4,11.5,6.4,14.2C78.7,38.7,75.9,41.6,72.3,41.5z" />
<path class="st0" d="M48.6,50.2c-1.4,0-2.6,0-7.6,9.3c-3.2,5.9-4.8,10.3-4.8,13c-0.2,6.8,5.2,12.5,12,12.7s12.5-5.2,12.7-12
c0-0.2,0-0.5,0-0.7c0-2.8-1.6-7.1-4.8-13C51.1,50.2,50,50.2,48.6,50.2z M48.6,78.9c-3.5,0-6.4-2.9-6.4-6.4c0-2.8,3.8-10.1,6.4-14.2
c2.6,4.2,6.4,11.5,6.4,14.2C54.9,76,52.1,78.9,48.6,78.9z" />
</svg>
<div style="color: #A1A8B9;">
<b>
<p id="home-humidity" style="font-size: 2rem; display: inline; color: #36455A;">-</p>
</b> %HR
</div>
<!-- <div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
<div class="card-body">
<img src="./images/snow-wind.png" width="24">
<div style="color: #A1A8B9;">
<b><p id="home-pm10" style="font-size: 2rem; display: inline; color: #36455A;">-</p></b> (μg./m<sup>3</sup>)
</div>
<p class="card-text" style="color: #6A6F7D;">PM 10</p>
</div>
</div> -->
<p class="card-text" style="color: #6A6F7D;">Humidity</p>
<!-- </div> -->
</div>
</div>
</div>
</div>
<!-- Camera page -->
<div class="container-fluid mt-3" id="camerapage" style="display: none;">
<div class="row row-flex">
<div class="col">
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
<img id="cam01" src="https://occ-hitachi.nexpie.com/data/z1/cam1.png" class="card-img-top" width="100%">
<div class="card-body" style="display: flex; justify-content: space-between;">
<b><p style="font-size: large;">Camera 01</p></b>
<p id="camera01-time" style=" color: #A1A8B9;"></p>
</div>
<!-- Camera page -->
<div class="container-fluid mt-3" id="camerapage" style="display: none;">
<div class="row row-flex">
<div class="col">
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
<img id="cam01" src="https://occ-hitachi.nexpie.com/data/z1/cam1.png" class="card-img-top" width="100%">
<div class="card-body" style="display: flex; justify-content: space-between;">
<b>
<p style="font-size: large;">Camera 01</p>
</b>
<p id="camera01-time" style=" color: #A1A8B9;"></p>
</div>
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
<img id="cam02" src="https://occ-hitachi.nexpie.com/data/z1/cam2.png" class="card-img-top" width="100%">
<div class="card-body" style="display: flex; justify-content: space-between;">
<b><p style="font-size: large;">Camera 02</p></b>
<p id="camera02-time" style=" color: #A1A8B9;"></p>
</div>
</div>
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
<img id="cam02" src="https://occ-hitachi.nexpie.com/data/z1/cam2.png" class="card-img-top" width="100%">
<div class="card-body" style="display: flex; justify-content: space-between;">
<b>
<p style="font-size: large;">Camera 02</p>
</b>
<p id="camera02-time" style=" color: #A1A8B9;"></p>
</div>
<div class="card shadow-sm p-3 mb-1 bg-body rounded" style="border-width: 0px;">
<img id="cam03" src="https://occ-hitachi.nexpie.com/data/z1/cam3.png" class="card-img-top" width="100%">
<div class="card-body" style="display: flex; justify-content: space-between;">
<b><p style="font-size: large;">Camera 03</p></b>
<p id="camera03-time" style=" color: #A1A8B9;"></p>
</div>
</div>
<div class="card shadow-sm p-3 mb-1 bg-body rounded" style="border-width: 0px;">
<img id="cam03" src="https://occ-hitachi.nexpie.com/data/z1/cam3.png" class="card-img-top" width="100%">
<div class="card-body" style="display: flex; justify-content: space-between;">
<b>
<p style="font-size: large;">Camera 03</p>
</b>
<p id="camera03-time" style=" color: #A1A8B9;"></p>
</div>
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
<img id="cam04" src="https://occ-hitachi.nexpie.com/data/z1/cam4.png" class="card-img-top" width="100%">
<div class="card-body" style="display: flex; justify-content: space-between;">
<b><p style="font-size: large;">Camera 04</p></b>
<p id="camera04-time" style=" color: #A1A8B9;"></p>
</div>
</div>
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
<img id="cam04" src="https://occ-hitachi.nexpie.com/data/z1/cam4.png" class="card-img-top" width="100%">
<div class="card-body" style="display: flex; justify-content: space-between;">
<b>
<p style="font-size: large;">Camera 04</p>
</b>
<p id="camera04-time" style=" color: #A1A8B9;"></p>
</div>
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
<img id="cam05" src="https://occ-hitachi.nexpie.com/data/z1/cam5.png" class="card-img-top" width="100%">
<div class="card-body" style="display: flex; justify-content: space-between;">
<b><p style="font-size: large;">Camera 05</p></b>
<p id="camera05-time" style=" color: #A1A8B9;"></p>
</div>
</div>
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
<img id="cam05" src="https://occ-hitachi.nexpie.com/data/z1/cam5.png" class="card-img-top" width="100%">
<div class="card-body" style="display: flex; justify-content: space-between;">
<b>
<p style="font-size: large;">Camera 05</p>
</b>
<p id="camera05-time" style=" color: #A1A8B9;"></p>
</div>
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
<img id="cam06" src="https://occ-hitachi.nexpie.com/data/z1/cam6.png" onloadstart="getCamera()" class="card-img-top" width="100%">
<div class="card-body" style="display: flex; justify-content: space-between;">
<b><p style="font-size: large;">Camera 06</p></b>
<p id="camera06-time" style=" color: #A1A8B9;"></p>
</div>
</div>
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
<img id="cam06" src="https://occ-hitachi.nexpie.com/data/z1/cam6.png" onloadstart="getCamera()"
class="card-img-top" width="100%">
<div class="card-body" style="display: flex; justify-content: space-between;">
<b>
<p style="font-size: large;">Camera 06</p>
</b>
<p id="camera06-time" style=" color: #A1A8B9;"></p>
</div>
</div>
</div>
</div>
<!-- Forecast page -->
<div class="container-fluid mt-3" id="forecastpage" style="display: none;">
<div class="row row-flex">
<div class="col" style="width: 100%;">
<i class="bi bi-geo" style="color: #36455A; font-size: large;"> Bangkok</i>
<br><p id="forecasttime" style="color: #6A6F7D;">-</p>
<div id="forcastplain" style="text-align: center; display: inline-block; width: 100%;">
<img id="forecast-pic" class="mt-5" style="align-items: center;" width="200rem">
<br>
<p id="forecast-temperature" style="font-size: 5rem; display: inline; color: #36455A; text-align: center; font-weight: 400;">-</p>
<p style="display: inline; font-size: 2rem; color: #A1A8B9;">°C</p>
<p id="forecast-description" style="display: block; font-weight: 500; color: #6A6F7D;"></p>
</div>
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
<!-- <div class="card-body"> -->
<!-- <div class="container-fluid"> -->
<div class="row" style="align-items: center;">
<div class="col-4" style="color: #6A6F7D; text-align: center; align-items: center;">
<img src="./images/rain.png" width="24">
<br> <b><p id="forecast-precip" style="color: #36455A; font-size: large;">-</p></b>
<p>Precipitation</p>
</div>
<div class="col-4" style="color: #6A6F7D; text-align: center; align-items: center;">
<img src="./images/droplet.png" width="24">
<br> <b><p id="forecast-humid" style="color: #36455A; font-size: large;">-</p></b>
<p>Humidity</p>
</div>
<div class="col-4" style="color: #6A6F7D; text-align: center; align-items: center;">
<img src="./images/cloud-wind.png" width="24">
<br> <b><p id="forecast-ws" style="color: #36455A; font-size: large;">-</p></b>
<p>Wind Speed</p>
</div>
</div>
<!-- </div> -->
<!-- </div> -->
</div>
<!-- Forecast page -->
<div class="container-fluid mt-3" id="forecastpage" style="display: none;">
<div class="row row-flex">
<div class="col" style="width: 100%;">
<!-- <i class="bi bi-geo" style="color: #36455A; font-size: large;"> Bangkok</i> -->
<div id="locationplain" style="display: inline-block;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" style="width: 2rem;">
<defs>
<style>
.cls-1 {
fill: #737373;
}
</style>
</defs>
<path class="cls-1"
d="M48,45.65A15.72,15.72,0,1,1,63.72,29.93,15.74,15.74,0,0,1,48,45.65Zm0-25.44a9.72,9.72,0,1,0,9.72,9.72A9.73,9.73,0,0,0,48,20.21Z" />
<path class="cls-1"
d="M48,85.16c-11.74,0-20.58-5-20.58-11.72a8.18,8.18,0,0,1,2-5.23A3,3,0,1,1,34,72a2.29,2.29,0,0,0-.62,1.4c0,2.28,5.81,5.72,14.58,5.72s14.59-3.44,14.59-5.72A2.34,2.34,0,0,0,61.92,72a3,3,0,1,1,4.57-3.89,8.22,8.22,0,0,1,2.1,5.34C68.59,80.12,59.74,85.16,48,85.16Z" />
<path class="cls-1"
d="M48,94.66c-19.63,0-35-8.3-35-18.88,0-5.44,3.92-10.38,11-13.92a3,3,0,0,1,2.67,5.38C21.81,69.67,19,72.78,19,75.78c0,6.09,11.91,12.88,29,12.88s29-6.79,29-12.88c0-3-2.81-6.11-7.71-8.54A3,3,0,0,1,72,61.86c7.12,3.54,11,8.48,11,13.92C83,86.36,67.63,94.66,48,94.66Z" />
<path class="cls-1"
d="M48,74.07c-4.4,0-14.38-13.78-16.33-16.54-4.58-6.46-12.25-18.64-12.25-27.6a28.58,28.58,0,1,1,57.16,0c0,9-7.68,21.13-12.27,27.6C62.36,60.29,52.37,74.07,48,74.07ZM48,7.34A22.61,22.61,0,0,0,25.42,29.93C25.42,41.39,43,63.35,48,67.61c5-4.28,22.59-26.28,22.59-37.68A22.61,22.61,0,0,0,48,7.34Z" />
</svg>
<p id="forecast-location" style="display: inline; font-weight: 400; font-size:x-large; padding: .2rem;">-</p>
<p id="forecasttime" style="color: #6A6F7D;">-</p>
</div>
<div id="forcastplain" style="text-align: center; display: inline-block; width: 100%;">
<img id="forecast-pic" class="mt-5" style="align-items: center;" width="200rem">
<br>
<p id="forecast-temperature"
style="font-size: 5rem; display: inline; color: #36455A; text-align: center; font-weight: 400;">-</p>
<p style="display: inline; font-size: 2rem; color: #A1A8B9;">°C</p>
<p id="forecast-description" style="display: block; font-weight: 500; color: #6A6F7D;"></p>
</div>
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
<!-- <div class="card-body"> -->
<!-- <div class="container-fluid"> -->
<div class="row" style="align-items: center;">
<div class="col-4" style="color: #6A6F7D; text-align: center; align-items: center;">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 96 96" style="enable-background:new 0 0 96 96; width: 3rem;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #737373;
}
</style>
<path class="st0"
d="M45,48c-1.7,0-3,1.3-3,3v19.2c0,4.2-3.4,7.6-7.7,7.6c-3.7,0-6.9-2.7-7.5-6.3c-0.3-1.6-1.8-2.7-3.5-2.5
c-1.6,0.3-2.7,1.8-2.5,3.5c1.3,7.4,8.3,12.4,15.7,11.2C43.2,82.5,48,76.8,48,70.2V51C48,49.3,46.7,48,45,48z" />
<path class="st0" d="M48,11.8V8.5c0-1.7-1.3-3-3-3s-3,1.3-3,3v3.3C22.5,13.4,6.6,28.2,3.7,47.5c-0.2,1.5,0.7,2.9,2.2,3.3l0,0H6
c0.1,0,0.2,0,0.2,0.1l0,0c0.2,0,0.3,0,0.5,0c1.3,0,2.5-0.9,2.9-2.1c1.6-5.4,7.4-8.5,12.8-6.9c3.3,1,5.9,3.6,6.9,6.9
c0.5,1.6,2.1,2.5,3.7,2c1-0.3,1.7-1,2-2c1.6-5.4,7.4-8.5,12.8-6.9c3.3,1,5.9,3.6,6.9,6.9c0.5,1.6,2.2,2.5,3.7,2c1-0.3,1.7-1,2-2
c1.6-5.4,7.4-8.5,12.8-6.9c3.3,1,5.9,3.6,6.9,6.9c0.4,1.5,1.8,2.4,3.4,2.2h0.1l0.3-0.1l0,0c1.5-0.4,2.4-1.8,2.2-3.3
C83.3,28.3,67.5,13.5,48,11.8z M57.7,41.7c-5.6-7-15.8-8.2-22.8-2.6c-1,0.8-1.9,1.7-2.6,2.6c-4.4-5.6-12-7.7-18.7-5
c6.2-11.6,18.3-18.8,31.4-19c13.1,0.1,25.2,7.4,31.4,19C69.7,34,62.1,36,57.7,41.7L57.7,41.7z" />
<path class="st0" d="M12,17.3c3.1,0,5.7-2.5,5.7-5.7c0,0,0,0,0,0C17.6,8.5,13,1.3,12,1.3S6.3,8.5,6.3,11.6
C6.3,14.8,8.8,17.3,12,17.3C12,17.3,12,17.3,12,17.3z" />
<path class="st0"
d="M84.2,7.6c-1.1,0-5.7,7.2-5.7,10.3c0,3.1,2.5,5.7,5.7,5.7s5.7-2.5,5.7-5.7C89.9,14.8,85.2,7.6,84.2,7.6z" />
</svg>
<br> <b>
<p id="forecast-precip" style="color: #36455A; font-size: large;">-</p>
</b>
<p>Precipitation</p>
</div>
<div class="col-4" style="color: #6A6F7D; text-align: center; align-items: center;">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 96 96" style="enable-background:new 0 0 96 96; width: 3rem;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #737373;
}
</style>
<path class="st0" d="M33.1,22.1c-5-9.3-6.1-9.3-7.6-9.3s-2.6,0-7.6,9.3c-3.1,5.9-4.8,10.2-4.8,13c0.2,6.8,5.9,12.2,12.7,12
c6.6-0.2,11.8-5.5,12-12C37.8,32.4,36.2,28,33.1,22.1z M25.5,41.5c-3.5,0-6.4-2.9-6.4-6.4c0-2.8,3.8-10.1,6.4-14.2
c2.6,4.2,6.4,11.5,6.4,14.2C31.8,38.7,29,41.5,25.5,41.5z" />
<path class="st0" d="M79.9,22.1c-5-9.3-6.2-9.3-7.6-9.3s-2.6,0-7.6,9.3C61.6,28,60,32.4,60,35.2c0.2,6.8,5.9,12.2,12.7,12
c6.6-0.2,11.8-5.5,12-12C84.7,32.4,83.1,28,79.9,22.1z M72.3,41.5c-3.5,0-6.3-2.9-6.3-6.4c0-2.8,3.8-10.1,6.3-14.2
c2.6,4.2,6.4,11.5,6.4,14.2C78.7,38.7,75.9,41.6,72.3,41.5z" />
<path class="st0" d="M48.6,50.2c-1.4,0-2.6,0-7.6,9.3c-3.2,5.9-4.8,10.3-4.8,13c-0.2,6.8,5.2,12.5,12,12.7s12.5-5.2,12.7-12
c0-0.2,0-0.5,0-0.7c0-2.8-1.6-7.1-4.8-13C51.1,50.2,50,50.2,48.6,50.2z M48.6,78.9c-3.5,0-6.4-2.9-6.4-6.4c0-2.8,3.8-10.1,6.4-14.2
c2.6,4.2,6.4,11.5,6.4,14.2C54.9,76,52.1,78.9,48.6,78.9z" />
</svg>
<br> <b>
<p id="forecast-humid" style="color: #36455A; font-size: large;">-</p>
</b>
<p>Humidity</p>
</div>
<div class="col-4" style="color: #6A6F7D; text-align: center; align-items: center;">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 96 96" style="enable-background:new 0 0 96 96; width: 3rem;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #737373;
}
</style>
<path class="st0"
d="M89.5,45.8c0.4-1.5,0.6-3,0.6-4.5c0-9.6-7.8-17.3-17.3-17.3c-1.7,0-3.4,0.2-5,0.7C62.2,13.4,48.6,8.8,37.4,14.3
c-6.4,3.2-11,9.2-12.3,16.3c-6.8,1.1-12,6.6-12.9,13.4c-9,3.3-13.6,13.2-10.3,22.2c2.5,6.9,9,11.4,16.3,11.4h14.6c1.7,0,3-1.3,3-3
s-1.3-3-3-3H18.1c-6.3,0-11.3-5.1-11.3-11.4c0-5.3,3.7-9.9,8.9-11c1.4-0.3,2.4-1.6,2.4-3c0-0.1,0-0.2,0-0.3c0-5.2,4.2-9.5,9.5-9.5
h0.2c1.6,0,2.9-1.2,3-2.8c0.6-9.2,8.6-16.1,17.7-15.5c6.8,0.5,12.6,5,14.7,11.4c0.3,0.8,0.9,1.5,1.8,1.8c0.8,0.3,1.7,0.3,2.5-0.1
c5.6-2.9,12.4-0.7,15.3,4.9c1.6,3,1.7,6.6,0.3,9.7c-0.6,1.4-0.1,3.1,1.3,3.8c5.5,3,7.5,9.9,4.5,15.4c-1.4,2.6-3.8,4.6-6.7,5.4
c-1.6,0.5-2.5,2.2-2,3.7c0.5,1.6,2.2,2.5,3.7,2c9.2-2.8,14.4-12.4,11.6-21.6C94.6,51.1,92.4,48,89.5,45.8z" />
<path class="st0" d="M57.2,59.8H30c-1.7,0-3,1.3-3,3c0,1.7,1.3,3,3,3h27.2c5.2,0,9.4-4.2,9.4-9.4s-4.2-9.4-9.4-9.4
c-3.8,0-7.2,2.3-8.6,5.7c-0.6,1.5,0.1,3.3,1.6,3.9c1.5,0.6,3.3-0.1,3.9-1.6c0.7-1.7,2.7-2.5,4.4-1.8c1.7,0.7,2.5,2.7,1.8,4.4
C59.8,59,58.6,59.8,57.2,59.8z" />
<path class="st0" d="M69.1,71.6H41.8c-1.7,0-3,1.3-3,3s1.3,3,3,3h27.2c1.9,0,3.4,1.5,3.4,3.3c0,1.9-1.5,3.4-3.3,3.4
c-1.4,0-2.6-0.8-3.1-2.1c-0.7-1.5-2.5-2.1-4-1.4c-1.4,0.7-2.1,2.3-1.5,3.8c2,4.8,7.5,7,12.3,5c4.8-2,7-7.5,5-12.3
C76.2,73.9,72.8,71.6,69.1,71.6L69.1,71.6z" />
</svg>
<br> <b>
<p id="forecast-ws" style="color: #36455A; font-size: large;">-</p>
</b>
<p>Wind Speed</p>
</div>
</div>
<!-- </div> -->
<!-- </div> -->
</div>
</div>
</div>
<!-- </div> -->
<script src="index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
<footer>
<div class="container-fluid">
<p style="color: #A1A8B9;">Copyright © 2022 Created by NEXPIE Co., Ltd.</p>
</div>
</footer>
</div>
<!-- </div> -->
<script>
var update_interval = false;
function navigate(tabname) {
var tabpic = [
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" style="width: 40px;"><defs><style>.cls-1{fill:#a1a8b9;}</style></defs><path class="cls-1" d="M29.3,62.2V60.07a3.3,3.3,0,0,0-6.6,0V62.2a10.26,10.26,0,0,0-7.09,9.72v.33A10.25,10.25,0,0,0,25.84,82.47h.32A10.25,10.25,0,0,0,36.39,72.25v-.33A10.26,10.26,0,0,0,29.3,62.2Z"/><circle class="cls-1" cx="26" cy="72.09" r="10.39"/><path class="cls-1" d="M39.43,57.88v-40a13.92,13.92,0,0,0-27.84,0V58.83A19,19,0,0,0,6.17,72.05v.51A19.43,19.43,0,0,0,25.74,91.79h.52A19.43,19.43,0,0,0,45.83,72.56v-.51A18.89,18.89,0,0,0,39.43,57.88Zm-.21,14.68a12.8,12.8,0,0,1-13,12.62h-.52a12.8,12.8,0,0,1-13-12.62v-.51a12.48,12.48,0,0,1,4.3-9.33,3.32,3.32,0,0,0,1.12-2.48V17.91a7.32,7.32,0,0,1,14.63,0v1h-7.5v6.6h7.5v6.73h-7.5v6.61h7.5V45.6h-7.5v6.61h7.5v7.23a3.3,3.3,0,0,0,1.31,2.64,12.42,12.42,0,0,1,5.08,10Z"/><path class="cls-1" d="M72.17,27.45A9,9,0,1,0,65,24,9,9,0,0,0,72.17,27.45Zm-3-9.43a3.08,3.08,0,0,1,3-2.68l.39,0a3,3,0,0,1,2,1.15,3.06,3.06,0,1,1-4.83,3.75A3,3,0,0,1,69.12,18Z"/><path class="cls-1" d="M53.43,70.11A8.35,8.35,0,0,0,63.68,83.3,8.35,8.35,0,0,0,53.43,70.11ZM60.89,77A2.28,2.28,0,0,1,60,78.56a2.35,2.35,0,1,1-2.89-3.71,2.31,2.31,0,0,1,1.44-.5l.3,0a2.34,2.34,0,0,1,2,2.63Z"/><path class="cls-1" d="M86.93,29.45a3.3,3.3,0,1,0,2.87,3.68A3.3,3.3,0,0,0,86.93,29.45Z"/><path class="cls-1" d="M78.61,67.37a3.3,3.3,0,1,0,2.88,3.68A3.31,3.31,0,0,0,78.61,67.37Z"/><path class="cls-1" d="M57.12,10.82a3.31,3.31,0,1,0-3.3-3.31A3.31,3.31,0,0,0,57.12,10.82Z"/><path class="cls-1" d="M51.15,26.23a3.3,3.3,0,1,0-3.31-3.3A3.3,3.3,0,0,0,51.15,26.23Z"/><path class="cls-1" d="M79.1,41.88a3,3,0,0,0-3,2.58H74.78a9.83,9.83,0,0,0-2.1-3.61l.7-1.2a3.07,3.07,0,0,0,1.1.24,3,3,0,0,0,1.5-5.6l-4.46-2.58a3,3,0,0,0-3.35,4.95l-.68,1.18a9.57,9.57,0,0,0-4.17,0l-.68-1.18a3,3,0,0,0-3.35-4.95l-4.46,2.58a3,3,0,0,0,1.5,5.6,3.07,3.07,0,0,0,1.1-.24l.7,1.2A9.83,9.83,0,0,0,56,44.46H54.67a3,3,0,0,0-6,.42V50a3,3,0,0,0,6,.43H56a9.87,9.87,0,0,0,2.1,3.6l-.69,1.19a3,3,0,0,0-2.61,5.37l4.46,2.58a3,3,0,0,0,3.35-5l.68-1.18a9.57,9.57,0,0,0,4.17,0l.68,1.18a3,3,0,0,0,3.35,5L76,60.62a3,3,0,0,0-2.61-5.37l-.69-1.19a9.87,9.87,0,0,0,2.1-3.6h1.36a3,3,0,0,0,6-.43V44.88A3,3,0,0,0,79.1,41.88ZM61.56,47.46A3.85,3.85,0,1,1,65.4,51.3,3.84,3.84,0,0,1,61.56,47.46Z"/></svg>`,
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" style="width: 40px;"><defs><style>.cls-1{fill:#a1a8b9;}</style></defs><path class="cls-1" 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 class="cls-1" cx="47.96" cy="60.02" r="3"/></svg>`,
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" style="width: 40px;"><defs><style>.cls-1{fill:#a1a8b9;}.cls-2{fill:none;}</style></defs><polyline class="cls-1" 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-2" 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 class="cls-1" 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 class="cls-1" 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 class="cls-1" 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>`
];
var tabpicActive = [
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" style="width: 40px;"><defs><style>.cls-1{fill:#4c80f8;}</style></defs><path class="cls-1" d="M29.3,62.2V60.07a3.3,3.3,0,0,0-6.6,0V62.2a10.26,10.26,0,0,0-7.09,9.72v.33A10.25,10.25,0,0,0,25.84,82.47h.32A10.25,10.25,0,0,0,36.39,72.25v-.33A10.26,10.26,0,0,0,29.3,62.2Z"/><circle class="cls-1" cx="26" cy="72.09" r="10.39"/><path class="cls-1" d="M39.43,57.88v-40a13.92,13.92,0,0,0-27.84,0V58.83A19,19,0,0,0,6.17,72.05v.51A19.43,19.43,0,0,0,25.74,91.79h.52A19.43,19.43,0,0,0,45.83,72.56v-.51A18.89,18.89,0,0,0,39.43,57.88Zm-.21,14.68a12.8,12.8,0,0,1-13,12.62h-.52a12.8,12.8,0,0,1-13-12.62v-.51a12.48,12.48,0,0,1,4.3-9.33,3.32,3.32,0,0,0,1.12-2.48V17.91a7.32,7.32,0,0,1,14.63,0v1h-7.5v6.6h7.5v6.73h-7.5v6.61h7.5V45.6h-7.5v6.61h7.5v7.23a3.3,3.3,0,0,0,1.31,2.64,12.42,12.42,0,0,1,5.08,10Z"/><path class="cls-1" d="M72.17,27.45A9,9,0,1,0,65,24,9,9,0,0,0,72.17,27.45Zm-3-9.43a3.08,3.08,0,0,1,3-2.68l.39,0a3,3,0,0,1,2,1.15,3.06,3.06,0,1,1-4.83,3.75A3,3,0,0,1,69.12,18Z"/><path class="cls-1" d="M53.43,70.11A8.35,8.35,0,0,0,63.68,83.3,8.35,8.35,0,0,0,53.43,70.11ZM60.89,77A2.28,2.28,0,0,1,60,78.56a2.35,2.35,0,1,1-2.89-3.71,2.31,2.31,0,0,1,1.44-.5l.3,0a2.34,2.34,0,0,1,2,2.63Z"/><path class="cls-1" d="M86.93,29.45a3.3,3.3,0,1,0,2.87,3.68A3.3,3.3,0,0,0,86.93,29.45Z"/><path class="cls-1" d="M78.61,67.37a3.3,3.3,0,1,0,2.88,3.68A3.31,3.31,0,0,0,78.61,67.37Z"/><path class="cls-1" d="M57.12,10.82a3.31,3.31,0,1,0-3.3-3.31A3.31,3.31,0,0,0,57.12,10.82Z"/><path class="cls-1" d="M51.15,26.23a3.3,3.3,0,1,0-3.31-3.3A3.3,3.3,0,0,0,51.15,26.23Z"/><path class="cls-1" d="M79.1,41.88a3,3,0,0,0-3,2.58H74.78a9.83,9.83,0,0,0-2.1-3.61l.7-1.2a3.07,3.07,0,0,0,1.1.24,3,3,0,0,0,1.5-5.6l-4.46-2.58a3,3,0,0,0-3.35,4.95l-.68,1.18a9.57,9.57,0,0,0-4.17,0l-.68-1.18a3,3,0,0,0-3.35-4.95l-4.46,2.58a3,3,0,0,0,1.5,5.6,3.07,3.07,0,0,0,1.1-.24l.7,1.2A9.83,9.83,0,0,0,56,44.46H54.67a3,3,0,0,0-6,.42V50a3,3,0,0,0,6,.43H56a9.87,9.87,0,0,0,2.1,3.6l-.69,1.19a3,3,0,0,0-2.61,5.37l4.46,2.58a3,3,0,0,0,3.35-5l.68-1.18a9.57,9.57,0,0,0,4.17,0l.68,1.18a3,3,0,0,0,3.35,5L76,60.62a3,3,0,0,0-2.61-5.37l-.69-1.19a9.87,9.87,0,0,0,2.1-3.6h1.36a3,3,0,0,0,6-.43V44.88A3,3,0,0,0,79.1,41.88ZM61.56,47.46A3.85,3.85,0,1,1,65.4,51.3,3.84,3.84,0,0,1,61.56,47.46Z"/></svg>`,
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" style="width: 40px;"><defs><style>.cls-1{fill:#4c80f8;}</style></defs><path class="cls-1" 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 class="cls-1" cx="47.96" cy="60.02" r="3"/></svg>`,
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" style="width: 40px;"><defs><style>.cls-1{fill:#4c80f8;}.cls-2{fill:none;}</style></defs><polyline class="cls-1" 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-2" 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 class="cls-1" 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 class="cls-1" 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 class="cls-1" 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>`
];
console.log(document.getElementById(tabname + "-menu-tab").className);
document.getElementById(tabname + "-menu-tab").className = "active-headertab";
document.getElementById(tabname + "-menu-tab").disabled = true;
document.getElementById(tabname + "-tab-line").style.visibility = "visible";
// document.getElementById(tabname + "-icon").src = "images/" + tabname + "-active.png"
// document.getElementById(tabname + "-icon").style.fill = "#4c80f8";
document.getElementById(tabname + "page").style.display = "inline-block";
var tab = ["home", "camera", "forecast"];
for (let t in tab) {
if (tabname == t) {
document.getElementById(t + "-menu-tab").innerHTML = tabpicActive[t];
continue;
}
document.getElementById(t + "-menu-tab").className = "inactive-headertab";
document.getElementById(t + "-menu-tab").disabled = false;
document.getElementById(t + "-tab-line").style.visibility = "hidden";
document.getElementById(t + "-menu-tab").innerHTML = tabpic[t];
// document.getElementById("forecast-icon").src = "images/forecast.png"
// document.getElementById(t + "-icon").style.fill = "#a1a8b9";
document.getElementById(t + "page").style.display = "none";
console.log(t);
}
}
function capitalize(str) {
str = str.toString();
const lower = str.toLowerCase();
return str.charAt(0).toUpperCase() + lower.slice(1);
}
function hexToRgb(hex) {
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, function (m, r, g, b) { return r + r + g + g + b + b; });
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
function reviseTimeFormat(t) {
var day = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
return day[t.getDay()] + " " + t.getDate().toString() + ", " + month[t.getMonth()];
}
function getData() {
let currentDate = new Date();
$.ajax({
type: "GET",
url: "https://occ-hitachi.nexpie.com/data/z1/sensor.json?time=" + new Date().getTime(),
complete: function (e, xhr, settings) {
switch (e.status) {
case 500: console.log('500 internal server error!'); break;
case 404: console.log('404 Page not found!'); break;
case 401: console.log('401 unauthorized access'); break;
}
}
}).done(function (data) {
var obj = jQuery.parseJSON(data);
if (obj.success == 1) {
$("#home-temperature").text(JSON.stringify(Math.round(obj.data.temperature)));
$("#home-humidity").text(JSON.stringify(Math.round(obj.data.humidity)));
$("#home-pm10").text(JSON.stringify(Math.round(obj.data.pm10dot0)));
$("#home-pm25").text(JSON.stringify(Math.round(obj.data.pm2dot5)));
var pm25state_color = ["#48AB37", "#FFC448", "#FA8200", "#ED1717", "#A3377B", "#7A3138"];
var pm25state_name = ["Good", "Moderate", "Unhealthy for Sensitive Groups", "Unhealthy", "Very Unhealthy", "Hazardous"];
var pm25state_describe = [
"AQI From 0 to 50.<br>Air quality is satisfactory and poses little or no risk, the air is great today.",
"AQI From 51 to 100.<br>Sensitive individuals should avoid outdoor activity.",
"AQI From 101 to 150.<br>Sensitive individuals in particular as irritation and respiratory problems.",
"AQI From 151 to 200.<br>Harmful for sensitive groups, everyone should reduce outdoor activity.",
"AQI From 201 to 300.<br>General public will be noticeable affected. Avoid outdoor activity.",
"AQI From 301.<br>Serious risk of respiratory and cardiovascular effects. Avoid all outdoor activities."
];
var pm25state_value = [51, 101, 151, 201, 301, 999999999];
var pm25state_svg = [
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170.47 170.47" style="justify-content: center; width: 50%; align-items: center;"><defs><style>.cls-1{opacity:0.8;}.cls-2{fill:#4bc53e;}.cls-3{fill:#48ab37;}.cls-4{fill:#61dd49;}.cls-5{fill:#654735;}.cls-6{fill:#2c2c2c;}</style></defs><g class="cls-1"><circle class="cls-2" cx="85.24" cy="85.24" r="85.24" transform="translate(-35.31 85.24) rotate(-45)"/><path class="cls-3" d="M129.83,12.49A85.25,85.25,0,0,1,13.41,131.05,85.24,85.24,0,1,0,129.83,12.49Z"/><path class="cls-4" d="M11.58,94.23A79.13,79.13,0,0,1,153.45,46,79.14,79.14,0,1,0,22.1,133.67,78.75,78.75,0,0,1,11.58,94.23Z"/><path class="cls-5" d="M50.3,98.13a2.82,2.82,0,0,0-4.58,3.07,42.72,42.72,0,0,0,79,.78,2.81,2.81,0,0,0-4.54-3.1C107.72,111,81.24,128.19,50.3,98.13Z"/><path class="cls-6" d="M63.23,73A15.79,15.79,0,0,0,34,72.73a2.54,2.54,0,0,0,4.1,2.81c4.73-4.59,12.21-8.27,21,.25A2.54,2.54,0,0,0,63.23,73Z"/><path class="cls-6" d="M136.46,73a15.79,15.79,0,0,0-29.2-.29,2.54,2.54,0,0,0,4.1,2.81c4.73-4.59,12.21-8.27,21,.25A2.54,2.54,0,0,0,136.46,73Z"/><image width="474" height="179" transform="translate(-28.53 54.93) scale(0.48)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAdoAAACzCAYAAAAuaN2JAAAACXBIWXMAABcRAAAXEQHKJvM/AAAgAElEQVR4Xuy9z3Ikx5H1+/OIzPrTANiCPraalI1dk9FoXLRsVtrdDZ+Cz0Pj8+gpuLm7WY2pFzQZTfd+Y8Ommh+hJoCuqswM97vwiMyswp8GNYLUBOK0VWdWFVAoFPKc4+7hESFmRkVFRUVFRcX9ILzrCyoqKioqKir+flSjraioqKiouEdUo62oqKioqLhHVKOtqKioqKi4R1SjraioqKiouEdUo62oqKioqLhHVKOtqKioqKi4R1SjraioqKiouEdUo62oqKioqLhHVKOtqKioqKi4R1SjraioqKiouEdUo62oqKioqLhHVKOtqKioqKi4R1SjraioqKiouEdUo62oqKioqLhHVKOtqKioqKi4R1SjraioqKiouEdUo62oqKioqLhHVKOtqKioqKi4R1SjraioqKiouEdUo62oqKioqLhHVKOtqKioqKi4R1SjraioqKiouEdUo62oqKioqLhHVKOtqKioqKi4R1SjraioqKiouEdUo62oqKioqLhHVKOtqKioqKi4R1SjraioqKiouEdUo62oqKioqLhHVKOtqKioqKi4R1SjraioqKiouEdUo62oqKioqLhHVKOtqKioqKi4R1SjraioqKiouEdUo62oqKioqLhHVKOtqKioqKi4R1SjraioqKiouEdUo62oqKioqLhHVKOtqKioqKi4R1SjraioqKiouEdUo62oqKioqLhHVKOtqKioqKi4R1SjraioqKiouEdUo62oqKioqLhHVKOtqKioqKi4R1SjraioqKiouEdUo62oqKioqLhHVKOtqKioqKi4RzTv+oKK9wAiMp6b2S1fWVFR8RhQNeEXBal/o38h5mS5FfO/0V2/pf5hKyp+caia8CBRjfafgWvJY/tc+UfjJr7WP3hFxb8eNxnqfdJTxv/2UTXh3lGN9h+N6wh022f81Vd3DEd/Br788vofeB3R6gVQUXH/uKILtwTa/0xNgOuD8qoL/1BUo/1H4JBEh5/prcT5Er685uE//vHdZPvii/0f9NX43/W4jmxX+F8viIqK/zHepQnw83Xh79EE+Pm6UDXhH45qtH8v9oh0EJ1eS6BMnLuQBeDly3d/3YsXd/vjffGFXUu2SrCKin8c3mWu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"/></g></svg>`,
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170.47 170.47" style="justify-content: center; width: 50%; align-items: center;"><defs><style>.cls-1{opacity:0.8;}.cls-2{fill:#ffd053;}.cls-3{fill:#ffc448;}.cls-4{fill:#ffd77a;}.cls-5{fill:#2c2c2c;}.cls-6{fill:#654735;}</style></defs><g class="cls-1"><circle class="cls-2" cx="85.24" cy="85.24" r="85.24" transform="translate(-35.31 85.24) rotate(-45)"/><path class="cls-3" d="M129.83,12.49A85.25,85.25,0,0,1,13.41,131.05,85.24,85.24,0,1,0,129.83,12.49Z"/><path class="cls-4" d="M11.58,94.23A79.13,79.13,0,0,1,153.45,46,79.14,79.14,0,1,0,22.1,133.67,78.75,78.75,0,0,1,11.58,94.23Z"/><path class="cls-5" d="M63.23,73A15.79,15.79,0,0,0,34,72.73a2.54,2.54,0,0,0,4.1,2.81c4.73-4.59,12.21-8.27,21,.25A2.54,2.54,0,0,0,63.23,73Z"/><path class="cls-5" d="M136.46,73a15.79,15.79,0,0,0-29.2-.29,2.54,2.54,0,0,0,4.1,2.81c4.73-4.59,12.21-8.27,21,.25A2.54,2.54,0,0,0,136.46,73Z"/><path class="cls-6" d="M117.9,118.56a34.36,34.36,0,0,0-14.53-11,43.62,43.62,0,0,0-18.09-3.27,46,46,0,0,0-17.78,4.2,40.1,40.1,0,0,0-14.33,10.88,2,2,0,0,0,2.14,3.17l2-.61c4.68-1.44,9.1-2.8,13.52-3.75a79.5,79.5,0,0,1,14.82-1.9,70.57,70.57,0,0,1,14.77,1.11,92.94,92.94,0,0,1,15.2,4.28,2,2,0,0,0,2.29-3.06Z"/></g></svg>`,
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170.47 170.47" style="justify-content: center; width: 50%; align-items: center;"><defs><style>.cls-1{opacity:0.8;}.cls-2{fill:#ff9600;}.cls-3{fill:#fa8200;}.cls-4{fill:#ff9d2e;}.cls-5{fill:#71523f;}.cls-6{fill:#ff6669;}.cls-7{fill:#2c2c2c;}</style></defs><g class="cls-1"><circle class="cls-2" cx="85.24" cy="85.24" r="85.24" transform="translate(-12.55 155.72) rotate(-80.78)"/><path class="cls-3" d="M129.83,12.49A85.25,85.25,0,0,1,13.41,131.05,85.24,85.24,0,1,0,129.83,12.49Z"/><path class="cls-4" d="M11.58,94.23A79.13,79.13,0,0,1,153.45,46,79.14,79.14,0,1,0,22.1,133.67,78.75,78.75,0,0,1,11.58,94.23Z"/><path class="cls-5" d="M121.46,126.1a36.46,36.46,0,0,0-72.45,0Z"/><path class="cls-6" d="M49,126.1s30.57-22.54,72.45,0Z"/><path class="cls-7" d="M39.26,86.61A3.61,3.61,0,0,1,37,80.15l12.29-9.58L36.62,63.1a3.62,3.62,0,1,1,3.67-6.23L57.58,67A3.61,3.61,0,0,1,58,73L41.48,85.85A3.62,3.62,0,0,1,39.26,86.61Z"/><path class="cls-7" d="M131.21,86.61a3.64,3.64,0,0,1-2.22-.76L112.51,73a3.6,3.6,0,0,1,.39-6l17.29-10.17a3.61,3.61,0,0,1,3.66,6.23l-12.71,7.47,12.3,9.58a3.61,3.61,0,0,1-2.23,6.46Z"/></g></svg>`,
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170.47 170.47" style="justify-content: center; width: 50%; align-items: center;"><defs><style>.cls-1{opacity:0.8;}.cls-2{fill:#ff2019;}.cls-3{fill:#ed1717;}.cls-4{fill:#ff3535;}.cls-5{fill:#2c2c2c;}.cls-6{fill:#654735;}</style></defs><g class="cls-1"><circle class="cls-2" cx="85.24" cy="85.24" r="85.24" transform="translate(-12.55 155.72) rotate(-80.78)"/><path class="cls-3" d="M129.83,12.49A85.25,85.25,0,0,1,13.41,131.05,85.24,85.24,0,1,0,129.83,12.49Z"/><path class="cls-4" d="M11.58,94.23A79.13,79.13,0,0,1,153.45,46,79.14,79.14,0,1,0,22.1,133.67,78.75,78.75,0,0,1,11.58,94.23Z"/><ellipse class="cls-5" cx="53.83" cy="69.37" rx="6.28" ry="10.59"/><path class="cls-5" d="M122.92,69.37c0,5.85-2.81,10.59-6.28,10.59s-6.28-4.74-6.28-10.59,2.81-10.58,6.28-10.58S122.92,63.53,122.92,69.37Z"/><path class="cls-6" d="M120.17,123.12a2.82,2.82,0,0,0,4.58-3.07,42.72,42.72,0,0,0-79-.78,2.81,2.81,0,0,0,4.54,3.1C62.75,110.27,89.23,93.06,120.17,123.12Z"/><rect class="cls-5" x="55.1" y="34.48" width="8.08" height="26.97" transform="translate(-16.59 55.87) rotate(-45)"/><rect class="cls-5" x="107.29" y="34.48" width="8.08" height="26.97" transform="translate(66.52 -64.67) rotate(45)"/></g></svg>`,
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170.47 170.47" style="justify-content: center; width: 50%; align-items: center;"><defs><style>.cls-1{opacity:0.8;}.cls-2{fill:#c3428d;}.cls-3{fill:#a3377b;}.cls-4{fill:#be5595;}.cls-5{fill:#2c2c2c;}.cls-6{fill:#654735;}</style></defs><g class="cls-1"><circle class="cls-2" cx="85.24" cy="85.24" r="85.24" transform="translate(-35.31 85.24) rotate(-45)"/><path class="cls-3" d="M129.83,12.49A85.25,85.25,0,0,1,13.41,131.05,85.24,85.24,0,1,0,129.83,12.49Z"/><path class="cls-4" d="M11.58,94.23A79.13,79.13,0,0,1,153.45,46,79.14,79.14,0,1,0,22.1,133.67,78.75,78.75,0,0,1,11.58,94.23Z"/><path class="cls-5" d="M39.26,83.24A3.61,3.61,0,0,1,37,76.78L49.33,67.2,36.62,59.73a3.62,3.62,0,1,1,3.67-6.23L57.58,63.67a3.61,3.61,0,0,1,.39,6L41.48,82.48A3.62,3.62,0,0,1,39.26,83.24Z"/><path class="cls-5" d="M131.21,83.24a3.64,3.64,0,0,1-2.22-.76L112.51,69.63a3.6,3.6,0,0,1,.39-6L130.19,53.5a3.61,3.61,0,0,1,3.66,6.23L121.14,67.2l12.3,9.58a3.61,3.61,0,0,1-2.23,6.46Z"/><path class="cls-6" d="M114.61,96.15a3.53,3.53,0,0,1,2.73,1.3l11.53,14.33a3.5,3.5,0,1,1-5.45,4.39l-8.55-10.61-12,18a3.51,3.51,0,0,1-2.91,1.56h0A3.48,3.48,0,0,1,97,123.59L85.24,106,73.45,123.59a3.48,3.48,0,0,1-2.91,1.56h0a3.51,3.51,0,0,1-2.91-1.56l-12-18-8.54,10.61a3.5,3.5,0,0,1-5.46-4.39L53.14,97.45a3.49,3.49,0,0,1,5.63.26l11.77,17.64L82.33,97.7a3.51,3.51,0,0,1,5.82,0l11.78,17.65L111.7,97.71a3.5,3.5,0,0,1,2.75-1.56Z"/></g></svg>`,
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170.47 170.47" style="justify-content: center; width: 50%; align-items: center;"><defs><style>.cls-1{opacity:0.8;}.cls-2{fill:#963b41;}.cls-3{fill:#7a3138;}.cls-4{fill:#ad454f;}.cls-5{fill:#2c2c2c;}</style></defs><g class="cls-1"><circle class="cls-2" cx="85.24" cy="85.24" r="85.24" transform="translate(-35.31 85.24) rotate(-45)"/><path class="cls-3" d="M129.83,12.49A85.25,85.25,0,0,1,13.41,131.05,85.24,85.24,0,1,0,129.83,12.49Z"/><path class="cls-4" d="M11.58,94.23A79.13,79.13,0,0,1,153.45,46,79.14,79.14,0,1,0,22.1,133.67,78.75,78.75,0,0,1,11.58,94.23Z"/><path class="cls-5" d="M138,111c-2.26-7.36-7.77-12.12-14-12.12a12.62,12.62,0,0,0-6.79,2,17.67,17.67,0,0,0-3.87,3.75c-.56.66-1.08,1.28-1.64,1.85a11.73,11.73,0,0,1-4.15,2.65A9.43,9.43,0,0,1,97,105.77c-3-4.36-7.33-6.86-11.76-6.86A13,13,0,0,0,76,103.07a20.77,20.77,0,0,0-1.75,2,19,19,0,0,1-1.41,1.67,11.5,11.5,0,0,1-3.39,2.11,8.45,8.45,0,0,1-4.9.78,11,11,0,0,1-5.88-3.15c-.51-.53-1-1.11-1.55-1.73a19.21,19.21,0,0,0-4.07-3.89,12.64,12.64,0,0,0-6.71-2c-6.12,0-11.58,4.62-13.91,11.78a2.89,2.89,0,0,0,1.26,3.42,2.3,2.3,0,0,0,3-.66c2.93-3.69,7.79-7,12.66-5.34,2.39.83,4.37,3,6,5a14,14,0,0,0,8.7,5.12,11.59,11.59,0,0,0,1.66.12,13.77,13.77,0,0,0,10.64-5.58l.51-.66a10,10,0,0,1,7.21-4.55,8.38,8.38,0,0,1,4.81.88A14,14,0,0,1,91.3,110a18.07,18.07,0,0,1,2.39,2.51,21.16,21.16,0,0,0,2.79,2.9,12.34,12.34,0,0,0,16.88-.77c.39-.37,1.07-1.08,1.86-1.91,1-1.08,2.94-3.08,3.41-3.4a9,9,0,0,1,11,.28,22,22,0,0,1,4.16,4.15,2.31,2.31,0,0,0,2.95.67A2.85,2.85,0,0,0,138,111Z"/><rect class="cls-5" x="41.29" y="50.63" width="7.8" height="35.14" transform="translate(-34.99 51.93) rotate(-45)"/><rect class="cls-5" x="41.29" y="50.63" width="7.8" height="35.14" transform="translate(61.46 -11.98) rotate(45)"/><rect class="cls-5" x="121.38" y="50.63" width="7.8" height="35.14" transform="translate(-11.53 108.56) rotate(-45)"/><rect class="cls-5" x="121.38" y="50.63" width="7.8" height="35.14" transform="translate(84.92 -68.61) rotate(45)"/></g></svg>`
];
for (var i = 0; i < pm25state_value.length; i++) {
if (obj.data.pm2dot5 < pm25state_value[i]) {
var rgb = hexToRgb(pm25state_color[i]);
console.log(`(${rgb.r},${rgb.g},${rgb.b},.3)`);
document.getElementById("airquality-value").style.backgroundColor = `rgba(${rgb.r},${rgb.g},${rgb.b},0.3)`
document.getElementById("pm25state").style.backgroundColor = pm25state_color[i];
document.getElementById("pm25state").innerHTML = pm25state_name[i];
document.getElementById("pm25describe").innerHTML = pm25state_describe[i];
document.getElementById("home-pm25-pic").innerHTML = pm25state_svg[i];
console.log(pm25state_color[i], pm25state_name[i]);
break;
}
}
console.log(obj.data)
}
});
}
function getCamera() {
$("#cam01").attr('src', 'https://occ-hitachi.nexpie.com/data/z1/cam1.png?time=' + new Date().getTime());
$("#cam02").attr('src', 'https://occ-hitachi.nexpie.com/data/z1/cam2.png?time=' + new Date().getTime());
$("#cam03").attr('src', 'https://occ-hitachi.nexpie.com/data/z1/cam3.png?time=' + new Date().getTime());
$("#cam04").attr('src', 'https://occ-hitachi.nexpie.com/data/z1/cam4.png?time=' + new Date().getTime());
$("#cam05").attr('src', 'https://occ-hitachi.nexpie.com/data/z1/cam5.png?time=' + new Date().getTime());
$("#cam06").attr('src', 'https://occ-hitachi.nexpie.com/data/z1/cam6.png?time=' + new Date().getTime());
var date_show = new Date().toLocaleString();
console.log(date_show);
$("#camera01-time").text(date_show);
$("#camera02-time").text(date_show);
$("#camera03-time").text(date_show);
$("#camera04-time").text(date_show);
$("#camera05-time").text(date_show);
$("#camera06-time").text(date_show);
}
function getForecast() {
$.ajax({
type: "GET",
url: "https://occ-hitachi.nexpie.com/data/z1/forecast.json?time=" + new Date().getTime(),
complete: function (e, xhr, settings) {
switch (e.status) {
case 500:
console.log('500 internal server error!');
break;
case 404:
console.log('404 Page not found!');
break;
case 401:
console.log('401 unauthorized access');
break;
}
}
}).done(function (data) {
var obj = data;
if (typeof data == "string") {
obj = jQuery.parseJSON(data);
}
console.log(obj);
if (obj.success == 1) {
var now = Date.now();
var dt, location, temperature, precip, humid, ws, pic, description;
for (let d in obj.data.list) {
console.log(obj.data.list[d].dt * 1000, now);
if (obj.data.list[d].dt * 1000 > now) {
dt = obj.data.list[d].dt;
location = obj.data.city.name;
temperature = obj.data.list[d].main["temp"] - 273.15;
precip = obj.data.list[d].clouds["all"];
humid = obj.data.list[d].main["humidity"]
ws = obj.data.list[d].wind["speed"];
pic = obj.data.list[d].weather[0]["icon"] + ".png";
description = obj.data.list[d].weather[0]["description"]
console.log(pic, description);
break;
}
}
document.getElementById("forecast-location").innerText = location;
document.getElementById("forecasttime").innerText = reviseTimeFormat(new Date(dt * 1000));
document.getElementById("forecast-pic").src = "icon/" + pic;
$("#forecast-description").text(capitalize(description));
$("#forecast-temperature").text(Math.round(temperature).toString());
// $("#forecast-precip").text(precip.toString() + " %");
$("#forecast-humid").text(humid.toString() + " %");
$("#forecast-ws").text(ws.toString() + " km/h");
}
});
}
function showtime() {
document.getElementById("showtime").innerText = reviseTimeFormat(new Date());
}
function updateHTML() {
if (new Date().getMinutes() == 0 && !update_interval) {
getCamera();
getData();
getForecast();
showtime();
update_interval = true;
console.log("It's time to update!");
} else if (new Date().getMinutes() != 0 && update_interval) {
update_interval = false;
}
}
function init() {
getCamera();
getData();
getForecast();
showtime();
navigate('home');
console.log("init")
setInterval(updateHTML, 1000);
}
init();
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
</body>
<footer>
<div class="container-fluid">
<p style="color: #A1A8B9;">Copyright © 2022 Created by NEXPIE Co., Ltd.</p>
</div>
</footer>
</html>
\ No newline at end of file
index.js deleted 100644 → 0
var update_interval = false;
function navigate(tabname) {
document.getElementById(tabname + "-menu-tab").className = "active-headertab";
document.getElementById(tabname + "-menu-tab").disabled = true;
document.getElementById(tabname + "-tab-line").style.visibility = "visible";
document.getElementById(tabname + "-icon").src = "images/" + tabname + "-active.png"
document.getElementById(tabname + "page").style.display = "inline-block";
if (tabname == "home") {
document.getElementById("camera-menu-tab").className = "inactive-headertab";
document.getElementById("forecast-menu-tab").className = "inactive-headertab";
document.getElementById("camera-menu-tab").disabled = false;
document.getElementById("forecast-menu-tab").disabled = false;
document.getElementById("camera-tab-line").style.visibility = "hidden";
document.getElementById("forecast-tab-line").style.visibility = "hidden";
document.getElementById("camera-icon").src = "images/camera.png"
document.getElementById("forecast-icon").src = "images/forecast.png"
document.getElementById("camerapage").style.display = "none";
document.getElementById("forecastpage").style.display = "none";
} else if (tabname == "camera") {
document.getElementById("home-menu-tab").className = "inactive-headertab";
document.getElementById("forecast-menu-tab").className = "inactive-headertab";
document.getElementById("home-menu-tab").disabled = false;
document.getElementById("forecast-menu-tab").disabled = false;
document.getElementById("home-tab-line").style.visibility = "hidden";
document.getElementById("forecast-tab-line").style.visibility = "hidden";
document.getElementById("home-icon").src = "images/home.png"
document.getElementById("forecast-icon").src = "images/forecast.png"
document.getElementById("homepage").style.display = "none";
document.getElementById("forecastpage").style.display = "none";
} else if (tabname == "forecast") {
document.getElementById("camera-menu-tab").className = "inactive-headertab";
document.getElementById("home-menu-tab").className = "inactive-headertab";
document.getElementById("camera-menu-tab").disabled = false;
document.getElementById("home-menu-tab").disabled = false;
document.getElementById("camera-tab-line").style.visibility = "hidden";
document.getElementById("home-tab-line").style.visibility = "hidden";
document.getElementById("camera-icon").src = "images/camera.png"
document.getElementById("home-icon").src = "images/home.png"
document.getElementById("camerapage").style.display = "none";
document.getElementById("homepage").style.display = "none";
}
console.log(tabname);
}
function startTime() {
document.getElementById("showtime").innerHTML = (new Date(Date.now())).toLocaleDateString();
console.log("time!");
setTimeout(startTime, 1000);
}
function capitalize (str) {
str = str.toString();
const lower = str.toLowerCase();
return str.charAt(0).toUpperCase() + lower.slice(1);
}
function getData() {
let currentDate = new Date();
console.log(currentDate + " sync data updated.");
//-- Update sensors value
$.ajax({
type: "GET",
url: "https://occ-hitachi.nexpie.com/data/z1/sensor.json?time="+new Date().getTime(),
complete: function(e, xhr, settings){
switch(e.status){
case 500:
console.log('500 internal server error!');
break;
case 404:
console.log('404 Page not found!');
break;
case 401:
console.log('401 unauthorized access');
break;
}
}
}).done(function( data ) {
var obj = jQuery.parseJSON(data);
if (obj.success == 1){
$("#home-temperature").text(JSON.stringify(Math.round(obj.data.temperature)));
$("#home-humidity").text(JSON.stringify(Math.round(obj.data.humidity)));
$("#home-pm10").text(JSON.stringify(Math.round(obj.data.pm10dot0)));
$("#home-pm25").text(JSON.stringify(Math.round(obj.data.pm2dot5)));
var pm25state_color = ["#80C355", "#F5EC43", "#F9941B", "#E92026", "#B1498E", "#994544"];
var pm25state_name = ["Good", "Moderate", "Unhealthy for Sensitive Groups", "Unhealthy", "Very Unhealthy", "Hazardous"];
var pm25state_describe = [
"AQI From 0 to 50.<br>Air quality is satisfactory and poses little or no risk, the air is great today.",
"AQI From 51 to 100.<br>Sensitive individuals should avoid outdoor activity.",
"AQI From 101 to 150.<br>Sensitive individuals in particular as irritation and respiratory problems.",
"AQI From 151 to 200.<br>Harmful for sensitive groups, everyone should reduce outdoor activity.",
"AQI From 201 to 300.<br>General public will be noticeable affected. Avoid outdoor activity.",
"AQI From 301.<br>Serious risk of respiratory and cardiovascular effects. Avoid all outdoor activities."
];
var pm25state_value = [51, 101, 151, 201, 301, 999999999];
for (var i = 0; i < pm25state_value.length; i++) {
if (obj.data.pm2dot5 < pm25state_value[i]) {
document.getElementById("pm25state").style.backgroundColor = pm25state_color[i];
document.getElementById("pm25state").innerHTML = pm25state_name[i];
document.getElementById("pm25describe").innerHTML = pm25state_describe[i];
document.getElementById("home-pm25-pic").src = "icon/pm" + (i+1).toString() + ".png";
console.log(pm25state_color[i], pm25state_name[i]);
break;
}
}
console.log(obj.data)
}
});
}
function getCamera() {
$("#cam01").attr('src','https://occ-hitachi.nexpie.com/data/z1/cam1.png?time='+new Date().getTime());
$("#cam02").attr('src','https://occ-hitachi.nexpie.com/data/z1/cam2.png?time='+new Date().getTime());
$("#cam03").attr('src','https://occ-hitachi.nexpie.com/data/z1/cam3.png?time='+new Date().getTime());
$("#cam04").attr('src','https://occ-hitachi.nexpie.com/data/z1/cam4.png?time='+new Date().getTime());
$("#cam05").attr('src','https://occ-hitachi.nexpie.com/data/z1/cam5.png?time='+new Date().getTime());
$("#cam06").attr('src','https://occ-hitachi.nexpie.com/data/z1/cam6.png?time='+new Date().getTime());
var date_show = new Date().toLocaleString();
console.log(date_show);
$("#camera01-time").text(date_show);
$("#camera02-time").text(date_show);
$("#camera03-time").text(date_show);
$("#camera04-time").text(date_show);
$("#camera05-time").text(date_show);
$("#camera06-time").text(date_show);
}
function getForecast() {
$.ajax({
type: "GET",
url: "https://occ-hitachi.nexpie.com/data/z1/forecast.json?time="+new Date().getTime(),
complete: function(e, xhr, settings){
switch(e.status){
case 500:
console.log('500 internal server error!');
break;
case 404:
console.log('404 Page not found!');
break;
case 401:
console.log('401 unauthorized access');
break;
}
}
}).done(function( data ) {
var obj = data;
if (typeof data == "string") {
obj = jQuery.parseJSON(data);
}
console.log(obj);
if (obj.success == 1){
var now = Date.now();
var temperature, precip, humid, ws, pic, description;
for (let d in obj.data.list) {
console.log(obj.data.list[d].dt * 1000, now);
if (obj.data.list[d].dt * 1000 > now) {
temperature = obj.data.list[d].main["temp"] - 273.15;
precip = obj.data.list[d].clouds["all"];
humid = obj.data.list[d].main["humidity"]
ws = obj.data.list[d].wind["speed"];
pic = obj.data.list[d].weather[0]["icon"] + ".png";
description = obj.data.list[d].weather[0]["description"]
console.log(pic, description);
break;
}
}
document.getElementById("forecast-pic").src = "icon/" + pic;
$("#forecast-description").text(capitalize(description));
$("#forecast-temperature").text(Math.round(temperature).toString());
$("#forecast-precip").text(precip.toString() + " %");
$("#forecast-humid").text(humid.toString() + " %");
$("#forecast-ws").text(ws.toString() + " km/h");
}
});
}
function showtime() {
// Get today's date and time
var now = new Date();
var day = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var date_show = day[now.getDay()] + " " + now.getDate().toString() + ", " + month[now.getMonth()];
console.log(date_show);
document.getElementById("forecasttime").innerText = date_show;
document.getElementById("showtime").innerText = date_show;
}
function updateHTML() {
if (new Date().getMinutes == 0 && !update_interval) {
getCamera();
getData();
getForecast();
showtime();
update_interval = true;
console.log("It's time to update!");
} else if (new Date().getMinutes != 0 && update_interval) {
update_interval = false;
}
}
function init() {
getCamera();
getData();
getForecast();
showtime();
console.log("init")
setInterval(updateHTML, 1000);
}
init();
// Update the count down every 1 second
// setInterval(showtime, 1000);
// setInterval(getData, 5000);
// setInterval(getCamera, 5000);
// setInterval(getForecast, 3600000);
readme.md deleted 100644 → 0
เว็บ 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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment