CODE:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Icon Master</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>
<style>
:root {
--primary: #4a4e69; --secondary: #9a8c98; --accent: #c9ada7;
--bg: #f2e9e4; --text: #22223b; --card: #ffffff;
}
.cim1234-dark { --primary: #22223b; --secondary: #4a4e69; --accent: #9a8c98; --bg: #2b2d42; --text: #edf2f4; --card: #3d405b; }
.cim1234-body { font-family: 'Segoe UI', sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background: var(--bg); color: var(--text); transition: 0.3s; }
.cim1234-container { display: flex; flex-direction: column; align-items: center; max-width: 600px; width: 95%; background: var(--card); border-radius: 20px; padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.cim1234-header { text-align: center; margin-bottom: 30px; }
.cim1234-header h1 { font-size: 2.5em; color: var(--primary); margin-bottom: 10px; }
.cim1234-header p { font-size: 1.2em; color: var(--secondary); }
.cim1234-icon { font-size: 150px; margin: 30px 0; transition: 0.5s; text-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.cim1234-btn { background: var(--primary); color: var(--card); padding: 12px 24px; border: none; border-radius: 50px; font-size: 16px; cursor: pointer; transition: 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.cim1234-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.cim1234-btn:disabled { background: var(--secondary); cursor: not-allowed; transform: none; box-shadow: none; }
.cim1234-result { margin-top: 20px; font-weight: bold; text-align: center; font-size: 1.2em; color: var(--primary); }
.cim1234-score { font-size: 28px; font-weight: bold; margin-top: 20px; color: var(--accent); }
.cim1234-controls { display: flex; gap: 15px; margin-top: 30px; flex-wrap: wrap; justify-content: center; }
.cim1234-timer { font-size: 24px; font-weight: bold; margin-top: 20px; color: var(--secondary); }
.cim1234-streak { font-size: 20px; margin-top: 15px; color: var(--secondary); }
.cim1234-feedback { width: 100%; height: 15px; background: var(--secondary); margin-top: 20px; border-radius: 10px; overflow: hidden; box-shadow: inset 0 2px 5px rgba(0,0,0,0.1); }
.cim1234-feedback-bar { height: 100%; width: 0%; background: var(--accent); transition: width 0.5s; }
.cim1234-color-picker { margin: 30px 0; }
.cim1234-dark-toggle { position: absolute; top: 20px; right: 20px; background: none; border: none; color: var(--text); font-size: 24px; cursor: pointer; transition: 0.3s; }
.cim1234-dark-toggle:hover { transform: scale(1.1); }
@keyframes cim1234-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
.cim1234-pulse { animation: cim1234-pulse 0.5s; }
@media (max-width: 600px) { .cim1234-container { padding: 20px; } .cim1234-icon { font-size: 120px; } .cim1234-btn { padding: 10px 20px; } }
</style>
</head>
<body class="cim1234-body">
<div class="cim1234-container">
<div class="cim1234-header">
<h1>Color Icon Master</h1>
<p>Guess the color of the icon and become a master!</p>
</div>
<select id="difficultySelect" class="cim1234-btn">
<option value="easy">Easy</option>
<option value="medium">Medium</option>
<option value="hard">Hard</option>
</select>
<div id="colorPicker" class="cim1234-color-picker"></div>
<i id="iconDisplay" class="cim1234-icon fas fa-question"></i>
<button id="submitGuess" class="cim1234-btn">Submit Guess</button>
<button id="hintButton" class="cim1234-btn">Get Hint</button>
<div id="result" class="cim1234-result"></div>
<div class="cim1234-score">Score: <span id="score">0</span></div>
<div class="cim1234-streak">Streak: <span id="streak">0</span> | Best: <span id="bestStreak">0</span></div>
<div id="timer" class="cim1234-timer">Time: 0s</div>
<div class="cim1234-feedback">
<div id="feedbackBar" class="cim1234-feedback-bar"></div>
</div>
<div class="cim1234-controls">
<button id="startButton" class="cim1234-btn">Start Game</button>
<button id="newGameButton" class="cim1234-btn" disabled>New Game</button>
<button id="pauseResumeButton" class="cim1234-btn" disabled>Pause</button>
</div>
</div>
<button id="darkModeToggle" class="cim1234-dark-toggle"></button>
<script>
const $ = id => document.getElementById(id);
const startButton = $('startButton'), newGameButton = $('newGameButton'), pauseResumeButton = $('pauseResumeButton');
const difficultySelect = $('difficultySelect'), iconDisplay = $('iconDisplay'), submitGuess = $('submitGuess');
const hintButton = $('hintButton'), result = $('result'), scoreDisplay = $('score'), streakDisplay = $('streak');
const bestStreakDisplay = $('bestStreak'), timerDisplay = $('timer'), feedbackBar = $('feedbackBar');
const darkModeToggle = $('darkModeToggle');
let currentColor, score = 0, streak = 0, bestStreak = 0, isGameActive = false, isPaused = false, timer, timeLeft, colorPicker;
const difficultySettings = {
easy: { colorRange: 60, timeLimit: 30 },
medium: { colorRange: 30, timeLimit: 20 },
hard: { colorRange: 15, timeLimit: 10 }
};
const icons = ['fa-heart', 'fa-star', 'fa-circle', 'fa-square', 'fa-triangle', 'fa-car', 'fa-house', 'fa-tree', 'fa-bell', 'fa-clock', 'fa-dragon', 'fa-atom', 'fa-biohazard', 'fa-chess-knight', 'fa-yin-yang'];
colorPicker = new iro.ColorPicker("#colorPicker", {
width: 200,
color: "#f00",
borderWidth: 1,
borderColor: "#fff",
layout: [
{ component: iro.ui.Wheel },
{ component: iro.ui.Slider, options: { sliderType: 'hue' } },
]
});
function startGame() {
isGameActive = true;
score = streak = 0;
scoreDisplay.textContent = score;
streakDisplay.textContent = streak;
startButton.disabled = true;
newGameButton.disabled = pauseResumeButton.disabled = submitGuess.disabled = hintButton.disabled = false;
difficultySelect.disabled = true;
nextRound();
}
function endGame() {
isGameActive = false;
startButton.disabled = false;
newGameButton.disabled = pauseResumeButton.disabled = submitGuess.disabled = hintButton.disabled = true;
difficultySelect.disabled = false;
clearInterval(timer);
result.textContent = `Game Over! Final Score: ${score}`;
iconDisplay.classList.add('cim1234-pulse');
}
function pauseResumeGame() {
isPaused = !isPaused;
pauseResumeButton.textContent = isPaused ? 'Resume' : 'Pause';
submitGuess.disabled = hintButton.disabled = isPaused;
if (isPaused) clearInterval(timer); else startTimer();
}
function nextRound() {
const [r, g, b] = [0, 0, 0].map(() => Math.floor(Math.random() * 256));
currentColor = `rgb(${r},${g},${b})`;
iconDisplay.style.color = currentColor;
iconDisplay.className = `cim1234-icon fas ${icons[Math.floor(Math.random() * icons.length)]} cim1234-pulse`;
result.textContent = '';
feedbackBar.style.width = '0%';
const difficulty = difficultySelect.value;
timeLeft = difficultySettings[difficulty].timeLimit;
startTimer();
}
function startTimer() {
clearInterval(timer);
timerDisplay.textContent = `${timeLeft}s`;
timer = setInterval(() => {
timeLeft--;
timerDisplay.textContent = `${timeLeft}s`;
if (timeLeft <= 0) {
clearInterval(timer);
endGame();
}
}, 1000);
}
function checkGuess() {
if (!isGameActive || isPaused) return;
const guessColor = colorPicker.color.hexString;
const difficulty = difficultySelect.value;
const { colorRange } = difficultySettings[difficulty];
const distance = colorDistance(guessColor, currentColor);
const accuracy = Math.max(0, 100 - (distance / colorRange) * 100);
feedbackBar.style.width = `${accuracy}%`;
feedbackBar.style.backgroundColor = accuracy > 50 ? '#4CAF50' : '#ff9800';
if (distance <= colorRange) {
score++;
streak++;
if (streak > bestStreak) {
bestStreak = streak;
bestStreakDisplay.textContent = bestStreak;
}
scoreDisplay.textContent = score;
streakDisplay.textContent = streak;
result.textContent = `Correct! Distance: ${distance.toFixed(2)}`;
nextRound();
} else {
streak = 0;
streakDisplay.textContent = streak;
result.textContent = `Incorrect. The color was ${currentColor}. Distance: ${distance.toFixed(2)}`;
endGame();
}
}
function colorDistance(hex1, rgb2) {
const rgb1 = hexToRgb(hex1);
const [r1, g1, b1] = Object.values(rgb1);
const [r2, g2, b2] = rgb2.match(/\d+/g).map(Number);
return Math.sqrt((r1 - r2)**2 + (g1 - g2)**2 + (b1 - b2)**2);
}
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
function getHint() {
if (!isGameActive || isPaused) return;
const rgb = currentColor.match(/\d+/g).map(Number);
const hintColor = rgb.map(c => Math.round(c / 25) * 25).join(', ');
result.textContent = `Hint: The color is close to rgb(${hintColor})`;
score = Math.max(0, score - 1);
scoreDisplay.textContent = score;
}
function toggleDarkMode() {
document.body.classList.toggle('cim1234-dark');
}
startButton.addEventListener('click', startGame);
newGameButton.addEventListener('click', startGame);
pauseResumeButton.addEventListener('click', pauseResumeGame);
submitGuess.addEventListener('click', checkGuess);
hintButton.addEventListener('click', getHint);
darkModeToggle.addEventListener('click', toggleDarkMode);
</script>
</body>
</html>