Unblocked Games HTML Template with Search & Settings

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html lang="en">
    <head>
        <base href="https://cdn.jsdelivr.net/gh/gn-math/gn-math.github.io@main">
        <link rel="icon" type="image/png" href="favicon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon.png">
        <link rel="apple-touch-icon" href="/favicon.png">
        <style>
            :root {
                --primary: #00FFFF
                --primary-hover: #e91e47;
                --primary-light: rgba(0, 255, 255, 1);
                --primary-lighter: rgba(0, 255, 255, 1);
                --accent: #00FFFF;
                --accent-light: rgba(0, 255, 255, 1);
                --success: #10b981;
                --warning: #f59e0b;
                --text: #00FFFF
                --text-muted: #6b7280;
                --text-light: #9ca3af;
                --bg: #00FFFF;
                --bg-secondary: #00FFFF;
                --surface: #ffffff;
                --surface-hover: #f1f5f9;
                --border: #e2e8f0;
                --border-light: #f1f5f9;
                --glass: rgba(255, 255, 255, 0.8);
                --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
                --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
                --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
                --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
                --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
                --shadow-glow: 0 0 20px rgba(252, 38, 81, 0.3);
                --radius: 12px;
                --radius-sm: 8px;
                --radius-lg: 16px;
                --radius-xl: 20px;
                --gradient-primary: linear-gradient(135deg, #fc2651 0%, #e91e47 100%);
                --gradient-accent: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
                --gradient-surface: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            }
            
            .dark-mode {
                --primary: #00FFFF
                --primary-hover: #ff4d75;
                --primary-light: rgba(252, 38, 81, 0.15);
                --primary-lighter: rgba(252, 38, 81, 0.08);
                --accent: #a855f7;
                --accent-light: rgba(168, 85, 247, 0.15);
                --success: #34d399;
                --warning: #fbbf24;
                --text: #f1f5f9;
                --text-muted: #94a3b8;
                --text-light: #64748b;
                --bg: #0f172a;
                --bg-secondary: #1e293b;
                --surface: #1e293b;
                --surface-hover: #334155;
                --border: #334155;
                --border-light: #475569;
                --glass: rgba(30, 41, 59, 0.8);
                --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.4);
                --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.5), 0 1px 2px -1px rgb(0 0 0 / 0.5);
                --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
                --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.6), 0 4px 6px -4px rgb(0 0 0 / 0.6);
                --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.7), 0 8px 10px -6px rgb(0 0 0 / 0.7);
                --shadow-glow: 0 0 20px rgba(252, 38, 81, 0.4);
                --gradient-primary: linear-gradient(135deg, #00FFFF 0%,#ff4d75 100%);
                --gradient-accent: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
                --gradient-surface: linear-gradient(135deg, #1e293b 0%, #334155 100%);
            }
            
            * {
                box-sizing: border-box;
            }
            
            body {
                font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
                line-height: 1.6;
                margin: 0;
                padding: 0;
                background: var(--bg);
                color: var(--text);
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                font-weight: 400;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
            
            header {
                background: var(--gradient-primary);
                color: white;
                position: sticky;
                top: 0;
                z-index: 100;
                box-shadow: var(--shadow-lg);
                backdrop-filter: blur(20px);
            }
            
            .header-content {
                max-width: 1200px;
                margin: 0 auto;
                padding: 1.25rem 1rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 1.5rem;
            }
            
            .logo {
                font-size: 1.75rem;
                font-weight: 800;
                letter-spacing: -0.02em;
                background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.8) 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }
            
            .search-container {
                display: flex;
                flex: 1;
                max-width: 500px;
                gap: 0.75rem;
            }
            
            #searchBar {
                flex: 1;
                padding: 0.875rem 1rem;
                border: 0;
                border-radius: var(--radius);
                background: var(--glass);
                backdrop-filter: blur(20px);
                color: var(--text);
                font-size: 15px;
                outline: none;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                box-shadow: var(--shadow-sm);
            }
            
            #searchBar:focus {
                background: var(--text);
                box-shadow: 0 0 0 3px rgba(252, 38, 81, 0.25), var(--shadow);
                transform: translateY(-1px);
                color: var(--glass);
            }
            
            #searchBar::placeholder {
                color: var(--text-muted);
            }
            
            #sortOptions {
                padding: 0.875rem 1rem;
                border: 0;
                border-radius: var(--radius);
                background: var(--glass);
                backdrop-filter: blur(20px);
                color: var(--text-muted);
                font-size: 15px;
                cursor: pointer;
                outline: none;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                min-width: 130px;
                box-shadow: var(--shadow-sm);
            }
            
            #sortOptions:hover {
                background: var(--text);
                transform: translateY(-1px);
                box-shadow: var(--shadow);
                color: var(--glass);
            }
            
            .control-buttons {
                display: flex;
                gap: 0.5rem;
            }
            
            #settings {
                background: rgba(255, 255, 255, 0.1);
                border: 0;
                color: white;
                font-size: 1.2rem;
                cursor: pointer;
                padding: 0.75rem;
                border-radius: var(--radius);
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                width: 44px;
                height: 44px;
                display: flex;
                align-items: center;
                justify-content: center;
                backdrop-filter: blur(20px);
            }
            
            #settings:hover {
                background: rgba(255, 255, 255, 0.2);
                transform: translateY(-1px);
                box-shadow: var(--shadow);
            }
            
            main {
                max-width: 1200px;
                margin: 0 auto;
                padding: 2rem 1rem;
            }
            
            #zoneCount {
                margin: 0 0 1.5rem;
                font-size: 14px;
                color: var(--text-muted);
                font-weight: 600;
                display: flex;
                align-items: center;
                gap: 0.5rem;
            }
            
            #zoneCount::before {
                content: '';
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background: var(--primary);
            }
            
            #container,
            #featuredZones {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
                gap: 1.5rem;
            }
            
            .zone-item {
                background: var(--gradient-surface);
                border: 1px solid var(--border);
                border-radius: var(--radius-lg);
                overflow: hidden;
                cursor: pointer;
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                display: flex;
                flex-direction: column;
                position: relative;
                box-shadow: var(--shadow-sm);
            }
            
            .zone-item:hover {
                transform: translateY(-8px) scale(1.02);
                box-shadow: var(--shadow-xl);
                border-color: var(--primary);
            }
            
            .zone-item:hover::before {
                opacity: 1;
            }
            
            .zone-item::before {
                content: '';
                position: absolute;
                inset: 0;
                background: var(--primary-light);
                opacity: 0;
                transition: opacity 0.4s ease;
                pointer-events: none;
                z-index: 1;
            }
            
            .zone-item img {
                width: 100%;
                aspect-ratio: 1;
                object-fit: cover;
                display: block;
                background: var(--border-light);
                transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            }
            
            .zone-item:hover img {
                transform: scale(1.05);
            }
            
            .zone-item button {
                background: transparent;
                color: var(--text);
                border: 0;
                padding: 1.25rem 1rem;
                cursor: pointer;
                font-weight: 600;
                font-size: 14px;
                line-height: 1.4;
                text-align: center;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                min-height: 70px;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                z-index: 2;
            }
            
            .zone-item:hover button {
                color: var(--primary);
                background: rgba(252, 38, 81, 0.05);
            }
            
            #zoneViewer {
                position: fixed;
                inset: 0;
                background: var(--bg);
                z-index: 1000;
                display: none;
                flex-direction: column;
                animation: slideInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            
            @keyframes slideInUp {
                from {
                    transform: translateY(100%);
                }
                to {
                    transform: translateY(0);
                }
            }
            
            .zone-header {
                background: var(--gradient-primary);
                color: white;
                padding: 1rem 1.5rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                box-shadow: var(--shadow-lg);
            }
            
            .zone-title {
                flex: 1;
                min-width: 0;
            }
            
            #zoneName {
                font-size: 1.25rem;
                font-weight: 700;
                margin: 0 0 0.25rem;
                line-height: 1.3;
            }
            
            #zoneId {
                display: none;
            }
            
            #zoneAuthor {
                font-size: 14px;
                color: rgba(255, 255, 255, 0.8);
                text-decoration: none;
                transition: all 0.2s ease;
                font-weight: 500;
            }
            
            #zoneAuthor:hover {
                color: white;
                text-decoration: underline;
            }
            
            .zone-controls {
                display: flex;
                gap: 0.75rem;
            }
            
            .zone-controls button {
                background: rgba(255, 255, 255, 0.1);
                border: 1px solid rgba(255, 255, 255, 0.3);
                color: white;
                padding: 0.625rem 1rem;
                border-radius: var(--radius);
                cursor: pointer;
                font-size: 14px;
                font-weight: 600;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                backdrop-filter: blur(20px);
            }
            
            .zone-controls button:hover {
                background: rgba(255, 255, 255, 0.2);
                border-color: rgba(255, 255, 255, 0.5);
                transform: translateY(-1px);
                box-shadow: var(--shadow);
            }
            
            #zoneFrame {
                flex-grow: 1;
                border: none;
                width: 90%;
                height: 90%;
            }
            
            #popupOverlay {
                position: fixed;
                inset: 0;
                background: rgba(0, 0, 0, 0.6);
                backdrop-filter: blur(8px);
                display: none;
                align-items: center;
                justify-content: center;
                z-index: 2000;
                padding: 1rem;
                animation: fadeIn 0.3s ease;
            }
            
            @keyframes fadeIn {
                from {
                    opacity: 0;
                }
                to {
                    opacity: 1;
                }
            }
            
            .popup {
                background: var(--surface);
                border-radius: var(--radius-lg);
                box-shadow: var(--shadow-xl);
                width: 100%;
                max-width: 520px;
                max-height: 80vh;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                border: 1px solid var(--border);
                animation: slideInScale 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            
            @keyframes slideInScale {
                from {
                    transform: scale(0.9) translateY(20px);
                    opacity: 0;
                }
                to {
                    transform: scale(1) translateY(0);
                    opacity: 1;
                }
            }
            
            .popup-header {
                background: var(--gradient-primary);
                color: white;
                padding: 1.25rem 1.5rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            
            #popupTitle {
                margin: 0;
                font-size: 1.25rem;
                font-weight: 700;
            }
            
            #popupClose {
                background: rgba(255, 255, 255, 0.1);
                border: 0;
                color: white;
                font-size: 1.25rem;
                cursor: pointer;
                padding: 0.5rem;
                border-radius: var(--radius);
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                line-height: 1;
                width: 36px;
                height: 36px;
                display: flex;
                align-items: center;
                justify-content: center;
                backdrop-filter: blur(20px);
            }
            
            #popupClose:hover {
                background: rgba(255, 255, 255, 0.2);
                transform: scale(1.1);
            }
            
            #popupBody {
                padding: 1.5rem;
                overflow-y: auto;
                color: var(--text);
            }
            
            #popupBody input[type="text"],
            #popupBody input[type="file"] {
                width: 100%;
                padding: 0.875rem 1rem;
                margin-bottom: 1.25rem;
                border: 1px solid var(--border);
                border-radius: var(--radius);
                background: var(--bg-secondary);
                color: var(--text);
                font-size: 15px;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                outline: none;
            }
            
            #popupBody input[type="text"]:focus,
            #popupBody input[type="file"]:focus {
                border-color: var(--primary);
                box-shadow: 0 0 0 3px rgba(252, 38, 81, 0.1);
                transform: translateY(-1px);
            }
            
            #settings-button {
                width: 100%;
                padding: 0.875rem 1rem;
                background: var(--gradient-primary);
                color: white;
                border: 0;
                border-radius: var(--radius);
                cursor: pointer;
                font-size: 15px;
                font-weight: 600;
                margin-bottom: 1rem;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                box-shadow: var(--shadow-sm);
            }
            
            #settings-button:hover {
                transform: translateY(-2px);
                box-shadow: var(--shadow-lg);
            }
            
            #settings-button:active {
                transform: translateY(0);
            }
            
            footer {
                background: var(--bg-secondary);
                border-top: 1px solid var(--border);
                padding: 2rem 1rem;
                margin-top: 3rem;
                text-align: center;
            }
            
            .footer-links {
                display: flex;
                justify-content: center;
                gap: 2rem;
                flex-wrap: wrap;
            }
            
            .footer-links a {
                color: var(--primary);
                text-decoration: none;
                font-weight: 600;
                font-size: 15px;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                padding: 0.5rem 1rem;
                border-radius: var(--radius);
            }
            
            .footer-links a:hover {
                color: var(--primary-hover);
                background: var(--primary-light);
                transform: translateY(-1px);
            }
            
            @media (max-width: 768px) {
                .header-content {
                    flex-direction: column;
                    gap: 1rem;
                    padding: 1rem;
                }
            
                .search-container {
                    width: 100%;
                    max-width: none;
                }
            
                main {
                    padding: 1.5rem 1rem;
                }
            
                #container,
                #featuredZones {
                    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
                    gap: 1.25rem;
                }
            
                .zone-item button {
                    padding: 1rem 0.75rem;
                    min-height: 65px;
                    font-size: 13px;
                }
            
                .footer-links {
                    gap: 1.5rem;
                }
            }
            
            @media (max-width: 480px) {
                #container,
                #featuredZones {
                    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
                    gap: 1rem;
                }
            
                .popup {
                    margin: 0.5rem;
                }
            
                .zone-item:hover {
                    transform: translateY(-4px) scale(1.01);
                }
            }
        </style>
     
        <script>
            window.dataLayer = window.dataLayer || [];
    
            function gtag() {
                dataLayer.push(arguments);
            }
            gtag('js', new Date());
            gtag('config', 'G-WX5VS54ZDW');
        </script>
        <script async src="https://fundingchoicesmessages.google.com/i/pub-5521219086088837?ers=1"></script><script>(function() {function signalGooglefcPresent() {if (!window.frames['googlefcPresent']) {if (document.body) {const iframe = document.createElement('iframe'); iframe.style = 'width: 0; height: 0; border: none; z-index: -1000; left: -1000px; top: -1000px;'; iframe.style.display = 'none'; iframe.name = 'googlefcPresent'; document.body.appendChild(iframe);} else {setTimeout(signalGooglefcPresent, 0);}}}signalGooglefcPresent();})();</script>
        <script src="https://cdn.jsdelivr.net/gh/gn-math/gn-math.github.io@main/gnmath.js"></script>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Awquis V2 forehead massive</title>
        <meta name="title" content="Awquis V2">
        <meta name="description" content="dady chill im here for you">
        <meta property="og:type" content="website">
        <meta property="og:title" content="Awquis V2">
        <meta property="og:description" content="Play unbl*cked games like Crazy Cattle 3D and DriveMad on Awquis V2. Fast, free, no downloads—perfect for school or home.">
        <meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:titlAwquis V2">
        <meta name="twitter:description" content="Play unbl*cked games like Crazy Cattle 3D and DriveMad on Awquis V2. Fast, free, no downloads—perfect for school or home.">
    </head>
    <body class="dark-mode">
        <header>
            <div class="header-content">
                <div class="logo">Awquis V2</div>
                <div class="search-container">
                    <input type="text" id="searchBar" placeholder="Search games...">
                    <select id="sortOptions" onchange="sortZones()">
                        <option value="name">Name</option>
                        <option value="id">ID (Date)</option>
                        <option value="popular">Popular</option>
                    </select>
                </div>
                <div class="control-buttons">
                    <button id="settings" style="background-color: var(--primary-color); color: white; border: none; border-radius: 4px; padding: 0.5rem 1rem; font-size: 16px; cursor: pointer;">Settings</button>
                </div>
            </div>
        </header>
    
        <main>
            <br>
            <details id="allZonesWrapper" open>
                <summary id="allSummary">All Zones</summary>
                <div id="container">Loading...</div>
            </details>
        </main>
    
        <div id="zoneViewer">
            <div class="zone-header">
                <div class="zone-title">
                    <h2 id="zoneName">zone</h2>
                    <span id="zoneId" style="display: none;"></span>
                    <a id="zoneAuthor" href="#" target="_blank">by Author</a>
                </div>
                <div class="zone-controls">
                    <button onclick="fullscreenZone()">Fullscreen</button>
                    <button onclick="aboutBlank()">Open in New Tab</button>
                    <button onclick="downloadZone()">Download</button>
                    <button onclick="closeZone()">Close</button>
                </div>
            </div>
            <iframe id="zoneFrame"></iframe>
        </div>
    
        <div id="popupOverlay">
            <div class="popup">
                <div class="popup-header">
                    <h3 id="popupTitle">Title</h3>
                    <button id="popupClose" onclick="closePopup()">×</button>
                </div>
                <div id="popupBody">
                    Content will be here
                </div>
            </div>
        </div>
    
        <footer>
            <div class="footer-links">
                <a href="#" onclick="showContact(); return false;">Contact</a>
                <a href="#" onclick="loadPrivacy(); return false;">Privacy Policy</a>
                <a href="javascript:saveData()">Export Data</a>
                <a href="#" onclick="document.getElementById('importData').click(); return false;">Import Data</a>
                <input type="file" id="importData" style="display: none;" onchange="loadData(event)">
            </div>
        </footer>
        
        <script>
            const container = document.getElementById('container');
