Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Digital Empréstimos Rápidos — Simulador</title>
<style>
:root{
--bg1: #ff6f00;
--bg2: #ff3d00;
--accent: #ffd54f;
--dark: #0b0b0b;
--card: rgba(255,255,255,0.09);
--glass: rgba(255,255,255,0.08);
--white: #ffffff;
--muted: rgba(255,255,255,0.85);
}
*{box-sizing:border-box;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;}
body{
margin:0;
min-height:100vh;
background: linear-gradient(180deg,var(--bg1),var(--bg2));
color:var(--white);
display:flex;
align-items:center;
justify-content:center;
padding:24px;
}
.container{
width:100%;
max-width:980px;
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.02));
border-radius:14px;
box-shadow: 0 10px 30px rgba(0,0,0,0.35);
overflow:hidden;
display:grid;
grid-template-columns: 1fr 420px;
gap:0;
}
/* Left hero */
.hero{
padding:36px;
display:flex;
flex-direction:column;
gap:18px;
align-items:flex-start;
justify-content:center;
position:relative;
overflow:hidden;
}
.logo{
display:flex;
gap:12px;
align-items:center;
}
.logo img{
width:78px;
height:auto;
border-radius:8px;
object-fit:cover;
border:2px solid rgba(255,255,255,0.08);
background:#000;
}
.brand{
font-weight:800;
font-size:34px;
letter-spacing:1px;
}
.tag{
font-size:14px;
opacity:0.95;
margin-top:-6px;
}
.hero h1{
margin:0;
font-size:44px;
line-height:1;
letter-spacing:0.6px;
}
.hero p{
margin:0;
color:var(--muted);
font-size:16px;
max-width:60ch;
}
.features{
display:flex;
gap:12px;
margin-top:12px;
flex-wrap:wrap;
}
.chip{
background:var(--glass);
padding:10px 14px;
border-radius:10px;
font-weight:600;
color:var(--white);
font-size:13px;
display:flex;
gap:8px;
align-items:center;
}
/* Right panel (simulador) */
.panel{
padding:28px;
background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.18));
display:flex;
flex-direction:column;
gap:14px;
align-items:stretch;
justify-content:center;
}
.panel h2{
margin:0;
font-size:24px;
color:var(--accent);
text-align:center;
}
.card{
background:var(--card);
padding:16px;
border-radius:10px;
display:flex;
flex-direction:column;
gap:12px;
}
label{ font-size:14px; color:var(--muted); }
input[type="number"]{
width:100%;
padding:12px;
border-radius:8px;
border:1px solid rgba(255,255,255,0.06);
background: rgba(255,255,255,0.03);
color:var(--white);
font-size:16px;
outline:none;
}
.term-buttons{
display:flex;
gap:8px;
margin-top:6px;
}
.term-btn{
flex:1;
padding:10px 8px;
text-align:center;
border-radius:8px;
cursor:pointer;
font-weight:700;
background:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.03);
}
.term-btn.active{
background:var(--accent);
color:#000;
box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.results{
display:flex;
flex-direction:column;
gap:8px;
margin-top:6px;
font-weight:700;
}
.row{
display:flex;
justify-content:space-between;
align-items:center;
}
.total{
font-size:20px;
color:var(--accent);
}
.primary{
background:var(--accent);
border:none;
padding:12px;
border-radius:10px;
font-weight:800;
cursor:pointer;
font-size:16px;
margin-top:6px;
}
.examples{
margin-top:6px;
color:var(--muted);
font-weight:700;
display:grid;
grid-template-columns: 1fr auto;
gap:8px;
align-items:center;
}
.footer{
padding:18px 26px;
background: rgba(0,0,0,0.12);
color: rgba(255,255,255,0.85);
font-size:13px;
display:flex;
justify-content:space-between;
align-items:center;
}
/* small screens */
@media (max-width:920px){
.container{ grid-template-columns: 1fr; }
.hero{ align-items:center; text-align:center; }
.logo img{ width:68px;}
.brand{ font-size:28px; }
.hero h1{ font-size:34px;}
.panel{ order: -1; }
}
</style>
</head>
<body>
<div class="container" role="main">
<section class="hero" aria-labelledby="hero-title">
<div class="logo">
<!-- caminho local do arquivo enviado -->
<img src="/mnt/data/FBC25126-4CF0-4F84-BF73-A0B86645429E.jpeg" alt="Digital Empréstimos Rápidos" />
<div>
<div class="brand">DIGITAL</div>
<div class="tag">Empréstimos Rápidos</div>
</div>
</div>
<h1 id="hero-title">Dinheiro rápido quando você precisa</h1>
<p>
Simule em segundos, receba instruções por PIX e tenha total transparência sobre taxas e prazos.
Processo simples, contrato digital e suporte via WhatsApp.
</p>
<div class="features" aria-hidden="true">
<div class="chip">Aprovação rápida</div>
<div class="chip">Taxas visíveis</div>
<div class="chip">PIX em minutos</div>
</div>
<div style="height:18px;"></div>
<div style="color:rgba(255,255,255,0.85); font-weight:700;">Oferta destaque</div>
<div style="background:rgba(0,0,0,0.18); padding:12px; border-radius:10px; font-weight:700;">
Prazos: 7 / 10 / 12 / 15 dias — Taxas a partir de <strong>35%</strong>.
</div>
</section>
<aside class="panel" aria-labelledby="simulador-title">
<h2 id="simulador-title">Simule seu empréstimo</h2>
<div class="card" role="region" aria-label="Simulador de empréstimo">
<div>
<label for="amount">Valor desejado (R$)</label>
<input id="amount" type="number" value="100" min="50" step="1" />
</div>
<div>
<label>Prazo (dias)</label>
<div class="term-buttons" role="tablist" aria-label="Escolha o prazo">
<div class="term-btn active" data-days="7" role="tab" tabindex="0">7 dias</div>
<div class="term-btn" data-days="10" role="tab" tabindex="0">10 dias</div>
<div class="term-btn" data-days="12" role="tab" tabindex="0">12 dias</div>
<div class="term-btn" data-days="15" role="tab" tabindex="0">15 dias</div>
</div>
</div>
<div class="results" aria-live="polite">
<div class="row"><div>Taxa</div><div id="rate">35%</div></div>
<div class="row"><div>Total a pagar</div><div class="total" id="total">R$ 135.00</div></div>
</div>
<button class="primary" id="requestBtn">Solicitar empréstimo</button>
<div style="height:6px"></div>
<div style="font-size:13px; color:var(--muted);">
Ao solicitar você receberá contrato digital e instruções de pagamento por PIX.
</div>
</div>
<div style="margin-top:12px;">
<div style="font-weight:800; margin-bottom:6px;">Exemplos</div>
<div class="card examples">
<div>100 em 7 dias (35%)</div><div style="color:var(--accent); font-weight:900;">135 R$</div>
<div>100 em 10 dias (40%)</div><div style="color:var(--accent); font-weight:900;">140 R$</div>
<div>100 em 12 dias (45%)</div><div style="color:var(--accent); font-weight:900;">145 R$</div>
<div>100 em 15 dias (50%)</div><div style="color:var(--accent); font-weight:900;">150 R$</div>
</div>
</div>
</aside>
</div>
<div class="footer">
<div>Escolha seu valor e sua data para pagar • Digital Empréstimos Rápidos</div>
<div style="font-weight:700;">Suporte: WhatsApp</div>
</div>
<script>
// Taxas configuráveis
const RATES = { 7:35, 10:40, 12:45, 15:50 };
const amountEl = document.getElementById('amount');
const rateEl = document.getElementById('rate');
const totalEl = document.getElementById('total');
const termBtns = document.querySelectorAll('.term-btn');
let selectedTerm = 7;
function formatBR(value){
return value.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}
function update(){
const amount = Math.max( Number(amountEl.value) || 0, 0 );
const rate = RATES[selectedTerm] || 0;
const total = amount * (1 + rate/100);
rateEl.textContent = rate + '%';
totalEl.textContent = 'R$ ' + formatBR(total);
}
termBtns.forEach(btn => {
btn.addEventListener('click', () => {
termBtns.forEach(b=>b.classList.remove('active'));
btn.classList.add('active');
selectedTerm = Number(btn.dataset.days);
update();
});
btn.addEventListener('keydown', (e) => {
if(e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
btn.click();
}
});
});
amountEl.addEventListener('input', update);
update();
// Simula pedido de empréstimo (exemplo local)
document.getElementById('requestBtn').addEventListener('click', () => {
const valor = Number(amountEl.value) || 0;
if(valor < 50){
alert('Insira um valor mínimo de R$ 50');
return;
}
const rate = RATES[selectedTerm];
const total = valor * (1 + rate/100);
const msg =
`Você está solicitando R$ ${valor.toFixed(2)} por ${selectedTerm} dias.\n` +
`Taxa: ${rate}% — Total a pagar: R$ ${total.toFixed(2)}.\n\n` +
`Em um produto real este botão abriria o fluxo de cadastro e envio de documentos. Deseja continuar?`;
if(confirm(msg)){
// Aqui você chamaria a API: fetch('/api/loans', { method: 'POST', body: ... })
alert('Pedido simulado criado — prossiga com o backend para completar o fluxo.');
}
});
</script>
</body>
</html>Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
2
Requests
1
Domains
11KB
Transfer Size
11KB
Content Size
123.0ms
Dom Content Loaded
248.0ms
First Paint
124.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...