Grafica
<style>
body {
font-family: 'Inter', sans-serif;
background: #f7f9fb;
color: #333;
padding: 30px;
}
.container {
max-width: 900px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 20px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.input-copimaia, select, textarea {
width: 100%;
padding: 12px;
margin-top: 5px;
border-radius: 10px;
border: 1px solid #ccd8e0;
background: #fff;
box-sizing: border-box;
}
.button {
margin-top: 30px;
padding: 12px 20px;
background-color: #d2337f;
color: white;
font-weight: bold;
border: none;
border-radius: 10px;
cursor: pointer;
}
#resultadoPreco {
margin-top: 30px;
background: #f0f4f9;
padding: 20px;
border-radius: 15px;
display: none;
}
.promocao-bloco {
background: #fbee52;
border: 2px dashed #d2337f;
padding: 20px;
border-radius: 15px;
margin-bottom: 30px;
animation: pulse 2s infinite;
cursor: pointer;
}
.promocao-bloco:hover {
background: #fff8c4;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(210, 51, 127, 0.4); }
70% { box-shadow: 0 0 0 10px rgba(210, 51, 127, 0); }
100% { box-shadow: 0 0 0 0 rgba(210, 51, 127, 0); }
}
</style>
<div class="container">
<h1 style="text-align:center;color:#489edc;">Calculadora de Impressão Copimaia</h1>
<div class="promocao-bloco" onclick="selecionarPromocao('flyer','a6',1,500,35)">
<h3 style="margin:0;color:#d2337f;">🔥 500 Flyers A6 a Cores Só Frente</h3>
<p style="margin:5px 0;">Preço normal: ~60€~ <strong style="color:#d2337f;">Promoção: 35€ + IVA</strong></p>
</div>
<div class="promocao-bloco" onclick="selecionarPromocao('flyer','a5',1,100,25)">
<h3 style="margin:0;color:#d2337f;">🔥 100 Flyers A5 a Cores Só Frente</h3>
<p style="margin:5px 0;">Preço normal: ~30€~ <strong style="color:#d2337f;">Promoção: 25€ + IVA</strong></p>
</div>
<div class="promocao-bloco" onclick="selecionarPromocao('cartao','',1,100,15)">
<h3 style="margin:0;color:#d2337f;">🎉 100 Cartões de Visita Só Frente</h3>
<p style="margin:5px 0;">Preço normal: ~25€~ <strong style="color:#d2337f;">Promoção: 15€</strong></p>
</div>
<div class="promocao-bloco" onclick="selecionarPromocao('cartao','',2,100,20)">
<h3 style="margin:0;color:#d2337f;">🎉 100 Cartões Frente e Verso</h3>
<p style="margin:5px 0;">Preço normal: ~30€~ <strong style="color:#d2337f;">Promoção: 20€</strong></p>
</div>
<label for="tipo">Tipo de trabalho</label>
<select id="tipo" class="input-copimaia" onchange="mostrarCampos()">
<option value="">-- Selecionar --</option>
<option value="flyer">Flyer</option>
<option value="cartao">Cartão de Visita</option>
<option value="livreto">Livreto</option>
</select>
<div id="camposComuns" style="display:none;">
<label>Quantidade</label>
<input type="number" id="quantidade" class="input-copimaia"/>
<div id="camposFlyer" style="display:none;">
<label>Formato</label>
<select id="formatoFlyer" class="input-copimaia">
<option value="a6">A6</option>
<option value="a5">A5</option>
<option value="dl">DL</option>
</select>
<label>Impressão</label>
<select id="versoFlyer" class="input-copimaia">
<option value="1">Só frente</option>
<option value="2">Frente e verso</option>
</select>
</div>
<div id="camposCartao" style="display:none;">
<label>Impressão</label>
<select id="versoCartao" class="input-copimaia">
<option value="1">Só frente</option>
<option value="2">Frente e verso</option>
</select>
<label>Laminação</label>
<select id="laminacaoCartao" class="input-copimaia">
<option value="nao">Não</option>
<option value="brilho">Brilho</option>
<option value="mate">Mate</option>
</select>
<label>Cantos redondos?</label>
<select id="cantosCartao" class="input-copimaia">
<option value="nao">Não</option>
<option value="sim">Sim</option>
</select>
</div>
<div id="camposLivreto" style="display:none;">
<label>Formato</label>
<select id="formatoLivreto" class="input-copimaia">
<option value="a5">A5</option>
<option value="a4">A4</option>
</select>
<label>N.º total de páginas</label>
<input type="number" id="paginasLivreto" class="input-copimaia"/>
</div>
<button onclick="calcularPreco()" class="button">Calcular Preço</button>
</div>
<div id="resultadoPreco"></div>
</div>
<script>
function mostrarCampos() {
const tipo = document.getElementById('tipo').value;
document.getElementById('camposComuns').style.display = tipo ? 'block' : 'none';
document.getElementById('camposFlyer').style.display = tipo === 'flyer' ? 'block' : 'none';
document.getElementById('camposCartao').style.display = tipo === 'cartao' ? 'block' : 'none';
document.getElementById('camposLivreto').style.display = tipo === 'livreto' ? 'block' : 'none';
document.getElementById('resultadoPreco').style.display = 'none';
}
function selecionarPromocao(tipo, formato, verso, quantidade, precoPromo) {
document.getElementById('tipo').value = tipo;
mostrarCampos();
document.getElementById('quantidade').value = quantidade;
if (tipo === 'flyer') {
document.getElementById('formatoFlyer').value = formato;
document.getElementById('versoFlyer').value = verso;
} else if (tipo === 'cartao') {
document.getElementById('versoCartao').value = verso;
}
const precoHTML = `
<div style="margin-top:10px;padding:10px;background:#fbee52;border-radius:10px;border:2px dashed #d2337f;">
<strong>Promoção aplicada!</strong><br>
Total com promoção: <span style="color:#d2337f;font-weight:bold;">${precoPromo.toFixed(2)}€ + IVA</span>
</div>`;
document.getElementById('resultadoPreco').innerHTML = precoHTML;
document.getElementById('resultadoPreco').style.display = 'block';
}
function calcularPreco() {
const tipo = document.getElementById('tipo').value;
const quantidade = parseInt(document.getElementById('quantidade').value);
let total = 0;
let detalhes = \"\";
if (!quantidade || quantidade <= 0) {
alert(\"Indica a quantidade.\");
return;
}
if (tipo === 'flyer') {
const formato = document.getElementById('formatoFlyer').value;
const verso = parseInt(document.getElementById('versoFlyer').value);
const flyersPorA3 = { a6: 8, a5: 4, dl: 6 }[formato];
const folhas = Math.ceil(quantidade / flyersPorA3);
const impressoes = folhas * verso;
total += folhas * 0.45 + impressoes * 0.60 + 4;
} else if (tipo === 'cartao') {
const verso = parseInt(document.getElementById('versoCartao').value);
const laminacao = document.getElementById('laminacaoCartao')?.value || 'nao';
const cantos = document.getElementById('cantosCartao')?.value || 'nao';
const cartoesPorA3 = 25;
const folhas = Math.ceil(quantidade / cartoesPorA3);
const impressoes = folhas * verso;
total += folhas * 0.90 + impressoes * 0.60 + 8;
if (cantos === 'sim') total += Math.ceil(quantidade / 50) * 5;
if ((laminacao === 'brilho' || laminacao === 'mate') && quantidade >= 250) total += folhas * 2;
} else if (tipo === 'livreto') {
const paginas = parseInt(document.getElementById('paginasLivreto').value);
if (!paginas || paginas % 4 !== 0) {
alert(\"O número de páginas tem de ser múltiplo de 4.\");
return;
}
const folhasPorLivro = paginas / 4;
const livrosPorA3 = 2;
const folhasA3 = Math.ceil((quantidade / livrosPorA3) * folhasPorLivro);
const impressoes = folhasA3 * 2;
total += folhasA3 * 0.45 + impressoes * 0.60 + (quantidade * 2 * 0.10);
}
const totalComIVA = total * 1.23;
const detalhes = `<div style=\"margin-top:10px;padding:10px;background:#d2337f;color:white;border-radius:8px;\"><strong>Total sem IVA:</strong> ${total.toFixed(2)} €</div><p style=\"margin-top:8px; color:#555; font-size:14px;\">Com IVA: ${totalComIVA.toFixed(2)} €</p>`;
document.getElementById('resultadoPreco').innerHTML = detalhes;
document.getElementById('resultadoPreco').style.display = 'block';
}
</script>