| 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/BOOM/save/ |
Upload File : |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="club.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<title>BOOM</title>
<style>
@font-face {
font-family: 'ComixLoud';
src: url('ComixLoud.ttf') format('truetype');
}
h1 {
font-family: 'ComixLoud', sans-serif;
}
body{
width:100%;
height:100vh;
margin:0;
padding:0;
background-image:url('background.png');
background-size:cover;
display:flex;
justify-content:space-around;
flex-wrap:wrap;
align-items:center;
}
#defil{
height:30vh;
overflow:hidden;
position:absolute;
width:100%;
top:0;
}
#defil img{
width:200px;
position:absolute;
}
#filter{
width:42%;
min-width:400px;
height:auto;
margin-left:80px;
position:relative;
}
#title{
width:300px;
position:absolute;
left:-140px;
top:-190px;
z-index:10;
}
#filter div{
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
margin:20px;
font-size:1rem;
font-family: 'ComixLoud', sans-serif;
}
#filter div label{
width:400px;
text-align:center;
}
#un{
padding:5px 10px 5px 10px;
background-image:url('bg2.png');
background-size:cover;
background-repeat:no-repeat;
color:#38a3d5;
text-shadow: -4px 3px 0px #000000;
-webkit-box-shadow: -9px 8px 0px -3px rgba(6,37,48,1);
-moz-box-shadow: -9px 8px 0px -3px rgba(6,37,48,1);
box-shadow: -9px 8px 0px -3px rgba(6,37,48,1);
transform: rotate(2deg);
}
#deux{
padding:5px 10px 5px 10px;
background-image:url('bg4.png');
background-size:cover;
background-repeat:no-repeat;
color:#f09e17;
text-shadow: -4px 3px 0px #000000;
-webkit-box-shadow: -9px 8px 0px -3px rgba(6,37,48,1);
-moz-box-shadow: -9px 8px 0px -3px rgba(6,37,48,1);
box-shadow: -9px 8px 0px -3px rgba(6,37,48,1);
transform: rotate(0deg);
}
#trois{
padding:5px 10px 5px 10px;
background-image:url('bg5.png');
background-size:cover;
background-repeat:no-repeat;
color:#ddc31d;
text-shadow: -4px 3px 0px #000000;
-webkit-box-shadow: -9px 8px 0px -3px rgba(6,37,48,1);
-moz-box-shadow: -9px 8px 0px -3px rgba(6,37,48,1);
box-shadow: -9px 8px 0px -3px rgba(6,37,48,1);
transform: rotate(2deg);
}
#quatre{
padding:5px 10px 5px 10px;
background-image:url('bg3.png');
background-size:cover;
background-repeat:no-repeat;
color:#e53a47;
text-shadow: -4px 3px 0px #000000;
-webkit-box-shadow: -9px 8px 0px -3px rgba(6,37,48,1);
-moz-box-shadow: -9px 8px 0px -3px rgba(6,37,48,1);
box-shadow: -9px 8px 0px -3px rgba(6,37,48,1);
transform: rotate(-3deg);
margin:auto;
cursor:pointer;
}
#result{
width:42%;
min-width:400px;
height:70%;
margin-top:230px;
}
#result h1{
padding:5px 10px 5px 10px;
font-size:2rem;
text-align:center;
background-image:url('bg.png');
background-size:cover;
background-repeat:no-repeat;
color:#d33f3f;
text-shadow: -4px 3px 0px #000000;
-webkit-box-shadow: -9px 8px 0px -3px rgba(6,37,48,1);
-moz-box-shadow: -9px 8px 0px -3px rgba(6,37,48,1);
box-shadow: -9px 8px 0px -3px rgba(6,37,48,1);
transform:rotate(1deg);
}
#result div{
overflow-y:auto;
height:50vh;
}
#result div img{
width:200px;
}
img{
transition:.5s all;
cursor:pointer;
}
img:hover{
transform:scale(1.1);
transition:.5s all;
}
#nb_lettres{
all:initial;
padding:5px 10px 5px 10px;
border-radius:2px;
background:#F5F5F5;
border:2px black solid;
height:20px;
font-family: 'ComixLoud', sans-serif;
text-transform: uppercase;
font-size:0.5rem;
width:180Px;
}
input{
width:200Px;
}
#resultat{
position:absolute;
z-index:11;
width:150px;
right:-130px;
}
#range{
-webkit-appearance: none;
background: linear-gradient(to right, #4caf50, #f44336);
border-radius: 5px;
outline: none;
}
#range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 40px;
height: 40px;
background: url('slider.png') no-repeat center center;
background-size: contain;
border: none;
cursor: pointer;
}
#range::-moz-range-thumb {
width: 40px;
height: 40px;
background: url('slider.png') no-repeat center center;
background-size: contain;
border: none;
cursor: pointer;
}
#range::-ms-thumb {
width: 40px;
height: 40px;
background: url('slider.png') no-repeat center center;
background-size: contain;
border: none;
cursor: pointer;
}
.ee{
width:100px;
}
</style>
</head>
<body>
<div id='defil'>
<img src='1.png' class='images'>
<img src='2.png' class='images'>
<img src='3.png' class='images'>
<img src='4.png' class='images'>
<img src='5.png' class='images'>
<img src='6.png' class='images'>
<img src='7.png' class='images'>
<img src='8.png' class='images'>
<img src='9.png' class='images'>
<img src='10.png' class='images'>
<img src='11.png' class='images'>
<img src='12.png' class='images'>
<img src='13.png' class='images'>
<img src='14.png' class='images'>
<img src='15.png' class='images'>
</div>
<div id='filter'>
<img src='filtres.png' id='title'>
<div>
<label id='un'>NOMBRE DE LETTRES</label>
<input type='text' id='nb_lettres' placeholder='Ecrivez votre mot...' maxlength="10">
<img src='result0.png' id='resultat'>
</div>
<div>
<label id='deux'>VIOLENCE</label>
<input type='range' min="1" max="10" step="0.1" value="5" id='range'>
</div>
<div>
<label id='trois'>PLUS OU MOINS UTILISEE</label>
<img class='ee' id='moins' src='moins.png'>
<img class='ee' id='plus' src='plus.png'>
</div>
<div>
<label id='quatre'>RESET</label>
</div>
</div>
<div id='result'>
<h1>LISTE DES ONOMATOPEES</h1>
<div id='result2'>
<?php
class Database {
private $host = "localhost";
private $db_name = "carpe_boom";
private $username = "carpe_php";
private $password = "onestdestubesonestpasdespots";
private $conn;
public function getConnection() {
$this->conn = null;
try {
$this->conn = new PDO(
"mysql:host=" . $this->host . ";dbname=" . $this->db_name,
$this->username,
$this->password
);
$this->conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $exception) {
echo "Erreur de connexion : " . $exception->getMessage();
}
return $this->conn;
}
}
$database = new Database();
$connexion = $database->getConnection();
$sql = "SELECT * from onomatope";
$statement = $connexion->prepare($sql);
$statement->execute();
$results = $statement->fetchAll(PDO::FETCH_ASSOC);
$index = 0;
foreach($results as $value){
$index++;
echo "<img src='$index.png'>";
}
?>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
//Code qui permet de positionner les images en Caroussel infini (en haut) -> utilisation de Chat GPT
const images = document.querySelectorAll('.images');
const imageWidth = 200;
const visibleWidth = 600;
let totalWidth = images.length * imageWidth;
images.forEach((img, i) => {
img.style.position = 'absolute';
img.style.left = i * imageWidth + 'px';
});
function scrollImages() {
images.forEach((img) => {
let currentLeft = parseInt(img.style.left || 0);
currentLeft -= 2;
img.style.left = currentLeft + 'px';
if (currentLeft < -imageWidth - 100) {
img.style.transition = "none";
img.style.left = totalWidth - imageWidth - 80 + 'px';
}
if (currentLeft > totalWidth - 500) {
img.style.transition = ".5s all";
}
});
}
setInterval(scrollImages, 16);
//Fin du code de défilement d'images en haut
let compt1 = 0;
let compt2 = 0;
let compt3 = 0;
let compt33 = 0;
let indice = 0;
var valeur = 0;
var value1 = 0;
var lastTriggeredValue1 = 0;
var longueur = 0;
let value2 = 0;
$(document).ready(function(){
$('#quatre').on('click', function(){
compt1 = 0;
compt2 = 0;
compt3 = 0;
compt33=0;
indice=0;
$('#nb_lettres').val("");
let source = "result0.png";
$('#resultat').attr('src', source);
$('#range').val("");
$('#deux').text('VIOLENCE');
$('#deux').css('color','#f09e17')
$('#trois').text('PLUS OU MOINS UTILISEES')
$('#moins').css("width", "100px");
$('#plus').css("width", "100px");
cause = 'quatre';
$.ajax({
url:'rep.php',
data:{toto:cause,},
type:'POST',
success: function(res){
$('#result2').html(res);
}
})
$('#result2').empty();
});
$('#nb_lettres').on('input',function(){
compt1 = 1;
if(compt2 !=0 || compt3 !=0 || compt33 !=0){
if(compt2 == 1){
indice++;
//console.log("Déja envoyé la violence")
cause = "un.un";
}
if(compt3 == 1){
indice++;
//console.log("Déja envoyé le + ")
cause = "un.deux";
}
if(compt33 == 1){
indice++;
//console.log("Déja envoyé le moins;")
cause = "un.deuxdeux";
}
//console.log(indice)
if(indice ==2){
cause = 'tout';
}
indice = 0;
}else{
cause = "un";
}
//code qui permet de réinitialiser les autres input
/**
$('#range').val("");
$('#deux').text('VIOLENCE');
$('#deux').css('color','#f09e17')
$('#trois').text('PLUS OU MOINS UTILISEES')
$('#moins').css("width", "100px");
$('#plus').css("width", "100px");
**/
//on retrouve le code si dessus adapté pour chaque input
longueur = $(this).val().length;
let source = "result" + longueur + ".png";
$('#resultat').attr('src', source);
$.ajax({
url:'rep.php',
data:{toto:cause,lenght:longueur,value:value1,value2:value2},
type:'POST',
success: function(res){
$('#result2').html(res);
}
})
$('#result2').empty();
})
console.log($('#range').val())
$('#range').on('input',function(){
compt2 = 1;
if(compt1 !=0 || compt3 !=0 || compt33 !=0){
if(compt1 == 1){
indice++;
//console.log("Déja envoyé les lettres")
cause = "un.un";
}
if(compt3 == 1){
indice++;
//console.log("Déja envoyé le + ")
cause = "un.trois";
}
if(compt33 == 1){
indice++;
//console.log("Déja envoyé le moins;")
cause = "un.trois";
}
console.log(indice)
if(indice == 2){
cause = "tout";
console.log("OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO")
}
indice = 0;
// GESTION DES PLUSIEURS A LA FOIS
}else{
cause = "deux";
}
/**
$('#nb_lettres').val("");
let source = "result0.png";
$('#resultat').attr('src', source);
$('#trois').text('PLUS OU MOINS UTILISEES')
$('#moins').css("width", "100px");
$('#plus').css("width", "100px"); **/
valeur = $(this).val();
if(valeur > 1 && valeur <4){
value1 = 1;
$('#deux').text('PAS VIOLENT');
$('#deux').css('color','#14daee')
}
if(valeur >=4 && valeur <7){
value1 = 2;
$('#deux').text('VIOLENT');
$('#deux').css('color','#f09e17')
}
if(valeur >=7){
value1 = 3;
$('#deux').text('TRES VIOLENT !');
$('#deux').css('color','#ee2f14')
}
if (value1 == lastTriggeredValue1) {
}else{
//ne déclenche la fonction QUE lorsqu'il y a un changement de violence sur la range, et pas a chaque changement de l'input range
//console.log('value1 a changé : ' + value1);
lastTriggeredValue1 = value1;
$.ajax({
url:'rep.php',
data:{toto:cause,value:value1,value2:value2,lenght:longueur},
type:'POST',
success: function(res){
$('#result2').html(res);
}
})
$('#result2').empty();
}
})
$('#plus').click(function() {
compt3 = 1;
compt33 = 0;
if(compt1 !=0 || compt2 !=0){
if(compt1 == 1){
indice++;
//console.log("Déja envoyé les lettres")
cause = "un.deux";
}
if(compt2 == 1){
indice++;
//console.log("Déja envoyé la violence ")
cause = "un.trois";
}
//console.log(indice)
if(indice ==2){
cause = "tout"
}
indice = 0;
}else{
cause = "trois";
}
/**
$('#nb_lettres').val("");
let source = "result0.png";
$('#resultat').attr('src', source);
$('#range').val("");
$('#deux').text('VIOLENCE');
$('#deux').css('color','#f09e17')**/
let currentSize = parseInt($('#plus').css("width"));
//console.log(currentSize)
$('#plus').css("width", currentSize + 10 + "px");
value2 = "plus";
$('#trois').text('PLUS UTILISEES')
$.ajax({
url:'rep.php',
data:{toto:cause,value:value1,value2:value2,lenght:longueur},
type:'POST',
success: function(res){
$('#result2').html(res);
}
})
$('#result2').empty();
})
$('#moins').click(function() {
compt33 = 1;
compt3 = 0;
if(compt1 !=0 || compt2 !=0 ){
if(compt1 == 1){
indice++;
//console.log("Déja envoyé les lettres")
cause = "un.deuxdeux";
}
if(compt2 == 1){
indice++;
//console.log("Déja envoyé la violence ")
cause = "un.trois";
}
//console.log(indice)
if(indice ==2){
cause = "tout"
}
indice = 0;
}else{
cause = "trois";
}
/**
$('#nb_lettres').val("");
let source = "result0.png";
$('#resultat').attr('src', source);
$('#range').val("");
$('#deux').text('VIOLENCE');
$('#deux').css('color','#f09e17')**/
let currentSize = parseInt($('#moins').css("width"));
$('#trois').text('MOINS UTILISEES')
$('#moins').css("width", currentSize - 10 + "px");
value2 = "moins";
$.ajax({
url:'rep.php',
data:{toto:cause,value:value1,value2:value2,lenght:longueur},
type:'POST',
success: function(res){
$('#result2').html(res);
}
})
$('#result2').empty();
})
})
</script>
</body>
</html>