New paste
Recent API Trending Blog
Guest
 
Guest

gnmath

Guest
Aug 26th, 2026
13
0
Never
Not a member of GistPad yet? Sign Up, it unlocks many cool features!
None 60.07 KB | None | 0 0
copy raw download clone embed print report
  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>
RAW Paste Data Copied
Public Pastes
Hello
Not a member of Modern Pastebin Alternative yet?
Sign Up, it unlocks many cool features!
 
We use cookies for various purposes including analytics. By continuing to use Modern Pastebin Alternative, you agree to our use of cookies as described in the Privacy Policy.  OK, I Understand