| Server IP : 109.234.162.214 / Your IP : 216.73.216.222 Web Server : Apache System : Linux servd162214.srv.odns.fr 4.18.0-372.26.1.lve.1.el8.x86_64 #1 SMP Fri Sep 16 14:08:19 EDT 2022 x86_64 User : carpe ( 1178) PHP Version : 8.0.30 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/carpe/public_html/Sae 302/V2/ |
Upload File : |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main2.css">
<title>OSINT</title>
<style>
body{
width:100%;
height:100vh;
margin:0;
padding:0;
background:black;
display:flex;
justify-content:center;
align-items:center;
position:fixed;
}
#contain{
margin:0;
padding:0;
width:100%;
height:100vh;
background-image:url('webtest.png');
background-size:cover;
background:black;
}
video{
width:1800px;
}
#zoom_exemples{
display:none;
}
#dezoom_exemples{
display:none;
}
#texte_exemples{
position:absolute;
top:50px;
left:50px;
width:200px;
cursor:pointer;
z-index:999;
}
video{
position:absolute;
}
#retour{
z-index:999;
position:absolute;
right:25px;
bottom:25px;
width:200px;
display:none;
cursor:pointer;
}
#zoom_exemple_ukraine{
display:none;
}
#zoom_exemple_israel{
display:none;
}
#present1{
width:57%;
height:100%;
background:red;
display:flex;
position:absolute;
z-index:111;
display:none;
left:0;
cursor:pointer;
opacity:0;
}
#present2{
width:43%;
height:100%;
background:green;
display:flex;
position:absolute;
z-index:111;
display:none;
right:0;
opacity:0;
cursor:pointer;
}
#dezoom_exemple_ukraine{
display:none;
}
#dezoom_exemple_israel{
display:none;
}
#ukraine{
width:100%;
height:100%;
position:absolute;
display:none;
opacity:0;
}
#ukraine div{
position:absolute;
}
#ukraine1{
bottom:0px;
left:800px;
width:400px;
height:400px;
background:red;
}
#ukraine2{
top:0;
left:650px;
width:500px;
height:300px;
background:green;
}
#ukraine3{
top:0;
right:0;
width:500px;
height:400px;
background:white;
}
#ukraine4{
top:0;
left:200px;
width:400px;
height:550px;
background:yellow;
}
#ukraine5{
bottom:0;
left:400px;
width:300px;
height:400px;
background:pink;
}
#ukraine6{
bottom:200px;
right:150px;
width:300px;
height:300px;
}
.israel{
z-index:888;
display:none;
}
#israel1{
width:400px;
position:relative;
left:-200px;
}
#israel2{
width:400px;
position:relative;
left:-100px;
}
#israel22{
position:relative;
left:100px;
}
#israel33{
position:relative;
left:-50px;
}
#israel34{
position:relative;
left:200px;
}
#israel4{
width:400px;
position:relative;
left:-100px;
}
</style>
</head>
<body>
<video id='israel1' class='israel' controls>
<source src="videos/israel/1.mp4" type="video/mp4">
</video>
<video id='israel2' class='israel' controls>
<source src="videos/israel/2.mp4" type="video/mp4">
</video>
<video id='israel4' class='israel' controls>
<source src="videos/israel/4.mp4" type="video/mp4">
</video>
<img class='israel' id='israel11' src='images/israel/1.png'>
<img class='israel' id='israel22' src='images/israel/2.png'>
<img class='israel' id='israel33' src='images/israel/3.png'>
<img class='israel' id='israel34' src='images/israel/times.png'>
<img class='israel' id='israel44' src='images/israel/4.png'>
<img class='israel' id='israel5' src='images/israel/5.png'>
<img class='israel' id='israel6' src='images/israel/conclusion.png'>
<div id='present1'></div>
<div id='present2'></div>
<img id='texte_exemples' src='images/texte_exemples.png'>
<img id='retour' src='images/retour.png'>
<video id='videostatic' autoplay muted loop>
<source src="videos/1.mp4" type="video/mp4">
</video>
<video id='zoom_exemples' preload="none">
<source src="videos/zoom_exemples.mp4" type="video/mp4">
</video>
<video id='dezoom_exemples' preload="none">
<source src="videos/dezoom_exemples.mp4" type="video/mp4">
</video>
<video id='zoom_exemple_ukraine' preload="none">
<source src="videos/zoom_exemple_ukraine.mp4" type="video/mp4">
</video>
<video id='dezoom_exemple_ukraine' preload="none">
<source src="videos/dezoom_exemple_ukraine.mp4" type="video/mp4">
</video>
<video id='zoom_exemple_israel' preload="none">
<source src="videos/zoom_exemple_israel.mp4" type="video/mp4">
</video>
<video id='dezoom_exemple_israel' preload="none">
<source src="videos/dezoom_exemple_israel.mp4" type="video/mp4">
</video>
<div id='ukraine'>
<div id='ukraine1'></div>
<div id='ukraine2'></div>
<div id='ukraine3'></div>
<div id='ukraine4'></div>
<div id='ukraine5'></div>
<div id='ukraine6'></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
let valeur = 0;
$('#texte_exemples').on('click',function(){
valeur = 1;
const zoom_exemples = $('#zoom_exemples').get(0);
zoom_exemples.play();
//display de la div video
$('#dezoom_exemples').css('display','none')
$('#zoom_exemples').css('display','block')
//suppression du background derriere / ne pas surcharger la page
setTimeout(function(){
$('#videostatic').css('display','none')
$('#retour').css('display','block')
dezoom_exemples.pause();
dezoom_exemples.currentTime = 0;
$('#present1').css('display','block')
$('#present2').css('display','block')
},3000)
//supprimer le texte d'envoi
$('#texte_exemples').css('display','none')
})
$('#retour').on('click',function(){
console.log(valeur)
if(valeur == 1){
//desactiver le dezoom précédent au cas ou
const dezoom_exemples = $('#dezoom_exemples').get(0);
dezoom_exemples.play();
//suppression du bouton retour.
$('#retour').css('display','none')
$('#dezoom_exemples').css('display','block')
$('#dezoom_exemple_ukraine').css('display','none')
$('#present1').css('display','none')
$('#present2').css('display','none')
//suppression du background derriere / ne pas surcharger la page
setTimeout(function(){
$('#zoom_exemples').css('display','none')
$('#texte_exemples').css('display','block')
zoom_exemples.pause();
zoom_exemples.currentTime = 0;
},3000)
}
if(valeur == 21){
const dezoom_exemple_ukraine = $('#dezoom_exemple_ukraine').get(0);
dezoom_exemple_ukraine.play();
//suppression du bouton retour.
$('#retour').css('display','none')
$('#dezoom_exemple_ukraine').css('display','block')
//suppression du background derriere / ne pas surcharger la page
setTimeout(function(){
$('#zoom_exemple_ukraine').css('display','none')
$('#retour').css('display','block')
zoom_exemple_ukraine.pause();
zoom_exemple_ukraine.currentTime = 0;
$('#present1').css('display','block')
$('#present2').css('display','block')
},3000)
valeur = 1;
}
if(valeur == 212){
valeur = 21;
$('#israel11').css('display','none')
$('#israel1').css('display','none')
israel1.pause();
israel1.currentTime = 0;
$('#israel22').css('display','none')
$('#israel2').css('display','none')
israel2.pause();
israel2.currentTime = 0;
$('#israel33').css('display','none')
$('#israel34').css('display','none')
$('#israel44').css('display','none')
$('#israel4').css('display','none')
israel4.pause();
israel4.currentTime = 0;
$('#israel5').css('display','none')
$('#israel6').css('display','none')
}
})
$('#present1').on('click', function(){
valeur = 21;
$('#retour').css('display','none')
$('#present1').css('display','none')
$('#present2').css('display','none')
$('#dezoom_exemple_ukraine').css('display','none')
$('#zoom_exemple_ukraine').css('display','block')
const zoom_exemple_ukraine = $('#zoom_exemple_ukraine').get(0);
zoom_exemple_ukraine.play();
setTimeout(function(){
$('#zoom_exemples').css('display','none')
zoom_exemples.pause();
zoom_exemples.currentTime = 0;
dezoom_exemple_ukraine.pause();
dezoom_exemple_ukraine.currentTime = 0;
$('#retour').css('display','block')
},3000)
$('#ukraine').css('display','block')
})
$('#present2').on('click', function(){
valeur = 22;
$('#retour').css('display','none')
$('#present1').css('display','none')
$('#present2').css('display','none')
$('#dezoom_exemple_ukraine').css('display','none')
$('#zoom_exemple_israel').css('display','block')
const zoom_exemple_israel = $('#zoom_exemple_israel').get(0);
zoom_exemple_israel.play();
setTimeout(function(){
$('#zoom_exemples').css('display','none')
zoom_exemples.pause();
zoom_exemples.currentTime = 0;
dezoom_exemple_ukraine.pause();
dezoom_exemple_ukraine.currentTime = 0;
$('#retour').css('display','block')
},3000)
$('#ukraine').css('display','block')
})
$('#ukraine1').on('click',function(){
$('#israel11').css('display','none')
$('#israel22').css('display','none')
$('#israel2').css('display','none')
israel2.pause();
israel2.currentTime = 0;
$('#israel33').css('display','none')
$('#israel34').css('display','none')
$('#israel44').css('display','none')
$('#israel4').css('display','none')
israel4.pause();
israel4.currentTime = 0;
$('#israel5').css('display','none')
$('#israel6').css('display','none')
$('#retour').css('display','block')
valeur = 212;
$('#israel11').css('display','block')
const israel1 = $('#israel1').get(0);
$('#israel1').css('display','block')
israel1.play();
})
$('#ukraine2').on('click',function(){
$('#israel11').css('display','none')
$('#israel1').css('display','none')
israel1.pause();
israel1.currentTime = 0;
$('#israel33').css('display','none')
$('#israel34').css('display','none')
$('#israel44').css('display','none')
$('#israel4').css('display','none')
israel4.pause();
israel4.currentTime = 0;
$('#israel5').css('display','none')
$('#israel6').css('display','none')
$('#retour').css('display','block')
valeur = 212;
$('#israel22').css('display','block')
const israel2 = $('#israel2').get(0);
$('#israel2').css('display','block')
israel2.play();
})
$('#ukraine3').on('click',function(){
$('#israel11').css('display','none')
$('#israel1').css('display','none')
israel1.pause();
israel1.currentTime = 0;
$('#israel22').css('display','none')
$('#israel2').css('display','none')
israel2.pause();
israel2.currentTime = 0;
$('#israel44').css('display','none')
$('#israel4').css('display','none')
israel4.pause();
israel4.currentTime = 0;
$('#israel5').css('display','none')
$('#israel6').css('display','none')
$('#retour').css('display','block')
valeur = 212;
$('#israel33').css('display','block')
$('#israel34').css('display','block')
})
$('#ukraine4').on('click',function(){
$('#israel11').css('display','none')
$('#israel1').css('display','none')
israel1.pause();
israel1.currentTime = 0;
$('#israel22').css('display','none')
$('#israel2').css('display','none')
israel2.pause();
israel2.currentTime = 0;
$('#israel33').css('display','none')
$('#israel34').css('display','none')
$('#israel5').css('display','none')
$('#israel6').css('display','none')
$('#retour').css('display','block')
valeur = 212;
$('#israel44').css('display','block')
const israel4 = $('#israel4').get(0);
$('#israel4').css('display','block')
israel4.play();
})
$('#ukraine5').on('click',function(){
$('#israel11').css('display','none')
$('#israel1').css('display','none')
israel1.pause();
israel1.currentTime = 0;
$('#israel22').css('display','none')
$('#israel2').css('display','none')
israel2.pause();
israel2.currentTime = 0;
$('#israel33').css('display','none')
$('#israel34').css('display','none')
$('#israel44').css('display','none')
$('#israel4').css('display','none')
israel4.pause();
israel4.currentTime = 0;
$('#israel6').css('display','none')
$('#retour').css('display','block')
valeur = 212;
$('#israel5').css('display','block')
})
$('#ukraine6').on('click',function(){
$('#israel11').css('display','none')
$('#israel1').css('display','none')
israel1.pause();
israel1.currentTime = 0;
$('#israel22').css('display','none')
$('#israel2').css('display','none')
israel2.pause();
israel2.currentTime = 0;
$('#israel33').css('display','none')
$('#israel34').css('display','none')
$('#israel44').css('display','none')
$('#israel4').css('display','none')
israel4.pause();
israel4.currentTime = 0;
$('#israel5').css('display','none')
$('#retour').css('display','block')
valeur = 212;
$('#israel6').css('display','block')
})
</script>
</body>
</html>