Chronometer_Mad/index.html at main · MADROCHA/Chronometer_Mad · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/dist/output.css" rel="stylesheet">
    <script src="https://kit.fontawesome.com/bc7a9d968d.js"
    crossorigin="anonymous"></script>
    </head>

    <body class="bg-colorBackBlack py-2.5 font-mont w-full h-screen flex flex-col text-colorWhite justify-center items-center ">

        <div class=" border-b-4 border-b-colorWhite w-60 h-40 pb-2.5 flex items-center justify-center">

            <i class="fa-solid fa-hourglass-end md:fa-2x fa-4x animate-spin "></i>
        </div>


        <section class=" flex w-full xl:w-[1200px]  items-center   ">
            <div class=" items-center w-full sm:  flex-col flex text-center sm:gap-20 py-20">
                <p chrono-hours class="w-full sm:w-52  justify-center text-7xl sm:text-9xl text-colorYellow flex">
                    00
                </p>
                <p class=" text-2xl font-semibold flex">
                    Hours
                </p>
            </div>
            <div class=" items-center w-full sm:  flex-col flex text-center sm:gap-20 py-20">
                <p chrono-minutes class="w-full sm:w-52  justify-center text-7xl sm:text-9xl text-colorYellow flex">
                    00
                </p>
                <p class=" text-2xl font-semibold flex">
                    Minutes
                </p>
            </div>
            <div class=" items-center w-full sm:  flex-col flex text-center sm:gap-20 py-20">
                <p chrono-seconds class="w-full sm:w-52  justify-center text-7xl sm:text-9xl text-colorYellow flex">
                    00
                </p>
                <p class=" text-2xl font-semibold flex">
                    Seconds
                </p>
            </div>
        </section>

        <section class="pb-5 gap-10 sm:flex-row flex-col flex text-2xl sm:text-[36px] font-bold  justify-center ">
            <button id="startCount" class=" border px-4 sm:px-6 py-3 sm:py-4 | hover:bg-colorWhite hover:text-colorBackBlack duration-300">
                START
            </button>
            <button id="stopCount" class=" border px-4 sm:px-6 py-3 sm:py-4 | hover:bg-colorWhite hover:text-colorBackBlack duration-300">
                STOP
            </button>
            <button id="restartCount" class=" border px-4 sm:px-6 py-3  sm:py-4 | hover:bg-colorWhite hover:text-colorBackBlack duration-300">
                RESTART
            </button>
        </section>
        <script src="src/app.js"></script>


    </body>
</html>