-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
91 lines (91 loc) · 4.18 KB
/
index.html
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>
<title>Map on photo - add map thumbnail to your photo!</title>
<meta charset="utf-8" />
<meta name="author" content="Slavo" />
<meta name="theme-color" content="#2c3e50" />
<meta name="description"
content="Add a map to any photo. Use the GPS position stored in the photo (EXIF data) to apply a thumbnail map image to the photo.
Your photo does not have a GPS position? No problem, you can set it manually! Everything is happen directly in browser and no data is stored on page" />
<meta name="google-site-verification" content="gnuvMvoXU14y3JU8P2d5-2-lDvhffeRayCGOaHY6p9g" />
<link href="assets/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180" />
<link href="assets/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png" />
<link href="assets/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png" />
<script type="module" src="/src/scripts/index.ts"></script>
</head>
<body>
<main class="container">
<canvas class="canvas" height="960" id="js-main-canvas" width="1280"></canvas>
<aside class="browser">
<input accept="image/*" class="browser__input" id="js-browser-input" name="photo-source" type="file" />
<label for="js-browser-input">Select image</label>
</aside>
<aside class="download download--hidden">
<a class="download__input download__input--action" download href="#" id="js-download">Download image</a>
<button class="download__input download__input--share" id="js-share">Share image</button>
<button class="download__input js-reset">Try another image</button>
</aside>
<aside class="map map--hidden map--center">
<div class="map__canvas map__canvas--medium" id="js-map"></div>
<div class="map__title map__title--hidden">
Unable to read
<abbr title="Exchangeable Image File Format">EXIF</abbr> data from the
photo. Drag the marker to set
<abbr title="Global Positioning System">GPS</abbr> position manually, or <a href="" class="js-reset">load another photo</a>.
</div>
<div class="map__options" id="js-map-options">
<fieldset>
<legend>Map position</legend>
<button data-position="map--topleft">⬉</button>
<button data-position="map--topright">⬈</button>
<button data-position="map--center">☉</button>
<button data-position="map--bottomleft">⬋</button>
<button data-position="map--bottomright">⬊</button>
</fieldset>
<fieldset>
<legend>Map size</legend>
<button data-size="map__canvas--small">S</button>
<button data-size="map__canvas--medium">M</button>
<button data-size="map__canvas--large">L</button>
</fieldset>
<fieldset>
<legend>Actions</legend>
<button class="js-reset">Reset</button>
<button id="js-map-options-submit" class="action">Add map</button>
</fieldset>
</div>
</aside>
</main>
<footer>
<p><img src="assets/favicon-32x32.png" alt="Map on photo icon" /> Map on photo - supported by:</p>
<ul>
<li>
<a href="https://schibstedforbusiness.com" title="Schibsted for business">Schibsted SMB</a>
</li>
<li>
<a href="https://vitejs.dev" title="Vite Next Generation Frontend Tooling">Vite</a>
</li>
<li>
<a href="https://leafletjs.com"
title="An open-source JavaScript library for mobile-friendly interactive maps">LeafLet</a>
</li>
<li>
<a href="https://github.com/mapbox/leaflet-image"
title="Export images out of Leaflet maps without a server component, by using Canvas and CORS">Leaflet-image</a>
</li>
<li>
<a href="https://www.openstreetmap.org"
title="OpenStreetMap is a map of the world, created by people like you and free to use under an open licence.">OpenStreetMap</a>
</li>
<li>
<a href="https://mutiny.cz/exifr"
title="The fastest and most versatile JavaScript EXIF reading library.">EXIFR</a>
</li>
<li>
<a href="https://github.com" title="Where the world builds software">GitHub</a>
</li>
</ul>
</footer>
</body>
</html>