master

分支 (1)

管理

管理

master

h5-tomato-clock
/
index.html

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <!-- 要求当前页面使用IE浏览器最高版本的内核来渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 视口设置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="css/init.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/settings.css">
    <title>大黄人时钟</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/index.js"></script>
    <script src="js/setting.js"></script>
</head>

<body>
    <header class="header">
        <ul>
            <li class="logo"><img src="img/tomato2.png" alt="" class="logo" src="index.html"></li>
            <li class="header-button-settings">
                <div>Settings</div>
            </li>
            <li class="header-button-about">
                <div>About</div>
            </li>
        </ul>
        <div class="loop selection">
            <span class="icon icomoon"></span>
            <span class="text">Loop</span>
        </div>
    </header>

    <div class="container frosted-glass">
        <div class="terminate button icomoon"></div>
        <div class="clock">
            <svg>
                <circle cx="150" cy="150" r="145"></circle>
            </svg>
            <div class="start button icomoon"></div>
            <div class="time">
                <span class="minute">25</span>
                <span class="symbol">:</span>
                <span class="second">05</span>
            </div>
        </div>
        <div class="pause button icomoon"></div>
    </div>

    <!-- 设置页面 -->
    <div class="setting-back frosted-glass">
        <div class="setting-header moveable">
            <span class="setting-title">OPTION</span>
        </div>
        <div class="setting-close button">x</div>
        <div class="setting-tab">
            <ul>
                <li>基本</li>
                <li>声音</li>
            </ul>
        </div>
        <!-- 基本 -->
        <div class="setting-body1 frosted-glass-light">
            <div class="setting-container">
                <dl>
                    <dt class="setting-headline">参数</dt>
                    <dd>
                        <span class="setting-subtitle">番茄大小</span>
                        <span class="increase-tomato-size button icomoon"></span>
                        <span class="tomato-size"></span>
                        <span class="decrease-tomato-size button icomoon"></span>
                    </dd>
                    <dd>

                    </dd>
                </dl>
            </div>
        </div>
        <!-- 声音 -->
        <div class="setting-body2 frosted-glass-light">
            <div class="setting-container">
                <dl>
                    <dt class="setting-headline">音量</dt>
                    <dd>
                        <span class="setting-subtitle">背景音乐</span>
                        <div class="scroll-bar">
                            <div class="slider-bgmVolume slider-button"></div>
                        </div>
                    </dd>
                    <dd>
                        <div class="bgm-silence checkbox">
                            <div class="icon icomoon"></div>
                            <div class="text">静音</div>
                        </div>

                    </dd>
                    <dd>
                        <span class="setting-subtitle">UI音效</span>
                        <div class="scroll-bar">
                            <div class="slider-soundVolume slider-button"></div>
                        </div>
                        <dd>
                            <div class="sound-silence checkbox">
                                <div class="icon icomoon"></div>
                                <div class="text">静音</div>
                            </div>
                        </dd>
                    </dd>
                </dl>
            </div>
        </div>
    </div>

    <audio class="bgm" style="display:none;" src="" autoplay loop></audio>
</body>

</html>