create-template-html-css 1.8.1 → 2.0.0

package/templates/connect-four/style.css

@@ -0,0 +1,426 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+
+.container {
+    background: white;
+    border-radius: 20px;
+    padding: 30px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    max-width: 700px;
+    width: 100%;
+}
+
+.header {
+    text-align: center;
+    margin-bottom: 25px;
+}
+
+.header h1 {
+    color: #2d3748;
+    font-size: 2.5rem;
+    margin-bottom: 5px;
+}
+
+.subtitle {
+    color: #718096;
+    font-size: 1.1rem;
+}
+
+.game-status {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 20px;
+    margin-bottom: 25px;
+    flex-wrap: wrap;
+}
+
+.player-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    padding: 15px;
+    border-radius: 12px;
+    min-width: 140px;
+}
+
+.player-info.player1 {
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+}
+
+.player-info.player2 {
+    background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
+}
+
+.player-indicator {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: 3px solid white;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+.player1 .player-indicator {
+    background: #FF1744;
+}
+
+.player2 .player-indicator {
+    background: #FFD600;
+}
+
+.player-info span {
+    color: white;
+    font-weight: 600;
+    font-size: 0.9rem;
+}
+
+.score {
+    color: white;
+    font-size: 1.8rem;
+    font-weight: bold;
+}
+
+.current-turn {
+    flex: 1;
+    text-align: center;
+    padding: 15px 25px;
+    background: #f7fafc;
+    border-radius: 12px;
+    border: 3px solid #e2e8f0;
+    min-width: 200px;
+}
+
+#turnIndicator {
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: #2d3748;
+}
+
+.player1-turn {
+    color: #FF1744 !important;
+}
+
+.player2-turn {
+    color: #FFD600 !important;
+}
+
+.message {
+    animation: pulse 1s ease-in-out;
+}
+
+.message.player1 {
+    color: #FF1744 !important;
+}
+
+.message.player2 {
+    color: #FFD600 !important;
+}
+
+.message.draw {
+    color: #667eea !important;
+}
+
+.game-board-container {
+    margin-bottom: 25px;
+    display: flex;
+    justify-content: center;
+}
+
+.game-board {
+    display: flex;
+    gap: 8px;
+    padding: 20px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 15px;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
+}
+
+.column {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    cursor: pointer;
+    transition: transform 0.2s ease;
+}
+
+.column.hover {
+    transform: translateY(-5px);
+}
+
+.cell {
+    width: 60px;
+    height: 60px;
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 50%;
+    padding: 4px;
+    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.disc {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: transparent;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+}
+
+.disc.player1 {
+    background: radial-gradient(circle at 30% 30%, #FF4569, #FF1744);
+}
+
+.disc.player2 {
+    background: radial-gradient(circle at 30% 30%, #FFEB3B, #FFD600);
+}
+
+.disc.dropping {
+    animation: drop 0.5s cubic-bezier(0.5, 0, 0.5, 1);
+}
+
+.disc.winning {
+    animation: winning 0.6s ease-in-out infinite;
+}
+
+@keyframes drop {
+    from {
+        transform: translateY(calc(-1 * var(--drop-distance)));
+    }
+    to {
+        transform: translateY(0);
+    }
+}
+
+@keyframes winning {
+    0%, 100% {
+        transform: scale(1);
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+    }
+    50% {
+        transform: scale(1.15);
+        box-shadow: 0 0 25px rgba(255, 255, 255, 0.8);
+    }
+}
+
+@keyframes pulse {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.1);
+    }
+}
+
+.controls {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    margin-bottom: 20px;
+}
+
+.mode-selector {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+
+.mode-selector label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 20px;
+    background: #f7fafc;
+    border: 2px solid #e2e8f0;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.mode-selector label:hover {
+    background: #edf2f7;
+    border-color: #667eea;
+}
+
+.mode-selector input[type="radio"] {
+    cursor: pointer;
+}
+
+.mode-selector input[type="radio"]:checked + span {
+    color: #667eea;
+    font-weight: bold;
+}
+
+.difficulty-selector {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+}
+
+.difficulty-selector label {
+    font-weight: 600;
+    color: #2d3748;
+}
+
+.difficulty-selector select {
+    padding: 8px 15px;
+    border: 2px solid #e2e8f0;
+    border-radius: 8px;
+    background: white;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: border-color 0.3s ease;
+}
+
+.difficulty-selector select:focus {
+    outline: none;
+    border-color: #667eea;
+}
+
+.game-controls {
+    display: flex;
+    gap: 15px;
+    justify-content: center;
+    margin-bottom: 25px;
+    flex-wrap: wrap;
+}
+
+.btn {
+    padding: 12px 30px;
+    font-size: 1rem;
+    font-weight: 600;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+    min-width: 140px;
+}
+
+.btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+}
+
+.btn:active {
+    transform: translateY(0);
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+}
+
+.btn-secondary {
+    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+    color: white;
+}
+
+.instructions {
+    background: #f7fafc;
+    padding: 20px;
+    border-radius: 10px;
+    border: 2px solid #e2e8f0;
+}
+
+.instructions h3 {
+    color: #2d3748;
+    margin-bottom: 12px;
+    font-size: 1.1rem;
+}
+
+.instructions ul {
+    list-style: none;
+    padding-right: 0;
+}
+
+.instructions li {
+    color: #4a5568;
+    margin-bottom: 8px;
+    padding-right: 20px;
+    position: relative;
+    line-height: 1.6;
+}
+
+.instructions li:before {
+    content: "•";
+    color: #667eea;
+    font-weight: bold;
+    position: absolute;
+    right: 0;
+    font-size: 1.2rem;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .container {
+        padding: 20px;
+    }
+
+    .header h1 {
+        font-size: 2rem;
+    }
+
+    .game-status {
+        flex-direction: column;
+    }
+
+    .player-info {
+        min-width: unset;
+        width: 100%;
+    }
+
+    .cell {
+        width: 45px;
+        height: 45px;
+    }
+
+    .game-board {
+        gap: 6px;
+        padding: 15px;
+    }
+
+    .btn {
+        padding: 10px 20px;
+        min-width: 120px;
+        font-size: 0.9rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .header h1 {
+        font-size: 1.5rem;
+    }
+
+    .cell {
+        width: 38px;
+        height: 38px;
+    }
+
+    .game-board {
+        gap: 4px;
+        padding: 12px;
+    }
+
+    .score {
+        font-size: 1.5rem;
+    }
+
+    #turnIndicator {
+        font-size: 1rem;
+    }
+}

