Файловый менеджер

Файловый менеджер - Редактировать - /home/carpe/public_html/BOOM/save/index.php

Назад
<!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>

| ver. 1.4 | Github | . | PHP 8.0.30 | Генерация страницы: 0 | proxy | phpinfo | Настройка