@import bourbon
@import neat
$black: black
$white: rgba(255,255,255,0.8)
$gray: #9b9b9b
$blueback: #282b34
$blue: #292c35
$lightblue: #292c35
$gray: #8e8f93
$green: #769778
$purple: #827cc2
html, body
font-family: Roboto
width: 100%
margin: 0
padding: 0
background: $blueback
.card
height: 38em
position: relative
width: 25em
margin: 0 auto
border-radius: 10px
margin-top: 1em
background: $blue
box-shadow: 0px 0px 20px 5px shade($blueback, 20%)
font-family: Roboto
overflow: hidden
.apple-stuff
padding: 2% 2%
color: $white
border-radius: 10px 10px 0px 0px
.date
display: inline
position: absolute
font-family: Roboto
left: 50%
font-weight: 300
font-size: 0.8em
margin-top: -0.8em
+transform(translateX(-50%))
.battery
margin-left: 21em
.picture-section
h3
text-align: center
color: $white
font-size: 0.9em
letter-spacing: 0.1em
margin-top: 0.3em
font-weight: 300
.band
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/377560/trey.png) no-repeat top center
background-size: cover
width: 100%
height: 20em
+filter(brightness(40%) opacity(60%) blur(1px))
+transition(0.2s)
&:hover
+filter(brightness(30%) opacity(65%) blur(1px))
.overlay
background: rgba(0,0,0,0.7)
position: absolute
left: 0
top: 0
opacity: 0
height: 48%
width: 100%
+transition(0.7s)
&.active
opacity: 1
height: 100%
+transition(1s)
.slider
position: relative
z-index: 100
background: $gray
border: none
border-radius: 0px
height: 5px
width: 100%
cursor: pointer
.ui-slider-range
background: $green
.ui-slider-handle
width: 3px
margin-left: 0px
height: 15px
top: 1px
&:focus
outline: none
background: white
.time
position: relative
color: rgba(255,255,255,0.8)
font-size: 0.8em
font-weight: 300
padding: 2%
.start
display: inline-block
.end
display: inline-block
margin-left: 25.5em
.song-title
text-align: center
margin-top: -0.4em
.artist
color: $white
.song
color: rgba(255,255,255,0.6)
font-weight: 300
font-size: 0.9em
margin-top: 0.1em
.playlist-controls
text-align: center
margin-top: 1.8em
+transition(0.7s cubic-bezier(.87,-.41,.19, 1.10))
&.active
margin-top: -13em
+transition(0.7s cubic-bezier(.87,-.41,.19, 1.10))
.circle
top: 13.5em
background: rgba(255,255,255,0.03)
.circle
position: absolute
height: 4em
width: 4em
background: rgba(255,255,255,0.07)
border-radius: 50%
margin-left: 10.4em
top: 28.5em
+transition(0.7s cubic-bezier(.87,-.41,.19,1.10))
#backward
margin-left: 2em
margin-right: 2em
color: $gray
font-size: 1.5em
position: relative
z-index: 5
cursor: pointer
+transition(0.2s)
&:hover
color: $white
.play-song
display: inline-block
#play
font-size: 2em
color: $white
position: relative
z-index: 5
left: 0px
top: 2px
cursor: pointer
+transition(0.2s)
&:hover
color: $purple
#forward
margin-left: 2em
margin-right: 2em
color: $gray
font-size: 1.5em
cursor: pointer
position: relative
z-index: 5
+transition(0.2s)
&:hover
color: $white
.song-list
width: 100%
position: absolute
height: 20em
bottom: -53%
z-index: 100
background: $blue
+transition(0.7s)
&.active
bottom: 0%
.line
width: 95%
height: 1px
background: rgba(255,255,255,0.1)
position: absolute
left: 50%
+transform(translateX(-50%))
margin-top: 3.4em
&.two
margin-top: 6.4em
&.three
margin-top: 9.2em
&.four
margin-top: 12em
table
color: rgba(255,255,255,0.55)
padding: 0 2%
position: relative
.line
width: 80%
height: 5px
background: $white
position: absolute
z-index: 10000
tr
cursor: pointer
&:hover
td
color: $purple
td
padding-top: 1.5em
+transition(0.2s)
.num
font-size: 0.7em
position: relative
top: 5px
font-weight: 300
.title
padding-left: 3em
display: inline-block
color: $white
width: 300px
font-weight: 300
.length
padding-left: 4em
font-size: 0.7em
position: relative
top: 5px
font-weight: 300
.volume
i
display: inline-block
position: absolute
color: rgba(255,255,255,0.3)
margin-top: -0.5em
+transition(0.2s)
cursor: pointer
&:hover
color: $white
&#volume-off
margin-left: 2.5em
&#volume-up
margin-left: 21.7em
.slider-volume
position: relative
z-index: 10
background: rgba(0,0,0,0.3)
border: none
border-radius: 0px
height: 3px
width: 60%
left: 50%
+transform(translateX(-50%))
margin-top: 2.7em
cursor: pointer
.ui-slider-range
background: $purple
.ui-slider-handle
display: none
&:focus
outline: none
background: white
.slide-up
position: absolute
bottom: 0%
left: 50%
+transform(translateX(-50%) translateY(-50%))
z-index: 1000
i
margin-left: 50%
font-size: 1.3em
cursor: pointer
color: $white
+transform(translateX(-50%))
+transition(0.3s)
&:hover
color: $purple
.social
text-align: center
margin-top: 3em
i
color: $white
margin-left: 1em
margin-right: 1em
+transition(0.2s)
&:hover
color: $gray
+transform(rotate(20deg))
View Compiled
#variables
themeFromTheBottom = new Howl(urls: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/377560/07_Theme_from_the_Bottom_(1).mp3'], volume: window.volume)
billyBreathes = new Howl(urls: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/377560/10_Billy_Breathes_(1)_(1).mp3'], volume: window.volume)
harryHood = new Howl(urls: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/377560/harry-hood-small.mp3'], volume: window.volume)
suzyGreenberg = new Howl(urls: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/377560/suzy_greenberg_small.mp3'], volume: window.volume)
window.open = true
window.volume = 0.5
window.position = 0
window.duration = 40.8
playlist = [suzyGreenberg]
window.currentSong = playlist[0]
window.add = null
changeSong = (song) ->
window.currentSong.stop()
window.currentSong.pos(0)
window.position = 0
$(".slider").slider("value", 0)
window.currentSong = song
$(".play-song > i").removeClass('fa-play')
$(".play-song > i").addClass('fa-pause')
window.open = false
song.play()
updatePositionSlider = () ->
window.position += 1
playSong = (song) ->
song.play()
window.add = setInterval(updatePositionSlider, 1000)
pauseSong = (song) ->
song.pause()
clearInterval(window.add)
changeVolume = (song) ->
song.volume(window.volume)
changePosition = (song) ->
song.pos(window.position)
updateSlider = () ->
$(".slider").slider("value", window.position)
$ ->
$(".slider").slider({
min: 0
range: "min"
max: window.duration
value: 0
slide: (event, ui) ->
window.position = ui.value
changePosition(window.currentSong)
})
setInterval(updateSlider, 100)
$("#volume-off").click ->
currentSong.volume(0)
$(".slider-volume").slider("value", 0)
$("#volume-up").click ->
currentSong.volume(1)
$(".slider-volume").slider("value", 100)
$(".slider-volume").slider({
min: 0
range: "min"
max: 100
value: 50
slide: (event, ui) ->
window.volume = (ui.value) / 100
changeVolume(window.currentSong)
})
$("#play").click ->
if window.open
playSong(window.currentSong)
$(".play-song > i").removeClass('fa-play')
$(".play-song > i").addClass('fa-pause')
window.open = !window.open
setInterval(updateSlider, 100)
else
pauseSong(window.currentSong)
$(".play-song > i").removeClass('fa-pause')
$(".play-song > i").addClass('fa-play')
window.open = !window.open
slideUp = true
$(".slide-up").click ->
if slideUp
$(".song-list, .playlist-controls, .overlay").addClass("active")
$(".slide-up").html("<i class='fa fa-chevron-down'></i>")
slideUp = !slideUp
else
$(".song-list, .playlist-controls, .overlay").removeClass("active")
$(".slide-up").html("<i class='fa fa-chevron-up'></i>")
slideUp = !slideUp
$("tr").click ->
if $(@).attr('data-title') is "billyBreathes"
changeSong(billyBreathes)
$(".slider").slider("option","max", 331.6)
window.duration = 331.6
$(".song").html("Billy Breathes")
setInterval(updateSlider, 100)
else if $(@).attr('data-title') is "harryHood"
$(".song").html("Harry Hood")
window.duration = 40.8
setInterval(updateSlider, 100)
$(".slider").slider("option","max", 40.8)
changeSong(harryHood)
setInterval(updateSlider, 100)
else if $(@).attr('data-title') is "suzyGreenberg"
$(".song").html("Suzy Greenberg")
window.duration = 40.8
setInterval(updateSlider, 100)
$(".slider").slider("option","max", 40.8)
changeSong(suzyGreenberg)
setInterval(updateSlider, 100)
else if $(@).attr('data-title') is "themeFromTheBottom"
changeSong(themeFromTheBottom)
$(".song").html("Theme From The Bottom")
$(".slider").slider("option", "max", 382.2)
window.duration = 382.2
setInterval(updateSlider, 100)
$(".song-list, .playlist-controls, .overlay").removeClass("active")
$(".slide-up").html("<i class='fa fa-chevron-up'></i>")
slideUp = !slideUp
View Compiled
