popup.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TV Strategy Optimizer</title>
    <style>
        :root {
            --bg-color: #131722;
            --text-color: #D1D4DC;
            --primary-accent: #2962FF;
            --input-bg: #2A2E39;
            --border: #363A45;
            --success: #00A25B;
            --muted: #888;
        }

        * {
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            width: 350px;
            min-height: 480px;
            /* Increased to accommodate header/footer comfortably */
            margin: 0;
            display: flex;
            flex-direction: column;
        }

        /* HEADER */
        .header {
            padding: 20px 15px;
            text-align: center;
            border-bottom: 1px solid var(--border);
            background-color: rgba(255, 255, 255, 0.02);
        }

        .header img {
            width: 48px;
            height: 48px;
            margin-bottom: 8px;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        .header h3 {
            margin: 0;
            font-size: 18px;
            color: #FFFFFF;
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        /* MAIN CONTENT */
        .main-content {
            padding: 15px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        button {
            width: 100%;
            padding: 12px 14px;
            background-color: var(--primary-accent);
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
            font-size: 13px;
            margin-top: 10px;
            transition: all 0.2s ease;
        }

        button:hover {
            background-color: #1E53E5;
            transform: translateY(-1px);
        }

        button:active {
            transform: translateY(0);
        }

        #inputs-container {
            flex-grow: 1;
            max-height: 320px;
            overflow-y: auto;
            margin-top: 15px;
            padding-right: 5px;
        }

        /* Input Rows (Preserved logic styling) */
        .input-row {
            margin-bottom: 10px;
            padding: 12px;
            background: #1e222d;
            border-radius: 6px;
            border: 1px solid var(--border);
        }

        .row-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .row-header label {
            font-size: 13px;
            font-weight: 600;
            color: #fff;
            max-width: 70%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .range-inputs {
            display: flex;
            gap: 8px;
        }

        input[type="number"],
        select {
            background-color: var(--input-bg);
            color: white;
            border: 1px solid var(--border);
            border-radius: 4px;
            padding: 8px;
            font-size: 12px;
        }

        input[type="number"] {
            width: 32%;
        }

        select {
            width: 100%;
            margin-bottom: 15px;
            cursor: pointer;
        }

        /* FOOTER */
        .footer {
            padding: 15px;
            text-align: center;
            border-top: 1px solid var(--border);
            background-color: rgba(0, 0, 0, 0.2);
        }

        .footer .copyright {
            font-size: 11px;
            color: var(--muted);
            margin-bottom: 4px;
        }

        .footer .disclaimer {
            font-size: 9px;
            color: #555;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* Scrollbar Styling */
        ::-webkit-scrollbar {
            width: 6px;
        }

        ::-webkit-scrollbar-track {
            background: var(--bg-color);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--border);
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #4a4e5a;
        }
    </style>
</head>

<body>

    <div class="header">
        <img src="icon48.png" alt="Logo">
        <h3>TV Strategy Optimizer</h3>
    </div>

    <div class="main-content">
        <button id="scan-btn">1. Scan TV Settings Modal</button>

        <div id="inputs-container">
            <!-- Dynamic parameters will load here after scanning -->
        </div>

        <div id="optimization-options" style="display:none;">
            <label
                style="font-size: 12px; color: var(--muted); margin-top: 15px; display: block; margin-bottom: 8px;">Target
                Optimization Metric:</label>
            <select id="target-select">
                <option value="Net Profit">Maximize Net Profit</option>
                <option value="Profit Factor">Maximize Profit Factor</option>
                <option value="Percent Profitable">Maximize Win Rate (%)</option>
                <option value="Max Drawdown">Minimize Max Drawdown</option>
            </select>
            <button id="start-btn" style="background-color: var(--success);">2. Start Optimization Loop</button>
        </div>
    </div>


    <div class="footer">
        &copy; 2026 Aditya. All rights reserved.<br>
        <span style="font-size: 9px;">Not affiliated with TradingView.</span><br>
        <a href="https://github.com/ADITYASINGH1206" target="_blank"
            style="display: inline-block; margin-top: 8px; color: #888; transition: color 0.2s;">
            <svg height="16" width="16" viewBox="0 0 16 16" fill="currentColor">
                <path
                    d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z">
                </path>
            </svg>
        </a>
    </div>


    <script src="popup.js"></script>
</body>

</html>