diff options
| author | Karan Jayachandra <mail@karanjayachandra.com> | 2025-11-15 15:48:50 +0100 |
|---|---|---|
| committer | Karan Jayachandra <mail@karanjayachandra.com> | 2025-11-15 15:48:50 +0100 |
| commit | c0c4897f2ef9eb9ae444bc05407c3cdf420c3461 (patch) | |
| tree | 504709666f5470960c7910a77eb7808cde8074b8 /index.html | |
| parent | cabac66d56e8912941cef976d69a4fd3ec9ad928 (diff) | |
Trying cards instead of a table
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 59 |
1 files changed, 24 insertions, 35 deletions
@@ -6,40 +6,33 @@ <title>Match Up!</title> </head> <body> - <section class="section"> + <section class="section is-fluid"> <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> </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 class="navbar-item"> + <div class="field is-grouped is-grouped-centered"> + <button class="button is-dark" id="timer-dec" value="-0.5">-</i></button> + <input class="input is-dark" id="timer-display" type="text" readonly></input> + <button class="button is-dark" id="timer-inc" value="0.5">+</button> + <button class="button is-dark" id="timer-start">Start</button> + <button class="button is-dark" id="timer-stop">Stop</button> + </div> </div> </div> </nav> - <div class="container"> + <div class="container is-fluid"> <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> + <div id="Game_list" class="grid-container"></div> </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"> + <div class="field is-grouped is-grouped-right"> + <button class="button is-dark" id="propose">Propose</button> + <div class="select is-dark"> <select name="skill" id="skill"> <option value="10">All Levels</option> <option value="5">2 Levels</option> @@ -47,39 +40,35 @@ <option value="1">Skill Based</option> </select> </div> - <button class="button is-medium is-dark" id="confirm">Confirm</button> + <button class="button is-dark" id="confirm">Confirm</button> </div> </section> <section class="section"> <h1 class="title">Courts</h1> - <div id="Court_list" class="button-grid"></div> + <h1 class="subtitle">Reserve courts for training or competition.</h1> + <div id="Court_list" class="grid-container"></div> </section> <section class="section"> <h1 class="title">Regulars</h1> - <div id="Regular_list" class="button-grid"></div> + <h1 class="subtitle">Check in and check out club members.</h1> + <div id="Regular_list" class="grid-container"></div> </section> <section class="section"> <h1 class="title">Guests</h1> - <div id="Guest_list" class="button-grid"></div> + <h1 class="subtitle">Add guests to the pool.</h1> + <div id="Guest_list" class="grid-container"></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"> + <button class="button 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"> + <div id="player-load" class="file is-danger is-boxed"> <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> + <span class="file-cta">Update Regulars</span> </label> </div> </div> |