<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>my todo list</title>
    <link rel="stylesheet" href="./assets/css/popup.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap" rel="stylesheet">
</head>

<body>
    <audio id="audio">
        <source src="./src/alarm.mp3" type="audio/mp3">
    </audio>

    <!-- 计时部分 -->
    <div id="timer">

        <!-- 切换背景图片 -->
        <div class="slider">
            <div id="left"></div>
            <div id="right"></div>
        </div>


        <!-- <div class="button" id="pomodoro-btn"></div> -->

        <div id="countdown">
            <span>00:00</span>
        </div>
        <div class="buttons">
            <!-- 计时开始、重置 -->
            <button id="start-btn">开始</button>
            <button id="end-btn">暂停</button>
            <button id="reset-btn">重置</button>
        </div>
    </div>

    <!-- 后续——添加任务清单
    <div id="worklist">
      <div id="current-task-display">
        <div id="message">你正在专注于:</div>
        <div id="selected-task"></div>
      </div>
      
      <div id="tasks-container">
        <ul id="tasks"></ul>
        <div id="add-task-btn">Add Task</div>
      
        <form id="task-form" class="hide">
          <input id="text" type="text" placeholder="输入你要专注的事情">
          <div id="btn-container">
            <button id="save" type="submit">Save</button> 
            <button id="cancel" type="button">Cancel</button>
          </div>
        </form>
      </div>
    </div> -->

    <!-- 页脚--设置 -->
    <footer>
        <div class="settings">
            <!-- <a href="./assets/html/options.html">settings</a> -->
        </div>
    </footer>

    <script src="./assets/js/popup.js"></script>
</body>

</html>