| 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;
z-index:340;
}
#ukraine div{
position:absolute;
}
#russie{
width:100%;
height:100%;
position:absolute;
z-index:345;
opacity:0;
display:none;
}
#russie div{
position:absolute;
}
#russie1{
bottom:0px;
left:600px;
width:400px;
height:400px;
background:red;
}
#russie2{
top:0;
left:100px;
width:550px;
height:400px;
background:green;
}
#russie3{
top:0;
right:340px;
width:400px;
height:350px;
background:white;
}
#russie4{
bottom:160px;
right:270px;
width:300px;
height:350px;
background:yellow;
}
#russie5{
bottom:150px;
left:150px;
width:400px;
height:300px;
background:pink;
}
#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;
}
.imgs{
display:none;
z-index:105;
width:1800px;
position:absolute;
}
#russie_video{
width:400px;
position:relative;
left:-100px;
}
#russie77{
position:relative;
left:50px;
}
#russie88{
position:relative;
left:50px;
}
#texte_osint{
position:absolute;
bottom:100px;
left:350px;
z-index:888;
width:200px;
cursor:pointer;
}
#texte_techno{
position:absolute;
bottom:100px;
right:300px;
z-index:888;
width:200px;
cursor:pointer;
}
#techno{
display:none;
width:100%
}
#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:500px;
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;
width:400px;
}
#deux{
z-index:1000;
}
#trois{
z-index:1000;
}
#presentation{
width:1200px;
z-index:555;
display:none;
}
</style>
</head>
<body>
<video id='presentation' controls>
<source src="videoosint.mp4" type="video/mp4">
</video>
<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'>
<img src='exemples.png' id='exemples' class='imgs'>
<img src='images/techno.png' id='techno' class='imgs'>
<img src='ukraine.png' id='ukraine0' class='imgs'>
<img src='palestine.png' id='palestine' class='imgs'>
<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'>
<video id='russie_video' class='israel' controls>
<source src="videos/russie/1.mp4" type="video/mp4">
</video>
<img class='israel' id='russie11' src='images/russie/1.png'>
<img class='israel' id='russie22' src='images/russie/2.png'>
<img class='israel' id='russie33' src='images/russie/3.png'>
<img class='israel' id='russie44' src='images/russie/4.png'>
<img class='israel' id='russie55' src='images/russie/contexte.png'>
<img class='israel' id='russie66' src='images/russie/vert.png'>
<img class='israel' id='russie77' src='images/russie/jaune.png'>
<img class='israel' id='russie88' src='images/russie/ukraine.png'>
<div id='present1'></div>
<div id='present2'></div>
<img id='texte_exemples' src='images/texte_exemples.png'>
<img id='texte_osint' src='images/texte_osint.png'>
<img id='texte_techno' src='images/texte_techno.png'>
<img id='retour' src='images/retour.png'>
<video id='videostatic' autoplay muted loop>
<source src="bg.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>
<div id='russie'>
<div id='russie1'></div>
<div id='russie2'></div>
<div id='russie3'></div>
<div id='russie4'></div>
<div id='russie5'></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
var compteur = 0;
let quiz = false;
setInterval(function(){
if(compteur >2 && !quiz){
$('#un').css('top','50px')
quiz = true;
compteur = 0;
}
},100)
$('#trois').on('click', function(){
$('#texte_exemples').css('display','block')
$('#retour').css('display','none')
$('#texte_techno').css('display','block')
$('#texte_osint').css('display','block')
$('#trois').css('top','-150px')
$('#deux').css('top','-150px')
$('#note').css('bottom','-550px')
$('#check').css('display','none')
quiz=false;
})
$('#un').on('click', function(){
$('#note').attr('src','../note1.png')
$('#check').attr('src','../test/check1.png')
$('#texte_exemples').css('display','none')
$('#retour').css('display','block')
$('#texte_techno').css('display','none')
$('#texte_osint').css('display','none')
valeur = 5;
$('#presentation').hide(500);
const presentation = $('#presentation').get(0);
presentation.pause();
presentation.currentTime = 0;
$('#techno').hide(500)
$('#exemples').hide(500)
$('#present1').css('display','none')
$('#present2').css('display','none')
$('#ukraine0').hide(500)
$('#palestine').hide(500)
$('#israel11').css('display','none')
$('#israel1').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')
russie_video.pause();
russie_video.currentTime = 0;
$('#russie_video').css('display','none')
$('#russie11').css('display','none')
$('#russie22').css('display','none')
$('#russie66').css('display','none')
$('#russie77').css('display','none')
$('#russie33').css('display','none')
$('#russie88').css('display','none')
$('#russie44').css('display','none')
$('#russie55').css('display','none')
$('#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();
index = 0;
}
})
$('#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)
})
});
let valeur = 0;
$('#texte_techno').on('click',function(){
compteur ++;
valeur = 1;
$('#techno').show(500)
$('#texte_exemples').css('display','none')
$('#retour').css('display','block')
$('#texte_techno').css('display','none')
$('#texte_osint').css('display','none')
})
$('#texte_exemples').on('click',function(){
valeur = 1;
compteur ++;
$('#texte_techno').css('display','none')
$('#texte_osint').css('display','none')
$('#exemples').show(500)
$('#texte_exemples').css('display','none')
$('#retour').css('display','block')
$('#present1').css('display','block')
$('#present2').css('display','block')
})
$('#texte_osint').on('click',function(){
compteur ++;
valeur = 4;
$('#presentation').show(500);
$('#texte_exemples').css('display','none')
$('#texte_osint').css('display','none')
$('#texte_techno').css('display','none')
$('#retour').css('display','block')
})
$('#retour').on('click',function(){
console.log(valeur)
if(valeur == 5){
$('#trois').css('top','-150px')
$('#hey').css('top','-150px')
$('#deux').css('top','-150px')
$('#note').css('bottom','-550px')
$('#check').css('display','none')
quiz=false;
$('#texte_exemples').css('display','block')
$('#retour').css('display','none')
$('#texte_techno').css('display','block')
$('#texte_osint').css('display','block')
$('#window2').css('display','none')
$('#window4').hide();
$('#window').css('display','none')
$('#fire').css('display','none')
}
if(valeur == 4){
$('#presentation').hide(500);
$('#texte_exemples').css('display','block')
$('#texte_osint').css('display','block')
const presentation = $('#presentation').get(0);
presentation.pause();
presentation.currentTime = 0;
$('#texte_techno').css('display','block')
$('#retour').css('display','none')
}
if(valeur == 1){
$('#techno').hide(500)
$('#exemples').hide(500)
$('#texte_exemples').css('display','block')
$('#retour').css('display','none')
$('#present1').css('display','none')
$('#present2').css('display','none')
$('#texte_techno').css('display','block')
$('#texte_osint').css('display','block')
}
if(valeur == 22){
$('#ukraine0').hide(500)
valeur = 1
$('#present1').css('display','block')
$('#present2').css('display','block')
$('#ukraine').css('display','none')
$('#russie').css('display','none')
}
if(valeur == 21){
$('#palestine').hide(500)
valeur = 1
$('#present1').css('display','block')
$('#present2').css('display','block')
$('#ukraine').css('display','none')
}
if(valeur == 212){
valeur = 21;
$('#israel11').css('display','none')
$('#israel1').css('display','none')
$('#israel22').css('display','none')
$('#israel2').css('display','none')
israel2.pause();
israel2.currentTime = 0;
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')
}
if(valeur == 213){
valeur = 22;
russie_video.pause();
russie_video.currentTime = 0;
$('#russie_video').css('display','none')
$('#russie11').css('display','none')
$('#russie22').css('display','none')
$('#russie66').css('display','none')
$('#russie77').css('display','none')
$('#russie33').css('display','none')
$('#russie88').css('display','none')
$('#russie44').css('display','none')
$('#russie55').css('display','none')
}
})
$('#present1').on('click', function(){
valeur = 21;
$('#palestine').show(500)
$('#present1').css('display','none')
$('#present2').css('display','none')
$('#ukraine').css('display','block')
})
$('#present2').on('click', function(){
valeur = 22;
$('#ukraine0').show(500)
$('#present1').css('display','none')
$('#present2').css('display','none')
$('#russie').css('display','block')
})
$('#russie1').on('click',function(){
$('#russie11').css('display','block')
const russie_video = $('#russie_video').get(0);
$('#russie_video').css('display','block')
russie_video.play();
valeur=213;
})
$('#russie2').on('click',function(){
valeur=213;
$('#russie22').css('display','block')
$('#russie66').css('display','block')
$('#russie77').css('display','block')
})
$('#russie3').on('click',function(){
valeur=213;
$('#russie33').css('display','block')
$('#russie88').css('display','block')
})
$('#russie4').on('click',function(){
valeur=213;
$('#russie44').css('display','block')
})
$('#russie5').on('click',function(){
valeur=213;
$('#russie55').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>