├── .bowerrc ├── .gitignore ├── Gemfile ├── Gemfile.lock ├── LICENSE ├── README.md ├── Rakefile ├── bower.json ├── config.rb ├── data └── project.yml └── source ├── CNAME ├── assets ├── images │ └── favicon.ico ├── javascripts │ ├── application.coffee │ └── konsole.js.coffee └── stylesheets │ ├── _animate.sass │ ├── _konsole.sass │ ├── _mixins.sass │ ├── _settings.sass │ └── application.sass ├── index.html.slim ├── konsole.html.slim └── layouts └── layout.slim /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "bower_components" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore bundler config 2 | /.bundle 3 | 4 | # Ignore the build directory 5 | /build 6 | 7 | # Ignore Sass' cache 8 | /.sass-cache 9 | 10 | # Ignore .DS_store file 11 | .DS_Store 12 | 13 | # Ignore NPM debug 14 | .npm-debug.log 15 | 16 | # Ignore Bower Folder 17 | /bower_components 18 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'http://rubygems.org' 2 | 3 | gem 'middleman', '~> 3.3.7' 4 | gem 'middleman-gh-pages' 5 | gem 'middleman-livereload', '~> 3.3.4' 6 | gem 'middleman-minify-html', '~> 3.4.0' 7 | gem 'middleman-autoprefixer', '~> 2.4.3' 8 | gem 'middleman-google-analytics' 9 | 10 | gem 'slim', '~> 2.0.3' 11 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: http://rubygems.org/ 3 | specs: 4 | activesupport (4.1.9) 5 | i18n (~> 0.6, >= 0.6.9) 6 | json (~> 1.7, >= 1.7.7) 7 | minitest (~> 5.1) 8 | thread_safe (~> 0.1) 9 | tzinfo (~> 1.1) 10 | autoprefixer-rails (5.1.5) 11 | execjs 12 | json 13 | celluloid (0.16.0) 14 | timers (~> 4.0.0) 15 | chunky_png (1.3.3) 16 | coffee-script (2.3.0) 17 | coffee-script-source 18 | execjs 19 | coffee-script-source (1.9.0) 20 | compass (1.0.3) 21 | chunky_png (~> 1.2) 22 | compass-core (~> 1.0.2) 23 | compass-import-once (~> 1.0.5) 24 | rb-fsevent (>= 0.9.3) 25 | rb-inotify (>= 0.9) 26 | sass (>= 3.3.13, < 3.5) 27 | compass-core (1.0.3) 28 | multi_json (~> 1.0) 29 | sass (>= 3.3.0, < 3.5) 30 | compass-import-once (1.0.5) 31 | sass (>= 3.2, < 3.5) 32 | em-websocket (0.5.1) 33 | eventmachine (>= 0.12.9) 34 | http_parser.rb (~> 0.6.0) 35 | erubis (2.7.0) 36 | eventmachine (1.0.7) 37 | execjs (2.3.0) 38 | ffi (1.9.6) 39 | haml (4.0.6) 40 | tilt 41 | hike (1.2.3) 42 | hitimes (1.2.2) 43 | hooks (0.4.0) 44 | uber (~> 0.0.4) 45 | htmlcompressor (0.1.2) 46 | http_parser.rb (0.6.0) 47 | i18n (0.6.11) 48 | json (1.8.2) 49 | kramdown (1.5.0) 50 | listen (2.8.5) 51 | celluloid (>= 0.15.2) 52 | rb-fsevent (>= 0.9.3) 53 | rb-inotify (>= 0.9) 54 | middleman (3.3.7) 55 | coffee-script (~> 2.2) 56 | compass (>= 1.0.0, < 2.0.0) 57 | compass-import-once (= 1.0.5) 58 | execjs (~> 2.0) 59 | haml (>= 4.0.5) 60 | kramdown (~> 1.2) 61 | middleman-core (= 3.3.7) 62 | middleman-sprockets (>= 3.1.2) 63 | sass (>= 3.4.0, < 4.0) 64 | uglifier (~> 2.5) 65 | middleman-autoprefixer (2.4.3) 66 | autoprefixer-rails (~> 5.1.3) 67 | middleman-core (>= 3.3.3) 68 | middleman-core (3.3.7) 69 | activesupport (~> 4.1.0) 70 | bundler (~> 1.1) 71 | erubis 72 | hooks (~> 0.3) 73 | i18n (~> 0.6.9) 74 | listen (>= 2.7.9, < 3.0) 75 | padrino-helpers (~> 0.12.3) 76 | rack (>= 1.4.5, < 2.0) 77 | rack-test (~> 0.6.2) 78 | thor (>= 0.15.2, < 2.0) 79 | tilt (~> 1.4.1, < 2.0) 80 | middleman-gh-pages (0.0.2) 81 | rake (> 0.9.3) 82 | middleman-google-analytics (1.1.0) 83 | middleman-core (~> 3.2) 84 | uglifier (>= 2.1, < 3.0) 85 | middleman-livereload (3.3.4) 86 | em-websocket (~> 0.5.1) 87 | middleman-core (~> 3.2) 88 | rack-livereload (~> 0.3.15) 89 | middleman-minify-html (3.4.0) 90 | htmlcompressor (~> 0.1.0) 91 | middleman-core (>= 3.2) 92 | middleman-sprockets (3.4.1) 93 | middleman-core (>= 3.3) 94 | sprockets (~> 2.12.1) 95 | sprockets-helpers (~> 1.1.0) 96 | sprockets-sass (~> 1.3.0) 97 | minitest (5.5.1) 98 | multi_json (1.10.1) 99 | padrino-helpers (0.12.4) 100 | i18n (~> 0.6, >= 0.6.7) 101 | padrino-support (= 0.12.4) 102 | tilt (~> 1.4.1) 103 | padrino-support (0.12.4) 104 | activesupport (>= 3.1) 105 | rack (1.6.0) 106 | rack-livereload (0.3.15) 107 | rack 108 | rack-test (0.6.3) 109 | rack (>= 1.0) 110 | rake (10.1.0) 111 | rb-fsevent (0.9.4) 112 | rb-inotify (0.9.5) 113 | ffi (>= 0.5.0) 114 | sass (3.4.11) 115 | slim (2.0.3) 116 | temple (~> 0.6.6) 117 | tilt (>= 1.3.3, < 2.1) 118 | sprockets (2.12.3) 119 | hike (~> 1.2) 120 | multi_json (~> 1.0) 121 | rack (~> 1.0) 122 | tilt (~> 1.1, != 1.3.0) 123 | sprockets-helpers (1.1.0) 124 | sprockets (~> 2.0) 125 | sprockets-sass (1.3.1) 126 | sprockets (~> 2.0) 127 | tilt (~> 1.1) 128 | temple (0.6.10) 129 | thor (0.19.1) 130 | thread_safe (0.3.4) 131 | tilt (1.4.1) 132 | timers (4.0.1) 133 | hitimes 134 | tzinfo (1.2.2) 135 | thread_safe (~> 0.1) 136 | uber (0.0.13) 137 | uglifier (2.7.0) 138 | execjs (>= 0.3.0) 139 | json (>= 1.8.0) 140 | 141 | PLATFORMS 142 | ruby 143 | 144 | DEPENDENCIES 145 | middleman (~> 3.3.7) 146 | middleman-autoprefixer (~> 2.4.3) 147 | middleman-gh-pages 148 | middleman-google-analytics 149 | middleman-livereload (~> 3.3.4) 150 | middleman-minify-html (~> 3.4.0) 151 | slim (~> 2.0.3) 152 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Malik Dellidj 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### DaftPunKonsole 2 | 3 | bundle install 4 | bower install 5 | middleman server 6 | 7 | Now supports Qwerty, Qwertz, Azerty. 8 | 9 | More sounds, and more features to come. 10 | 11 | Thanks. 12 | -------------------------------------------------------------------------------- /Rakefile: -------------------------------------------------------------------------------- 1 | require 'middleman-gh-pages' -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "slimmer", 3 | "version": "0.0.1", 4 | "homepage": "https://github.com/polymatt/slimmer", 5 | "authors": [ 6 | "polymatt " 7 | ], 8 | "description": "Slim/Sass/Coffee Starter template for Middleman", 9 | "license": "MIT", 10 | "private": false, 11 | "ignore": [ 12 | "**/.*", 13 | "node_modules", 14 | "bower_components", 15 | "test", 16 | "tests" 17 | ], 18 | "dependencies": { 19 | "underscore": "~1.7.0", 20 | "normalize-css": "~3.0.2", 21 | "animate-css": "~3.2.0", 22 | "meyer-reset": "*", 23 | "jplayer": "~2.9.2", 24 | "ionsound": "~3.0.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /config.rb: -------------------------------------------------------------------------------- 1 | activate :google_analytics do |ga| 2 | ga.tracking_id = 'UA-59738061-1' 3 | ga.anonymize_ip = true 4 | ga.debug = false 5 | ga.development = false 6 | ga.minify = true 7 | end 8 | 9 | require 'slim' 10 | 11 | activate :autoprefixer, 12 | browsers: ['last 10 versions', 'ie 8', 'ie 9'] 13 | 14 | activate :livereload 15 | activate :directory_indexes 16 | 17 | set :js_dir, 'assets/javascripts' 18 | set :css_dir, 'assets/stylesheets' 19 | set :images_dir, 'assets/images' 20 | 21 | # Add bower's directory to sprockets asset path 22 | after_configuration do 23 | 24 | @bower_config = JSON.parse(IO.read("#{root}/.bowerrc")) 25 | sprockets.append_path File.join "#{root}", @bower_config["directory"] 26 | 27 | end 28 | 29 | # Build-specific configuration 30 | configure :build do 31 | 32 | activate :autoprefixer, 33 | browsers: ['last 10 versions', 'ie 8', 'ie 9'] 34 | 35 | activate :minify_html 36 | activate :minify_css 37 | activate :minify_javascript 38 | 39 | activate :asset_hash 40 | activate :relative_assets 41 | activate :gzip 42 | 43 | end 44 | -------------------------------------------------------------------------------- /data/project.yml: -------------------------------------------------------------------------------- 1 | title: Slimmer Project -------------------------------------------------------------------------------- /source/CNAME: -------------------------------------------------------------------------------- 1 | daftpunkonsole.com 2 | -------------------------------------------------------------------------------- /source/assets/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KOWLOR/DaftPunKonsole/2f8ba407eb9d51c661b5710a08e87cef55c642b1/source/assets/images/favicon.ico -------------------------------------------------------------------------------- /source/assets/javascripts/application.coffee: -------------------------------------------------------------------------------- 1 | #= require "jquery/dist/jquery" 2 | #= require "underscore/underscore" 3 | #= require "ionsound/js/ion.sound" 4 | #= require "jplayer/dist/jplayer/jquery.jplayer" 5 | 6 | #= require "konsole" 7 | -------------------------------------------------------------------------------- /source/assets/javascripts/konsole.js.coffee: -------------------------------------------------------------------------------- 1 | # letter to keycode mappings, in keyboard-like layout 2 | keyboard_qwerty = [ 3 | [ ["q", 81], ["w", 87], ["e", 69], ["r", 82], ["t", 84], ["y", 89], ["u", 85], ["i", 73], ["o", 79], ["p", 80] ], 4 | [ ["a", 65], ["s", 83], ["d", 68], ["f", 70], ["g", 71], ["h", 72], ["j", 74], ["k", 75], ["l", 76], [";", 186] ], 5 | [ ["z", 90], ["x", 88], ["c", 67], ["v", 86], ["b", 66], ["n", 78], ["m", 77], [",", 188] ], 6 | [ ["", 32] ] 7 | ] 8 | 9 | keyboard_qwertz = [ 10 | [ ["q", 81], ["w", 87], ["e", 69], ["r", 82], ["t", 84], ["z", 90], ["u", 85], ["i", 73], ["o", 79], ["p", 80] ], 11 | [ ["a", 65], ["s", 83], ["d", 68], ["f", 70], ["g", 71], ["h", 72], ["j", 74], ["k", 75], ["l", 76], ["ö", 192] ], 12 | [ ["y", 89], ["x", 88], ["c", 67], ["v", 86], ["b", 66], ["n", 78], ["m", 77], [",", 188] ], 13 | [ ["", 32] ] 14 | ] 15 | 16 | keyboard_azerty = [ 17 | [ ["a", 65], ["z", 90], ["e", 69], ["r", 82], ["t", 84], ["y", 89], ["u", 85], ["i", 73], ["o", 79], ["p", 80] ], 18 | [ ["q", 81], ["s", 83], ["d", 68], ["f", 70], ["g", 71], ["h", 72], ["j", 74], ["k", 75], ["l", 76], ["m", 77] ], 19 | [ ["w", 87], ["x", 88], ["c", 67], ["v", 86], ["b", 66], ["n", 78], [",", 188], [";", 186] ], 20 | [ ["", 32] ] 21 | ] 22 | 23 | # sounds are always on the same row and key index 24 | sound_index = [ 25 | [0, 0, 'WorkIt'], [0, 1, 'MakeIt'], [0, 2, 'DoIt'], [0, 3, 'MakesUs'], 26 | [0, 5, 'MoreThan'], [0, 6, 'Hour'], [0, 7, 'Our'], [0, 8, 'Never'], 27 | [1, 0, 'Harder'], [1, 1, 'Better'], [1, 2, 'Faster'], [1, 3, 'Stronger'], 28 | [1, 5, 'Ever'], [1, 6, 'After'], [1, 7, 'WorkIs'], [1, 8, 'Over'] 29 | ] 30 | 31 | sound_keys = {} 32 | 33 | initJson = (keyboard) -> 34 | _.each(keyboard, (row, index_row) -> 35 | _.each(row, ([key_char, key_code], index_key) -> 36 | row_selected = $(".r:nth-child(#{index_row+1})") 37 | span_selected = $(row_selected).find("span")[index_key] 38 | $(span_selected).text(key_char) 39 | $(span_selected).parent('*[data-code]').attr('data-code', key_code) 40 | ) 41 | ) 42 | _.each(sound_index, ([row, key, sound]) -> 43 | key_code = keyboard[row][key][1] 44 | sound_keys[key_code] = sound 45 | ) 46 | 47 | getKeyCode = (event) -> 48 | code = event.keyCode or event.which 49 | # firefox returns code 0 for ö 50 | code = 192 if code == 0 and e.key == 'ö' 51 | return code 52 | 53 | processKeyDown = (key, isMouse) -> 54 | if key.data('level') 55 | curClass = key.data('level') 56 | key.addClass('is-active') 57 | key.closest('.level').find('.is-active').not(key).removeClass('is-active') 58 | $('body').removeClass().addClass(curClass) 59 | else 60 | $('#js-lyrics').html('').find('span').addClass('fadeOutUp').html(key.data('lyric')) 61 | if !isMouse 62 | key.addClass('is-active') 63 | 64 | switch $('.level').find('i.is-active').data('level') 65 | when 'Normal' 66 | level_num = 1 67 | when 'Pitch-1' 68 | level_num = 2 69 | when 'Low' 70 | level_num = 3 71 | when 'Pitch-2' 72 | level_num = 4 73 | when 'High' 74 | level_num = 5 75 | 76 | code = key.data('code') 77 | sound_name = sound_keys[code] 78 | if sound_name 79 | ion.sound.play sound_name + level_num 80 | 81 | 82 | init = -> 83 | level = 'Normal' 84 | $('body').addClass 'Normal' 85 | $('.level').find('i[data-level=' + level + ']').addClass 'is-active' 86 | 87 | ion.sound 88 | sounds: do -> 89 | sounds = [] 90 | for i in [1..5] 91 | for s in sound_index 92 | sounds.push {name: (s[2] + i), preload: true} 93 | return sounds 94 | path: 'path/to/folder' 95 | preload: true 96 | 97 | $ -> 98 | init() 99 | k = $('.k') 100 | 101 | $('.js-azerty').on 'click', (e) -> 102 | e.preventDefault() 103 | initJson(keyboard_azerty) 104 | $('.k').addClass 'azerty' 105 | $(this).closest('.modal').remove() 106 | 107 | $('.js-qwerty').on 'click', (e) -> 108 | e.preventDefault() 109 | initJson(keyboard_qwerty) 110 | $('.k').addClass 'qwerty' 111 | $(this).closest('.modal').remove() 112 | 113 | $('.js-qwertz').on 'click', (e) -> 114 | e.preventDefault() 115 | initJson(keyboard_qwertz) 116 | $('.k').addClass 'qwertz' 117 | $(this).closest('.modal').remove() 118 | 119 | $(document).keydown (e) -> 120 | code = getKeyCode e 121 | key = $('[data-code=' + code + ']') 122 | if key.length 123 | e.preventDefault() 124 | processKeyDown key, false 125 | 126 | $(document).keyup (e) -> 127 | code = getKeyCode e 128 | key = $('[data-code=' + code + ']') 129 | if key.length 130 | e.preventDefault() 131 | if !key.data('level') 132 | key.removeClass('is-active') 133 | 134 | $('[data-code]').mousedown (e) -> 135 | e.preventDefault() 136 | processKeyDown $(this), true 137 | 138 | $('#js-player_1').jPlayer 139 | ready: (event) -> 140 | $(this).jPlayer 'setMedia', 141 | m4a: 'path-to-instrumental.mp3' 142 | supplied: 'm4a' 143 | wmode: 'window' 144 | autoBlur: false 145 | useStateClassSkin: true 146 | smoothPlayBar: true 147 | keyEnabled: true 148 | toggleDuration: true 149 | remainingDuration: true 150 | keyBindings: 151 | play: 152 | key: 32 153 | fn: (f) -> 154 | if f.status.paused 155 | f.play() 156 | else 157 | f.pause() 158 | muted: 159 | key: 0 160 | fn: (f) -> 161 | f._muted !f.options.muted 162 | volumeUp: 163 | key: 0 164 | fn: (f) -> 165 | f.volume f.options.volume + 0.1 166 | volumeDown: 167 | key: 0 168 | fn: (f) -> 169 | f.volume f.options.volume - 0.1 170 | loop: 171 | key: 0 172 | fn: (f) -> 173 | f._loop !f.options.loop 174 | -------------------------------------------------------------------------------- /source/assets/stylesheets/_animate.sass: -------------------------------------------------------------------------------- 1 | .animated 2 | animation-duration: 1s 3 | animation-fill-mode: both 4 | &.infinite 5 | animation-iteration-count: infinite 6 | &.hinge 7 | animation-duration: 2s 8 | 9 | @keyframes fadeOutUp 10 | 0% 11 | opacity: 1 12 | 100% 13 | opacity: 0 14 | transform: translate3d(0, -100%, 0) 15 | 16 | .fadeOutUp 17 | animation-name: fadeOutUp 18 | -------------------------------------------------------------------------------- /source/assets/stylesheets/_konsole.sass: -------------------------------------------------------------------------------- 1 | /* 2 | * Konsole 3 | * Malik Dellidj - @Dathink 4 | * 5 | * Nb : Hey IE fellaz, get a browser : www.google.com/chrome, it's free ! 6 | */ 7 | 8 | html, body 9 | height: 100vh 10 | width: 100vw 11 | 12 | body 13 | font: normal 1em/1.45em $font-family 14 | background: $bg-color 15 | display: flex 16 | align-items: center 17 | flex-direction: column 18 | justify-content: space-between 19 | -webkit-font-smoothing: antialiased 20 | color: $neutral-color 21 | -webkit-font-smoothing: subpixel-antialiased 22 | text-rendering: optimizeLegibility 23 | background-size: 70% 24 | 25 | .home 26 | display: flex 27 | align-items: center 28 | justify-content: center 29 | flex: 1 30 | flex-direction: column 31 | p 32 | width: rem-calc(640) 33 | color: $bg-color-lightened 34 | text-align: center 35 | margin: rem-calc(10) 36 | font-size: rem-calc(14) 37 | a 38 | text-decoration: none 39 | color: $bg-color-light 40 | 41 | .extra 42 | color: $extra 43 | 44 | 45 | .wk 46 | display: flex 47 | align-items: center 48 | justify-content: space-between 49 | flex: 1 50 | flex-direction: column 51 | 52 | .lyrics 53 | align-items: center 54 | justify-content: center 55 | display: flex 56 | flex: 1 57 | font-size: rem-calc(58) 58 | position: relative 59 | span 60 | animation-duration: 1s 61 | white-space: nowrap 62 | font-weight: 500 63 | .Normal & 64 | color: $extra 65 | text-shadow: rem-calc(0 0 10) rgba($extra, .2) 66 | .Pitch-1 & 67 | color: $love 68 | text-shadow: rem-calc(0 0 10) rgba($love, .2) 69 | .Pitch-2 & 70 | color: $sky 71 | text-shadow: rem-calc(0 0 10) rgba($sky, .2) 72 | .Low & 73 | color: $gold-helmet 74 | text-shadow: rem-calc(0 0 10) rgba($gold-helmet, .2) 75 | .High & 76 | color: $grape 77 | text-shadow: rem-calc(0 0 10) rgba($grape, .2) 78 | 79 | .k 80 | width: rem-calc(630) 81 | padding-right: 2.5% 82 | user-select: none 83 | flex: 2 84 | -webkit-tap-highlight-color: rgba(0,0,0,0) 85 | -webkit-tap-highlight-color: transparent // Hey Androids ! 86 | .r 87 | position: relative 88 | display: flex 89 | justify-content: space-between 90 | margin: rem-calc(10px) 91 | &:nth-child(1), &:nth-child(2) 92 | i:nth-last-child(-n+5), i:nth-child(-n+4) 93 | color: lighten($tint, 25%) 94 | cursor: pointer 95 | &:hover 96 | +keycolor($extra) 97 | &:active, &.is-active 98 | +keycolor($extra, true) 99 | i:last-child 100 | color: $bg-color-light !important 101 | cursor: initial 102 | &:hover 103 | border-color: $tint !important 104 | color: $tint !important 105 | &:active, &.is-active 106 | border-color: $tint !important 107 | color: $tint !important 108 | box-shadow: rem-calc(0 0 9 -2) $tint !important 109 | +translateY(rem-calc(1)) 110 | .Normal & 111 | i:nth-last-child(-n+5), i:nth-child(-n+4) 112 | color: lighten($tint, 25%) 113 | &:hover 114 | +keycolor($extra) 115 | &:active, &.is-active 116 | +keycolor($extra, true) 117 | .Pitch-1 & 118 | i:nth-last-child(-n+5), i:nth-child(-n+4) 119 | color: lighten($tint, 25%) 120 | &:hover 121 | +keycolor($love) 122 | &:active, &.is-active 123 | +keycolor($love, true) 124 | .Pitch-2 & 125 | i:nth-last-child(-n+5), i:nth-child(-n+4) 126 | color: lighten($tint, 25%) 127 | &:hover 128 | +keycolor($sky) 129 | &:active, &.is-active 130 | +keycolor($sky, true) 131 | .Low & 132 | i:nth-child(-n+4) 133 | color: $bg-color-light 134 | &:hover 135 | +keycolor($bg-color-lightened) 136 | &:active, &.is-active 137 | +keycolor($bg-color-lightened, true) 138 | i:nth-last-child(-n+5) 139 | color: lighten($tint, 25%) 140 | &:hover 141 | +keycolor($gold-helmet) 142 | &:active, &.is-active 143 | +keycolor($gold-helmet, true) 144 | .High & 145 | i:nth-child(-n+4) 146 | color: $bg-color-light 147 | &:hover 148 | +keycolor($bg-color-lightened) 149 | &:active, &.is-active 150 | +keycolor($bg-color-lightened, true) 151 | i:nth-last-child(-n+5) 152 | color: lighten($tint, 25%) 153 | &:hover 154 | +keycolor($grape) 155 | &:active, &.is-active 156 | +keycolor($grape, true) 157 | &:nth-child(2) 158 | +translateX(2.5%) 159 | &:nth-child(3) 160 | margin-left: 8.5% 161 | margin-right: 14% 162 | i:nth-child(1) 163 | cursor: pointer 164 | .Normal & 165 | b 166 | background: $extra 167 | +keycolor($extra, true) 168 | i:nth-child(2) 169 | cursor: pointer 170 | .Pitch-1 & 171 | b 172 | background: $love 173 | +keycolor($love, true) 174 | i:nth-child(3) 175 | cursor: pointer 176 | .Pitch-2 & 177 | b 178 | background: $sky 179 | +keycolor($sky, true) 180 | i:nth-last-child(3) 181 | cursor: pointer 182 | .Low & 183 | b 184 | background: $gold-helmet 185 | +keycolor($gold-helmet, true) 186 | i:nth-last-child(4) 187 | cursor: pointer 188 | .High & 189 | b 190 | background: $grape 191 | +keycolor($grape, true) 192 | i 193 | flex-direction: column-reverse 194 | b 195 | background: $bg-color-light 196 | color: $bg-color 197 | border-radius: rem-calc(8) 198 | padding: 0 rem-calc(5) 199 | line-height: 0 200 | margin-top: rem-calc(5) 201 | i, .space 202 | display: flex 203 | flex-direction: column 204 | justify-content: center 205 | align-items: center 206 | color: $bg-color-light 207 | border-radius: rem-calc(6) 208 | height: rem-calc($key-size) 209 | font-size: rem-calc(16) 210 | line-height: 0 211 | border: rem-calc(2) solid $bg-color-light 212 | position: relative 213 | transition: all .08s ease-in-out 214 | &:hover 215 | border-color: $tint 216 | color: $tint 217 | &:active, &.is-active 218 | border-color: $tint 219 | color: $tint 220 | box-shadow: rem-calc(0 0 9 -2) $tint 221 | +translateY(rem-calc(1)) 222 | i 223 | font-style: normal 224 | width: rem-calc($key-size) 225 | span, b 226 | flex: 2 227 | display: flex 228 | align-items: center 229 | span 230 | text-transform: uppercase 231 | font-family: 'Varela Round' 232 | b 233 | font-size: rem-calc(9) 234 | flex: 1 235 | .space 236 | flex: 1 237 | max-width: 48.5% 238 | margin-left: 27.5% 239 | align-items: stretch 240 | justify-content: center 241 | position: static 242 | 243 | .credits 244 | font-size: rem-calc(14) 245 | display: flex 246 | padding: rem-calc(10) 247 | flex-direction: row 248 | flex: 1 249 | justify-content: space-between 250 | p 251 | text-align: center 252 | .links 253 | li 254 | display: inline-block 255 | padding: rem-calc(0 5) 256 | &:last-child 257 | border: 0 258 | 259 | .fa 260 | color: $extra 261 | & + a 262 | color: $extra 263 | &:hover 264 | color: $extra 265 | .fa-heart 266 | color: $love 267 | 268 | .jp-audio 269 | color: $neutral-color 270 | 271 | .modal 272 | display: flex 273 | background: rgba($bg-color, .8) 274 | position: absolute 275 | top: 0 276 | left: 0 277 | right: 0 278 | bottom: 0 279 | align-items: center 280 | justify-content: center 281 | flex-direction: column 282 | .daft-punk-logo 283 | margin: rem-calc(20 0 30) 284 | .btn 285 | color: $extra 286 | border: rem-calc(2) solid $extra 287 | padding: rem-calc(10 20) 288 | border-radius: rem-calc(50) 289 | transition: margin .3s ease 290 | &:hover 291 | +keycolor($extra, true) 292 | text-shadow: rem-calc(0 0 4) rgba($extra, .8) 293 | h1 294 | font-size: rem-calc(40) 295 | font-weight: 100 296 | margin: rem-calc(0 0 30 0) 297 | h2 298 | font-size: rem-calc(20) 299 | font-weight: 200 300 | margin: rem-calc(0 0 30 0) 301 | ul 302 | display: flex 303 | li 304 | margin: rem-calc(20) 305 | .fa 306 | color: $extra 307 | & + a 308 | color: $neutral-color 309 | &:hover 310 | color: $extra 311 | .credit 312 | margin: rem-calc(20 0 0 0) 313 | 314 | .jp-audio 315 | position: relative 316 | .jp-controls 317 | position: absolute 318 | button 319 | background: transparent 320 | border: 0 321 | outline: none 322 | color: $bg-color-lightened 323 | text-transform: capitalize 324 | font-size: rem-calc(9) 325 | .jp-play 326 | &:before 327 | content: '' 328 | height: rem-calc(5) 329 | width: rem-calc(5) 330 | border-radius: rem-calc(50) 331 | background: $bg-color-lightened 332 | display: inline-block 333 | margin: rem-calc(1 3) 334 | &.jp-state-playing 335 | .jp-controls 336 | .jp-play 337 | color: $extra 338 | text-shadow: rem-calc(0 0 2) rgba($extra, .8) 339 | &:before 340 | background: $extra 341 | box-shadow: rem-calc(0 0 3) rgba($extra, .8) 342 | .Pitch-1 & 343 | color: $love 344 | text-shadow: rem-calc(0 0 2) rgba($love, .8) 345 | &:before 346 | background: $love 347 | box-shadow: rem-calc(0 0 3) rgba($love, .8) 348 | .Pitch-2 & 349 | color: $sky 350 | text-shadow: rem-calc(0 0 2) rgba($sky, .8) 351 | &:before 352 | background: $sky 353 | box-shadow: rem-calc(0 0 3) rgba($sky, .8) 354 | .Low & 355 | color: $gold-helmet 356 | text-shadow: rem-calc(0 0 2) rgba($gold-helmet, .8) 357 | &:before 358 | background: $gold-helmet 359 | box-shadow: rem-calc(0 0 3) rgba($gold-helmet, .8) 360 | .High & 361 | color: $grape 362 | text-shadow: rem-calc(0 0 2) rgba($grape, .8) 363 | &:before 364 | background: $grape 365 | box-shadow: rem-calc(0 0 3) rgba($grape, .8) 366 | .jp-progress 367 | height: rem-calc(49) 368 | .jp-seek-bar 369 | width: 100% 370 | height: 100% 371 | .jp-play-bar 372 | background: rgba($bg-color-light, .2) 373 | height: 100% 374 | .legal 375 | text-align: center 376 | padding: rem-calc(5) 377 | font-size: rem-calc(10) 378 | color: $bg-color-light 379 | 380 | footer 381 | display: flex 382 | border-top: rem-calc(1) solid rgba($bg-color-light, .35) 383 | width: 100% 384 | color: $bg-color-light 385 | -------------------------------------------------------------------------------- /source/assets/stylesheets/_mixins.sass: -------------------------------------------------------------------------------- 1 | = keycolor($v, $bs : false) 2 | color: $v 3 | border-color: $v 4 | @if $bs 5 | box-shadow: rem-calc(0 0 12 -2) $v 6 | 7 | @function strip-unit($num) 8 | @return $num / ($num * 0 + 1) 9 | 10 | @function convert-to-rem($value, $base-value: $rem-base) 11 | $value: strip-unit($value) / strip-unit($base-value) * 1rem 12 | @if $value == 0rem 13 | $value: 0 14 | @return $value 15 | 16 | @function rem-calc($values, $base-value: $rem-base) 17 | $max: length($values) 18 | @if $max == 1 19 | @return convert-to-rem(nth($values, 1), $base-value) 20 | $remValues: () 21 | @for $i from 1 through $max 22 | $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value)) 23 | @return $remValues 24 | -------------------------------------------------------------------------------- /source/assets/stylesheets/_settings.sass: -------------------------------------------------------------------------------- 1 | $bg-color: #101012 2 | $bg-color-light: lighten($bg-color, 20%) 3 | $bg-color-lightened: lighten($bg-color-light, 20%) 4 | $neutral-color: #ffffff 5 | $love: #d43f57 6 | $sky: #3BB9E4 7 | $grape: #714D9C 8 | $tint: $bg-color-lightened 9 | $extra: #15d880 10 | $gold-helmet: #dfba69 11 | $silver-helmet: #c9d1d3 12 | $key-size: 49px 13 | $font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif 14 | $rem-base: 16px !default 15 | -------------------------------------------------------------------------------- /source/assets/stylesheets/application.sass: -------------------------------------------------------------------------------- 1 | @charset "UTF-8" 2 | 3 | @import "compass" 4 | @import "meyer-reset/stylesheets/meyer-reset.scss" 5 | 6 | @import "animate" 7 | @import "settings" 8 | @import "mixins" 9 | @import "konsole" 10 | -------------------------------------------------------------------------------- /source/index.html.slim: -------------------------------------------------------------------------------- 1 | --- 2 | title: Work is over. 3 | --- 4 | 5 | .wk 6 | .home 7 | p 8 | 'What was just an experiment on Codepen, turned into an uncontrolable worldwide buzz. To avoid any complain about copyright and/or intellectual property infrigement, I decided to close this website. 9 | br 10 | 'Thanks to everyone who liked it. 11 | p 12 | 'Work is over. 13 | p 14 | a href="http://twitter.com/Dathink" 15 | '@Dathink -------------------------------------------------------------------------------- /source/konsole.html.slim: -------------------------------------------------------------------------------- 1 | --- 2 | title: Daftpunkonsole.com 3 | --- 4 | 5 | - a = [['Work it'], ['Make it'], ['Do it'],['Makes us'],[''],['More than'],['Hour'],['Our'],['Never'],['']] 6 | - b = [['Harder'],['Better'],['Faster'],['Stronger'],[''],['Ever'],['After'],['Work is'],['Over'],['']] 7 | - c = [['Normal'],['Pitch-1'],['Pitch-2'],[''],['High'],['Low'],[''],['']] 8 | - d = [['','32', 'play']] 9 | 10 | .wk 11 | #js-lyrics.lyrics.animated 12 | .k 13 | .r 14 | - a.each do |k| 15 | i data-code="" data-lyric=k[0] 16 | span 17 | - if k[0] != '' 18 | b = k[0] 19 | .r 20 | - b.each do |k| 21 | i data-code="" data-lyric=k[0] 22 | span 23 | - if k[0] != '' 24 | b = k[0] 25 | .r.level 26 | - c.each do |k| 27 | i data-code="" data-level = k[0] 28 | span 29 | - if k[0] != '' 30 | b = k[0] 31 | .r 32 | - d.each do |k| 33 | .space data-code = k[1] data-action = k[2] 34 | #jp_container_1.jp-audio 35 | .jp-type-single 36 | .jp-gui.jp-interface 37 | .jp-controls 38 | button.jp-play Instrumental 39 | .jp-progress 40 | .jp-seek-bar 41 | .jp-play-bar 42 | 43 | #js-player_1.jp-jplayer 44 | .legal 45 | 'All sounds, samples, brands, trademarks, artworks, or any associated imagery are trademarks and/or copyright material of their respective owners. All rights reserved. 46 | footer 47 | .credits 48 | p #Konsole 49 | p 50 | 'Made with 51 | i.fa.fa-heart> 52 | 'by Malik Dellidj 53 | ul.links 54 | li 55 | i.fa.fa-twitter> 56 | a href="http://twitter.com/Dathink" target="_blank" 57 | '@Dathink 58 | 59 | .modal.animated 60 | h1 “Harder, Better, Faster, Stronger” 61 | h2 62 | 'Please choose your keyboard 63 | 64 | ul 65 | li 66 | a href="#" class="js-qwerty btn" 67 | 'QWERTY 68 | li 69 | a href="#" class="js-qwertz btn" 70 | 'QWERTZ 71 | li 72 | a href="#" class="js-azerty btn" 73 | 'AZERTY 74 | p.credit 75 | i.fa.fa-twitter> 76 | a href="http://twitter.com/Dathink" target="_blank" 77 | '@Dathink 78 | -------------------------------------------------------------------------------- /source/layouts/layout.slim: -------------------------------------------------------------------------------- 1 | doctype html 2 | 3 | html 4 | head 5 | meta charset="utf-8" 6 | title #{current_page.data.title} 7 | link rel="shortcut icon" href="#{image_path('favicon.ico')}" type="image/x-icon" 8 | 9 | = stylesheet_link_tag 'application' 10 | = stylesheet_link_tag 'https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' 11 | = stylesheet_link_tag 'http://fonts.googleapis.com/css?family=Varela+Round' 12 | = google_analytics_universal_tag 13 | body class='#{page_classes}' 14 | 15 | == yield 16 | 17 | = javascript_include_tag 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/190177/ion.min.js' 18 | = javascript_include_tag 'application' 19 | --------------------------------------------------------------------------------