<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grok.com Chat - Live Code Preview</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #1a1a1a;
color: #fff;
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
}
#chat-container {
width: 100%;
max-width: 400px;
background-color: #333;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
#chat-header {
font-size: 20px;
margin-bottom: 10px;
text-align: center;
}
#chat-instruction {
font-size: 14px;
color: #ccc;
text-align: center;
margin-bottom: 20px;
}
#preview-container {
border: 2px solid #ffcc00;
margin: 0 auto;
width: 340px;
height: 400px;
border-radius: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
#preview-iframe {
width: 100%;
height: 100%;
border: none;
border-radius: 5px;
}
@media screen and (max-width: 360px) {
#chat-container {
padding: 10px;
}
#preview-container {
width: 300px;
height: 350px;
}
}
</style>
</head>
<body>
<div id="chat-container">
<div id="chat-header">Live Code Preview</div>
<div id="chat-instruction">Paste or chat your game code to see it live!</div>
<div id="preview-container">
<iframe id="preview-iframe" sandbox="allow-same-origin allow-scripts"></iframe>
</div>
</div>
<script>
function renderLivePreview(gameCode) {
const iframe = document.getElementById('preview-iframe');
iframe.srcdoc = gameCode; // Inject the game code directly into the iframe
}
// Example game code (SuprPot) to render by default
const suprPotCode = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SuprPot</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; background-color: #1a1a1a; color: #fff; margin: 0; }
#game-container { margin: 20px auto; padding: 20px; background-color: #333; border-radius: 10px; width: 320px; }
#game-title { font-size: 24px; margin-bottom: 10px; }
#reels { font-size: 40px; margin: 20px 0; }
#payout, #total { font-size: 20px; margin: 10px 0; }
#spin-button { margin-bottom: 30px; }
#coin-tray { margin-top: 0; padding: 10px; background-color: #222; border: 2px solid #ffcc00; border-radius: 5px; min-height: 40px; display: flex; justify-content: center; flex-wrap: wrap; position: relative; }
.coin { font-size: 20px; margin: 0 2px; position: absolute; animation: drop 0.8s ease-in forwards; }
@keyframes drop { 0% { transform: translateY(-150px); opacity: 0; } 70% { transform: translateY(0); opacity: 1; } 85% { transform: translateY(-10px); } 100% { transform: translateY(0); opacity: 1; } }
button { padding: 10px 20px; font-size: 16px; background-color: #ffcc00; border: none; border-radius: 5px; cursor: pointer; }
button:disabled { background-color: #666; cursor: not-allowed; }
button:hover:not(:disabled) { background-color: #e6b800; }
</style>
</head>
<body>
<div id="game-container">
<h1 id="game-title">SuprPot</h1>
<div id="reels">🎰 🎰 🎰 🎰</div>
<div id="payout">Payout: 0 🟡</div>
<div id="total">Total: 0 🟡</div>
<button id="spin-button" onclick="spin()">Spin!</button>
<div id="coin-tray"></div>
</div>
<script>
const emojis = ['🍑', '💰', '🤖', '⭐', '🍒', '😎'];
let totalCoins = 0;
let isSpinning = false;
function spin() {
if (isSpinning) return;
isSpinning = true;
const spinButton = document.getElementById('spin-button');
spinButton.disabled = true;
let animationCount = 0;
const maxAnimations = 20;
const animationInterval = setInterval(() => {
const tempReels = [];
for (let i = 0; i < 4; i++) {
tempReels.push(emojis[Math.floor(Math.random() * emojis.length)]);
}
document.getElementById('reels').innerText = tempReels.join(' ');
animationCount++;
if (animationCount >= maxAnimations) {
clearInterval(animationInterval);
showFinalResult();
isSpinning = false;
spinButton.disabled = false;
}
}, 100);
}
function calculateMatches(reels) {
const counts = {};
reels.forEach(emoji => {
counts[emoji] = (counts[emoji] || 0) + 1;
});
return Math.max(...Object.values(counts));
}
function showFinalResult() {
const reels = [];
for (let i = 0; i < 4; i++) {
reels.push(emojis[Math.floor(Math.random() * emojis.length)]);
}
document.getElementById('reels').innerText = reels.join(' ');
const matchCount = calculateMatches(reels);
let payout = 0;
const coinTray = document.getElementById('coin-tray');
const trayWidth = coinTray.offsetWidth;
if (matchCount === 4) payout = 20;
else if (matchCount === 3) payout = 10;
else if (matchCount === 2) payout = 5;
document.getElementById('payout').innerText = \`Payout: \${'🟡'.repeat(payout)} (\${payout} 🟡)\`;
totalCoins += payout;
for (let i = 0; i < payout; i++) {
setTimeout(() => {
const coin = document.createElement('span');
coin.className = 'coin';
coin.innerText = '🟡';
const randomX = Math.random() * (trayWidth - 20);
coin.style.left = \`\${randomX}px\`;
coinTray.appendChild(coin);
}, i * 100);
}
document.getElementById('total').innerText = \`Total: \${totalCoins} 🟡\`;
}
</script>
</body>
</html>
`;
// Render the preview by default on page load
window.addEventListener('load', () => {
renderLivePreview(suprPotCode);
});
</script>
</body>
</html>