Skip to content

H
hitachi-weather
Commit 35bd0d3e by Kornkitt Poolsup
Options

layout fixed

parent b1c944a6
Showing with 89 additions and 50 deletions
index.html
......@@ -4,7 +4,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>One City Center Building</title>
<title>OneCityCentre Bangkok</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">
......@@ -97,6 +97,20 @@
flex-grow: 0;
}
.column-line {
width: 24px;
height: 0px;
border: 1px solid #A1A8B9;
transform: rotate(90deg);
/* Inside auto layout */
flex: none;
order: 3;
flex-grow: 0;
}
.text-title-in-card {
color: rgba(54, 69, 90, 1);
font-family: Poppins;
......@@ -171,7 +185,7 @@
}
</style>
<nav class="navbar shadow-sm mt-2 bg-body rounded"
<nav class="navbar shadow-sm 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>
......@@ -187,13 +201,13 @@
<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>
<!-- <defs>
<style>
.cls-1 {
fill: #4c80f8;
}
</style>
</defs>
</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" />
......@@ -215,13 +229,32 @@
</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>
<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>
<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>
......@@ -236,58 +269,60 @@
<body>
<!-- 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"
<div class="row row-flex mb-3" style="color: #36455A;">
<div class="col-12">
<div class="card shadow-sm p-3 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>
<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>
<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">
<span id="pm25state" class="badge rounded-pill text-light"
style="background-color: #A1A8B9; font-weight: 500; align-items: center;">-</span>
<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>
</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 id="airquality-value" style="text-align: center; display: block; border-radius: 6px;">
<div class="row">
<div class="col justify-content-center" id="home-pm25-pic" style="align-items: center; display: flex; justify-items: 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="col justify-content-center" style="align-items: center; display: flex; justify-items: center;">
<span id="pm25state" class="badge rounded-pill text-light"
style="background-color: #A1A8B9; font-weight: 500; align-items: center; font-size: medium;">-</span>
</div>
</div>
</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>
<div class="row row-flex" style="color: #36455A;">
......@@ -491,6 +526,7 @@
</b>
<p>Precipitation</p>
</div>
<!-- <div class="column-line"></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">
......@@ -514,6 +550,7 @@
</b>
<p>Humidity</p>
</div>
<!-- <div class="column-line" style="display: inline;"></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">
......@@ -557,12 +594,14 @@
var update_interval = false;
function navigate(tabname) {
// a1a8b9
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>`
];
// 4c80f8
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>`,
......@@ -615,7 +654,7 @@
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()];
return t ? day[t.getDay()] + " " + t.getDate().toString() + ", " + month[t.getMonth()] : "-";
}
function getData() {
......@@ -746,7 +785,7 @@
break;
}
}
document.getElementById("forecast-location").innerText = location;
document.getElementById("forecast-location").innerText = location || "-";
document.getElementById("forecasttime").innerText = reviseTimeFormat(new Date(dt * 1000));
document.getElementById("forecast-pic").src = "icon/" + pic;
......
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