npm - create-template-html-css - Versions diffs - 1.8.1 → 2.0.0 - Mend

create-template-html-css 1.8.1 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (55) hide show

package/CHANGELOG.md +80 -0
package/README.md +179 -2
package/bin/cli.js +20 -2
package/package.json +1 -1
package/templates/blackjack/index.html +97 -0
package/templates/blackjack/script.js +381 -0
package/templates/blackjack/style.css +452 -0
package/templates/breakout/index.html +56 -0
package/templates/breakout/script.js +387 -0
package/templates/breakout/style.css +239 -0
package/templates/connect-four/index.html +78 -0
package/templates/connect-four/script.js +413 -0
package/templates/connect-four/style.css +426 -0
package/templates/dice-game/index.html +99 -0
package/templates/dice-game/script.js +291 -0
package/templates/dice-game/style.css +403 -0
package/templates/flappy-bird/index.html +47 -0
package/templates/flappy-bird/script.js +394 -0
package/templates/flappy-bird/style.css +243 -0
package/templates/game-2048/index.html +59 -0
package/templates/game-2048/script.js +269 -0
package/templates/game-2048/style.css +281 -0
package/templates/guess-number/index.html +71 -0
package/templates/guess-number/script.js +216 -0
package/templates/guess-number/style.css +337 -0
package/templates/memory-game/index.html +50 -0
package/templates/memory-game/script.js +216 -0
package/templates/memory-game/style.css +288 -0
package/templates/pong/index.html +90 -0
package/templates/pong/script.js +364 -0
package/templates/pong/style.css +371 -0
package/templates/rock-paper-scissors/index.html +84 -0
package/templates/rock-paper-scissors/script.js +199 -0
package/templates/rock-paper-scissors/style.css +295 -0
package/templates/simon-says/index.html +64 -0
package/templates/simon-says/script.js +206 -0
package/templates/simon-says/style.css +250 -0
package/templates/slot-machine/index.html +112 -0
package/templates/slot-machine/script.js +238 -0
package/templates/slot-machine/style.css +464 -0
package/templates/snake-game/index.html +61 -0
package/templates/snake-game/script.js +360 -0
package/templates/snake-game/style.css +246 -0
package/templates/tetris/index.html +84 -0
package/templates/tetris/script.js +447 -0
package/templates/tetris/style.css +286 -0
package/templates/tic-tac-toe/index.html +57 -0
package/templates/tic-tac-toe/script.js +156 -0
package/templates/tic-tac-toe/style.css +244 -0
package/templates/whack-a-mole/index.html +85 -0
package/templates/whack-a-mole/script.js +172 -0
package/templates/whack-a-mole/style.css +263 -0
package/COMPONENTS-GALLERY.html +0 -773
package/PUBLISH-GUIDE.md +0 -112
package/create-template-html-css-1.8.0.tgz +0 -0

package/templates/game-2048/index.html ADDED Viewed

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{name}} - 2048 Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="game-card">
+            <div class="header">
+                <h1>2048</h1>
+                <div class="scores">
+                    <div class="score-box">
+                        <div class="score-label">Score</div>
+                        <div id="score" class="score-value">0</div>
+                    </div>
+                    <div class="score-box">
+                        <div class="score-label">Best</div>
+                        <div id="bestScore" class="score-value">0</div>
+                    </div>
+                </div>
+            </div>
+            <div class="game-intro">
+                <p><strong>How to play:</strong> Use arrow keys to move tiles. Tiles with the same number merge into one when they touch. Add them up to reach <strong>2048!</strong></p>
+            </div>
+            <div class="game-container">
+                <div class="grid-container" id="grid"></div>
+                <div class="game-message" id="gameMessage">
+                    <div class="message-content">
+                        <p id="messageText"></p>
+                        <button id="retryBtn" class="btn btn-retry">Try Again</button>
+                    </div>
+                </div>
+            </div>
+            <div class="button-group">
+                <button id="newGameBtn" class="btn btn-primary">New Game</button>
+                <button id="undoBtn" class="btn btn-secondary" disabled>Undo</button>
+            </div>
+            <div class="mobile-controls">
+                <div class="control-row">
+                    <button class="control-btn" id="upBtn">↑</button>
+                </div>
+                <div class="control-row">
+                    <button class="control-btn" id="leftBtn">←</button>
+                    <button class="control-btn" id="downBtn">↓</button>
+                    <button class="control-btn" id="rightBtn">→</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

package/templates/game-2048/script.js ADDED Viewed

