init-veeb-2025/index.html at main · taltech-coding/init-veeb-2025 · 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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="et">
    <head>
        <title>Päevi vaheajani</title>
        <meta charset="UTF-8" />
        <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=Lexend:wght@100..900&display=swap"
            rel="stylesheet"
        />
        <!-- TODO: Add the missing tag to link CSS to HTML. -->
        <... rel="stylesheet" href="style.css" />
        <!-- TODO: Add the missing tag to load JavaScript scripts. -->
        <... src="script.js" type="text/javascript" defer></...>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
    <body>
        <main class="main">
            <div class="left-side">
                <!-- TODO: Add the missing heading tag to mark the most important text on the website. -->
                <... class="countdown-text">
                    <span class="event-text" id="eventText">
                        Vaheajani on jäänud veel
                    </span>
                    <br />
                    <span class="days-left-text" id="daysLeftText">
                        33 päeva,
                    </span>
                    <br>
                    <span class="hours-left-text" id="hoursLeftText">
                        12 tundi,
                    </span>
                    <br>
                    <span class="minutes-left-text" id="minutesLeftText">
                        42 minutit,
                    </span>
                    <br>
                    <span class="seconds-left-text" id="secondsLeftText">
                        27 sekundit.
                    </span>
                </...>
            </div>
            <div class="right-side">
                <div class="mode-toggle">
                    <input
                        type="checkbox"
                        id="themeSwitch"
                        name="themeSwitch"
                    />
                    <label for="themeSwitch">
                        <span class="toggle-slider">
                            <!-- Light mode icon-->
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                height="24px"
                                viewBox="0 -960 960 960"
                                width="24px"
                                fill="#000"
                            >
                                <path
                                    d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM80-440q-17 0-28.5-11.5T40-480q0-17 11.5-28.5T80-520h80q17 0 28.5 11.5T200-480q0 17-11.5 28.5T160-440H80Zm720 0q-17 0-28.5-11.5T760-480q0-17 11.5-28.5T800-520h80q17 0 28.5 11.5T920-480q0 17-11.5 28.5T880-440h-80ZM480-760q-17 0-28.5-11.5T440-800v-80q0-17 11.5-28.5T480-920q17 0 28.5 11.5T520-880v80q0 17-11.5 28.5T480-760Zm0 720q-17 0-28.5-11.5T440-80v-80q0-17 11.5-28.5T480-200q17 0 28.5 11.5T520-160v80q0 17-11.5 28.5T480-40ZM226-678l-43-42q-12-11-11.5-28t11.5-29q12-12 29-12t28 12l42 43q11 12 11 28t-11 28q-11 12-27.5 11.5T226-678Zm494 495-42-43q-11-12-11-28.5t11-27.5q11-12 27.5-11.5T734-282l43 42q12 11 11.5 28T777-183q-12 12-29 12t-28-12Zm-42-495q-12-11-11.5-27.5T678-734l42-43q11-12 28-11.5t29 11.5q12 12 12 29t-12 28l-43 42q-12 11-28 11t-28-11ZM183-183q-12-12-12-29t12-28l43-42q12-11 28.5-11t27.5 11q12 11 11.5 27.5T282-226l-42 43q-11 12-28 11.5T183-183Zm297-297Z"
                                />
                            </svg>
                            <!-- Dark mode icon-->
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                height="24px"
                                viewBox="0 -960 960 960"
                                width="24px"
                                fill="#000"
                            >
                                <path
                                    d="M480-120q-151 0-255.5-104.5T120-480q0-138 90-239.5T440-838q13-2 23 3.5t16 14.5q6 9 6.5 21t-7.5 23q-17 26-25.5 55t-8.5 61q0 90 63 153t153 63q31 0 61.5-9t54.5-25q11-7 22.5-6.5T819-479q10 5 15.5 15t3.5 24q-14 138-117.5 229T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"
                                />
                            </svg>
                        </span>
                    </label>
                </div>
                <div class="right-side-bottom">
                    <div class="choose-event">
                        <label for="event"> Mitu päeva on <br /></label>
                        <!-- TODO: Add the missing event options. HINT: Look at script.js lines 2-43 to see which events need to be added.  -->
                        <select name="event" id="event">
                            <option value="vaheaeg">vaheajani</option>
                            <option value="">...</option>
                        </select>
                    </div>
                    <div class="event-date" id="eventDate">
                        Järgmine vaheaeg on 14. aprill 2025
                    </div>
                </div>
            </div>
        </main>
    </body>
</html>