testing

static/animation.css

@@ -1,115 +1,24 @@
-.content {
+/* Style for the container of the carousel */
+.carousel-container {
+    width: 70px;
+    height: 15px;
     overflow: hidden;
-
+    position: relative;
-  &__container {
-    overflow: hidden;
-
-    &:before {
-      content: '[';
-      left: 0;
 }
 
-    &:after {
+/* Style for the list inside the carousel */
-      content: ']';
+.carousel-list {
-      position: absolute;
+    list-style: none;
-      right: 0;
+    padding: 0;
-    }
-
-    &:after, &:before {
-      top: 0;
-      -webkit-animation-name: opacity;
-      -webkit-animation-duration: 2s;
-      -webkit-animation-iteration-count: infinite;
-      animation-name: opacity;
-      animation-duration: 2s;
-      animation-iteration-count: infinite;
-    }
-    &__list {
-      -webkit-animation-name: change;
-      -webkit-animation-duration: 10s;
-      -webkit-animation-iteration-count: infinite;
-      animation-name: change;
-      animation-duration: 10s;
-      animation-iteration-count: infinite;
-
-      &__item {
-        line-height:40px;
     margin: 0;
-      }
+    position: absolute;
-    }
+    top: 0;
-  }
+    transition: top 0.5s ease-in-out;
 }
 
-@-webkit-keyframes opacity {
+/* Style for individual items in the carousel */
-  0%, 100% {opacity:0;}
+.carousel-item {
-  50% {opacity:1;}
+    height: 15px; /* Adjust height as needed */
+    line-height: 15px; /* Adjust line-height to vertically center text */
+    /*border-bottom: 1px solid #ccc; /* Optional: Add border between items */
 }
-
-@-webkit-keyframes change {
-  0%, 12.66%, 100% {transform:translate3d(0,0,0);}
-  16.66%, 29.32% {transform:translate3d(0,-25%,0);}
-  33.32%,45.98% {transform:translate3d(0,-50%,0);}
-  49.98%,62.64% {transform:translate3d(0,-75%,0);}
-  66.64%,79.3% {transform:translate3d(0,-50%,0);}
-  83.3%,95.96% {transform:translate3d(0,-25%,0);}
-}
-
-@-o-keyframes opacity {
-  0%, 100% {opacity:0;}
-  50% {opacity:1;}
-}
-
-@-o-keyframes change {
-  0%, 12.66%, 100% {transform:translate3d(0,0,0);}
-  16.66%, 29.32% {transform:translate3d(0,-25%,0);}
-  33.32%,45.98% {transform:translate3d(0,-50%,0);}
-  49.98%,62.64% {transform:translate3d(0,-75%,0);}
-  66.64%,79.3% {transform:translate3d(0,-50%,0);}
-  83.3%,95.96% {transform:translate3d(0,-25%,0);}
-}
-
-@-moz-keyframes opacity {
-  0%, 100% {opacity:0;}
-  50% {opacity:1;}
-}
-
-@-moz-keyframes change {
-  0%, 12.66%, 100% {transform:translate3d(0,0,0);}
-  16.66%, 29.32% {transform:translate3d(0,-25%,0);}
-  33.32%,45.98% {transform:translate3d(0,-50%,0);}
-  49.98%,62.64% {transform:translate3d(0,-75%,0);}
-  66.64%,79.3% {transform:translate3d(0,-50%,0);}
-  83.3%,95.96% {transform:translate3d(0,-25%,0);}
-}
-
-@keyframes opacity {
-  0%, 100% {opacity:0;}
-  50% {opacity:1;}
-}
-
-@keyframes change {
-  0%, 12.66%, 100% {transform:translate3d(0,0,0);}
-  16.66%, 29.32% {transform:translate3d(0,-25%,0);}
-  33.32%,45.98% {transform:translate3d(0,-50%,0);}
-  49.98%,62.64% {transform:translate3d(0,-75%,0);}
-  66.64%,79.3% {transform:translate3d(0,-50%,0);}
-  83.3%,95.96% {transform:translate3d(0,-25%,0);}
-}
-
-// 6 is the number of animation.
-// Here, there are 4 lines :
-
-// 1 to 2
-// 2 to 3
-// 3 to 4
-// 4 to 3
-// 3 to 2
-// 2 to 1
-
-// 6x + 6y = 100 (100% duration)
-
-// HERE :
-// y = 4 -> Animation between two lines
-// x = 12.66 -> Time spent on a line
-
-// You can define a value and calculate the other if you want change speed or the number of lines

static/scroll.js

@@ -0,0 +1,17 @@
+const carouselList = document.getElementById('carouselList');
+const items = carouselList.getElementsByClassName('carousel-item');
+const itemHeight = items[0].offsetHeight;
+const totalItems = items.length;
+let currentIndex = 0;
+
+function scrollCarousel() {
+    currentIndex++;
+    if (currentIndex === totalItems) {
+        currentIndex = 0;
+    }
+    const displacement = -currentIndex * itemHeight;
+    carouselList.style.top = displacement + 'px';
+}
+
+// Set interval for autoscrolling (adjust timing as needed)
+const scrollInterval = setInterval(scrollCarousel, 2000);

templates/screen.html

@@ -42,15 +42,13 @@
         <tr class="bg-gray-100 border-b">
             {% endif %}
             <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
-                <div class="content">
+                <div class="carousel-container">
-                    <div class="content__container">
+                    <ul class="carousel-list" id="carouselList">
-                        <ul class="content__container__list">
                         {% for ident in flight[i]["ident"] %}
-                            <li class="content__container__list__item">{{ ident }}</li>
+                        <li class="carousel-item">{{ ident }}</li>
                         {% endfor %}
                     </ul>
                 </div>
-                </div>
             </td>
             <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">{{ flight[i]["scheduled_off"] }}</td>
             <td class="px-6 py-4 font-medium text-red-600 whitespace-nowrap">{% if flight[i]["departure_delay"] %}
@@ -87,5 +85,6 @@
         </tbody>
     </table>
 </div>
+<script src="/static/scroll.js"></script>
 </body>
 </html>