diff --git a/PlaylistPage.html b/PlaylistPage.html new file mode 100644 index 0000000..7ac7128 --- /dev/null +++ b/PlaylistPage.html @@ -0,0 +1,44 @@ + + + + + + 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..e5c5061 --- /dev/null +++ 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 new file mode 100644 index 0000000..4a12fc4 --- /dev/null +++ b/PlaylistPageStyle.css @@ -0,0 +1,95 @@ +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; +} +.images{ + height: 100%; + width: 100%; +} + +.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..1e92575 --- /dev/null +++ b/SplashPage.html @@ -0,0 +1,56 @@ + + + + + + Splash Page + + + + + + + +
+ +
+
+
+
+
+
+ +
+
+
+

track bin

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

© 2017 Ismael Perez

+
+
+
+ + diff --git a/SplashPageJavascript.js b/SplashPageJavascript.js new file mode 100644 index 0000000..6d910f1 --- /dev/null +++ b/SplashPageJavascript.js @@ -0,0 +1,14 @@ +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) + + $('.chooseTracksBtn').click(function() { + window.location='PlaylistPage.html'; + }); } + }); + +}); diff --git a/SplashPageStyle.css b/SplashPageStyle.css new file mode 100644 index 0000000..48a9ae5 --- /dev/null +++ b/SplashPageStyle.css @@ -0,0 +1,132 @@ +body{ + margin: 0; + padding: 0; + height: 100%; +} + + +.container { + 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; + min-height: 100%; + width: 50%; + 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: 90vh; + width: 50%; + 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: 180px; + width: 180px; + background-color: red; + padding: 0; + margin-left: 36%; + margin-top: 3%; + margin-bottom: 1%; + text-align: center; + position: relative; + z-index: 1; +} +.albImgOne{ + height: 100%; + width: 100%; +} + +.albImgContTwo { + height: 180px; + width: 180px; + background-color: blue; + padding: 0; + margin-left: 36%; + margin-top: 1%; + margin-bottom: 1%; + position: relative; + z-index: 1; +} + +.albImgContThree { + height: 180px; + width: 180px; + background-color: green; + padding: 0; + margin-left: 36%; + margin-top: 1%; + margin-bottom: 1%; + text-align: center; + position: relative; + z-index: 1; +} + +#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/index.html b/index.html deleted file mode 100644 index 8e0abfd..0000000 --- a/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - -