create-template-html-css 1.8.1 → 2.0.0

package/templates/memory-game/script.js

@@ -0,0 +1,216 @@
+// Memory Game Logic
+
+const memoryBoard = document.getElementById('memoryBoard');
+const movesDisplay = document.getElementById('moves');
+const timerDisplay = document.getElementById('timer');
+const matchesDisplay = document.getElementById('matches');
+const messageDisplay = document.getElementById('message');
+const resetBtn = document.getElementById('resetBtn');
+const difficultyBtn = document.getElementById('difficultyBtn');
+const difficultySelector = document.getElementById('difficultySelector');
+const difficultyBtns = document.querySelectorAll('.difficulty-btn');
+
+// Game symbols
+const symbols = ['🎮', '🎯', '🎨', '🎭', '🎪', '🎬', '🎸', '🎺', '⚽', '🏀', '🎾', '🏈'];
+
+let difficulty = 'easy';
+let cards = [];
+let flippedCards = [];
+let matchedPairs = 0;
+let moves = 0;
+let timer = 0;
+let timerInterval = null;
+let canFlip = true;
+
+// Difficulty settings
+const difficultySettings = {
+    easy: { pairs: 8, gridCols: 4 },
+    medium: { pairs: 10, gridCols: 5 },
+    hard: { pairs: 12, gridCols: 6 }
+};
+
+// Initialize game
+function initGame() {
+    clearInterval(timerInterval);
+    const settings = difficultySettings[difficulty];
+    const pairsCount = settings.pairs;
+    
+    // Reset stats
+    moves = 0;
+    matchedPairs = 0;
+    timer = 0;
+    flippedCards = [];
+    canFlip = true;
+    
+    updateStats();
+    messageDisplay.textContent = '';
+    messageDisplay.className = 'message';
+    
+    // Create card deck
+    const selectedSymbols = symbols.slice(0, pairsCount);
+    const cardSymbols = [...selectedSymbols, ...selectedSymbols];
+    shuffleArray(cardSymbols);
+    
+    // Create board
+    memoryBoard.innerHTML = '';
+    memoryBoard.style.gridTemplateColumns = `repeat(${settings.gridCols}, 1fr)`;
+    
+    cards = cardSymbols.map((symbol, index) => {
+        const card = document.createElement('div');
+        card.className = 'memory-card';
+        card.dataset.symbol = symbol;
+        card.dataset.index = index;
+        
+        card.innerHTML = `
+            <div class="card-inner">
+                <div class="card-front">?</div>
+                <div class="card-back">${symbol}</div>
+            </div>
+        `;
+        
+        card.addEventListener('click', () => handleCardClick(card));
+        memoryBoard.appendChild(card);
+        
+        return card;
+    });
+    
+    // Start timer on first click
+    let firstClick = true;
+    cards.forEach(card => {
+        card.addEventListener('click', () => {
+            if (firstClick) {
+                startTimer();
+                firstClick = false;
+            }
+        }, { once: true });
+    });
+}
+
+// Handle card click
+function handleCardClick(card) {
+    if (!canFlip || card.classList.contains('flipped') || card.classList.contains('matched')) {
+        return;
+    }
+    
+    // Flip card
+    card.classList.add('flipped');
+    flippedCards.push(card);
+    
+    // Check if two cards are flipped
+    if (flippedCards.length === 2) {
+        canFlip = false;
+        moves++;
+        updateStats();
+        
+        setTimeout(() => checkMatch(), 800);
+    }
+}
+
+// Check if cards match
+function checkMatch() {
+    const [card1, card2] = flippedCards;
+    const symbol1 = card1.dataset.symbol;
+    const symbol2 = card2.dataset.symbol;
+    
+    if (symbol1 === symbol2) {
+        // Match found
+        card1.classList.add('matched');
+        card2.classList.add('matched');
+        matchedPairs++;
+        updateStats();
+        
+        // Check if game is won
+        if (matchedPairs === difficultySettings[difficulty].pairs) {
+            handleWin();
+        }
+    } else {
+        // No match - flip back
+        setTimeout(() => {
+            card1.classList.remove('flipped');
+            card2.classList.remove('flipped');
+        }, 400);
+    }
+    
+    flippedCards = [];
+    canFlip = true;
+}
+
+// Handle win
+function handleWin() {
+    clearInterval(timerInterval);
+    messageDisplay.textContent = `🎉 You Won! Time: ${formatTime(timer)}, Moves: ${moves}`;
+    messageDisplay.className = 'message show win';
+    
+    // Celebration animation
+    cards.forEach((card, index) => {
+        setTimeout(() => {
+            card.style.animation = 'bounce 0.5s ease';
+        }, index * 50);
+    });
+}
+
+// Start timer
+function startTimer() {
+    timerInterval = setInterval(() => {
+        timer++;
+        updateStats();
+    }, 1000);
+}
+
+// Update stats display
+function updateStats() {
+    movesDisplay.textContent = moves;
+    timerDisplay.textContent = formatTime(timer);
+    matchesDisplay.textContent = `${matchedPairs}/${difficultySettings[difficulty].pairs}`;
+}
+
+// Format time
+function formatTime(seconds) {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+}
+
+// Shuffle array
+function shuffleArray(array) {
+    for (let i = array.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [array[i], array[j]] = [array[j], array[i]];
+    }
+}
+
+// Toggle difficulty selector
+function toggleDifficultySelector() {
+    difficultySelector.classList.toggle('show');
+}
+
+// Change difficulty
+function changeDifficulty(newDifficulty) {
+    difficulty = newDifficulty;
+    
+    // Update active button
+    difficultyBtns.forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.difficulty === difficulty);
+    });
+    
+    difficultySelector.classList.remove('show');
+    initGame();
+}
+
+// Event listeners
+resetBtn.addEventListener('click', initGame);
+difficultyBtn.addEventListener('click', toggleDifficultySelector);
+
+difficultyBtns.forEach(btn => {
+    btn.addEventListener('click', () => changeDifficulty(btn.dataset.difficulty));
+});
+
+// Close difficulty selector when clicking outside
+document.addEventListener('click', (e) => {
+    if (!e.target.closest('.difficulty-selector') && !e.target.closest('#difficultyBtn')) {
+        difficultySelector.classList.remove('show');
+    }
+});
+
+// Initialize on load
+initGame();

