index.html
files/seq.css
files/seq.js
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<script src="data.js"></script>
<script src="libs/vue.min.js"></script>
<script src="libs/fullscreen.js"></script>
<link href="libs/animate.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="libs/bootstrap.min.css">
<link rel="stylesheet" href="files/seq.css">
<style>
#app {
width: 100%;
height: 100vh;
background: #013763;
padding; 0; margin: 0
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.spin {
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.progress-bar {
position: relative;
height: 25px;
width: 100%;
background: white;
border-radius: 25px;
border: 2px solid white;
background-color: blue);
box-shadow: 0 0 12px blue;
}
.progress-fill {
position: absolute;
height: 20px;
width: 0%;
animation: progress-forward 8s;
background: rgb(34, 193, 195);
background: linear-gradient(
90deg,
rgba(34, 193, 195, 1) 0%,
rgba(45, 63, 253, 1) 100%
);
border-radius: 15px;
}
@keyframes progress-forward {
0% {
width: 0%;
}
25% {
width: 30%;
}
50% {
width: 62%;
}
75% {
width: 87%;
}
100% {
width: 100%;
}
} ;
</style>
</head>
<body>
<div id="app">
<div class="fullw fullh" @click="screen = 1" v-if="screen == 0" style="z-index: 10">
<img src="files/zoom0a.jpg" v-show="screen == 0" class="fullw absbot">
</div>
<div class="fullw fullh" @click="runupdate" v-show="screen == 1">
<img src="files/zoom1.jpg" v-show="screen==1" class="fullw absbot">
<img src="files/cog.png" style="position: absolute; bottom: 25Vw; left: 46vw; width: 8vw" class="spin" >
</div>
<div class="fullw fullh" v-show="screen==2" @click.stop="screen = 3">
<img src="files/zoom2.jpg" class="fullw absbot">
<div style="position: absolute; bottom: 25vw; left: 35vw; width: 30vw">
<div class="progress-bar">
<div class="progress-fill"></div>
</div>
</div>
</div>
<div class="fullw fullh" v-show="screen==3" @click="showvideo">
<img src="files/zoom3.jpg" class="fullw absbot">
<transition name="fade">
<div v-if="select" key="select" style="background: rgb(36 86 185 / 33%);
width: 14.76vw;
height: 2.2vw;
position: absolute;
bottom: 40vw;
left: 2.2vw;"></div></transition>
</div>
<div class="fullw fullh" v-show="screen==4" @click.stop="playpause">
<img src="files/zoom4.jpg" class="fullw absbot">
<div id="vid" style=" background: green; position: absolute;
bottom: 10.3vw;
left: 8.8vw;
height: 37vw;
width: 65vw;"></div>
</div>
</div>
</body>
<script type="text/javascript" src="files/seq.js"></script>
</html>
.fullw {
width: 100%;
}
.fullh {
height: 100vh;
}
.flexcenter {
display: flex;
justify-content: center;
align-items: center;
}
.abstop {
position: absolute; top: 0; left: 0;
}
.absbot {
position: absolute; bottom: 0; left: 0;
}
var cc_data = cc_data || {};
new Vue({
el: '#app',
data: {
select: false,
screen: 0,
},
created: function () {
var that = this;
document.addEventListener('keydown', function () {
if (that.screen == 1) { that.runupdate(); }
else if (that.screen == 4) {
that.playpause();
}
})
},
mounted: function () {
},
methods: {
playpause: function () {
let video = document.getElementById('vid');
if (video.paused) {
video.currentTime = 0;
video.play();
} else {
video.pause();
}
},
runupdate: function () {
var that = this;
this.screen = 2;
setTimeout(function () {
if (that.screen == 2 ) {
that.screen = 3;
}
}, 8000);
},
showvideo: function () {
var that = this;
this.select = true;
setTimeout(function () { that.screen = 4; that.select = false; }, 500);
setTimeout(function () { document.getElementById('vid').play(); }, 800);
},
init: function () {
},
stopPropagation: function (e) {
e.stopPropagation();
}
}
})
Glisser-déposer des fichiers ou dossiers ici
ou utiliser les boutons ci-dessous
| Nom | Taille | Statut | Actions |
|---|