From 2c4ae43e688a9873e86211ea0e7aeb9ba770dd77 Mon Sep 17 00:00:00 2001
From: Minteck <contact@minteck.org>
Date: Tue, 18 Oct 2022 08:59:09 +0200
Subject: Update

---
 includes/system.inc | 47 ++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 38 insertions(+), 9 deletions(-)

(limited to 'includes/system.inc')

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
-- 
cgit