mirror of
https://github.com/ae-utbm/sith.git
synced 2025-09-23 16:43:53 +00:00
47 lines
1.6 KiB
Django/Jinja
47 lines
1.6 KiB
Django/Jinja
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<title>{% trans %}Slideshow{% endtrans %}</title>
|
|
<link rel="shortcut icon" href="{{ static('core/img/favicon.ico') }}">
|
|
<link href="{{ static('css/slideshow.scss') }}" rel="stylesheet" type="text/css" />
|
|
<script type="module" src="{{ static('bundled/alpine-index.js') }}"></script>
|
|
<script type="module" src="{{ static('bundled/com/slideshow-index.ts') }}"></script>
|
|
</head>
|
|
<body x-data="slideshow([
|
|
{% for poster in posters %}
|
|
{
|
|
url: '{{ poster.file.url }}',
|
|
displayTime: {{ poster.display_time }}
|
|
},
|
|
{% endfor %}
|
|
])">
|
|
<div
|
|
id="slideshow"
|
|
@click="toggleFullScreen"
|
|
hover="{% trans %}Click to expand{% endtrans %}"
|
|
@keyup.f.window="toggleFullScreen"
|
|
>
|
|
|
|
<div id="slides">
|
|
<template x-for="(poster, index) in posters">
|
|
<div class="slide" :class="{
|
|
current: index === current,
|
|
previous: index !== current && index === previous,
|
|
}">
|
|
<img :src="poster.url">
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<div id="progress_bullets">
|
|
<template x-for="(poster, index) in posters">
|
|
<div class="bullet" :class="{active: current === index}"></div>
|
|
</template>
|
|
</div>
|
|
|
|
<progress :value="progress" max="100" x-show="posters.length > 1 && progress > 0"></progress>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|