Thème Parinux + suppression automatique + centrage de l'interface

This commit is contained in:
Miraty 2019-02-11 19:26:31 +01:00
parent 9ca63cff3d
commit 2be8145a54
7 changed files with 243 additions and 118 deletions

BIN
favicon.png Executable file → Normal file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 196 B

After

Width:  |  Height:  |  Size: 1.1 KiB

103
index.php
View File

@ -1,29 +1,31 @@
<?php
supprimerVieuxQR(60 * 60 * 24 * 7); // Indique le temps en secondes après lequel le code qr sera supprimé quand qq chargera la page
?>
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Générateur de codes QR</title> <title>Générateur de codes QR</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="description" content="Générateur de codes QR"/> <meta name="description" content="Générateur de codes QR"/>
<link rel="icon" type="image/png" href="favicon.png"/> <link rel="icon" type="image/png" href="favicon.png"/>
<link rel="stylesheet/less" type="text/css" href="style.less" />
<script src="less.min.js" ></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body lang="fr"> <body lang="fr">
<header> <header>
<h1>Générateur de codes QR</h1> <h1><a href=""><img id="logo" src="parinux.png" alt="Logo de Parinux"> Générateur de codes QR</a></h1>
<a href="https://code.antopie.org/miraty/qr">Code source</a>
</header> </header>
<form method="post" action="index.php"> <form method="post">
<div class="param"> <div class="param">
<label for="texte">Texte à encoder</label> <label for="texte">Texte à encoder</label>
<span class="conteneurAide">
<img src="aide.svg" alt="Aide">
<span class="contenuAide">Entrez le texte à encoder dans le code QR</span>
</span>
<br> <br>
<textarea rows="10" cols="35" required="" id="texte" placeholder="Entrez le texte à encoder dans le code QR" name="texte"><?php <textarea rows="8" required="" id="texte" placeholder="Entrez le texte à encoder dans le code QR" name="texte"><?php
if (isset($_POST['texte'])) { if (isset($_POST['texte'])) {
echo $_POST['texte']; echo $_POST['texte'];
@ -32,7 +34,7 @@
?></textarea> ?></textarea>
</div> </div>
<div id="menusDeroulants">
<div class="param"> <div class="param">
<label for="taille">Taille de l'image</label> <label for="taille">Taille de l'image</label>
<span class="conteneurAide"> <span class="conteneurAide">
@ -80,38 +82,93 @@
</span> </span>
<br> <br>
<select id="marge" name="marge"> <select id="marge" name="marge">
<option value="0">0</option> <option <?php if (isset($_POST['marge']) AND ($_POST['marge'] == "0")) {echo 'selected="" ';} ?>value="0">0</option>
<option value="1">1</option> <option <?php if (isset($_POST['marge']) AND ($_POST['marge'] == "1")) {echo 'selected="" ';} ?>value="1">1</option>
<option selected="" value="2">2 - par défaut</option> <option <?php if ((isset($_POST['marge']) AND ($_POST['marge'] == "2")) OR (!isset($_POST['marge']))) {echo 'selected="" ';} ?>selected="" value="2">2 - par défaut</option>
<option value="3">3</option> <option <?php if (isset($_POST['marge']) AND ($_POST['marge'] == "3")) {echo 'selected="" ';} ?>value="3">3</option>
<option value="5">5</option> <option <?php if (isset($_POST['marge']) AND ($_POST['marge'] == "5")) {echo 'selected="" ';} ?>value="5">5</option>
<option value="10">10</option> <option <?php if (isset($_POST['marge']) AND ($_POST['marge'] == "10")) {echo 'selected="" ';} ?>value="10">10</option>
</select> </select>
</div> </div>
</div>
<br/> <br/>
<div class="centrer">
<input type="submit" value="Générer" /> <input type="submit" value="Générer" />
</div>
<br/>
<br/>
</form> </form>
<?php <?php
function generateRandomString($length) {
$characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
$charactersLength = strlen($characters);
$randomString = '';
for ($i = 0; $i < $length; $i++) {
$randomString .= $characters[rand(0, $charactersLength - 1)];
}
return $randomString;
}
if (isset($_POST['texte']) and isset($_POST['taille']) and isset($_POST['redondance']) and isset($_POST['marge'])) { if (isset($_POST['texte']) and isset($_POST['taille']) and isset($_POST['redondance']) and isset($_POST['marge'])) {
include "phpqrcode/qrlib.php"; include "phpqrcode/qrlib.php";
$cheminImage = "temp/" . $_POST['taille'] . $_POST['redondance'] . $_POST['marge'] . "-" . mt_rand(0, 10000000) . ".png"; $cheminImage = "temp/" . generateRandomString(50) . ".png";
QRcode::png($_POST['texte'], $cheminImage, $_POST['redondance'], $_POST['taille'], $_POST['marge']); ?><a href="<?php echo $cheminImage; ?>" class="bouton" download="">Télécharger ce code QR</a> QRcode::png($_POST['texte'], $cheminImage, $_POST['redondance'], $_POST['taille'], $_POST['marge']); ?>
<div class="centrer">
<a href="<?php echo $cheminImage; ?>" class="bouton" download="<?php echo $_POST['texte']; ?>.png">Télécharger ce code QR</a>
</div>
<br><br> <br><br>
<a href="<?php echo $cheminImage; ?>"><img src="<?php echo $cheminImage; ?>"/></a> <div class="centrer">
<a href="<?php echo $cheminImage; ?>"><img id="codeQR" src="<?php echo $cheminImage; ?>"/></a>
</div>
<?php <?php
} }
?> ?>
<footer>
<a class="lienCodeSource" href="https://code.antopie.org/miraty/qr">Code source</a>
</footer>
</body> </body>
<?php
function supprimerVieuxQR($tempsDeSuppression) {
$listeCodesQR = new DirectoryIterator("temp");
foreach($listeCodesQR as $listeCodesQR) {
if ($listeCodesQR->getFilename() != "." AND $listeCodesQR->getFilename() != "..") {
if ((time() - filemtime("temp/" . $listeCodesQR->getFilename())) > $tempsDeSuppression) {
unlink("temp/" . $listeCodesQR->getFilename());
}
}
}
}
?>

18
less.min.js vendored Normal file

File diff suppressed because one or more lines are too long

BIN
parinux.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.9 KiB

View File

@ -1,53 +1,101 @@
// Thème par défaut
@fond: #2D2F34;
@fondChamp: #31363B;
@fondChampTexte : #232629;
@bordure: #5f5f5f;
@bordureHover: #808080;
@bordureFocus: #b6b6b6;
@afficherLogoParinux: none;
@texte: white;
@texteForm: white;
@texteLienCodeSource: #868686;
// Thème Parinux
/*
@fond: #157097;
@fondChamp: #2794c2;
@fondChampTexte : #2794c2;
@bordure: #48aed9;
@bordureHover: #87d1f1;
@bordureFocus: #e2f6ff;
@afficherLogoParinux: inline;
@texte: #B4EAFF;
@texteForm: #e2f6ff;
@texteLienCodeSource: #3da3cf;
*/
@font-face { @font-face {
font-family: "ubuntu-dl"; font-family: "ubuntu-dl";
src: url('ubuntu-dl.ttf'); src: url('ubuntu-dl.ttf');
} }
.ubuntu {
font-family: ubuntu-dl;
}
#redondance, #marge, #texte, #taille { #redondance, #marge, #texte, #taille {
appearance: none; appearance: none;
border: 2px #5f5f5f solid; border: 2px @bordure solid;
border-radius: 7px; border-radius: 7px;
font-size: 20px; font-size: 20px;
padding-left: 10px; padding-left: 10px;
font-weight: normal; font-weight: normal;
color: white; color: @texteForm;
margin-top: 8px; margin-top: 8px;
transition: border 0.2s linear; transition: border 0.2s linear;
} }
#redondance, #taille, #marge { #redondance, #taille, #marge {
background-color: #31363B; background-color: @fondChamp;
width: 250px; width: 250px;
height: 40px; height: 40px;
} }
#texte { #texte {
background-color: #232629; background-color: @fondChampTexte;
color: @texteForm;
padding-top: 6px; padding-top: 6px;
width: 500px;
}
#menusDeroulants {
text-align: center;
}
#codeQR {
max-width: 500px;
}
#lienCodeQR {
text-align: center;
}
.centrer {
text-align: center;
}
footer {
position: absolute;
top: 5px;
right: 5px;
} }
input[type=submit], .bouton { input[type=submit], .bouton {
background-color: #31363B; background-color: @fondChamp;
border: 2px #616569 solid; border: 2px @bordure solid;
color: white; color: @texteForm;
padding: 3px 10px 3px 10px; padding: 3px 10px 3px 10px;
border-radius: 3px; border-radius: 3px;
font-size: 1.2em; font-size: 1.2em;
text-decoration: none; text-decoration: none;
display: inline; display: inline;
transition: border 0.2s linear;
} }
#redondance:hover, #marge:hover, #texte:hover, #taille:hover, input[type=submit]:hover { #redondance:hover, #marge:hover, #texte:hover, #taille:hover, input[type=submit]:hover, .bouton:hover {
border: 2px #808080 solid; border: 2px @bordureHover solid;
} }
#texte:focus, input[type=submit]:focus { #texte:focus, input[type=submit]:focus, .bouton:focus {
border: 2px #b6b6b6 solid; border: 2px @bordureFocus solid;
} }
form { form {
@ -58,15 +106,21 @@ form {
margin: 0px; margin: 0px;
} }
body { html {
background-color: #2D2F34; width: 500px;
color: white; margin-left: auto;
margin-right: auto;
background-color: @fond;
color: @texte;
font-family: "ubuntu", "ubuntu-dl"; font-family: "ubuntu", "ubuntu-dl";
font-weight: normal; font-weight: normal;
font-size: 1em; font-size: 1em;
margin-left: auto;
margin-right: auto; & a {
width: 500px; color: @texte;
text-decoration: none;
}
} }
label { label {
@ -75,12 +129,11 @@ label {
} }
header a { .lienCodeSource {
color: #868686; color: @texteLienCodeSource;
font-size: 12px; font-size: 12px;
margin-bottom: -20px; margin-bottom: -20px;
text-align: right; text-align: right;
} }
header { header {
@ -91,23 +144,38 @@ h1 {
text-align: left; text-align: left;
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
font-size: 40px; font-size: 35px;
} }
.param { .param {
padding: 10px; padding: 10px;
padding-left: 0px; padding-left: 0px;
margin-left: 0px; margin-left: 0px;
padding-right: 0px; padding-right: 0px;
margin-right: 0px; margin-right: 0px;
}
@media (max-width: 640px) { // Version mobile
html {
margin: 10px;
width: 400px;
}
#texte {
width: 400px;
}
h1 {
font-size: 25px;
}
} }
@media (max-width: 719px) { #logo {
body { width: 60px;
margin-right: 0%; display: @afficherLogoParinux;
margin-left: 0%;
}
} }
/* Infobulle */ /* Infobulle */
@ -137,28 +205,10 @@ h1 {
.conteneurAide:hover .contenuAide, .conteneurAide:focus .contenuAide { .conteneurAide:hover .contenuAide, .conteneurAide:focus .contenuAide {
transform: scale(1) rotate(0); transform: scale(1) rotate(0);
}
.conteneurAide:hover .contenuAide, .conteneurAide:focus .contenuAide {
opacity: 1; opacity: 1;
} }
.conteneurAide { .conteneurAide, .conteneurAide:hover {
background-color: #2D2F34; background-color: @fond;
text-decoration: none;
}
.contenuAide {
background-color: #2D2F34;
text-decoration: none;
}
.conteneurAide:hover {
background-color: #2D2F34;
text-decoration: none;
}
.contenuAide:hover {
background-color: #2D2F34;
text-decoration: none; text-decoration: none;
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 339 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 401 B