float all contents in the center

fd5e4500 · Kornkitt Poolsup · 88530b45 · fd5e4500 · fd5e4500 · fd5e4500
Commit fd5e4500 authored Sep 14, 2022 by Kornkitt Poolsup
Show whitespace changes
Inline Side-by-side

Showing with 54 additions and 27 deletions

css/main.css
+4 -4

index.html
+18 -17

index.js
+23 -6

readme.md
+9 -0

No files found.
--- a/css/main.css
+++ b/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%;
+  height: 15%;
-  align-items: center;
+  align-items: flex-end;
-  justify-content: center;
+  justify-content: end;
  background: #4C80F8;
  border-radius: 6px 6px 0px 0px;

--- a/index.html
+++ b/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="card-body"> -->
-              <div class="container-fluid">
+              <!-- <div class="container-fluid"> -->
-                <div class="row">
+                <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>

--- a/index.js
+++ b/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);
+    document.getElementById("forecasttime").innerText = date_show;
-    $("#showtime").text(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(showtime, 1000);
-setInterval(getData, 5000);
+// setInterval(getData, 5000);
-setInterval(getCamera, 5000);
+// setInterval(getCamera, 5000);
-setInterval(getForecast, 3600000);
+// setInterval(getForecast, 3600000);
--- a/readme.md
+++ b/readme.md
+เว็บ weather ของ hitachi
+/ เปลี่ยน title ตรง HitaChi เป็น One City Center Building
+- แต่ละหน้าให้อัพเดททุกๆ 1 ชั่วโมง รอบการอัพเดท คือ นาทีที่ 0 ของ ชั่วโมงนั้นๆ เข่น 08.00, 09.00 ฝั่งอัพเดทข้อมูล json จะปรับตามให้เวลาอัพเดทใกล้เคียงกันก่อนหน้าแสดงผลจะมาโหลดข้อมูล
+- style ปรับให้สัดส่วนลงตัวตามที่ออกแบบไว้ และรายละเอียดความหนาบางขนาดแต่ละจุดเมื่อมีการเปลี่ยนแปลง เช่น กดปุ่มเมนูอะไรเปลี่ยนบ้าง, ขนาดหน้าจอใหญ่เล็ก อะไรต้องขยับขนาดตามด้วย ถ้าหน้าจอใหญ่มาก กำหนดความกว้างจอใหญ่สุดตามความเหมาะสม
+/ รูปภาพแนะนำให้แปะ src เข้าไว้แต่แรกเลยเวลาเข้าหน้าจะได้ไม่เจอภาพว่างเปล่า
+- jQuery ถ้า script ไม่เวิร์คในบางครั้งก็ใข้ document.getElemen... แบบธรรมดาก็ได้(ลองเช็คความเหมาะสม เพราะบาง browser เวอร์ชั่นมีผล)
+* เปลี่ยนคำ title ขอให้แก้ทันทีนะ ส่วนข้ออื่นขอแก้มาดูวันศุกร์ก่อน ถ้าติดอะไรลองถามทีม front ดูเผื่อมีคำแนะนำ
\ No newline at end of file