@@ -0,0 +1,269 @@
+// 2048 Game Logic
+const grid = document.getElementById('grid');
+const scoreDisplay = document.getElementById('score');
+const bestScoreDisplay = document.getElementById('bestScore');
+const newGameBtn = document.getElementById('newGameBtn');
+const undoBtn = document.getElementById('undoBtn');
+const retryBtn = document.getElementById('retryBtn');
+const gameMessage = document.getElementById('gameMessage');
+const messageText = document.getElementById('messageText');
+// Mobile controls
+const upBtn = document.getElementById('upBtn');
+const downBtn = document.getElementById('downBtn');
+const leftBtn = document.getElementById('leftBtn');
+const rightBtn = document.getElementById('rightBtn');
+const GRID_SIZE = 4;
+let board = [];
+let score = 0;
+let bestScore = localStorage.getItem('2048BestScore') || 0;
+let previousState = null;
+// Initialize game
+function initGame() {
+    board = Array(GRID_SIZE).fill().map(() => Array(GRID_SIZE).fill(0));
+    score = 0;
+    previousState = null;
+    updateScore();
+    hideMessage();
+    addRandomTile();
+    addRandomTile();
+    renderBoard();
+    undoBtn.disabled = true;
+}
+// Add random tile (2 or 4)
+function addRandomTile() {
+    const emptyCells = [];
+    for (let i = 0; i < GRID_SIZE; i++) {
+        for (let j = 0; j < GRID_SIZE; j++) {
+            if (board[i][j] === 0) {
+                emptyCells.push({ row: i, col: j });
+            }
+        }
+    }
+    if (emptyCells.length > 0) {
+        const { row, col } = emptyCells[Math.floor(Math.random() * emptyCells.length)];
+        board[row][col] = Math.random() < 0.9 ? 2 : 4;
+    }
+}
+// Render board
+function renderBoard() {
+    grid.innerHTML = '';
+    for (let i = 0; i < GRID_SIZE; i++) {
+        for (let j = 0; j < GRID_SIZE; j++) {
+            const tile = document.createElement('div');
+            tile.className = 'tile';
+            const value = board[i][j];
+            if (value !== 0) {
+                tile.textContent = value;
+                tile.classList.add(`tile-${value}`);
+                tile.classList.add('tile-new');
+            }
+            grid.appendChild(tile);
+        }
+    }
+}
+// Update score
+function updateScore() {
+    scoreDisplay.textContent = score;
+    if (score > bestScore) {
+        bestScore = score;
+        localStorage.setItem('2048BestScore', bestScore);
+    }
+    bestScoreDisplay.textContent = bestScore;
+}
+// Save state for undo
+function saveState() {
+    previousState = {
+        board: board.map(row => [...row]),
+        score: score
+    };
+    undoBtn.disabled = false;
+}
+// Undo move
+function undo() {
+    if (previousState) {
+        board = previousState.board.map(row => [...row]);
+        score = previousState.score;
+        updateScore();
+        renderBoard();
+        hideMessage();
+        previousState = null;
+        undoBtn.disabled = true;
+    }
+}
+// Move tiles
+function move(direction) {
+    saveState();
+    let moved = false;
+    if (direction === 'left' || direction === 'right') {
+        for (let i = 0; i < GRID_SIZE; i++) {
+            const row = board[i];
+            const newRow = direction === 'left' ? mergeLine(row) : mergeLine(row.reverse()).reverse();
+            if (JSON.stringify(row) !== JSON.stringify(newRow)) {
+                moved = true;
+            }
+            board[i] = newRow;
+        }
+    } else {
+        // Transpose for up/down
+        const transposed = transpose(board);
+        for (let i = 0; i < GRID_SIZE; i++) {
+            const row = transposed[i];
+            const newRow = direction === 'up' ? mergeLine(row) : mergeLine(row.reverse()).reverse();
+            if (JSON.stringify(row) !== JSON.stringify(newRow)) {
+                moved = true;
+            }
+            transposed[i] = newRow;
+        }
+        board = transpose(transposed);
+    }
+    if (moved) {
+        addRandomTile();
+        renderBoard();
+        updateScore();
+        if (checkWin()) {
+            showMessage('You Win! 🎉', true);
+        } else if (checkGameOver()) {
+            showMessage('Game Over! 😢', false);
+        }
+    } else {
+        // Revert if no move was made
+        previousState = null;
+        undoBtn.disabled = true;
+    }
+}
+// Merge line (left direction)
+function mergeLine(line) {
+    // Remove zeros
+    let newLine = line.filter(val => val !== 0);
+    // Merge same values
+    for (let i = 0; i < newLine.length - 1; i++) {
+        if (newLine[i] === newLine[i + 1]) {
+            newLine[i] *= 2;
+            score += newLine[i];
+            newLine.splice(i + 1, 1);
+        }
+    }
+    // Fill with zeros
+    while (newLine.length < GRID_SIZE) {
+        newLine.push(0);
+    }
+    return newLine;
+}
+// Transpose matrix
+function transpose(matrix) {
+    return matrix[0].map((_, colIndex) => matrix.map(row => row[colIndex]));
+}
+// Check if won (reached 2048)
+function checkWin() {
+    for (let i = 0; i < GRID_SIZE; i++) {
+        for (let j = 0; j < GRID_SIZE; j++) {
+            if (board[i][j] === 2048) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+// Check if game over
+function checkGameOver() {
+    // Check for empty cells
+    for (let i = 0; i < GRID_SIZE; i++) {
+        for (let j = 0; j < GRID_SIZE; j++) {
+            if (board[i][j] === 0) {
+                return false;
+            }
+        }
+    }
+    // Check for possible merges
+    for (let i = 0; i < GRID_SIZE; i++) {
+        for (let j = 0; j < GRID_SIZE; j++) {
+            const current = board[i][j];
+            if ((j < GRID_SIZE - 1 && current === board[i][j + 1]) ||
+                (i < GRID_SIZE - 1 && current === board[i + 1][j])) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+// Show message
+function showMessage(text, isWin) {
+    messageText.textContent = text;
+    gameMessage.classList.add('show');
+    gameMessage.classList.toggle('win', isWin);
+}
+// Hide message
+function hideMessage() {
+    gameMessage.classList.remove('show', 'win');
+}
+// Keyboard controls
+document.addEventListener('keydown', (e) => {
+    if (gameMessage.classList.contains('show')) return;
+    switch (e.key) {
+        case 'ArrowUp':
+            e.preventDefault();
+            move('up');
+            break;
+        case 'ArrowDown':
+            e.preventDefault();
+            move('down');
+            break;
+        case 'ArrowLeft':
+            e.preventDefault();
+            move('left');
+            break;
+        case 'ArrowRight':
+            e.preventDefault();
+            move('right');
+            break;
+    }
+});
+// Button controls
+upBtn.addEventListener('click', () => move('up'));
+downBtn.addEventListener('click', () => move('down'));
+leftBtn.addEventListener('click', () => move('left'));
+rightBtn.addEventListener('click', () => move('right'));
+newGameBtn.addEventListener('click', initGame);
+retryBtn.addEventListener('click', () => {
+    hideMessage();
+    initGame();
+});
+undoBtn.addEventListener('click', undo);
+// Initialize on load
+bestScoreDisplay.textContent = bestScore;
+initGame();

package/templates/game-2048/style.css ADDED Viewed

@@ -0,0 +1,281 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #fad0c4 0%, #ffd1ff 100%);
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+.container {
+    width: 100%;
+    max-width: 500px;
+}
+.game-card {
+    background: white;
+    border-radius: 16px;
+    padding: 30px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+.header h1 {
+    font-size: 3rem;
+    color: #776e65;
+    font-weight: bold;
+}
+.scores {
+    display: flex;
+    gap: 10px;
+}
+.score-box {
+    background: #bbada0;
+    border-radius: 8px;
+    padding: 10px 20px;
+    text-align: center;
+    min-width: 80px;
+}
+.score-label {
+    color: #eee4da;
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    font-weight: bold;
+}
+.score-value {
+    color: white;
+    font-size: 1.5rem;
+    font-weight: bold;
+}
+.game-intro {
+    background: #eee4da;
+    border-radius: 8px;
+    padding: 15px;
+    margin-bottom: 20px;
+    color: #776e65;
+    font-size: 0.9rem;
+    line-height: 1.5;
+}
+.game-container {
+    position: relative;
+    margin-bottom: 20px;
+}
+.grid-container {
+    background: #bbada0;
+    border-radius: 8px;
+    padding: 10px;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+}
+.tile {
+    aspect-ratio: 1;
+    background: rgba(238, 228, 218, 0.35);
+    border-radius: 4px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 2rem;
+    font-weight: bold;
+    color: #776e65;
+    transition: all 0.15s ease;
+}
+.tile-new {
+    animation: appear 0.2s ease;
+}
+@keyframes appear {
+    0% {
+        transform: scale(0);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+.tile-2 { background: #eee4da; color: #776e65; }
+.tile-4 { background: #ede0c8; color: #776e65; }
+.tile-8 { background: #f2b179; color: #f9f6f2; }
+.tile-16 { background: #f59563; color: #f9f6f2; }
+.tile-32 { background: #f67c5f; color: #f9f6f2; }
+.tile-64 { background: #f65e3b; color: #f9f6f2; }
+.tile-128 { background: #edcf72; color: #f9f6f2; font-size: 1.6rem; }
+.tile-256 { background: #edcc61; color: #f9f6f2; font-size: 1.6rem; }
+.tile-512 { background: #edc850; color: #f9f6f2; font-size: 1.6rem; }
+.tile-1024 { background: #edc53f; color: #f9f6f2; font-size: 1.3rem; }
+.tile-2048 { background: #edc22e; color: #f9f6f2; font-size: 1.3rem; }
+.game-message {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(238, 228, 218, 0.95);
+    border-radius: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+}
+.game-message.show {
+    opacity: 1;
+    pointer-events: all;
+}
+.message-content {
+    text-align: center;
+}
+#messageText {
+    font-size: 2rem;
+    font-weight: bold;
+    color: #776e65;
+    margin-bottom: 20px;
+}
+.game-message.win #messageText {
+    color: #f67c5f;
+}
+.button-group {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+.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:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+.btn-primary {
+    background: #8f7a66;
+    color: white;
+}
+.btn-primary:hover:not(:disabled) {
+    background: #9f8a76;
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(143, 122, 102, 0.4);
+}
+.btn-secondary {
+    background: #bbada0;
+    color: white;
+}
+.btn-secondary:hover:not(:disabled) {
+    background: #a89c94;
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(187, 173, 160, 0.4);
+}
+.btn-retry {
+    background: #f67c5f;
+    color: white;
+    padding: 12px 30px;
+}
+.btn-retry:hover {
+    background: #f65e3b;
+    transform: scale(1.05);
+}
+.mobile-controls {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+}
+.control-row {
+    display: flex;
+    gap: 8px;
+}
+.control-btn {
+    width: 60px;
+    height: 60px;
+    border: 2px solid #bbada0;
+    border-radius: 8px;
+    background: white;
+    font-size: 1.5rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    color: #776e65;
+}
+.control-btn:hover {
+    background: #eee4da;
+    transform: scale(1.05);
+}
+.control-btn:active {
+    transform: scale(0.95);
+}
+@media (max-width: 480px) {
+    .game-card {
+        padding: 20px;
+    }
+    .header h1 {
+        font-size: 2rem;
+    }
+    .tile {
+        font-size: 1.5rem;
+    }
+    .tile-128,
+    .tile-256,
+    .tile-512 {
+        font-size: 1.2rem;
+    }
+    .tile-1024,
+    .tile-2048 {
+        font-size: 1rem;
+    }
+    #messageText {
+        font-size: 1.5rem;
+    }
+}

package/templates/guess-number/index.html ADDED Viewed

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{name}} - Guess Number</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="game-card">
+            <h1>🎯 Guess the Number</h1>
+            <div class="game-info">
+                <div class="info-row">
+                    <span class="label">Range:</span>
+                    <span id="rangeDisplay" class="value">1 - 100</span>
+                </div>
+                <div class="info-row">
+                    <span class="label">Attempts:</span>
+                    <span id="attempts" class="value">0</span>
+                </div>
+                <div class="info-row">
+                    <span class="label">Best Score:</span>
+                    <span id="bestScore" class="value">-</span>
+                </div>
+            </div>
+            <div class="hint-section">
+                <div class="hint-box" id="hintBox">
+                    <p id="hintText">I'm thinking of a number...</p>
+                    <p id="hintDetails">Make your first guess!</p>
+                </div>
+            </div>
+            <div class="input-section">
+                <input
+                    type="number"
+                    id="guessInput"
+                    placeholder="Enter your guess"
+                    min="1"
+                    max="100"
+                />
+                <button id="guessBtn" class="btn btn-primary">Guess</button>
+            </div>
+            <div class="history-section">
+                <h3>Previous Guesses</h3>
+                <div id="guessHistory" class="guess-history">
+                    <p class="empty-state">No guesses yet</p>
+                </div>
+            </div>
+            <div class="difficulty-section">
+                <h3>Difficulty</h3>
+                <div class="difficulty-buttons">
+                    <button class="difficulty-btn active" data-range="100">Easy (1-100)</button>
+                    <button class="difficulty-btn" data-range="500">Medium (1-500)</button>
+                    <button class="difficulty-btn" data-range="1000">Hard (1-1000)</button>
+                </div>
+            </div>
+            <div class="button-group">
+                <button id="newGameBtn" class="btn btn-success">New Game</button>
+                <button id="giveUpBtn" class="btn btn-secondary">Give Up</button>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>