steven-y-e
/
hinamizawa
1
0
Fork 0
Code Issues Pull Requests Releases Activity

feat(index.php): pie graphs with 1 slice 

single slice representing % of data used on disk
main
steven 2020-12-01 12:57:15 -05:00
parent 57b6013adb
commit 2aca06efd8
1 changed files with 132 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
public/index.php 100644
View File

@ -0,0 +1,132 @@
<!DOCTYPE html>
<html>
<head>
<title>homo.casa</title>
<?php
$hinamizawa_total = disk_total_space(/data/);
$hinamizawa_free = disk_free_space(/data/);
$hinamizawa_percent_used = $hinamizawa_total ?
(($hinamizawa_total - $hinamizawa_free) / $hinamizawa_total)
: false;
$maebara_total = disk_total_space(/data/maebara/);
$maebara_free = disk_free_space(/data/maebara/);
$maebara_percent_used = $maebara_total ?
(($maebara_total - $maebara_free) / $maebara_total)
: false;
$houjou_total = disk_total_space(/data/houjou/);
$houjou_free = disk_free_space(/data/houjou/);
$houjou_percent_used = $houjou_total ?
(($houjou_total - $houjou_free) / $houjou_total)
: false;
$ryuuguu_total = disk_total_space(/data/ryuuguu/);
$ryuuguu_free = disk_free_space(/data/ryuuguu/);
$ryuuguu_percent_used = $ryuuguu_total ?
(($ryuuguu_total - $ryuuguu_free) / $ryuuguu_total)
: false;
$sonozaki_total = disk_total_space(/data/sonozaki/);
$sonozaki_free = disk_free_space(/data/sonozaki/);
$sonozaki_percent_used = $sonozaki_total
(($sonozaki_total - $sonozaki_free) / $sonozaki_total)
: false;
?>
<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_used ?>;
}
#maebara-used {
--value: <?php echo $maebara_percent_used ?>;
}
#houjou-used {
--value: <?php echo $houjou_percent_used ?>;
}
#ryuuguu-used {
--value: <?php echo $ryuuguu_percent_used ?>;
}
#sonozaki-used {
--value: <?php echo $sonozaki_percent_used ?>;
}
</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>