const zoneViewer = document.getElementById('zoneViewer');
let zoneFrame = document.getElementById('zoneFrame');
const searchBar = document.getElementById('searchBar');
const sortOptions = document.getElementById('sortOptions');
// https://www.jsdelivr.com/tools/purge
const zonesurls = [
    "https://cdn.jsdelivr.net/gh/gn-math/assets@main/zones.json",
    "https://cdn.jsdelivr.net/gh/gn-math/assets@latest/zones.json",
    "https://cdn.jsdelivr.net/gh/gn-math/assets@master/zones.json",
    "https://cdn.jsdelivr.net/gh/gn-math/assets/zones.json"
];
let zonesURL = zonesurls[Math.floor(Math.random() * zonesurls.length)];
const coverURL = "https://cdn.jsdelivr.net/gh/gn-math/covers@main";
const htmlURL = "https://cdn.jsdelivr.net/gh/gn-math/html@main";
let zones = [];
let popularityData = {};
let debounceTimer;

// Event listener for the search bar
searchBar.addEventListener('input', () => {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
        sortZones(); // Trigger sorting and filtering after the user stops typing
    }, 300); // Wait for 300ms after the user stops typing
});

async function listZones() {
    try {
        let sharesponse;
        let shajson;
        let sha;
        try {
            sharesponse = await fetch("https://api.github.com/repos/gn-math/assets/commits?t=" + Date.now());
        } catch (error) {}
        if (sharesponse && sharesponse.status === 200) {
            try {
                shajson = await sharesponse.json();
                sha = shajson[0]['sha'];
                if (sha) {
                    zonesURL = `https://cdn.jsdelivr.net/gh/gn-math/assets@${sha}/zones.json`;
                }
            } catch (error) {
                try {
                    let secondarysharesponse = await fetch("https://raw.githubusercontent.com/gn-math/xml/refs/heads/main/sha.txt?t=" + Date.now());
                    if (secondarysharesponse && secondarysharesponse.status === 200) {
                        sha = (await secondarysharesponse.text()).trim();
                        if (sha) {
                            zonesURL = `https://cdn.jsdelivr.net/gh/gn-math/assets@${sha}/zones.json`;
                        }
                    }
                } catch (error) {}
            }
        }

const response = await fetch(zonesURL + "?t=" + Date.now());
        const json = await response.json();
        zones = json;

zones.push(
            {
                id: 9999,
                name: "Undertale",
                author: "Toby Fox",
                authorLink: "#",
                cover: window.location.origin + "/under/cover.jpeg",
                url: window.location.origin + "/under/index.html",
                local: true
            },
            {
                id: 9998,
                name: "Deltarune",
                author: "Toby Fox",
                authorLink: "#",
                cover: window.location.origin + "/delta/cover.png",
                url: window.location.origin + "/delta/index.html",
                local: true
            },
            {
                id: 9997,
                name: "Movies",
                author: "Ur mother",
                authorLink: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
                cover: window.location.origin + "/anime/cover.png",
                url: window.location.origin + "/anime/index.html"
            },
            {
                id: 9996,
                name: "Balatro",
                author: "LocalThunk",
                authorLink: "#",
                cover: window.location.origin + "/balatro/cover.jpeg",
                url: window.location.origin + "/balatro/index.html",
                local: true
            }
        );
        delete zones[0]
        await fetchPopularity();
        sortZones(); // This will also call displayZones initially

async function fetchPopularity() {
    try {
        const response = await fetch("https://data.jsdelivr.com/v1/stats/packages/gh/gn-math/html@main/files?period=year");
        const data = await response.json();
        data.forEach(file => {
            const idMatch = file.name.match(/\/(\d+)\.html$/);
            if (idMatch) {
                const id = parseInt(idMatch[1]);
                popularityData[id] = file.hits.total;
            }
        });
    } catch (error) {
        popularityData[0] = 0;
    }
}

lazyImages.forEach(img => {
        imageObserver.observe(img);
    });
}

function openZone(zone) {
    // Open zone in the viewer
    if (zone.local) {
        window.location.href = zone.url;
    } else {
        zoneViewer.src = zone.url;
    }
}

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min) + min); 
}

