屏幕使用时间管理 - 跟踪和控制您的时间 - 常规

<html>
<head>
    <title>屏幕使用时间程序</title>
    <style>
        body {
            background-color: #f5f3e7;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
<pre><code>    h1 {
        color: #ffcc00;
        text-align: center;
    }

    .container {
        display: flex;
        justify-content: center;
        margin-top: 50px;
    }

    .button {
        width: 100px;
        height: 100px;
        background-color: #ffd633;
        border-radius: 50%;
        margin: 0 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .button:hover {
        background-color: #ffcc00;
    }
    
    form {
        margin-top: 50px;
    }
    
    .form-group {
        display: flex;
        margin-bottom: 10px;
    }
    
    label {
        display: inline-block;
        margin-right: 10px;
    }
    
    input[type='text'], select {
        display: inline-block;
        width: 200px;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }
    
    input[type='submit'] {
        background-color: #4CAF50;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    
    input[type='submit']:hover {
        background-color: #45a049;
    }
&lt;/style&gt;
</code></pre>
</head>
<body>
    <h1>屏幕使用时间程序</h1>
<pre><code>&lt;div class='container'&gt;
    &lt;div class='button' onclick='openReport()'&gt;报告&lt;/div&gt;
    &lt;div class='button' onclick='openSettings()'&gt;设置&lt;/div&gt;
    &lt;div class='button' onclick='openAbout()'&gt;关于&lt;/div&gt;
&lt;/div&gt;

&lt;div id='settings' style='display: none;'&gt;
    &lt;form&gt;
        &lt;div class='form-group'&gt;
            &lt;label for='interval'&gt;提醒间隔时间（分钟）:&lt;/label&gt;
            &lt;input type='text' id='interval' name='interval' required&gt;
        &lt;/div&gt;

        &lt;div class='form-group'&gt;
            &lt;label for='notification'&gt;提醒方式:&lt;/label&gt;
            &lt;select id='notification' name='notification'&gt;
                &lt;option value='fullscreen'&gt;全屏提醒&lt;/option&gt;
                &lt;option value='system'&gt;系统通知提醒&lt;/option&gt;
                &lt;option value='in-app'&gt;应用内提醒&lt;/option&gt;
            &lt;/select&gt;
        &lt;/div&gt;

        &lt;div class='form-group'&gt;
            &lt;label for='message'&gt;提醒文案:&lt;/label&gt;
            &lt;input type='text' id='message' name='message' required&gt;
        &lt;/div&gt;

        &lt;div class='form-group'&gt;
            &lt;label for='image'&gt;提醒图片:&lt;/label&gt;
            &lt;input type='text' id='image' name='image' required&gt;
        &lt;/div&gt;

        &lt;div class='form-group'&gt;
            &lt;label for='language'&gt;语言:&lt;/label&gt;
            &lt;select id='language' name='language'&gt;
                &lt;option value='english'&gt;English&lt;/option&gt;
                &lt;option value='chinese'&gt;中文&lt;/option&gt;
                &lt;option value='spanish'&gt;Español&lt;/option&gt;
            &lt;/select&gt;
        &lt;/div&gt;

        &lt;input type='submit' value='保存'&gt;
    &lt;/form&gt;
&lt;/div&gt;

&lt;script&gt;
    function openReport() {
        // TODO: 打开报告页面的逻辑
        console.log('打开报告页面');
    }

    function openSettings() {
        document.getElementById('settings').style.display = 'block';
    }

    function openAbout() {
        // TODO: 打开关于页面的逻辑
        console.log('打开关于页面');
    }
&lt;/script&gt;
</code></pre>
</body>
</html>