| 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/www/Sae 302/ |
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;
}
#contain video{
width:100%;
}
#contain img{
width:200px;
position:absolute;
transition:.5s all;
cursor:pointer;
z-index:99;
}
#osint{
top:100px;
left:100px;
}
#videostatic{
z-index:1;
position:absolute;
}
#zoom1{
position:absolute;
z-index:2;
}
#zoom21{
position:absolute;
z-index:1;
}
#zoom22{
position:absolute;
z-index:1;
}
#note{
width:400px;
position:absolute;
bottom:-550px;
left:50px;
z-index:999;
transition:.5s all;
}
#window{
width:1200px;
position:absolute;
z-index:994;
display:none;
cursor:pointer;
}
#window2{
width:1200px;
position:absolute;
z-index:994;
display:none;
cursor:pointer;
}
#window4{
width:1200px;
position:absolute;
z-index:994;
display:none;
cursor:pointer;
}
.notif{
width:400px;
position:absolute;
top:-150px;
right:50px;
z-index:991;
transition:.5s all;
}
.notif:hover{
transform:scale(1.1);
transition:.5s all;
cursor:pointer;
}
#check{
width:300px;
position:absolute;
z-index:995;
display:none;
left:100px;
bottom:340px;
z-index:997;
}
#fire{
position:absolute;
z-index:999;
display:none;
}
#deux{
z-index:1000;
}
#trois{
z-index:1000;
}
#present1{
width:57%;
height:100%;
background:red;
display:flex;
position:absolute;
z-index:100;
display:none;
left:0;
opacity:0;
cursor:pointer;
}
#present2{
width:43%;
height:100%;
background:green;
display:flex;
position:absolute;
z-index:100;
display:none;
right:0;
opacity:0;
cursor:pointer;
}
#retour{
position:absolute;
bottom:25px;
right:25px;
width:200px;
z-index:101;
cursor:pointer;
display:none;
}
.reverse{
z-index:0;
}
</style>
</head>
<body>
<img id='retour' src='retour.png'>
<div id='present1'>
</div>
<div id='present2'>
</div>
<video id='fire' controls >
<source src="fire.mp4" type="video/mp4">
</video>
<img id='un' class='notif' src='test/1.png'>
<img id='hey' class='notif' src='test/notif.png'>
<img id='deux' class='notif' src='notif2.png'>
<img id='trois' class='notif' src='notif3.png'>
<img id='check' src='test/check1.png'>
<img id='note' src='note1.png'>
<img id='window' src='window1.png'>
<img id='window2' src='window2.png'>
<img id='window4' src='window4.png'>
<div id='contain'>
<video id='videostatic' autoplay muted loop>
<source src="missd1.mov" type="video/quicktime">
<source src="miss1.mp4" type="video/mp4">
</video>
<video id='zoom1'>
<source src="zoom.mov" type="video/quicktime">
</video>
<video id='zoom21'>
<source src="videozoom1.mp4" type="video/mp4">
</video>
<video id='zoom22'>
<source src="videozoom2.mp4" type="video/mp4">
</video>
<video id='reverse_zoom1' class='reverse'>
<source src="reverse/zoom.mp4" type="video/mp4">
</video>
<video id='reverse_zoom21' class='reverse'>
<source src="reverse/zoom21.mp4" type="video/mp4">
</video>
<video id='reverse_zoom22' class='reverse'>
<source src="reverse/zoom22.mp4" type="video/mp4">
</video>
<img id='osint' src='osint texte.png'>
</div>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
var valeur = 0;
const video = $('#zoom1').get(0);
$('#osint').on('click', function(){
valeur = 1;
console.log('hey')
$('#videostatic').css('z-index',0)
video.play();
$('#osint').css('display','none')
setTimeout(function(){
$('#present1').css('display','flex')
$('#present2').css('display','flex')
$('#retour').css('display','block')
},2000)
})
$('#retour').on('click', function(){
if(valeur == 1){
const video10 = $('#reverse_zoom1').get(0);
video10.play()
$('#zoom1').css('display','none')
$('#zoom21').css('display','none')
$('#zoom22').css('display','none')
$('#retour').css('display','block')
$('#present1').css('display','none')
$('#present2').css('display','none')
}
if(valeur == 11){
}
if(valeur == 12){
}
})
//Ukraine
$('#present1').on('click', function(){
valeur = 11;
const video2 = $('#zoom21').get(0);
$('#zoom1').css('z-index',0)
$('#zoom22').css('z-index',0)
video2.play();
$('#present1').css('display','none')
$('#present2').css('display','none')
})
//Palestine
$('#present2').on('click', function(){
valeur = 12;
const video3 = $('#zoom22').get(0);
$('#zoom1').css('z-index',0)
$('#zoom21').css('z-index',0)
video3.play();
$('#present1').css('display','none')
$('#present2').css('display','none')
})
//affichage de 1
$('#osint').on('click', function(){
$('#un').css('top','50px')
});
$('#un').on('click', function(){
$('#hey').css('top','50px')
$('#un').css('top','170px')
$("#check").show(500)
$('#note').css('bottom','50px')
setTimeout(function(){
$('#un').css('top','-150px')
},1000)
});
$('#hey').on('click', function(){
$('#hey').css('top','-150px')
$("#window").show(500)
$('#note').attr('src','note2.png')
$('#check').attr('src','test/check2.png')
$('#window').on('click', function(){
$('#note').attr('src','note2.png')
$('#check').attr('src','test/check2.png')
$("#window2").show(500)
$('#note').attr('src','test/note3.png')
$('#check').attr('src','check3.png')
})
var index = 0;
$('#window2').on('click', function(){
index++;
console.log(index)
if(index<2){
$('#note').attr('src','test/note3.png')
$('#check').attr('src','check3.png')
$('#window2').attr('src','window3.png')
$('#fire').show(500)
}else{
$('#fire').hide();
$('#window4').show(500)
$('#note').attr('src','test/note4.png')
$('#window2').hide()
$('#window').hide();
}
})
$('#window4').on('click',function(){
$('#check').attr('src','check4.png')
$('#deux').css('top','50px')
$('#window4').hide();
setTimeout(function(){
$('#deux').css('top','170px')
$('#trois').css('top','50px')
},2000)
})
});
</script>
</body>
</html>