Tune result card towards medical Apple style

frontend/src/App.vue

@@ -47,6 +47,20 @@ const painQuestion = computed(() =>
   questions.value.find((q) => q.code === 'pain_intensity') ?? null,
 )
 
+const priorityClass = computed(() => {
+  const level = result.value?.suggested_priority_level
+  if (!level) return ''
+  if (level === 'RED_OR_ORANGE') return 'priority-high'
+  return 'priority-default'
+})
+
+const priorityLabel = computed(() => {
+  const level = result.value?.suggested_priority_level
+  if (!level) return ''
+  if (level === 'RED_OR_ORANGE') return 'Hohe Dringlichkeit'
+  return 'Priorität'
+})
+
 async function loadQuestions() {
   isLoadingConfig.value = true
   loadError.value = null
@@ -118,8 +132,11 @@ async function startSession() {
   <main class="app">
     <section class="shell">
       <header class="header">
-        <h1>Triage-Fragen</h1>
+        <div class="header-icon">✚</div>
-        <p class="subtitle">Schnelle Vorab-Erfassung für die Notaufnahme</p>
+        <div>
+          <h1>Triage-Fragen</h1>
+          <p class="subtitle">Vorab-Erfassung für die Notaufnahme</p>
+        </div>
       </header>
 
       <section class="block">
@@ -135,7 +152,7 @@ async function startSession() {
       </section>
 
       <template v-if="!isLoadingConfig && !loadError">
-        <section v-if="chiefComplaintQuestion" class="block">
+        <section v-if="chiefComplaintQuestion" class="block card">
           <SymptomSelector
             v-model="chiefComplaint"
             :title="chiefComplaintQuestion.title"
@@ -143,7 +160,7 @@ async function startSession() {
           />
         </section>
 
-        <section v-if="chiefComplaint && painQuestion" class="block">
+        <section v-if="chiefComplaint && painQuestion" class="block card">
           <PainSlider
             v-model="pain"
             :title="painQuestion.title"
@@ -163,24 +180,31 @@ async function startSession() {
           {{ submitError }}
         </section>
 
-        <section v-if="result" class="result block">
+        <section v-if="result" class="result block" :class="priorityClass">
-          <h2>Vorbereitung für MTS</h2>
+          <div class="result-header">
-          <p>
+            <div>
-            Sitzungs-ID:
+              <h2>Vorbereitung für MTS</h2>
-            <strong>{{ result.session_id }}</strong>
+              <p class="result-subtitle">Automatisierte Einschätzung anhand der Antworten</p>
-          </p>
+            </div>
-          <p v-if="result.proposed_presenting_flowchart">
+            <p v-if="priorityLabel" class="priority-pill">
-            Vorgeschlagenes Flussdiagramm:
+              {{ priorityLabel }}
-            <strong>{{ result.proposed_presenting_flowchart }}</strong>
+            </p>
-          </p>
+          </div>
-          <p v-if="result.red_flag_indicators.length">
+
-            Red Flags:
+          <div class="result-body">
-            <strong>{{ result.red_flag_indicators.join(', ') }}</strong>
+            <p class="result-line">
-          </p>
+              <span class="label">Sitzungs-ID</span>
-          <p v-if="result.suggested_priority_level">
+              <span class="value">{{ result.session_id }}</span>
-            Vorgeschlagene Priorität:
+            </p>
-            <strong>{{ result.suggested_priority_level }}</strong>
+            <p v-if="result.proposed_presenting_flowchart" class="result-line">
-          </p>
+              <span class="label">Flussdiagramm</span>
+              <span class="value">{{ result.proposed_presenting_flowchart }}</span>
+            </p>
+            <p v-if="result.red_flag_indicators.length" class="result-line">
+              <span class="label">Red Flags</span>
+              <span class="value">{{ result.red_flag_indicators.join(', ') }}</span>
+            </p>
+          </div>
         </section>
       </template>
     </section>
@@ -195,7 +219,7 @@ async function startSession() {
   display: flex;
   align-items: flex-start;
   justify-content: center;
-  background: #f5f5f7;
+  background: #f2f2f7;
   font-family: -apple-system, system-ui, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
   color: #111827;
 }
@@ -204,34 +228,54 @@ async function startSession() {
   width: 100%;
   max-width: 480px;
   background: #ffffff;
-  border-radius: 24px;
+  border-radius: 28px;
-  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
-  padding: 1.75rem 1.5rem 2rem;
+  padding: 1.75rem 1.5rem 2.1rem;
 }
 
 .header {
-  text-align: center;
+  display: flex;
-  margin-bottom: 1.5rem;
+  align-items: center;
+  gap: 0.9rem;
+  margin-bottom: 1.4rem;
+}
+
+.header-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(145deg, #ff3b30, #ff6b5b);
+  color: #ffffff;
+  font-size: 1.2rem;
 }
 
 h1 {
-  font-size: 1.6rem;
+  font-size: 1.55rem;
   font-weight: 700;
   letter-spacing: -0.02em;
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.1rem;
 }
 
 .subtitle {
-  font-size: 0.9rem;
+  font-size: 0.85rem;
   color: #6b7280;
 }
 
 .block {
-  margin-top: 1.5rem;
+  margin-top: 1.4rem;
+}
+
+.card {
+  padding: 1.1rem 1rem 1rem;
+  border-radius: 20px;
+  background: #f9fafb;
 }
 
 .actions {
-  margin-top: 2rem;
+  margin-top: 1.9rem;
 }
 
 button.primary {
@@ -275,19 +319,67 @@ button.primary:disabled {
 }
 
 .result {
-  margin-top: 2rem;
+  margin-top: 1.8rem;
-  padding: 1.25rem 1rem 1rem;
+  padding: 1.2rem 1rem 1rem;
   border-radius: 20px;
   background: #f9fafb;
+  border-left: 4px solid #e5e7eb;
 }
 
-.result h2 {
+.result.priority-high {
-  font-size: 1.1rem;
+  background: #fef2f2;
+  border-left-color: #ff3b30;
+}
+
+.result.priority-default {
+  background: #eff6ff;
+  border-left-color: #3b82f6;
+}
+
+.result-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.75rem;
   margin-bottom: 0.75rem;
 }
 
-.result p {
+.result h2 {
+  font-size: 1.05rem;
+  margin-bottom: 0.15rem;
+}
+
+.result-subtitle {
+  font-size: 0.8rem;
+  color: #6b7280;
+}
+
+.priority-pill {
+  padding: 0.3rem 0.7rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  background: #fee2e2;
+  color: #b91c1c;
+}
+
+.result-body {
   margin-top: 0.25rem;
-  font-size: 0.95rem;
+}
+
+.result-line {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  font-size: 0.9rem;
+  margin-top: 0.25rem;
+}
+
+.result-line .label {
+  color: #6b7280;
+}
+
+.result-line .value {
+  font-weight: 500;
 }
 </style>