Vril Code
Sign in Register

v3 · 37 files

Download ZIP
ProjectElly/popup/popup.html 5 KB Raw 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="popup.css">
    <!-- Premium Theme CSS -->
    <link rel="stylesheet" href="../premium/premium.css">
    <!-- Tabler Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css">
</head>
<body class="premium-theme">
    <div class="container premium">
        <!-- Add particles effect -->
        <div class="particles" id="particles"></div>

        <header class="premium">
            <h1><i class="ti ti-shield-lock premium"></i> Elly <span class="neon-text" style="color: var(--neon-blue);"> PREMIUM</span></h1>
            <div class="status premium" id="status">
                <i class="ti ti-circle-filled"></i> Active
            </div>
        </header>

        <div class="current-site premium">
            <h3><i class="ti ti-world premium"></i> Current Site</h3>
            <div class="site-info">
                <span id="currentUrl" class="premium">Loading...</span>
                <div class="actions">
                    <button id="blockCurrent" class="btn-block premium">
                        <i class="ti ti-ban premium"></i> Block This Site
                    </button>
                    <button id="limitCurrent" class="btn-limit premium">
                        <i class="ti ti-clock premium"></i> Set Time Limit
                    </button>
                </div>
            </div>
        </div>

        <div class="quick-stats premium">
            <div class="stat premium holographic">
                <div class="stat-value premium" id="blockedCount">0</div>
                <div class="stat-label premium"><i class="ti ti-shield-x premium"></i> Sites Blocked</div>
            </div>
            <div class="stat premium holographic">
                <div class="stat-value premium" id="timeSaved">0h</div>
                <div class="stat-label premium"><i class="ti ti-clock-check premium"></i> Time Saved</div>
            </div>
            <div class="stat premium holographic">
                <div class="stat-value premium" id="activeLimits">0</div>
                <div class="stat-label premium"><i class="ti ti-hourglass premium"></i> Active Limits</div>
            </div>
        </div>

        <div class="time-limit-widget premium" id="timeLimitWidget" style="display: none;">
            <h3><i class="ti ti-hourglass-low premium"></i> Time Remaining</h3>
            <div class="timer premium" id="timer">00:00</div>
            <div class="site-name premium" id="timerSite"></div>
            <div class="progress-container premium">
                <div class="progress-bar premium" id="progressBar"></div>
            </div>
        </div>

        <div class="actions-panel">
            <button id="btnDashboard" class="btn-primary premium">
                <i class="ti ti-chart-bar premium"></i> Dashboard
            </button>
            <button id="btnSettings" class="btn-secondary premium">
                <i class="ti ti-settings premium"></i> Settings
            </button>
            <button id="btnFocus" class="btn-focus premium">
                <i class="ti ti-target-arrow premium"></i> Focus Session
            </button>
        </div>

        <div class="quick-add premium">
            <h3><i class="ti ti-plus premium"></i> Quick Add</h3>
            <div class="input-group">
                <input type="text" id="quickUrl" class="premium" placeholder="Enter URL or pattern (*.social.com)">
                <button id="btnQuickAdd" class="btn-add premium">
                    <i class="ti ti-plus premium"></i> Add
                </button>
            </div>
            <div class="presets premium">
                <button class="preset-btn premium" data-preset="social">
                    <i class="ti ti-brand-facebook premium"></i> Social Media
                </button>
                <button class="preset-btn premium" data-preset="entertainment">
                    <i class="ti ti-player-play premium"></i> Entertainment
                </button>
                <button class="preset-btn premium" data-preset="shopping">
                    <i class="ti ti-shopping-cart premium"></i> Shopping
                </button>
                <button class="preset-btn premium" data-preset="prohibited" title="Block major adult sites">
                    <i class="ti ti-ban premium"></i> Prohibited
                </button>
            </div>
        </div>

        <div class="footer premium">
            <label class="toggle premium">
                <input type="checkbox" id="toggleEnabled" checked>
                <span class="toggle-slider premium"></span>
                <span class="toggle-label premium">
                    <i class="ti ti-power premium"></i> Extension Enabled
                </span>
            </label>
        </div>
    </div>

    <script type="module" src="popup.js"></script>
    <script src="../premium/premium.js"></script>
</body>
</html>