index.html

<!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/bootstrap@5.1.3/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>