<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Settings</title>
    <style>
        .box {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-left: 25px;
        }

        .row {
            display: flex;
            flex-direction: row;
            margin-top: 5%;
        }

        .container {
            display: flex;
            flex-direction: column;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="box">
                <p>Search Engine</p>
                <select class="browsers" id="se">
                    <option value="google">Google</option>
                    <option value="ddg">DuckDuckGo</option>
                    <option value="brave">Brave</option>
                </select>
            </div>
            <div class="box">
                <p>Title</p>
                <input type="text" class="settingsInput button" onchange="changeTitle(this.value)" placeholder="Change Title">
                <input type="text" class="settingsInput button" onchange="changeFavicon(this.value)" placeholder="Change Favicon (URL)">
            </div>
            <div class="box">
                <p>Proxy Type</p>
                <select class="browsers" id="proxy">
                    <option value="uv">Ultraviolet</option>
                    <option value="dy">Dynamic (BETA)</option>
                </select>
            </div>
        </div>

        <div class="row">
            <div class="box">
                <p>Mystery</p>
                <button class="button" id="mystery-button">Toggle</button>
            </div>
            <div class="box">
                <p>Custom Background</p>
                <input type="text" id="backgroundUrl" class="settingsInput button" placeholder="Enter background URL">
                <button class="button" id="set-background">Apply Background</button>
            </div>
            <div class="box">
                <p>Custom Themes</p>
                <input type="color" id="colorPicker" class="settingsInput button" oninput="changeTheme(this.value)">
                <button class="button" id="reset-theme">Reset</button>
            </div>
            <div class="box">
                <p>About:Blank Cloaking</p>
                <button class="button" id="abc">Click Me</button>
            </div>
        </div>
    </div>

    <div style="margin-top: 50%; z-index: 1;">
        <%- include("ad"); %>
    </div>

    <script src="/assets/js/settings.js"></script>
</body>
</html>
