105 lines
8 KiB
HTML
Executable file
105 lines
8 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<link rel="icon" href="/icon-192.png" type="image/png">
|
|
<link rel="apple-touch-icon" href="/icon-192.png">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
<meta name="color-scheme" content="light dark">
|
|
<meta name="theme-color" content="#000000">
|
|
<title>[hello]</title>
|
|
<link rel="manifest" href="/manifest.json?v=3">
|
|
<link rel="stylesheet" href="style.css?v=173">
|
|
<link rel="stylesheet" href="animations.css?v=68">
|
|
</head>
|
|
<body class="launcher">
|
|
<div class="container">
|
|
<nav class="frame" aria-label="0ff.space services">
|
|
<input type="checkbox" id="hero-toggle" class="hero-toggle-input">
|
|
<label class="box hero" for="hero-toggle" aria-label="Rotationsanimation an/aus"><div class="tile-spin"></div></label>
|
|
<a href="https://data.0ff.space" class="box data iphone-cell-0"><div class="tile-spin">data</div></a>
|
|
<a href="https://social.0ff.space/settings" class="box social iphone-cell-9 iphone-cell-10"><div class="tile-spin">social</div></a>
|
|
<a href="https://phanpy.0ff.space" class="box phanpy iphone-cell-35"><div class="tile-spin">phanpy</div></a>
|
|
<a href="https://git.0ff.space/explore/repos" class="box code iphone-cell-25"><div class="tile-spin">code</div></a>
|
|
<a href="https://lldap.0ff.space" class="box lldap iphone-cell-6"><div class="tile-spin">user</div></a>
|
|
<a href="https://dash.0ff.space" class="box intra iphone-cell-8"><div class="tile-spin">intra</div></a>
|
|
<a href="https://hdm.0ff.space" class="box hdm iphone-cell-4 iphone-cell-5"><div class="tile-spin">hdm</div></a>
|
|
<a href="https://abs.0ff.space" class="box abs iphone-cell-31"><div class="tile-spin">abs</div></a>
|
|
<div class="box mealie iphone-cell-14 iphone-cell-15" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
<div class="box trek iphone-cell-18" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
<a href="https://chat.0ff.space" class="box chat iphone-cell-30"><div class="tile-spin">chat</div></a>
|
|
<a href="https://cal.0ff.space" class="box calendar iphone-cell-20"><div class="tile-spin">calendar</div></a>
|
|
<a href="https://git.0ff.space/lukas/nixos-config" class="box config iphone-cell-22 iphone-cell-26"><div class="tile-spin">config</div></a>
|
|
<a href="https://plaza.0ff.space" class="box plaza iphone-cell-19 iphone-cell-23"><div class="tile-spin">plaza</div></a>
|
|
<a href="https://git.0ff.space/lukas/nixos-config/wiki/guide" class="box guide iphone-cell-27"><div class="tile-spin">guide</div></a>
|
|
<a href="/" class="box dummy dummy-2 iphone-cell-21" aria-label="reload page"><div class="tile-spin">reload</div></a>
|
|
<div class="box ghost ghost-1 iphone-cell-2" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
<div class="box ghost ghost-2 iphone-cell-3" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
<div class="box ghost ghost-3 iphone-cell-11" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
<div class="box ghost ghost-5 iphone-cell-1" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
<div class="box ghost ghost-6 iphone-cell-24" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
<div class="box ghost ghost-7 iphone-cell-7" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
<div class="box ghost ghost-8 iphone-cell-28" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
<div class="box ghost ghost-9 iphone-cell-29" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
<div class="box ghost ghost-10 iphone-cell-32" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
<div class="box ghost ghost-11 iphone-cell-33" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
<div class="box ghost ghost-12 iphone-cell-34" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
<button type="button" class="box sound iphone-cell-12 iphone-cell-13 iphone-cell-16 iphone-cell-17" aria-pressed="false"><div class="tile-spin">sound</div><audio preload="none" src="wind.mp3"></audio></button>
|
|
<div class="box photo photo-1" aria-hidden="true"><img src="https://data.0ff.space/pictures/nature/desktop/teich7_xl.webp" alt=""></div>
|
|
<div class="box photo photo-2" aria-hidden="true"><img src="https://data.0ff.space/pictures/nature/laptop/teich7_l.webp" alt=""></div>
|
|
<div class="box photo photo-3" aria-hidden="true"><img src="https://data.0ff.space/pictures/nature/laptop/teich7_l.webp" alt=""></div>
|
|
<div class="box photo photo-4" aria-hidden="true"><img src="https://data.0ff.space/pictures/nature/desktop/teich7_xl.webp" alt=""></div>
|
|
<div class="box imac-filler filler-1" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
<div class="box imac-filler filler-2" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
<div class="box imac-filler filler-3" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
<div class="box imac-filler filler-4" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
<div class="box imac-filler filler-5" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
<div class="box imac-filler filler-6" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
<div class="box imac-filler filler-7" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
<div class="box imac-filler filler-8" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
<div class="box imac-filler filler-9" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
<div class="box imac-filler filler-10" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
<div class="box imac-filler filler-11" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
<div class="box imac-filler filler-12" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
<div class="box imac-filler filler-13" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
<div class="box imac-filler filler-14" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
<div class="box imac-filler filler-15" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
<div class="box imac-filler filler-16" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
<div class="box imac-filler filler-17" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
<div class="box imac-filler filler-18" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
<div class="box imac-filler filler-19" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
<div class="box imac-filler filler-20" aria-hidden="true"><div class="tile-spin"></div></div>
|
|
</nav>
|
|
</div>
|
|
<script>
|
|
(function () {
|
|
var tile = document.querySelector('.box.sound');
|
|
var audio = tile.querySelector('audio');
|
|
var frame = document.querySelector('.frame');
|
|
|
|
var deactivateSound = function () {
|
|
tile.classList.remove('playing');
|
|
tile.setAttribute('aria-pressed', 'false');
|
|
frame.classList.remove('sound-active');
|
|
};
|
|
|
|
tile.addEventListener('click', function () {
|
|
if (audio.paused) {
|
|
audio.play();
|
|
tile.classList.add('playing');
|
|
tile.setAttribute('aria-pressed', 'true');
|
|
frame.classList.add('sound-active');
|
|
} else {
|
|
audio.pause();
|
|
deactivateSound();
|
|
}
|
|
});
|
|
|
|
audio.addEventListener('ended', deactivateSound);
|
|
})();
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|