Create AREA AI

[cellrday]

<title>G.S TOE - Advanced Tic Tac Toe</title> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');

:root {
--clr-primary: #4a90e2;
--clr-secondary: #f5f7fa;
--clr-accent: #ef476f;
--clr-bg: #121212;
--clr-cell-bg: #1e1e1e;
--clr-cell-hover: #333333;
--clr-winning: #06d6a0;
--shadow-glow: 0 0 18px 5px rgba(6, 214, 160, 0.85);
}

• {
  box-sizing: border-box;
  }

body {
margin: 0;
height: 100vh;
background: radial-gradient(circle at top left, #2c2c54, #121212);
display: flex;
justify-content: center;
align-items: center;
font-family: 'Poppins', sans-serif;
color: var(--clr-secondary);
user-select: none;
}

.container {
background-color: var(--clr-bg);
border-radius: 24px;
width: 400px;
max-width: 90vw;
padding: 35px 30px 50px;
box-shadow:
inset 0 0 40px #223355aa,
0 14px 30px rgba(0,0,0,0.9);
display: flex;
flex-direction: column;
align-items: center;
}

h1 {
margin: 0 0 15px;
font-size: 3rem;
letter-spacing: 3px;
color: var(--clr-primary);
text-shadow: 0 0 16px #4a90e2cc;
font-weight: 700;
}

h1 span {
color: var(--clr-accent);
}

.status {
margin-bottom: 22px;
font-size: 1.25rem;
letter-spacing: 1.1px;
min-height: 32px;
text-align: center;
font-weight: 600;
user-select: text;
}

.board {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
width: 340px;
}

.cell {
background-color: var(--clr-cell-bg);
border-radius: 18px;
aspect-ratio: 1 / 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 3.8rem;
font-weight: 800;
color: var(--clr-secondary);
cursor: pointer;
box-shadow:
0 5px 16px rgba(0,0,0,0.65),
inset 0 3px 8px rgba(255,255,255,0.08);
transition:
background-color 0.35s ease,
transform 0.3s ease,
box-shadow 0.45s ease;
user-select: none;
position: relative;
}

.cell:hover:not(.disabled) {
background-color: var(--clr-cell-hover);
transform: scale(1.15);
box-shadow:
0 9px 26px rgba(255, 255, 255, 0.3),
inset 0 0 18px 4px var(--clr-primary);
}

.cell.disabled {
cursor: default;
}

.cell.x {
color: var(--clr-accent);
animation: popIn 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

.cell.o {
color: var(--clr-primary);
animation: popIn 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

@Keyframes popIn {
0% {transform: scale(0.3) rotate(90deg); opacity: 0;}
60% {transform: scale(1.3) rotate(-15deg); opacity: 1;}
100% {transform: scale(1) rotate(0deg);}
}

.cell.win {
color: var(--clr-winning) !important;
box-shadow: var(--shadow-glow);
background-color: #064d3e;
cursor: default !important;
animation: glowPulse 1.6s ease-in-out infinite alternate;
transform-origin: center center;
}

@Keyframes glowPulse {
0% {box-shadow: 0 0 12px 4px rgba(6,214,160,0.75);}
100% {box-shadow: 0 0 32px 10px rgba(6,214,160,1);}
}

button.reset-btn {
margin-top: 30px;
padding: 14px 38px;
border-radius: 42px;
border: none;
background: linear-gradient(135deg, var(--clr-accent), var(--clr-primary));
color: var(--clr-secondary);
font-weight: 700;
font-size: 1.2rem;
cursor: pointer;
box-shadow: 0 12px 26px rgba(239,71,111,0.7);
transition: filter 0.3s ease, transform 0.25s ease;
user-select: none;
}
button.reset-btn:hover {
filter: brightness(1.18);
transform: scale(1.07);
}
button.reset-btn:active {
transform: scale(0.95);
box-shadow: 0 7px 15px rgba(239,71,111,0.85);
}

/* Accessibility focus */
.cell:focus-visible {
outline: 3px solid var(--clr-accent);
outline-offset: 5px;
}

/* Current player styling */
.player-x {
color: var(--clr-accent);
}

.player-o {
color: var(--clr-primary);
}

</style>

G.S TOE

<section class="board" role="grid" aria-label="Tic Tac Toe board" aria-describedby="gameInstructions">
  <div class="cell" role="button" aria-label="Cell 1" aria-pressed="false" tabindex="0" data-index="0"></div>
  <div class="cell" role="button" aria-label="Cell 2" aria-pressed="false" tabindex="0" data-index="1"></div>
  <div class="cell" role="button" aria-label="Cell 3" aria-pressed="false" tabindex="0" data-index="2"></div>
  <div class="cell" role="button" aria-label="Cell 4" aria-pressed="false" tabindex="0" data-index="3"></div>
  <div class="cell" role="button" aria-label="Cell 5" aria-pressed="false" tabindex="0" data-index="4"></div>
  <div class="cell" role="button" aria-label="Cell 6" aria-pressed="false" tabindex="0" data-index="5"></div>
  <div class="cell" role="button" aria-label="Cell 7" aria-pressed="false" tabindex="0" data-index="6"></div>
  <div class="cell" role="button" aria-label="Cell 8" aria-pressed="false" tabindex="0" data-index="7"></div>
  <div class="cell" role="button" aria-label="Cell 9" aria-pressed="false" tabindex="0" data-index="8"></div>
</section>

<button class="reset-btn" aria-label="Reset game">Restart Game</button>

<p id="gameInstructions" style="position:absolute;left:-9999px;top:auto; width:1px; height:1px; overflow:hidden;">
  Use arrow keys or tab to navigate cells. Press enter or space to mark your move.
</p>

<script> (function(){ const cells = Array.from(document.querySelectorAll('.cell')); const status = document.querySelector('.status'); const resetBtn = document.querySelector('.reset-btn'); const WIN_COMBOS = [ [0,1,2], [3,4,5], [6,7,8], [0,3,6], [1,4,7], [2,5,8], [0,4,8], [2,4,6] ]; let board = Array(9).fill(null); let currentPlayer = 'x'; let gameActive = true; function setStatus() { if(!gameActive) return; const playerHighlight = currentPlayer === 'x' ? 'player-x' : 'player-o'; status.innerHTML = `Giliran: Pemain ${currentPlayer.toUpperCase()}`; } function markCell(cell, index, player) { cell.classList.add(player); cell.textContent = player === 'x' ? '×' : '○'; cell.setAttribute('aria-pressed', 'true'); cell.setAttribute('aria-label', `Cell ${index + 1} marked with ${player.toUpperCase()}`); cell.classList.add('disabled'); } function checkWin(player) { return WIN_COMBOS.some(combo => combo.every(i => board[i] === player)); } function winningCombo(player) { return WIN_COMBOS.find(combo => combo.every(i => board[i] === player)); } function endGame(player) { gameActive = false; if (player) { const combo = winningCombo(player); status.innerHTML = `Sukses! Pemain ${player.toUpperCase()} menang! 🎉`; if(combo) { combo.forEach(i => cells[i].classList.add('win')); } cells.forEach(cell => cell.classList.add('disabled')); } else { status.textContent = 'Permainan Seri! 🤝'; } } function handleClick(e) { if(!gameActive) return; const cell = e.currentTarget; const index = +cell.dataset.index; if(board[index]) return; board[index] = currentPlayer; markCell(cell, index, currentPlayer); if(checkWin(currentPlayer)) { endGame(currentPlayer); } else if(board.every(cell => cell !== null)) { endGame(null); } else { currentPlayer = currentPlayer === 'x' ? 'o' : 'x'; setStatus(); } } function handleKeydown(e) { // Enable arrow key navigation on cells for accessibility if (!gameActive) return; const arrowKeys = ['ArrowUp','ArrowDown','ArrowLeft','ArrowRight']; if(!arrowKeys.includes(e.key)) return; e.preventDefault(); const current = document.activeElement; if(!current.classList.contains('cell')) return; const currentIndex = +current.dataset.index; let nextIndex; switch(e.key) { case 'ArrowRight': nextIndex = (currentIndex + 1) % 9; break; case 'ArrowLeft': nextIndex = (currentIndex + 8) % 9; break; case 'ArrowDown': nextIndex = (currentIndex + 3) % 9; break; case 'ArrowUp': nextIndex = (currentIndex + 6) % 9; break; } cells[nextIndex].focus(); } function resetGame() { board.fill(null); currentPlayer = 'x'; gameActive = true; cells.forEach((cell, idx) => { cell.className = 'cell'; cell.textContent = ''; cell.setAttribute('aria-pressed', 'false'); cell.setAttribute('aria-label', `Cell ${idx + 1}`); }); setStatus(); // Focus first cell after reset for keyboard users setTimeout(() => cells[0].focus(), 100); } cells.forEach(cell => { cell.addEventListener('click', handleClick); cell.addEventListener('keydown', e => { if(e.key === 'Enter' || e.key === ' ') { e.preventDefault(); cell.click(); } }); cell.addEventListener('keydown', handleKeydown); }); resetBtn.addEventListener('click', resetGame); setStatus(); })(); </script>

[AimSD23nSiR]

Let’s take over spaceships

[Domimueller85]

Hi ich bin überfordret zur Zeit sorry wenn ich nicht dieseb Ansprüche gerecht werde!

[ChTejesh19]

this is the correct code with the better output

<title>G.S TOE - Advanced Tic Tac Toe</title> <style> :root { --clr-primary: #4a90e2; --clr-secondary: #f5f7fa; --clr-accent: #ef476f; --clr-bg: #121212; --clr-cell-bg: #1e1e1e; --clr-cell-hover: #333333; --clr-winning: #06d6a0; --shadow-glow: 0 0 18px 5px rgba(6, 214, 160, 0.85); }

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
  background: radial-gradient(circle at top left, #2c2c54, #121212);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  color: var(--clr-secondary);
  user-select: none;
}

.container {
  background-color: var(--clr-bg);
  border-radius: 24px;
  width: 400px;
  max-width: 90vw;
  padding: 35px 30px 50px;
  box-shadow:
    inset 0 0 40px #223355aa,
    0 14px 30px rgba(0,0,0,0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  margin: 0 0 15px;
  font-size: 3rem;
  letter-spacing: 3px;
  color: var(--clr-primary);
  text-shadow: 0 0 16px #4a90e2cc;
  font-weight: 700;
}

h1 span {
  color: var(--clr-accent);
}

.status {
  margin-bottom: 22px;
  font-size: 1.25rem;
  letter-spacing: 1.1px;
  min-height: 32px;
  text-align: center;
  font-weight: 600;
  user-select: text;
}

.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: 340px;
}

.cell {
  background-color: var(--clr-cell-bg);
  border-radius: 18px;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3.8rem;
  font-weight: 800;
  color: var(--clr-secondary);
  cursor: pointer;
  box-shadow:
    0 5px 16px rgba(0,0,0,0.65),
    inset 0 3px 8px rgba(255,255,255,0.08);
  transition:
    background-color 0.35s ease,
    transform 0.3s ease,
    box-shadow 0.45s ease;
  user-select: none;
  position: relative;
}

.cell:hover:not(.disabled) {
  background-color: var(--clr-cell-hover);
  transform: scale(1.15);
  box-shadow:
    0 9px 26px rgba(255, 255, 255, 0.3),
    inset 0 0 18px 4px var(--clr-primary);
}

.cell.disabled {
  cursor: default;
}

.cell.x {
  color: var(--clr-accent);
  animation: popIn 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

.cell.o {
  color: var(--clr-primary);
  animation: popIn 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

@keyframes popIn {
  0% { transform: scale(0.3) rotate(90deg); opacity: 0; }
  60% { transform: scale(1.3) rotate(-15deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); }
}

.cell.win {
  color: var(--clr-winning) !important;
  box-shadow: var(--shadow-glow);
  background-color: #064d3e;
  cursor: default !important;
  animation: glowPulse 1.6s ease-in-out infinite alternate;
  transform-origin: center center;
}

@keyframes glowPulse {
  0% { box-shadow: 0 0 12px 4px rgba(6,214,160,0.75); }
  100% { box-shadow: 0 0 32px 10px rgba(6,214,160,1); }
}

button.reset-btn {
  margin-top: 30px;
  padding: 14px 38px;
  border-radius: 42px;
  border: none;
  background: linear-gradient(135deg, var(--clr-accent), var(--clr-primary));
  color: var(--clr-secondary);
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(239,71,111,0.7);
  transition: filter 0.3s ease, transform 0.25s ease;
  user-select: none;
}

button.reset-btn:hover {
  filter: brightness(1.18);
  transform: scale(1.07);
}

button.reset-btn:active {
  transform: scale(0.95);
  box-shadow: 0 7px 15px rgba(239,71,111,0.85);
}

.cell:focus-visible {
  outline: 3px solid var(--clr-accent);
  outline-offset: 5px;
}

.player-x {
  color: var(--clr-accent);
}

.player-o {
  color: var(--clr-primary);
}

</style>

G.S TOE

Current Player: X

Reset Game

<script> const cells = document.querySelectorAll('[data-cell]'); const board = document.getElementById('board'); const statusText = document.getElementById('statusText'); const resetBtn = document.getElementById('resetBtn'); let currentPlayer = 'X'; let gameActive = true; const WINNING_COMBINATIONS = [ [0,1,2], [3,4,5], [6,7,8], // rows [0,3,6], [1,4,7], [2,5,8], // columns [0,4,8], [2,4,6] // diagonals ]; function startGame() { cells.forEach(cell => { cell.textContent = ''; cell.className = 'cell'; cell.addEventListener('click', handleClick, { once: true }); }); gameActive = true; currentPlayer = 'X'; updateStatus(); } function handleClick(e) { const cell = e.target; if (!gameActive || cell.classList.contains('disabled')) return; cell.textContent = currentPlayer; cell.classList.add(currentPlayer.toLowerCase(), 'disabled'); if (checkWin(currentPlayer)) { gameActive = false; statusText.innerHTML = `🎉 Winner: ${currentPlayer}`; highlightWin(currentPlayer); return; } if ([...cells].every(cell => cell.classList.contains('disabled'))) { statusText.textContent = "It's a draw!"; gameActive = false; return; } currentPlayer = currentPlayer === 'X' ? 'O' : 'X'; updateStatus(); } function updateStatus() { statusText.innerHTML = `Current Player: ${currentPlayer}`; } function checkWin(player) { return WINNING_COMBINATIONS.some(combination => { return combination.every(index => { return cells[index].textContent === player; }); }); } function highlightWin(player) { WINNING_COMBINATIONS.forEach(combination => { if (combination.every(index => cells[index].textContent === player)) { combination.forEach(index => { cells[index].classList.add('win'); }); } }); } resetBtn.addEventListener('click', startGame); startGame(); // Initialize on load </script>