1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>gn-math</title>
  8.     <!-- Google Fonts & FontAwesome -->
  9.     <link rel="preconnect" href="https://fonts.googleapis.com">;
  10.     <link rel="preconnect" href="https://fonts.gstatic.com"; crossorigin>
  11.     <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap"; rel="stylesheet">
  12.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">;
  13.  
  14.     <style>
  15.         :root {
  16.             --bg-color: #0a0c10;
  17.             --glass-bg: rgba(22, 27, 34, 0.55);
  18.             --glass-card: rgba(255, 255, 255, 0.03);
  19.             --glass-card-hover: rgba(255, 255, 255, 0.07);
  20.             --glass-border: rgba(255, 255, 255, 0.08);
  21.             --glass-border-focus: rgba(99, 102, 241, 0.5);
  22.             --accent-glow: rgba(99, 102, 241, 0.25);
  23.             --accent-primary: #6366f1;
  24.             --accent-hover: #4f46e5;
  25.             --text-primary: #f3f4f6;
  26.             --text-secondary: #9ca3af;
  27.             --shadow-glow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  28.         }
  29.  
  30.         body:not(.dark-mode) {
  31.             --bg-color: #f1f5f9;
  32.             --glass-bg: rgba(255, 255, 255, 0.65);
  33.             --glass-card: rgba(255, 255, 255, 0.7);
  34.             --glass-card-hover: rgba(255, 255, 255, 0.9);
  35.             --glass-border: rgba(0, 0, 0, 0.08);
  36.             --glass-border-focus: rgba(99, 102, 241, 0.5);
  37.             --accent-glow: rgba(99, 102, 241, 0.15);
  38.             --text-primary: #0f172a;
  39.             --text-secondary: #64748b;
  40.         }
  41.  
  42.         * {
  43.             box-sizing: border-box;
  44.             margin: 0;
  45.             padding: 0;
  46.             transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  47.         }
  48.  
  49.         body {
  50.             font-family: 'Plus Jakarta Sans', sans-serif;
  51.             background-color: var(--bg-color);
  52.             color: var(--text-primary);
  53.             min-height: 100vh;
  54.             padding: 40px 20px;
  55.             position: relative;
  56.             overflow-x: hidden;
  57.         }
  58.  
  59.         /* Glassmorphism ambient background glow circles */
  60.         body::before, body::after {
  61.             content: '';
  62.             position: fixed;
  63.             width: 450px;
  64.             height: 450px;
  65.             border-radius: 50%;
  66.             background: radial-gradient(circle, var(--accent-glow) 0%, rgba(0,0,0,0) 70%);
  67.             z-index: -1;
  68.             pointer-events: none;
  69.             animation: float 12s infinite alternate ease-in-out;
  70.         }
  71.         body::before { top: -100px; left: -100px; }
  72.         body::after { bottom: -100px; right: -100px; animation-delay: -6s; }
  73.  
  74.         @keyframes float {
  75.             0% { transform: translate(0, 0) scale(1); }
  76.             100% { transform: translate(60px, 40px) scale(1.1); }
  77.         }
  78.  
  79.         h1 {
  80.             text-align: center;
  81.             font-size: 2.5rem;
  82.             font-weight: 700;
  83.             letter-spacing: -0.025em;
  84.             margin-bottom: 25px;
  85.             background: linear-gradient(135deg, var(--text-primary) 30%, var(--accent-primary));
  86.             -webkit-background-clip: text;
  87.             -webkit-text-fill-color: transparent;
  88.         }
  89.  
  90.         /* Glass Search Bar */
  91.         .search-wrapper {
  92.             position: relative;
  93.             max-width: 800px;
  94.             margin: 0 auto 20px auto;
  95.         }
  96.  
  97.         .search-wrapper i {
  98.             position: absolute;
  99.             left: 18px;
  100.             top: 50%;
  101.             transform: translateY(-50%);
  102.             color: var(--text-secondary);
  103.             font-size: 1.1rem;
  104.         }
  105.  
  106.         #searchBar {
  107.             width: 100%;
  108.             padding: 14px 20px 14px 48px;
  109.             border: 1px solid var(--glass-border);
  110.             border-radius: 14px;
  111.             font-size: 15px;
  112.             background: var(--glass-bg);
  113.             backdrop-filter: blur(16px);
  114.             -webkit-backdrop-filter: blur(16px);
  115.             color: var(--text-primary);
  116.             outline: none;
  117.             box-shadow: var(--shadow-glow);
  118.         }
  119.  
  120.         #searchBar:focus {
  121.             border-color: var(--glass-border-focus);
  122.             box-shadow: 0 0 20px var(--accent-glow);
  123.         }
  124.  
  125.         /* Top Controls Bar */
  126.         #topControls {
  127.             display: flex;
  128.             justify-content: space-between;
  129.             align-items: center;
  130.             margin: 0 auto 25px auto;
  131.             max-width: 800px;
  132.             gap: 15px;
  133.             flex-wrap: wrap;
  134.         }
  135.  
  136.         #dataButtons {
  137.             display: flex;
  138.             gap: 10px;
  139.         }
  140.  
  141.         .btn-glass {
  142.             display: inline-flex;
  143.             align-items: center;
  144.             gap: 8px;
  145.             padding: 10px 18px;
  146.             border: 1px solid var(--glass-border);
  147.             border-radius: 12px;
  148.             background: var(--glass-bg);
  149.             backdrop-filter: blur(12px);
  150.             -webkit-backdrop-filter: blur(12px);
  151.             color: var(--text-primary);
  152.             font-size: 14px;
  153.             font-weight: 500;
  154.             cursor: pointer;
  155.             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  156.         }
  157.  
  158.         .btn-glass:hover {
  159.             background: var(--glass-card-hover);
  160.             transform: translateY(-2px);
  161.             border-color: var(--glass-border-focus);
  162.         }
  163.  
  164.         .btn-accent {
  165.             background: var(--accent-primary);
  166.             border-color: transparent;
  167.             color: #ffffff;
  168.         }
  169.  
  170.         .btn-accent:hover {
  171.             background: var(--accent-hover);
  172.             box-shadow: 0 6px 20px var(--accent-glow);
  173.         }
  174.  
  175.         /* Custom Select Dropdown */
  176.         .select-wrapper {
  177.             position: relative;
  178.         }
  179.  
  180.         #sortOptions {
  181.             padding: 10px 36px 10px 16px;
  182.             border: 1px solid var(--glass-border);
  183.             border-radius: 12px;
  184.             font-size: 14px;
  185.             font-weight: 500;
  186.             appearance: none;
  187.             background: var(--glass-bg);
  188.             backdrop-filter: blur(12px);
  189.             -webkit-backdrop-filter: blur(12px);
  190.             color: var(--text-primary);
  191.             cursor: pointer;
  192.             outline: none;
  193.         }
  194.  
  195.         .select-wrapper::after {
  196.             content: "\f078";
  197.             font-family: "Font Awesome 6 Free";
  198.             font-weight: 900;
  199.             font-size: 11px;
  200.             position: absolute;
  201.             right: 14px;
  202.             top: 50%;
  203.             transform: translateY(-50%);
  204.             color: var(--text-secondary);
  205.             pointer-events: none;
  206.         }
  207.  
  208.         /* Container & Cards */
  209.         .zone-wrapper {
  210.             max-width: 1000px;
  211.             margin: 0 auto;
  212.         }
  213.  
  214.         .zone-count {
  215.             text-align: center;
  216.             font-size: 14px;
  217.             font-weight: 500;
  218.             margin-bottom: 20px;
  219.             color: var(--text-secondary);
  220.         }
  221.  
  222.         #container {
  223.             display: grid;
  224.             grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  225.             gap: 20px;
  226.         }
  227.  
  228.         .zone-item {
  229.             background: var(--glass-card);
  230.             border: 1px solid var(--glass-border);
  231.             backdrop-filter: blur(16px);
  232.             -webkit-backdrop-filter: blur(16px);
  233.             border-radius: 16px;
  234.             overflow: hidden;
  235.             text-align: center;
  236.             cursor: pointer;
  237.             box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  238.             display: flex;
  239.             flex-direction: column;
  240.             opacity: 0;
  241.             animation: fadeIn 0.4s ease forwards;
  242.         }
  243.  
  244.         @keyframes fadeIn {
  245.             to { opacity: 1; transform: translateY(0); }
  246.             from { opacity: 0; transform: translateY(10px); }
  247.         }
  248.  
  249.         .zone-item:hover {
  250.             transform: translateY(-6px) scale(1.02);
  251.             background: var(--glass-card-hover);
  252.             border-color: var(--glass-border-focus);
  253.             box-shadow: 0 12px 30px var(--accent-glow);
  254.         }
  255.  
  256.         .img-container {
  257.             width: 100%;
  258.             height: 120px;
  259.             overflow: hidden;
  260.             background: rgba(0, 0, 0, 0.2);
  261.             position: relative;
  262.         }
  263.  
  264.         .zone-item img {
  265.             width: 100%;
  266.             height: 100%;
  267.             object-fit: cover;
  268.             transition: transform 0.4s ease;
  269.         }
  270.  
  271.         .zone-item:hover img {
  272.             transform: scale(1.08);
  273.         }
  274.  
  275.         .zone-item button {
  276.             width: 100%;
  277.             padding: 12px 10px;
  278.             border: none;
  279.             background: transparent;
  280.             color: var(--text-primary);
  281.             font-size: 14px;
  282.             font-weight: 600;
  283.             cursor: pointer;
  284.             margin-top: auto;
  285.             text-overflow: ellipsis;
  286.             white-space: nowrap;
  287.             overflow: hidden;
  288.         }
  289.  
  290.         /* Spinner & Loading State */
  291.         .loading-spinner {
  292.             grid-column: 1 / -1;
  293.             display: flex;
  294.             flex-direction: column;
  295.             align-items: center;
  296.             justify-content: center;
  297.             padding: 60px 0;
  298.             color: var(--text-secondary);
  299.             gap: 15px;
  300.         }
  301.  
  302.         .spinner {
  303.             width: 40px;
  304.             height: 40px;
  305.             border: 3px solid var(--glass-border);
  306.             border-top: 3px solid var(--accent-primary);
  307.             border-radius: 50%;
  308.             animation: spin 0.8s linear infinite;
  309.         }
  310.  
  311.         @keyframes spin {
  312.             to { transform: rotate(360deg); }
  313.         }
  314.  
  315.         /* Modal Overlay & Popup Window */
  316.         #modalOverlay {
  317.             display: none;
  318.             position: fixed;
  319.             top: 0;
  320.             left: 0;
  321.             width: 100vw;
  322.             height: 100vh;
  323.             background: rgba(0, 0, 0, 0.6);
  324.             backdrop-filter: blur(8px);
  325.             -webkit-backdrop-filter: blur(8px);
  326.             z-index: 999;
  327.             opacity: 0;
  328.             transition: opacity 0.3s ease;
  329.         }
  330.  
  331.         #zoneViewer {
  332.             display: none;
  333.             position: fixed;
  334.             top: 50%;
  335.             left: 50%;
  336.             transform: translate(-50%, -45%) scale(0.95);
  337.             width: 85%;
  338.             height: 85%;
  339.             max-width: 1200px;
  340.             background: var(--glass-bg);
  341.             backdrop-filter: blur(24px);
  342.             -webkit-backdrop-filter: blur(24px);
  343.             border: 1px solid var(--glass-border);
  344.             border-radius: 20px;
  345.             z-index: 1000;
  346.             box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  347.             flex-direction: column;
  348.             overflow: hidden;
  349.             opacity: 0;
  350.             transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  351.         }
  352.  
  353.         #zoneViewer.active {
  354.             display: flex;
  355.             opacity: 1;
  356.             transform: translate(-50%, -50%) scale(1);
  357.         }
  358.  
  359.         #modalOverlay.active {
  360.             display: block;
  361.             opacity: 1;
  362.         }
  363.  
  364.         #zoneInfo {
  365.             display: flex;
  366.             justify-content: space-between;
  367.             align-items: center;
  368.             padding: 16px 24px;
  369.             background: rgba(255, 255, 255, 0.03);
  370.             border-bottom: 1px solid var(--glass-border);
  371.         }
  372.  
  373.         #zoneTitle {
  374.             font-weight: 600;
  375.             font-size: 1.1rem;
  376.             display: flex;
  377.             align-items: center;
  378.             gap: 10px;
  379.         }
  380.  
  381.         #zoneId {
  382.             font-size: 0.85rem;
  383.             color: var(--text-secondary);
  384.             background: var(--glass-card);
  385.             padding: 2px 8px;
  386.             border-radius: 6px;
  387.             border: 1px solid var(--glass-border);
  388.         }
  389.  
  390.         #controls {
  391.             display: flex;
  392.             gap: 8px;
  393.         }
  394.  
  395.         #zoneFrame {
  396.             width: 100%;
  397.             flex-grow: 1;
  398.             border: none;
  399.             background: transparent;
  400.         }
  401.  
  402.         /* Floating Theme Toggle */
  403.         #darkModeToggle {
  404.             position: fixed;
  405.             bottom: 24px;
  406.             right: 24px;
  407.             width: 50px;
  408.             height: 50px;
  409.             border-radius: 50%;
  410.             padding: 0;
  411.             display: flex;
  412.             align-items: center;
  413.             justify-content: center;
  414.             font-size: 1.2rem;
  415.             z-index: 100;
  416.         }
  417.  
  418.         /* ==========================================================================
  419.            HIGH-PERFORMANCE GAME MODE OVERRIDES
  420.            Disables heavy rendering effects while playing to ensure maximum FPS
  421.            ========================================================================== */
  422.         .zone-item, #zoneViewer, body::before, body::after {
  423.             will-change: transform, opacity;
  424.         }
  425.  
  426.         body.game-active::before,
  427.         body.game-active::after {
  428.             animation-play-state: paused !important;
  429.             display: none !important;
  430.         }
  431.  
  432.         body.game-active .search-wrapper #searchBar,
  433.         body.game-active .btn-glass,
  434.         body.game-active .zone-item {
  435.             backdrop-filter: none !important;
  436.             -webkit-backdrop-filter: none !important;
  437.         }
  438.  
  439.         body.game-active #container {
  440.             visibility: hidden;
  441.         }
  442.  
  443.         body.game-active #modalOverlay {
  444.             backdrop-filter: none !important;
  445.             -webkit-backdrop-filter: none !important;
  446.             background: rgba(0, 0, 0, 0.85);
  447.         }
  448.  
  449.         body.game-active #zoneViewer {
  450.             backdrop-filter: none !important;
  451.             -webkit-backdrop-filter: none !important;
  452.             background: #11141a;
  453.         }
  454.     </style>
  455. </head>
  456.  
  457. <body class="dark-mode">
  458.     <h1><i class="fa-solid fa-shapes"></i> gn-math</h1>
  459.  
  460.     <div class="search-wrapper">
  461.         <i class="fa-solid fa-magnifying-glass"></i>
  462.         <input type="text" id="searchBar" placeholder="Search zones..." onkeyup="filterZones()">
  463.     </div>
  464.  
  465.     <div id="topControls">
  466.         <div id="dataButtons">
  467.             <button class="btn-glass" onclick="saveData()">
  468.                 <i class="fa-solid fa-download"></i> Save Data
  469.             </button>
  470.             <button class="btn-glass" onclick="document.getElementById('file').click()">
  471.                 <i class="fa-solid fa-upload"></i> Load Data
  472.             </button>
  473.             <input type="file" id="file" style="display:none" onchange="loadData(event)" />
  474.         </div>
  475.         <div class="select-wrapper">
  476.             <select id="sortOptions" onchange="sortZones()">
  477.                 <option value="name">Sort by Name</option>
  478.                 <option value="id">Sort by ID</option>
  479.                 <option value="popular">Sort by Popularity</option>
  480.             </select>
  481.         </div>
  482.     </div>
  483.  
  484.     <div class="zone-wrapper">
  485.         <div id="zoneCount" class="zone-count"></div>
  486.         <div id="container">
  487.             <div class="loading-spinner">
  488.                 <div class="spinner"></div>
  489.                 <span>Fetching zones...</span>
  490.             </div>
  491.         </div>
  492.     </div>      
  493.  
  494.     <!-- Glass Modal Window -->
  495.     <div id="modalOverlay" onclick="closeZone()"></div>
  496.     <div id="zoneViewer">
  497.         <div id="zoneInfo">
  498.             <div id="zoneTitle">
  499.                 <span id="zoneName"></span> 
  500.                 <span id="zoneId"></span>
  501.             </div>
  502.             <div id="controls">
  503.                 <button class="btn-glass" onclick="fullscreenZone()"><i class="fa-solid fa-expand"></i> Fullscreen</button>
  504.                 <button class="btn-glass" onclick="aboutBlank()"><i class="fa-solid fa-up-right-from-square"></i> about:blank</button>
  505.                 <button class="btn-glass btn-accent" onclick="closeZone()"><i class="fa-solid fa-xmark"></i> Close</button>
  506.             </div>
  507.         </div>
  508.         <iframe id="zoneFrame"></iframe>
  509.     </div>
  510.  
  511.     <button id="darkModeToggle" class="btn-glass">
  512.         <i class="fa-solid fa-moon"></i>
  513.     </button>
  514.  
  515.     <script>
  516.         const container = document.getElementById('container');
  517.         const zoneViewer = document.getElementById('zoneViewer');
  518.         const modalOverlay = document.getElementById('modalOverlay');
  519.         let zoneFrame = document.getElementById('zoneFrame');
  520.         const searchBar = document.getElementById('searchBar');
  521.         const sortOptions = document.getElementById('sortOptions');
  522.  
  523.         const zonesURL = "https://cdn.jsdelivr.net/gh/adatskov-wcpss/gn-assets@main/zones.json";;
  524.         const coverURL = "https://cdn.jsdelivr.net/gh/adatskov-wcpss/gn-covers@main";;
  525.         const htmlURL = "https://cdn.jsdelivr.net/gh/adatskov-wcpss/gn-html@main";;
  526.  
  527.         let zones = [];
  528.         let popularityData = {};
  529.  
  530.         async function listZones() {
  531.             try {
  532.                 const response = await fetch(zonesURL);
  533.                 const json = await response.json();
  534.                 zones = json;
  535.                 await fetchPopularity();
  536.                 sortZones();
  537.  
  538.                 const search = new URLSearchParams(window.location.search);
  539.                 const id = search.get('id');
  540.                 if (id) {
  541.                     const zone = zones.find(zone => zone.id + '' == id + '');
  542.                     if (zone) openZone(zone);
  543.                 }
  544.             } catch (error) {
  545.                 container.innerHTML = `<div class="loading-spinner"><i class="fa-solid fa-triangle-exclamation" style="font-size:2rem;color:#ef4444;"></i><span>Error loading zones: ${error.message}</span></div>`;
  546.             }
  547.         }
  548.  
  549.         async function fetchPopularity() {
  550.             try {
  551.                 const response = await fetch("https://data.jsdelivr.com/v1/stats/packages/gh/gn-math/html@main/files?period=year";);
  552.                 const data = await response.json();
  553.                 data.forEach(file => {
  554.                     const idMatch = file.name.match(/\/(\d+)\.html$/);
  555.                     if (idMatch) {
  556.                         const id = parseInt(idMatch[1]);
  557.                         popularityData[id] = file.hits.total;
  558.                     }
  559.                 });
  560.             } catch (error) {
  561.                 popularityData[0] = 0;
  562.             }
  563.         }
  564.  
  565.         function sortZones() {
  566.             const sortBy = sortOptions.value;
  567.             if (sortBy === 'name') {
  568.                 zones.sort((a, b) => a.name.localeCompare(b.name));
  569.             } else if (sortBy === 'id') {
  570.                 zones.sort((a, b) => a.id - b.id);
  571.             } else if (sortBy === 'popular') {
  572.                 zones.sort((a, b) => (popularityData[b.id] || 0) - (popularityData[a.id] || 0));
  573.             }
  574.             zones.sort((a, b) => (a.id === -1 ? -1 : b.id === -1 ? 1 : 0));
  575.             displayZones(zones);
  576.         }
  577.  
  578.         function displayZones(zones) {
  579.             container.innerHTML = "";
  580.             zones.forEach(file => {
  581.                 const zoneItem = document.createElement("div");
  582.                 zoneItem.className = "zone-item";
  583.                 zoneItem.onclick = () => openZone(file);
  584.  
  585.                 const imgWrapper = document.createElement("div");
  586.                 imgWrapper.className = "img-container";
  587.  
  588.                 const img = document.createElement("img");
  589.                 img.loading = "lazy";
  590.                 img.src = file.cover.replace("{COVER_URL}", coverURL).replace("{HTML_URL}", htmlURL);
  591.                 imgWrapper.appendChild(img);
  592.                 zoneItem.appendChild(imgWrapper);
  593.  
  594.                 const button = document.createElement("button");
  595.                 button.textContent = file.name;
  596.                 button.onclick = (event) => {
  597.                     event.stopPropagation();
  598.                     openZone(file);
  599.                 };
  600.                 zoneItem.appendChild(button);
  601.                 container.appendChild(zoneItem);
  602.             });
  603.  
  604.             if (zones.length === 0) {
  605.                 container.innerHTML = `<div class="loading-spinner"><i class="fa-solid fa-magnifying-glass" style="font-size:2rem;"></i><span>No zones found.</span></div>`;
  606.                 document.getElementById("zoneCount").textContent = ``;
  607.             } else {
  608.                 document.getElementById("zoneCount").textContent = `Loaded ${zones.length} Zones`;
  609.             }
  610.         }
  611.  
  612.         function filterZones() {
  613.             const query = searchBar.value.toLowerCase();
  614.             const filteredZones = zones.filter(zone => zone.name.toLowerCase().includes(query));
  615.             displayZones(filteredZones);
  616.         }
  617.  
  618.         function openZone(file) {
  619.             if (file.url.startsWith("http")) {
  620.                 window.location.href = file.url;
  621.             } else {
  622.                 const url = file.url.replace("{COVER_URL}", coverURL).replace("{HTML_URL}", htmlURL);
  623.                 fetch(url).then(response => response.text()).then(html => {
  624.                     if (zoneFrame.contentDocument === null) {
  625.                         zoneFrame = document.createElement("iframe");
  626.                         zoneFrame.id = "zoneFrame";
  627.                         zoneViewer.appendChild(zoneFrame);
  628.                     }
  629.                     zoneFrame.contentDocument.open();
  630.                     zoneFrame.contentDocument.write(html);
  631.                     zoneFrame.contentDocument.close();
  632.  
  633.                     document.getElementById('zoneName').textContent = file.name;
  634.                     document.getElementById('zoneId').textContent = `#${file.id}`;
  635.  
  636.                     // Enable high performance game mode
  637.                     document.body.classList.add('game-active');
  638.                     modalOverlay.classList.add('active');
  639.                     zoneViewer.classList.add('active');
  640.                 }).catch(error => alert("Failed to load zone: " + error));
  641.             }
  642.         }
  643.  
  644.         function aboutBlank() {
  645.             const newWindow = window.open("about:blank", "_blank");
  646.             const cleanId = document.getElementById('zoneId').textContent.replace('#', '');
  647.             let zone = zones.find(zone => zone.id + '' === cleanId).url.replace("{COVER_URL}", coverURL).replace("{HTML_URL}", htmlURL);
  648.             fetch(zone).then(response => response.text()).then(html => {
  649.                 if (newWindow) {
  650.                     newWindow.document.open();
  651.                     newWindow.document.write(html);
  652.                     newWindow.document.close();
  653.                 }
  654.             })
  655.         }
  656.  
  657.         function closeZone() {
  658.             zoneViewer.classList.remove('active');
  659.             modalOverlay.classList.remove('active');
  660.  
  661.             // Disable high performance game mode & restore UI effects
  662.             document.body.classList.remove('game-active');
  663.  
  664.             setTimeout(() => {
  665.                 if (zoneFrame && zoneFrame.parentNode) {
  666.                     zoneViewer.removeChild(zoneFrame);
  667.                 }
  668.             }, 300);
  669.         }
  670.  
  671.         function fullscreenZone() {
  672.             if (zoneFrame.requestFullscreen) {
  673.                 zoneFrame.requestFullscreen();
  674.             } else if (zoneFrame.mozRequestFullScreen) {
  675.                 zoneFrame.mozRequestFullScreen();
  676.             } else if (zoneFrame.webkitRequestFullscreen) {
  677.                 zoneFrame.webkitRequestFullscreen();
  678.             } else if (zoneFrame.msRequestFullscreen) {
  679.                 zoneFrame.msRequestFullscreen();
  680.             }
  681.         }
  682.  
  683.         function saveData() {
  684.             let data = JSON.stringify(localStorage) + "\n\n|\n\n" + document.cookie;
  685.             const link = document.createElement("a");
  686.             link.href = URL.createObjectURL(new Blob([data], { type: "text/plain" }));
  687.             link.download = `${Date.now()}.data`;
  688.             document.body.appendChild(link);
  689.             link.click();
  690.             document.body.removeChild(link);
  691.         }
  692.  
  693.         function loadData(event) {
  694.             const file = event.target.files[0];
  695.             if (!file) return;
  696.             const reader = new FileReader();
  697.             reader.onload = function (e) {
  698.                 const content = e.target.result;
  699.                 const [localStorageData, cookieData] = content.split("\n\n|\n\n");
  700.                 try {
  701.                     const parsedData = JSON.parse(localStorageData);
  702.                     for (let key in parsedData) {
  703.                         localStorage.setItem(key, parsedData[key]);
  704.                     }
  705.                 } catch (error) {
  706.                     console.error(error);
  707.                 }
  708.                 if (cookieData) {
  709.                     const cookies = cookieData.split("; ");
  710.                     cookies.forEach(cookie => {
  711.                         document.cookie = cookie;
  712.                     });
  713.                 }
  714.                 alert("Data successfully loaded!");
  715.             };
  716.             reader.readAsText(file);
  717.         }
  718.  
  719.         const darkModeToggle = document.getElementById('darkModeToggle');
  720.         darkModeToggle.addEventListener('click', () => {
  721.             document.body.classList.toggle('dark-mode');
  722.             const icon = darkModeToggle.querySelector('i');
  723.             if (document.body.classList.contains('dark-mode')) {
  724.                 icon.className = 'fa-solid fa-moon';
  725.             } else {
  726.                 icon.className = 'fa-solid fa-sun';
  727.             }
  728.         });
  729.  
  730.         listZones();
  731.     </script>
  732. </body>
  733.  
  734. </html>