Update

1 files changed, 137 insertions, 127 deletions

diff --git a/includes/sysedit.inc b/includes/sysedit.inc
index 95a0b5b..bfff61b 100644
--- a/includes/sysedit.inc
+++ b/includes/sysedit.inc
@@ -2,142 +2,152 @@
 
 ?>
 
+<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>
+
 <br>
 <div class="container">
-    <?php require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/sysbanner.inc"; ?>
-    <br>
+    <div class="container">
 
-    <p class="text-muted">
-        <span id="editor-save-status">Saved</span> · <span id="editor-size"><?= file_exists($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$systemID-disclaimers.html") ? strlen(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$systemID-disclaimers.html")) : "0" ?></span> bytes
-    </p>
+        <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>
 
-    <!--suppress HtmlFormInputWithoutLabel -->
-    <textarea id="page-editor">
-        <?= file_exists($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$systemID-disclaimers.html") ? file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$systemID-disclaimers.html") : "" ?>
+            <p class="text-muted">
+                <span id="editor-save-status">Saved</span> · <span id="editor-size"><?= file_exists($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$systemID/content.html") ? strlen(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$systemID/content.html")) : "0" ?></span> bytes
+            </p>
+
+            <!--suppress HtmlFormInputWithoutLabel -->
+            <textarea id="page-editor">
+        <?= file_exists($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$systemID/content.html") ? file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$systemID/content.html") : "" ?>
     </textarea>
 
