1 files changed, 129 insertions, 0 deletions
diff --git a/pages/demo.inc b/pages/demo.inc
new file mode 100644
index 0000000..d469908
--- /dev/null
+++ b/pages/demo.inc
@@ -0,0 +1,129 @@
+<?php
+
+require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/init.inc"; global $title; global $isLoggedIn;
+$demoHeader = true; $emergencyHeader = true; require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/header.inc';
+
+?>
+
+<script src="/app/banner.js"></script>
+<br>
+<div class="container">
+    <div>
+        <div id="header" style="text-align: center;">
+            <img alt="" src="/assets/uploads/raindrops.png" style="width:128px;">
+            <h3>Raindrops System</h3>
+            <p>Système plural de <?= count(json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/gdapd/members.json"), true)) - 2 ?> poneys</p>
+            <hr>
+        </div>
+
+        <div id="list">
+            <div class="list-group">
+                <?php foreach (scoreOrder(json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/gdapd/members.json"), true), "gdapd") as $member): ?>
+                <a onclick="showMember('<?= $member["id"] ?>');" class="list-group-item">
+                    <img src="<?= getAsset($member['system'], $member["id"], "heads") ?>" style="width:32px;vertical-align: middle;">
+                    <span style="vertical-align: middle;margin-left: 5px;">
+                        <b><?= $member["display_name"] ?? $member["name"] ?></b>
+                    </span>
+                </a>
+                <?php endforeach; ?>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="modal fade" id="member">
+    <div class="modal-dialog modal-xl">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">
+                    <img id="modal-img" src="/assets/uploads/pt.png" style="width:32px;vertical-align: middle;">
+                    <span style="vertical-align: middle;"><span id="modal-member">Member</span> · Raindrops System</span>
+                </h4>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+
+            <div class="modal-body">
+                <?php foreach (scoreOrder(json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/gdapd/members.json"), true), "gdapd") as $member): ?>
+                    <div class="modal-member-content" id="modal-member-content-<?= $member["id"] ?>">
+                        <script>
+                            <?php global $memberData; $memberData = $member; ?>
+                            window.currentMemberData = JSON.parse(atob(`<?= base64_encode(json_encode(getMemberBannerData($member["id"], "gdapd", true))) ?>`));
+                        </script>
+                        <div id="member-banner"></div>
+                        <script>
+                            refreshBanner(false, true);
+                            document.getElementById("member-banner").id = "";
+                        </script>
+                    </div>
+                <?php endforeach; ?>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+    .list-group-item {
+        color: #fff;
+        background-color: #222;
+        border: 1px solid rgba(255, 255, 255, .125);
+    }
+
+    .list-group-item.disabled {
+        color: #fff;
+        background-color: #222;
+        border-color: rgba(255, 255, 255, .125);
+        opacity: .75;
+    }
+
+    .list-group-item:hover {
+        background-color: #252525;
+        color: #ddd;
+    }
+
+    .list-group-item:active, .list-group-item:focus {
+        background-color: #272727;
+        color: #bbb;
+    }
+    
+    a {
+        cursor: pointer;
+    }
+
+    .modal-header {
+        border-bottom: 1px solid #353738;
+    }
+
+    .modal-content {
+        border: 1px solid rgba(255, 255, 255, .2);
+        background-color: #111;
+    }
+
+    .btn-close {
+        filter: invert(1);
+    }
+</style>
+
+<script>
+    window._phpMembers = JSON.parse(atob(`<?= base64_encode(json_encode(array_values(scoreOrder(json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/gdapd/members.json"), true), "gdapd")))) ?>`));
+    window.members = {};
+
+    for (let member of window._phpMembers) {
+        window.members[member.id] = member;
+    }
+
+    function showMember(id) {
+        let member = members[id];
+        document.getElementById("modal-member").innerText = member["display_name"];
+        document.getElementById("modal-img").src = "/assets/uploads/pt-" + member["name"] + ".png";
+
+        Array.from(document.getElementsByClassName("modal-member-content")).forEach((i) => {
+            i.style.display = "none";
+        });
+        document.getElementById("modal-member-content-" + id).style.display = "";
+
+        let modal = new bootstrap.Modal(document.getElementById('member'));
+        modal.show();
+    }
+</script>
+
+<?php require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/footer.inc'; ?>