TimeSync/index.html at main · mattravenhall/TimeSync · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TimeSync</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="map"></div>
    <div id="location-manager-container" class="ui-container">
        <button id="location-list-toggle" class="ui-toggle" title="Locations">📌</button>
        <div id="location-list-content" class="content-panel hidden">
            <h2>Locations</h2>
            <div id="location-controls">
                <div id="add-location-container">
                    <input type="text" id="city-input" placeholder="Enter a city name">
                    <input type="color" id="color-input" value="#ff0000">
                    <button id="add-location-btn" title="Add City to Map">Add</button>
                    <button id="drop-pin-btn" title="Drop Pin on Map">📍</button>
                </div>
                <button id="user-toggle" title="Show/Hide Your Current Location">Show My Location</button>
            </div>
            <div id="location-management-buttons">
                <div id="preset-container">
                    <select id="preset-select"></select>
                    <button id="load-preset-btn">Load Preset</button>
                </div>
                <button id="import-locations-btn" title="Import Locations File">Import</button>
                <button id="export-locations-btn" title="Export Locations File">Export</button>
                <input type="file" id="import-locations-input" accept=".json" style="display: none;">
                <button id="reset-locations-btn" title="Reset Locations to defaults">Reset</button>
            </div>
            <h2>Markers</h2>
            <ul id="location-list"></ul>
        </div>
    </div>

    <div id="information-container" class="ui-container">
        <button id="information-toggle" class="ui-toggle" title="Information">ℹ️</button>
        <div id="information-content" class="content-panel hidden">
            <img src="title_slim.png" class="image-title"/>
            <div style="text-align: center; opacity: 0.3; font-size: 80%;">
                <dl>
                    <dt>Created by <a href="https://mattravenhall.github.io">Matt Ravenhall</a></dt>
                </dl>
            </div>
            <p>
                <a href="https://github.com/mattravenhall/TimeSync">
                    <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/mattravenhall/TimeSync" style="display:block; margin-left: auto; margin-right: auto;">
                </a>
            </p>
            <div style="text-align: center; opacity: 0.3; font-size: 80%;">
                <dl>
                    <dt><b>Attributions</b></dt>
                    <dt>🗺️: <a href="https://carto.com/attribution">CARTO</a> & <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a></dt>
                    <dt>🕑: <a href="https://github.com/evansiroky/timezone-boundary-builder">Timezone Boundary Builder</a></dt>
                    <dt>🌦️: <a href="https://open-meteo.com/">Open-Meteo</a> </dt>
                    <dt>📍: <a href="https://www.bigdatacloud.com/">BigDataCloud</a></dt>
                    <dt>📚: <a href="https://leafletjs.com/">Leaflet</a> & <a href="https://momentjs.com/">Moment.js</a></dt>
                </dl>
            </div>
            <p id="commit-id-display" style="text-align: center; opacity: 0.3; font-size: 80%;">
                Checking version...
            </p>
        </div>
    </div>

    <div id="config-container" class="ui-container">
        <button id="config-toggle" class="ui-toggle" title="Configure">⚙️</button>
        <div id="config-content" class="content-panel hidden">
            <h2>Configuration</h2>
            <button id="theme-toggle" title="Toggle Light/Dark Mode">⚪</button>
            <button id="daylight-toggle" title="Show/Hide Daylight">☀️</button>
            <button id="toggle-countries-btn" title="Show/Hide Country Flags">🗺️</button>
            <button id="toggle-weather-btn" title="Show/Hide Weather">🌦️</button>
        </div>
    </div>

    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.33/moment-timezone-with-data.min.js" defer></script>
    <script src="js/presets.js" defer></script>
    <script src="js/daylight.js" defer></script>
    <script src="js/locations.js" defer></script>
    <script src="js/map.js" defer></script>
    <script src="js/ui.js" defer></script>
    <script src="js/main.js" defer></script>
</body>
</html>