New Tab

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Tab</title>
<link id="dynamic-favicon" rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<style>
    :root {
        --chrome-bg: #ffffff;
        --chrome-surface: #f1f3f4;
        --chrome-text: #202124;
        --chrome-blue: #1a73e8;
        --chrome-search-bg: #ffffff;
        --chrome-search-border: 1px solid #dfe1e5;
        --chrome-search-shadow-hover: 0 1px 6px rgba(32, 33, 36, 0.28);
        --chrome-search-color: #202124;
        --chrome-icon-fill: #5f6368;
        --chrome-customize-bg: rgba(0, 0, 0, 0.08);
        --chrome-customize-icon: #5f6368;
        --chrome-shortcut-hover: rgba(0, 0, 0, 0.04);
        --chrome-shortcut-circle: #f1f3f4;
        --varco-bg: #121212;
        --varco-surface: #1e1e1e;
        --varco-accent: #3a72ff;
        --varco-text: #e0e0e0;
        --varco-border: #333;
    }
    @media (prefers-color-scheme: dark) {
        :root {
            --chrome-bg: #35363a;
            --chrome-surface: #202124;
            --chrome-text: #e8eaed;
            --chrome-blue: #8ab4f8;
            --chrome-search-bg: #ffffff;
            --chrome-search-border: 1px solid #dfe1e5;
            --chrome-search-shadow-hover: 0 1px 6px rgba(32, 33, 36, 0.28);
            --chrome-search-color: #202124;
            --chrome-icon-fill: #9aa0a6;
            --chrome-customize-bg: rgba(0, 0, 0, 0.4);
            --chrome-customize-icon: #ffffff;
            --chrome-shortcut-hover: rgba(255, 255, 255, 0.1);
            --chrome-shortcut-circle: #303134;
        }
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { background-color: var(--chrome-bg); color: var(--chrome-text); font-family: system-ui, -apple-system, sans-serif; margin: 0; height: 100vh; overflow: hidden; transition: background-color 0.3s ease, color 0.3s ease; }
    body.mode-varco { background-color: var(--varco-bg) !important; font-family: 'Inter', sans-serif !important; }
    body.tutorial-active { background-color: var(--varco-bg) !important; }
    body.tutorial-active #view-chrome, body.tutorial-active #view-varco, body.tutorial-active .chrome-customize { display: none !important; }
    body.tutorial-active #cloak-tutorial-overlay { display: flex !important; }
    #view-varco, #cloak-tutorial-overlay, #tutorial-overlay, #empty-main-overlay { text-transform: lowercase; }
    #view-chrome { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; transition: opacity 0.3s; background-size: cover; background-position: center; background-repeat: no-repeat; }
    #view-varco { display: none; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s; }
    body.mode-varco #view-chrome { display: none; }
    body.mode-varco #view-varco { display: block; opacity: 1; }
    .chrome-nav { position: absolute; top: 15px; right: 20px; display: flex; align-items: center; gap: 15px; }
    .chrome-nav a { color: var(--chrome-text); text-decoration: none; font-size: 13px; font-family: arial, sans-serif; }
    .chrome-nav a:hover { text-decoration: underline; }
    .chrome-icon-btn { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s; }
    .chrome-icon-btn:hover { background: var(--chrome-shortcut-hover); }
    .chrome-icon-btn svg { width: 24px; height: 24px; fill: var(--chrome-icon-fill); }
    .chrome-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--chrome-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; cursor: pointer; margin-left: 2px; transition: box-shadow 0.2s; overflow: hidden; }
    .chrome-avatar:hover { box-shadow: 0 0 0 4px var(--chrome-shortcut-hover); }
    .chrome-main { margin-top: 130px; display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0 20px; }
    .chrome-logo { width: 272px; height: 92px; margin-bottom: 38px; object-fit: contain; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3)); }
    .chrome-search-bar { display: flex; align-items: center; width: 100%; max-width: 584px; height: 48px; background-color: var(--chrome-search-bg); border: var(--chrome-search-border); border-radius: 24px; padding: 0 16px 0 14px; transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s; margin-bottom: 24px; }
    .chrome-search-bar:hover, .chrome-search-bar:focus-within { background-color: var(--chrome-search-bg); box-shadow: var(--chrome-search-shadow-hover); border-color: transparent; }
    .chrome-search-input { flex: 1; background: transparent; border: none; color: var(--chrome-search-color); font-size: 16px; outline: none; }
    .chrome-search-input::placeholder { color: #5f6368; opacity: 1; }
    .chrome-search-input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px var(--chrome-search-bg) inset; -webkit-text-fill-color: var(--chrome-search-color); }
    .chrome-shortcuts { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 564px; }
    .chrome-shortcut { width: 112px; height: 112px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 16px; cursor: pointer; text-decoration: none; color: var(--chrome-text); transition: background 0.2s; }
    .chrome-shortcut:hover { background: var(--chrome-shortcut-hover); }
    .chrome-shortcut-circle { width: 48px; height: 48px; border-radius: 50%; background: var(--chrome-shortcut-circle); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; transition: background 0.2s; }
    .chrome-shortcut:hover .chrome-shortcut-circle { background: var(--chrome-surface); }
    .chrome-shortcut-text { font-size: 13px; max-width: 88px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; font-weight: 500; }
    .chrome-customize { position: fixed; bottom: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; background: var(--chrome-customize-bg); display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; transition: background 0.2s; z-index: 1001; backdrop-filter: blur(4px); }
    .chrome-customize:hover { filter: brightness(0.8); }
    #view-chrome.has-custom-bg .chrome-nav a, #view-chrome.has-custom-bg .chrome-shortcut-text { color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
    #view-chrome.has-custom-bg .chrome-icon-btn svg, #view-chrome.has-custom-bg .chrome-shortcut-circle svg { fill: #ffffff; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
    #view-chrome.has-custom-bg .chrome-search-bar { border-color: transparent; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
    #app-container { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; padding: 2rem 0; gap: 1.5rem; transition: opacity 0.4s; }
    body.iframe-active #app-container { opacity: 0; visibility: hidden; pointer-events: none; }
    .header { text-align: center; width: 100%; max-width: 900px; padding: 0 1rem; }
    .header h1 { font-size: 2.5rem; font-weight: 600; margin-bottom: 1rem; color: #FFFFFF; text-transform: none; }
    #customUrl { width: 100%; height: 50px; padding: 0 20px; font-size: 1rem; border: 1px solid var(--varco-border); border-radius: 50px; background: var(--varco-surface); color: var(--varco-text); outline: none; font-family: 'Inter'; text-transform: none; }
    #customUrl:focus { border-color: var(--varco-accent); }
    #menu-wrapper { width: 100%; max-width: 900px; flex: 1; overflow-y: auto; padding: 1rem; }
    .grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
    @media (min-width: 640px) { .grid { grid-template-columns: repeat(3, 1fr); } }
    @media (min-width: 900px) { .grid { grid-template-columns: repeat(5, 1fr); } }
    .card-btn { height: 50px; padding: 0 15px; background: var(--varco-surface); border: 1px solid var(--varco-border); border-radius: 50px; cursor: pointer; color: var(--varco-text); font-size: 0.85rem; display: flex; align-items: center; gap: 10px; transition: 0.2s; white-space: nowrap; overflow: hidden; }
    .card-btn:hover { border-color: var(--varco-accent); box-shadow: 0 0 10px var(--varco-accent); }
    .btn-icon { width: 18px; height: 18px; border-radius: 4px; object-fit: contain; background: rgba(255,255,255,0.05); flex-shrink: 0; }
    #iframe-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; z-index: 100; }
    body.iframe-active #iframe-container { opacity: 1; visibility: visible; }
    .app-iframe { width: 100%; height: 100%; border: none; background: #fff; display: none; }
    .app-iframe.active { display: block; }
    #nav-trigger { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 500px; height: 30px; z-index: 111; }
    #top-nav { position: absolute; top: -70px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; background: var(--varco-surface); padding: 10px; border-radius: 0 0 20px 20px; border: 1px solid var(--varco-border); border-top: none; transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 112; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
    #nav-trigger:hover + #top-nav, #top-nav:hover { top: 0; }
    .nav-btn { padding: 8px 25px; border-radius: 12px; border: 1px solid var(--varco-border); background: var(--varco-bg); color: var(--varco-text); cursor: pointer; font-family: 'Inter'; font-weight: 500; font-size: 0.9rem; transition: 0.2s; }
    .nav-btn.active { background: var(--varco-accent); color: #000; border-color: var(--varco-accent); }
    .nav-btn.home { color: var(--varco-text); margin-right: 15px; }
    .nav-btn.home:hover { background: var(--varco-surface); border-color: var(--varco-text); }
    .app-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; z-index: 200; }
    .modal-content { background: var(--varco-surface); padding: 2rem; border-radius: 24px; width: 95%; max-width: 600px; border: 1px solid var(--varco-border); max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; scrollbar-width: none; -ms-overflow-style: none; }
    .modal-content::-webkit-scrollbar { display: none; }
    .settings-tabs { display: flex; flex-wrap: wrap; gap: 5px; background: var(--varco-bg); padding: 5px; border-radius: 15px; margin-bottom: 20px; }
    .tab-btn { flex: 1 1 calc(25% - 5px); padding: 10px; border: none; background: transparent; color: #888; cursor: pointer; border-radius: 10px; font-family: 'Inter'; font-size: 0.85rem;}
    .tab-btn.active { background: var(--varco-accent); color: #000; font-weight: 600; }
    .tab-content { display: none; text-align: left; }
    .tab-content.active { display: block; }
    .modal-content label { display: block; margin: 15px 0 5px; font-size: 0.85rem; color: #888; }
    .modal-content input[type="text"], .modal-content input[type="color"] { width: 100%; height: 45px; padding: 0 15px; border-radius: 12px; border: 1px solid var(--varco-border); background: var(--varco-bg); color: var(--varco-text); outline: none; }
    .icon-btn { flex: 1; height: 40px; border-radius: 10px; border: 1px solid var(--varco-border); background: var(--varco-bg); color: var(--varco-text); cursor: pointer; font-family: 'Inter', sans-serif; font-size: 0.85rem; transition: 0.2s; }
    .icon-btn:hover { border-color: var(--varco-accent); }
    .icon-btn.active { background: var(--varco-accent); color: #000; border-color: var(--varco-accent); font-weight: 600; }
    .slot-config-group { border: 1px solid var(--varco-border); padding: 15px; border-radius: 15px; margin-bottom: 15px; position: relative; }
    .shortcut-row { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--varco-border); }
    #currentShortcuts { margin-top:20px; max-height: 200px; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
    #currentShortcuts::-webkit-scrollbar { display: none; }
    #tutorial-overlay, #empty-main-overlay, #cloak-tutorial-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--varco-bg); color: var(--varco-text); display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 9998; text-align: center; padding: 2rem; }
    #cloak-tutorial-overlay { z-index: 9999; }
    .tutorial-card { max-width: 500px; background: var(--varco-surface); padding: 3rem; border-radius: 30px; border: 1px solid var(--varco-border); }
    .tutorial-card h2 { margin-bottom: 1rem; color: var(--varco-accent); text-transform: none; }
    .tutorial-card p { color: #888; margin-bottom: 2rem; line-height: 1.5; }
    .tut-btn { background: var(--varco-accent); color: #000; border: none; padding: 12px 30px; border-radius: 50px; font-weight: 600; cursor: pointer; }
</style>
</head>
<body class="tutorial-active">
<div id="decoy-clipboard-text" style="opacity: 0; position: absolute; top: -9999px; left: -9999px; width: 1px; height: 1px; overflow: hidden; pointer-events: none; user-select: all;" aria-hidden="true">Search Google or type a URL</div>
<div id="cloak-tutorial-overlay">
    <div class="tutorial-card">
        <h2>stealth setup</h2>
        <p>before using the cloak (chrome disguise), let's set it up so it looks perfectly real.</p>
        <div style="display:flex; gap:10px; margin-bottom: 15px;">
            <button onclick="triggerChromeBgUpload()" class="icon-btn" style="flex:1;">1. set fake background</button>
            <button onclick="triggerChromePfpUpload()" class="icon-btn" style="flex:1;">2. set fake profile pic</button>
        </div>
        <input type="file" id="tutorialBgInput" style="display:none" accept="image/*">
        <input type="file" id="tutorialPfpInput" style="display:none" accept="image/*">
        <p style="color:#888; margin-bottom:1.5rem; font-size:0.9rem;">
            <strong>pro tip:</strong> clicking anywhere on the fake new tab automatically copies the text <em>"Search Google or type a URL"</em> to your clipboard. paste this into your browser's real search bar at the top to hide your real url and fool extensions!
        </p>
        <button class="tut-btn" onclick="finishCloakTutorial()">i'm ready</button>
    </div>
</div>
<div id="view-chrome">
    <div class="chrome-nav">
        <a href="https://mail.google.com">Gmail</a>
        <a href="https://images.google.com">Images</a>
        <div class="chrome-icon-btn" title="Google apps">
            <svg focusable="false" viewBox="0 0 24 24"><path d="M12 16c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm6 0c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm-12 0c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm6-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm6 0c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm-12 0c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm6-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm6 0c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm-12 0c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"/></svg>
        </div>
        <div class="chrome-avatar" id="avatar" title="Google Account" onclick="toggleVarcoMode()">u</div>
    </div>
    <div class="chrome-main">
        <img class="chrome-logo" id="chrome-main-logo" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png" alt="Google">
        <form class="chrome-search-bar" action="https://www.google.com/search" method="GET">
            <div style="display:flex; align-items:center; justify-content:center; width:24px; height:24px; margin-right:12px;">
                <svg focusable="false" viewBox="0 0 24 24" style="width:20px; height:20px; fill:#5f6368;"><path d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
            </div>
            <input type="text" name="q" class="chrome-search-input" placeholder="Search Google or type a URL" autocomplete="off" autofocus>
            <div style="display:flex; align-items:center; justify-content:center; width:24px; height:24px; cursor:pointer; margin-left:10px;" title="Search by voice">
                <svg focusable="false" viewBox="0 0 24 24" style="width:24px; height:24px;"><path fill="#4285f4" d="m12 15c1.66 0 3-1.31 3-2.97v-7.02c0-1.66-1.34-3.01-3-3.01s-3 1.34-3 3.01v7.02c0 1.66 1.34 2.97 3 2.97z"/><path fill="#34a853" d="m11 18.08h2v3.92h-2z"/><path fill="#f4b400" d="m7.05 16.87c-1.27-1.33-2.05-2.83-2.05-4.87h2c0 1.45.56 2.42 1.47 3.38v.32l-1.15 1.18z"/><path fill="#ea4335" d="m12 16.93a4.97 5.25 0 0 1 -3.54 -1.55l-1.41 1.49c1.26 1.34 3.02 2.13 4.95 2.13 3.87 0 6.99-2.92 6.99-7h-1.99c0 2.92-2.24 4.93-5 4.93z"/></svg>
            </div>
        </form>
        <div class="chrome-shortcuts">
            <div class="chrome-shortcut" title="Add shortcut">
                <div class="chrome-shortcut-circle">
                    <svg focusable="false" viewBox="0 0 24 24" style="width:24px; height:24px; fill:var(--chrome-icon-fill);"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
                </div>
                <div class="chrome-shortcut-text">Add shortcut</div>
            </div>
        </div>
    </div>
    <button class="chrome-customize" id="customize-btn" title="Customize Chrome" onclick="toggleVarcoMode()">
        <svg focusable="false" viewBox="0 0 24 24" style="width:16px; height:16px; fill:var(--chrome-customize-icon);"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
    </button>
</div>
<div id="view-varco">
    <div id="app-container">
        <div class="header">
            <h1 id="mainTitle">varco ultra</h1>
            <input id="customUrl" type="text" placeholder="enter url or search and press enter" />
        </div>
        <div id="menu-wrapper"></div>
    </div>
    <div id="tutorial-overlay">
        <div class="tutorial-card">
            <h2>how slots work</h2>
            <p>slots are dedicated background windows. you can keep a proxy, a music player, or an ai open in a slot while you play games in the 'main' tab. switch between them instantly using the top navigation bar!</p>
            <button class="tut-btn" onclick="goToSlotSettings()">configure your slots</button>
            <button onclick="document.getElementById('tutorial-overlay').style.display='none'" style="background:transparent; border:none; color:#888; display:block; margin: 15px auto; cursor:pointer">maybe later</button>
        </div>
    </div>
    <div id="empty-main-overlay">
        <div class="tutorial-card">
            <h2>nothing is open</h2>
            <p>the main slot is currently empty. please select an app or game from the menu to load it here.</p>
            <button class="tut-btn" onclick="document.getElementById('empty-main-overlay').style.display='none'">got it</button>
        </div>
    </div>
    <div id="iframe-container">
        <div id="nav-trigger"></div>
        <div id="top-nav">
            <button class="nav-btn home" onclick="closeIframes()">home</button>
            <button id="btn-main" class="nav-btn active" onclick="switchSlot('main')">main</button>
            <div id="dynamic-nav-slots" style="display:contents"></div>
        </div>
        <iframe id="iframe-main" class="app-iframe active" src="about:blank" allowfullscreen="true" allow="fullscreen; autoplay; clipboard-read; clipboard-write; encrypted-media; picture-in-picture; display-capture; pointer-lock"></iframe>
        <div id="dynamic-iframes" style="display:contents"></div>
    </div>
    <div id="settingsModal" class="app-modal">
        <div class="modal-content">
            <div class="settings-tabs">
                <button id="tab-btn-theme" class="tab-btn active" onclick="openTab(event, 'tab-theme')">varco theme</button>
                <button id="tab-btn-cloaking" class="tab-btn" onclick="openTab(event, 'tab-cloaking')">cloaking</button>
                <button id="tab-btn-slots" class="tab-btn" onclick="openTab(event, 'tab-slots')">slots</button>
                <button id="tab-btn-links" class="tab-btn" onclick="openTab(event, 'tab-links')">links</button>
            </div>
            <div id="tab-theme" class="tab-content active">
                <label>accent color</label>
                <input type="color" id="colorInput" style="margin-bottom: 10px;">
                <label>tab name</label>
                <input type="text" id="titleInput" style="margin-bottom: 10px;">
                <label>tab icon (varco mode)</label>
                <div style="display:flex; gap:10px; margin-bottom: 10px;">
                    <button id="icon-btn-transparent" onclick="setVarcoIcon('transparent')" class="icon-btn">transparent (invisible)</button>
                    <button id="icon-btn-custom" onclick="triggerIconUpload()" class="icon-btn">custom image</button>
                </div>
                <input type="file" id="iconInput" style="display:none" accept="image/*">
            </div>
            <div id="tab-cloaking" class="tab-content">
                <label>master cloaking switch (chrome disguise)</label>
                <div style="display:flex; gap:10px; margin-bottom: 15px;">
                    <button id="btn-cloak-on" onclick="setCloaking(true)" class="icon-btn">on (chrome mode)</button>
                    <button id="btn-cloak-off" onclick="setCloaking(false)" class="icon-btn">off (varco only)</button>
                </div>
                <label>panic key (redirects to chrome / google)</label>
                <div style="display:flex; gap:10px; margin-bottom: 15px;">
                    <button id="panic-key-btn" onclick="listenPanicKey()" class="icon-btn" style="flex:1;">current:[ escape ]</button>
                    <button onclick="disablePanicKey()" style="width:80px; height:40px; border-radius:10px; border:none; background:#ff4d4d; color:white; font-weight:600; cursor:pointer">turn off</button>
                </div>
                <label>chrome background image</label>
                <div style="display:flex; gap:10px; margin-bottom: 15px;">
                    <button onclick="triggerChromeBgUpload()" class="icon-btn" style="flex:1;">choose image</button>
                    <button onclick="resetChromeBg()" style="width:80px; height:40px; border-radius:10px; border:none; background:#ff4d4d; color:white; font-weight:600; cursor:pointer">reset</button>
                </div>
                <input type="file" id="chromeBgInput" style="display:none" accept="image/*">
                <label>chrome profile picture (pfp)</label>
                <div style="display:flex; gap:10px; margin-bottom: 10px;">
                    <button onclick="triggerChromePfpUpload()" class="icon-btn" style="flex:1;">choose image</button>
                    <button onclick="resetChromePfp()" style="width:80px; height:40px; border-radius:10px; border:none; background:#ff4d4d; color:white; font-weight:600; cursor:pointer">reset</button>
                </div>
                <input type="file" id="chromePfpInput" style="display:none" accept="image/*">
            </div>
            <div id="tab-slots" class="tab-content">
                <div id="slot-settings-list"></div>
                <button onclick="addNewSlot()" style="width:100%; height:45px; border-radius:50px; background:transparent; border:1px dashed var(--varco-border); color:var(--varco-text); margin-bottom:15px; cursor:pointer">+ add slot</button>
                <button id="apply-slots-btn" onclick="applySlotSettings()" style="width:100%; height:45px; border-radius:50px; background:var(--varco-accent); border:none; font-weight:600; cursor:pointer; transition:0.2s;">apply slot settings</button>
            </div>
            <div id="tab-links" class="tab-content">
                <form id="shortcutForm">
                    <input type="text" id="shortcutName" placeholder="name" required style="margin-bottom:5px">
                    <input type="text" id="shortcutUrl" placeholder="url" required>
                    <button type="submit" style="width:100%; height:45px; border-radius:50px; background:var(--varco-accent); border:none; margin-top:10px; cursor:pointer">add custom link</button>
                </form>
                <div id="currentShortcuts"></div>
            </div>
            <button onclick="document.getElementById('settingsModal').style.display='none'" style="width:100%; height:45px; border-radius:50px; background:transparent; border:1px solid var(--varco-border); color:var(--varco-text); margin-top:20px; cursor:pointer">close</button>
        </div>
    </div>
</div>
<script>
    const storage = {
        get: (key) => { try { return localStorage.getItem(key); } catch(e) { return null; } },
        set: (key, val) => { try { localStorage.setItem(key, val); return true; } catch(e) { return false; } },
        del: (key) => { try { localStorage.removeItem(key); } catch(e) {} }
    };
    const chromeIconDark = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3CclipPath id='c'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/clipPath%3E%3Ccircle cx='12' cy='12' r='10' fill='%23a8abad'/%3E%3Cg stroke='%23202124' stroke-width='2' fill='none' clip-path='url(%23c)'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 8h12M8.54 14L2 2.68M15.46 14L9 25.2'/%3E%3C/g%3E%3C/svg%3E";
    const chromeIconLight = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3CclipPath id='c'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/clipPath%3E%3Ccircle cx='12' cy='12' r='10' fill='%235f6368'/%3E%3Cg stroke='%23ffffff' stroke-width='2' fill='none' clip-path='url(%23c)'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 8h12M8.54 14L2 2.68M15.46 14L9 25.2'/%3E%3C/g%3E%3C/svg%3E";
    const transparentIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
    function getSystemChromeIcon() { return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? chromeIconDark : chromeIconLight; }
    function syncChromeTheme() { if (!document.body.classList.contains('mode-varco')) { updateFavicon(getSystemChromeIcon()); } }
    if (window.matchMedia) { window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', syncChromeTheme); }
    let cloakingEnabled = storage.get('cloakingEnabled');
    if (cloakingEnabled === null) cloakingEnabled = 'true';
    cloakingEnabled = (cloakingEnabled === 'true');
    function finishCloakTutorial() { storage.set('cloakTutorialDone', 'true'); document.body.classList.remove('tutorial-active'); }
    function setCloaking(val) { cloakingEnabled = val; storage.set('cloakingEnabled', val.toString()); document.getElementById('btn-cloak-on').classList.toggle('active', val); document.getElementById('btn-cloak-off').classList.toggle('active', !val); if (!val) { document.body.classList.add('mode-varco'); document.body.classList.remove('tutorial-active'); } }
    document.addEventListener('copy', (e) => { if (!document.body.classList.contains('mode-varco')) { e.clipboardData.setData('text/plain', 'Search Google or type a URL'); e.preventDefault(); } });
    document.getElementById('view-chrome').addEventListener('click', () => { try { navigator.clipboard.writeText('Search Google or type a URL'); } catch(e) {} });
    let currentPanicKey = storage.get('panicKey');
    if (currentPanicKey === null) currentPanicKey = 'Escape';
    let isListeningForPanicKey = false;
    function updatePanicKeyUI() { const btn = document.getElementById('panic-key-btn'); if (!btn) return; if (currentPanicKey === 'DISABLED') { btn.textContent = 'status: off'; btn.classList.remove('active'); btn.style.borderColor = 'var(--varco-border)'; } else { let displayKey = currentPanicKey === ' ' ? 'space' : currentPanicKey.toLowerCase(); btn.textContent = `current:[ ${displayKey} ]`; btn.classList.add('active'); btn.style.borderColor = 'var(--varco-accent)'; } }
    function listenPanicKey() { isListeningForPanicKey = true; ignoreBlur = true; const btn = document.getElementById('panic-key-btn'); btn.textContent = 'press any key...'; btn.classList.remove('active'); btn.style.borderColor = '#ffcc00'; }
    function disablePanicKey() { currentPanicKey = 'DISABLED'; storage.set('panicKey', 'DISABLED'); updatePanicKeyUI(); }
    document.addEventListener('keydown', (e) => { if (isListeningForPanicKey) { e.preventDefault(); e.stopPropagation(); currentPanicKey = e.key; storage.set('panicKey', currentPanicKey); isListeningForPanicKey = false; setTimeout(() => { ignoreBlur = false; }, 200); updatePanicKeyUI(); return; } if (currentPanicKey !== 'DISABLED' && e.key === currentPanicKey && document.body.classList.contains('mode-varco')) { if (cloakingEnabled) { exitVarcoMode(); } else { window.location.href = "https://google.com"; } } });
    let ignoreBlur = false; 
    function toggleVarcoMode() { document.body.classList.add('mode-varco'); const savedTitle = storage.get('tabTitle') || 'varco ultra'; document.title = savedTitle; const iconType = storage.get('tabIconType') || 'transparent'; if (iconType === 'transparent') updateFavicon(transparentIcon); else if (iconType === 'custom') updateFavicon(storage.get('tabIconData') || transparentIcon); }
    function exitVarcoMode() { if (!cloakingEnabled) return; document.body.classList.remove('mode-varco'); closeIframes(); document.title = "New Tab"; updateFavicon(getSystemChromeIcon()); }
    document.addEventListener('visibilitychange', () => { if (!cloakingEnabled) return; if (ignoreBlur) return; if (document.hidden && document.body.classList.contains('mode-varco')) { exitVarcoMode(); } });
    window.addEventListener('blur', () => { if (!cloakingEnabled) return; if (ignoreBlur) return; if (!document.body.classList.contains('mode-varco')) return; if (document.activeElement && document.activeElement.tagName === 'IFRAME') return; if (document.querySelector('.app-iframe.active:hover')) return; exitVarcoMode(); });
    window.addEventListener('focus', () => { setTimeout(() => { ignoreBlur = false; }, 200); });
    function triggerChromeBgUpload() { ignoreBlur = true; const el = document.getElementById('chromeBgInput') || document.getElementById('tutorialBgInput'); if(el) el.click(); }
    function handleBgUpload(e) { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (evt) => { if(storage.set('chromeBg', evt.target.result)) { applyChromeBg(evt.target.result); } }; reader.readAsDataURL(file); } }
    document.getElementById('chromeBgInput').addEventListener('change', handleBgUpload);
    if(document.getElementById('tutorialBgInput')) document.getElementById('tutorialBgInput').addEventListener('change', handleBgUpload);
    function resetChromeBg() { storage.del('chromeBg'); const view = document.getElementById('view-chrome'); view.style.backgroundImage = 'none'; view.classList.remove('has-custom-bg'); }
    function applyChromeBg(dataUrl) { const view = document.getElementById('view-chrome'); view.style.backgroundImage = `url('${dataUrl}')`; view.classList.add('has-custom-bg'); }
    function triggerChromePfpUpload() { ignoreBlur = true; const el = document.getElementById('chromePfpInput') || document.getElementById('tutorialPfpInput'); if(el) el.click(); }
    function handlePfpUpload(e) { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (evt) => { if(storage.set('chromePfp', evt.target.result)) { applyChromePfp(evt.target.result); } }; reader.readAsDataURL(file); } }
    document.getElementById('chromePfpInput').addEventListener('change', handlePfpUpload);
    if(document.getElementById('tutorialPfpInput')) document.getElementById('tutorialPfpInput').addEventListener('change', handlePfpUpload);
    function resetChromePfp() { storage.del('chromePfp'); const avatarBtn = document.getElementById('avatar'); avatarBtn.style.background = 'var(--chrome-blue)'; avatarBtn.innerHTML = 'u'; }
    function applyChromePfp(dataUrl) { const avatarBtn = document.getElementById('avatar'); avatarBtn.style.background = 'transparent'; avatarBtn.innerHTML = `<img src="${dataUrl}" alt="profile" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">`; }
    function setVarcoIcon(type, dataUrl = null) { if (type === 'transparent') { storage.set('tabIconType', 'transparent'); updateIconUI('transparent'); if (document.body.classList.contains('mode-varco')) updateFavicon(transparentIcon); } else if (type === 'custom' && dataUrl) { if(storage.set('tabIconData', dataUrl)) { storage.set('tabIconType', 'custom'); updateIconUI('custom'); if (document.body.classList.contains('mode-varco')) updateFavicon(dataUrl); } } }
    function updateIconUI(type) { document.querySelectorAll('.icon-btn').forEach(b => b.classList.remove('active')); const btn = document.getElementById(`icon-btn-${type}`); if(btn) btn.classList.add('active'); }
    function triggerIconUpload() { ignoreBlur = true; document.getElementById('iconInput').click(); }
    document.getElementById('iconInput').addEventListener('change', (e) => { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (evt) => { setVarcoIcon('custom', evt.target.result); }; reader.readAsDataURL(file); } });
    function updateFavicon(dataUrl) { let link = document.querySelector("link[rel~='icon']"); if (link) { link.parentNode.removeChild(link); } link = document.createElement('link'); link.rel = 'icon'; link.href = dataUrl; document.head.appendChild(link); }
    const sitesByCategory = { "games":[ { name: "1games", url: "https://1games.io" }, { name: "kbhgames", url: "https://kbhgames.com" }, { name: "easyfun", url: "https://easyfun.gg" }, { name: "bloxd", url: "https://bloxd.io" }, { name: "ampler", url: "https://irv77.github.io/AmplerLauncher/", iconUrl: "https://eaglercraft.com" } ], "proxies":[ { name: "incog proxy", url: "https://incog.works/" }, { name: "anuraos", url: "https://anura.pro/" }, { name: "prism proxy", url: "https://vapor.my" }, { name: "rammerhead", url: "https://rh1.ext.rocks" } ], "ai":[{ name: "varco ai", url: "https://varco-ai-3.pages.dev", iconUrl: "https://chatgpt.com" }] };
    let userShortcuts =[];
    try { userShortcuts = JSON.parse(storage.get('userShortcuts')) ||[]; } catch(e) {}
    let customSlots =[];
    try { let savedSlots = JSON.parse(storage.get('userSlots')); if (Array.isArray(savedSlots) && savedSlots.length > 0) { customSlots = savedSlots; } else { customSlots =[ { id: 'slot_' + Date.now(), name: 'slot 1', url: '' }, { id: 'slot_' + (Date.now() + 1), name: 'slot 2', url: '' } ]; } } catch(e) { customSlots =[ { id: 'slot_' + Date.now(), name: 'slot 1', url: '' }, { id: 'slot_' + (Date.now() + 1), name: 'slot 2', url: '' } ]; }
    function updateStateFromDOM() { customSlots.forEach((slot, i) => { const nameEl = document.getElementById(`slot-name-${i}`); const urlEl = document.getElementById(`slot-url-${i}`); if (nameEl) slot.name = nameEl.value || `slot ${i+1}`; if (urlEl) slot.url = urlEl.value; }); }
    function renderSlotSettingsUI() { const list = document.getElementById('slot-settings-list'); let html = ''; customSlots.forEach((slot, i) => { html += ` <div class="slot-config-group"> <div style="display:flex; justify-content:space-between; margin-bottom:5px; align-items:center;"> <h4 style="color:var(--varco-accent); margin:0;">slot ${i+1}</h4> <button onclick="removeSlot(${i})" style="background:transparent; border:none; color:#ff4d4d; cursor:pointer; font-weight:600; font-family:'Inter'">remove</button> </div> <input type="text" id="slot-name-${i}" value="${slot.name}" placeholder="button name"> <input type="text" id="slot-url-${i}" value="${slot.url}" placeholder="url (example.com)" style="margin-top:5px"> </div> `; }); list.innerHTML = html; }
    function saveAndSyncSlots() { storage.set('userSlots', JSON.stringify(customSlots)); syncSlotsDOM(); renderMenu(); }
    function addNewSlot() { updateStateFromDOM(); customSlots.push({ id: 'slot_' + Date.now(), name: `slot ${customSlots.length + 1}`, url: '' }); renderSlotSettingsUI(); saveAndSyncSlots(); }
    function removeSlot(index) { updateStateFromDOM(); customSlots.splice(index, 1); renderSlotSettingsUI(); saveAndSyncSlots(); }
    function applySlotSettings() { updateStateFromDOM(); saveAndSyncSlots(); const applyBtn = document.getElementById('apply-slots-btn'); if(applyBtn) { const oldText = applyBtn.textContent; applyBtn.textContent = "saved!"; setTimeout(() => { applyBtn.textContent = oldText; }, 1000); } }
    function syncSlotsDOM() { const navContainer = document.getElementById('dynamic-nav-slots'); const iframeContainer = document.getElementById('dynamic-iframes'); navContainer.innerHTML = ''; customSlots.forEach(slot => { const btn = document.createElement('button'); btn.id = `btn-${slot.id}`; btn.className = 'nav-btn'; btn.textContent = slot.name.toLowerCase(); btn.onclick = () => switchSlot(slot.id); navContainer.appendChild(btn); let iframe = document.getElementById(`iframe-${slot.id}`); if (!iframe) { iframe = document.createElement('iframe'); iframe.id = `iframe-${slot.id}`; iframe.className = 'app-iframe'; iframe.allowFullscreen = true; iframe.allow = "fullscreen; autoplay; clipboard-read; clipboard-write; encrypted-media; picture-in-picture; display-capture; pointer-lock"; iframeContainer.appendChild(iframe); } const finalUrl = slot.url.startsWith('http') ? slot.url : (slot.url ? "https://" + slot.url : ""); if (finalUrl && iframe.src !== finalUrl && iframe.getAttribute('data-last-url') !== finalUrl) { iframe.src = finalUrl; iframe.setAttribute('data-last-url', finalUrl); } }); Array.from(iframeContainer.children).forEach(iframe => { const id = iframe.id.replace('iframe-', ''); if (!customSlots.find(s => s.id === id)) { iframe.remove(); } }); const activeIframe = document.querySelector('.app-iframe.active'); if (!activeIframe || !document.getElementById(activeIframe.id)) { switchSlot('main'); } else { const activeId = activeIframe.id.replace('iframe-', ''); switchSlot(activeId); } }
    function getFavicon(url) { try { if (!url) return ''; const host = new URL(url.startsWith('http') ? url : 'https://' + url).hostname; return `https://www.google.com/s2/favicons?domain=${host}&sz=32`; } catch(e) { return ''; } }
    function openMainSlot() { const mainFrame = document.getElementById('iframe-main'); if (!mainFrame.src || mainFrame.src === 'about:blank' || mainFrame.src === window.location.href) { document.getElementById('empty-main-overlay').style.display = 'flex'; } else { document.body.classList.add('iframe-active'); switchSlot('main'); } }
    function renderMenu() { const wrapper = document.getElementById('menu-wrapper'); if (!wrapper) return; let html = `<div class="grid"> <div class='card-btn' onclick='openSettings()'><span style="font-size:1.1rem">⚙</span> settings</div> <div class='card-btn' onclick='openMainSlot()'><span style="font-size:1.1rem">⚡</span> main</div>`; customSlots.forEach(slot => { html += `<div class='card-btn' onclick='openDedicatedSlot("${slot.id}")'><span style="font-size:1.1rem; color: #ffffff;">■</span> ${slot.name.toLowerCase()}</div>`; }); for (const cat in sitesByCategory) { sitesByCategory[cat].forEach(s => { const iconUrl = s.iconUrl || s.url; html += `<div class='card-btn' onclick='loadURL("${s.url}")'><img src="${getFavicon(iconUrl)}" class="btn-icon" onerror="this.style.display='none'">${s.name.toLowerCase()}</div>`; }); } userShortcuts.forEach(s => { html += `<div class='card-btn' onclick='loadURL("${s.url}")'><img src="${getFavicon(s.url)}" class="btn-icon" onerror="this.style.display='none'">${s.name.toLowerCase()}</div>`; }); wrapper.innerHTML = html + `</div>`; }
    function openSettings() { document.getElementById("settingsModal").style.display = "flex"; renderShortcutManager(); }
    function goToSlotSettings() { document.getElementById('tutorial-overlay').style.display = 'none'; openSettings(); openTab({ currentTarget: document.getElementById('tab-btn-slots') }, 'tab-slots'); }
    function loadURL(url, target = 'main') { if (!url) return; const finalUrl = url.startsWith('http') ? url : "https://" + url; const targetIframe = document.getElementById(`iframe-${target}`); if (targetIframe) { if (targetIframe.src !== finalUrl) { targetIframe.src = finalUrl; targetIframe.setAttribute('data-last-url', finalUrl); } if (target === 'main') { document.body.classList.add('iframe-active'); switchSlot('main'); } } }
    function openDedicatedSlot(slotId) { const slot = customSlots.find(s => s.id === slotId); if (!slot || !slot.url) { document.getElementById('tutorial-overlay').style.display = 'flex'; return; } document.body.classList.add('iframe-active'); switchSlot(slotId); }
    function switchSlot(slotId) { document.querySelectorAll('.app-iframe').forEach(f => f.classList.remove('active')); const targetIframe = document.getElementById(`iframe-${slotId}`); if(targetIframe) targetIframe.classList.add('active'); document.querySelectorAll('.nav-btn').forEach(b => { b.classList.remove('active'); b.style.backgroundColor = ''; }); const btn = document.getElementById(`btn-${slotId}`); if(btn) { btn.classList.add('active'); btn.style.backgroundColor = 'var(--varco-accent)'; } }
    function closeIframes() { document.body.classList.remove('iframe-active'); }
    function renderShortcutManager() { const container = document.getElementById('currentShortcuts'); let html = ''; userShortcuts.forEach((s, i) => { html += `<div class="shortcut-row"><span style="flex:1">${s.name}</span><button onclick="deleteShortcut(${i})" style="background:#ff4d4d; border:none; color:white; border-radius:5px; padding:5px 10px; cursor:pointer">del</button></div>`; }); container.innerHTML = html || '<p style="text-align:center; color:#888">no custom links</p>'; }
    window.deleteShortcut = (i) => { userShortcuts.splice(i, 1); storage.set('userShortcuts', JSON.stringify(userShortcuts)); renderShortcutManager(); renderMenu(); };
    function openTab(evt, tabId) { document.querySelectorAll(".tab-content").forEach(c => c.classList.remove("active")); document.querySelectorAll(".tab-btn").forEach(b => b.classList.remove("active")); document.getElementById(tabId).classList.add("active"); evt.currentTarget.classList.add("active"); }
    document.getElementById('customUrl').onkeydown = (e) => { if (e.key === 'Enter') { const val = e.target.value.trim(); if (!val) return; if (val.includes('.') && !val.includes(' ')) { loadURL(val); } else { loadURL(`https://www.google.com/search?igu=1&q=${encodeURIComponent(val)}`); } e.target.value = ''; } };
    document.getElementById('shortcutForm').onsubmit = (e) => { e.preventDefault(); userShortcuts.push({ name: document.getElementById('shortcutName').value, url: document.getElementById('shortcutUrl').value }); storage.set('userShortcuts', JSON.stringify(userShortcuts)); renderMenu(); renderShortcutManager(); e.target.reset(); };
    document.getElementById('colorInput').oninput = (e) => { storage.set('accentColor', e.target.value); document.documentElement.style.setProperty('--varco-accent', e.target.value); syncSlotsDOM(); };
    document.getElementById('titleInput').oninput = (e) => { storage.set('tabTitle', e.target.value); if (document.body.classList.contains('mode-varco')) { document.title = e.target.value; } };
    function initApp() { if (storage.get('cloakTutorialDone') === 'true') { document.body.classList.remove('tutorial-active'); } syncChromeTheme(); updatePanicKeyUI(); const savedColor = storage.get('accentColor') || '#3a72ff'; const savedTitle = storage.get('tabTitle') || 'varco ultra'; let iconType = storage.get('tabIconType') || 'transparent'; if(iconType === 'chrome') { iconType = 'transparent'; storage.set('tabIconType', 'transparent'); } document.documentElement.style.setProperty('--varco-accent', savedColor); document.getElementById('colorInput').value = savedColor; document.getElementById('titleInput').value = savedTitle; updateIconUI(iconType); const savedChromeBg = storage.get('chromeBg'); if (savedChromeBg) applyChromeBg(savedChromeBg); const savedChromePfp = storage.get('chromePfp'); if (savedChromePfp) applyChromePfp(savedChromePfp); document.title = "New Tab"; document.getElementById('mainTitle').textContent = "varco ultra"; setCloaking(cloakingEnabled); renderSlotSettingsUI(); syncSlotsDOM(); renderMenu(); }
    initApp();
</script>
</body>
</html>