diff --git a/index.html b/index.html index d279f99..70eb53b 100644 --- a/index.html +++ b/index.html @@ -3,20 +3,18 @@ - Comming Soon + Começando em breve - - + - - - + + + -
+

diff --git a/hotkeys.js b/scripts/hotkeys.js similarity index 99% rename from hotkeys.js rename to scripts/hotkeys.js index 61d5c0b..008d982 100644 --- a/hotkeys.js +++ b/scripts/hotkeys.js @@ -56,7 +56,6 @@ const definirAtalhoTocarMusica = () => { const key = atalhos.tocarMusica || atalhos._tocarMusica hotkeys(key, playSongHandle) atualizarAtalhoNoInput("#ipt_keyword_play_music", key) - console.log('atalho tocar', key) } const definirAtalhoPausarMusica = () => { const key = atalhos.pausarMusica || atalhos._pausarMusica diff --git a/scripts/keycodes.js b/scripts/keycodes.js new file mode 100644 index 0000000..568c4ee --- /dev/null +++ b/scripts/keycodes.js @@ -0,0 +1,174 @@ +const keyCodes = { + 0: 'That key has no keycode', + 3: 'break', + 8: 'backspace / delete', + 9: 'tab', + 12: 'clear', + 13: 'enter', + 16: 'shift', + 17: 'ctrl', + 18: 'alt', + 19: 'pause/break', + 20: 'caps lock', + 21: 'hangul', + 25: 'hanja', + 27: 'escape', + 28: 'conversion', + 29: 'non-conversion', + 32: 'spacebar', + 33: 'page up', + 34: 'page down', + 35: 'end', + 36: 'home', + 37: 'left', + 38: 'up', + 39: 'right', + 40: 'down', + 41: 'select', + 42: 'print', + 43: 'execute', + 44: 'Print Screen', + 45: 'insert', + 46: 'delete', + 47: 'help', + 48: '0', + 49: '1', + 50: '2', + 51: '3', + 52: '4', + 53: '5', + 54: '6', + 55: '7', + 56: '8', + 57: '9', + 58: ':', + 59: 'semicolon (firefox), equals', + 60: '<', + 61: 'equals (firefox)', + 63: 'ß', + 64: '@ (firefox)', + 65: 'a', + 66: 'b', + 67: 'c', + 68: 'd', + 69: 'e', + 70: 'f', + 71: 'g', + 72: 'h', + 73: 'i', + 74: 'j', + 75: 'k', + 76: 'l', + 77: 'm', + 78: 'n', + 79: 'o', + 80: 'p', + 81: 'q', + 82: 'r', + 83: 's', + 84: 't', + 85: 'u', + 86: 'v', + 87: 'w', + 88: 'x', + 89: 'y', + 90: 'z', + 91: 'Windows Key / Left ⌘ / Chromebook Search key', + 92: 'right window key', + 93: 'Windows Menu / Right ⌘', + 95: 'sleep', + 96: 'numpad 0', + 97: 'numpad 1', + 98: 'numpad 2', + 99: 'numpad 3', + 100: 'numpad 4', + 101: 'numpad 5', + 102: 'numpad 6', + 103: 'numpad 7', + 104: 'numpad 8', + 105: 'numpad 9', + 106: 'multiply', + 107: 'add', + 108: 'numpad period (firefox)', + 109: 'subtract', + 110: 'decimal point', + 111: 'divide', + 112: 'f1', + 113: 'f2', + 114: 'f3', + 115: 'f4', + 116: 'f5', + 117: 'f6', + 118: 'f7', + 119: 'f8', + 120: 'f9', + 121: 'f10', + 122: 'f11', + 123: 'f12', + 124: 'f13', + 125: 'f14', + 126: 'f15', + 127: 'f16', + 128: 'f17', + 129: 'f18', + 130: 'f19', + 131: 'f20', + 132: 'f21', + 133: 'f22', + 134: 'f23', + 135: 'f24', + 144: 'num lock', + 145: 'scroll lock', + 160: '^', + 161: '!', + 162: '؛ (arabic semicolon)', + 163: '#', + 164: '$', + 165: 'ù', + 166: 'page backward', + 167: 'page forward', + 168: 'refresh', + 169: 'closing paren (AZERTY)', + 170: '*', + 171: '~ + * key', + 172: 'home key', + 173: 'minus (firefox), mute/unmute', + 174: 'decrease volume level', + 175: 'increase volume level', + 176: 'next', + 177: 'previous', + 178: 'stop', + 179: 'play/pause', + 180: 'e-mail', + 181: 'mute/unmute (firefox)', + 182: 'decrease volume level (firefox)', + 183: 'increase volume level (firefox)', + 186: 'semi-colon / ñ', + 187: 'equal sign', + 188: 'comma', + 189: 'dash', + 190: 'period', + 191: 'forward slash / ç', + 192: 'grave accent / ñ / æ / ö', + 193: '?, / or °', + 194: 'numpad period (chrome)', + 219: 'open bracket', + 220: 'back slash', + 221: 'close bracket / å', + 222: 'single quote / ø / ä', + 223: '`', + 224: 'left or right ⌘ key (firefox)', + 225: 'altgr', + 226: '< /git >, left back slash', + 230: 'GNOME Compose Key', + 231: 'ç', + 233: 'XF86Forward', + 234: 'XF86Back', + 235: 'non-conversion', + 240: 'alphanumeric', + 242: 'hiragana/katakana', + 243: 'half-width/full-width', + 244: 'kanji', + 251: "unlock trackpad (Chrome/Edge)", + 255: 'toggle touchpad', +}; \ No newline at end of file diff --git a/main.js b/scripts/main.js similarity index 85% rename from main.js rename to scripts/main.js index 2ea3a08..e16e6c7 100644 --- a/main.js +++ b/scripts/main.js @@ -11,6 +11,8 @@ window.onload = () => { document.querySelector("#fm_song").addEventListener("submit", fmLoadPlaylistHandle) + document.querySelector("#fm_theme").addEventListener("change", fmThemeHandle) + // document.querySelector("#btn_prev").addEventListener("click", prevSongHandle) // document.querySelector("#btn_play_pause").addEventListener("click", playPauseSongHandle) // document.querySelector("#btn_next").addEventListener("click", nextSongHandle) @@ -144,8 +146,8 @@ const fmLoadPlaylistHandle = () => { function onYouTubeIframeAPIReady() { player = new YT.Player('player', { - height: '1', - width: '1', + // height: '1', + // width: '1', events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange, @@ -184,4 +186,36 @@ const pauseSongHandle = () => { } const nextSongHandle = () => { player.nextVideo() +} + +const fmThemeHandle = e => { + const theme_name = e.target.value, + style_id = "theme_style", + script_id = "theme_script" + + let style = document.head.querySelector(`#${style_id}`), + script = document.head.querySelector(`#${script_id}`) + + if (theme_name != "none") { + if (style === null) { + style = document.createElement("link") + style.setAttribute("rel", "stylesheet") + style.setAttribute("type", "text/css") + style.setAttribute("id", style_id) + document.head.appendChild(style) + } + + style.setAttribute("href", `themes/${theme_name}/${theme_name}.css`) + + if (script === null) { + script = document.createElement("script") + script.setAttribute("id", script_id) + document.head.appendChild(script) + } + + script.setAttribute("src", `themes/${theme_name}/${theme_name}.css`) + } else { + if (style !== null) style.parentElement.removeChild(style) + if (script !== null) script.parentElement.removeChild(script) + } } \ No newline at end of file diff --git a/main.css b/styles/main.css similarity index 88% rename from main.css rename to styles/main.css index 414bba3..f1dedae 100644 --- a/main.css +++ b/styles/main.css @@ -2,15 +2,13 @@ html { overflow: hidden; } -#player { - position: absolute; - opacity: 0; - pointer-events: none; +body { + margin: 0; } /* Espaçamento do topo em âncoras quando são destacadas */ /* VARS */ :target:before { - --anchor_space: 90px; + --anchor_space: 30px; } :target:before { content: ""; @@ -136,16 +134,32 @@ details > section > .container > section { details header { margin-bottom: 8px; } -details header > h1 { +details header > h1, details header > h2 { margin: 0 0 5px; - font-size: 13pt; font-weight: bold; } +details header > h1 { + font-size: 13pt; +} +details header > h2 { + font-size: 8pt; + color: #a7abaf; +} /* details header > */p { margin: 5px 0 0; font-size: 8pt; color: #b4b6b9; } + +article > section { + background-color: #f8f9f9; + border: 1px solid #dcddde; + border-radius: 3px; + padding: 23px 20px; + margin: 15px 0; +} + + form, fieldset { display: flex; flex-direction: column; @@ -163,6 +177,38 @@ form, fieldset { #fm_song input[type=url] { padding-right: 100px; } +#fm_theme { + display: flex; + flex-direction: row; + margin: -4px; +} +#fm_theme > * { + margin: 4px; +} +#fm_theme [type=radio] { + position: absolute; + opacity: 0; + width: 0; + height: 0; +} +#fm_theme [type=radio] + img { + cursor: pointer; +} +#fm_theme [type=radio]:checked + img { + border-color: #7289da; + background-color: #7289da; +} +#fm_theme .theme_preview:hover { + border-color: #72767d; +} +#fm_theme .theme_preview { + width: 80px; + height: 80px; + object-fit: cover; + padding: 3px; + border: 1px solid #dcddde; + border-radius: 3px; +} #config_atal form { display: flex; flex-direction: row; diff --git a/themes/blue_flare.css b/themes/blue_flare/blue_flare.css similarity index 95% rename from themes/blue_flare.css rename to themes/blue_flare/blue_flare.css index 0b6a574..a5dc0b0 100644 --- a/themes/blue_flare.css +++ b/themes/blue_flare/blue_flare.css @@ -4,15 +4,12 @@ Versão original: Steam Elements */ -body { - margin: 0; -} - main { position: relative; z-index: 1; height: 100vh; background-image: url(https://cdn.streamelements.com/uploads/89dd6170-4b06-4293-b003-c80596613544.png); + background-color: #000; background-position: center; background-size: cover; display: flex; @@ -20,6 +17,17 @@ main { justify-content: center; } +#player { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: .2; + pointer-events: none; + filter: blur(2px); +} + /* VARS */ #h_org { --padding_vertical: 5px; --padding_horizontal: 28px; @@ -37,7 +45,7 @@ main { --ball_shadow_spread: 0px; } #h_org:empty { - display: none; + visibility: hidden; } #h_org { font-family: Righteous; diff --git a/themes/blue_flare/blue_flare.png b/themes/blue_flare/blue_flare.png new file mode 100644 index 0000000..37a0623 Binary files /dev/null and b/themes/blue_flare/blue_flare.png differ diff --git a/themes/none.png b/themes/none.png new file mode 100644 index 0000000..5af0c25 Binary files /dev/null and b/themes/none.png differ