Spamworldpro Mini Shell
Apache Linux pod-100823:apache2_74:v0.5.9 5.4.0-1138-gcp #147~18.04.1-Ubuntu SMP Mon Oct 7 21:46:26 UTC 2024 x86_64 www-data ( 33 )7.4.33.9 apache_child_terminate,apache_get_modules,apache_get_version,apache_getenv,apache_note,apache_setenv,disk_free_space,disk_total_space,diskfreespace,dl,exec,fastcgi_finish_request,link,opcache_compile_file,opcache_get_configuration,opcache_invalidate,opcache_is_script_cached,opcache_reset,passthru,pclose,pcntl_exec,popen,posix_getpid,posix_getppid,posix_getpwuid,posix_kill,posix_mkfifo,posix_setegid,posix_seteuid,posix_setgid,posix_setpgid,posix_setsid,posix_setuid,posix_uname,proc_close,proc_get_status,proc_nice,proc_open,proc_terminate,realpath_cache_get,shell_exec,show_source,symlink,system / nas /content /live /attorneyexperi / Upload File :
Current File : /nas/content/live/attorneyexperi/teka-teki.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tic Tac Toe</title>
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(45deg, #000428, #004e92);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
color: white;
}
.title-container {
text-align: center;
margin-bottom: 30px;
animation: glow 2s ease-in-out infinite alternate;
}
.main-title {
font-size: 4em;
font-weight: bold;
background: linear-gradient(to right, #00eaff, #3b82f6, #00eaff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 0 20px rgba(0, 234, 255, 0.5);
margin: 0;
}
.subtitle {
font-size: 1.2em;
color: #00eaff;
margin-top: 10px;
text-shadow: 0 0 10px rgba(0, 234, 255, 0.5);
}
@keyframes glow {
from {
filter: drop-shadow(0 0 2px #00eaff) drop-shadow(0 0 6px #00eaff);
}
to {
filter: drop-shadow(0 0 3px #00eaff) drop-shadow(0 0 8px #00eaff);
}
}
.popup {
background: rgba(0, 0, 0, 0.8);
padding: 20px;
border-radius: 10px;
text-align: center;
margin-bottom: 20px;
box-shadow: 0 0 15px #00eaff;
}
.selection, .difficulty, .game-mode {
display: flex;
justify-content: center;
gap: 20px;
}
.option, .difficulty-option, .game-mode-option {
padding: 10px;
border: 2px solid transparent;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease-in-out;
text-align: center;
color: white;
}
.option:hover, .difficulty-option:hover, .game-mode-option:hover {
border-color: #00eaff;
box-shadow: 0 0 15px #00eaff;
}
.symbol {
font-size: 2rem;
text-shadow: 0 0 10px currentColor;
}
.blue {
color: blue;
}
.red {
color: red;
}
.game-board {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
margin-top: 20px;
width: 90vw;
max-width: 300px;
}
.cell {
width: 100%;
aspect-ratio: 1 / 1;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
cursor: pointer;
text-shadow: 0 0 10px white;
transition: all 0.3s ease;
}
.cell:hover {
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 0 15px rgba(0, 234, 255, 0.5);
}
.cell.x {
color: red;
}
.cell.o {
color: blue;
}
.status {
margin: 20px;
font-size: 1.5rem;
text-shadow: 0 0 10px #00eaff;
}
.score {
margin: 10px;
font-size: 1.2rem;
text-shadow: 0 0 10px #00eaff;
}
.reset-btn {
background: rgba(255, 255, 255, 0.1);
border: 2px solid #00eaff;
padding: 10px 20px;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s;
color: white;
font-size: 1.1em;
}
.reset-btn:hover {
background: rgba(0, 234, 255, 0.3);
box-shadow: 0 0 15px #00eaff;
transform: translateY(-2px);
}
</style>
</head>
<body>
<div class="title-container">
<h1 class="main-title">TIC TAC TOE</h1>
<div class="subtitle">Let the battle begin!</div>
</div><div class="subtitle">Developer BY B4GUS</div>
</div>
<div class="popup" id="popup-symbol">
<h2>Pilih Simbol Anda</h2>
<div class="selection">
<div class="option" onclick="selectSymbol('O')">O</div>
<div class="option" onclick="selectSymbol('X')">X</div>
</div>
</div>
<div class="popup" id="popup-game-mode" style="display: none;">
<h2>Pilih Mode Permainan</h2>
<div class="game-mode">
<div class="game-mode-option" onclick="selectGameMode('bot')">Main dengan Bot</div>
<div class="game-mode-option" onclick="selectGameMode('twoPlayer')">Main Bersama Teman</div>
</div>
</div>
<div class="popup" id="popup-difficulty" style="display: none;">
<h2>Pilih Tingkat Kesulitan</h2>
<div class="difficulty">
<div class="difficulty-option" onclick="selectDifficulty('medium')">Medium</div>
<div class="difficulty-option" onclick="selectDifficulty('hard')">Hard</div>
</div>
</div>
<div class="game-container" style="display: none;">
<div class="game-board"></div>
<div class="score"></div>
<div class="status"></div>
<button class="reset-btn" onclick="resetGame()">Reset Game</button>
</div>
<script>
const popupSymbol = document.getElementById('popup-symbol');
const popupGameMode = document.getElementById('popup-game-mode');
const popupDifficulty = document.getElementById('popup-difficulty');
const gameContainer = document.querySelector('.game-container');
const gameBoard = document.querySelector('.game-board');
const statusText = document.querySelector('.status');
const scoreText = document.querySelector('.score');
let board = ['', '', '', '', '', '', '', '', ''];
let playerSymbol = '';
let botSymbol = '';
let currentPlayer = '';
let gameMode = '';
let difficulty = '';
let isGameActive = false;
let scores = {
player1: 0,
player2: 0,
user: 0,
bot: 0
};
let isBotTurn = false;
const winConditions = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6],
];
const createBoard = () => {
gameBoard.innerHTML = '';
board = ['', '', '', '', '', '', '', '', ''];
for (let i = 0; i < 9; i++) {
const cell = document.createElement('div');
cell.className = 'cell';
cell.dataset.index = i;
cell.addEventListener('click', handleCellClick);
gameBoard.appendChild(cell);
}
isGameActive = true;
updateScoreDisplay();
};
const updateScoreDisplay = () => {
if (gameMode === 'twoPlayer') {
scoreText.textContent = `Player 1: ${scores.player1} - Player 2: ${scores.player2}`;
} else {
scoreText.textContent = `You: ${scores.user} - Bot: ${scores.bot}`;
}
};
const selectSymbol = (symbol) => {
playerSymbol = symbol;
botSymbol = symbol === 'X' ? 'O' : 'X';
popupSymbol.style.display = 'none';
popupGameMode.style.display = 'block';
};
const selectGameMode = (mode) => {
gameMode = mode;
popupGameMode.style.display = 'none';
if (mode === 'bot') {
popupDifficulty.style.display = 'block';
} else {
gameContainer.style.display = 'block';
createBoard();
currentPlayer = 'Player 1';
statusText.textContent = `Giliran ${currentPlayer}`;
}
};
const selectDifficulty = (level) => {
difficulty = level;
popupDifficulty.style.display = 'none';
gameContainer.style.display = 'block';
createBoard();
currentPlayer = 'User';
statusText.textContent = 'Giliran Anda!';
};
const handleCellClick = (e) => {
if (!isGameActive || isBotTurn) return;
const index = e.target.dataset.index;
if (board[index]) return;
const symbol = currentPlayer === 'User' || currentPlayer === 'Player 1' ? playerSymbol : botSymbol;
makeMove(index, symbol);
if (gameMode === 'bot' && isGameActive) {
isBotTurn = true;
setTimeout(botMove, 500);
}
};
const makeMove = (index, symbol) => {
board[index] = symbol;
const cell = gameBoard.children[index];
cell.textContent = symbol;
cell.classList.add(symbol.toLowerCase());
if (checkWin(symbol)) {
if (gameMode === 'bot') {
if (currentPlayer === 'User') {
scores.user++;
statusText.textContent = 'Anda Menang!';
} else {
scores.bot++;
statusText.textContent = 'Bot Menang!';
}
} else {
if (currentPlayer === 'Player 1') {
scores.player1++;
statusText.textContent = 'Player 1 Menang!';
} else {
scores.player2++;
statusText.textContent = 'Player 2 Menang!';
}
}
updateScoreDisplay();
isGameActive = false;
return;
}
if (!board.includes('')) {
statusText.textContent = 'Seri!';
isGameActive = false;
return;
}
if (gameMode === 'twoPlayer') {
currentPlayer = currentPlayer === 'Player 1' ? 'Player 2' : 'Player 1';
statusText.textContent = `Giliran ${currentPlayer}`;
}
};
const checkWin = (symbol) => winConditions.some((c) => c.every((i) => board[i] === symbol));
const botMove = () => {
if (!isGameActive) return;
let move;
if (difficulty === 'hard') {
move = findBestMove();
} else {
const emptyCells = board.map((val, idx) => (val === '' ? idx : null)).filter((val) => val !== null);
move = emptyCells[Math.floor(Math.random() * emptyCells.length)];
}
currentPlayer = 'Bot';
makeMove(move, botSymbol);
if (isGameActive) {
currentPlayer = 'User';
statusText.textContent = 'Giliran Anda!';
}
isBotTurn = false;
};
const findBestMove = () => {
let bestScore = -Infinity;
let move = -1;
for (let i = 0; i < board.length; i++) {
if (board[i] === '') {
board[i] = botSymbol;
const score = minimax(board, 0, false);
board[i] = '';
if (score > bestScore) {
bestScore = score;
move = i;
}
}
}
return move;
};
const minimax = (newBoard, depth, isMaximizing) => {
const playerWon = checkWin(playerSymbol);
const botWon = checkWin(botSymbol);
if (botWon) return 10 - depth;
if (playerWon) return depth - 10;
if (!newBoard.includes('')) return 0;
if (isMaximizing) {
let bestScore = -Infinity;
for (let i = 0; i < newBoard.length; i++) {
if (newBoard[i] === '') {
newBoard[i] = botSymbol;
const score = minimax(newBoard, depth + 1, false);
newBoard[i] = '';
bestScore = Math.max(score, bestScore);
}
}
return bestScore;
} else {
let bestScore = Infinity;
for (let i = 0; i < newBoard.length; i++) {
if (newBoard[i] === '') {
newBoard[i] = playerSymbol;
const score = minimax(newBoard, depth + 1, true);
newBoard[i] = '';
bestScore = Math.min(score, bestScore);
}
}
return bestScore;
}
};
const resetGame = () => {
board = ['', '', '', '', '', '', '', '', ''];
currentPlayer = gameMode === 'bot' ? 'User' : 'Player 1';
isGameActive = true;
isBotTurn = false;
createBoard();
statusText.textContent = gameMode === 'bot' ? 'Giliran Anda!' : `Giliran ${currentPlayer}`;
};
window.onload = () => {
popupSymbol.style.display = 'block';
};
</script>
</body>
</html> 