create-template-html-css 1.9.0 → 2.0.0

package/{demo-games/snake-game → templates/whack-a-mole}/style.css

@@ -6,7 +6,7 @@
 
 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
     min-height: 100vh;
     display: flex;
     justify-content: center;
@@ -16,7 +16,7 @@ body {
 
 .container {
     width: 100%;
-    max-width: 500px;
+    max-width: 600px;
 }
 
 .game-card {
@@ -33,113 +33,146 @@ body {
     font-size: 2.5rem;
 }
 
-.game-info {
+.game-stats {
     display: flex;
-    justify-content: space-between;
+    justify-content: space-around;
     padding: 15px;
     background: #f3f4f6;
     border-radius: 12px;
     margin-bottom: 20px;
 }
 
-.info-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+.stat {
+    text-align: center;
 }
 
-.label {
+.stat-label {
     font-size: 0.9rem;
     color: #6b7280;
     margin-bottom: 5px;
 }
 
-.value {
-    font-size: 1.3rem;
+.stat-value {
+    font-size: 1.5rem;
     font-weight: bold;
     color: #333;
 }
 
-#gameCanvas {
-    width: 100%;
-    max-width: 400px;
-    height: auto;
-    display: block;
-    margin: 0 auto 20px;
+.difficulty-selector {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 20px;
+    font-weight: 600;
+    color: #555;
+}
+
+#difficulty {
+    padding: 8px 15px;
+    border: 2px solid #e5e7eb;
     border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    font-size: 1rem;
+    cursor: pointer;
+    background: white;
 }
 
-.message {
-    text-align: center;
-    font-size: 1.1rem;
-    font-weight: 600;
-    height: 35px;
+#difficulty:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.game-board {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 15px;
+    margin: 20px 0;
+    padding: 20px;
+    background: #f9fafb;
+    border-radius: 12px;
+}
+
+.hole {
+    aspect-ratio: 1;
+    background: linear-gradient(to bottom, #8b4513 0%, #654321 100%);
+    border-radius: 50% 50% 0 0;
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+    box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.3);
+}
+
+.mole {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    bottom: -100%;
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-bottom: 20px;
-    color: #6b7280;
-    opacity: 0;
-    transition: opacity 0.3s ease;
+    font-size: 3rem;
+    transition: bottom 0.3s ease;
+    user-select: none;
 }
 
-.message.show {
-    opacity: 1;
-    animation: pulse 1.5s ease-in-out infinite;
+.mole.up {
+    bottom: 0;
 }
 
-.message.game-over {
-    color: #ef4444;
-    font-size: 1.2rem;
+.mole.whacked {
+    animation: whack 0.3s ease;
 }
 
-@keyframes pulse {
-    0%, 100% {
-        opacity: 1;
+@keyframes whack {
+    0% {
+        transform: scale(1) rotate(0deg);
     }
     50% {
-        opacity: 0.6;
+        transform: scale(1.2) rotate(10deg);
+    }
+    100% {
+        transform: scale(0.8) rotate(-10deg);
+        bottom: -100%;
     }
 }
 
-.controls {
-    margin-bottom: 20px;
+@keyframes shake {
+    0%, 100% {
+        transform: translateX(0);
+    }
+    25% {
+        transform: translateX(-5px);
+    }
+    75% {
+        transform: translateX(5px);
+    }
 }
 
-.arrow-buttons {
+.message {
+    text-align: center;
+    font-size: 1.2rem;
+    font-weight: bold;
+    height: 35px;
     display: flex;
-    flex-direction: column;
+    justify-content: center;
     align-items: center;
-    gap: 5px;
-}
-
-.arrow-row {
-    display: flex;
-    gap: 5px;
-}
-
-.arrow-btn {
-    width: 60px;
-    height: 60px;
-    border: 2px solid #e5e7eb;
-    border-radius: 8px;
-    background: white;
-    font-size: 1.5rem;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    color: #333;
+    margin-bottom: 20px;
+    color: #10b981;
 }
 
-.arrow-btn:hover {
-    background: #f3f4f6;
-    border-color: #9ca3af;
-    transform: scale(1.05);
+.message.show {
+    animation: slideDown 0.4s ease;
 }
 
-.arrow-btn:active {
-    transform: scale(0.95);
-    background: #e5e7eb;
+@keyframes slideDown {
+    from {
+        transform: translateY(-20px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
 }
 
 .button-group {
@@ -150,7 +183,7 @@ body {
 
 .btn {
     flex: 1;
-    padding: 12px 20px;
+    padding: 12px 24px;
     border: none;
     border-radius: 8px;
     font-size: 1rem;
@@ -184,26 +217,22 @@ body {
     box-shadow: 0 5px 15px rgba(245, 158, 11, 0.4);
 }
 
-.btn-danger {
-    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-    color: white;
-}
-
-.btn-danger:hover:not(:disabled) {
-    transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(239, 68, 68, 0.4);
-}
-
 .instructions {
     background: #f9fafb;
     border-radius: 8px;
     padding: 15px;
-    font-size: 0.9rem;
-    color: #6b7280;
+}
+
+.instructions h3 {
+    color: #333;
+    margin-bottom: 10px;
+    font-size: 1.1rem;
 }
 
 .instructions p {
-    margin-bottom: 8px;
+    color: #6b7280;
+    font-size: 0.9rem;
+    margin-bottom: 5px;
 }
 
 .instructions p:last-child {
@@ -219,28 +248,16 @@ body {
         font-size: 2rem;
     }
     
-    .game-info {
-        flex-direction: column;
-        gap: 10px;
-    }
-    
-    .info-item {
-        flex-direction: row;
-        justify-content: space-between;
-        width: 100%;
+    .mole {
+        font-size: 2rem;
     }
     
-    .arrow-btn {
-        width: 50px;
-        height: 50px;
-        font-size: 1.2rem;
+    .game-board {
+        gap: 10px;
+        padding: 15px;
     }
     
     .button-group {
         flex-direction: column;
     }
-    
-    .instructions {
-        font-size: 0.85rem;
-    }
 }