Jürgen Mummert
410 lines
11 KiB
Twig
410 lines
11 KiB
Twig
<style>
|
|
@font-face {
|
|
font-family: "PT Sans Narrow";
|
|
src: url("{{ asset('bundles/survey/fonts/PTSansNarrow-Regular.woff2') }}") format("woff2");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "PT Sans Narrow";
|
|
src: url("{{ asset('bundles/survey/fonts/PTSansNarrow-Bold.woff2') }}") format("woff2");
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Blogger Sans";
|
|
src: url("{{ asset('bundles/survey/fonts/Blogger%20Sans-Medium.woff2') }}") format("woff2");
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
:root {
|
|
--survey-blue: #0064ad;
|
|
--survey-orange: #ec7c32;
|
|
--survey-purple: #9d5276;
|
|
--survey-green: #00ae97;
|
|
--survey-rose: #fce4d6;
|
|
--survey-black: #222222;
|
|
--survey-gray-dark: #555e68;
|
|
--survey-gray-mid: #a2a8b4;
|
|
--survey-gray-soft: #e9e9eb;
|
|
--survey-surface: rgba(255, 255, 255, 0.92);
|
|
}
|
|
|
|
.survey-brand-strip {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
justify-content: center;
|
|
margin: 0 0 1.75rem;
|
|
padding: 1rem 1.25rem 0.5rem;
|
|
}
|
|
|
|
.survey-brand-logo {
|
|
display: block;
|
|
object-fit: contain;
|
|
object-position: center;
|
|
}
|
|
|
|
.survey-brand-logo.primary {
|
|
width: auto;
|
|
max-width: min(100%, 320px);
|
|
height: 75px;
|
|
}
|
|
|
|
.survey-brand-logo.secondary {
|
|
width: auto;
|
|
max-width: min(100%, 420px);
|
|
height: 75px;
|
|
}
|
|
|
|
.survey-shell {
|
|
color: var(--survey-black);
|
|
font-family: "PT Sans Narrow", sans-serif;
|
|
letter-spacing: 0.3px;
|
|
background:
|
|
radial-gradient(circle at top left, rgba(0, 100, 173, 0.22), transparent 30%),
|
|
radial-gradient(circle at bottom right, rgba(0, 174, 151, 0.12), transparent 34%),
|
|
linear-gradient(180deg, rgba(0, 100, 173, 0.12) 0%, rgba(255, 255, 255, 0.98) 52%, rgba(0, 100, 173, 0.08) 100%);
|
|
border: 1px solid rgba(162, 168, 180, 0.45);
|
|
border-radius: 2rem;
|
|
box-shadow: 0 28px 80px rgba(34, 34, 34, 0.08);
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.survey-shell h2,
|
|
.survey-shell h3,
|
|
.survey-shell h4 {
|
|
font-family: "Blogger Sans", sans-serif;
|
|
font-weight: 500;
|
|
color: var(--survey-blue);
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.survey-shell,
|
|
.survey-shell * {
|
|
font-style: normal;
|
|
}
|
|
|
|
.survey-grid {
|
|
display: grid;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.survey-grid-columns {
|
|
display: grid;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.survey-results-card {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.survey-results-layout {
|
|
display: grid;
|
|
gap: 1.25rem;
|
|
margin-top: 1.1rem;
|
|
align-items: start;
|
|
}
|
|
|
|
.survey-results-layout.no-chart {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.survey-chart-panel {
|
|
position: relative;
|
|
min-height: 320px;
|
|
}
|
|
|
|
.survey-chart-panel::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 1.5rem;
|
|
background:
|
|
radial-gradient(circle at top left, rgba(0, 100, 173, 0.18), transparent 42%),
|
|
radial-gradient(circle at bottom right, rgba(236, 124, 50, 0.18), transparent 42%),
|
|
linear-gradient(135deg, rgba(0, 100, 173, 0.12) 0%, rgba(255, 255, 255, 0.9) 52%, rgba(236, 124, 50, 0.12) 100%);
|
|
border: 1px solid rgba(162, 168, 180, 0.28);
|
|
}
|
|
|
|
.survey-chart-frame {
|
|
position: relative;
|
|
z-index: 1;
|
|
min-height: 320px;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.survey-chart-panel.is-line .survey-chart-frame {
|
|
min-height: 360px;
|
|
padding: 1rem 1rem 0.75rem;
|
|
}
|
|
|
|
.survey-chart-canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.survey-results-panel {
|
|
display: grid;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.survey-results-list {
|
|
display: grid;
|
|
gap: 0.9rem;
|
|
}
|
|
|
|
.survey-results-row {
|
|
display: grid;
|
|
gap: 0.45rem;
|
|
padding: 0.9rem 1rem;
|
|
border-radius: 1.15rem;
|
|
background: rgba(255, 255, 255, 0.78);
|
|
border: 1px solid rgba(162, 168, 180, 0.24);
|
|
}
|
|
|
|
.survey-results-responses {
|
|
max-height: 24rem;
|
|
overflow: auto;
|
|
padding-right: 0.25rem;
|
|
}
|
|
|
|
.survey-response-card {
|
|
margin: 0;
|
|
font-style: normal;
|
|
background: rgba(255, 255, 255, 0.72);
|
|
}
|
|
|
|
.survey-metric-grid {
|
|
display: grid;
|
|
gap: 0.85rem;
|
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
|
}
|
|
|
|
.survey-metric-card {
|
|
display: grid;
|
|
gap: 0.35rem;
|
|
padding: 0.95rem 1rem;
|
|
border-radius: 1.2rem;
|
|
background: rgba(252, 228, 214, 0.38);
|
|
border: 1px solid rgba(236, 124, 50, 0.16);
|
|
}
|
|
|
|
.survey-metric-card strong {
|
|
font-family: "Blogger Sans", sans-serif;
|
|
font-size: 1.35rem;
|
|
color: var(--survey-blue);
|
|
}
|
|
|
|
.survey-metric-label {
|
|
font-size: 0.78rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--survey-gray-dark);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.survey-card {
|
|
background: var(--survey-surface);
|
|
border: 1px solid rgba(162, 168, 180, 0.34);
|
|
border-radius: 1.5rem;
|
|
padding: 1.25rem;
|
|
box-shadow: 0 12px 32px rgba(34, 34, 34, 0.06);
|
|
}
|
|
|
|
.survey-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.survey-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.25rem 0.65rem;
|
|
border-radius: 999px;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
background: rgba(162, 168, 180, 0.16);
|
|
}
|
|
|
|
.survey-badge.success { background: rgba(0, 174, 151, 0.16); color: var(--survey-green); }
|
|
.survey-badge.warning { background: rgba(236, 124, 50, 0.16); color: var(--survey-orange); }
|
|
.survey-badge.neutral { background: rgba(162, 168, 180, 0.16); color: var(--survey-gray-dark); }
|
|
|
|
.survey-button-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.survey-button {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.8rem 1rem;
|
|
border-radius: 999px;
|
|
border: 1px solid transparent;
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.survey-button.primary { background: var(--survey-blue); color: #fff; }
|
|
.survey-button.secondary { background: rgba(255,255,255,0.86); color: var(--survey-blue); border-color: rgba(0,100,173,0.18); }
|
|
.survey-button.danger { background: rgba(157, 82, 118, 0.12); color: var(--survey-purple); border-color: rgba(157, 82, 118, 0.22); }
|
|
|
|
.survey-form-grid {
|
|
display: grid;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.survey-label {
|
|
display: grid;
|
|
gap: 0.4rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.survey-label input,
|
|
.survey-label textarea,
|
|
.survey-label select {
|
|
width: 100%;
|
|
border-radius: 1rem;
|
|
border: 1px solid rgba(162,168,180,0.5);
|
|
padding: 0.8rem 0.9rem;
|
|
background: rgba(255,255,255,0.98);
|
|
color: var(--survey-black);
|
|
}
|
|
|
|
.survey-inline-check {
|
|
display: inline-flex;
|
|
gap: 0.6rem;
|
|
align-items: center;
|
|
border: 1px solid rgba(162,168,180,0.35);
|
|
border-radius: 1rem;
|
|
padding: 0.8rem 1rem;
|
|
background: rgba(252,228,214,0.42);
|
|
}
|
|
|
|
.survey-alert {
|
|
border-radius: 1.2rem;
|
|
padding: 1rem 1.1rem;
|
|
margin-bottom: 1rem;
|
|
background: rgba(255,255,255,0.78);
|
|
border: 1px solid rgba(162,168,180,0.35);
|
|
}
|
|
|
|
.survey-alert.error { border-color: rgba(157, 82, 118, 0.28); color: var(--survey-purple); }
|
|
.survey-alert.warning { border-color: rgba(236, 124, 50, 0.28); color: var(--survey-orange); }
|
|
|
|
.survey-kpis {
|
|
display: grid;
|
|
gap: 1rem;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
}
|
|
|
|
.survey-progress {
|
|
width: 100%;
|
|
height: 0.75rem;
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
background: rgba(162,168,180,0.22);
|
|
}
|
|
|
|
.survey-progress > span {
|
|
display: block;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, var(--survey-blue) 0%, var(--survey-orange) 100%);
|
|
}
|
|
|
|
.survey-progress-bar {
|
|
display: block;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, var(--survey-blue) 0%, var(--survey-orange) 100%);
|
|
}
|
|
|
|
.survey-range-output {
|
|
font-size: 2rem;
|
|
font-weight: 800;
|
|
color: var(--survey-green);
|
|
}
|
|
|
|
@media (min-width: 960px) {
|
|
.survey-grid-columns {
|
|
grid-template-columns: 0.95fr 1.05fr;
|
|
}
|
|
|
|
.survey-results-layout {
|
|
grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.survey-brand-strip {
|
|
padding: 0.75rem 0.75rem 0.25rem;
|
|
}
|
|
|
|
.survey-brand-logo.secondary {
|
|
height: 75px;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
document.querySelectorAll('[data-survey-range]').forEach(function (input) {
|
|
var targetId = input.getAttribute('data-survey-range-target');
|
|
var output = targetId ? document.getElementById(targetId) : null;
|
|
|
|
if (!output) {
|
|
return;
|
|
}
|
|
|
|
var update = function () {
|
|
output.textContent = input.value;
|
|
};
|
|
|
|
input.addEventListener('input', update);
|
|
update();
|
|
});
|
|
|
|
document.querySelectorAll('[data-survey-question-type]').forEach(function (select) {
|
|
var wrapper = select.closest('[data-survey-question-editor]');
|
|
if (!wrapper) {
|
|
return;
|
|
}
|
|
|
|
var toggle = function () {
|
|
var showRange = select.value === 'range';
|
|
var showYesNoMaybe = select.value === 'yes_no_maybe';
|
|
var showChoice = select.value === 'choice';
|
|
|
|
wrapper.querySelectorAll('.range-config-field').forEach(function (element) {
|
|
element.style.display = showRange ? '' : 'none';
|
|
});
|
|
|
|
wrapper.querySelectorAll('.yes-no-config-field').forEach(function (element) {
|
|
element.style.display = showYesNoMaybe ? '' : 'none';
|
|
});
|
|
|
|
wrapper.querySelectorAll('.choice-config-field').forEach(function (element) {
|
|
element.style.display = showChoice ? '' : 'none';
|
|
});
|
|
};
|
|
|
|
select.addEventListener('change', toggle);
|
|
toggle();
|
|
});
|
|
});
|
|
</script> |