<!
DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Dashboard - Kiwify Fake (com gráfico)</title>
<script src="[Link]
<style>
* { box-sizing: border-box; margin: 0; padding: 0; font-family: Inter, Arial,
sans-serif; }
body { display: flex; min-height: 100vh; background: #f3f4f6; color:#1f2937; }
.sidebar { width: 260px; background:#17202A; color:#fff; padding:22px 18px; }
.brand { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.avatar { width:44px; height:44px; border-radius:8px; background:#0ea5a4;
display:flex; align-items:center; justify-content:center; font-weight:700; }
.name { font-size:16px; font-weight:600; }
.menu { margin-top:12px; }
.menu-item { padding:12px 10px; border-radius:8px; color:#cbd5e1; margin-
bottom:6px; cursor:pointer; }
.[Link] { background:#0f1724; color:#fff; font-weight:600; }
/* main */
.main { flex:1; display:flex; flex-direction:column; }
.topbar { background:#13784d; color:#fff; padding:14px 22px; display:flex;
justify-content:space-between; align-items:center; }
.top-left { display:flex; gap:12px; align-items:center; }
.title { font-size:18px; font-weight:700; }
.meta { background:rgba(255,255,255,0.08); padding:6px 12px; border-
radius:999px; font-weight:600; }
.content { padding:20px; }
.row { display:flex; gap:20px; margin-bottom:20px; align-items:flex-start; }
.chart-card { flex:2; background:#fff; border-radius:10px; padding:18px; box-
shadow:0 2px 6px rgba(15,23,42,0.06); min-height:200px; }
.side-cards { flex:1; display:flex; flex-direction:column; gap:12px; }
.card { background:#fff; border-radius:10px; padding:16px; box-shadow:0 2px 6px
rgba(15,23,42,0.06); }
.card h3 { font-size:13px; color:#6b7280; margin-bottom:8px; }
.card .value { font-size:20px; font-weight:700; }
.editable { outline: none; border-bottom:1px dashed rgba(0,0,0,0.08); padding-
bottom:2px; display:inline-block; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-
top:8px; }
.save-btn { position:fixed; right:18px; bottom:18px; background:#0f1724;
color:#fff; border:none; padding:10px 14px; border-radius:8px; cursor:pointer; box-
shadow:0 6px 20px rgba(15,23,42,0.18); }
.save-btn:hover { transform:translateY(-2px); }
@media (max-width:900px){
.sidebar{display:none;}
.grid{grid-template-columns:repeat(1,1fr);}
.row{flex-direction:column;}
}
</style>
</head>
<body>
<aside class="sidebar">
<div class="brand">
<div class="avatar">PA</div>
<div>
<div class="name">Pedro Augusto</div>
<div style="font-size:12px;color:#9ca3af;margin-top:4px">Conta Kiwify</div>
</div>
</div>
<nav class="menu">
<div class="menu-item active">Dashboard</div>
<div class="menu-item">Produtos</div>
<div class="menu-item">Área de Membros</div>
<div class="menu-item">Marketplace</div>
<div class="menu-item">Meus Afiliados</div>
<div class="menu-item">Vendas</div>
<div class="menu-item">Assinaturas</div>
<div class="menu-item">Financeiro</div>
<div class="menu-item">Relatórios</div>
<div class="menu-item">Colaboradores</div>
<div class="menu-item">Apps</div>
<div class="menu-item">Ajuda</div>
</nav>
</aside>
<main class="main">
<header class="topbar">
<div class="top-left">
<div class="title">Dashboard</div>
<div style="margin-left:10px; font-size:13px;
color:rgba(255,255,255,0.9)">Hoje</div>
</div>
<div class="meta">R$ <span id="meta-valor">5K</span> / R$ 10K</div>
</header>
<section class="content">
<div class="row">
<div class="chart-card">
<h3 style="color:#374151; font-size:15px; margin-bottom:12px">Vendas da
Semana</h3>
<canvas id="graficoVendas"></canvas>
</div>
<div class="side-cards">
<div class="card">
<h3>Valor líquido</h3>
<div class="value"><span class="editable" contenteditable="true">R$
5000,00</span></div>
</div>
<div class="card">
<h3>Vendas</h3>
<div class="value"><span class="editable"
contenteditable="true">307</span></div>
</div>
<div class="card">
<h3>Aprovação cartão</h3>
<div class="value"><span class="editable" contenteditable="true">0
%</span></div>
</div>
</div>
</div>
<div class="grid">
<div class="card">
<h3>Vendas 1-click da rede Kiwify</h3>
<div class="value"><span class="editable" contenteditable="true">R$
0,00</span></div>
</div>
<div class="card">
<h3>Reembolso</h3>
<div class="value"><span class="editable" contenteditable="true">0
%</span></div>
</div>
<div class="card">
<h3>Conversão boleto</h3>
<div class="value"><span class="editable" contenteditable="true">0
%</span></div>
</div>
</div>
</section>
</main>
<button class="save-btn" onclick="baixarHTML()">Baixar HTML atual</button>
<script>
// gráfico [Link]
const ctx = [Link]('graficoVendas');
new Chart(ctx, {
type: 'line',
data: {
labels: ['Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'],
datasets: [{
label: 'Vendas',
data: [50, 80, 40, 100, 75, 120, 90],
fill: true,
borderColor: '#13784d',
backgroundColor: 'rgba(19,120,77,0.1)',
tension: 0.3,
pointBackgroundColor: '#13784d'
}]
},
options: {
responsive: true,
plugins: { legend: { display: false } },
scales: {
y: { beginAtZero: true }
}
}
});
// salvar versão editada
function baixarHTML(){
const doctype = "<!DOCTYPE html>\n";
const html = [Link];
const blob = new Blob([doctype + html], { type: "text/html;charset=utf-8" });
const url = [Link](blob);
const a = [Link]("a");
[Link] = url;
[Link] = "[Link]";
[Link](a);
[Link]();
[Link]();
[Link](url);
}
</script>
</body>
</html>