package/templates/dice-game/index.html

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dice Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🎲 Dice Game</h1>
+            <p class="subtitle">Be the first to reach 100 points!</p>
+        </div>
+
+        <div class="game-mode">
+            <button class="mode-btn active" data-mode="pvp">👥 Player vs Player</button>
+            <button class="mode-btn" data-mode="pvc">🤖 vs Computer</button>
+        </div>
+
+        <div class="players-section">
+            <!-- Player 1 -->
+            <div class="player-card player1-card active" id="player1Card">
+                <div class="player-header">
+                    <h3>👤 Player 1</h3>
+                    <div class="current-turn">Your turn!</div>
+                </div>
+                <div class="player-stats">
+                    <div class="stat">
+                        <span class="stat-label">Total Score:</span>
+                        <span id="player1Total" class="stat-value">0</span>
+                    </div>
+                    <div class="stat">
+                        <span class="stat-label">Current Turn:</span>
+                        <span id="player1Current" class="stat-value">0</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Player 2 -->
+            <div class="player-card player2-card" id="player2Card">
+                <div class="player-header">
+                    <h3>👤 Player 2</h3>
+                    <div class="current-turn">Waiting...</div>
+                </div>
+                <div class="player-stats">
+                    <div class="stat">
+                        <span class="stat-label">Total Score:</span>
+                        <span id="player2Total" class="stat-value">0</span>
+                    </div>
+                    <div class="stat">
+                        <span class="stat-label">Current Turn:</span>
+                        <span id="player2Current" class="stat-value">0</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="dice-container">
+            <div class="dice" id="dice">
+                <div class="dice-face">
+                    <span class="dot"></span>
+                </div>
+            </div>
+        </div>
+
+        <div class="controls">
+            <button id="rollBtn" class="btn btn-roll">
+                <span class="btn-icon">🎲</span>
+                Roll Dice
+            </button>
+            <button id="holdBtn" class="btn btn-hold">
+                <span class="btn-icon">✋</span>
+                Hold
+            </button>
+            <button id="newGameBtn" class="btn btn-new">
+                <span class="btn-icon">🔄</span>
+                New Game
+            </button>
+        </div>
+
+        <div id="resultMessage" class="result-message"></div>
+
+        <div class="instructions">
+            <h3>📖 Game Rules:</h3>
+            <ul>
+                <li>Each player takes turns rolling the dice as many times as they want</li>
+                <li>Score accumulates in the current turn</li>
+                <li>If the dice shows 1 - you lose all turn score!</li>
+                <li>Click "Hold" to add the score to your total</li>
+                <li>First player to reach 100 wins!</li>
+                <li>Strategy: When to take risks and when to hold?</li>
+            </ul>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>