04/07 updated password reset, ticket templates, and satisfaction survey

2026-04-07 17:32:11 -04:00
parent 36945f5976
commit 60db5c3f9a
18 changed files with 1309 additions and 105 deletions
@@ -0,0 +1,90 @@
+<!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>