300 lines
8.6 KiB
PHP
300 lines
8.6 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">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<?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))
|
|
: 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">
|
|
/* layout */
|
|
header, #homes, #services, footer {
|
|
width: 30%;
|
|
float: left;
|
|
}
|
|
header {
|
|
word-spacing: 100vw;
|
|
}
|
|
|
|
/* header */
|
|
#homo-casa.before {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 10px;
|
|
width: 1em;
|
|
height: 1em;
|
|
background: url(/homo-casa.svg) no-repeat top left;
|
|
background-size: 1em 1em;
|
|
}
|
|
#bernkastel {
|
|
color: #ee0000;
|
|
}
|
|
|
|
/* homes */
|
|
.home {
|
|
width: 50%;
|
|
}
|
|
.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'); ?>
|
|
}
|
|
|
|
/* services */
|
|
.service {
|
|
width: 50%;
|
|
}
|
|
#st-lucia {
|
|
color: #5059bd
|
|
}
|
|
#angel-mort {
|
|
color: #5877a2;
|
|
}
|
|
|
|
/* mr. hooly */
|
|
#mister-hooly {
|
|
position: fixed;
|
|
top: 24px;
|
|
right: 12px;
|
|
width: 144px;
|
|
height: 162px;
|
|
background: url(/mister-hooly.svg) no-repeat top left;
|
|
background-size: 144px 162px;
|
|
}
|
|
|
|
/* footer */
|
|
#hanyuu {
|
|
color: #8d85d3;
|
|
}
|
|
|
|
/* 700px breakpoint */
|
|
@media screen and (max-width: 700px) {
|
|
footer, #homes, #services, footer {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<h1 id="homo-casa">homo.casa</h1>
|
|
<p id="bernkastel">Gods and dice are both 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>
|
|
|
|
<div id="services">
|
|
<h2>services</h2>
|
|
<p>note: authentication required for access.</p>
|
|
<div class="service" id="st-lucia">
|
|
<a href="https://st.lucia.homo.casa">
|
|
<h3>St. Lucia</h3>
|
|
<img src="/st-lucia.svg" alt="Saint Lucia Academy Crest" />
|
|
<p>a private school where research is exchanged</p>
|
|
</a>
|
|
</div>
|
|
<div class="service" id="angel-mort">
|
|
<a href="https://angel.mort.homo.casa">
|
|
<h3>Angel Mort</h3>
|
|
<img src="/angel-mort.svg" alt="Angel Mort Signage" />
|
|
<p>a restaurant where luxury is served</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="mister-hooly"></div>
|
|
|
|
<footer>
|
|
<p id="hanyuu">Child of Man. What is it you seek from this World?</p>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|