create-template-html-css 1.8.1 → 1.9.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.
- package/bin/cli.js +7 -1
- package/demo-games/guess-number/index.html +71 -0
- package/demo-games/guess-number/script.js +216 -0
- package/demo-games/guess-number/style.css +337 -0
- package/demo-games/memory-game/index.html +50 -0
- package/demo-games/memory-game/script.js +216 -0
- package/demo-games/memory-game/style.css +288 -0
- package/demo-games/snake-game/index.html +61 -0
- package/demo-games/snake-game/script.js +360 -0
- package/demo-games/snake-game/style.css +246 -0
- package/demo-games/tic-tac-toe/index.html +57 -0
- package/demo-games/tic-tac-toe/script.js +156 -0
- package/demo-games/tic-tac-toe/style.css +244 -0
- package/package.json +1 -1
- 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/snake-game/index.html +61 -0
- package/templates/snake-game/script.js +360 -0
- package/templates/snake-game/style.css +246 -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/bin/cli.js
CHANGED
|
@@ -601,7 +601,7 @@ program
|
|
|
601
601
|
.command("list")
|
|
602
602
|
.description(chalk.green("List all available templates"))
|
|
603
603
|
.action(() => {
|
|
604
|
-
console.log("\n" + chalk.blue("📦 Available Components (
|
|
604
|
+
console.log("\n" + chalk.blue("📦 Available Components (30 total)\n"));
|
|
605
605
|
|
|
606
606
|
console.log(chalk.yellow("━ Basic Components (9)"));
|
|
607
607
|
console.log(" button Styled button component");
|
|
@@ -643,6 +643,12 @@ program
|
|
|
643
643
|
console.log(" accordion Collapsible accordion component");
|
|
644
644
|
console.log(" tabs Tabbed content switcher");
|
|
645
645
|
|
|
646
|
+
console.log("\n" + chalk.green("━ Interactive Games (4)"));
|
|
647
|
+
console.log(" tic-tac-toe Classic Tic-Tac-Toe game with score tracking");
|
|
648
|
+
console.log(" memory-game Memory card matching game with difficulty levels");
|
|
649
|
+
console.log(" snake-game Classic Snake game with keyboard controls");
|
|
650
|
+
console.log(" guess-number Number guessing game with hints and scoring");
|
|
651
|
+
|
|
646
652
|
console.log("\n" + chalk.gray("Usage:"));
|
|
647
653
|
console.log(" create-template create Create a new component");
|
|
648
654
|
console.log(" create-template insert Insert into HTML file");
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>{{name}} - Guess Number</title>
|
|
7
|
+
<link rel="stylesheet" href="style.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div class="container">
|
|
11
|
+
<div class="game-card">
|
|
12
|
+
<h1>🎯 Guess the Number</h1>
|
|
13
|
+
|
|
14
|
+
<div class="game-info">
|
|
15
|
+
<div class="info-row">
|
|
16
|
+
<span class="label">Range:</span>
|
|
17
|
+
<span id="rangeDisplay" class="value">1 - 100</span>
|
|
18
|
+
</div>
|
|
19
|
+
<div class="info-row">
|
|
20
|
+
<span class="label">Attempts:</span>
|
|
21
|
+
<span id="attempts" class="value">0</span>
|
|
22
|
+
</div>
|
|
23
|
+
<div class="info-row">
|
|
24
|
+
<span class="label">Best Score:</span>
|
|
25
|
+
<span id="bestScore" class="value">-</span>
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
<div class="hint-section">
|
|
30
|
+
<div class="hint-box" id="hintBox">
|
|
31
|
+
<p id="hintText">I'm thinking of a number...</p>
|
|
32
|
+
<p id="hintDetails">Make your first guess!</p>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
|
|
36
|
+
<div class="input-section">
|
|
37
|
+
<input
|
|
38
|
+
type="number"
|
|
39
|
+
id="guessInput"
|
|
40
|
+
placeholder="Enter your guess"
|
|
41
|
+
min="1"
|
|
42
|
+
max="100"
|
|
43
|
+
/>
|
|
44
|
+
<button id="guessBtn" class="btn btn-primary">Guess</button>
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
<div class="history-section">
|
|
48
|
+
<h3>Previous Guesses</h3>
|
|
49
|
+
<div id="guessHistory" class="guess-history">
|
|
50
|
+
<p class="empty-state">No guesses yet</p>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
<div class="difficulty-section">
|
|
55
|
+
<h3>Difficulty</h3>
|
|
56
|
+
<div class="difficulty-buttons">
|
|
57
|
+
<button class="difficulty-btn active" data-range="100">Easy (1-100)</button>
|
|
58
|
+
<button class="difficulty-btn" data-range="500">Medium (1-500)</button>
|
|
59
|
+
<button class="difficulty-btn" data-range="1000">Hard (1-1000)</button>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
|
|
63
|
+
<div class="button-group">
|
|
64
|
+
<button id="newGameBtn" class="btn btn-success">New Game</button>
|
|
65
|
+
<button id="giveUpBtn" class="btn btn-secondary">Give Up</button>
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
<script src="script.js"></script>
|
|
70
|
+
</body>
|
|
71
|
+
</html>
|
|
@@ -0,0 +1,216 @@
|
|
|
1
|
+
// Guess the Number Game Logic
|
|
2
|
+
|
|
3
|
+
const guessInput = document.getElementById('guessInput');
|
|
4
|
+
const guessBtn = document.getElementById('guessBtn');
|
|
5
|
+
const newGameBtn = document.getElementById('newGameBtn');
|
|
6
|
+
const giveUpBtn = document.getElementById('giveUpBtn');
|
|
7
|
+
const attemptsDisplay = document.getElementById('attempts');
|
|
8
|
+
const bestScoreDisplay = document.getElementById('bestScore');
|
|
9
|
+
const rangeDisplay = document.getElementById('rangeDisplay');
|
|
10
|
+
const hintBox = document.getElementById('hintBox');
|
|
11
|
+
const hintText = document.getElementById('hintText');
|
|
12
|
+
const hintDetails = document.getElementById('hintDetails');
|
|
13
|
+
const guessHistory = document.getElementById('guessHistory');
|
|
14
|
+
const difficultyBtns = document.querySelectorAll('.difficulty-btn');
|
|
15
|
+
|
|
16
|
+
let targetNumber = 0;
|
|
17
|
+
let attempts = 0;
|
|
18
|
+
let maxRange = 100;
|
|
19
|
+
let guesses = [];
|
|
20
|
+
let bestScores = {
|
|
21
|
+
100: localStorage.getItem('bestScore100') || null,
|
|
22
|
+
500: localStorage.getItem('bestScore500') || null,
|
|
23
|
+
1000: localStorage.getItem('bestScore1000') || null
|
|
24
|
+
};
|
|
25
|
+
let gameActive = true;
|
|
26
|
+
|
|
27
|
+
// Initialize game
|
|
28
|
+
function initGame() {
|
|
29
|
+
targetNumber = Math.floor(Math.random() * maxRange) + 1;
|
|
30
|
+
attempts = 0;
|
|
31
|
+
guesses = [];
|
|
32
|
+
gameActive = true;
|
|
33
|
+
|
|
34
|
+
updateDisplay();
|
|
35
|
+
guessInput.value = '';
|
|
36
|
+
guessInput.disabled = false;
|
|
37
|
+
guessBtn.disabled = false;
|
|
38
|
+
guessInput.focus();
|
|
39
|
+
|
|
40
|
+
hintBox.className = 'hint-box';
|
|
41
|
+
hintText.textContent = "I'm thinking of a number...";
|
|
42
|
+
hintDetails.textContent = 'Make your first guess!';
|
|
43
|
+
|
|
44
|
+
guessHistory.innerHTML = '<p class="empty-state">No guesses yet</p>';
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
// Make a guess
|
|
48
|
+
function makeGuess() {
|
|
49
|
+
if (!gameActive) return;
|
|
50
|
+
|
|
51
|
+
const guess = parseInt(guessInput.value);
|
|
52
|
+
|
|
53
|
+
// Validate input
|
|
54
|
+
if (isNaN(guess) || guess < 1 || guess > maxRange) {
|
|
55
|
+
showHint('invalid', '⚠️ Invalid Input', `Please enter a number between 1 and ${maxRange}`);
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
// Check if already guessed
|
|
60
|
+
if (guesses.includes(guess)) {
|
|
61
|
+
showHint('duplicate', '🔄 Already Guessed', 'You already tried this number!');
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
attempts++;
|
|
66
|
+
guesses.push(guess);
|
|
67
|
+
updateDisplay();
|
|
68
|
+
addToHistory(guess);
|
|
69
|
+
|
|
70
|
+
// Check if correct
|
|
71
|
+
if (guess === targetNumber) {
|
|
72
|
+
handleWin();
|
|
73
|
+
} else if (guess < targetNumber) {
|
|
74
|
+
const diff = targetNumber - guess;
|
|
75
|
+
if (diff <= 5) {
|
|
76
|
+
showHint('hot', '🔥 Very Hot!', 'You\'re super close! Go higher!');
|
|
77
|
+
} else if (diff <= 10) {
|
|
78
|
+
showHint('warm', '🌡️ Hot!', 'Getting closer! Go higher!');
|
|
79
|
+
} else if (diff <= 20) {
|
|
80
|
+
showHint('cool', '❄️ Warm', 'Go higher!');
|
|
81
|
+
} else {
|
|
82
|
+
showHint('cold', '🧊 Cold', 'Too low! Go much higher!');
|
|
83
|
+
}
|
|
84
|
+
} else {
|
|
85
|
+
const diff = guess - targetNumber;
|
|
86
|
+
if (diff <= 5) {
|
|
87
|
+
showHint('hot', '🔥 Very Hot!', 'You\'re super close! Go lower!');
|
|
88
|
+
} else if (diff <= 10) {
|
|
89
|
+
showHint('warm', '🌡️ Hot!', 'Getting closer! Go lower!');
|
|
90
|
+
} else if (diff <= 20) {
|
|
91
|
+
showHint('cool', '❄️ Warm', 'Go lower!');
|
|
92
|
+
} else {
|
|
93
|
+
showHint('cold', '🧊 Cold', 'Too high! Go much lower!');
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
guessInput.value = '';
|
|
98
|
+
guessInput.focus();
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
// Handle win
|
|
102
|
+
function handleWin() {
|
|
103
|
+
gameActive = false;
|
|
104
|
+
guessInput.disabled = true;
|
|
105
|
+
guessBtn.disabled = true;
|
|
106
|
+
|
|
107
|
+
showHint('win', '🎉 Congratulations!', `You found it in ${attempts} attempts!`);
|
|
108
|
+
|
|
109
|
+
// Update best score
|
|
110
|
+
if (!bestScores[maxRange] || attempts < bestScores[maxRange]) {
|
|
111
|
+
bestScores[maxRange] = attempts;
|
|
112
|
+
localStorage.setItem(`bestScore${maxRange}`, attempts);
|
|
113
|
+
bestScoreDisplay.textContent = attempts;
|
|
114
|
+
|
|
115
|
+
// Show new record message
|
|
116
|
+
setTimeout(() => {
|
|
117
|
+
hintDetails.textContent = `🏆 New Record: ${attempts} attempts!`;
|
|
118
|
+
}, 1500);
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
// Give up
|
|
123
|
+
function giveUp() {
|
|
124
|
+
if (!gameActive) return;
|
|
125
|
+
|
|
126
|
+
gameActive = false;
|
|
127
|
+
guessInput.disabled = true;
|
|
128
|
+
guessBtn.disabled = true;
|
|
129
|
+
|
|
130
|
+
showHint('give-up', '😔 Game Over', `The number was ${targetNumber}`);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
// Show hint
|
|
134
|
+
function showHint(type, title, details) {
|
|
135
|
+
hintBox.className = `hint-box ${type}`;
|
|
136
|
+
hintText.textContent = title;
|
|
137
|
+
hintDetails.textContent = details;
|
|
138
|
+
|
|
139
|
+
// Animate
|
|
140
|
+
hintBox.style.animation = 'none';
|
|
141
|
+
setTimeout(() => {
|
|
142
|
+
hintBox.style.animation = 'bounceIn 0.5s ease';
|
|
143
|
+
}, 10);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
// Add to history
|
|
147
|
+
function addToHistory(guess) {
|
|
148
|
+
if (guesses.length === 1) {
|
|
149
|
+
guessHistory.innerHTML = '';
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
const guessItem = document.createElement('div');
|
|
153
|
+
guessItem.className = 'guess-item';
|
|
154
|
+
|
|
155
|
+
let icon = '';
|
|
156
|
+
if (guess === targetNumber) {
|
|
157
|
+
icon = '🎯';
|
|
158
|
+
guessItem.classList.add('correct');
|
|
159
|
+
} else if (Math.abs(guess - targetNumber) <= 5) {
|
|
160
|
+
icon = '🔥';
|
|
161
|
+
} else if (Math.abs(guess - targetNumber) <= 10) {
|
|
162
|
+
icon = '🌡️';
|
|
163
|
+
} else if (Math.abs(guess - targetNumber) <= 20) {
|
|
164
|
+
icon = '❄️';
|
|
165
|
+
} else {
|
|
166
|
+
icon = '🧊';
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
guessItem.innerHTML = `
|
|
170
|
+
<span class="guess-number">${guess}</span>
|
|
171
|
+
<span class="guess-icon">${icon}</span>
|
|
172
|
+
`;
|
|
173
|
+
|
|
174
|
+
guessHistory.prepend(guessItem);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
// Update display
|
|
178
|
+
function updateDisplay() {
|
|
179
|
+
attemptsDisplay.textContent = attempts;
|
|
180
|
+
bestScoreDisplay.textContent = bestScores[maxRange] || '-';
|
|
181
|
+
rangeDisplay.textContent = `1 - ${maxRange}`;
|
|
182
|
+
guessInput.setAttribute('max', maxRange);
|
|
183
|
+
guessInput.setAttribute('placeholder', `Enter number (1-${maxRange})`);
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
// Change difficulty
|
|
187
|
+
function changeDifficulty(newRange) {
|
|
188
|
+
maxRange = parseInt(newRange);
|
|
189
|
+
|
|
190
|
+
// Update active button
|
|
191
|
+
difficultyBtns.forEach(btn => {
|
|
192
|
+
btn.classList.toggle('active', parseInt(btn.dataset.range) === maxRange);
|
|
193
|
+
});
|
|
194
|
+
|
|
195
|
+
initGame();
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
// Event listeners
|
|
199
|
+
guessBtn.addEventListener('click', makeGuess);
|
|
200
|
+
newGameBtn.addEventListener('click', initGame);
|
|
201
|
+
giveUpBtn.addEventListener('click', giveUp);
|
|
202
|
+
|
|
203
|
+
guessInput.addEventListener('keypress', (e) => {
|
|
204
|
+
if (e.key === 'Enter') {
|
|
205
|
+
makeGuess();
|
|
206
|
+
}
|
|
207
|
+
});
|
|
208
|
+
|
|
209
|
+
difficultyBtns.forEach(btn => {
|
|
210
|
+
btn.addEventListener('click', () => {
|
|
211
|
+
changeDifficulty(btn.dataset.range);
|
|
212
|
+
});
|
|
213
|
+
});
|
|
214
|
+
|
|
215
|
+
// Initialize on load
|
|
216
|
+
initGame();
|
|
@@ -0,0 +1,337 @@
|
|
|
1
|
+
* {
|
|
2
|
+
margin: 0;
|
|
3
|
+
padding: 0;
|
|
4
|
+
box-sizing: border-box;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
body {
|
|
8
|
+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
9
|
+
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
10
|
+
min-height: 100vh;
|
|
11
|
+
display: flex;
|
|
12
|
+
justify-content: center;
|
|
13
|
+
align-items: center;
|
|
14
|
+
padding: 20px;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.container {
|
|
18
|
+
width: 100%;
|
|
19
|
+
max-width: 500px;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.game-card {
|
|
23
|
+
background: white;
|
|
24
|
+
border-radius: 16px;
|
|
25
|
+
padding: 30px;
|
|
26
|
+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.game-card h1 {
|
|
30
|
+
text-align: center;
|
|
31
|
+
color: #333;
|
|
32
|
+
margin-bottom: 20px;
|
|
33
|
+
font-size: 2.2rem;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.game-info {
|
|
37
|
+
background: #f3f4f6;
|
|
38
|
+
border-radius: 12px;
|
|
39
|
+
padding: 15px;
|
|
40
|
+
margin-bottom: 20px;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.info-row {
|
|
44
|
+
display: flex;
|
|
45
|
+
justify-content: space-between;
|
|
46
|
+
margin-bottom: 10px;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.info-row:last-child {
|
|
50
|
+
margin-bottom: 0;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.label {
|
|
54
|
+
color: #6b7280;
|
|
55
|
+
font-weight: 600;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.value {
|
|
59
|
+
color: #333;
|
|
60
|
+
font-weight: bold;
|
|
61
|
+
font-size: 1.1rem;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.hint-section {
|
|
65
|
+
margin-bottom: 20px;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.hint-box {
|
|
69
|
+
background: #f9fafb;
|
|
70
|
+
border-radius: 12px;
|
|
71
|
+
padding: 20px;
|
|
72
|
+
text-align: center;
|
|
73
|
+
border: 3px solid #e5e7eb;
|
|
74
|
+
transition: all 0.3s ease;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.hint-box.hot {
|
|
78
|
+
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
|
79
|
+
border-color: #f59e0b;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.hint-box.warm {
|
|
83
|
+
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
|
|
84
|
+
border-color: #3b82f6;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.hint-box.cool {
|
|
88
|
+
background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
|
|
89
|
+
border-color: #6366f1;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.hint-box.cold {
|
|
93
|
+
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
|
|
94
|
+
border-color: #0ea5e9;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.hint-box.win {
|
|
98
|
+
background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
|
|
99
|
+
border-color: #10b981;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.hint-box.give-up {
|
|
103
|
+
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
|
|
104
|
+
border-color: #ef4444;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.hint-box.invalid,
|
|
108
|
+
.hint-box.duplicate {
|
|
109
|
+
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
|
110
|
+
border-color: #f59e0b;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
@keyframes bounceIn {
|
|
114
|
+
0% {
|
|
115
|
+
transform: scale(0.95);
|
|
116
|
+
opacity: 0.8;
|
|
117
|
+
}
|
|
118
|
+
50% {
|
|
119
|
+
transform: scale(1.05);
|
|
120
|
+
}
|
|
121
|
+
100% {
|
|
122
|
+
transform: scale(1);
|
|
123
|
+
opacity: 1;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
#hintText {
|
|
128
|
+
font-size: 1.3rem;
|
|
129
|
+
font-weight: bold;
|
|
130
|
+
color: #333;
|
|
131
|
+
margin-bottom: 8px;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
#hintDetails {
|
|
135
|
+
font-size: 1rem;
|
|
136
|
+
color: #555;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.input-section {
|
|
140
|
+
display: flex;
|
|
141
|
+
gap: 10px;
|
|
142
|
+
margin-bottom: 20px;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
#guessInput {
|
|
146
|
+
flex: 1;
|
|
147
|
+
padding: 12px 16px;
|
|
148
|
+
border: 2px solid #e5e7eb;
|
|
149
|
+
border-radius: 8px;
|
|
150
|
+
font-size: 1.1rem;
|
|
151
|
+
transition: all 0.3s ease;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
#guessInput:focus {
|
|
155
|
+
outline: none;
|
|
156
|
+
border-color: #667eea;
|
|
157
|
+
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
#guessInput:disabled {
|
|
161
|
+
background: #f3f4f6;
|
|
162
|
+
cursor: not-allowed;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.history-section {
|
|
166
|
+
margin-bottom: 20px;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.history-section h3 {
|
|
170
|
+
font-size: 1rem;
|
|
171
|
+
color: #6b7280;
|
|
172
|
+
margin-bottom: 10px;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.guess-history {
|
|
176
|
+
background: #f9fafb;
|
|
177
|
+
border-radius: 8px;
|
|
178
|
+
padding: 15px;
|
|
179
|
+
max-height: 150px;
|
|
180
|
+
overflow-y: auto;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.empty-state {
|
|
184
|
+
text-align: center;
|
|
185
|
+
color: #9ca3af;
|
|
186
|
+
font-style: italic;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.guess-item {
|
|
190
|
+
display: flex;
|
|
191
|
+
justify-content: space-between;
|
|
192
|
+
align-items: center;
|
|
193
|
+
background: white;
|
|
194
|
+
padding: 10px 15px;
|
|
195
|
+
border-radius: 6px;
|
|
196
|
+
margin-bottom: 8px;
|
|
197
|
+
animation: slideIn 0.3s ease;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.guess-item:last-child {
|
|
201
|
+
margin-bottom: 0;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.guess-item.correct {
|
|
205
|
+
background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
|
|
206
|
+
border: 2px solid #10b981;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
@keyframes slideIn {
|
|
210
|
+
from {
|
|
211
|
+
transform: translateY(-10px);
|
|
212
|
+
opacity: 0;
|
|
213
|
+
}
|
|
214
|
+
to {
|
|
215
|
+
transform: translateY(0);
|
|
216
|
+
opacity: 1;
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.guess-number {
|
|
221
|
+
font-size: 1.2rem;
|
|
222
|
+
font-weight: bold;
|
|
223
|
+
color: #333;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.guess-icon {
|
|
227
|
+
font-size: 1.3rem;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.difficulty-section {
|
|
231
|
+
margin-bottom: 20px;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.difficulty-section h3 {
|
|
235
|
+
font-size: 1rem;
|
|
236
|
+
color: #6b7280;
|
|
237
|
+
margin-bottom: 10px;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.difficulty-buttons {
|
|
241
|
+
display: flex;
|
|
242
|
+
gap: 8px;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.difficulty-btn {
|
|
246
|
+
flex: 1;
|
|
247
|
+
padding: 10px;
|
|
248
|
+
border: 2px solid #e5e7eb;
|
|
249
|
+
border-radius: 8px;
|
|
250
|
+
background: white;
|
|
251
|
+
font-size: 0.85rem;
|
|
252
|
+
font-weight: 600;
|
|
253
|
+
cursor: pointer;
|
|
254
|
+
transition: all 0.3s ease;
|
|
255
|
+
color: #333;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.difficulty-btn:hover {
|
|
259
|
+
border-color: #667eea;
|
|
260
|
+
background: #f3f4f6;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
.difficulty-btn.active {
|
|
264
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
265
|
+
color: white;
|
|
266
|
+
border-color: #667eea;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.button-group {
|
|
270
|
+
display: flex;
|
|
271
|
+
gap: 10px;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
.btn {
|
|
275
|
+
flex: 1;
|
|
276
|
+
padding: 12px 24px;
|
|
277
|
+
border: none;
|
|
278
|
+
border-radius: 8px;
|
|
279
|
+
font-size: 1rem;
|
|
280
|
+
font-weight: 600;
|
|
281
|
+
cursor: pointer;
|
|
282
|
+
transition: all 0.3s ease;
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
.btn:disabled {
|
|
286
|
+
opacity: 0.5;
|
|
287
|
+
cursor: not-allowed;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.btn-primary {
|
|
291
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
292
|
+
color: white;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
.btn-primary:hover:not(:disabled) {
|
|
296
|
+
transform: translateY(-2px);
|
|
297
|
+
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
.btn-success {
|
|
301
|
+
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
|
302
|
+
color: white;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
.btn-success:hover {
|
|
306
|
+
transform: translateY(-2px);
|
|
307
|
+
box-shadow: 0 5px 15px rgba(16, 185, 129, 0.4);
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
.btn-secondary {
|
|
311
|
+
background: #6b7280;
|
|
312
|
+
color: white;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
.btn-secondary:hover {
|
|
316
|
+
background: #4b5563;
|
|
317
|
+
transform: translateY(-2px);
|
|
318
|
+
box-shadow: 0 5px 15px rgba(107, 114, 128, 0.4);
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
@media (max-width: 480px) {
|
|
322
|
+
.game-card {
|
|
323
|
+
padding: 20px;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.game-card h1 {
|
|
327
|
+
font-size: 1.8rem;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
.difficulty-buttons {
|
|
331
|
+
flex-direction: column;
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
.button-group {
|
|
335
|
+
flex-direction: column;
|
|
336
|
+
}
|
|
337
|
+
}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>{{name}} - Memory Game</title>
|
|
7
|
+
<link rel="stylesheet" href="style.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div class="container">
|
|
11
|
+
<div class="game-card">
|
|
12
|
+
<h1>Memory Game</h1>
|
|
13
|
+
|
|
14
|
+
<div class="game-stats">
|
|
15
|
+
<div class="stat">
|
|
16
|
+
<span class="stat-label">Moves:</span>
|
|
17
|
+
<span id="moves" class="stat-value">0</span>
|
|
18
|
+
</div>
|
|
19
|
+
<div class="stat">
|
|
20
|
+
<span class="stat-label">Time:</span>
|
|
21
|
+
<span id="timer" class="stat-value">0:00</span>
|
|
22
|
+
</div>
|
|
23
|
+
<div class="stat">
|
|
24
|
+
<span class="stat-label">Matches:</span>
|
|
25
|
+
<span id="matches" class="stat-value">0/8</span>
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
<div class="memory-board" id="memoryBoard"></div>
|
|
30
|
+
|
|
31
|
+
<div class="message" id="message"></div>
|
|
32
|
+
|
|
33
|
+
<div class="button-group">
|
|
34
|
+
<button id="resetBtn" class="btn btn-primary">New Game</button>
|
|
35
|
+
<button id="difficultyBtn" class="btn btn-secondary">Change Difficulty</button>
|
|
36
|
+
</div>
|
|
37
|
+
|
|
38
|
+
<div class="difficulty-selector" id="difficultySelector">
|
|
39
|
+
<h3>Select Difficulty</h3>
|
|
40
|
+
<div class="difficulty-options">
|
|
41
|
+
<button class="difficulty-btn active" data-difficulty="easy">Easy (4x4)</button>
|
|
42
|
+
<button class="difficulty-btn" data-difficulty="medium">Medium (4x5)</button>
|
|
43
|
+
<button class="difficulty-btn" data-difficulty="hard">Hard (4x6)</button>
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
<script src="script.js"></script>
|
|
49
|
+
</body>
|
|
50
|
+
</html>
|