From 268cc209b6306f27cc71a7b0a5026f09cf104780 Mon Sep 17 00:00:00 2001
From: adrien <adrien@malingrey.fr>
Date: Mon, 26 Aug 2024 02:09:32 +0200
Subject: [PATCH] keymapInput as image

---
 img/keyboard.png | Bin 0 -> 626 bytes
 index.html       |  15 +++++++--------
 style.css        |  15 +++++++++++++--
 3 files changed, 20 insertions(+), 10 deletions(-)
 create mode 100644 img/keyboard.png

diff --git a/img/keyboard.png b/img/keyboard.png
new file mode 100644
index 0000000000000000000000000000000000000000..60fcfaaed1c5c47e6f5b29d8ca27304adde25b27
GIT binary patch
literal 626
zcmV-&0*(ENP)<h;3K|Lk000e1NJLTq004LZ000>Q0{{R3zyf$~00004XF*Lt006O%
z3;baP0004mX+uL$Nkc;*aB^>EX>4Tx04R}tkv&MmKpe$iTg4((2a6PO$WWc^q9Wo{
zt5Adrp;l<s!Q|2}Xws0RxHt-~1qVMCs}3&Cx;nTDg5U>;vxAeOi<J1kq|hS9gX4a@
zyZ5+z2lyKmrkY)GK-DZGolFSX+^W#?iXb8wLO*6DX6kdIn1bi{x`&UicQKyjeeTcE
zr{qlr_ypoO(+!JwgLrz=(mC%FhgnHdh|h_~4Z0xlBiCh@-#8Z?_VdiJkx9=Jhlzz^
z2g@DIN`^{2MI2RBjq?3jmle)ioYhK=weHDZ7|Lra%Uq{9f+QBP1Q7yc)KEqR7Gkt&
zq?kz4e!{~)?D$1;$>b`7kz)Z>sE`~#_#gc4)+|g;xJjV|(EVcDAEQ9eF3_yo_V=-E
zH&1}TGjOG~{nZ9A^GSNWtwoQ3fo<U8x~<83z~v4QdD10Aa-;xFf1v=ppV2qvfWcd!
zcg^jswU5&WAVXcHZh(VBV5~^l>mKh8cJ}t~nO1*4*mZKx(CSV+00006P)t-s7#bY*
z`Sx0rT!H`q00Cl4M??UK1szBL000SaNLh0L04^f{04^f|c%?sf00007bV*G`2j~bH
z7Z?P$y@@UW000?uMObu0Z*6U5Zgc=ca%Ew3Wn>_CX>@2HM@dakSAh-}0000jNkl<Z
z7}H~@KfwQo;s5;)%>NneLBuGZLjJ%1|KI<=|9}7g-~WLGK|UG)08i7`TwBRWc>n+a
M07*qoM6N<$f;5N?vH$=8

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index 1821ed2..64d1430 100644
--- a/index.html
+++ b/index.html
@@ -19,7 +19,7 @@
         <dialog id="startDialog" class="nes-dialog is-rounded is-dark">
             <form method="dialog">
                 <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>
                         <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>
@@ -37,13 +37,12 @@
                 <section class="nes-container with-title is-dark">
                     <h3 class="title">Contrôles</h3>
                     <div class="nes-field">
-                        <label for="keyMapInput">
-                            Clavier d'ordinateur
-                            <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>
-                            <textarea id="keyMapInput" class="nes-textarea is-dark" minlength="25" maxlength="25" cols="25" required
-                                style="text-transform: uppercase; letter-spacing: 1.6em;"
-                                placeholder="wsxdcvgbhnj,e'r(tyèu_içop" autocomplete="off" autocorrect="off" spellcheck="false">wsxdcvgbhnj,e'r(tyèu_içop</textarea>
-                            </label>
+                        <label for="keyMapInput">Clavier d'ordinateur</label>
+                        <div style="overflow-x: scroll;padding: 2px;">
+                            <input type="text" id="keyMapInput" class="nes-input is-dark"
+                                minlength="25" maxlength="25" size="25" required
+                                placeholder="wsxdcvgbhnj,e'r(tyèu_içop" value="wsxdcvgbhnj,e'r(tyèu_içop"/>
+                        </div>
                     </div>
                     <label for="midiSelect" style="color:#fff">Clavier MIDI</label>
                     <div class="nes-select is-dark">
diff --git a/style.css b/style.css
index 68eab11..e2b6b99 100644
--- a/style.css
+++ b/style.css
@@ -39,14 +39,25 @@ h1 {
     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;
+    letter-spacing: 4px;
+    width: calc(25em + 108px);
+    height: 54px;
 }
 
 .sliders {
     display: flex;
     justify-content: center;
-    margin: 20px;
+    overflow-x: scroll;
 }
 
 .sliders label {