templating & fade

This commit is contained in:
Rob 2019-09-20 22:14:57 +02:00
parent 32aa22b3a3
commit ef51aa41a2
1 changed files with 54 additions and 14 deletions

View File

@ -16,7 +16,7 @@
<title>Konferenz Wegweiser</title>
</head>
<body>
<div class="container h-100 w-100 fullscreen">
<div class="container w-100 fullscreen">
<div class="row">
<div class="col">
<h1>Konferenz Wegweiser</h1>
@ -28,21 +28,42 @@
Fahrplan-Version: <span class="conf_version"></span>
</div>
</div>
<div class="row">
<div class="col">
<h3>nächste Talks:</h3>
</div>
</div>
<div class="row">
<div class="col">
<div class="card-deck talks">
<div class="page page1">
<div class="row">
<div class="col">
<h3>nächste Talks:</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-sm text-center mt-3">
<img class="img-fluid h-75" alt="Grundriss" src="img/plan4.svg" />
<div class="row">
<div class="col">
<div class="card-deck talks"></div>
</div>
</div>
<div class="row">
<div class="col-sm text-center mt-3">
<img class="img-fluid h-75" alt="Grundriss" src="img/plan4.svg" />
</div>
</div>
</div>
<!-- PAGE 2 !-->
<div class="page page2">
<div class="row mt-5">
<div class="col-sm text-center align-middle mt-3">
<img class="img-fluid h-75" alt="Grundriss" src="img/plan4.svg" />
</div>
</div>
</div>
<!-- PAGE 3 !-->
<div class="page page3">
<div class="row">
<div class="col">
<div class="card-deck talks_all"></div>
</div>
</div>
</div>
</div>
@ -52,6 +73,13 @@
setTimeout(function () {
location.reload();
}, 60000);
function setPage(num)
{
$('.page').hide();
$('.page'+num).fadeIn(500);
}
$.when($.ready).then(function () {
let path = "./schedule/schedule.xml";
$.get(path, function (data) {
@ -78,7 +106,7 @@
var events = s.getNextEvents();
for (var i = 0; i < events.length; i++) {
console.log(events[i]);
event = ` <div class="card">
event = ` <div class="card">
<div class="card-title">
<h2> ${events[i].title} </h2>
</div>
@ -99,6 +127,18 @@
}
}
setTimeout(function () {
setPage(1);
}, 1);
setTimeout(function () {
setPage(2);
}, 20000);
setTimeout(function () {
setPage(3);
}, 40000);
});
})