pomodoro.html

﻿<!DOCTYPE HTML>
<html>
<head>
    <title>Concentrate</title>
    <meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1">
    <script src="https://kit.fontawesome.com/232d9d6904.js" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;500&display=swap" rel="stylesheet">
</head>
<body>
    <div class="time-info">
        <div class="top-area">
            <i class="fas fa-times fa-3x"></i>
        </div>
        <div class="timer-zone">
            <p id="numOfset">
                1 세트
            </p>
            <h1 id="setPomoNum">
                00:00:00
            </h1>
            <div class="buttonLocation">
                <button id="startbtn">Start</button>
            </div>
        </div>
        <div class="conc-zone">
            <h1>Great job!</h1>
            <div>
                <h2>나의 집중력 점수는 :</h2><h2 class="rating-num">5</h2>
            </div>
            <input type="range" class="slider" min="0" max="10" step="0.5">
            <p>자신의 집중력 점수를 매겨보세요!</p>
            <button>저장</button>
        </div>
        <div class="time-table">
            <div class="totalTime">
                <div>⏱</div>
                <p>총 집중 시간</p>
                <p class="total-time">0h 0m</p>
            </div>
            <div class="avgConcent">
                <div>🐱‍💻</div>
                <p>평균 집중력</p>
                <p class="conc-avg">00.00</p>
            </div>
        </div>
    </div>
    <script src="./public/pomo_bundle.js"></script>
</body>

</html>