From cafb7e5551d651f5877bebdceb15b6f932c060b1 Mon Sep 17 00:00:00 2001
From: Victor Adriel <victorajoliveira@gmail.com>
Date: Mon, 9 Sep 2024 06:55:52 +0200
Subject: [PATCH] News: Interactive Web Comic added to the recent updates

---
 docs/index.html | 45 +++++++++++++++++++++++++++++++--------------
 1 file changed, 31 insertions(+), 14 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index a62b7f8..da1a729 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -232,14 +232,17 @@ <h2 class="text-white display-1 lh-1 mb-4">
                         Community Contributions
                     </h2>
                     <p class="lead fw-normal text-white mb-5">Comixplain is a modular solution. Editable files are available in our repository, allowing you to use the stories as they are or to adapt them according to your needs. You can even use the provided assets to create your own stories from scratch. We encourage you to share any adaptation you make of our stories under the same licensing scheme.</p>
-                    <a class="btn btn-outline-light py-3 px-4 rounded-pill" href="https://github.com/fhstp/comixplain/tree/main/Community_Contributions" target="_blank">See Comixplain derivatives in our repository</a><br/><br/><br/>
+                    <a class="btn btn-outline-light py-3 px-4 rounded-pill" href="https://github.com/fhstp/comixplain/tree/main/Community_Contributions" target="_blank">See Comixplain derivatives in our repository</a><br/><br/>
+
+                    <br id="news" />
+
                     <h3 class="text-white display-6 lh-1 mb-4 mt-5">
                         Recent Updates:
                     </h3>
                     <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
                         <div class="carousel-inner">
                             <div class="carousel-item active" data-bs-interval="30000">
-                                <div class="row wrapperCarouselCards row-cols-1 row-cols-md-4 g-4">
+                                <div class="row wrapperCarouselCards row-cols-1 row-cols-lg-4 g-4">
                                   
                                   <div class="col">
                                     <div class="card text-center">
@@ -269,6 +272,20 @@ <h5 class="card-title">Comic Construction Kit</h5>
                                     </div>
                                   </div>
 
+                                  <div class="col">
+                                    <div class="card text-center">
+                                      <img src="./assets/carousel/carousel_item_webcomic.png" class="card-img-top" alt="">
+                                      <div class="card-body">
+                                        <h5 class="card-title">Interactive Web Comic</h5>
+                                        <small class="text-muted">Web-Comic for Nuclear Medicine Education created by Silvia Angjeliu. Currently available only in German</small>
+                                      </div>
+                                      <ul class="list-group list-group-flush">
+                                        <li class="list-group-item"><small class="text-muted"><a href="https://vdejesus-10510.node.fhstp.cc/" class="btn btn-primary">Try it out</a></small></li>
+                                      </ul>
+                                      <div class="card-footer"><small class="text-muted">Added on Sept, 2024</small></div>
+                                    </div>
+                                  </div>
+
                                   <div class="col">
                                     <div class="card text-center">
                                       <img src="./assets/carousel/carousel_item_translation.png" class="card-img-top" alt="">
@@ -283,6 +300,12 @@ <h5 class="card-title">New Translations</h5>
                                     </div>
                                   </div>
 
+                                </div>
+                            </div>
+
+                            <div class="carousel-item" data-bs-interval="30000">
+                                <div class="row wrapperCarouselCards row-cols-1 row-cols-lg-4 g-4">
+                                  
                                   <div class="col">
                                     <div class="card text-center">
                                       <img src="./assets/carousel/carousel_item_press.png" class="card-img-top" alt="">
@@ -297,12 +320,6 @@ <h5 class="card-title">News</h5>
                                     </div>
                                   </div>
 
-                                </div>
-                            </div>
-
-                            <div class="carousel-item" data-bs-interval="30000">
-                                <div class="row wrapperCarouselCards row-cols-1 row-cols-md-4 g-4">
-                                  
                                   <div class="col">
                                     <div class="card text-center">
                                       <img src="./assets/carousel/carousel_item_translation.png" class="card-img-top" alt="">
@@ -345,6 +362,12 @@ <h5 class="card-title">News</h5>
                                     </div>
                                   </div>
 
+                                </div>
+                            </div>
+
+                            <div class="carousel-item" data-bs-interval="30000">
+                                <div class="row wrapperCarouselCards row-cols-1 row-cols-lg-4 g-4">
+                                  
                                   <div class="col">
                                     <div class="card text-center">
                                       <img src="./assets/carousel/carousel_item_catalog.png" class="card-img-top" alt="">
@@ -359,12 +382,6 @@ <h5 class="card-title">Catalog Search</h5>
                                     </div>
                                   </div>
 
-                                </div>
-                            </div>
-
-                            <div class="carousel-item" data-bs-interval="30000">
-                                <div class="row wrapperCarouselCards row-cols-1 row-cols-md-4 g-4">
-                                  
                                   <div class="col">
                                     <div class="card text-center">
                                       <img src="./assets/carousel/carousel_item_ar.png" class="card-img-top" alt="">