This repository has been archived by the owner on Sep 24, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
104 lines (100 loc) · 6.53 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spot the Box</title>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-175646474-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-175646474-1');
</script>
<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="dist/style.css">
</head>
<body>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css" type="text/css"/>
<header class="header">
<button class="btn btn-back btn-back--hidden js-btn-back"></button>
<h1 class="title">Spot the Box</h1>
<div class="action-btns">
<button class="btn btn-how-to js-btn-how-to"></button>
<button class="btn btn-about js-btn-about"></button>
</div>
</header>
<main>
<div class="how-to-container how-to-container--hidden js-how-to-container">
<div class="how-to-body">
<h2>How to map a USPS Collection Box </h2>
<h4>Getting Started</h4>
<p>Find an unsurveyed box on the map nearest you. Walk up to the box so you can confirm its status. The goal of this project is in-person survey, don’t mark a box present or removed unless you can confirm its status in-person. Click on the unsurveyed point on the map. You will see the address of the box and an outlet ID at the top of the screen. Confirm you are at the correct address. Select the status of the box and click the Save button.</p>
<img src="/static/img/survey.png" alt="example survye screen">
<h4>Finding a Box</h4>
<p>If at first you don’t see a collection box check around the block, sometimes boxes aren’t at the front of a building or are not exactly at the location shown on the map. If there are multiple boxes on the map in close vicinity look at the top of the collection box and you should see a label like this:</p>
<img src="/static/svg/collectionboxl.svg" alt="collection box label">
<p>Match the Location ID No. with the Outlet ID in Spot the Box. This number will confirm which collection box you are at.</p>
<h4>Confirming Removed Boxes</h4>
<p>If you suspect a box has been removed, double check the labels of surrounding boxes first to make sure they are not the same as the box label you are surveying. A clear indication of a removed box is when you see an empty concrete pad like this:</p>
<img src="/static/img/missing_box.jpg" alt="missing collection box">
<h4>Post Office Lobby Boxes</h4>
<p>If you cannot find the box, double check the popup of the unsurveyed box. Some collection boxes are located inside a Post Office lobby. These are listed in the application as “Type: USPS COLLECTION BOX - PO LOBBY.” Check inside the Post Office lobby to confirm a box.</p>
<img src="/static/img/po_lobby.png" alt="PO lobby example">
</div>
</div>
<div class="overview-container js-overview-container">
<div class="overview-map js-overview-map" id="map"></div>
<div id="box-legend" class="legend js-legend">
<h4>Legend</h4>
<div><span class="legend-item-box"></span>Unsurveyed box</div>
<div><span class="legend-item-present"></span>Present</div>
<div><span class="legend-item-removed"></span>Removed</div>
<div><span class="legend-item-inoperable"></span>Out of order/Locked</div>
</div>
</div>
<div class="data-entry-container data-entry-container--hidden js-data-entry-container ">
<div class="js-collection-box-info collection-box-info"></div>
<div class="js-collection-box-lobby-note collection-box-lobby-note">
<i>Note: This collection box is located inside the Post Office Lobby. Check inside the building before marking its status.
</i>
</div>
<br>
<div class="btn-row">
<p>Is this collection box still here or has it been removed?</p>
<button class="btn btn-removed js-btn-removed"><span>Removed</span></button>
<button class="btn btn-present js-btn-present"><span>Present</span></button>
<button class="btn btn-inoperable js-btn-inoperable"><span>Out of order/Locked</span></button>
<br>
<button class="btn btn-photo btn-photo--hidden js-btn-photo" disabled>Take a photo</button>
<button class="btn btn-save js-btn-save" disabled>Save</button>
</div>
<div class="media-row--hidden">
<video class="video-player js-video-player" controls autoplay></video>
<canvas class="canvas js-canvas"></canvas>
<button class="btn btn-capture js-btn-camera">Capture</button>
</div>
</div>
</main>
<div class="js-modal modal">
<div class="js-modal__body modal__body">
<h2 class="modal-title">Spot the Box</h2>
<p>
Help confirm where USPS collection boxes are usable across the country!
</p>
<p>
Tap or click on a mailbox location to record a decommissioned or functional box.
</p>
<div class="js-modal-continue-btn modal-continue-btn">Get Started</div>
<p class="modal-github-link">All correction/verification data added to this project is contributed and available on a <a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0</a> basis</p>
<p class="modal-github-link">Want to help build this site? <a href="https://github.com/russbiggs/spot-the-box/">Join here</a></p>
</div>
<div class="js-modal__background modal__background"></div>
</div>
<div class="snack snack--hidden">Data saved and uploaded</div>
<script src="dist/bundle.js"></script>
</body>
</html>