<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Clock Settings</title>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<style>
    body {
        font-family: Arial, sans-serif;
        background: #f0f0f0;
        margin: 0;
        padding: 20px;
    }
    h1 {
        text-align: center;
    }
    .settings {
        max-width: 400px;
        margin: 0 auto;
        background: #fff;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    label {
        display: block;
        margin-top: 15px;
        font-weight: bold;
    }
    .color-picker {
        display: flex;
        gap: 5px;
        align-items: center;
    }
    input[type="color"] {
        padding: 0;
        border: none;
        width: 50px;
        height: 36px;
        cursor: pointer;
    }
    input[type="text"], select {
        flex: 1;
        padding: 8px;
        border-radius: 6px;
        border: 1px solid #ccc;
        font-size: 16px;
    }
    #saveButton, #resetButton {
        margin-top: 20px;
        width: 100%;
        padding: 12px;
        font-size: 16px;
        background: #4CAF50;
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
    }
    #resetButton {
        background: #d9534f;
    }
    #resetButton:hover {
        background: #c9302c;
    }
    #saveButton:hover {
        background: #45a049;
    }
    .link {
        text-align: center;
        margin-top: 20px;
    }
    .link a {
        text-decoration: none;
        color: #333;
        font-weight: bold;
    }
    .disabled {
        opacity: 0.5;
        pointer-events: none;
    }
</style>
</head>
<body>
<h1>Clock Settings</h1>
<div class="settings">
    <button id="resetButton">Reset to Defaults</button>

    <label for="bgWood">Wood Background</label>
    <select id="bgWood">
        <option value="false">No</option>
        <option value="true">Yes</option>
    </select>

    <label for="pageBgColor">Page Background Color</label>
    <div class="color-picker">
        <input type="color" id="pageBgColor">
        <input type="text" id="pageBgColorText" maxlength="7" placeholder="#f0f0f0">
    </div>

    <label for="bgColor">Clock Face Background Color</label>
    <div class="color-picker" id="bgColorContainer">
        <input type="color" id="bgColor">
        <input type="text" id="bgColorText" maxlength="7" placeholder="#ffffff">
    </div>

    <label for="minColor">Minute Color</label>
    <div class="color-picker">
        <input type="color" id="minColor">
        <input type="text" id="minColorText" maxlength="7" placeholder="#7e5f51">
    </div>

    <label for="hourColor">Hour Color</label>
    <div class="color-picker">
        <input type="color" id="hourColor">
        <input type="text" id="hourColorText" maxlength="7" placeholder="#000000">
    </div>

    <label for="scaleBorderColor">Border Color</label>
    <div class="color-picker">
        <input type="color" id="scaleBorderColor">
        <input type="text" id="scaleBorderColorText" maxlength="7" placeholder="#000000">
    </div>

    <label for="fontFamily">Font Family</label>
    <select id="fontFamily">
        <option value="Arial">Arial</option>
        <option value="Verdana">Verdana</option>
        <option value="Times New Roman">Times New Roman</option>
        <option value="Courier New">Courier New</option>
        <option value="Georgia">Georgia</option>
        <option value="Brush Script MT">Brush Script MT</option>
    </select>

    <label for="clockType">Clock Type</label>
    <select id="clockType">
        <option value="clock1">Both scales logarithmic, number 1 at the top</option>
        <option value="clock2">Both scales logarithmic, numbers 12 and 60 at the top</option>
        <option value="clock3">Only hour scale logarithmic</option>
        <option value="clock4">Only minute scale logarithmic</option>
    </select>

    <button id="saveButton">Go to Clock</button>
</div>

<script>
function linkColorInput(colorId, textId) {
    const colorInput = document.getElementById(colorId);
    const textInput = document.getElementById(textId);

    textInput.value = colorInput.value;

    colorInput.addEventListener("input", () => {
        textInput.value = colorInput.value;
    });

    textInput.addEventListener("input", () => {
        let val = textInput.value;
        if (/^#[0-9A-Fa-f]{6}$/.test(val)) {
            colorInput.value = val;
        }
    });
}

function toggleBgColorState() {
    const bgWood = document.getElementById("bgWood").value === "true";
    const container = document.getElementById("bgColorContainer");
    if (bgWood) {
        container.classList.add("disabled");
    } else {
        container.classList.remove("disabled");
    }
}

function loadSettings() {
    document.getElementById("bgWood").value = localStorage.getItem("bgWood") || "false";
    document.getElementById("bgColor").value = localStorage.getItem("bgColor") || "#ffffff";
    document.getElementById("pageBgColor").value = localStorage.getItem("pageBgColor") || "#f0f0f0";
    document.getElementById("minColor").value = localStorage.getItem("minColor") || "#7e5f51";
    document.getElementById("hourColor").value = localStorage.getItem("hourColor") || "#000000";
    document.getElementById("scaleBorderColor").value = localStorage.getItem("scaleBorderColor") || "#000000";
    document.getElementById("fontFamily").value = localStorage.getItem("fontFamily") || "Arial";
    document.getElementById("clockType").value = localStorage.getItem("clockType") || "clock2";

    document.getElementById("bgColorText").value = document.getElementById("bgColor").value;
    document.getElementById("pageBgColorText").value = document.getElementById("pageBgColor").value;
    document.getElementById("minColorText").value = document.getElementById("minColor").value;
    document.getElementById("hourColorText").value = document.getElementById("hourColor").value;
    document.getElementById("scaleBorderColorText").value = document.getElementById("scaleBorderColor").value;

    toggleBgColorState();
}

function saveSettings() {
    localStorage.setItem("bgWood", document.getElementById("bgWood").value);
    localStorage.setItem("bgColor", document.getElementById("bgColor").value);
    localStorage.setItem("pageBgColor", document.getElementById("pageBgColor").value);
    localStorage.setItem("minColor", document.getElementById("minColor").value);
    localStorage.setItem("hourColor", document.getElementById("hourColor").value);
    localStorage.setItem("scaleBorderColor", document.getElementById("scaleBorderColor").value);
    localStorage.setItem("fontFamily", document.getElementById("fontFamily").value);
    localStorage.setItem("clockType", document.getElementById("clockType").value);
    window.location.href = document.getElementById("clockType").value + ".html";
}

function resetDefaults() {
    document.getElementById("bgWood").value = "true";
    document.getElementById("bgColor").value = "#ffffff";
    document.getElementById("bgColorText").value = "#ffffff";
    document.getElementById("pageBgColor").value = "#ffffff";
    document.getElementById("pageBgColorText").value = "#ffffff";
    document.getElementById("minColor").value = "#7e5f51";
    document.getElementById("minColorText").value = "#7e5f51";
    document.getElementById("hourColor").value = "#000000";
    document.getElementById("hourColorText").value = "#000000";
    document.getElementById("scaleBorderColor").value = "#000000";
    document.getElementById("scaleBorderColorText").value = "#000000";
    document.getElementById("fontFamily").value = "Arial";
    document.getElementById("clockType").value = "clock1";
    toggleBgColorState();
}

linkColorInput("bgColor", "bgColorText");
linkColorInput("pageBgColor", "pageBgColorText");
linkColorInput("minColor", "minColorText");
linkColorInput("hourColor", "hourColorText");
linkColorInput("scaleBorderColor", "scaleBorderColorText");

document.getElementById("bgWood").addEventListener("change", toggleBgColorState);
document.getElementById("saveButton").addEventListener("click", saveSettings);
document.getElementById("resetButton").addEventListener("click", resetDefaults);

loadSettings();
</script>
</body>
</html>