diff --git a/games/memory/index.html b/games/memory/index.html index 84cd631..eb37ab4 100644 --- a/games/memory/index.html +++ b/games/memory/index.html @@ -80,9 +80,14 @@
-
- +
+
Wähle die Anzahl der Spieler:
+ + +
+ -
-
Score:
- 0 + + - +
diff --git a/games/memory/style.css b/games/memory/style.css index bd50c47..6479813 100644 --- a/games/memory/style.css +++ b/games/memory/style.css @@ -279,4 +279,91 @@ body { background-color: #00ff0d; color: #575757; font-weight: 700; +} + +main { + background-color: #11111198; + border-radius: 10px; + box-shadow: 0 4px 8px #00000099; + padding: 20px; +} + +h5 { + margin: 10px 0; + color: #9e9e9e; +} + +#player-setup { + margin-bottom: 20px; +} + +#player-count { + padding: 10px; + font-size: 16px; + margin-right: 10px; + border: 1px solid #ccc; + border-radius: 5px; + width: 100px; + box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; +} + +#player-count:focus { + border-color: #4caf50; + box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); + outline: none; +} + +#start-button, +#reset-button { + background-color: #4caf50; + color: #fff; + border: none; + border-radius: 5px; + padding: 10px 20px; + cursor: pointer; + font-size: 16px; +} + +#start-button:hover, +#reset-button:hover { + background-color: #45a049; +} + +.card-row { + display: flex; + justify-content: center; + margin-bottom: 10px; +} + +.card { + background-color: #2929297e; + border-radius: 5px; + color: white; + font-size: 30px; + width: 90px; + height: 90px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + margin: 5px; + perspective: 1000px; +} + +.card.face-up { + background-color: #707070; + color: #505050; +} + +#scores { + margin: 20px 0; + color: #fff; +} + +#current-player { + color: #fff; + margin: 10px 0; + font-size: 18px; + font-weight: bold; } \ No newline at end of file