-
Notifications
You must be signed in to change notification settings - Fork 0
/
popup.html
73 lines (68 loc) · 1.79 KB
/
popup.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rainfall Data Fetcher</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
width: 400px; /* Wider layout */
}
h1 {
font-size: 24px;
margin: 10px 0;
}
h2 {
font-size: 14px;
margin: 0 0 20px 0;
}
#label-field {
margin: 10px 0;
}
input[type="text"] {
padding: 8px;
margin: 5px 0;
width: 90%; /* Adjusted width */
font-size: 16px;
}
button {
background-color: #007bff; /* Blue background */
color: white;
border: none;
padding: 10px 20px;
margin: 10px;
cursor: pointer;
font-size: 16px;
border-radius: 4px;
width: 90%; /* Full width buttons */
}
button:hover {
background-color: #0056b3; /* Darker blue on hover */
}
#map-image {
width: 100%; /* Adjust width as needed */
max-width: 210px; /* Adjusted image size */
margin-top: 15px;
}
</style>
</head>
<body>
<h1>Rainfall Data Fetcher</h1>
<h2>(BOM/ARR)</h2>
<!-- Label input field -->
<div id="label-field">
<input type="text" id="label" placeholder="Enter label (optional)">
</div>
<!-- Coordinates input -->
<input type="text" id="coordinates" placeholder="Enter coordinates (lat, lng)">
<!-- Buttons for fetching BOM and ARR data -->
<button id="fetch-arr-btn">Fetch ARR Data</button>
<button id="fetch-bom-btn">Fetch BOM Data</button>
<!-- Map image -->
<img id="map-image" src="image.png" alt="Map of Australia" />
<!-- JavaScript -->
<script src="popup.js"></script>
</body>
</html>