-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathabout.html
99 lines (95 loc) · 4.24 KB
/
about.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
<!DOCTYPE html>
<head>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-B9BFT1VVW8"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-B9BFT1VVW8');
</script>
<title>About - Boston Dives</title>
<meta name="description" content="Map of the best Boston dive bars">
<meta name="robots" context="index, about, stats">
<style>
body{
margin:1em auto;
max-width:40em;
padding:0 .62em;
font:1.2em/1.62 sans-serif;
}
h1,h2,h3 {
line-height:1.2;
}
@media print{
body{
max-width:none
}
}
/* lines between items */
hr.solid {
border-top: 1px solid #f0f0f5;
margin: 1em auto;
}
/* arrange images side by side */
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<article>
<header>
<h1>About</h1>
</header>
<body>
<p>A website for quickly finding the best dive bars in Boston.</p>
<img src="./images/overview.png" style='height: 100%; width: 100%; object-fit: contain' alt="best dive bar boston">
<p>Tapping on the arrow icon under the zoom controls will prompt to share your location. This will automatically navigate you to the closest bar.</p>
<img src="./images/closest.png" style='height: 100%; width: 100%; object-fit: contain' alt="closest best dive bar boston">
<p>Bars also have notes on them for recommended orders and the cheapest bar</p>
<img src="images/notes.png" style='height: 100%; width: 100%; object-fit: contain' alt="cheap beer at boston dive bars">
<p>Restaurants with cheap greasy food are marked with green icons. Some of them also have cheap beer</p>
<img src="images/food.png" style='height: 100%; width: 100%; object-fit: contain' alt="cheap restaurants boston">
<p>Each bar has an option to track whether or not you've been there. No account needed to use.</p>
<img src="images/drankhere.png" style='height: 100%; width: 100%; object-fit: contain' alt="cheap bars boston">
<p>If you're on your phone an added link for directions is added for each bar and restaurant</p>
<img src="images/directions.png" style='height: 100%; width: 100%; object-fit: contain' alt="directions to best boston dive bars">
<h2>Stats</h2>
<p>The stats page is for tracking your progress drinking at all the dive bars in Boston. You can also search for bars to get directions or see where they are located on the map. The page shows how many bars you've been too and marks off bars that you have or have not been to.</p>
<img src="images/stats.png" style='height: 100%; width: 100%; object-fit: contain' alt="cheap bars boston">
<div id="contributing">
<h2>Contributing</h2>
<p>Everything is hosted on GitHub. If there's something that you disagree with or think that I've missed something, open up a pull request against the locations.json file.</p>
<a href="https://github.com/superducktoes/bostondives/blob/main/locations.json">GitHub Repo</a>
</div>
<h2>Contact</h2>
<p>Send me an email here: <a href='mailto:%63onta%63%74@bo%73t%6Fndiv%65s.com'>contact@bostondives.com</a></p>
<h2>Data Saved</h2>
<p>The only data that's collected is bars that are viewed, and stats from the stats page. No personally identifying information is saved other than IP address and username. If you choose to share your location to find the closest bar that information is not saved and is only used in your browser.</p>
<h2>Transfer Data</h2>
<p>I have a new device and want to transfer my data. Click <a href="savebars.html">here</a></p>
<h2>Theme</h2>
<label for="themeDropdown">Select Theme:</label>
<select id="themeDropdown">
<option value="light">Light Mode</option>
<option value="dark">Dark Mode</option>
</select>
<br>
<a href="https://bostondives.bar">HOME</a>
<script src="about.js"></script>
</body>
</article>