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

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>