| 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/ |
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>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<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;
}
#infos{
width:80%;
height:auto;
position:absolute;
z-index:100;
background-image:url('background.png');
background-size:cover;
border:5px black solid;
transform:rotate(2deg);
-webkit-box-shadow: -11px 10px 0px 0px rgba(0,0,0,1);
-moz-box-shadow: -11px 10px 0px 0px rgba(0,0,0,1);
box-shadow: -11px 10px 0px 0px rgba(0,0,0,1);
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-around;
display:none;
}
#bon{
width:35%;
}
#infos p{
width:600px;
font-size:1.2rem;
font-family: "Balsamiq Sans", sans-serif;
font-weight: 800;
text-align:center;
color:black;
margin:10px;
}
#close{
position:absolute;
top:10px;
right:10px;
width:100px;
}
</style>
</head>
<body>
<div id='infos'>
<img id='bon' src='1.png'>
<p id='txt'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum, ligula et iaculis vulputate, magna purus consequat magna, ac euismod sem elit quis ipsum. Nullam condimentum, dui venenatis sagittis vestibulum, nisl lacus molestie ex, vitae semper leo nulla tempor velit. Nunc est velit, laoreet ut enim vulputate, finibus sodales lacus. Integer at nibh at odio suscipit tincidunt lobortis eget ligula. In rhoncus mattis volutpat. Donec vel vestibulum nibh. Aenean sodales sollicitudin magna. Vestibulum pellentesque cursus quam, ac interdum augue consectetur id. Vestibulum luctus ultrices nulla eget dignissim. Sed at libero nisl. Praesent quis hendrerit dui. Integer vel mattis ex, sit amet cursus velit. Vivamus ornare, neque a ultricies consectetur, purus est tristique augue, sed vulputate massa odio et dolor. Pellentesque tempor eros at lacus lobortis, et hendrerit ipsum fermentum. </p>
<img id='close' src='croix.png'>
</div>
<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
$('#close').on('click', function(){
$('#infos').css('display','none');
})
$('img').on('click', function(){
var src = $(this).attr('src');
let longueur2 = src.length;
if(longueur2>6){
}else{
$('#infos').css('display','flex');
$('#bon').attr('src',src)
if(src == "1.png"){
$('#txt').text('Cette onomatopée est souvent utilisée pour représenter le bruit d’un baiser sonore, rapide et affectueux. Elle peut aussi être utilisée dans des contextes humoristiques pour exagérer une démonstration d’affection, comme un bisou bruyant sur la joue.');
}
if(src == "2.png"){
$('#txt').text('Exprime une erreur ou un accident, souvent mineur et parfois humoristique. Peut signaler un oubli ou une maladresse. Exemple : OOPS, j’ai renversé le café !');
}
if(src == "3.png"){
$('#txt').text('Représente le son du ronflement ou un moment de sommeil profond. Souvent utilisé pour illustrer la fatigue ou un moment d’ennui exagéré. Exemple : Un personnage s’endort en plein milieu d’une réunion.');
}
if(src == "4.png"){
$('#txt').text('Exprime une surprise ou une admiration intense. Sert à marquer un moment impressionnant ou incroyable. Exemple : "WOW, c’est tellement beau !"');
}
if(src == "5.png"){
$('#txt').text('Représente une réaction à une douleur ou une gêne soudaine. Peut être utilisée de manière humoristique ou dramatique selon le contexte. Exemple : "OUCH, cette épingle m’a piqué !"');
}
if(src == "6.png"){
$('#txt').text('Illustre une explosion, un coup de feu ou un bruit fort et soudain. Souvent utilisé dans des scènes d’action ou de combat. Exemple : "BANG ! Le méchant tire son arme."');
}
if(src == "7.png"){
$('#txt').text('Accentue un impact fort ou un choc brutal, comme une chute ou une porte qui claque. Utilisée pour donner du dynamisme. Exemple : "BAM ! La balle frappe la cible."');
}
if(src == "8.png"){
$('#txt').text('Décrit une disparition soudaine ou un effet magique. Idéal pour illustrer un moment fantaisiste ou comique. Exemple : "POOF ! Et il n’y avait plus de gâteau."');
}
if(src == "9.png"){
$('#txt').text('Reproduit le bruit d’un crachat ou d’un rejet brutal, souvent utilisé dans des contextes humoristiques ou dégoûtants. Exemple : "CRACH ! Il recrache le jus amer."');
}
if(src == "10.png"){
$('#txt').text('Évoque un son de fissure ou de cassure nette, comme un objet qui se brise. Peut ajouter de la tension dans une scène. Exemple : "CRACK ! La glace commence à céder."');
}
if(src == "11.png"){
$('#txt').text('Représente le bruit d’une sonnette ou d’une cloche, souvent associé à une arrivée ou à une interruption.Exemple : "DINGDONG ! Quelqu’un est à la porte."');
}
if(src == "12.png"){
$('#txt').text('Illustre le bruit d’un coup à la porte, utilisé dans des dialogues ou des blagues. Ajoute du suspense ou de l’humour. Exemple : "KNOCKKNOCK ! Qui est là ?"');
}
if(src == "13.png"){
$('#txt').text('Exprime un impact ou un coup de poing énergique, typique des scènes de bande dessinée ou de bagarre. Exemple : "POW ! Le héros frappe son ennemi."');
}
if(src == "14.png"){
$('#txt').text('Semblable à POW, mais avec une résonance un peu plus exagérée ou étendue, comme un impact plus dramatique. Exemple : "POOW ! L’ennemi est projeté à terre."');
}
if(src == "15.png"){
$('#txt').text('Représente un rebond ou un mouvement élastique. Souvent utilisé dans des contextes comiques ou légers.Exemple : "BOING ! La balle rebondit sur le mur."');
}
}
})
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>