-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
142 lines (128 loc) · 5.87 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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Metadata Extractor</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<!-- Ethical Ads Script in the Head -->
<script async src="https://media.ethicalads.io/media/client/ethicalads.min.js"></script>
<!-- Custom Styles -->
<style>
/* Map Styling */
#map {
height: 420px;
margin: 20px 0;
}
/* Table Styling */
#metadataTable {
margin-top: 20px;
}
/* File Input */
.file-input-group {
display: flex;
align-items: center;
gap: 10px;
}
</style>
</head>
<body>
<!-- Ethical Ads Script in the Body -->
<div class="dark raised" data-ea-publisher="openanalysisorg" data-ea-type="text" data-ea-style="fixedfooter"></div>
<!-- Header Section -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Image Metadata Extractor</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarButtons" aria-controls="navbarButtons" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarButtons">
<div class="ms-auto navbar-nav">
<button id="instructionsButton" class="btn btn-outline-light me-2 mb-2 mb-lg-0" data-bs-toggle="modal" data-bs-target="#instructionsModal">Instructions</button>
<div class="dropdown me-2 mb-2 mb-lg-0">
<button class="btn btn-outline-light dropdown-toggle" type="button" id="downloadDropdown" data-bs-toggle="dropdown" aria-expanded="false">
Download Metadata
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="downloadDropdown">
<li><button class="dropdown-item" onclick="downloadCSV()">Download as CSV</button></li>
<li><button class="dropdown-item" onclick="downloadGeoJSON()">Download as GeoJSON</button></li>
<li><button class="dropdown-item" onclick="downloadShapefile()">Download as Shapefile</button></li>
</ul>
</div>
<button id="reportIssueBtn" class="btn btn-outline-light mb-2 mb-lg-0">Report Issues</button>
</div>
</div>
</div>
</nav>
<!-- Main Content -->
<div class="container-fluid">
<!-- File Input -->
<div class="row my-4">
<div class="col-12">
<div class="file-input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="fileInput" multiple accept="image/*">
</div>
</div>
</div>
<!-- Metadata Table -->
<div class="row">
<div class="col-12">
<table id="metadataTable" class="table table-striped table-responsive">
<thead>
<tr>
<th>Filename</th>
<th>Date</th>
<th>Time</th>
<th>Latitude</th>
<th>Longitude</th>
<th>Make</th>
<th>Model</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<!-- Map Container -->
<div class="row">
<div class="col-12">
<div id="map"></div>
</div>
</div>
</div>
<!-- Instructions Modal -->
<div class="modal fade" id="instructionsModal" tabindex="-1" aria-labelledby="instructionsModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">How to Use the Image Metadata Extractor</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<ol>
<li>Click on the <strong>"Upload File"</strong> button to select one or more images.</li>
<li>The app will extract metadata from the images and display it in the table below.</li>
<li>If the images contain GPS data, their locations will be plotted on the map.</li>
<li>You can click on a table row to zoom to the corresponding location on the map.</li>
<li>Use the <strong>"Download Metadata"</strong> dropdown to export the metadata in different formats.</li>
</ol>
</div>
</div>
</div>
</div>
<!-- Include necessary scripts -->
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<!-- EXIF JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.min.js"></script>
<!-- Shapefile writer library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/shp-write/2.0.1/shpwrite.min.js"></script>
<!-- Bootstrap Bundle JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Main JavaScript file -->
<script src="app.js"></script>
</body>
</html>