-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
68 lines (60 loc) · 4.81 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
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html, charset=utf-8">
<title>Plan My Bball Lineup</title>
<meta name="description" content="Simple tool to help plan your basketball game lineup.">
<meta name="keywords" content="basketball, bball, lineup, roster, youth basketball">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="bball.css">
</head>
<body>
<header class="border border-info mb-2">
<h1 class="h2 mb-0">Plan My Lineup</h1>
<p>Simple tool to help plan your basketball game lineup.</p>
</header>
<div class="container-fluid">
<div class="row">
<details open=true class="mb-2 col-sm">
<summary>Modify Lineup</summary>
<form class="d-flex align-items-baseline" id="add-player">
<div class="input-group">
<label class="visually-hidden" for="add-player-input">Add Players</label>
<input type="text" class="form-control" id="add-player-input" name="add-player-input" placeholder="Enter player name">
<button class="btn btn-primary" id="add-player-submit">+</button>
</div>
<div class="align-self-center mx-3 input-group">
<label class="input-group-text" for="quarters">Quarters</label>
<div>
<select class="form-select" id="quarters" title="Bball games are 4 quarters. Sometimes leagues split each quarter in half to allow for substitutions.">
<option value="4">4</option>
<option value="8">8</option>
</select>
</div>
</div>
<button id="shuffle" class="btn" title="Shuffle Lineup">
<svg height="24" viewBox="0 0 1792 1792" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M666 481q-60 92-137 273-22-45-37-72.5t-40.5-63.5-51-56.5-63-35-81.5-14.5h-224q-14 0-23-9t-9-23v-192q0-14 9-23t23-9h224q250 0 410 225zm1126 799q0 14-9 23l-320 320q-9 9-23 9-13 0-22.5-9.5t-9.5-22.5v-192q-32 0-85 .5t-81 1-73-1-71-5-64-10.5-63-18.5-58-28.5-59-40-55-53.5-56-69.5q59-93 136-273 22 45 37 72.5t40.5 63.5 51 56.5 63 35 81.5 14.5h256v-192q0-14 9-23t23-9q12 0 24 10l319 319q9 9 9 23zm0-896q0 14-9 23l-320 320q-9 9-23 9-13 0-22.5-9.5t-9.5-22.5v-192h-256q-48 0-87 15t-69 45-51 61.5-45 77.5q-32 62-78 171-29 66-49.5 111t-54 105-64 100-74 83-90 68.5-106.5 42-128 16.5h-224q-14 0-23-9t-9-23v-192q0-14 9-23t23-9h224q48 0 87-15t69-45 51-61.5 45-77.5q32-62 78-171 29-66 49.5-111t54-105 64-100 74-83 90-68.5 106.5-42 128-16.5h256v-192q0-14 9-23t23-9q12 0 24 10l319 319q9 9 9 23z"/></svg>
</button>
<button id="share" class="btn" title="Shareable link copied to your clipboard">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92c0-1.61-1.31-2.92-2.92-2.92zM18 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM6 13c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm12 7.02c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"/></svg>
<span>Link copied to your clipboard!</spam>
</button>
</form>
<div class="mt-3">
<h3>Players</h3>
<ul id="players" class="list-group">
<li class="list-group-item">Please enter a player name above.</li>
</ul>
</div>
</details>
<div class="lineups lineup-wrap col-sm">
<h3>Lineups By Period</h3>
<ol id="lineup" class="list-group"></ol>
</div>
</div>
</div>
<script src="bball.js" type="text/javascript"></script>
</body>
</html>