add app electron

electron · Dec 17, 2023 · f937f52 · f937f52
1 parent 28a2118
commit f937f52
Show file tree

Hide file tree

Showing 40 changed files with 232 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
 # electron-quick-start
 
+git clone https://github.com/electron/electron-quick-start
+
 **Clone and run for a quick way to see Electron in action.**
 
 This is a minimal Electron application based on the [Quick Start Guide](https://electronjs.org/docs/latest/tutorial/quick-start) within the Electron documentation.

diff --git a/functions.js b/functions.js
@@ -0,0 +1,151 @@
+document.onkeydown = function (e) {
+  const displayElement = document.getElementById("display");
+  switch (e.keyCode) {
+    case 48:
+      document.getElementById("0").play();
+      displayElement.innerText = "0";
+      break;
+    case 49:
+      document.getElementById("1").play();
+      displayElement.innerText = "1";
+      break;
+    case 50:
+      document.getElementById("2").play();
+      displayElement.innerText = "2";
+      break;
+    case 51:
+      document.getElementById("3").play();
+      displayElement.innerText = "3";
+      break;
+    case 52:
+      document.getElementById("4").play();
+      displayElement.innerText = "4";
+      break;
+    case 53:
+      document.getElementById("5").play();
+      displayElement.innerText = "5";
+      break;
+    case 54:
+      document.getElementById("6").play();
+      displayElement.innerText = "6";
+      break;
+    case 55:
+      document.getElementById("7").play();
+      displayElement.innerText = "7";
+      break;
+    case 56:
+      document.getElementById("8").play();
+      displayElement.innerText = "8";
+      break;
+    case 57:
+      document.getElementById("9").play();
+      displayElement.innerText = "9";
+      break;
+    case 65:
+      document.getElementById("A").play();
+      displayElement.innerText = "A";
+      break;
+    case 66:
+      document.getElementById("B").play();
+      displayElement.innerText = "B";
+      break;
+    case 67:
+      document.getElementById("C").play();
+      displayElement.innerText = "C";
+      break;
+    case 68:
+      document.getElementById("D").play();
+      displayElement.innerText = "D";
+      break;
+    case 69:
+      document.getElementById("E").play();
+      displayElement.innerText = "E";
+      break;
+    case 70:
+      document.getElementById("F").play();
+      displayElement.innerText = "F";
+      break;
+    case 71:
+      document.getElementById("G").play();
+      displayElement.innerText = "G";
+      break;
+    case 72:
+      document.getElementById("H").play();
+      displayElement.innerText = "H";
+      break;
+    case 73:
+      document.getElementById("I").play();
+      displayElement.innerText = "I";
+      break;
+    case 74:
+      document.getElementById("J").play();
+      displayElement.innerText = "J";
+      break;
+    case 75:
+      document.getElementById("K").play();
+      displayElement.innerText = "K";
+      break;
+    case 76:
+      document.getElementById("L").play();
+      displayElement.innerText = "L";
+      break;
+    case 77:
+      document.getElementById("M").play();
+      displayElement.innerText = "M";
+      break;
+    case 78:
+      document.getElementById("N").play();
+      displayElement.innerText = "N";
+      break;
+    case 79:
+      document.getElementById("O").play();
+      displayElement.innerText = "O";
+      break;
+    case 80:
+      document.getElementById("P").play();
+      displayElement.innerText = "P";
+      break;
+    case 81:
+      document.getElementById("Q").play();
+      displayElement.innerText = "Q";
+      break;
+    case 82:
+      document.getElementById("R").play();
+      displayElement.innerText = "R";
+      break;
+    case 83:
+      document.getElementById("S").play();
+      displayElement.innerText = "S";
+      break;
+    case 84:
+      document.getElementById("T").play();
+      displayElement.innerText = "T";
+      break;
+    case 85:
+      document.getElementById("U").play();
+      displayElement.innerText = "U";
+      break;
+    case 86:
+      document.getElementById("V").play();
+      displayElement.innerText = "V";
+      break;
+    case 87:
+      document.getElementById("W").play();
+      displayElement.innerText = "W";
+      break;
+    case 88:
+      document.getElementById("X").play();
+      displayElement.innerText = "X";
+      break;
+    case 89:
+      document.getElementById("Y").play();
+      displayElement.innerText = "Y";
+      break;
+    case 90:
+      document.getElementById("Z").play();
+      displayElement.innerText = "Z";
+      break;
+    default:
+      alert("Клавиша на обнаружена!");
+  }
+};
diff --git a/index.html b/index.html
@@ -1,19 +1,58 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
     <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
-    <link href="./styles.css" rel="stylesheet">
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"
+    />
+    <link href="./styles.css" rel="stylesheet" />
     <title>Hello World!</title>
   </head>
   <body>
-    <h1>Hello World!</h1>
-    We are using Node.js <span id="node-version"></span>,
-    Chromium <span id="chrome-version"></span>,
-    and Electron <span id="electron-version"></span>.
-
-    <!-- You can also require other files to run in this process -->
+    <div class="audio">
+      <!-- Мы используем preload="auto", чтобы сказать приложению, что оно должно загрузить весь аудиофайл после загрузки страницы.  -->
+      <audio id="A" src="./src/sounds/A.mp3" preload="auto"></audio>
+      <audio id="B" src="./src/sounds/B.mp3" preload="auto"></audio>
+      <audio id="C" src="./src/sounds/C.mp3" preload="auto"></audio>
+      <audio id="D" src="./src/sounds/D.mp3" preload="auto"></audio>
+      <audio id="E" src="./src/sounds/E.mp3" preload="auto"></audio>
+      <audio id="F" src="./src/sounds/F.mp3" preload="auto"></audio>
+      <audio id="G" src="./src/sounds/G.mp3" preload="auto"></audio>
+      <audio id="H" src="./src/sounds/H.mp3" preload="auto"></audio>
+      <audio id="I" src="./src/sounds/I.mp3" preload="auto"></audio>
+      <audio id="J" src="./src/sounds/J.mp3" preload="auto"></audio>
+      <audio id="K" src="./src/sounds/K.mp3" preload="auto"></audio>
+      <audio id="L" src="./src/sounds/L.mp3" preload="auto"></audio>
+      <audio id="M" src="./src/sounds/M.mp3" preload="auto"></audio>
+      <audio id="N" src="./src/sounds/N.mp3" preload="auto"></audio>
+      <audio id="O" src="./src/sounds/O.mp3" preload="auto"></audio>
+      <audio id="P" src="./src/sounds/P.mp3" preload="auto"></audio>
+      <audio id="Q" src="./src/sounds/Q.mp3" preload="auto"></audio>
+      <audio id="R" src="./src/sounds/R.mp3" preload="auto"></audio>
+      <audio id="S" src="./src/sounds/S.mp3" preload="auto"></audio>
+      <audio id="T" src="./src/sounds/T.mp3" preload="auto"></audio>
+      <audio id="U" src="./src/sounds/U.mp3" preload="auto"></audio>
+      <audio id="V" src="./src/sounds/V.mp3" preload="auto"></audio>
+      <audio id="W" src="./src/sounds/W.mp3" preload="auto"></audio>
+      <audio id="X" src="./src/sounds/X.mp3" preload="auto"></audio>
+      <audio id="Y" src="./src/sounds/Y.mp3" preload="auto"></audio>
+      <audio id="Z" src="./src/sounds/Z.mp3" preload="auto"></audio>
+      <audio id="0" src="./src/sounds/0.mp3" preload="auto"></audio>
+      <audio id="1" src="./src/sounds/1.mp3" preload="auto"></audio>
+      <audio id="2" src="./src/sounds/2.mp3" preload="auto"></audio>
+      <audio id="3" src="./src/sounds/3.mp3" preload="auto"></audio>
+      <audio id="4" src="./src/sounds/4.mp3" preload="auto"></audio>
+      <audio id="5" src="./src/sounds/5.mp3" preload="auto"></audio>
+      <audio id="6" src="./src/sounds/6.mp3" preload="auto"></audio>
+      <audio id="7" src="./src/sounds/7.mp3" preload="auto"></audio>
+      <audio id="8" src="./src/sounds/8.mp3" preload="auto"></audio>
+      <audio id="9" src="./src/sounds/9.mp3" preload="auto"></audio>
+    <div class="word">
+  Let's play the alphabet game? <br/> Press any key</div>
+  <div id="display"></div>
     <script src="./renderer.js"></script>
+    <script src="./functions.js"></script>
   </body>
 </html>
diff --git a/src/sounds/0.mp3 b/src/sounds/0.mp3
diff --git a/src/sounds/1.mp3 b/src/sounds/1.mp3
diff --git a/src/sounds/2.mp3 b/src/sounds/2.mp3
diff --git a/src/sounds/3.mp3 b/src/sounds/3.mp3
diff --git a/src/sounds/4.mp3 b/src/sounds/4.mp3
diff --git a/src/sounds/5.mp3 b/src/sounds/5.mp3
diff --git a/src/sounds/6.mp3 b/src/sounds/6.mp3
diff --git a/src/sounds/7.mp3 b/src/sounds/7.mp3
diff --git a/src/sounds/8.mp3 b/src/sounds/8.mp3
diff --git a/src/sounds/9.mp3 b/src/sounds/9.mp3
diff --git a/src/sounds/A.mp3 b/src/sounds/A.mp3
diff --git a/src/sounds/B.mp3 b/src/sounds/B.mp3
diff --git a/src/sounds/C.mp3 b/src/sounds/C.mp3
diff --git a/src/sounds/D.mp3 b/src/sounds/D.mp3
diff --git a/src/sounds/E.mp3 b/src/sounds/E.mp3
diff --git a/src/sounds/F.mp3 b/src/sounds/F.mp3
diff --git a/src/sounds/G.mp3 b/src/sounds/G.mp3
diff --git a/src/sounds/H.mp3 b/src/sounds/H.mp3
diff --git a/src/sounds/I.mp3 b/src/sounds/I.mp3
diff --git a/src/sounds/J.mp3 b/src/sounds/J.mp3
diff --git a/src/sounds/K.mp3 b/src/sounds/K.mp3
diff --git a/src/sounds/L.mp3 b/src/sounds/L.mp3
diff --git a/src/sounds/M.mp3 b/src/sounds/M.mp3
diff --git a/src/sounds/N.mp3 b/src/sounds/N.mp3
diff --git a/src/sounds/O.mp3 b/src/sounds/O.mp3
diff --git a/src/sounds/P.mp3 b/src/sounds/P.mp3
diff --git a/src/sounds/Q.mp3 b/src/sounds/Q.mp3
diff --git a/src/sounds/R.mp3 b/src/sounds/R.mp3
diff --git a/src/sounds/S.mp3 b/src/sounds/S.mp3
diff --git a/src/sounds/T.mp3 b/src/sounds/T.mp3
diff --git a/src/sounds/U.mp3 b/src/sounds/U.mp3
diff --git a/src/sounds/V.mp3 b/src/sounds/V.mp3
diff --git a/src/sounds/W.mp3 b/src/sounds/W.mp3
diff --git a/src/sounds/X.mp3 b/src/sounds/X.mp3
diff --git a/src/sounds/Y.mp3 b/src/sounds/Y.mp3
diff --git a/src/sounds/Z.mp3 b/src/sounds/Z.mp3
diff --git a/styles.css b/styles.css
@@ -1,3 +1,31 @@
-/* styles.css */
-
-/* Add styles here to customize the appearance of your app */
+#display {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 65px;
+  color: red;
+  z-index: 999;
+}
+body {
+  background: linear-gradient(to right, #a8c0ff, #4f4386);
+}
+.word {
+    position: fixed;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 22px;
+    margin-top: 10ch;
+    opacity: 0; 
+    animation: fadeIn 0.9s ease-out forwards; 
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+