Skip to content

C
CRUD_DOS_NERDS
Commit bb2ead75 by Endrew
Options

feat: setup inicial do Build Planner Pro

parents
Showing with 308 additions and 0 deletions
.vscode/settings.json 0 → 100644
{
"liveServer.settings.port": 5501
}
\ No newline at end of file
index.html 0 → 100644
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Build Planner Pro</title>
<style>
/* --- CSS BONITO (O "ESTILO") --- */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;700&family=Inter:wght@400;600&display=swap');
:root {
--primary: #8b5cf6;
--secondary: #06b6d4;
--bg: #0f172a;
--card: #1e293b;
--text: #f8fafc;
}
body {
font-family: 'Inter', sans-serif;
background: radial-gradient(circle at top, #1e1b4b, #0f172a);
color: var(--text);
margin: 0; padding: 20px; min-height: 100vh;
}
header { text-align: center; margin-bottom: 40px; }
header h1 { font-family: 'Rajdhani', sans-serif; font-size: 2.5rem; letter-spacing: 2px; color: var(--secondary); margin: 0; }
.container {
max-width: 1000px; margin: 0 auto;
display: grid; grid-template-columns: 350px 1fr; gap: 30px;
}
.build-form {
background: var(--card); padding: 25px; border-radius: 15px;
border: 1px solid rgba(255,255,255,0.1); height: fit-content;
}
.input-group { margin-bottom: 15px; }
label { display: block; font-size: 0.8rem; color: var(--secondary); margin-bottom: 5px; font-weight: bold; }
input, select {
width: 100%; padding: 10px; border-radius: 8px; border: 1px solid #334155;
background: #0f172a; color: white; box-sizing: border-box;
}
.attributes-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
background: rgba(0,0,0,0.2); padding: 15px; border-radius: 10px; margin: 15px 0;
}
.btn-save {
background: var(--primary); color: white; width: 100%; padding: 12px;
border: none; border-radius: 8px; font-weight: bold; cursor: pointer;
}
/* --- CARDS DAS BUILDS --- */
.build-card {
background: var(--card); padding: 20px; border-radius: 12px;
margin-bottom: 15px; border-left: 4px solid var(--primary);
animation: slideIn 0.3s ease;
}
.stats-display {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 10px; background: #0f172a; padding: 10px; border-radius: 8px; margin-top: 10px;
}
.stat-box { text-align: center; }
.stat-box small { color: #94a3b8; font-size: 0.7rem; display: block; }
.stat-box span { font-weight: bold; color: var(--secondary); }
.actions { margin-top: 15px; display: flex; gap: 10px; justify-content: flex-end; }
.btn-edit { background: #eab308; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer; }
.btn-delete { background: #ef4444; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer; color: white; }
@keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@media (max-width: 800px) { .container { grid-template-columns: 1fr; } }
</style>
</head>
<body>
<header>
<h1>BUILD<span>PLANNER</span> PRO</h1>
</header>
<main class="container">
<section class="build-form">
<h2 id="form-title" style="margin-top:0">Nova Build</h2>
<form id="main-form">
<input type="hidden" id="build-id">
<div class="input-group">
<label>Nome do Herói</label>
<input type="text" id="nome" placeholder="Ex: Malenia" required>
</div>
<div class="input-group">
<label>Classe</label>
<select id="classe">
<option value="Guerreiro">Guerreiro</option>
<option value="Mago">Mago</option>
<option value="Assassino">Assassino</option>
<option value="Tanque">Tanque</option>
</select>
</div>
<div class="attributes-grid">
<div class="attr-field"><label>Força</label><input type="number" id="forca" value="10"></div>
<div class="attr-field"><label>Destreza</label><input type="number" id="destreza" value="10"></div>
<div class="attr-field"><label>Inteligência</label><input type="number" id="inteligencia" value="10"></div>
<div class="attr-field"><label>Vitalidade</label><input type="number" id="vitalidade" value="10"></div>
</div>
<button type="submit" class="btn-save">SALVAR NO BANCO</button>
<button type="button" id="btn-cancel" style="display:none; width:100; margin-top:10px; background:none; color:white; border:1px solid #666; cursor:pointer;" onclick="resetForm()">Cancelar</button>
</form>
</section>
<section class="build-list">
<div id="builds-container"></div>
</section>
</main>
<script>
let builds = JSON.parse(localStorage.getItem('database_builds')) || [];
const form = document.getElementById('main-form');
const container = document.getElementById('builds-container');
form.addEventListener('submit', (e) => {
e.preventDefault();
const id = document.getElementById('build-id').value;
const data = {
id: id ? parseInt(id) : Date.now(),
nome: document.getElementById('nome').value,
classe: document.getElementById('classe').value,
forca: document.getElementById('forca').value,
destreza: document.getElementById('destreza').value,
inteligencia: document.getElementById('inteligencia').value,
vitalidade: document.getElementById('vitalidade').value
};
if (id) {
const index = builds.findIndex(b => b.id === parseInt(id));
builds[index] = data;
} else {
builds.push(data);
}
localStorage.setItem('database_builds', JSON.stringify(builds));
resetForm();
render();
});
function render() {
container.innerHTML = '';
builds.forEach(b => {
container.innerHTML += `
<div class="build-card">
<div style="display:flex; justify-content:space-between">
<strong style="font-size:1.2rem; color:var(--secondary)">${b.nome}</strong>
<span style="font-size:0.8rem; background:#334155; padding:2px 8px; border-radius:4px">${b.classe}</span>
</div>
<div class="stats-display">
<div class="stat-box"><small>STR</small><span>${b.forca}</span></div>
<div class="stat-box"><small>DEX</small><span>${b.destreza}</span></div>
<div class="stat-box"><small>INT</small><span>${b.inteligencia}</span></div>
<div class="stat-box"><small>VIT</small><span>${b.vitalidade}</span></div>
</div>
<div class="actions">
<button class="btn-edit" onclick="editBuild(${b.id})">Editar</button>
<button class="btn-delete" onclick="deleteBuild(${b.id})">Excluir</button>
</div>
</div>
`;
});
}
function deleteBuild(id) {
builds = builds.filter(b => b.id !== id);
localStorage.setItem('database_builds', JSON.stringify(builds));
render();
}
function editBuild(id) {
const b = builds.find(build => build.id === id);
document.getElementById('build-id').value = b.id;
document.getElementById('nome').value = b.nome;
document.getElementById('classe').value = b.classe;
document.getElementById('forca').value = b.forca;
document.getElementById('destreza').value = b.destreza;
document.getElementById('inteligencia').value = b.inteligencia;
document.getElementById('vitalidade').value = b.vitalidade;
document.getElementById('form-title').innerText = "Editando...";
document.getElementById('btn-cancel').style.display = "block";
}
function resetForm() {
form.reset();
document.getElementById('build-id').value = '';
document.getElementById('form-title').innerText = "Nova Build";
document.getElementById('btn-cancel').style.display = "none";
}
render();
</script>
</body>
</html>
\ No newline at end of file
style.css 0 → 100644
:root {
--primary: #7289da;
--secondary: #43b581;
--danger: #f04747;
--bg: #2c2f33;
--card: #23272a;
--text: #ffffff;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--bg);
color: var(--text);
margin: 0;
padding: 20px;
}
header { text-align: center; margin-bottom: 30px; }
header h1 span { color: var(--primary); }
.container {
max-width: 900px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
/* Formulário */
.build-form {
background: var(--card);
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.input-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; font-size: 0.9em; color: #bbb; }
input, select {
width: 100%;
padding: 10px;
border-radius: 4px;
border: 1px solid #444;
background: #2f3136;
color: white;
box-sizing: border-box;
}
.attributes-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 20px;
}
button {
width: 100%;
padding: 12px;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
transition: 0.3s;
}
.btn-save { background: var(--secondary); color: white; }
.btn-save:hover { background: #3ca374; }
.btn-cancel { background: #555; color: white; margin-top: 10px; }
/* Cards de Build */
.build-card {
background: var(--card);
padding: 15px;
border-radius: 8px;
margin-bottom: 15px;
border-left: 5px solid var(--primary);
}
.build-card h3 { margin: 0 0 10px 0; color: var(--primary); }
.build-card p { font-size: 0.85em; margin: 5px 0; color: #ccc; }
.actions {
margin-top: 10px;
display: flex;
gap: 10px;
}
.btn-edit { background: #faa61a; color: white; padding: 5px 10px; font-size: 12px; }
.btn-delete { background: var(--danger); color: white; padding: 5px 10px; font-size: 12px; }
@media (max-width: 768px) {
.container { grid-template-columns: 1fr; }
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment