From b9579721e2033a9c43d4c43230b810d02a7d57b1 Mon Sep 17 00:00:00 2001 From: ismael perez Date: Fri, 14 Jul 2017 13:31:55 -0700 Subject: [PATCH 1/3] added design layouts for Splash page and Playlist page --- PlaylistPage.html | 43 ++++++++++++++ PlaylistPageJavascript.js | 0 PlaylistPageStyle.css | 90 +++++++++++++++++++++++++++++ SplashPage.html | 52 +++++++++++++++++ SplashPageJavascript.js | 0 SplashPageStyle.css | 115 ++++++++++++++++++++++++++++++++++++++ index.html | 11 ---- 7 files changed, 300 insertions(+), 11 deletions(-) create mode 100644 PlaylistPage.html create mode 100644 PlaylistPageJavascript.js create mode 100644 PlaylistPageStyle.css create mode 100644 SplashPage.html create mode 100644 SplashPageJavascript.js create mode 100644 SplashPageStyle.css delete mode 100644 index.html diff --git a/PlaylistPage.html b/PlaylistPage.html new file mode 100644 index 0000000..79567a9 --- /dev/null +++ b/PlaylistPage.html @@ -0,0 +1,43 @@ + + + + + + Playlist Page + + + + + + +
+ +
+
+
+

click an album to add its track to the bin

+
+
+
+ +
+
+
+
+
+
+
+
+ + +
+
+ +
+
+

© 2017 Ismael Perez

+
+
+
+ + diff --git a/PlaylistPageJavascript.js b/PlaylistPageJavascript.js new file mode 100644 index 0000000..e69de29 diff --git a/PlaylistPageStyle.css b/PlaylistPageStyle.css new file mode 100644 index 0000000..178cbf8 --- /dev/null +++ b/PlaylistPageStyle.css @@ -0,0 +1,90 @@ +body { + margin: 0; + padding: 0; + height: 100%; +} + +.container { + margin: 0; + padding: 0; + min-height: 100%; + width: 100%; +} + +.topNavBar { + height: 120px; + width: 100%; + margin: 0; + padding: 0; + background-color: #9B9B8C; +} + +.navbarText { + color: white; + font-weight: 200; + margin-left: 50px; + margin-top: 80px; +} + +.row { + height: 120px; + border: 1px solid black; + margin: 0; + margin-bottom: 30px; + padding: 0; +} + +.albumCoverCont { + height: 70px; + width: 70px; + border: 2px solid black; + margin-top: 10px; + margin-left: 40px; +} + +.albumListCont { + background-color: #EEEEEE; + height: 160px; + border: 2px solid black; +} + +.btnRow { + margin-top: 20px; + padding: 0; + +} + +.buttonOne { + width: 40%; + margin-right: 3%; + color: white; + background-color: #353526; + font-weight: 200; + height: 40px; +} + +.buttonTwo { + width: 40%; + color: white; + background-color: #353526; + font-weight: 200; + height: 40px; +} + +#footerBottom { + position: absolute; + bottom: 0; + width: 100%; + height: 40px; +} + +.footer { + height: 40px; + background-color: #9B9B8C; +} + +.footerText { + margin-left: 50px; + color: white; + font-weight: 200; +} diff --git a/SplashPage.html b/SplashPage.html new file mode 100644 index 0000000..39ea4d8 --- /dev/null +++ b/SplashPage.html @@ -0,0 +1,52 @@ + + + + + + Splash Page + + + + + + + +
+ +
+
+
+
+

track bin

+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+

© 2017 Ismael Perez

+
+
+ + + + diff --git a/SplashPageJavascript.js b/SplashPageJavascript.js new file mode 100644 index 0000000..e69de29 diff --git a/SplashPageStyle.css b/SplashPageStyle.css new file mode 100644 index 0000000..f86ed39 --- /dev/null +++ b/SplashPageStyle.css @@ -0,0 +1,115 @@ +.navbar { + background-color: #9B9B8C; + margin: 0; + padding: 0; + border-bottom: 2px solid black; +} + +.container { + height: 100vh; + width: 100%; + margin: 0; + padding: 0; + background-color: #EEEEEE; +} + +.leftHalf { + background-color: #EEEEEE; + height: 100vh; + width: 45%; + float: left; +} + +.leftSideContentCont { + margin-left: 30%; + margin-top: 40% +} + +.trackBinText { + text-align: center; + font-size: 48px; + font-weight: 200; + color: #692A7E; + margin: 0; + margin-bottom: 10px; + padding: 0; + width: 50%; +} + +.chooseTracksBtn { + background-color: #353526; + color: #EEEEEE; + width: 200px; +} + +.rightHalf { + height: 100vh; + width: 55%; + margin: 0; + padding: 0; + float: right; +} + +.railImage { + background-image: url(resources/track.fw.png); + background-size: 100%; + opacity: 0.4; + height: 100%; + width: 100%; + z-index: 0; +} + +.albumsContainer {} + +.albImgContOne { + height: 215px; + width: 200px; + background-color: red; + padding: 0; + margin-left: 35%; + margin-top: 2%; + margin-bottom: 1%; + text-align: center; + position: relative; + z-index: 1; +} +.albImgOne{ + height: 60px; + width: 60px; +} + +.albImgContTwo { + height: 215px; + width: 200px; + background-color: blue; + padding: 0; + margin-left: 35%; + margin-top: 1%; + margin-bottom: 1%; + position: relative; + z-index: 1; +} + +.albImgContThree { + height: 215px; + width: 200px; + background-color: green; + padding: 0; + margin-left: 35%; + margin-top: 1%; + margin-bottom: 1%; + text-align: center; + position: relative; + z-index: 1; +} + +.footer { + height: 40px; + background-color: #9B9B8C; +} + +.footerText { + margin-left: 50px; + color: white; + font-weight: 200; +} diff --git a/index.html b/index.html deleted file mode 100644 index 8e0abfd..0000000 --- a/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - From c53241d4ffad2bd55db0a285c233573d7916d4c5 Mon Sep 17 00:00:00 2001 From: ismael perez Date: Fri, 14 Jul 2017 14:11:34 -0700 Subject: [PATCH 2/3] fixed splash page --- PlaylistPageStyle.css | 3 ++- SplashPage.html | 54 ++++++++++++++++++++------------------ SplashPageJavascript.js | 11 ++++++++ SplashPageStyle.css | 57 ++++++++++++++++++++++++++--------------- 4 files changed, 79 insertions(+), 46 deletions(-) diff --git a/PlaylistPageStyle.css b/PlaylistPageStyle.css index 178cbf8..ad0d268 100644 --- a/PlaylistPageStyle.css +++ b/PlaylistPageStyle.css @@ -51,7 +51,7 @@ body { .btnRow { margin-top: 20px; padding: 0; - + } .buttonOne { @@ -81,6 +81,7 @@ body { .footer { height: 40px; background-color: #9B9B8C; + } .footerText { diff --git a/SplashPage.html b/SplashPage.html index 39ea4d8..1e92575 100644 --- a/SplashPage.html +++ b/SplashPage.html @@ -11,42 +11,46 @@ -
- -
-
-
-

track bin

-
- + +
+
+
-
-
-
- + +
+
+
+

track bin

+
+ +
-
+
+
+
+
+ +
+
+
+
+
-
+
+
+
-
-
-
-
-
-
-
-

© 2017 Ismael Perez

+
+
+

© 2017 Ismael Perez

+
- - diff --git a/SplashPageJavascript.js b/SplashPageJavascript.js index e69de29..eee7e5d 100644 --- a/SplashPageJavascript.js +++ b/SplashPageJavascript.js @@ -0,0 +1,11 @@ +window.addEventListener('load', function(){ + + $.ajax({ + url:'https://lit-fortress-6467.herokuapp.com/object', + success:function(data){ + var image =(data["results"][0]['cover_art']); + $('.albImgOne').attr('src', image) + } + }); + +}); diff --git a/SplashPageStyle.css b/SplashPageStyle.css index f86ed39..4c12db1 100644 --- a/SplashPageStyle.css +++ b/SplashPageStyle.css @@ -1,22 +1,30 @@ -.navbar { - background-color: #9B9B8C; +body{ margin: 0; padding: 0; - border-bottom: 2px solid black; + height: 100%; } + .container { - height: 100vh; - width: 100%; margin: 0; padding: 0; + min-height: 100%; + width: 100%; background-color: #EEEEEE; } +.topNavBar { + height: 60px; + background-color: #9B9B8C; + margin: 0; + padding: 0; + border-bottom: 2px solid black; +} + .leftHalf { background-color: #EEEEEE; - height: 100vh; - width: 45%; + min-height: 100%; + width: 50%; float: left; } @@ -43,8 +51,8 @@ } .rightHalf { - height: 100vh; - width: 55%; + height: 90vh; + width: 50%; margin: 0; padding: 0; float: right; @@ -59,15 +67,17 @@ z-index: 0; } -.albumsContainer {} +.albumsContainer { + +} .albImgContOne { - height: 215px; - width: 200px; + height: 180px; + width: 180px; background-color: red; padding: 0; - margin-left: 35%; - margin-top: 2%; + margin-left: 36%; + margin-top: 3%; margin-bottom: 1%; text-align: center; position: relative; @@ -79,11 +89,11 @@ } .albImgContTwo { - height: 215px; - width: 200px; + height: 180px; + width: 180px; background-color: blue; padding: 0; - margin-left: 35%; + margin-left: 36%; margin-top: 1%; margin-bottom: 1%; position: relative; @@ -91,11 +101,11 @@ } .albImgContThree { - height: 215px; - width: 200px; + height: 180px; + width: 180px; background-color: green; padding: 0; - margin-left: 35%; + margin-left: 36%; margin-top: 1%; margin-bottom: 1%; text-align: center; @@ -103,6 +113,13 @@ z-index: 1; } +#footerBottom { + position: absolute; + bottom: 0; + width: 100%; + height: 40px; +} + .footer { height: 40px; background-color: #9B9B8C; From 13c77445d55a51fff5b80cb95f898ccd14653cb0 Mon Sep 17 00:00:00 2001 From: ismael perez Date: Fri, 14 Jul 2017 15:01:00 -0700 Subject: [PATCH 3/3] product as is --- PlaylistPage.html | 1 + PlaylistPageJavascript.js | 15 +++++++++++++++ PlaylistPageStyle.css | 4 ++++ SplashPageJavascript.js | 5 ++++- SplashPageStyle.css | 4 ++-- 5 files changed, 26 insertions(+), 3 deletions(-) diff --git a/PlaylistPage.html b/PlaylistPage.html index 79567a9..7ac7128 100644 --- a/PlaylistPage.html +++ b/PlaylistPage.html @@ -23,6 +23,7 @@

click an album to add its track to the bin

+
diff --git a/PlaylistPageJavascript.js b/PlaylistPageJavascript.js index e69de29..e5c5061 100644 --- a/PlaylistPageJavascript.js +++ b/PlaylistPageJavascript.js @@ -0,0 +1,15 @@ +window.addEventListener('load', function(){ + + $.ajax({ + url:'https://lit-fortress-6467.herokuapp.com/object', + success:function(data){ + + for (var i = 0; i < data.results.length; i++) { + var image = (data.results[0]['cover_art']); + var element = document.createElement('img'); + $('image').attr('class', 'images') + $('.images').attr('src', image); + } + } + }); +}); diff --git a/PlaylistPageStyle.css b/PlaylistPageStyle.css index ad0d268..4a12fc4 100644 --- a/PlaylistPageStyle.css +++ b/PlaylistPageStyle.css @@ -41,6 +41,10 @@ body { margin-top: 10px; margin-left: 40px; } +.images{ + height: 100%; + width: 100%; +} .albumListCont { background-color: #EEEEEE; diff --git a/SplashPageJavascript.js b/SplashPageJavascript.js index eee7e5d..6d910f1 100644 --- a/SplashPageJavascript.js +++ b/SplashPageJavascript.js @@ -5,7 +5,10 @@ window.addEventListener('load', function(){ success:function(data){ var image =(data["results"][0]['cover_art']); $('.albImgOne').attr('src', image) - } + + $('.chooseTracksBtn').click(function() { + window.location='PlaylistPage.html'; + }); } }); }); diff --git a/SplashPageStyle.css b/SplashPageStyle.css index 4c12db1..48a9ae5 100644 --- a/SplashPageStyle.css +++ b/SplashPageStyle.css @@ -84,8 +84,8 @@ body{ z-index: 1; } .albImgOne{ - height: 60px; - width: 60px; + height: 100%; + width: 100%; } .albImgContTwo {