OpenNIT

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

<?php
// Standalone-Seite — kein Admin-Layout, das ist die Außenseite für
// nicht-eingeloggte Kunden. Wir rendern komplettes HTML inline.
$csrf = $this->csrf();
$isPreview = !empty($preview);
?><!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex">
    <title><?= $this->e($ui['title']) ?></title>
    <link rel="stylesheet" href="/assets/css/fonts.css">
    <link rel="stylesheet" href="/assets/css/tokens.css">
    <?php if (($design_style ?? 'standard') === 'material'): ?><link rel="stylesheet" href="/assets/css/theme-material.css"><?php endif; ?>
    <link rel="stylesheet" href="/assets/css/app.css">
    <style>
        :root { color-scheme: light; }
        /* Zentrierte Einzelkarte – Typografie, Buttons und Formularfelder kommen aus app.css */
        body {
            padding: 2rem 1rem;
            min-height: 100vh; display: flex; align-items: center; justify-content: center;
        }
        .csat-card {
            background: var(--color-bg); border-radius: 0.85rem;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
            max-width: 520px; width: 100%;
            padding: 2rem 2.25rem;
        }
        .csat-logo { text-align: center; margin-bottom: 1rem; }
        .csat-logo img { max-height: 64px; max-width: 240px; }
        .csat-card h1 { font-size: 1.4rem; line-height: 1.3; margin-bottom: 0.75rem; }
        .csat-intro { color: var(--color-text-muted); margin: 0 0 1.5rem; line-height: 1.5; font-size: 0.95rem; }
        .stars {
            display: flex; gap: 0.4rem; justify-content: center;
            margin: 1.5rem 0; direction: rtl;
        }
        .stars input { display: none; }
        .stars label {
            font-size: 2.5rem; cursor: pointer; color: var(--gray-300);
            transition: color .12s, transform .12s;
            user-select: none;
        }
        .stars label:hover,
        .stars label:hover ~ label,
        .stars input:checked ~ label { color: var(--amber-500); transform: scale(1.08); }
        .stars label:active { transform: scale(0.95); }
        .csat-comment { min-height: 90px; resize: vertical; }
        .csat-submit { margin-top: 1.25rem; }
        .csat-footer { margin-top: 1.5rem; font-size: 0.78rem; color: var(--gray-400); text-align: center; }
    </style>
</head>
<body<?= ($design_style ?? 'standard') === 'material' ? ' class="design-material"' : '' ?>>
    <div class="csat-card">
        <?php if ($isPreview): ?>
        <div class="alert alert-warning">
            <?= $this->t('<strong>Vorschau</strong> – so sehen Empfänger die Bewertungsseite. Eingaben werden hier nicht gespeichert. Es werden die zuletzt gespeicherten Einstellungen angezeigt.') ?>
        </div>
        <?php endif; ?>
        <?php if (!empty($app_logo)): ?>
        <div class="csat-logo"><img src="<?= $this->e($app_logo) ?>" alt="<?= $this->e($app_name ?? '') ?>"></div>
        <?php endif; ?>

        <h1><?= $this->e($ui['title']) ?></h1>
        <p class="csat-intro"><?= nl2br($this->e($ui['intro'])) ?></p>

        <form method="POST" action="<?= $isPreview ? '#' : '/feedback/' . $this->e($token) ?>" id="csat-form"<?= $isPreview ? ' onsubmit="return false;"' : '' ?>>
            <input type="hidden" name="_csrf" value="<?= $this->e($csrf) ?>">

            <!-- 5 versteckte Radios, von 5 → 1 wegen direction:rtl Trick
                 für den "alle Sterne links vom gewählten sind gelb"-Effekt -->
            <div class="stars" role="radiogroup" aria-label="<?= $this->te('Sterne-Bewertung') ?>">
                <input type="radio" name="rating" id="star5" value="5" required>
                <label for="star5" title="<?= $this->te('Sehr gut') ?>">★</label>
                <input type="radio" name="rating" id="star4" value="4">
                <label for="star4" title="<?= $this->te('Gut') ?>">★</label>
                <input type="radio" name="rating" id="star3" value="3">
                <label for="star3" title="<?= $this->te('Okay') ?>">★</label>
                <input type="radio" name="rating" id="star2" value="2">
                <label for="star2" title="<?= $this->te('Schlecht') ?>">★</label>
                <input type="radio" name="rating" id="star1" value="1">
                <label for="star1" title="<?= $this->te('Sehr schlecht') ?>">★</label>
            </div>

            <div class="form-group">
                <label for="comment"><?= $this->te('Möchten Sie uns etwas mitteilen? (optional)') ?></label>
                <textarea name="comment" id="comment" class="form-control csat-comment" maxlength="2000" placeholder="<?= $this->te('Was hat gut funktioniert, was können wir besser machen?') ?>"></textarea>
            </div>

            <button type="submit" class="btn btn-primary btn-block csat-submit" id="csat-submit" disabled><?= $this->te('Bewertung abgeben') ?></button>
        </form>
        <p class="csat-footer"><?= $this->te('Ihre Rückmeldung wird vertraulich behandelt.') ?></p>
    </div>

    <script>
        // Submit-Button erst aktivieren, wenn ein Stern gewählt wurde
        // (clientseitige Vorabprüfung; serverseitig validieren wir trotzdem).
        document.querySelectorAll('input[name="rating"]').forEach(function (r) {
            r.addEventListener('change', function () {
                document.getElementById('csat-submit').disabled = false;
            });
        });
    </script>
</body>
</html>