-
- {% for ident in flight[i]["ident"] %}
-
- {{ ident }} - {% endfor %} -
-
+ {% for ident in flight[i]["ident"] %}
+
- {{ ident }} + {% endfor %} +
diff --git a/static/animation.css b/static/animation.css index 2315345..3a00876 100644 --- a/static/animation.css +++ b/static/animation.css @@ -1,115 +1,24 @@ -.content { - overflow:hidden; - - &__container { +/* Style for the container of the carousel */ +.carousel-container { + width: 70px; + height: 15px; overflow: hidden; - - &:before { - content: '['; - left: 0; - } - - &:after { - content: ']'; - position: absolute; - right: 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: relative; } -@-webkit-keyframes opacity { - 0%, 100% {opacity:0;} - 50% {opacity:1;} +/* Style for the list inside the carousel */ +.carousel-list { + list-style: none; + padding: 0; + margin: 0; + position: absolute; + top: 0; + transition: top 0.5s ease-in-out; } -@-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 \ No newline at end of file +/* Style for individual items in the carousel */ +.carousel-item { + 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 */ +} \ No newline at end of file diff --git a/static/scroll.js b/static/scroll.js new file mode 100644 index 0000000..3811a17 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/templates/screen.html b/templates/screen.html index 9118615..585b1e3 100644 --- a/templates/screen.html +++ b/templates/screen.html @@ -42,14 +42,12 @@