diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 43 |
1 files changed, 23 insertions, 20 deletions
@@ -1,32 +1,25 @@ <!DOCTYPE html> -<html lang="en" data-theme="light"> +<html lang="en" data-theme="dark"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Match Up!</title> - <script src="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js"></script> + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css"> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css"> <link rel="stylesheet" href="index.css"> </head> <body> <section class="section"> - <div class="container"> - <div class="columns"> - <div class="column is-one-quarter"><img src="icon.svg" style="height: 80%;"></div> - <div class="column is-one-quarter"><h1 class="title">Match Up!</h1></div> - <div class="column"> - <div class="field"> - <div class="field is-grouped is-grouped-right"> - <button class="button is-large is-danger" id="timer-dec">-</button> - <input class="input is-large" id="timer-display" type="text" readonly></input> - <button class="button is-large is-success" id="timer-inc">+</button> - <button class="button is-large is-info" id="timer-start">Start</button> - <button class="button is-large is-info" id="timer-stop">Stop</button> - </div> - </div> - </div> + <nav class="navbar" role="navigation" aria-label="main navigation"> + <div class="navbar-brand"> + <a class="navbar-item" href="https://bulma.io"> + <img src="icon.svg" style="height: 80%;"> Match Up + </a> </div> + </nav> + <div class="container"> <section class="section"> <h2 class="title">Games</h1> <div id="game_list"></div> @@ -34,10 +27,10 @@ <section class="section"> <div class="field is-grouped is-grouped-centered"> <div class="control"> - <button class="button is-large is-dark" id="propose">Propose</button> + <button class="button is-medium is-dark" id="propose">Propose</button> </div> <div class="control"> - <div class="select is-large is-fullwidth"> + <div class="select is-medium is-fullwidth"> <select name="skill" id="skill"> <option value="10">All Levels</option> <option value="5">2 Levels</option> @@ -47,9 +40,18 @@ </div> </div> <div class="control"> - <button class="button is-large is-success" id="confirm">Confirm</button> + <button class="button is-medium is-success" id="confirm">Confirm</button> </div> </div> + <div class="field"> + <div class="field is-grouped is-grouped-centered"> + <button class="button is-medium is-danger" id="timer-dec">-</button> + <input class="input is-medium" id="timer-display" type="text" readonly></input> + <button class="button is-medium is-success" id="timer-inc">+</button> + <button class="button is-medium is-info" id="timer-start">Start</button> + <button class="button is-medium is-info" id="timer-stop">Stop</button> + </div> + </div> </section> <section class="section"> <h2 class="title">Courts</h1> @@ -78,5 +80,6 @@ </section> <script src="index.js" type="module"></script> <script src="timer.js"></script> + <script src="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js"></script> </body> </html>
\ No newline at end of file |