feat(layout): added header, expanded disks section

disks referred to as "homes"
main
steven 2020-12-02 12:29:45 -05:00
parent 384d725592
commit f843919217
1 changed files with 79 additions and 26 deletions

View File

@ -10,6 +10,14 @@
<meta name="msapplication-TileColor" content="#00aba9">
<meta name="theme-color" content="#ffffff">
<?php
function getByteString($bytes) {
$symbols = array('B', 'KB', 'MB', 'GB', 'TB');
$exp = ($bytes ? floor(log($bytes)/log(1024)) : 0);
return sprintf(
'%.2f '.$symbol[$exp],
($bytes ? $bytes/pow(1024, floor($exp)) : 0)
);
}
function getPercentageUsed($total, $used) {
return ($total && $used ?
sprintf('%.4f', (100 * $used / $total))
@ -125,35 +133,80 @@
</style>
</head>
<body>
<header>
<h1>homo.casa</h1>
<h2>hinamizawa</h2>
<div class="pie">
<div class="slice hinamizawa" id="hinamizawa-used"></div>
<p>Gods and dice are best when silent.</p>
</header>
<div id="homes">
<h2>homes</h2>
<div class="home">
<h3>hinamizawa - <?php echo getByteString($hinamizawa_total); ?></h3>
<p>the village where we all reside</p>
<div class="pie">
<div class="slice hinamizawa" id="hinamizawa-used"></div>
</div>
<h4>Free Space: <em><?php echo
getByteString($hinamizawa_free);
?></em></h4>
<h4>Space Used: <em><?php echo
getByteString($hinamizawa_used);
?></em></h4>
</div>
<div class="home">
<h3>maebara - <?php echo getByteString($maebara_total); ?></h3>
<p>a famous artist, his loving wife, and their charismatic son</p>
<div class="pie">
<div class="slice maebara" id="maebara-used"></div>
</div>
<h4>Free Space: <em><?php echo
getByteString($maebara_free);
?></em></h4>
<h4>Space Used: <em><?php echo
getByteString($maebara_used);
?></em></h4>
</div>
<div class="home">
<h3>houjou - <?php echo getByteString($houjou_total); ?></h3>
<p>a little girl awaiting the return of her big brother</p>
<div class="pie">
<div class="slice houjou" id="houjou-used"></div>
</div>
<h4>Free Space: <em><?php echo
getByteString($houjou_free);
?></em></h4>
<h4>Space Used: <em><?php echo
getByteString($houjou_used);
?></em></h4>
</div>
<div class="home">
<h3>ryuuguu - <?php echo getByteString($ryuuguu_total); ?></h3>
<p>a caring father and his superstitious daughter</p>
<div class="pie">
<div class="slice ryuuguu" id="ryuuguu-used"></div>
</div>
<h4>Free Space: <em><?php echo
getByteString($ryuuguu_free);
?></em></h4>
<h4>Space Used: <em><?php echo
getByteString($ryuuguu_used);
?></em></h4>
</div>
<div class="home">
<h3>sonozaki - <?php echo getByteString($sonozaki_total); ?></h3>
<p>a grandmother of twins carrying on her stone face</p>
<div class="pie">
<div class="slice sonozaki" id="sonozaki-used"></div>
</div>
<h4>Free Space: <em><?php echo
getByteString($sonozaki_free);
?></em></h4>
<h4>Space Used: <em><?php echo
getByteString($sonozaki_used);
?></em></h4>
</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>
<p>Child of Man. What do you seek from this World?</p>
</footer>
</body>
</html>