Algov/qrcode.chapril.org
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
favicon.png Executable file → Normal file
View File

Binary file not shown.
Side by Side Swipe Overlay

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
View File

File diff suppressed because one or more lines are too long

BIN
parinux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.9 KiB

150
style.css → style.less
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;
} }

BIN
temp/4H2-8335722.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 339 B

BIN
temp/UoD3X0SUSLDF4K8V67igQozAaw7fOTStC8IO5gcMLd3OyW1r0b.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 401 B