add index.html

fun840 · Mar 27, 2024 · ce7c3e8 · ce7c3e8
commit ce7c3e8
Showing 1 changed file with 187 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,187 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Magic Circles and Runes</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.2/viewer.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.2/viewer.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
+    <style>
+        body {
+            margin: 0;
+            padding: 20px;
+            font-family: 'Public Sans', Arial, sans-serif;
+            background-color: #222;
+            color: #f8f8f8;
+            overflow-x: hidden;
+            display: grid;
+            grid-template-rows: auto 1fr;
+            height: min-content;
+        }
+
+        .section {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+
+        .section-title {
+            font-size: 24px;
+            margin-bottom: 10px;
+        }
+
+        .images-container {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            padding: 0;
+            width: 100%;
+            box-sizing: border-box;
+            overflow: auto;
+        }
+
+        .images-container img {
+            cursor: pointer;
+            outline: 1px solid black;
+            transition: none;
+            width: 150px;
+            height: 150px;
+            object-fit: cover;
+            margin: 5px;
+        }
+
+        .images-container img:hover {
+            filter: brightness(1.1);
+            outline: 2px solid #299abd;
+        }
+
+        .viewer-title {
+            color: white;
+            background-color: rgba(100, 100, 100, 0.8);
+            padding: 0.5em 1em;
+            backdrop-filter: blur(5px);
+            opacity: 1 !important;
+        }
+
+        .viewer-close {
+            color: white;
+        }
+
+        .input-container {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 20px;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .input-container textarea {
+            margin-right: 10px;
+            padding: 8px;
+            border: 1px solid #444;
+            border-radius: 4px;
+            font-size: 16px;
+            width: 80vw;
+            background-color: #333;
+            color: #f8f8f8;
+            resize: none;
+            box-sizing: border-box;
+            height: 200px;
+            overflow-y: auto;
+            margin-bottom: 10px;
+        }
+
+
+        .input-container button {
+            padding: 8px 20px;
+            background-color: #4a7af0;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 16px;
+            transition: background-color 0.3s ease;
+        }
+
+        .input-container button:hover {
+            background-color: #3c66c0;
+        }
+    </style>
+</head>
+<body>
+    <div class="section">
+        <h2 class="section-title">Magic Circles</h2>
+        <div class="input-container">
+            <textarea id="circlesInput" placeholder="Paste JSON or 'MAGIC_CIRCLES = []' format"></textarea>
+            <button id="loadCircles">Load Circles</button>
+        </div>
+        <div id="circles" class="images-container"></div>
+    </div>
+    <div class="section">
+        <h2 class="section-title">Magic Runes</h2>
+        <div class="input-container">
+            <textarea id="runesInput" placeholder="Paste JSON or 'MAGIC_RUNES = []' format"></textarea>
+            <button id="loadRunes">Load Runes</button>
+        </div>
+        <div id="runes" class="images-container"></div>
+    </div>
+
+    <script>
+        const displayImages = (type, imageUrls) => {
+            const container = document.getElementById(type);
+            container.innerHTML = "";
+            if (type === 'circles') {
+                imageUrls.forEach((url, index) => {
+                    const img = document.createElement("img");
+                    img.src = url;
+                    img.alt = `Circle ${index + 1}`;
+                    container.appendChild(img);
+                });
+            } else if (type === 'runes') {
+                imageUrls.forEach((url, index) => {
+                    const img = document.createElement("img");
+                    img.style.backgroundImage = `url(${url})`;
+                    img.style.height = '50px';
+                    img.style.width = '100%';
+                    img.style.contentVisibility = 'hidden';
+                    img.style.backgroundRepeat = 'repeat-x';
+                    img.style.backgroundSize = 'auto 50px';
+                    img.alt = `Rune ${index + 1}`;
+                    container.appendChild(img);
+                });
+            }
+            new Viewer(container, {
+                zoomRatio: 0.3,
+                transition: false,
+                url: img => img.src || img.style.backgroundImage.replace(/url\(['"](.+)['"]\)/, '$1'),
+            });
+        };
+
+        const extractImageUrls = (inputText) => {
+            const regex = /(?<=(MAGIC_CIRCLES|MAGIC_RUNES)\s*=\s*)\[.*?\]/gs;
+            const matches = inputText.match(regex);
+            if (!matches) return [];
+            const jsonArray = JSON.parse(matches[0].replace(/'/g, "\""));
+            return jsonArray;
+        };
+
+        const loadImages = (type) => {
+            const inputText = document.getElementById(`${type}Input`).value;
+            const imageUrls = extractImageUrls(inputText);
+            displayImages(type, imageUrls);
+        };
+
+        window.onload = async () => {
+            document.getElementById("circlesInput").value = await (await fetch("https://gist.githubusercontent.com/stepsword/37e6bbd96c0c912cf6d75862050fbf96/raw/5fd38406a6a93a54e7d28814d7b60f774eed61ee/magic_circles.txt")).text()
+            document.getElementById("runesInput").value = await (await fetch("https://gist.githubusercontent.com/stepsword/37e6bbd96c0c912cf6d75862050fbf96/raw/5fd38406a6a93a54e7d28814d7b60f774eed61ee/magic_runes.txt")).text()
+            loadImages('circles');
+            loadImages('runes');
+        };
+
+        document.getElementById("loadCircles").addEventListener("click", () => loadImages('circles'));
+        document.getElementById("loadRunes").addEventListener("click", () => loadImages('runes'));
+    </script>
+</body>
+</html>