heroku-test/index.html at master · plusplusben/heroku-test · GitHub

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
<html>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="/public/style.css">
	<body>
		<div id="app" v-bind:class="{surf: isSurf, sell: isSell}">
			<div id="surfcontent" class="contentarea">
				<div class="maintitle">Surf</div>
				<div class="subtitle">My Top Surf Spots</div>
				<div class="text">Surfing Weather from Surf Reports API</div>
				<div class="surfspots">
					<div v-for="spot in surfSpots" class="surfspot">
						<div class="itemtitle">{{spot.spot_name}}</div>
						<div class="itembadge">
							<img v-bind:src="`https://maps.googleapis.com/maps/api/staticmap?center=${spot.latitude}%2c%20${spot.longitude}&zoom=13&size=150x100&key=AIzaSyAhqjXYSLBMBD8wETp0DWn85hQOHP1kmzk&markers=color:blue%7C${spot.latitude}%2c%20${spot.longitude}`"/>
						</div>
					</div>
				</div>
			</div>
			<div id="sellcontent" class="contentarea">
				<div class="maintitle">Sell</div>
				<div class="subtitle">My Top Opportunities</div>
				<div class="text">Let's get it done!</div>
				<div class="surfspots">
					<div v-for="account in accounts" class="surfspot">
						<div class="itemtitle">{{account.name}}</div>
					</div>
				</div>
			</div>
			<div id="center">
				<div id="center-inner">
					<div>
						<div id="surfbutton" class="button" v-on:click="toggleSurf">Surf</div>
						<img id="centerimage" v-on:click="allOff" src="/public/nate.jpg"/>
						<div id="sellbutton" class="button" v-on:click="toggleSell">Sell</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="public/app.js"></script>
</html>