world-clock/index.html at main · Katalia91/world-clock · 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
<!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">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.38/moment-timezone-with-data-1970-2030.min.js"></script>
    <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=Roboto+Mono:wght@100;300;700&display=swap" rel="stylesheet">
    <title>World clock - Natalia Kur</title>
</head>
<body class="dark">
    <div class="container">
        <span><button class="theme-button" title="change theme">Theme 🌗</button></span>
        <h1>World Clock</h1>
        <select name="" id="city">
            <option value="">Select a city...</option>
            <option value="current">My current location</option>
            <option value="Europe/Oslo">Oslo</option>
            <option value="Europe/London">London</option>
            <option value="Asia/Colombo">Colombo</option>
        </select>
    <div id="cities">
        <div class="city" id="los-angeles">
            <div>
                <h2>Los Angeles 🇺🇸</h2>
                <div class="date"></div>
            </div>
            <div class="time"></div>
        </div>
        <div class="city" id="warsaw">
            <div>
                <h2>Warsaw 🇵🇱</h2>
                <div class="date"></div>
            </div>
            <div class="time"></div>
        </div>
        <div class="city" id="sydney">
            <div>
                <h2>Sydney 🇦🇺</h2>
                <div class="date"></div>
            </div>
            <div class="time"></div>
        </div>
    </div>
    <a href="/">All cities</a>
    <footer>This project was coded with 💛 by <strong>Natalia Kur</strong> and is <a href="https://github.com/Katalia91/world-clock" target="_blank"> open sourced on Github</a></footer>
    </div>
    <script src="javascript/index.js"></script>
</body>
</html>