primeira versão do e-li-nps construido com IA
This commit is contained in:
commit
06950d6e2c
34 changed files with 2524 additions and 0 deletions
117
web/templates/form_page.html
Normal file
117
web/templates/form_page.html
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
{{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}}
|
||||
Loading…
Add table
Add a link
Reference in a new issue