package/templates/memory-game/style.css

@@ -0,0 +1,288 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+
+.container {
+    width: 100%;
+    max-width: 700px;
+}
+
+.game-card {
+    background: white;
+    border-radius: 16px;
+    padding: 30px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    position: relative;
+}
+
+.game-card h1 {
+    text-align: center;
+    color: #333;
+    margin-bottom: 20px;
+    font-size: 2.5rem;
+}
+
+.game-stats {
+    display: flex;
+    justify-content: space-around;
+    padding: 15px;
+    background: #f3f4f6;
+    border-radius: 12px;
+    margin-bottom: 20px;
+}
+
+.stat {
+    text-align: center;
+}
+
+.stat-label {
+    display: block;
+    font-size: 0.9rem;
+    color: #6b7280;
+    margin-bottom: 5px;
+}
+
+.stat-value {
+    display: block;
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: #333;
+}
+
+.memory-board {
+    display: grid;
+    gap: 10px;
+    margin: 20px 0;
+    padding: 10px;
+    background: #f9fafb;
+    border-radius: 12px;
+}
+
+.memory-card {
+    aspect-ratio: 1;
+    cursor: pointer;
+    perspective: 1000px;
+}
+
+.card-inner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    transition: transform 0.6s;
+    transform-style: preserve-3d;
+}
+
+.memory-card.flipped .card-inner {
+    transform: rotateY(180deg);
+}
+
+.card-front,
+.card-back {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 12px;
+    font-size: 2.5rem;
+    font-weight: bold;
+}
+
+.card-front {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+}
+
+.card-back {
+    background: white;
+    border: 3px solid #e5e7eb;
+    transform: rotateY(180deg);
+}
+
+.memory-card:not(.flipped):not(.matched):hover .card-inner {
+    transform: scale(1.05);
+}
+
+.memory-card.matched .card-back {
+    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    border-color: #10b981;
+    animation: matchPulse 0.5s ease;
+}
+
+@keyframes matchPulse {
+    0%, 100% {
+        transform: rotateY(180deg) scale(1);
+    }
+    50% {
+        transform: rotateY(180deg) scale(1.1);
+    }
+}
+
+@keyframes bounce {
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-10px);
+    }
+}
+
+.message {
+    text-align: center;
+    font-size: 1.2rem;
+    font-weight: bold;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 20px;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.message.show {
+    opacity: 1;
+    animation: slideDown 0.4s ease;
+}
+
+.message.win {
+    color: #10b981;
+}
+
+@keyframes slideDown {
+    from {
+        transform: translateY(-20px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+.button-group {
+    display: flex;
+    gap: 10px;
+    justify-content: center;
+}
+
+.btn {
+    flex: 1;
+    padding: 12px 24px;
+    border: none;
+    border-radius: 8px;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+}
+
+.btn-secondary {
+    background: #6b7280;
+    color: white;
+}
+
+.btn-secondary:hover {
+    background: #4b5563;
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(107, 114, 128, 0.4);
+}
+
+.difficulty-selector {
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    background: white;
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+    margin-top: 10px;
+    z-index: 10;
+    opacity: 0;
+    pointer-events: none;
+    transition: all 0.3s ease;
+}
+
+.difficulty-selector.show {
+    opacity: 1;
+    pointer-events: all;
+}
+
+.difficulty-selector h3 {
+    margin-bottom: 15px;
+    color: #333;
+    text-align: center;
+}
+
+.difficulty-options {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.difficulty-btn {
+    padding: 12px 20px;
+    border: 2px solid #e5e7eb;
+    border-radius: 8px;
+    background: white;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    color: #333;
+}
+
+.difficulty-btn:hover {
+    border-color: #667eea;
+    background: #f3f4f6;
+}
+
+.difficulty-btn.active {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border-color: #667eea;
+}
+
+@media (max-width: 600px) {
+    .game-card {
+        padding: 20px;
+    }
+    
+    .game-card h1 {
+        font-size: 2rem;
+    }
+    
+    .card-front,
+    .card-back {
+        font-size: 1.5rem;
+    }
+    
+    .button-group {
+        flex-direction: column;
+    }
+}

package/templates/pong/index.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pong</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🕹️ Pong</h1>
+            <p class="subtitle">The classic game!</p>
+        </div>
+
+        <div class="game-mode">
+            <button class="mode-btn active" data-mode="pvc">🤖 vs Computer</button>
+            <button class="mode-btn" data-mode="pvp">👥 Two Players</button>
+        </div>
+
+        <div class="difficulty-selector">
+            <label>Difficulty:</label>
+            <select id="difficulty">
+                <option value="easy">Easy</option>
+                <option value="medium" selected>Medium</option>
+                <option value="hard">Hard</option>
+                <option value="impossible">Impossible</option>
+            </select>
+        </div>
+
+        <div class="score-board">
+            <div class="player-score">
+                <h3>👤 Player 1</h3>
+                <div id="player1Score" class="score">0</div>
+            </div>
+            <div class="divider">:</div>
+            <div class="player-score">
+                <h3 id="player2Name">🤖 Computer</h3>
+                <div id="player2Score" class="score">0</div>
+            </div>
+        </div>
+
+        <canvas id="gameCanvas"></canvas>
+
+        <div class="controls">
+            <button id="startBtn" class="btn btn-primary">Start Game</button>
+            <button id="pauseBtn" class="btn btn-secondary" disabled>Pause</button>
+            <button id="resetBtn" class="btn btn-danger">Reset</button>
+        </div>
+
+        <div id="resultMessage" class="result-message"></div>
+
+        <div class="instructions">
+            <h3>🎮 Game Instructions:</h3>
+            <div class="controls-grid">
+                <div class="control-item">
+                    <strong>Player 1:</strong>
+                    <div class="keys">
+                        <span class="key">W</span>
+                        <span>Up</span>
+                    </div>
+                    <div class="keys">
+                        <span class="key">S</span>
+                        <span>Down</span>
+                    </div>
+                </div>
+                <div class="control-item">
+                    <strong>Player 2:</strong>
+                    <div class="keys">
+                        <span class="key">↑</span>
+                        <span>Up</span>
+                    </div>
+                    <div class="keys">
+                        <span class="key">↓</span>
+                        <span>Down</span>
+                    </div>
+                </div>
+            </div>
+            <ul class="rules">
+                <li>Goal: Return the ball and score</li>
+                <li>Each goal scored = +1 point</li>
+                <li>First to 10 points wins!</li>
+                <li>Speed increases as the ball is returned</li>
+            </ul>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>