<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plataforma de Jogos HTML</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
color: #fff;
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid #0f3460;
}
h1 {
font-size: 2.8rem;
margin-bottom: 10px;
background: linear-gradient(to right, #00b4db, #0083b0);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.subtitle {
color: #a3b1cc;
font-size: 1.1rem;
max-width: 800px;
margin: 0 auto;
}
.main-content {
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.games-panel {
flex: 1;
min-width: 300px;
background: rgba(15, 52, 96, 0.7);
border-radius: 15px;
padding: 25px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.game-viewer {
flex: 2;
min-width: 500px;
background: rgba(10, 25, 47, 0.8);
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.panel-title {
font-size: 1.5rem;
margin-bottom: 20px;
color: #4cc9f0;
display: flex;
align-items: center;
gap: 10px;
}
.panel-title i {
font-size: 1.8rem;
}
.add-game-form {
background: rgba(0, 0, 0, 0.2);
padding: 20px;
border-radius: 10px;
margin-bottom: 25px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
color: #a3b1cc;
font-weight: 500;
}
input, textarea {
width: 100%;
padding: 12px 15px;
border: none;
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
color: white;
font-size: 1rem;
border: 1px solid rgba(255, 255, 255, 0.1);
}
input:focus, textarea:focus {
outline: none;
border-color: #4cc9f0;
box-shadow: 0 0 0 2px rgba(76, 201, 240, 0.3);
}
.btn {
background: linear-gradient(to right, #00b4db, #0083b0);
color: white;
border: none;
padding: 12px 25px;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 7px 15px rgba(0, 180, 219, 0.4);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: #a3b1cc;
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.games-list {
max-height: 400px;
overflow-y: auto;
padding-right: 5px;
}
.game-item {
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
padding: 15px;
margin-bottom: 15px;
border-left: 4px solid #00b4db;
transition: all 0.3s ease;
cursor: pointer;
}
.game-item:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateX(5px);
}
.game-item.active {
background: rgba(76, 201, 240, 0.2);
border-left-color: #4cc9f0;
}
.game-title {
font-weight: 600;
font-size: 1.1rem;
margin-bottom: 5px;
color: white;
}
.game-description {
color: #a3b1cc;
font-size: 0.9rem;
line-height: 1.4;
}
.game-actions {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.game-viewer-header {
background: rgba(15, 52, 96, 0.9);
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.game-display-title {
font-size: 1.8rem;
color: white;
}
.game-frame-container {
height: 600px;
padding: 0;
position: relative;
}
#gameFrame {
width: 100%;
height: 100%;
border: none;
background: white;
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
text-align: center;
padding: 40px;
color: #a3b1cc;
}
.empty-state i {
font-size: 5rem;
margin-bottom: 20px;
color: rgba(255, 255, 255, 0.1);
}
.instructions {
background: rgba(0, 0, 0, 0.3);
padding: 20px;
border-radius: 10px;
margin-top: 25px;
font-size: 0.9rem;
line-height: 1.5;
}
.instructions h3 {
color: #4cc9f0;
margin-bottom: 10px;
}
.instructions ul {
padding-left: 20px;
}
.instructions li {
margin-bottom: 8px;
}
.delete-btn {
background: rgba(255, 50, 50, 0.2);
color: #ff7e7e;
padding: 5px 10px;
border-radius: 5px;
font-size: 0.8rem;
border: none;
cursor: pointer;
}
.delete-btn:hover {
background: rgba(255, 50, 50, 0.4);
}
@media (max-width: 1100px) {
.main-content {
flex-direction: column;
}
.games-panel, .game-viewer {
min-width: 100%;
}
}
/* Scrollbar personalizada */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: rgba(76, 201, 240, 0.5);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(76, 201, 240, 0.7);
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<div class="container">
<header>
<h1><i class="fas fa-gamepad"></i> Plataforma de Jogos HTML</h1>
<p class="subtitle">Adicione e jogue seus jogos HTML favoritos em um só lugar. Basta inserir a URL do jogo e começar a jogar!</p>
</header>
<main class="main-content">
<section class="games-panel">
<h2 class="panel-title"><i class="fas fa-list"></i> Meus Jogos</h2>
<div class="add-game-form">
<h3><i class="fas fa-plus-circle"></i> Adicionar Novo Jogo</h3>
<form id="gameForm">
<div class="form-group">
<label for="gameName">Nome do Jogo</label>
<input type="text" id="gameName" placeholder="Ex: Jogo da Velha" required>
</div>
<div class="form-group">
<label for="gameUrl">URL do Jogo (HTML)</label>
<input type="url" id="gameUrl" placeholder="https://exemplo.com/jogo.html" required>
</div>
<div class="form-group">
<label for="gameDescription">Descrição (opcional)</label>
<textarea id="gameDescription" rows="3" placeholder="Descreva o jogo..."></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn"><i class="fas fa-save"></i> Salvar Jogo</button>
<button type="button" id="addExample" class="btn btn-secondary"><i class="fas fa-magic"></i> Adicionar Exemplo</button>
</div>
</form>
</div>
<div class="games-list" id="gamesList">
<!-- Lista de jogos será gerada dinamicamente aqui -->
</div>
<div class="instructions">
<h3><i class="fas fa-info-circle"></i> Como usar</h3>
<ul>
<li>Insira a URL de um jogo HTML na seção "Adicionar Novo Jogo"</li>
<li>Clique em um jogo na lista para carregá-lo e jogar</li>
<li>Use o botão "Abrir em Nova Aba" para jogar em tela cheia</li>
<li>Os jogos são salvos no seu navegador localmente</li>
</ul>
</div>
</section>
<section class="game-viewer">
<div class="game-viewer-header">
<h2 class="game-display-title" id="currentGameTitle">Nenhum jogo selecionado</h2>
<div>
<button id="openInNewTab" class="btn btn-secondary" disabled>
<i class="fas fa-external-link-alt"></i> Abrir em Nova Aba
</button>
<button id="refreshGame" class="btn btn-secondary" disabled>
<i class="fas fa-redo"></i> Recarregar
</button>
</div>
</div>
<div class="game-frame-container">
<div class="empty-state" id="emptyState">
<i class="fas fa-gamepad"></i>
<h3>Nenhum jogo selecionado</h3>
<p>Selecione um jogo da lista ao lado ou adicione um novo jogo para começar a jogar.</p>
</div>
<iframe id="gameFrame" style="display: none;"></iframe>
</div>
</section>
</main>
</div>
<script>
// Jogos de exemplo
const exampleGames = [
{
name: "Jogo da Velha",
url: "https://raw.githubusercontent.com/gabrielecirulli/2048/master/index.html",
description: "Clássico jogo da velha para dois jogadores"
},
{
name: "Snake Game",
url: "https://playsnake.org/",
description: "O clássico jogo da cobrinha"
},
{
name: "Pac-Man",
url: "https://www.google.com/logos/2010/pacman10-i.html",
description: "Versão web do clássico Pac-Man"
}
];
// Carregar jogos do localStorage
let games = JSON.parse(localStorage.getItem('htmlGames')) || [];
let currentGameIndex = -1;
// Inicializar a lista de jogos
function initGamesList() {
const gamesList = document.getElementById('gamesList');
// Se não houver jogos, adicionar os exemplos
if (games.length === 0) {
games = [...exampleGames];
saveGames();
}
updateGamesList();
}
// Atualizar a lista de jogos na interface
function updateGamesList() {
const gamesList = document.getElementById('gamesList');
gamesList.innerHTML = '';
if (games.length === 0) {
gamesList.innerHTML = '<div class="empty-state"><p>Nenhum jogo adicionado ainda. Adicione seu primeiro jogo!</p></div>';
return;
}
games.forEach((game, index) => {
const gameItem = document.createElement('div');
gameItem.className = `game-item ${index === currentGameIndex ? 'active' : ''}`;
gameItem.innerHTML = `
<div class="game-title">${game.name}</div>
<div class="game-description">${game.description || 'Sem descrição'}</div>
<div class="game-actions">
<small>${new URL(game.url).hostname}</small>
<button class="delete-btn" data-index="${index}"><i class="fas fa-trash"></i> Remover</button>
</div>
`;
gameItem.addEventListener('click', (e) => {
if (!e.target.closest('.delete-btn')) {
loadGame(index);
}
});
gamesList.appendChild(gameItem);
});
// Adicionar eventos para os botões de remover
document.querySelectorAll('.delete-btn').forEach(btn => {
btn.addEventListener('click', function(e) {
e.stopPropagation();
const index = parseInt(this.getAttribute('data-index'));
deleteGame(index);
});
});
}
// Carregar um jogo específico
function loadGame(index) {
if (index < 0 || index >= games.length) return;
const game = games[index];
currentGameIndex = index;
// Atualizar a interface
document.getElementById('currentGameTitle').textContent = game.name;
document.getElementById('emptyState').style.display = 'none';
document.getElementById('gameFrame').style.display = 'block';
document.getElementById('gameFrame').src = game.url;
// Ativar botões
document.getElementById('openInNewTab').disabled = false;
document.getElementById('refreshGame').disabled = false;
// Atualizar a lista para destacar o jogo selecionado
updateGamesList();
// Salvar o último jogo jogado
localStorage.setItem('lastPlayedGame', index);
}
// Adicionar um novo jogo
function addGame(name, url, description) {
const newGame = {
name,
url,
description
};
games.push(newGame);
saveGames();
updateGamesList();
// Carregar o jogo recém-adicionado
loadGame(games.length - 1);
}
// Excluir um jogo
function deleteGame(index) {
if (confirm(`Tem certeza que deseja remover o jogo "${games[index].name}"?`)) {
games.splice(index, 1);
// Se o jogo excluído era o atual, limpar a visualização
if (index === currentGameIndex) {
currentGameIndex = -1;
document.getElementById('currentGameTitle').textContent = 'Nenhum jogo selecionado';
document.getElementById('emptyState').style.display = 'flex';
document.getElementById('gameFrame').style.display = 'none';
document.getElementById('gameFrame').src = '';
// Desativar botões
document.getElementById('openInNewTab').disabled = true;
document.getElementById('refreshGame').disabled = true;
} else if (index < currentGameIndex) {
currentGameIndex--;
}
saveGames();
updateGamesList();
}
}
// Salvar jogos no localStorage
function saveGames() {
localStorage.setItem('htmlGames', JSON.stringify(games));
}
// Eventos quando o DOM estiver carregado
document.addEventListener('DOMContentLoaded', function() {
initGamesList();
// Carregar o último jogo jogado, se existir
const lastPlayedIndex = localStorage.getItem('lastPlayedGame');
if (lastPlayedIndex !== null && games[lastPlayedIndex]) {
loadGame(parseInt(lastPlayedIndex));
}
// Evento do formulário
document.getElementById('gameForm').addEventListener('submit', function(e) {
e.preventDefault();
const name = document.getElementById('gameName').value;
const url = document.getElementById('gameUrl').value;
const description = document.getElementById('gameDescription').value;
addGame(name, url, description);
// Limpar formulário
this.reset();
});
// Evento para adicionar jogo de exemplo
document.getElementById('addExample').addEventListener('click', function() {
const randomGame = exampleGames[Math.floor(Math.random() * exampleGames.length)];
document.getElementById('gameName').value = randomGame.name;
document.getElementById('gameUrl').value = randomGame.url;
document.getElementById('gameDescription').value = randomGame.description;
// Focar no campo de nome para que o usuário possa editar
document.getElementById('gameName').focus();
});
// Evento para abrir jogo em nova aba
document.getElementById('openInNewTab').addEventListener('click', function() {
if (currentGameIndex >= 0) {
window.open(games[currentGameIndex].url, '_blank');
}
});
// Evento para recarregar o jogo atual
document.getElementById('refreshGame').addEventListener('click', function() {
if (currentGameIndex >= 0) {
document.getElementById('gameFrame').src = document.getElementById('gameFrame').src;
}
});
// Adicionar alguns jogos de exemplo automaticamente se não houver jogos
if (games.length === 0) {
// Adicionar um jogo de exemplo após um breve delay
setTimeout(() => {
addGame(
"Jogo da Velha (Exemplo)",
"https://raw.githubusercontent.com/gabrielecirulli/2048/master/index.html",
"Este é um jogo de exemplo. Adicione seus próprios jogos HTML usando o formulário acima!"
);
}, 1000);
}
});
</script>
</body>
</html>