Website-Template/Countdown Timer/index.html at main · Diptenusarkar/Website-Template · 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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!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>CountDown</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="icon" href="./images/favicon.png" type="image/png">
</head>

<body>
    <div class="container" id="container">
        <video src="./images/bg.mp4" autoplay="true" loop="true" muted></video>


        <!-- countdown box before start -->
        <div class="countdown-box" id="countdown-before-start">
            <h1>Start your CountDown Here !</h1>


            <form action="" id="countdown-form">
                <div class="part1">
                    <label for="title">Title :</label> <br>
                    <input type="text" id="title-box" placeholder="Give a title of your countdown" required>
                </div>
                <div class="part2">
                    <label for="date-time">Date-Time :</label>
                    <br>
                    <input type="date" id="date-box" required>
                    <input type="time" id="time-box" required>
                </div>
                <button type="submit">Start</button>
            </form>

        </div>


        <!-- After starting of countdown -->
        <div class="countdown-progress-box" id="countdown-progress">
            <div id="heading">Countdown Title</div>

            <div class="time-remaining">
                <ul>
                    <li> <span id="days">0</span> Days</li>
                    <li> <span id="hours">0</span> Hours</li>
                    <li> <span id="mins">0</span> Minutes</li>
                    <li> <span id="secs">0</span> Seconds</li>
                </ul>
            </div>

            <button type="submit" id="resetButton">Reset</button>
        </div>


        <!-- After completion of countdown -->
        <div class="complete-box" id="countdown-complete">
            <div id="finishedHeading">Countdown Finished!</div>

            <div class="finishingTime">
                Countdown finished on <span id="finishingDate"> 10-11-2021 </span>
                <div> at <span id="finishingTime"> 10:21 </span> </div>
            </div>

            <button class="newButton" id="newButton">Create new Countdown</button>

            <audio id="countdownCompleteSound" src="/Countdown Timer/ringtone/countdownTone.mp3">
                Your browser does not support the audio
            </audio>

        </div>


    </div>

    <script src="./app.js"></script>
</body>

</html>