diff --git a/Frontend/_sysMonAll.html b/Frontend/_sysMonAll.html
new file mode 100644
index 0000000..b5904df
--- /dev/null
+++ b/Frontend/_sysMonAll.html
@@ -0,0 +1,252 @@
+
+
+
+
+
+
+
+
+
+ 19F 門口東
+
+
+
+
+ 19F 戶外門口中間
+
+
+
+
+
+
+
+
+ 21F 電錶01
+
+
+
+
+ 21F 電錶02
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Frontend/_sysMonFloor.html b/Frontend/_sysMonFloor.html
new file mode 100644
index 0000000..a1f9ae3
--- /dev/null
+++ b/Frontend/_sysMonFloor.html
@@ -0,0 +1,243 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Frontend/_systemMonitor.html b/Frontend/_systemMonitor.html
index 1abd3ee..5cf2d1d 100644
--- a/Frontend/_systemMonitor.html
+++ b/Frontend/_systemMonitor.html
@@ -7,259 +7,32 @@
電錶系統
-
-
-
+
+
+
-
-
-
-
-
-
-
- 19F 門口東
-
-
-
-
- 19F 戶外門口中間
-
-
-
-
-
-
-
-
- 21F 電錶01
-
-
-
-
- 21F 電錶02
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
\ No newline at end of file
diff --git a/Frontend/css/site.css b/Frontend/css/site.css
new file mode 100644
index 0000000..8b2a49b
--- /dev/null
+++ b/Frontend/css/site.css
@@ -0,0 +1,124 @@
+
+.mod-skin-dark:not(.mod-skin-light) .panel-hdr, .mod-skin-dark:not(.mod-skin-light) .card-header {
+ background: rgba(0, 0, 0, 0.03);
+}
+
+
+/* ================================================================ */
+/* 單一方法 */
+/* ================================================================ */
+
+:root {
+ --yt-main-gray: #c2c7d0;
+ --yt-main-black: #212529;
+ --yt-main-gray-hover: #c2c7d0;
+ --yt-gray: #505050;
+ --yt-gray-hover: #3c3c3c;
+ --yt-gray-2: #8f8c8c;
+ --yt-gray-2-hover: #646060;
+ --yt-gray-3: #ededed;
+ --yt-gray-4: #dddddd;
+ --yt-pink: #ff95d0;
+ --yt-pink-hover: #ef84c0;
+ --yt-red-2:#d34949;
+ --yt-yellow-1:#ffc902;
+}
+
+/* cursor */
+.cur-def { cursor:default !important;}
+.cur-poi { cursor:pointer !important;}
+
+/*left 距離*/
+.left-05 { left: 0.5rem !important; }
+.left-04 { left: 0.4rem !important; }
+.left-03 { left: 0.3rem !important; }
+.left-02 { left: 0.2rem !important; }
+.left-01 { left: 0.1rem !important; }
+
+/*right 距離*/
+.right-05 { right: 0.5rem !important; }
+.right-04 { right: 0.4rem !important; }
+.right-03 { right: 0.3rem !important; }
+.right-02 { right: 0.2rem !important; }
+.right-01 { right: 0.1rem !important; }
+
+/*bottom 0.5rem*/
+.bm-05 { bottom: 0.5rem !important; }
+.bm-04 { bottom: 0.4rem !important; }
+.bm-03 { bottom: 0.3rem !important; }
+.bm-02 { bottom: 0.2rem !important; }
+.bm-01 { bottom: 0.1rem !important; }
+
+/*top 0.5rem*/
+.tp-05 { top: 0.5rem !important; }
+.tp-04 { top: 0.4rem !important; }
+.tp-03 { top: 0.3rem !important; }
+.tp-02 { top: 0.2rem !important; }
+.tp-01 { top: 0.1rem !important; }
+
+/* font-weight */
+.fw-1 { font-weight: 100; }
+.fw-2 { font-weight: 200; }
+.fw-3 { font-weight: 300; }
+.fw-4 { font-weight: 400; }
+.fw-5 { font-weight: 500; }
+.fw-6 { font-weight: 600; }
+.fw-7 { font-weight: 700; }
+.fw-8 { font-weight: 800; }
+.fw-9 { font-weight: 900; }
+
+/* font-size */
+.fs-05 { font-size: 0.5rem; }
+.fs-075 { font-size: 0.75rem; }
+.fs-09 { font-size: 0.9rem; }
+.fs-1-05 { font-size: 1.05rem; }
+.fs-1-1 { font-size: 1.1rem; }
+.fs-1-2 { font-size: 1.2rem; }
+.fs-1-3 { font-size: 1.3rem; }
+.fs-1-5 { font-size: 1.5rem; }
+.fs-2 { font-size: 2rem; }
+.fs-2-5 { font-size: 2.5rem; }
+
+/* border width */
+.bd-0 { border-width: 0px; }
+.bd-1 { border-width: 1px; }
+.bd-2 { border-width: 2px; }
+
+/* border direction */
+.bd-l { border-left-style:solid;}
+.bd-r { border-right-style:solid;}
+.bd-t { border-top-style:solid;}
+.bd-b { border-bottom-style:solid;}
+
+/* border radius */
+.br-1 { border-radius: 1px; }
+.br-2 { border-radius: 2px; }
+.br-3 { border-radius: 3px; }
+.br-4 { border-radius: 4px; }
+.br-5 { border-radius: 5px; }
+
+/* flex-gap */
+.gap-1 { gap: 1px;}
+.gap-2 { gap: 2px;}
+.gap-3 { gap: 3px;}
+.gap-4 { gap: 4px;}
+.gap-5 { gap: 5px;}
+
+/* vertical-align */
+.va-t {vertical-align: top;}
+.va-m {vertical-align: middle;}
+.va-b {vertical-align: bottom;}
+
+/* text color */
+.t-main-purple { color: #623c80 !important; }
+.t-black { color: #000 !important; }
+.t-white { color:#fff !important;}
+.t-fb-blue { color: #466ac2 !important; }
+.t-line-green { color: #54C814 !important; }
+.t-red { color: #db0000 !important;}
+.t-red-2 { color:var(--yt-red-2) !important;}
+.t-gray { color:var(--yt-gray); }
+.t-main-gray { color: var(--yt-main-gray); }
+.t-gray-2 { color: var(--yt-gray-2) !important; }
+.t-gray-3 { color: var(--yt-gray-3); }
+.t-yellow { color: var(--yt-yellow-1);}
diff --git a/Frontend/index.html b/Frontend/index.html
index 910d432..7e2e38e 100644
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -32,6 +32,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
+
@@ -1125,14 +1126,14 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li