Skip to content

H
hitachi-weather
Commit fd5e4500 by Kornkitt Poolsup
Options

float all contents in the center

parent 88530b45
Showing with 54 additions and 27 deletions
css/main.css
......@@ -60,7 +60,7 @@ button.headertab {
background-color: #FFFFFF;
border-width: 0em;
font-family: Poppins;
font-weight: Medium;
font-weight: bold;
font-size: 14px;
width: 100%;
white-space: normal;
......@@ -68,9 +68,9 @@ button.headertab {
.tab-line {
width: 100%;
height: 25%;
align-items: center;
justify-content: center;
height: 15%;
align-items: flex-end;
justify-content: end;
background: #4C80F8;
border-radius: 6px 6px 0px 0px;
......
index.html
......@@ -9,9 +9,9 @@
<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" />
<script src="index.js"></script>
<nav class="navbar shadow-sm p-3 bg-body rounded" style="background-color: #FFFFFF; width: 100%;" >
<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>
......@@ -22,7 +22,7 @@
<hr>
<div class="container-fluid">
<div class="row" style="width: 100%;">
<div class="row" style="width: 100%; vertical-align: middle;">
<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> -->
......@@ -58,7 +58,7 @@
<!-- <div class="container-fluid"> -->
<!-- Homepage -->
<div class="container-fluid mt-3" id="homepage" style="display: inline-block;">
<div class="row row-flex" style="width: 100%; color: #36455A;">
<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">
......@@ -111,45 +111,45 @@
<!-- Camera page -->
<div class="container-fluid mt-3" id="camerapage" style="display: none;">
<div class="row row-flex" style="width: 100%;">
<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" class="card-img-top" width="100%">
<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>
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
<img id="cam02" class="card-img-top" width="100%">
<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-1 bg-body rounded" style="border-width: 0px;">
<img id="cam03" class="card-img-top" width="100%">
<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-2 bg-body rounded" style="border-width: 0px;">
<img id="cam04" class="card-img-top" width="100%">
<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="cam05" class="card-img-top" width="100%">
<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="cam06" onloadstart="getCamera()" class="card-img-top" width="100%">
<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>
......@@ -162,7 +162,7 @@
<!-- Forecast page -->
<div class="container-fluid mt-3" id="forecastpage" style="display: none;">
<div class="row row-flex" style="width: 100%;">
<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>
......@@ -174,9 +174,9 @@
<p id="forecast-description" style="display: block;"></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">
<!-- <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>
......@@ -193,10 +193,10 @@
<p>Wind Speed</p>
</div>
</div>
</div>
<!-- </div> -->
</div>
<!-- </div> -->
</div>
</div>
......@@ -204,6 +204,7 @@
</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>
......
index.js
var update_interval = false;
function navigate(tabname) {
document.getElementById(tabname + "-menu-tab").className = "active-headertab";
document.getElementById(tabname + "-menu-tab").disabled = true;
......@@ -206,11 +208,24 @@ function showtime() {
var date_show = day[now.getDay()] + " " + now.getDate().toString() + ", " + month[now.getMonth()];
console.log(date_show);
$("#forecasttime").text(date_show);
$("#showtime").text(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();
......@@ -218,13 +233,15 @@ function init() {
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);
// setInterval(showtime, 1000);
// setInterval(getData, 5000);
// setInterval(getCamera, 5000);
// setInterval(getForecast, 3600000);
readme.md 0 → 100644
เว็บ 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