diff options
Diffstat (limited to 'includes/system.inc')
| -rw-r--r-- | includes/system.inc | 47 |
1 files changed, 38 insertions, 9 deletions
diff --git a/includes/system.inc b/includes/system.inc index 099f522..ae6477c 100644 --- a/includes/system.inc +++ b/includes/system.inc @@ -2,18 +2,47 @@ ?> +<div id="system-banner-container" style="width: 100%;height: 65vh;position: fixed;background-image: url('/assets/uploads/banner-<?= $system ?>.jpg');background-size: cover;background-position: center; top: 0;"> + <div id="system-banner-inner" style="height: 100%;width: 100%;background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);"></div> +</div> + +<script> + window.onscroll = () => { + document.getElementById("system-banner-container").style.height = (65 - ((window.scrollY / window.screen.availHeight) * 100)) + "vh"; + } +</script> + <br> <div class="container"> - <?php require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/sysbanner.inc"; ?> - <br> - - <div id="page-content"> - <?php global $isLoggedIn; if ($isLoggedIn): ?> - <small style="opacity:.5;display:block;">(<a href="/-/edit/<?= $system ?>">edit</a>)</small> - <?php endif; ?> - <?= file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$systemID/content.html") ?> + + <div id="system-page" style="background-color: rgba(26,26,26,0.8);border-radius: 10px;padding:20px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);margin-top:30vh;"> + <?php require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/sysbanner.inc"; ?> + <br> + + <div id="page-content"> + <?php global $isLoggedIn; if ($isLoggedIn): ?> + <small style="opacity:.5;display:block;">(<a href="/-/edit/<?= $system ?>">edit</a>)</small> + <?php endif; ?> + <?= file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$systemID/content.html") ?> + </div> + <?php if ($system === "cloudburst") cloudburst(true); else raindrops(true); ?> </div> - <?php if ($system === "cloudburst") cloudburst(true); else raindrops(true); ?> </div> +<style> + #hpd-cloudburst, #hpd-raindrops { + background: transparent !important; + padding: 0 !important; + margin-bottom: 0 !important; + } + + @media (max-width: 767px) { + #system-info > img { + display: block; + margin-left: auto; + margin-right: auto; + } + } +</style> + <?php require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/footer.inc'; ?>
\ No newline at end of file |