117 lines
5.2 KiB
HTML
117 lines
5.2 KiB
HTML
{{define "form_page.html"}}
|
||
<!doctype html>
|
||
<html lang="pt-br">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>e-li.nps</title>
|
||
{{/*
|
||
Importante: evitamos SRI aqui porque o hash pode mudar entre CDNs/builds.
|
||
Servimos arquivos locais para garantir estabilidade do widget.
|
||
*/}}
|
||
<script src="/static/vendor/htmx.min.js"></script>
|
||
<script src="/static/vendor/json-enc.js"></script>
|
||
<style>
|
||
.eli-nps-wrap{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#111;margin:0;padding:0;}
|
||
.eli-nps-card{max-width:520px;margin:0 auto;padding:16px;}
|
||
.eli-nps-title{font-size:18px;font-weight:700;margin:0 0 8px;}
|
||
.eli-nps-sub{margin:0 0 12px;color:#444;font-size:14px;}
|
||
.eli-nps-scale{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;margin:12px 0;}
|
||
/*
|
||
Botões de nota (1–10) com escala vermelho → verde.
|
||
Importante: a cor base é determinada pelo valor; quando selecionado,
|
||
o botão ganha destaque (borda/sombra) mas mantém a cor.
|
||
*/
|
||
.eli-nps-btn{
|
||
border:1px solid #ddd;
|
||
background:#fff;
|
||
border-radius:8px;
|
||
padding:10px 0;
|
||
cursor:pointer;
|
||
font-weight:700;
|
||
color:#111;
|
||
transition:
|
||
transform 80ms ease,
|
||
box-shadow 120ms ease,
|
||
border-color 120ms ease,
|
||
background-color 120ms ease,
|
||
color 120ms ease;
|
||
}
|
||
|
||
/*
|
||
Base mais “clara” (pastel) e destaque mais “forte” no hover/seleção.
|
||
Isso evita começar chamativo demais, mas deixa bem evidente ao interagir.
|
||
*/
|
||
.eli-nps-btn:hover,
|
||
.eli-nps-btn-selected{transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.14);border-color:#111;}
|
||
.eli-nps-btn:active{transform:translateY(0) scale(0.98);}
|
||
|
||
/*
|
||
Paleta por grupo:
|
||
- 1 a 6: tons de vermelho
|
||
- 7 e 8: tons de amarelo
|
||
- 9 e 10: tons de verde
|
||
*/
|
||
|
||
/* 1–6 (vermelho) */
|
||
.eli-nps-btn-1{background:#ffebee;border-color:#ffcdd2;}
|
||
.eli-nps-btn-1:hover,.eli-nps-btn-1.eli-nps-btn-selected{background:#ef5350;color:#fff;border-color:#ef5350;}
|
||
|
||
.eli-nps-btn-2{background:#ffebee;border-color:#ffcdd2;}
|
||
.eli-nps-btn-2:hover,.eli-nps-btn-2.eli-nps-btn-selected{background:#e53935;color:#fff;border-color:#e53935;}
|
||
|
||
.eli-nps-btn-3{background:#ffebee;border-color:#ffcdd2;}
|
||
.eli-nps-btn-3:hover,.eli-nps-btn-3.eli-nps-btn-selected{background:#d32f2f;color:#fff;border-color:#d32f2f;}
|
||
|
||
.eli-nps-btn-4{background:#ffebee;border-color:#ffcdd2;}
|
||
.eli-nps-btn-4:hover,.eli-nps-btn-4.eli-nps-btn-selected{background:#c62828;color:#fff;border-color:#c62828;}
|
||
|
||
.eli-nps-btn-5{background:#ffebee;border-color:#ffcdd2;}
|
||
.eli-nps-btn-5:hover,.eli-nps-btn-5.eli-nps-btn-selected{background:#b71c1c;color:#fff;border-color:#b71c1c;}
|
||
|
||
.eli-nps-btn-6{background:#ffebee;border-color:#ffcdd2;}
|
||
.eli-nps-btn-6:hover,.eli-nps-btn-6.eli-nps-btn-selected{background:#8e0000;color:#fff;border-color:#8e0000;}
|
||
|
||
/* 7–8 (amarelo) */
|
||
.eli-nps-btn-7{background:#fffde7;border-color:#fff9c4;}
|
||
.eli-nps-btn-7:hover,.eli-nps-btn-7.eli-nps-btn-selected{background:#fdd835;color:#111;border-color:#fdd835;}
|
||
|
||
.eli-nps-btn-8{background:#fff8e1;border-color:#ffecb3;}
|
||
.eli-nps-btn-8:hover,.eli-nps-btn-8.eli-nps-btn-selected{background:#ffb300;color:#111;border-color:#ffb300;}
|
||
|
||
/* 9–10 (verde) */
|
||
.eli-nps-btn-9{background:#e8f5e9;border-color:#c8e6c9;}
|
||
.eli-nps-btn-9:hover,.eli-nps-btn-9.eli-nps-btn-selected{background:#2e7d32;color:#fff;border-color:#2e7d32;}
|
||
|
||
.eli-nps-btn-10{background:#e8f5e9;border-color:#c8e6c9;}
|
||
.eli-nps-btn-10:hover,.eli-nps-btn-10.eli-nps-btn-selected{background:#1b5e20;color:#fff;border-color:#1b5e20;}
|
||
.eli-nps-textarea{width:100%;min-height:100px;border:1px solid #ddd;border-radius:10px;padding:10px;font-size:14px;}
|
||
.eli-nps-actions{display:flex;gap:10px;margin-top:12px;}
|
||
.eli-nps-primary{background:#111;color:#fff;border:1px solid #111;border-radius:10px;padding:10px 14px;cursor:pointer;}
|
||
.eli-nps-secondary{background:#fff;color:#111;border:1px solid #ddd;border-radius:10px;padding:10px 14px;cursor:pointer;}
|
||
.eli-nps-foot{margin-top:10px;color:#666;font-size:12px;}
|
||
.eli-nps-ok{padding:16px;border:1px solid #e5e5e5;border-radius:12px;background:#fafafa;}
|
||
|
||
/*
|
||
Ajustes para dispositivos móveis.
|
||
Objetivo: manter leitura confortável e botões clicáveis sem ficar apertado.
|
||
*/
|
||
@media (max-width: 480px){
|
||
.eli-nps-card{max-width:none;padding:12px;}
|
||
.eli-nps-title{font-size:16px;line-height:1.25;}
|
||
.eli-nps-sub{font-size:13px;}
|
||
.eli-nps-scale{grid-template-columns:repeat(5,1fr);gap:10px;}
|
||
.eli-nps-btn{padding:12px 0;border-radius:10px;}
|
||
.eli-nps-actions{flex-direction:column;}
|
||
.eli-nps-primary,.eli-nps-secondary{width:100%;}
|
||
.eli-nps-textarea{min-height:120px;}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="eli-nps-wrap">
|
||
<div class="eli-nps-card" id="eli-nps-modal-body">
|
||
{{template "form_inner.html" .}}
|
||
</div>
|
||
</body>
|
||
</html>
|
||
{{end}}
|