hawk / commit
Moving styles into their own file and adding a footer that displays build information.
.gitlab-ci.yml | 1 + Makefile | 7 +++++ public/index.html | 90 +++++++++++++++++-------------------------------------- public/main.js | 3 ++ public/style.css | 62 ++++++++++++++++++++++++++++++++++++++ public/version.js | 1 + 6 files changed, 102 insertions(+), 62 deletions(-) diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index 0741fd9..ad6f9e1 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -4,6 +4,7 @@ pages: stage: deploy script: - echo "The site will be deployed to $CI_PAGES_URL" + - make artifacts: paths: - public diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..42a2462 --- /dev/null +++ b/Makefile @@ -0,0 +1,7 @@ +GIT_COMMIT := $(shell git rev-parse --short HEAD) +BUILD_TIME := $(shell date -u '+%Y-%m-%d %H:%M:%S') + +all: build + +build: + echo "var hawkInfo = {version: '${GIT_COMMIT}', updated: '${BUILD_TIME}'};" > public/version.js diff --git a/public/index.html b/public/index.html index 79648ed..ae7ce88 100644 --- a/public/index.html +++ b/public/index.html @@ -5,56 +5,7 @@ <meta charset="utf-8"> <title>Hawk</title> <link rel="icon" type="image/png" href="favicon.png"> - <style> - body { - font-family: sans-serif; - margin: 0; - padding: 0; - max-width: 600px; - margin: 0 auto; - } - - #main, - #controls, - #sign-in-div { - /* margin-top: 2em; */ - text-align: center; - } - - #minutes, - #seconds, - #sign-in-div { - display: flex; - flex-direction: row; - align-items: center; - display: inline-block; - } - - #minutes-input, - #seconds-input { - width: 3em; - padding: 0.5em; - } - - div { - margin-left: 0.5em; - margin-right: 0.5em; - padding: 0.5em; - } - - #header { - margin-top: 1em; - text-align: center; - } - - /* media query for screens smaller than 600px */ - @media (max-width: 600px) { - body { - font-size: 16px; - /* increase the font size */ - } - } - </style> + <link rel="stylesheet" href="style.css"> </head> <body> @@ -71,19 +22,22 @@ </div> </template> <div id="header"> + <h1 id="header"> + <img id="logo" src="favicon.png" /> + <span>Hawk</span> + </h1> + </div> - <h1>Hawk</h1> - <div> - You can specify a duration ("5 and a half minutes"), and Hawk will find a song in your Spotify library with - that - length, - or as close to it as possible. - </div> - <div> - The name 'Hawk' comes from the movie <a href="https://www.imdb.com/title/tt0102070/" target="_blank">Hudson - Hawk</a>, where Bruce Willis picks and sings songs of a particular lengths to time things. Yeah, it's - weird, but it's also a fun movie, so check it out. - </div> + <div> + You can specify a duration ("5 and a half minutes"), and Hawk will find a song in your Spotify library with + that + length, + or as close to it as possible. + </div> + <div> + The name 'Hawk' comes from the movie <a href="https://www.imdb.com/title/tt0102070/" target="_blank">Hudson + Hawk</a>, where Bruce Willis picks and sings songs of a particular lengths to time things. Yeah, it's + weird, but it's also a fun movie, so check it out. </div> <div id="main"> <div id="sign-in-div"> @@ -105,7 +59,19 @@ <button id="signout">Sign Out</button> </div> + <div id="footer"> + <div> + Hawk Version <span id="version"></span> + </div> + <div> + Updated <span id="updated"></span> + </div> + <div> + <a href="https://gitlab.com/PavelSafronov/hawk" target="_blank">Source</a> + </div> + </div> </div> + <script src="version.js"></script> <script src="signin.js"></script> <script src="db.js"></script> <script src="api.js"></script> diff --git a/public/main.js b/public/main.js index 70e0542..7d05602 100644 --- a/public/main.js +++ b/public/main.js @@ -1,3 +1,6 @@ +document.getElementById('version').innerText = hawkInfo.version; +document.getElementById('updated').innerText = hawkInfo.updated; + const urlParams = new URLSearchParams(window.location.search); const code = urlParams.get('code'); const error = urlParams.get('error'); diff --git a/public/style.css b/public/style.css new file mode 100644 index 0000000..89f83a7 --- /dev/null +++ b/public/style.css @@ -0,0 +1,62 @@ +body { + font-family: sans-serif; + margin: 0; + padding: 0; + max-width: 600px; + margin: 0 auto; +} + +#main, +#controls, +#sign-in-div { + /* margin-top: 2em; */ + text-align: center; +} + +#minutes, +#seconds, +#sign-in-div { + display: flex; + flex-direction: row; + align-items: center; + display: inline-block; +} + +#minutes-input, +#seconds-input { + width: 3em; + padding: 0.5em; +} + +div { + margin-left: 0.5em; + margin-right: 0.5em; + padding: 0.5em; +} + +#header { + margin-top: 1em; + text-align: center; + display: flex; + align-items: center; +} + +#logo { + width: 48px; + height: 48px; + margin-right: 10px; +} + +#footer { + margin-top: 1em; + text-align: center; + font-size: smaller; +} + +/* media query for screens smaller than 600px */ +@media (max-width: 600px) { + body { + font-size: 16px; + /* increase the font size */ + } +} \ No newline at end of file diff --git a/public/version.js b/public/version.js new file mode 100644 index 0000000..89b17a1 --- /dev/null +++ b/public/version.js @@ -0,0 +1 @@ +var hawkInfo = {version: '6e3f55a', updated: '2023-10-13 18:09:35'};