From c5a8db7537ce1058ed045d13f126f27eae8c8f2c Mon Sep 17 00:00:00 2001 From: Brandon Thomas Date: Wed, 30 Jan 2019 03:20:59 -0500 Subject: [PATCH] Frontend copied into `brandon.audio` --- .gitignore | 2 + brandon.audio/error.html | 10 ++ brandon.audio/index.html | 78 +++++++++++++ brandon.audio/main.css | 237 ++++++++++++++++++++++++++++++++++++++ brandon.audio/robots.txt | 2 + brandon.audio/style.css | 104 +++++++++++++++++ s3-deploy-brandonaudio.sh | 6 +- 7 files changed, 436 insertions(+), 3 deletions(-) create mode 100644 brandon.audio/error.html create mode 100644 brandon.audio/index.html create mode 100644 brandon.audio/main.css create mode 100644 brandon.audio/robots.txt create mode 100644 brandon.audio/style.css diff --git a/.gitignore b/.gitignore index f2d785db75..54b79d15b4 100644 --- a/.gitignore +++ b/.gitignore @@ -12,3 +12,5 @@ web/*.js web/deploy/ web/images/ web/output/ +brandon.audio/deploy/ +brandon.audio/output/ diff --git a/brandon.audio/error.html b/brandon.audio/error.html new file mode 100644 index 0000000000..db63b58790 --- /dev/null +++ b/brandon.audio/error.html @@ -0,0 +1,10 @@ + + + + Brandon Audio — Error + + +

Bad Error

+

This thing doesn't exist.

+ + diff --git a/brandon.audio/index.html b/brandon.audio/index.html new file mode 100644 index 0000000000..23a710a524 --- /dev/null +++ b/brandon.audio/index.html @@ -0,0 +1,78 @@ + + + + [brandon.audio] + + + + + + + + + + + +
+ +
+
+
+ +
+ +
+
+ +
+
+ +
+
+
+
+
+ + + + + + + diff --git a/brandon.audio/main.css b/brandon.audio/main.css new file mode 100644 index 0000000000..0d389c34b5 --- /dev/null +++ b/brandon.audio/main.css @@ -0,0 +1,237 @@ +html, +body { + margin: 0; + padding: 0; +} + +body, +input, +button { + font-family: "Fira Sans"; +} + +#main { + margin: auto; + max-width: 1000px; +} + +h1 { + color: #333; + font-family: "Happy Monkey"; + font-size: 3em; + margin: 20px 0 10px; + text-align: center; +} + +#animation canvas { + display: block; + margin: auto; +} + +#logo { + display: none; + z-index: 100; + position: absolute; + top: 0; + width: 100%; +} + +#input-box { + box-sizing: border-box; + padding: 12px 15px; + width: 100%; +} + +pre { + display: inline; +} + +input { + box-sizing: border-box; + font-size: 1.2em; + border: 1px solid #999; + padding: 0.3em; + width: 100%; +} + +button { + background-color: #e5e5e5; + border: 0; + color: #777; + font-size: 1.2em; + margin: 20px; + min-width: 150px; + padding: 0.75em; + padding: 10px; +} + +#buttons { + margin-top: 20px; + width: 100%; +} + +#button-left { + float: left; + width: 50%; +} + +#button-right { + float: right; + width: 50%; +} + +button#speak { + display: block; + margin: 0 auto; +} + +button#clear { + display: block; + margin: 0 auto; +} + +a:link, a:visited { + color: #c75; + font-weight: bold; +} + +aside { + position: absolute; + top: 0; + z-index: 100; + background-color: rgba(255,255,255,0.85); + width: 100%; +} + +aside #about { + padding: 20px 20px 50px; + margin: auto; + max-width: 1000px; +} + +#close_top, +#close_bottom { + float: right; +} + +.hidden { + display: none; +} + +footer { + width: 100%; + position: absolute; + bottom: 0em; + overflow: auto; + padding: 0; + margin: 0; + color: #777; +} + +footer a:link, +footer a:visited { + color: #d86; + font-weight: bold; +} + +#footer-text { + text-align: center; + padding: 15px; +} + +.clear { + clear: both; +} +/** RESPONSIVENESS */ + +@media screen and (min-width: 600px) { + button { + min-width: 250px; + } +} + +@media screen and (min-width: 1px) { + #animation canvas { + width: 200px; + } + #animation { + height: 117px; + } +} + +@media screen and (min-width: 300px) { + #animation canvas { + width: 300px; + } + #animation { + height: 176px; + } +} + +@media screen and (min-width: 400px) { + #animation canvas { + width: 400px; + } + #animation { + height: 235px; + } +} + +@media screen and (min-width: 450px) { + #animation canvas { + width: 450px; + } + #animation { + height: 264px; + } +} + +@media screen and (min-width: 500px) { + #animation canvas { + width: 500px; + } + #animation { + height: 293px; + } +} + +@media screen and (min-width: 600px) { + #animation canvas { + width: 600px; + } + #animation { + height: 352px; + } +} + +@media screen and (min-width: 800px) { + #animation canvas { + width: 800px; + } + #animation { + height: 470px; + } +} + +@media screen and (min-width: 1000px) { + #animation canvas { + width: 800px; + } + #animation { + height: 470px; + } +} + +/** Hide footer when using onscreen keyboard. */ +@media screen and (max-height: 450px) { + footer { + display: none; + } +} + +@media screen and (max-height: 740px) { + footer p { + display: inline; + } +} + diff --git a/brandon.audio/robots.txt b/brandon.audio/robots.txt new file mode 100644 index 0000000000..c2a49f4fb8 --- /dev/null +++ b/brandon.audio/robots.txt @@ -0,0 +1,2 @@ +User-agent: * +Allow: / diff --git a/brandon.audio/style.css b/brandon.audio/style.css new file mode 100644 index 0000000000..88f9d07145 --- /dev/null +++ b/brandon.audio/style.css @@ -0,0 +1,104 @@ + +h1 { + font-family: ubuntu, tahoma; + font-size: 1.8em; + text-align: center; + color: #333; +} + +input { + border: 1px solid #ccc; + padding: 8px; + margin-bottom: 1em; +} + +input#text { + width: 70%; +} + +input#vol { + width: 30px; +} + +button { + background-color: #eee; + border: 1px solid #ccc; + padding: 8px; +} + +select { + background-color: #eee; + border: 1px solid #ccc; + padding: 7px; +} + +#control_elements { + display: inline; +} + +@media (max-width: 600px) { + #control_elements { + display: block; + } +} + +#main { + margin: auto; + width: 90%; + text-align: center; +} + + +.error input#text { + border-color: #f55; + background-color: #fee; + color: #500; +} + +.ok input#text { + border-color: #5a5; + background-color: #efe; +} + +#typeahead { + color: #777; + font-style: italic; + width: 100%; + height: 1em; + margin: 0 0 10px 0; + overflow: hidden; + /*text-overflow: ellipsis;*/ +} + +#typeahead ul { + list-style-type: none; + margin: 0; + padding: 0; +} + +#typeahead li { + display: inline; + padding: 5px; + border: 1px; +} + +#stats { + margin: 20px 0; + font-size: 0.8em; + color #777; +} + +ul#stats { + list-style-type: none; +} + +a:link, a:visited { + color: #00f; + text-decoration: none; +} + +a:active, a:hover { + color: #00f; + text-decoration: underline; +} + diff --git a/s3-deploy-brandonaudio.sh b/s3-deploy-brandonaudio.sh index a5b0f7fd68..e682b728c2 100755 --- a/s3-deploy-brandonaudio.sh +++ b/s3-deploy-brandonaudio.sh @@ -18,7 +18,7 @@ upload_assets() { # Calculate output directory. echo "> Calculate artifact SHA." - pushd ./web/output > /dev/null + pushd ./brandon.audio/output > /dev/null declare checksum=$(find . -type f -exec md5sum {} + | awk '{print $1}' | \ sort | md5sum | awk '{print $1}') popd > /dev/null @@ -27,12 +27,12 @@ upload_assets() { # Prep upload artifact. echo "> Prep upload of artifact ${checksum}." - pushd ./web + pushd ./brandon.audio mkdir -p $output_dir cp *css $output_dir cp *html $output_dir - cp output/* $output_dir + #cp output/* $output_dir # FIXME(2019-01-30): Not sure why this isn't working. Needed? # Modify URLs in index.html echo "> Modify asset paths, etc. in index.html."