Created
February 11, 2015 14:57
-
-
Save anonymous/43b5fe669905a94e267a to your computer and use it in GitHub Desktop.
Revisions
-
Anonymous created this gist
Feb 11, 2015 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,9 @@ #DaftPunKonsole --------------- A console to recreate the famous "Harder, Better, Faster, Stronger" by Daft Punk. Use your keyboard ! not the mouse (hey, it's a console). Use the other keys to get different sounds (Normal, High, Low). You can do it ! A [Pen](http://codepen.io/kowlor/pen/MYOKRd) by [Malik Dellidj](http://codepen.io/kowlor) on [CodePen](http://codepen.io/). [License](http://codepen.io/kowlor/pen/MYOKRd/license). This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,73 @@ - da = [['Work it'], ['Make it'], ['Do it'],['Makes us'],[''],[''],['More than'],['Hour'],['Our'],['Never']] - ft = [['Harder'],['Better'],['Faster'],['Stronger'],[''],[''],['Ever'],['After'],['Work is'],['Over']] - pu = [['Normal'],['High'],[''],[''],[''],['Low'],[''],['']] - nk = [['','32', 'play']] #js-lyrics.lyrics.animated .wk .k .r - da.each do |k| i data-code="" data-lyric=k[0] span - if k[0] != '' b = k[0] .r - ft.each do |k| i data-code="" data-lyric=k[0] span - if k[0] != '' b = k[0] .r.level - pu.each do |k| i data-code="" data-level = k[0] span - if k[0] != '' b = k[0] .r - nk.each do |k| .space data-code = k[1] data-action = k[2] #jp_container_1.jp-audio .jp-type-single .jp-gui.jp-interface .jp-controls button.jp-play Instrumental .jp-progress .jp-seek-bar .jp-play-bar #js-daft_1.jp-jplayer .credits p.extra #DaftPunKonsole p 'Made with i.fa.fa-heart> 'by Malik Dellidj ul.links li a href="http://github.com/KOWLOR/" target="_blank" i.fa.fa-github li a href="http://codepen.io/kowlor" target="_blank" i.fa.fa-codepen li i.fa.fa-twitter> a href="http://twitter.com/Dathink" target="_blank" '@Dathink .modal.animated img src="http://s.cdpn.io/190177/Daft_Punk.svg" class="daft-punk-logo" h1 “Harder, Better, Faster, Stronger” h2 'Please choose your keyboard ul li a href="#" class="js-qwerty btn" 'QWERTY li a href="#" class="js-azerty btn" 'AZERTY p.credit i.fa.fa-twitter> a href="http://twitter.com/Dathink" target="_blank" '@Dathink This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,333 @@ initJson = (index_type) -> $.ajax( url: 'http://s.cdpn.io/190177/keyboard_.json' type: 'get' dataType: 'json') .done (data) -> _.each(data.keyboard.type[index_type].row, (row, index_row) -> _.each(row.key, (key, index_key) -> row_selected = $(".r:nth-child(#{index_row+1})") span_selected = $(row_selected).find("span")[index_key] $(span_selected).text(key.char) $(span_selected).parent('*[data-code]').attr('data-code', key.code) ) ) init = -> level = 'Normal' $('body').addClass 'Normal' $('.level').find('i[data-level=' + level + ']').addClass 'is-active' ion.sound sounds: [ {name:'beat'} {name:'WorkIt1'} {name:'MakeIt1'} {name:'DoIt1'} {name:'MakesUs1'} {name:'Harder1'} {name:'Better1'} {name:'Faster1'} {name:'Stronger1'} {name:'MoreThan1'} {name:'Hour1'} {name:'Our1'} {name:'Never1'} {name:'Ever1'} {name:'After1'} {name:'WorkIs1'} {name:'Over1'} {name:'WorkIt2'} {name:'MakeIt2'} {name:'DoIt2'} {name:'MakesUs2'} {name:'Harder2'} {name:'Better2'} {name:'Faster2'} {name:'Stronger2'} {name:'MoreThan2'} {name:'Hour2'} {name:'Our2'} {name:'Never2'} {name:'Ever2'} {name:'After2'} {name:'WorkIs2'} {name:'Over2'} {name:'MoreThan3'} {name:'Hour3'} {name:'Our3'} {name:'Never3'} {name:'Ever3'} {name:'After3'} {name:'WorkIs3'} {name:'Over3'} ] path: 'http://s.cdpn.io/190177/' preload: true $ -> init() k = $('.k') $('.js-azerty').on 'click', (e) -> e.preventDefault() initJson(0) $('.k').addClass 'azerty' $(this).closest('.modal').remove() $('.js-qwerty').on 'click', (e) -> e.preventDefault() initJson(1) $('.k').addClass 'qwerty' $(this).closest('.modal').remove() $(document).keydown (e) -> e.preventDefault() code = e.keyCode or e.which key = $('[data-code=' + code + ']') if key.data('level') curClass = key.data('level') key.addClass('is-active') key.closest('.level').find('.is-active').not(key).removeClass('is-active') $('body').removeClass().addClass(curClass) else key.addClass('is-active') $('#js-lyrics').html('<span class="animated"/>').find('span').addClass('fadeOutUp').html(key.data('lyric')) if $('.level').find('i.is-active').data('level') == 'Normal' if k.hasClass 'qwerty' switch code when 81 ion.sound.play 'WorkIt1' when 87 ion.sound.play 'MakeIt1' when 69 ion.sound.play 'DoIt1' when 82 ion.sound.play 'MakesUs1' when 65 ion.sound.play 'Harder1' when 83 ion.sound.play 'Better1' when 68 ion.sound.play 'Faster1' when 70 ion.sound.play 'Stronger1' when 85 ion.sound.play 'MoreThan1' when 73 ion.sound.play 'Hour1' when 79 ion.sound.play 'Our1' when 80 ion.sound.play 'Never1' when 74 ion.sound.play 'Ever1' when 75 ion.sound.play 'After1' when 76 ion.sound.play 'WorkIs1' when 186 ion.sound.play 'Over1' else switch code when 65 ion.sound.play 'WorkIt1' when 90 ion.sound.play 'MakeIt1' when 69 ion.sound.play 'DoIt1' when 82 ion.sound.play 'MakesUs1' when 81 ion.sound.play 'Harder1' when 83 ion.sound.play 'Better1' when 68 ion.sound.play 'Faster1' when 70 ion.sound.play 'Stronger1' when 85 ion.sound.play 'MoreThan1' when 73 ion.sound.play 'Hour1' when 79 ion.sound.play 'Our1' when 80 ion.sound.play 'Never1' when 74 ion.sound.play 'Ever1' when 75 ion.sound.play 'After1' when 76 ion.sound.play 'WorkIs1' when 77 ion.sound.play 'Over1' else if $('.level').find('i.is-active').data('level') == 'High' if k.hasClass 'qwerty' switch code when 81 ion.sound.play 'WorkIt2' when 87 ion.sound.play 'MakeIt2' when 69 ion.sound.play 'DoIt2' when 82 ion.sound.play 'MakesUs2' when 65 ion.sound.play 'Harder2' when 83 ion.sound.play 'Better2' when 68 ion.sound.play 'Faster2' when 70 ion.sound.play 'Stronger2' when 85 ion.sound.play 'MoreThan2' when 73 ion.sound.play 'Hour2' when 79 ion.sound.play 'Our2' when 80 ion.sound.play 'Never2' when 74 ion.sound.play 'Ever2' when 75 ion.sound.play 'After2' when 76 ion.sound.play 'WorkIs2' when 186 ion.sound.play 'Over2' else switch code when 65 ion.sound.play 'WorkIt2' when 90 ion.sound.play 'MakeIt2' when 69 ion.sound.play 'DoIt2' when 82 ion.sound.play 'MakesUs2' when 81 ion.sound.play 'Harder2' when 83 ion.sound.play 'Better2' when 68 ion.sound.play 'Faster2' when 70 ion.sound.play 'Stronger2' when 85 ion.sound.play 'MoreThan2' when 73 ion.sound.play 'Hour2' when 79 ion.sound.play 'Our2' when 80 ion.sound.play 'Never2' when 74 ion.sound.play 'Ever2' when 75 ion.sound.play 'After2' when 76 ion.sound.play 'WorkIs2' when 77 ion.sound.play 'Over2' else if $('.level').find('i.is-active').data('level') == 'Low' if k.hasClass 'qwerty' switch code when 85 ion.sound.play 'MoreThan3' when 73 ion.sound.play 'Hour3' when 79 ion.sound.play 'Our3' when 80 ion.sound.play 'Never3' when 74 ion.sound.play 'Ever3' when 75 ion.sound.play 'After3' when 76 ion.sound.play 'WorkIs3' when 186 ion.sound.play 'Over3' else switch code when 85 ion.sound.play 'MoreThan3' when 73 ion.sound.play 'Hour3' when 79 ion.sound.play 'Our3' when 80 ion.sound.play 'Never3' when 74 ion.sound.play 'Ever3' when 75 ion.sound.play 'After3' when 76 ion.sound.play 'WorkIs3' when 77 ion.sound.play 'Over3' $(document).keyup (e) -> e.preventDefault() code = e.keyCode or e.which key = $('[data-code=' + code + ']') if !key.data('level') key.removeClass('is-active') $('#js-daft_1').jPlayer ready: (event) -> $(this).jPlayer 'setMedia', m4a: 'http://s.cdpn.io/190177/beat.mp3' supplied: 'm4a' wmode: 'window' autoBlur: false useStateClassSkin: true smoothPlayBar: true keyEnabled: true toggleDuration: true remainingDuration: true keyBindings: play: key: 32 fn: (f) -> if f.status.paused f.play() else f.pause() muted: key: 0 fn: (f) -> f._muted !f.options.muted volumeUp: key: 0 fn: (f) -> f.volume f.options.volume + 0.1 volumeDown: key: 0 fn: (f) -> f.volume f.options.volume - 0.1 This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,346 @@ @import "compass/css3" /* * #DaftPunKonsole * Malik Dellidj - @Dathink * * There are existing apps or flash to do this, but no web version so here it is. * * How to play : * You may notice that in the song all theses words are used * but sometimes in a different layout * e.g. * – Work it, make it, do it, makes us * – Harder, better, faster, stronger * ––– * – Work it, harder, make it, better * – Do it, faster, makes us, stronger * * Check the lyrics ! and the different tones to recreate over half of the song ! * * Nb : Hey IE fellaz, get a browser : www.google.com/chrome, it's free ! */ $bg-color: #101012 $bg-color-light: lighten($bg-color, 20%) $bg-color-lightened: lighten($bg-color-light, 20%) $neutral-color: #ffffff $love: #d43f57 $tint: $bg-color-lightened $extra: #15d880 $gold-helmet: #dfba69 $silver-helmet: #c9d1d3 $key-size: 49px $font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif $rem-base: 16px !default = keycolor($v, $bs : false) color: $v border-color: $v @if $bs box-shadow: rem-calc(0 0 12 -2) $v @function strip-unit($num) @return $num / ($num * 0 + 1) @function convert-to-rem($value, $base-value: $rem-base) $value: strip-unit($value) / strip-unit($base-value) * 1rem @if $value == 0rem $value: 0 @return $value @function rem-calc($values, $base-value: $rem-base) $max: length($values) @if $max == 1 @return convert-to-rem(nth($values, 1), $base-value) $remValues: () @for $i from 1 through $max $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value)) @return $remValues html, body height: 100vh width: 100vw body font: normal 1em/1.45em $font-family background: url(http://s.cdpn.io/190177/Daft_Punk_bg.svg) no-repeat center center $bg-color display: flex align-items: center flex-direction: column justify-content: space-around -webkit-font-smoothing: antialiased color: $neutral-color -webkit-font-smoothing: subpixel-antialiased text-rendering: optimizeLegibility background-size: 95% a text-decoration: none color: $bg-color-light .extra color: $extra .lyrics flex: 1 align-items: center justify-content: center display: flex font-size: rem-calc(58) position: relative span animation-duration: 1s white-space: nowrap font-weight: 500 .Normal & color: $extra text-shadow: rem-calc(0 0 10) rgba($extra, .2) .High & color: $love text-shadow: rem-calc(0 0 10) rgba($love, .2) .Low & color: $gold-helmet text-shadow: rem-calc(0 0 10) rgba($gold-helmet, .2) .wk display: flex align-items: center justify-content: center flex: 2 .k width: rem-calc(630) padding-right: 2.5% user-select: none -webkit-tap-highlight-color: rgba(0,0,0,0) -webkit-tap-highlight-color: transparent // Hey Androids ! .r position: relative display: flex justify-content: space-between margin: rem-calc(10px) &:nth-child(1), &:nth-child(2) i:nth-last-child(-n+4), i:nth-child(-n+4) color: lighten($tint, 25%) &:hover +keycolor($extra) &:active, &.is-active +keycolor($extra, true) .Normal & i:nth-last-child(-n+4), i:nth-child(-n+4) color: lighten($tint, 25%) &:hover +keycolor($extra) &:active, &.is-active +keycolor($extra, true) .High & i:nth-last-child(-n+4), i:nth-child(-n+4) color: lighten($tint, 25%) &:hover +keycolor($love) &:active, &.is-active +keycolor($love, true) .Low & i:nth-child(-n+4) color: $bg-color-light &:hover +keycolor($bg-color-lightened) &:active, &.is-active +keycolor($bg-color-lightened, true) i:nth-last-child(-n+4) color: lighten($tint, 25%) &:hover +keycolor($gold-helmet) &:active, &.is-active +keycolor($gold-helmet, true) &:nth-child(2) +translateX(2.5%) &:nth-child(3) margin-left: 8.5% margin-right: 14% i:nth-child(1) .Normal & b background: $extra +keycolor($extra, true) i:nth-child(2) .High & b background: $love +keycolor($love, true) i:nth-last-child(3) .Low & b background: $gold-helmet +keycolor($gold-helmet, true) i flex-direction: column-reverse b background: $bg-color-light color: $bg-color border-radius: rem-calc(8) padding: 0 rem-calc(5) line-height: 0 margin-top: rem-calc(5) i, .space display: flex flex-direction: column justify-content: center align-items: center color: $bg-color-light border-radius: rem-calc(6) height: rem-calc($key-size) font-size: rem-calc(16) line-height: 0 border: rem-calc(2) solid $bg-color-light position: relative transition: all .08s ease-in-out &:hover border-color: $tint color: $tint &:active, &.is-active border-color: $tint color: $tint box-shadow: rem-calc(0 0 9 -2) $tint +translateY(rem-calc(1)) i font-style: normal width: rem-calc($key-size) span, b flex: 2 display: flex align-items: center span text-transform: uppercase font-family: 'Varela Round' b font-size: rem-calc(9) flex: 1 .space flex: 1 max-width: 48.5% margin-left: 27.5% align-items: stretch justify-content: center position: static .credits font-size: rem-calc(13) display: flex flex-direction: column flex: 1 justify-content: center p text-align: center .links margin: rem-calc(5 0) li display: inline-block padding: rem-calc(0 10) border-right: rem-calc(1) solid rgba($bg-color-light, .35) &:last-child border: 0 .fa color: $extra & + a color: $extra &:hover color: $extra .fa-heart color: $love .jp-audio color: $neutral-color .modal display: flex background: rgba($bg-color, .8) position: absolute top: 0 left: 0 right: 0 bottom: 0 align-items: center justify-content: center flex-direction: column .daft-punk-logo margin: rem-calc(20 0 30) .btn color: $extra border: rem-calc(2) solid $extra padding: rem-calc(10 20) border-radius: rem-calc(50) transition: margin .3s ease &:hover +keycolor($extra, true) text-shadow: rem-calc(0 0 4) rgba($extra, .8) h1 font-size: rem-calc(40) font-weight: 100 margin: rem-calc(0 0 30 0) h2 font-size: rem-calc(20) font-weight: 200 margin: rem-calc(0 0 30 0) ul display: flex li margin: rem-calc(20) .fa color: $extra & + a color: $neutral-color &:hover color: $extra .credit margin: rem-calc(20 0 0 0) .jp-audio position: relative .jp-controls position: absolute button background: transparent border: 0 color: $bg-color-lightened text-transform: capitalize font-size: rem-calc(9) .jp-play &:before content: '' height: rem-calc(5) width: rem-calc(5) border-radius: rem-calc(50) background: $bg-color-lightened display: inline-block margin: rem-calc(1 3) &.jp-state-playing .jp-controls .jp-play color: $extra text-shadow: rem-calc(0 0 2) rgba($extra, .8) &:before background: $extra box-shadow: rem-calc(0 0 3) rgba($extra, .8) .High & color: $love text-shadow: rem-calc(0 0 2) rgba($love, .8) &:before background: $love box-shadow: rem-calc(0 0 3) rgba($love, .8) .Low & color: $gold-helmet text-shadow: rem-calc(0 0 2) rgba($gold-helmet, .8) &:before background: $gold-helmet box-shadow: rem-calc(0 0 3) rgba($gold-helmet, .8) .jp-progress height: rem-calc(49) .jp-seek-bar width: 100% height: 100% .jp-play-bar background: rgba($bg-color-light, .2) height: 100%