-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathscorecard.html
136 lines (101 loc) · 4.58 KB
/
scorecard.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Golf App v2</title>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap"
rel="stylesheet"
/>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="flex items-center justify-between flex-wrap bg-blue-700 p-6">
<div class="flex items-center flex-shrink-0 text-white mr-6">
<span class="text-2xl text-white tracking-widest pr-2 font-bold">Golf App - v2</span>
<i class="fa fa-golf-ball fa-2x text-white"></i>
</div>
<!--<div class="block lg:hidden">
<button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
</button>
</div>-->
<div class="lg:ml-10 w-full block flex-grow lg:flex lg:items-center lg:w-auto">
<div class="text-base lg:flex-grow">
<a href="./index.html" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
Home
</a>
<a href="./scorecard.html" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
Score Card
</a>
</div>
</div>
</nav>
<div class="container sticky top-0 flex flex-wrap mx-auto my-2">
<div class="w-1/5 text-center bg-green-700 text-white py-2">Hole</div>
<div class="w-1/5 text-center bg-green-700 text-white py-2">Minus</div>
<div class="w-1/5 text-center bg-green-700 text-white py-2">Score</div>
<div class="w-1/5 text-center bg-green-700 text-white py-2">Stroke</div>
<div class="w-1/5">
<button class="w-full startbtn text-center bg-blue-500 text-white font-bold py-2 px-4 ml-1 rounded">Start or Reset</button>
</div>
</div>
<!-- <div class="container mt-2 pl-2">
<div class="flex sticky top-0 mb-2">
<div class="container w-1/6 bg-green-700 text-white text-center py-2">
Hole
</div>
<div class="container w-1/6 bg-green-700 text-white text-center py-2">
Penalty
</div>
<div class="container w-1/6 bg-green-700 text-white text-center py-2" id="hscore">
Score
</div>
<div class="container w-1/6 bg-green-700 text-white text-center py-2">
Stroke
</div>
<div class="container w-2/6 lg:w-1/6">
<button class="startbtn text-center w-full bg-blue-500 text-white font-bold py-2 px-4 mx-2 rounded">
Start Or Reset
</button>
</div>
</div>
</div> -->
<div id="start"></div>
<div class="flex totalscore flex-wrap mx-auto mb-5">
<div class="mx-auto px-4 my-2 ">Total Score: <span id="htotal"></span></div>
</div>
<div class="flex flex-wrap holen mx-auto justify-center my-2">
<button class="flex-shrink-0 bg-blue-500 text-md text-white py-2 px-6 rounded" type="button" id="reset">
New Course
</button>
</div>
<div class="flex flex-wrap holen mx-auto">
<div class="w-full">
<div id="map" style="width: 100%; height: 60vh;"></div>
</div>
<!-- <div class="w-full md:w-1/2 h-12"></div> -->
</div>
<footer>
<div class="container-fluid">
<span class="float-right">©PSO Co. 2020</span>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBN-8zSdr3WI2rZ9CaoUa1kM8djr8M2Y8U"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="script1.js"></script>
</body>
</html>