niu/digitemp-rrdgraph
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

rewrite page design using html5.

Browse Source
This commit is contained in:
Yoshihiro OKUMURA
2021-10-28 16:16:34 +09:00
parent d79f1aa172
commit 609ac5b7db
2 changed files with 79 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
html/css/default.css
View File

@@ -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;
}

91
html/index.html
View File

@@ -1,33 +1,72 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-language" content="ja" />
<meta http-equiv="Content-Stype-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="refresh" content="60" />
<link rel="stylesheet" type="text/css" href="css/default.css" />
<title>C407 Server Room Temperature</title>
<meta charset="utf-8">
<title>C407 Server Room Temperature</title>
<meta name="description" content="C407 Server Room Temperature">
<meta name="author" content="Neuroinformatics Unit, RIKEN CBS">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="refresh" content="300">
<link rel="stylesheet" href="css/default.css">
</head>
<body>
<h1>C407 Server Room Temperature</h1>
<table>
<tbody>
<tr>
<td><img src="./images/graph-hour.png" alt="Hourly Graph" /></td>
<td><img src="./images/graph-day.png" alt="Daily Graph" /></td>
</tr>
<tr>
<td><img src="./images/graph-week.png" alt="Weekly Graph" /></td>
<td><img src="./images/graph-month.png" alt="Monthly Graph" /></td>
</tr>
<tr>
<td><img src="./images/graph-year.png" alt="Yearly Graph" /></td>
<td><img src="./images/graph-3year.png" alt="3 Years Graph" /></td>
</tr>
</tbody>
</table>
<main>
<div class="graph">
<div class="range-select">
Hour:
<span onclick="changeGraph('g1', 'hour', 1)">1</span> ...
<span onclick="changeGraph('g1', 'hour', 3)">3</span> ...
<span onclick="changeGraph('g1', 'hour', 6)">6</span> ...
<span onclick="changeGraph('g1', 'hour', 12)">12</span>
</div>
<div><img id="g1" src="./images/graph-hour.png" alt="Hourly Graph" /></div>
</div>
<div class="graph">
<div class="range-select">
Day:
<span onclick="changeGraph('g2', 'day', 1)">1</span> ...
<span onclick="changeGraph('g2', 'day', 3)">3</span>
</div>
<div><img id="g2" src="./images/graph-day.png" alt="Daily Graph" /></div>
</div>
<div class="graph">
<div class="range-select">
Week:
<span onclick="changeGraph('g3', 'week', 1)">1</span> ...
<span onclick="changeGraph('g3', 'week', 2)">2</span>
</div>
<div><img id="g3" src="./images/graph-week.png" alt="Weekly Graph" /></div>
</div>
<div class="graph">
<div class="range-select">
Month:
<span onclick="changeGraph('g4', 'month', 1)">1</span> ...
<span onclick="changeGraph('g4', 'month', 3)">3</span> ...
<span onclick="changeGraph('g4', 'month', 6)">6</span>
</div>
<div><img id="g4" src="./images/graph-month.png" alt="Monthly Graph" /></div>
</div>
<div class="graph">
<div class="range-select">
Year:
<span onclick="changeGraph('g5', 'year', 1)">1</span> ...
<span onclick="changeGraph('g5', 'year', 3)">3</span> ...
<span onclick="changeGraph('g5', 'year', 5)">5</span> ...
<span onclick="changeGraph('g5', 'year', 10)">10</span>
</div>
<div><img id="g5" src="./images/graph-year.png" alt="Yearly Graph" /></div>
</div>
</main>
<script>
function changeGraph(id, type, num) {
const img = document.getElementById(id);
if (img) {
img.src = './images/graph-' + (num === 1 ? '' : num) + type + '.png';
}
}
</script>
</body>
</html>