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>