屏幕使用时间程序 - 设置提醒，管理您的使用时间 - 常规

<!DOCTYPE html>
<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;
    }
    
    label {
        display: block;
        margin-bottom: 10px;
    }
    
    input[type=&quot;text&quot;], select {
        width: 100%;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }
    
    input[type=&quot;submit&quot;] {
        background-color: #4CAF50;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    
    input[type=&quot;submit&quot;]:hover {
        background-color: #45a049;
    }
&lt;/style&gt;
</code></pre>
</head>
<body>
    <h1>屏幕使用时间程序</h1>
<pre><code>&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;button&quot; onclick=&quot;openReport()&quot;&gt;报告&lt;/div&gt;
    &lt;div class=&quot;button&quot; onclick=&quot;openSettings()&quot;&gt;设置&lt;/div&gt;
    &lt;div class=&quot;button&quot; onclick=&quot;openAbout()&quot;&gt;关于&lt;/div&gt;
&lt;/div&gt;

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

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

        &lt;label for=&quot;message&quot;&gt;提醒文案:&lt;/label&gt;
        &lt;input type=&quot;text&quot; id=&quot;message&quot; name=&quot;message&quot; required&gt;

        &lt;label for=&quot;image&quot;&gt;提醒图片:&lt;/label&gt;
        &lt;input type=&quot;text&quot; id=&quot;image&quot; name=&quot;image&quot; required&gt;

        &lt;label for=&quot;language&quot;&gt;语言:&lt;/label&gt;
        &lt;select id=&quot;language&quot; name=&quot;language&quot;&gt;
            &lt;option value=&quot;english&quot;&gt;English&lt;/option&gt;
            &lt;option value=&quot;chinese&quot;&gt;中文&lt;/option&gt;
            &lt;option value=&quot;spanish&quot;&gt;Español&lt;/option&gt;
        &lt;/select&gt;

        &lt;input type=&quot;submit&quot; value=&quot;保存&quot;&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>