<!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 rel="stylesheet" href="newtab.css">
</head>
<body>

    <!-- Settings Menu -->
    <div id="settings">
        <button id="settings-btn">⚙️ Settings</button>
        <div id="settings-panel">
            <div class="setting">
                <label for="bg-color">Background Color:</label>
                <input type="color" id="bg-color" name="bg-color" value="#3498db">
            </div>
            <div class="setting">
                <label for="font-color">Font Color:</label>
                <input type="color" id="font-color" name="font-color" value="#ffffff">
            </div>
            <div class="setting">
                <label for="font-size">Font Size:</label>
                <input type="range" id="font-size" name="font-size" min="16" max="120" value="60">
            </div>
            <div class="setting">
                <button id="close-settings">Close Settings</button>
            </div>
        </div>
    </div>

    <!-- Background Image Container -->
    <div id="background"></div>

    <!-- Content Container -->
    <div id="content">
        <!-- Time and Date -->
        <div id="clock">
            <div id="time">00:00:00</div>
            <div id="date">Thursday, January 1, 1970</div>
        </div>

        <!-- Search Bar -->
        <div id="search-bar">
            <input type="text" id="search-input" placeholder="Search the web..." autofocus />
        </div>

        <!-- Shortcuts -->
        <div id="shortcuts">
            <div class="shortcut" id="google">
                <img src="https://www.google.com/favicon.ico" alt="Google">
                <a href="https://www.google.com" target="_blank">Google</a>
            </div>
            <div class="shortcut" id="youtube">
                <img src="https://www.youtube.com/favicon.ico" alt="YouTube">
                <a href="https://www.youtube.com" target="_blank">YouTube</a>
            </div>
            <div class="shortcut" id="github">
                <img src="https://github.com/favicon.ico" alt="GitHub">
                <a href="https://github.com" target="_blank">GitHub</a>
            </div>
        </div>
    </div>

    <script src="newtab.js"></script>
    <script src="iframe.js"></script>
</body>
</html>