// Update UI
        document.getElementById('zoneName').textContent = file.name;
        document.getElementById('zoneId').textContent = file.id;
        document.getElementById('zoneAuthor').textContent = "by " + file.author;
        if (file.authorLink) {
            document.getElementById('zoneAuthor').href = file.authorLink;
        }
        zoneViewer.style.display = "block";
        const newUrl = new URL(window.location);
        newUrl.searchParams.set('id', file.id);
        history.pushState(null, '', newUrl.toString());
    }
}
function filterZones() {
    const searchTerm = searchBar.value.toLowerCase();
    
    // If zones haven't been loaded yet, do nothing
    if (zones.length === 0) {
        return;
    }

// Attach the filterZones function to the searchBar input event
searchBar.addEventListener('keyup', function() {
    wait(.5)
    filterZones();
});

// Attach the sortZones function to the sortOptions change event (it's good practice)
sortOptions.addEventListener('change', sortZones);

function aboutBlank() {
    let zone = zones.find(z => z.id + '' === document.getElementById('zoneId').textContent);
    if (!zone) return;

if (zone.local) {
        // For local zones, just open the file directly
        window.open(zone.url, "_blank");
    } else {
        const newWindow = window.open("about:blank", "_blank");
        let url = zone.url.replace("{COVER_URL}", coverURL).replace("{HTML_URL}", htmlURL);
        fetch(url + "?t=" + Date.now()).then(response => response.text()).then(html => {
            if (newWindow) {
                newWindow.document.open();
                newWindow.document.write(html);
                newWindow.document.close();
            }
        });
    }
}

function closeZone() {
    zoneViewer.style.display = "none";
    zoneViewer.removeChild(zoneFrame);
    const url = new URL(window.location);
    url.searchParams.delete('id');
    history.pushState(null, '', url.toString());
}

function downloadZone() {
    let zone = zones.find(z => z.id + '' === document.getElementById('zoneId').textContent);
    if (!zone) return;

if (zone.local) {
        // For local zones, just open the index.html so the user can save manually
        window.open(zone.url, "_blank");
    } else {
        fetch(zone.url.replace("{HTML_URL}", htmlURL) + "?t=" + Date.now()).then(res => res.text()).then(text => {
            const blob = new Blob([text], { type: "text/plain;charset=utf-8" });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = zone.name + ".html";
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        });
    }
}

async function saveData() {
    alert("This might take a while, dont touch anything other than this OK button");
    const result = {};
    result.cookies = document.cookie;
    result.localStorage = {...localStorage};
    result.sessionStorage = {...sessionStorage};
    result.indexedDB = {};
    const dbs = await indexedDB.databases();
    for (const dbInfo of dbs) {
      if (!dbInfo.name) continue;
      result.indexedDB[dbInfo.name] = {};
      await new Promise((resolve, reject) => {
        const openRequest = indexedDB.open(dbInfo.name, dbInfo.version);
        openRequest.onerror = () => reject(openRequest.error);
        openRequest.onsuccess = () => {
          const db = openRequest.result;
          const storeNames = Array.from(db.objectStoreNames);
          if (storeNames.length === 0) {
            resolve();
            return;
          }
          const transaction = db.transaction(storeNames, "readonly");
          const storePromises = [];
          for (const storeName of storeNames) {
            result.indexedDB[dbInfo.name][storeName] = [];
            const store = transaction.objectStore(storeName);
            const getAllRequest = store.getAll();
            const p = new Promise((res, rej) => {
              getAllRequest.onsuccess = () => {
                result.indexedDB[dbInfo.name][storeName] = sanitizeData(getAllRequest.result, 1000, 100);
                res();
              };
              getAllRequest.onerror = () => rej(getAllRequest.error);
            });
            storePromises.push(p);
          }
          Promise.all(storePromises).then(() => resolve());
        };
      });
    }

result.caches = {};
    const cacheNames = await caches.keys();
    for (const cacheName of cacheNames) {
      const cache = await caches.open(cacheName);
      const requests = await cache.keys();
      result.caches[cacheName] = [];
      for (const req of requests) {
        const response = await cache.match(req);
        if (!response) continue;
        const cloned = response.clone();
        const contentType = cloned.headers.get('content-type') || '';
        let body;
        try {
          if (contentType.includes('application/json')) {
            body = await cloned.json();
          } else if (contentType.includes('text') || contentType.includes('javascript')) {
            body = await cloned.text();
          } else {
            const buffer = await cloned.arrayBuffer();
            body = btoa(String.fromCharCode(...new Uint8Array(buffer)));
          }
        } catch (e) {
          body = '[Unable to read body]';
        }
        result.caches[cacheName].push({
          url: req.url,
          body,
          contentType
        });
      }
    }
  
    alert("Done, wait for the download to come");
    const link = document.createElement("a");
    link.href = URL.createObjectURL(new Blob([JSON.stringify(result)], {
        type: "text/plain"
    }));
    link.download = `${Date.now()}.data`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
  
  async function loadData(event) {
    const file = event.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = async function (e) {
        const data = JSON.parse(e.target.result);
        if (data.cookies) {
          data.cookies.split(';').forEach(cookie => {
            document.cookie = cookie.trim();
          });
        }
        
        if (data.localStorage) {
          for (const key in data.localStorage) {
            localStorage.setItem(key, data.localStorage[key]);
          }
        }
        
        if (data.sessionStorage) {
          for (const key in data.sessionStorage) {
            sessionStorage.setItem(key, data.sessionStorage[key]);
          }
        }
        
        if (data.indexedDB) {
          for (const dbName in data.indexedDB) {
            const stores = data.indexedDB[dbName];
            await new Promise((resolve, reject) => {
              const request = indexedDB.open(dbName, 1);
              request.onupgradeneeded = e => {
                const db = e.target.result;
                for (const storeName in stores) {
                  if (!db.objectStoreNames.contains(storeName)) {
                    db.createObjectStore(storeName, { keyPath: 'id', autoIncrement: true });
                  }
                }
              };
              request.onsuccess = e => {
                const db = e.target.result;
                const transaction = db.transaction(Object.keys(stores), 'readwrite');
                transaction.onerror = () => reject(transaction.error);
                let pendingStores = Object.keys(stores).length;
        
                for (const storeName in stores) {
                  const objectStore = transaction.objectStore(storeName);
                  objectStore.clear().onsuccess = () => {
                    for (const item of stores[storeName]) {
                      objectStore.put(item);
                    }
                    pendingStores--;
                    if (pendingStores === 0) resolve();
                  };
                }
              };
              request.onerror = () => reject(request.error);
            });
          }
        }
        
        if (data.caches) {
          for (const cacheName in data.caches) {
            const cache = await caches.open(cacheName);
            await cache.keys().then(keys => Promise.all(keys.map(k => cache.delete(k)))); // clear existing
        
            for (const entry of data.caches[cacheName]) {
              let responseBody;
              if (entry.contentType.includes('application/json')) {
                responseBody = JSON.stringify(entry.body);
              } else if (entry.contentType.includes('text') || entry.contentType.includes('javascript')) {
                responseBody = entry.body;
              } else {
                const binaryStr = atob(entry.body);
                const len = binaryStr.length;
                const bytes = new Uint8Array(len);
                for (let i = 0; i < len; i++) {
                  bytes[i] = binaryStr.charCodeAt(i);
                }
                responseBody = bytes.buffer;
              }
              const headers = new Headers({ 'content-type': entry.contentType });
              const response = new Response(responseBody, { headers });
              await cache.put(entry.url, response);
            }
          }
        }
        alert("Data loaded");
    };
    alert("This might take a while, dont touch anything other than this OK button");
    reader.readAsText(file);
  }

function darkMode() {
    document.body.classList.toggle("dark-mode");
}

function tabCloak() {
    closePopup();
    document.getElementById('popupTitle').textContent = "Tab Cloak";
    const popupBody = document.getElementById('popupBody');
    popupBody.innerHTML = `
        <label for="tab-cloak-textbox" style="font-weight: bold;">Set Tab Title:</label><br>
        <input type="text" id="tab-cloak-textbox" placeholder="Enter new tab name..." oninput="cloakName(this.value)">
        <br><br><br><br>
        <label for="tab-cloak-textbox" style="font-weight: bold;">Set Tab Icon:</label><br>
        <input type="text" id="tab-cloak-textbox" placeholder="Enter new tab icon..." oninput='cloakIcon(this.value)'>
        <br><br><br>
    `;
    popupBody.contentEditable = false;
    document.getElementById('popupOverlay').style.display = "flex";
}

const settings = document.getElementById('settings');
settings.addEventListener('click', () => {
    document.getElementById('popupTitle').textContent = "Settings";
    const popupBody = document.getElementById('popupBody');
    popupBody.innerHTML = `
    <button id="settings-button" onclick="darkMode()">Toggle Dark Mode</button>
    <br><br>
    <button id="settings-button" onclick="tabCloak()">Tab Cloak</button>
    <br>
    `;
    popupBody.contentEditable = false;
    document.getElementById('popupOverlay').style.display = "flex";
});

function showContact() {
    document.getElementById('popupTitle').textContent = "Contact";
    const popupBody = document.getElementById('popupBody');
    popupBody.innerHTML = `
    <p>Email: gn.math.business@gmail.com</p>`;
    popupBody.contentEditable = false;
    document.getElementById('popupOverlay').style.display = "flex";
}

function loadPrivacy() {
    document.getElementById('popupTitle').textContent = "Privacy Policy";
    const popupBody = document.getElementById('popupBody');
    popupBody.innerHTML = `
        <div style="max-height: 60vh; overflow-y: auto;">
            <h2>PRIVACY POLICY</h2>
            <p>Last updated April 17, 2025</p>
            <p>This Privacy Notice for skibidi's basement ("we," "us," or "our"), describes how and why we might access, collect, store, use, and/or share ("process") your personal information when you use our services ("Services"), including when you:</p>
            <ul>
                <li>Engage with us in other related ways, including any sales, marketing, or events</li>
            </ul>
            <p>Questions or concerns? Reading this Privacy Notice will help you understand your privacy rights and choices. We are responsible for making decisions about how your personal information is processed. If you do not agree with our policies and practices, please do not use our Services. If you still have any questions or concerns, please contact us at <a href="https://discord.gg/NAFw4ykZ7n">https://discord.gg/NAFw4ykZ7n</a>.</p>
            
            <h3>SUMMARY OF KEY POINTS</h3>
            <p>This summary provides key points from our Privacy Notice, but you can find out more details about any of these topics by clicking the link following each key point or by using our table of contents below to find the section you are looking for.</p>
            
            <p><strong>What personal information do we process?</strong> When you visit, use, or navigate our Services, we may process personal information depending on how you interact with us and the Services, the choices you make, and the products and features you use. Learn more about personal information you disclose to us.</p>
            
            <p><strong>Do we process any sensitive personal information?</strong> Some of the information may be considered "special" or "sensitive" in certain jurisdictions, for example your racial or ethnic origins, sexual orientation, and religious beliefs. We do not process sensitive personal information.</p>
            
            <p><strong>Do we collect any information from third parties?</strong> We do not collect any information from third parties.</p>
            
            <p><strong>How do we process your information?</strong> We process your information to provide, improve, and administer our Services, communicate with you, for security and fraud prevention, and to comply with law. We may also process your information for other purposes with your consent. We process your information only when we have a valid legal reason to do so. Learn more about how we process your information.</p>
            
            <p><strong>In what situations and with which parties do we share personal information?</strong> We may share information in specific situations and with specific third parties. Learn more about when and with whom we share your personal information.</p>
            
            <p><strong>How do we keep your information safe?</strong> We have adequate organizational and technical processes and procedures in place to protect your personal information. However, no electronic transmission over the internet or information storage technology can be guaranteed to be 100% secure, so we cannot promise or guarantee that hackers, cybercriminals, or other unauthorized third parties will not be able to defeat our security and improperly collect, access, steal, or modify your information. Learn more about how we keep your information safe.</p>
            
            <p><strong>What are your rights?</strong> Depending on where you are located geographically, the applicable privacy law may mean you have certain rights regarding your personal information. Learn more about your privacy rights.</p>
            
            <p><strong>How do you exercise your rights?</strong> The easiest way to exercise your rights is by submitting a data subject access request, or by contacting us. We will consider and act upon any request in accordance with applicable data protection laws.</p>
        </div>
    `;
    popupBody.contentEditable = false;
    document.getElementById('popupOverlay').style.display = "flex";
}

function closePopup() {
    document.getElementById('popupOverlay').style.display = "none";
}
listZones();

const schoolList = ["deledao", "goguardian", "lightspeed", "linewize", "securly", ".edu/"];

function isBlockedDomain(url) {
    const domain = new URL(url, location.origin).hostname + "/";
    return schoolList.some(school => domain.includes(school));
}

const originalFetch = window.fetch;
window.fetch = function (url, options) {
    if (isBlockedDomain(url)) {
        console.warn(`lam`);
        return Promise.reject(new Error("lam"));
    }
    return originalFetch.apply(this, arguments);
};

const originalOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function (method, url) {
    if (isBlockedDomain(url)) {
        console.warn(`lam`);
        return;
    }
    return originalOpen.apply(this, arguments);
};

HTMLCanvasElement.prototype.toDataURL = function (...args) {
    return "";
};
        </script>
    <script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"version":"2024.11.0","token":"e3c1c9af36de41759418005494a48906","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
</body>
</html>

Unblocked Games HTML Template with Search & Settings

Recommended

HTML Card Layout: French Website Snippet

3D Product Card HTML Nike Shoe Example

Power Gym: Fitness, Training & Classes HTML Template

HTML

CSS

JS

Recommended

HTML Card Layout: French Website Snippet

3D Product Card HTML Nike Shoe Example

Power Gym: Fitness, Training & Classes HTML Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS