154 lines
4.4 KiB
PHP
154 lines
4.4 KiB
PHP
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>homo.casa</title>
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
|
<link rel="manifest" href="/site.webmanifest">
|
|
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#ee0000">
|
|
<meta name="msapplication-TileColor" content="#00aba9">
|
|
<meta name="theme-color" content="#ffffff">
|
|
<?php
|
|
function getPercentageUsed($total, $used) {
|
|
return ($total && $used ?
|
|
sprintf('%.4f', (100 * $used / $total))
|
|
: false);
|
|
}
|
|
function getDifference($minuend, $subtrahend) {
|
|
return ($minuend && $subtrahend ?
|
|
$minuend - $subtrahend
|
|
: false);
|
|
}
|
|
$hinamizawa_total = disk_total_space(/data/);
|
|
$hinamizawa_free = disk_free_space(/data/);
|
|
$hinamizawa_used = getDifference($hinamizawa_total, $hinamizawa_free);
|
|
$hinamizawa_percent =
|
|
getPercentageUsed($hinamizawa_total, $hinamizawa_used);
|
|
$maebara_total = disk_total_space(/data/maebara/);
|
|
$maebara_free = disk_free_space(/data/maebara/);
|
|
$maebara_used = getDifference($maebara_total, $maebara_free);
|
|
$maebara_percent =
|
|
getPercentageUsed($maebara_total, $maebara_used);
|
|
$houjou_total = disk_total_space(/data/houjou/);
|
|
$houjou_free = disk_free_space(/data/houjou/);
|
|
$houjou_used = getDifference($houjou_total, $houjou_free);
|
|
$houjou_percent =
|
|
getPercentageUsed($houjou_total, $houjou_used);
|
|
$ryuuguu_total = disk_total_space(/data/ryuuguu/);
|
|
$ryuuguu_free = disk_free_space(/data/ryuuguu/);
|
|
$ryuuguu_used = getDifference($ryuuguu_total, $ryuuguu_free);
|
|
$ryuuguu_percent =
|
|
getPercentageUsed($ryuuguu_total, $ryuuguu_used);
|
|
$sonozaki_total = disk_total_space(/data/sonozaki/);
|
|
$sonozaki_free = disk_free_space(/data/sonozaki/);
|
|
$sonozaki_used = getDifference($sonozaki_total, $sonozaki_free);
|
|
$sonozaki_percent =
|
|
getPercentageUsed($sonozaki_total, $sonozaki_used);
|
|
?>
|
|
<style type="text/css">
|
|
.pie {
|
|
background: #bbb;
|
|
border-radius: 100%;
|
|
height: calc(var(--size, 200) * 1px);
|
|
width: calc(var(--size, 200) * 1px);
|
|
position: relative;
|
|
}
|
|
.slice {
|
|
height: 100%;
|
|
width: 100%;
|
|
position: absolute;
|
|
transform: translate(0, -50%) rotate(90deg);
|
|
transform-origin: 50% 100%;
|
|
}
|
|
.slice:after,
|
|
.slice:before {
|
|
background: var(--bg, #fff);
|
|
content: '';
|
|
height: 100%;
|
|
width: 100%;
|
|
position: absolute;
|
|
}
|
|
.slice:before {
|
|
--degrees: calc((var(--value, 45) / 100) * 360);
|
|
transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg));
|
|
transform-origin: 50% 0;
|
|
}
|
|
.slice:after {
|
|
opacity: var(--over50, 0);
|
|
}
|
|
.hinamizawa {
|
|
--bg: #637bc0;
|
|
background: var(--bg, #637bc0);
|
|
}
|
|
.maebara {
|
|
--bg: #835e4c;
|
|
background: var(--bg, #835e4c);
|
|
}
|
|
.houjou {
|
|
--bg: #ebd076;
|
|
background: var(--bg, #ebd076);
|
|
}
|
|
.ryuuguu {
|
|
--bg: #faaa66;
|
|
background: var(--bg, #faaa66);
|
|
}
|
|
.sonozaki {
|
|
--bg: #86c9a8;
|
|
background: var(--bg, #86c9a8);
|
|
}
|
|
#hinamizawa-used {
|
|
--value: <?php echo ($hinamizawa_percent ? $hinamizawa_percent : 0); ?>;
|
|
--over50: <?php echo ($hinamizawa_percent > 50 ? '1' : '0'); ?>
|
|
}
|
|
#maebara-used {
|
|
--value: <?php echo ($maebara_percent ? $maebara_percent : 0); ?>;
|
|
--over50: <?php echo ($maebara_percent > 50 ? '1' : '0'); ?>
|
|
}
|
|
#houjou-used {
|
|
--value: <?php echo ($houjou_percent ? $houjou_percent : 0); ?>;
|
|
--over50: <?php echo ($houjou_percent > 50 ? '1' : '0'); ?>
|
|
}
|
|
#ryuuguu-used {
|
|
--value: <?php echo ($ryuuguu_percent ? $ryuuguu_percent : 0); ?>;
|
|
--over50: <?php echo ($ryuuguu_percent > 50 ? '1' : '0'); ?>
|
|
}
|
|
#sonozaki-used {
|
|
--value: <?php echo ($sonozaki_percent ? $sonozaki_percent : 0); ?>;
|
|
--over50: <?php echo ($sonozaki_percent > 50 ? '1' : '0'); ?>
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>homo.casa</h1>
|
|
<h2>hinamizawa</h2>
|
|
<div class="pie">
|
|
<div class="slice hinamizawa" id="hinamizawa-used"></div>
|
|
</div>
|
|
<h3>
|
|
|
|
<h2>maebara</h2>
|
|
<div class="pie">
|
|
<div class="slice maebara" id="maebara-used"></div>
|
|
</div>
|
|
|
|
<h2>houjou</h2>
|
|
<div class="pie">
|
|
<div class="slice houjou" id="houjou-used"></div>
|
|
</div>
|
|
|
|
<h2>ryuuguu</h2>
|
|
<div class="pie">
|
|
<div class="slice ryuuguu" id="ryuuguu-used"></div>
|
|
</div>
|
|
|
|
<h2>sonozaki</h2>
|
|
<div class="pie">
|
|
<div class="slice sonozaki" id="sonozaki-used"></div>
|
|
</div>
|
|
|
|
<footer>
|
|
<p>Child of Man. What do you seek from this world?</p>
|
|
</footer>
|
|
</body>
|
|
</html>
|