diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 158 |
1 files changed, 72 insertions, 86 deletions
@@ -1,98 +1,84 @@ <!DOCTYPE html> -<html lang="en" data-theme="light"> +<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Match Up!</title> + <meta name="keywords" content="Badminton, Matchmaking, Open"> + <meta name="author" content="Karan Jayachandra"> + <meta name="description" content="Matchup is a free utility that helps you create matches for Badminton from a pool a players. The tool is completely open source and private as all data is store locally on your machine."> + <meta http-equiv="Cache-control" content="public"> </head> <body> - <section class="section"> - <nav class="navbar" role="navigation" aria-label="main navigation"> - <div class="navbar-brand"> - <div class="navbar-item"><img src="icon.png"></div> - <div class="navbar-item">Match Up</div> + <header class="container"> + <nav> + <ul><li><img src="icon.svg" alt="Matchup"></li></ul> + <ul> + <li> + <fieldset id="timer" role="group"> + <button id="timer-dec" title="Timer decrement"><i class="fa-solid fa-minus"></i></button> + <input id="timer-display" title="Time display" type="text" readonly></input> + <button id="timer-inc" title="Timer increment"><i class="fa-solid fa-plus"></i></button> + <button id="timer-start" title="Timer start"><i class="fa-solid fa-play"></i></button> + <button id="timer-stop" title="Timer stop"><i class="fa-solid fa-stop"></i></button> + </fieldset> + </li> + </ul> + </nav> + </header> + <main class="container"> + <section> + <h1 class="title" id="Game-description"></h1> + <div id="Game-list" class="grid-container"></div> + </section> + <section> + <select id="skill" aria-label="State"> + <option value="10">All Levels</option> + <option value="5">2 Levels</option> + <option value="3">3 Levels</option> + <option value="1">Skill Based</option> + </select> + <div class="grid"> + <button id="propose">Propose</button> + <button id="confirm">Confirm</button> </div> - <div class="navbar-end"> - <div class="field is-grouped is-grouped-right"> - <button class="button is-medium is-dark" id="timer-dec" value="-0.5"><i class="fa-solid fa-minus" value="-0.5"></i></button> - <input class="input is-medium is-dark" id="timer-display" type="text" readonly></input> - <button class="button is-medium is-dark" id="timer-inc" value="0.5"><i class="fa-solid fa-plus" value="0.5"></i></button> - <button class="button is-medium is-dark" id="timer-start"><i class="fa-solid fa-play"></i></button> - <button class="button is-medium is-dark" id="timer-stop"><i class="fa-solid fa-stop"></i></button> - </div> + </section> + <section> + <hgroup> + <h2>Courts</h2> + <p>Reserve courts for training or competition.</p> + </hgroup> + <div id="Court-list" class="grid-container"></div> + </section> + <section> + <hgroup> + <h2>Regulars</h2> + <p>Check in and check out club members.</p> + </hgroup> + <div id="Regular-list" class="grid-container"></div> + </section> + <section> + <hgroup> + <h2>Guests</h2> + <p>Add guests to the pool.</p> + </hgroup> + <div id="Guest-list" class="grid-container"></div> + </section> + <section> + <hgroup> + <h2>Admin</h2> + <p>Changes here are permanent and cannot be reverted.</p> + </hgroup> + <div id="admin" class="grid"> + <button id="reset">Reset Session</button> + <button id='button-player-load'>Upload Database</button> </div> - </nav> - <div class="container"> - <section class="section"> - <h1 class="title" id="Game_description"></h1> - <table class="table is-fullwidth"> - <thead> - <tr> - <th>Court</th> - <th colspan='2' style="text-align: center;">Team 1</th> - <th colspan='2' style="text-align: center;">Team 2</th> - </tr> - </thead> - <tbody id="Game_list"></tbody> - </table> - </section> - <section class="section"> - <div class="field is-grouped is-grouped-centered"> - <button class="button is-medium is-dark" id="propose">Propose</button> - <div class="select is-medium is-dark"> - <select name="skill" id="skill"> - <option value="10">All Levels</option> - <option value="5">2 Levels</option> - <option value="3">3 Levels</option> - <option value="1">Skill Based</option> - </select> - </div> - <button class="button is-medium is-dark" id="confirm">Confirm</button> - </div> - </section> - <section class="section"> - <h1 class="title">Courts</h1> - <div id="Court_list" class="button-grid"></div> - </section> - <section class="section"> - <h1 class="title">Regulars</h1> - <div id="Regular_list" class="button-grid"></div> - </section> - <section class="section"> - <h1 class="title">Guests</h1> - <div id="Guest_list" class="button-grid"></div> - </section> - <section class="section"> - <h1 class="title">Admin</h1> - <h1 class="subtitle">Changes here are permanent and cannot be reverted.</h1> - <div class="field is-grouped is-grouped-centered"> - <button class="button is-medium is-danger" id="reset"> - Reset Session - </button> - </div> - <div class="field is-grouped is-grouped-centered"> - <div id="player-load" class="file is-danger is-boxed is-medium"> - <label class="file-label"> - <input class="file-input" type="file" name="players" accept=".csv" /> - <span class="file-cta"> - <span class="file-icon"> - <i class="fa-solid fa-upload"></i> - </span> - <span class="file-label">Update Regulars</span> - </span> - </label> - </div> - </div> - </section> + <input type="file" id="player-load" accept=".csv" placeholder="Player database" hidden/> </div> - </section> - <script src="src/main.js" type="module"></script> + </main> + <footer class="container" style="text-align: center;"> + <strong>Matchup</strong> made with ❤️ by <a href="https://karanj.com">Karan</a>. The source code is licensed <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">CC BY-SA 4.0</a>. Logo from <a href="https://www.svgrepo.com">SVG Repo</a>. + </footer> </body> - <footer class="footer"> - <div class="content has-text-centered"> - <p><strong>Match Up</strong> made with ❤️ by <a href="https://karanj.com">Karan</a>.</p> - <p>The source code is licensed <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">CC BY-SA 4.0</a>.</p> - <p>Logo from <a href="https://www.flaticon.com/free-icons/shuttle-cock" title="shuttle cock icons">Flaticon</a>.</p> - </div> - </footer> + <script src="src/main.js" type="module"></script> </html>
\ No newline at end of file |