adrien/angry-notes
adrien/angry-notes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

keymapInput as image

Browse Source
This commit is contained in:
Adrien MALINGREY 2024-08-26 02:09:32 +02:00
parent c6d215f05a
commit 268cc209b6
3 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
img/keyboard.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 626 B

15
index.html
View File

@ -19,7 +19,7 @@
<dialog id="startDialog" class="nes-dialog is-rounded is-dark"> <dialog id="startDialog" class="nes-dialog is-rounded is-dark">
<form method="dialog"> <form method="dialog">
<h1 class="title is-centered">Angry notes from outer space</h1> <h1 class="title is-centered">Angry notes from outer space</h1>
<div style="display: flex;gap: 2rem;align-items: end;"> <div style="display: flex; gap: 2rem; align-items: end;">
<div> <div>
<p>Jean-Michel, les notes furieuses de l'espace attaquent&nbsp;! Détruisez-les à l'aide de votre harpe laser.</p> <p>Jean-Michel, les notes furieuses de l'espace attaquent&nbsp;! Détruisez-les à l'aide de votre harpe laser.</p>
<p>Ce jeu est conçu pour un clavier MIDI. Si vous en avez un, branchez-le maintenant.</p> <p>Ce jeu est conçu pour un clavier MIDI. Si vous en avez un, branchez-le maintenant.</p>
@ -37,13 +37,12 @@
<section class="nes-container with-title is-dark"> <section class="nes-container with-title is-dark">
<h3 class="title">Contrôles</h3> <h3 class="title">Contrôles</h3>
<div class="nes-field"> <div class="nes-field">
<label for="keyMapInput"> <label for="keyMapInput">Clavier d'ordinateur</label>
Clavier d'ordinateur <div style="overflow-x: scroll;padding: 2px;">
<label for="keyMapInput" style="padding: 0 2em 0 1em; margin: 0 6px;">C  C♯ D  D♯ E  F  F♯ G  G♯ A  A♯ B  C  C♯ D  D♯ E  F  F♯ G  G♯ A  A♯ B  C</label> <input type="text" id="keyMapInput" class="nes-input is-dark"
<textarea id="keyMapInput" class="nes-textarea is-dark" minlength="25" maxlength="25" cols="25" required minlength="25" maxlength="25" size="25" required
style="text-transform: uppercase; letter-spacing: 1.6em;" placeholder="wsxdcvgbhnj,e'r(tyèu_içop" value="wsxdcvgbhnj,e'r(tyèu_içop"/>
placeholder="wsxdcvgbhnj,e'r(tyèu_içop" autocomplete="off" autocorrect="off" spellcheck="false">wsxdcvgbhnj,e'r(tyèu_içop</textarea> </div>
</label>
</div> </div>
<label for="midiSelect" style="color:#fff">Clavier MIDI</label> <label for="midiSelect" style="color:#fff">Clavier MIDI</label>
<div class="nes-select is-dark"> <div class="nes-select is-dark">

15
style.css
View File

@ -39,14 +39,25 @@ h1 {
text-align: center; text-align: center;
} }
textarea { #keyMapInput {
background-image: url(img/keyboard.png);
background-repeat: repeat-x;
background-size: 240px 50px;
margin: auto;
color: white;
text-shadow: #444 2px 2px, #444 -2px -2px, #444 2px -2px, #444 -2px 2px;
text-transform: uppercase;
padding-left: 3px;
padding-right: 0; padding-right: 0;
letter-spacing: 4px;
width: calc(25em + 108px);
height: 54px;
} }
.sliders { .sliders {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin: 20px; overflow-x: scroll;
} }
.sliders label { .sliders label {