hawk / commit
Reorganization of the code and a slight update to the README.
README.md | 16 +++++++---
public/{ => images}/Spotify_Icon_RGB_Black.png | Bin
public/{ => images}/Spotify_Logo_RGB_Black.png | Bin
public/{ => images}/favicon.png | Bin
public/{ => images}/favicon.svg | 0
public/{ => images}/hawk.png | Bin
public/{ => images}/hawk.svg | 0
public/{ => images}/screenshot-1.png | Bin
public/{ => images}/screenshot-2.png | Bin
public/{ => images}/screenshot-3.png | Bin
public/index.html | 30 +++++++++++-------
public/{ => js}/api.js | 0
public/{ => js}/db.js | 0
public/{ => js}/main.js | 0
public/{ => js}/signin.js | 0
public/{ => js}/template.js | 0
public/{ => js}/version.js | 0
public/{ => styles}/style.css | 41 ++++++++++---------------
18 files changed, 47 insertions(+), 40 deletions(-)
diff --git a/README.md b/README.md
index caf5c39..5b71da3 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,9 @@
## Description
-You can specify a duration ("5 and a half minutes"), and Hawk will find a song in your library with that length, or as close to it as possible. Name comes from "Hudson Hawk", https://www.imdb.com/title/tt0102070/, where Bruce Willis does this for heists.
+You can specify a duration (for example, "5:32"), and *Hawk* will find a song in your Spotify library with that length, and with a single click you can start playing that song.
+
+The name *Hawk* comes from the movie [Hudson Hawk](https://www.imdb.com/title/tt0102070), where Bruce Willis sings songs of particular lengths in order to time things. Yeah, it's weird, but it's also a pretty fun movie, so check it out.
## Links
@@ -13,8 +15,14 @@ Pages location: https://pavelsafronov.gitlab.io/hawk/
Client ID: 6c4c04a3751b4e409ddad7d71aad9949
+## Screenshots
+
+
+
+
+
+
+
## TODOs
-1. Add pagination to API calls, and cache the final result
-2. Add reporting, so user can see that data is being processed
-3. Use Spotify batching to speed up and reduce API calls
+1. Add a histogram of song lengths and a way to get a slice of songs from it.
diff --git a/public/Spotify_Icon_RGB_Black.png b/public/images/Spotify_Icon_RGB_Black.png
similarity index 100%
rename from public/Spotify_Icon_RGB_Black.png
rename to public/images/Spotify_Icon_RGB_Black.png
diff --git a/public/Spotify_Logo_RGB_Black.png b/public/images/Spotify_Logo_RGB_Black.png
similarity index 100%
rename from public/Spotify_Logo_RGB_Black.png
rename to public/images/Spotify_Logo_RGB_Black.png
diff --git a/public/favicon.png b/public/images/favicon.png
similarity index 100%
rename from public/favicon.png
rename to public/images/favicon.png
diff --git a/public/favicon.svg b/public/images/favicon.svg
similarity index 100%
rename from public/favicon.svg
rename to public/images/favicon.svg
diff --git a/public/hawk.png b/public/images/hawk.png
similarity index 100%
rename from public/hawk.png
rename to public/images/hawk.png
diff --git a/public/hawk.svg b/public/images/hawk.svg
similarity index 100%
rename from public/hawk.svg
rename to public/images/hawk.svg
diff --git a/public/screenshot-1.png b/public/images/screenshot-1.png
similarity index 100%
rename from public/screenshot-1.png
rename to public/images/screenshot-1.png
diff --git a/public/screenshot-2.png b/public/images/screenshot-2.png
similarity index 100%
rename from public/screenshot-2.png
rename to public/images/screenshot-2.png
diff --git a/public/screenshot-3.png b/public/images/screenshot-3.png
similarity index 100%
rename from public/screenshot-3.png
rename to public/images/screenshot-3.png
diff --git a/public/index.html b/public/index.html
index 2f0d466..4160bcd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,25 +4,27 @@
<head>
<meta charset="utf-8">
<title>Hawk</title>
- <link rel="icon" type="image/png" href="favicon.png">
- <link rel="stylesheet" href="style.css">
+ <link rel="icon" type="image/png" href="images/favicon.png">
+ <link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</head>
<body>
+ <!-- HEADER -->
<div>
<div>
<h1 id="header">
- <img id="logo" src="hawk.png" />
+ <img id="logo" src="images/hawk.png" />
<span>Hawk</span>
</h1>
</div>
<div>
- <img id="spotify-logo" src="Spotify_Logo_RGB_Black.png" />
+ <img id="spotify-logo" src="images/Spotify_Logo_RGB_Black.png" />
</div>
</div>
+ <!-- INTRO -->
<div id="intro">
<div>
@@ -41,6 +43,7 @@
</div>
</div>
+ <!-- MAIN -->
<div id="main">
<div class="signedout">
<div>
@@ -50,7 +53,7 @@
</div>
<button id="signin" onclick="signIn()">
<div class="icon-and-label">
- <img id="spotify-icon" src="Spotify_Icon_RGB_Black.png" />
+ <img id="spotify-icon" src="images/Spotify_Icon_RGB_Black.png" />
Sign In
</div>
</button>
@@ -88,6 +91,8 @@
</div>
</div>
+
+ <!-- FOOTER -->
<hr />
<div id="footer">
<button id="signout" class="signedin" onclick="signOut()">Sign Out</button>
@@ -106,13 +111,16 @@
</div>
</div>
</div>
- <script src="version.js"></script>
- <script src="signin.js"></script>
- <script src="db.js"></script>
- <script src="api.js"></script>
- <script src="template.js"></script>
- <script src="main.js"></script>
+ <!-- SCRIPTS -->
+ <script src="js/version.js"></script>
+ <script src="js/signin.js"></script>
+ <script src="js/db.js"></script>
+ <script src="js/api.js"></script>
+ <script src="js/template.js"></script>
+ <script src="js/main.js"></script>
+
+ <!-- TEMPLATES -->
<template id="found-song-item">
<div class="song">
<div>
diff --git a/public/api.js b/public/js/api.js
similarity index 100%
rename from public/api.js
rename to public/js/api.js
diff --git a/public/db.js b/public/js/db.js
similarity index 100%
rename from public/db.js
rename to public/js/db.js
diff --git a/public/main.js b/public/js/main.js
similarity index 100%
rename from public/main.js
rename to public/js/main.js
diff --git a/public/signin.js b/public/js/signin.js
similarity index 100%
rename from public/signin.js
rename to public/js/signin.js
diff --git a/public/template.js b/public/js/template.js
similarity index 100%
rename from public/template.js
rename to public/js/template.js
diff --git a/public/version.js b/public/js/version.js
similarity index 100%
rename from public/version.js
rename to public/js/version.js
diff --git a/public/style.css b/public/styles/style.css
similarity index 90%
rename from public/style.css
rename to public/styles/style.css
index a98e196..45aa67a 100644
--- a/public/style.css
+++ b/public/styles/style.css
@@ -8,27 +8,15 @@ body {
margin: 0 auto;
}
-#minutes,
-#seconds,
-#sign-in-div {
- display: flex;
- flex-direction: row;
- align-items: center;
- display: inline-block;
-}
-
-#minutes-input,
-#seconds-input {
- width: 3em;
- font-size: 1.5em;
-}
-
div {
- /* margin-left: 0.5em; */
- /* margin-right: 0.5em; */
padding: 0.5em 0;
}
+button {
+ border: 2px solid black;
+ font-size: 1em;
+}
+
#header {
margin-top: 1em;
text-align: center;
@@ -42,6 +30,12 @@ div {
margin-right: 10px;
}
+#minutes-input,
+#seconds-input {
+ width: 3em;
+ font-size: 1.5em;
+}
+
#footer {
margin-top: 1em;
text-align: center;
@@ -50,8 +44,9 @@ div {
align-items: center;
}
-#signout {
- margin-top: 5em;
+#footer>div {
+ padding: 1rem;
+ margin: 1rem;
}
.material-symbols-outlined {
@@ -72,11 +67,6 @@ div {
margin: .25em;
}
-button {
- border: 2px solid black;
- font-size: 1em;
-}
-
.song {
/* border 1px black */
border: 2px solid black;
@@ -95,7 +85,6 @@ button {
}
#spotify-logo {
- /* width: 48px; */
height: 2em;
margin-right: 1em;
}
@@ -131,6 +120,7 @@ button {
/* stack children vertically */
justify-content: space-between;
/* distribute space between song name and artist name */
+ width: 100%;
}
.song-name {
@@ -156,4 +146,5 @@ button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
+ width: 100%;
}
\ No newline at end of file