Merge branch 'main' of https://gitea.fhgr.ch/koehleestell/Social_Cooking

css/event_create.css

@@ -33,6 +33,44 @@
   padding: var(--space-4) 0 var(--space-7);
 }
 
+.submission-success .step-copy {
+  align-content: center;
+}
+
+.submission-success-title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-5);
+  width: 100%;
+}
+
+.submission-success-title-row h2 {
+  margin-bottom: 0;
+}
+
+.submission-success-icon {
+  width: 2.5rem;
+  height: 2.5rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--brown);
+  font-size: 3rem;
+  line-height: 1;
+  transform: translateY(0.4rem);
+}
+
+.submission-success-image {
+  object-position: 42% center;
+}
+
+.submission-success .intro-card--image {
+  width: min(100%, 40rem);
+  aspect-ratio: 4 / 5;
+  align-self: center;
+  justify-self: center;
+}
+
 .step--active {
   display: block;
 }
@@ -294,7 +332,8 @@ textarea:focus {
 
 .submission-success-actions {
   display: flex;
-  justify-content: center;
+  justify-content: flex-start;
+  width: 100%;
 }
 
 .flow-footer {

event_create.html

@@ -9,9 +9,12 @@
   <link rel="stylesheet" href="css/event_create.css" />
   <script src="js/navigation.js" defer></script>
 
-    <!-- Globales Stylesheet -->
+  <!-- Globales Stylesheet -->
   <link rel="stylesheet" href="css/stylesheet_global.css">
 
+  <!-- Font Awesome Icons -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+
 </head>
 
 <body>
@@ -409,25 +412,35 @@
 
       <section
         id="submissionSuccess"
-        class="submission-success"
+        class="submission-success layout-wide"
         aria-labelledby="success-title"
         aria-live="polite"
         hidden
       >
-        <div class="step-layout">
+        <div class="step-layout step-layout--intro hero startseite">
           <div class="step-copy">
             <p class="badge">Event erstellt</p>
-            <h2 id="success-title">Dein Event ist ready.</h2>
+            <div class="submission-success-title-row">
+              <h2 id="success-title">Dein Event ist ready</h2>
+              <span class="submission-success-icon" aria-hidden="true">
+                <i class="fa-solid fa-champagne-glasses"></i>
+              </span>
+            </div>
             <p class="step-text">
               Sieht gut aus: Deine Idee ist jetzt live und bereit für Gäste.
               Im Profil kannst du dein Event anschauen, verwalten oder direkt das nächste planen.
             </p>
+            <div class="submission-success-actions">
+              <a class="button-primary button--intro" href="my_profil.html">Weiter zu deinem Profil</a>
+            </div>
           </div>
 
-          <div class="review-card review-card--success">
+          <div class="intro-card intro-card--image hero__right" aria-label="Stimmungsbild zum erstellten Event">
-            <div class="submission-success-actions">
+            <img
-              <a class="button-primary" href="my_profil.html">Weiter zu deinem Profil</a>
+              class="intro-image submission-success-image"
-            </div>
+              src="assets/eventcreate_foodtable with friends.jpg"
+              alt="Gemeinsames Essen an einem gedeckten Tisch"
+            >
           </div>
         </div>
       </section>