diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..15f749b Binary files /dev/null and b/.DS_Store differ diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..b5cb7e6 --- /dev/null +++ b/css/style.css @@ -0,0 +1,166 @@ +@font-face { + font-family: 'avenir'; + src: url('../fonts/AvenirNextLTPro-Regular.otf'); +} + +body, p { + margin: 0; + font-family: avenir, sans-serif, serif; + font-size: 20px; +} + +button { + font-family: avenir, sans-serif, serif; +} + +.container-custom { + height: 100vh; + width: 100vw; +} + +header { + width: 100%; + background-color: #9B9B8C; +} + +.header-splash { + height: 10%; + border-bottom: 2px solid black; +} + +.header-page { + position: relative; + color: white; + height: 20%; + width: 100%; +} + +.header-title { + position: absolute; + left: 100px; + bottom: 10px; + font-size: 25px; +} + +.main-splash { + height: 80%; + width: 100%; + background-color: #EEEEEE; +} + +.main-splash span { + color: purple; + font-size: 48px; +} + +.left-section { + width: 50%; + height: 100%; + float: left; + margin: 0 auto; +} + +.left-box { + width: 200px; + height: 200px; + margin: 25% auto; + text-align: center; +} + +.right-section { + height: 100%; + width: 50%; + float: right; + position: relative; +} + +.right-section::before { + content: ' '; + display: block; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0.19; + z-index: 1; + background-image: url('../resources/track.jpg'); + background-repeat: no-repeat; + background-position: 50% 0; + -ms-background-size: cover; + -o-background-size: cover; + -moz-background-size: cover; + -webkit-background-size: cover; + background-size: cover; +} + +#tracks-container { + height: 100%; + width: 175px; + margin: 0 auto; +} + +#albums-container { + margin-left: 100px; + overflow: auto; +} + +.img-track-album { + width: 175px; + height: 175px; + margin: 5px 0; +} + +.img-thumbnail-album { + /*margin: 20px 30px 50px;*/ + margin: 20px; + width: 100px; + height: 100px; +} + +.img-thumbnail-album:first-child { + margin-left: 0; +} + +.album-description { + border: 2px solid black; + margin: 0 30px 20px 100px; + background-color: #EEEEEE; + width: 75%; + height: 150px; + overflow: auto; +} + +.btn-custom { + color: white; + font-size: 20px; + background-color: #353526; + padding: 10px 35px; +} + +.btn-custom:hover { + color: white; +} + +.btn-spacer { + margin: 5px; +} + +.btn-container { + margin-left: 95px; +} + +/*.spacer { + padding: 45px; +}*/ + +footer { + color: white; + height: 10%; + width: 100%; + /*text-align: center;*/ + position: fixed; + padding: 20px 100px; + bottom: 0; + background-color: #686859; +} diff --git a/images/division_bell.jpg b/images/the_division_bell.jpg similarity index 100% rename from images/division_bell.jpg rename to images/the_division_bell.jpg diff --git a/index.html b/index.html index b82dcc4..2b98805 100644 --- a/index.html +++ b/index.html @@ -1,15 +1,44 @@ - - - - - - - - + + + + Home + + + + + + + + + + + +
+ +
+ +
+ +
+
+
+ +
+
+ track bin + choose tracks +
+
+ +
+ + + +
+ + + + diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..b90e6e3 --- /dev/null +++ b/js/script.js @@ -0,0 +1,67 @@ +// Retrieve all albums +var albums = {}; +$.get('https://lit-fortress-6467.herokuapp.com/object').then(function(data) { + albums = data.results; + addTracks(); + addThumbnails(); + addEvents(); +}, function(e) { + console.log('Error occurred when retrieving album data. Please contact your system administrator! ', e); +}); + +function addTracks() { + // Add 3 random albums to the track on splash page + albums.sort(function() { + return 0.5 - Math.random(); + }); + let tracks = albums.slice(0, 3); + tracks.forEach(function(curr) { + let elem = createImgElement(curr, 'img-track-album'); + $('#tracks-container').append(elem); + }); +} + +function addThumbnails() { + // Add album thumbnails to the playlist page + albums.forEach(function(curr) { + let elem = createImgElement(curr, 'img-thumbnail-album'); + $('#albums-container').append(elem); + }); +} + +function createImgElement(item, cl) { + let elem = document.createElement('img'); + elem.setAttribute('id', item.id); + elem.setAttribute('src', 'images/' + item.cover_art); + elem.setAttribute('alt', item.artist); + if (cl !== null) { + elem.setAttribute('class', cl); + } + return elem; +} + +function addEvents() { + + // Add selected album to description + $('.img-thumbnail-album').click(function() { + let selected = albums.find(function(curr) { + return curr.id === parseInt(this.id); + }, this); + let description = '

' + selected.artist + ': ' + selected.title + '

'; + $('.album-description').append(description); + }); + + // Add clear button handler + $('#btn_clear').click(function() { + $('.album-description').text(''); + }); + + // Add submit bin button handler + $('#btn_submit').click(function() { + $.post('https://lit-fortress-6467.herokuapp.com/post', function(data) { + console.log(data); + alert(data) + }); + }); + +} diff --git a/playlist.html b/playlist.html new file mode 100644 index 0000000..9b69edb --- /dev/null +++ b/playlist.html @@ -0,0 +1,42 @@ + + + + + + Playlist + + + + + + + + + + +
+ +
+
click an album to add its tracks to the bin
+
+ +
+ +
+ +
+ +
+ + +
+ +
+ + + +
+ + + +