91 lines
5.1 KiB
HTML
91 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1.0"/>
|
|
<title>How did we do? — TechDesk</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap" rel="stylesheet"/>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet"/>
|
|
<style>
|
|
*{box-sizing:border-box;margin:0;padding:0;}
|
|
body{font-family:'DM Sans',sans-serif;background:#f0f4f8;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
|
|
.bg-grid{position:fixed;inset:0;background-image:linear-gradient(#e2e8f0 1px,transparent 1px),linear-gradient(90deg,#e2e8f0 1px,transparent 1px);background-size:48px 48px;opacity:.6;pointer-events:none;}
|
|
.card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:40px;width:100%;max-width:500px;position:relative;z-index:1;box-shadow:0 4px 24px rgba(0,0,0,.08);}
|
|
h1{font-size:22px;font-weight:700;color:#0f172a;margin-bottom:6px;}
|
|
.sub{font-size:13px;color:#64748b;margin-bottom:24px;}
|
|
.ticket-ref{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:12px 16px;margin-bottom:24px;font-size:13px;color:#334155;}
|
|
.ticket-ref strong{color:#2563eb;font-family:'Courier New',monospace;}
|
|
/* Star rating */
|
|
.stars{display:flex;flex-direction:row-reverse;justify-content:center;gap:6px;margin-bottom:28px;}
|
|
.stars input{display:none;}
|
|
.stars label{font-size:44px;color:#e2e8f0;cursor:pointer;transition:color .15s;line-height:1;}
|
|
.stars input:checked ~ label,
|
|
.stars label:hover,
|
|
.stars label:hover ~ label{color:#f59e0b;}
|
|
.stars input:checked + label{color:#f59e0b;}
|
|
textarea{width:100%;border:1px solid #e2e8f0;border-radius:9px;padding:11px 14px;font-size:14px;font-family:inherit;resize:vertical;min-height:90px;color:#0f172a;transition:border-color .15s,box-shadow .15s;}
|
|
textarea:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.1);}
|
|
textarea::placeholder{color:#94a3b8;}
|
|
label.field-label{display:block;font-size:12px;font-weight:600;letter-spacing:.4px;color:#334155;text-transform:uppercase;margin-bottom:7px;}
|
|
.btn{width:100%;background:#2563eb;border:none;color:#fff;border-radius:9px;padding:12px;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s;font-family:inherit;margin-top:16px;box-shadow:0 2px 6px rgba(37,99,235,.3);}
|
|
.btn:hover{background:#1d4ed8;}
|
|
.alert{border-radius:8px;padding:10px 14px;font-size:13px;margin-bottom:16px;background:#fef2f2;color:#dc2626;border:1px solid #fecaca;}
|
|
.rating-hint{text-align:center;font-size:13px;color:#64748b;margin-bottom:4px;min-height:20px;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="bg-grid"></div>
|
|
<div class="card">
|
|
<h1>⭐ How did we do?</h1>
|
|
<p class="sub">Your feedback helps us improve our IT support.</p>
|
|
|
|
<div class="ticket-ref">
|
|
<strong>{{ survey.ticket.ticket_number }}</strong> — {{ survey.ticket.title }}
|
|
</div>
|
|
|
|
{% if error %}
|
|
<div class="alert"><i class="bi bi-exclamation-circle me-2"></i>{{ error }}</div>
|
|
{% endif %}
|
|
|
|
<form method="POST">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
|
|
|
|
<div style="margin-bottom:8px;">
|
|
<label class="field-label" style="text-align:center;display:block;">Your Rating *</label>
|
|
<p class="rating-hint" id="rating-hint">Click a star to rate</p>
|
|
<div class="stars">
|
|
{% for i in [5,4,3,2,1] %}
|
|
<input type="radio" name="rating" id="star{{ i }}" value="{{ i }}"
|
|
{% if quick_rating == i %}checked{% endif %}
|
|
onchange="updateHint({{ i }})"/>
|
|
<label for="star{{ i }}" title="{{ i }} star{{ 's' if i > 1 }}" onmouseover="hintOver({{ i }})" onmouseout="hintOut()">★</label>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="field-label">Comment <span style="font-weight:400;text-transform:none;font-size:11px;color:#94a3b8;">(optional)</span></label>
|
|
<textarea name="comment" placeholder="Tell us what went well or how we could improve…"></textarea>
|
|
</div>
|
|
|
|
<button type="submit" class="btn"><i class="bi bi-send me-2"></i>Submit Feedback</button>
|
|
</form>
|
|
</div>
|
|
<script>
|
|
const hints = {1:'Very dissatisfied',2:'Dissatisfied',3:'Neutral',4:'Satisfied',5:'Very satisfied'};
|
|
function updateHint(n){ document.getElementById('rating-hint').textContent = hints[n] || ''; }
|
|
function hintOver(n){ document.getElementById('rating-hint').textContent = hints[n] || ''; }
|
|
function hintOut(){
|
|
const checked = document.querySelector('.stars input:checked');
|
|
document.getElementById('rating-hint').textContent = checked ? hints[checked.value] : 'Click a star to rate';
|
|
}
|
|
// Auto-submit when star clicked via quick_rating link
|
|
{% if quick_rating %}
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const el = document.getElementById('star{{ quick_rating }}');
|
|
if(el){ el.checked = true; updateHint({{ quick_rating }}); }
|
|
});
|
|
{% endif %}
|
|
</script>
|
|
</body>
|
|
</html>
|