-    <script src="/assets/editor/editor.js"></script>
-    <script>
-        let editor;
-        ClassicEditor
-            .create( document.querySelector( '#page-editor' ), {
-                toolbar: [
-                    'undo', 'redo', '|', 'removeFormat', '|', 'heading', '|', 'fontSize', 'fontColor', 'fontBackgroundColor', 'alignment', '|', 'bold', 'italic', 'underline', 'strikethrough', '|', 'subscript', 'superscript', '|', 'code', '|', 'outdent', 'indent', '|', 'bulletedList', 'numberedList', '|', 'link', 'imageUpload', 'mediaEmbed', 'blockQuote', 'insertTable', 'codeBlock', '|', 'horizontalLine'
-                ]
-            } )
-
-            .then( newEditor => {
-                editor = newEditor;
-            } )
-            .catch( error => {
-                console.error( error );
-            } );
-    </script>
-    <style>
-        :root {
-            --ck-color-base-background: transparent;
-        }
-
-        .ck-toolbar {
-            filter: invert(1);
-        }
-
-        .ck-tooltip__text {
-            color: white !important;
-        }
-
-        .ck-dropdown__panel {
-            background: #ddd !important;
-        }
-
-        .ck-color-grid__tile {
-            filter: invert(1);
-        }
-
-        .ck-balloon-rotator {
-            background-color: #ccc !important;
-        }
-
-        .ck-balloon-panel {
-            filter: invert(1);
-        }
-    </style>
-    <script>
-        let lastSavedData = editor.getData();
-        let lastFetchedData = editor.getData();
-        let timeSinceLastModified = 0;
-        let saving = false;
-
-        async function save() {
-            let data = editor.getData();
-            document.getElementById("editor-save-status").innerHTML = "Saving...";
-            document.getElementById("editor-save-status").classList.remove("text-danger");
-            document.getElementById("editor-save-status").classList.remove("text-muted");
-            document.getElementById("editor-save-status").classList.remove("text-warning");
-            document.getElementById("editor-save-status").classList.add("text-primary");
-            saving = true;
-
-            try {
-                await window.fetch("/api/save?system=<?= $systemID ?>&member=null", {
-                    method: "POST",
-                    body: JSON.stringify({ content: data })
-                });
-                document.getElementById("editor-save-status").innerHTML = "Saved";
-                document.getElementById("editor-save-status").classList.remove("text-danger");
-                document.getElementById("editor-save-status").classList.add("text-muted");
-                document.getElementById("editor-save-status").classList.remove("text-warning");
-                document.getElementById("editor-save-status").classList.remove("text-primary");
-                lastSavedData = data;
-                saving = false;
-            } catch (e) {
-                console.error(e);
-                document.getElementById("editor-save-status").innerHTML = "Failed to save";
-                document.getElementById("editor-save-status").classList.add("text-danger");
-                document.getElementById("editor-save-status").classList.remove("text-muted");
-                document.getElementById("editor-save-status").classList.remove("text-warning");
-                document.getElementById("editor-save-status").classList.remove("text-primary");
-            }
-        }
-
-        document.onclick = async () => {
-            if (saving) return;
-
-            if (editor.getData() !== lastSavedData) {
-                await save();
-            }
-        }
-
-        setInterval(async () => {
-            if (saving) return;
-
-            document.getElementById("editor-size").innerHTML = editor.getData().length;
-
-            if (editor.getData() !== lastSavedData) {
-                document.getElementById("editor-save-status").innerHTML = "Modified";
-                document.getElementById("editor-save-status").classList.remove("text-danger");
-                document.getElementById("editor-save-status").classList.remove("text-muted");
-                document.getElementById("editor-save-status").classList.add("text-warning");
-                document.getElementById("editor-save-status").classList.remove("text-primary");
-
-                if (editor.getData() !== lastFetchedData) {
-                    lastFetchedData = editor.getData();
-                    timeSinceLastModified = 0;
-                } else {
-                    timeSinceLastModified++;
+            <script src="/assets/editor/editor.js"></script>
+            <script>
+                let editor;
+                ClassicEditor
+                    .create( document.querySelector( '#page-editor' ), {
+                        toolbar: [
+                            'undo', 'redo', '|', 'removeFormat', '|', 'heading', '|', 'fontSize', 'fontColor', 'fontBackgroundColor', 'alignment', '|', 'bold', 'italic', 'underline', 'strikethrough', '|', 'subscript', 'superscript', '|', 'code', '|', 'outdent', 'indent', '|', 'bulletedList', 'numberedList', '|', 'link', 'imageUpload', 'mediaEmbed', 'blockQuote', 'insertTable', 'codeBlock', '|', 'horizontalLine'
+                        ]
+                    } )
+
+                    .then( newEditor => {
+                        editor = newEditor;
+                    } )
+                    .catch( error => {
+                        console.error( error );
+                    } );
+            </script>
+            <style>
+                :root {
+                    --ck-color-base-background: transparent;
+                }
+
+                .ck-toolbar {
+                    filter: invert(1);
+                }
+
+                .ck-tooltip__text {
+                    color: white !important;
+                }
+
+                .ck-dropdown__panel {
+                    background: #ddd !important;
                 }
 
-                if (timeSinceLastModified > 20) {
-                    await save();
+                .ck-color-grid__tile {
+                    filter: invert(1);
                 }
-            } else {
-                timeSinceLastModified = 0;
-                document.getElementById("editor-save-status").innerHTML = "Saved";
-                document.getElementById("editor-save-status").classList.add("text-muted");
-                document.getElementById("editor-save-status").classList.remove("text-warning");
-                document.getElementById("editor-save-status").classList.remove("text-primary");
-            }
-        }, 100)
-    </script>
+
+                .ck-balloon-rotator {
+                    background-color: #ccc !important;
+                }
+
+                .ck-balloon-panel {
+                    filter: invert(1);
+                }
+            </style>
+            <script>
+                let lastSavedData = editor.getData();
+                let lastFetchedData = editor.getData();
+                let timeSinceLastModified = 0;
+                let saving = false;
+
+                async function save() {
+                    let data = editor.getData();
+                    document.getElementById("editor-save-status").innerHTML = "Saving...";
+                    document.getElementById("editor-save-status").classList.remove("text-danger");
+                    document.getElementById("editor-save-status").classList.remove("text-muted");
+                    document.getElementById("editor-save-status").classList.remove("text-warning");
+                    document.getElementById("editor-save-status").classList.add("text-primary");
+                    saving = true;
+
+                    try {
+                        await window.fetch("/api/save?system=<?= $systemID ?>&member=null", {
+                            method: "POST",
+                            body: JSON.stringify({ content: data })
+                        });
+                        document.getElementById("editor-save-status").innerHTML = "Saved";
+                        document.getElementById("editor-save-status").classList.remove("text-danger");
+                        document.getElementById("editor-save-status").classList.add("text-muted");
+                        document.getElementById("editor-save-status").classList.remove("text-warning");
+                        document.getElementById("editor-save-status").classList.remove("text-primary");
+                        lastSavedData = data;
+                        saving = false;
+                    } catch (e) {
+                        console.error(e);
+                        document.getElementById("editor-save-status").innerHTML = "Failed to save";
+                        document.getElementById("editor-save-status").classList.add("text-danger");
+                        document.getElementById("editor-save-status").classList.remove("text-muted");
+                        document.getElementById("editor-save-status").classList.remove("text-warning");
+                        document.getElementById("editor-save-status").classList.remove("text-primary");
+                    }
+                }
+
+                document.onclick = async () => {
+                    if (saving) return;
+
+                    if (editor.getData() !== lastSavedData) {
+                        await save();
+                    }
+                }
+
+                setInterval(async () => {
+                    if (saving) return;
+
+                    document.getElementById("editor-size").innerHTML = editor.getData().length;
+
+                    if (editor.getData() !== lastSavedData) {
+                        document.getElementById("editor-save-status").innerHTML = "Modified";
+                        document.getElementById("editor-save-status").classList.remove("text-danger");
+                        document.getElementById("editor-save-status").classList.remove("text-muted");
+                        document.getElementById("editor-save-status").classList.add("text-warning");
+                        document.getElementById("editor-save-status").classList.remove("text-primary");
+
+                        if (editor.getData() !== lastFetchedData) {
+                            lastFetchedData = editor.getData();
+                            timeSinceLastModified = 0;
+                        } else {
+                            timeSinceLastModified++;
+                        }
+
+                        if (timeSinceLastModified > 20) {
+                            await save();
+                        }
+                    } else {
+                        timeSinceLastModified = 0;
+                        document.getElementById("editor-save-status").innerHTML = "Saved";
+                        document.getElementById("editor-save-status").classList.add("text-muted");
+                        document.getElementById("editor-save-status").classList.remove("text-warning");
+                        document.getElementById("editor-save-status").classList.remove("text-primary");
+                    }
+                }, 100)
+            </script>
+        </div>
+    </div>
+    <?php require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/sysbanner.inc"; ?>
 </div>
 
 <?php require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/footer.inc'; ?>
\ No newline at end of file