From 609ac5b7db398fc91b573e5c59d0a0b094df3e3f Mon Sep 17 00:00:00 2001 From: Yoshihiro OKUMURA Date: Thu, 28 Oct 2021 16:16:34 +0900 Subject: [PATCH] rewrite page design using html5. --- html/css/default.css | 28 +++++++------- html/index.html | 91 +++++++++++++++++++++++++++++++------------- 2 files changed, 79 insertions(+), 40 deletions(-) diff --git a/html/css/default.css b/html/css/default.css index dbffdf6..9effc01 100644 --- a/html/css/default.css +++ b/html/css/default.css @@ -1,5 +1,5 @@ body { - margin: 2em 1em 2em 70px; + margin: 2em 1em 0 3em; color: black; background: white; background-position: top left; @@ -9,19 +9,19 @@ body { text-align: center; } -th.requirement { background-color: #ff66ff; color: black; } +h1 { text-align: center; } +h2, h3, h4, h5, h6 { text-align: left; } +h1 { color: black; font: 120% sans-serif; font-weight: bold; } +h2 { color: #005A9C; font: 110%; font-weight: medium; } +h3 { color: #001A4C; font: 105% sans-serif; font-weight: medium; } +h4 { color: #007A9C; font: 90% sans-serif; font-weight: medium; } +h5 { color: #005A9C; font: italic 80% sans-serif; } +h6 { font: small-caps 70% sans-serif; } -h1 {text-align: center} -h2, h3, h4, h5, h6 { text-align: left } -h1 { color: black; font: 120% sans-serif; font-weight: bold} -h2 { color: #005A9C; font: 110%; font-weight: medium} -h3 { color: #001A4C; font: 105% sans-serif; font-weight: medium} -h4 { color: #007A9C; font: 90% sans-serif; font-weight: medium} -h5 { color: #005A9C; font: italic 80% sans-serif } -h6 { font: small-caps 70% sans-serif } +img { width: auto; height: auto; max-width: 100%; max-height: 100%; } + +main { display: flex; flex-wrap: wrap; } +main div.graph { margin: 5px auto; } +main div.range-select span { color: blue; text-decoration: underline; cursor: pointer; } -pre { - background-color: lightcyan; - text-color: black; -} diff --git a/html/index.html b/html/index.html index 0afc5bd..cd77acf 100644 --- a/html/index.html +++ b/html/index.html @@ -1,33 +1,72 @@ - - + + - - - - - - -C407 Server Room Temperature + + C407 Server Room Temperature + + + + + +

C407 Server Room Temperature

- - - - - - - - - - - - - - - -
Hourly GraphDaily Graph
Weekly GraphMonthly Graph
Yearly Graph3 Years Graph
- +
+
+
+ Hour: + 1 ... + 3 ... + 6 ... + 12 +
+
Hourly Graph
+
+
+
+ Day: + 1 ... + 3 +
+
Daily Graph
+
+
+
+ Week: + 1 ... + 2 +
+
Weekly Graph
+
+
+
+ Month: + 1 ... + 3 ... + 6 +
+
Monthly Graph
+
+
+
+ Year: + 1 ... + 3 ... + 5 ... + 10 +
+
Yearly Graph
+
+
+