Chapril
/
qrcode.chapril.org-libreqr
22
0
Fork 0
Code Issues Pull Requests Projects Releases Activity
Browse Source

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

1.3.0
Miraty 3 years ago
parent
9ca63cff3d
commit
2be8145a54
7 changed files with 246 additions and 121 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      favicon.png
  2. 199
      index.php
  3. 18
      less.min.js
  4. BIN
      parinux.png
  5. 150
      style.less
  6. BIN
      temp/4H2-8335722.png
  7. BIN
      temp/UoD3X0SUSLDF4K8V67igQozAaw7fOTStC8IO5gcMLd3OyW1r0b.png

BIN
favicon.png
View File

Side by Side Swipe Overlay

Before

Width: 16  |  Height: 16  |  Size: 196 B

After

Width: 16  |  Height: 16  |  Size: 1.1 KiB

199
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>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<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"/>
<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>
<body lang="fr">
<header>
<h1>Générateur de codes QR</h1>
<a href="https://code.antopie.org/miraty/qr">Code source</a>
<h1><a href=""><img id="logo" src="parinux.png" alt="Logo de Parinux"> Générateur de codes QR</a></h1>
</header>
<form method="post" action="index.php">
<form method="post">
<div class="param">
<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>
<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'])) {
echo $_POST['texte'];
@ -32,86 +34,141 @@
?></textarea>
</div>
<div id="menusDeroulants">
<div class="param">
<label for="taille">Taille de l'image</label>
<span class="conteneurAide">
<img src="aide.svg" alt="Aide">
<span class="contenuAide">Par combien les dimensions de l'image seront-elles multipliées ?</span>
</span>
<br>
<select id="taille" name="taille">
<option <?php if (isset($_POST['taille']) AND ($_POST['taille'] == 1)) {echo 'selected="" ';} ?>value="1">1</option>
<option <?php if (isset($_POST['taille']) AND ($_POST['taille'] == 2)) {echo 'selected="" ';} ?>value="2">2</option>
<option <?php if (isset($_POST['taille']) AND ($_POST['taille'] == 3)) {echo 'selected="" ';} ?>value="3">3</option>
<option <?php if ((isset($_POST['taille']) AND ($_POST['taille'] == 4)) OR (!isset($_POST['taille']))) {echo 'selected="" ';} ?>value="4">4 - par défaut</option>
<option <?php if (isset($_POST['taille']) AND ($_POST['taille'] == 5)) {echo 'selected="" ';} ?>value="5">5</option>
<option <?php if (isset($_POST['taille']) AND ($_POST['taille'] == 6)) {echo 'selected="" ';} ?>value="6">6</option>
<option <?php if (isset($_POST['taille']) AND ($_POST['taille'] == 7)) {echo 'selected="" ';} ?>value="7">7</option>
<option <?php if (isset($_POST['taille']) AND ($_POST['taille'] == 8)) {echo 'selected="" ';} ?>value="8">8</option>
<option <?php if (isset($_POST['taille']) AND ($_POST['taille'] == 9)) {echo 'selected="" ';} ?>value="9">9</option>
<option <?php if (isset($_POST['taille']) AND ($_POST['taille'] == 10)) {echo 'selected="" ';} ?>value="10">10</option>
<option <?php if (isset($_POST['taille']) AND ($_POST['taille'] == 20)) {echo 'selected="" ';} ?>value="20">20</option>
</select>
</div>
<div class="param">
<label for="redondance">Taux de redondance</label>
<span class="conteneurAide">
<img src="aide.svg" alt="Aide">
<span class="contenuAide">La redondance est le "doublement" des informations dans le code QR afin de corriger les erreurs lors du décodage. Un taux plus élevé produira un code QR plus grand, mais aura plus de chance d'être décodé correctement.</span>
</span>
<br>
<select id="redondance" name="redondance">
<option <?php if (isset($_POST['redondance']) AND ($_POST['redondance'] == "L")) {echo 'selected="" ';} ?>value="L">L - 7% de redondance</option>
<option <?php if (isset($_POST['redondance']) AND ($_POST['redondance'] == "M")) {echo 'selected="" ';} ?>value="M">M - 15% de redondance</option>
<option <?php if (isset($_POST['redondance']) AND ($_POST['redondance'] == "Q")) {echo 'selected="" ';} ?>value="Q">Q - 25% de redondance</option>
<option <?php if ((isset($_POST['redondance']) AND ($_POST['redondance'] == "H")) OR (!isset($_POST['redondance']))) {echo 'selected="" ';} ?>value="H">H - 30% de redondance</option>
</select>
</div>
<div class="param">
<label for="marge">Taille de la marge</label>
<span class="conteneurAide">
<img src="aide.svg" alt="Aide">
<span class="contenuAide">Nombre de pixels des bandes blanches autour du code QR.</span>
</span>
<br>
<select id="marge" name="marge">
<option <?php if (isset($_POST['marge']) AND ($_POST['marge'] == "0")) {echo 'selected="" ';} ?>value="0">0</option>
<option <?php if (isset($_POST['marge']) AND ($_POST['marge'] == "1")) {echo 'selected="" ';} ?>value="1">1</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 <?php if (isset($_POST['marge']) AND ($_POST['marge'] == "3")) {echo 'selected="" ';} ?>value="3">3</option>
<option <?php if (isset($_POST['marge']) AND ($_POST['marge'] == "5")) {echo 'selected="" ';} ?>value="5">5</option>
<option <?php if (isset($_POST['marge']) AND ($_POST['marge'] == "10")) {echo 'selected="" ';} ?>value="10">10</option>
</select>
</div>
<div class="param">
<label for="taille">Taille de l'image</label>
<span class="conteneurAide">
<img src="aide.svg" alt="Aide">
<span class="contenuAide">Par combien les dimensions de l'image seront-elles multipliées ?</span>
</span>
<br>
<select id="taille" name="taille">
<option <?php if (isset($_POST['taille']) AND ($_POST['taille'] == 1)) {echo 'selected=""';} ?> value="1">1</option>
<option <?php if (isset($_POST['taille']) AND ($_POST['taille'] == 2)) {echo 'selected=""';} ?> value="2">2</option>
<option <?php if (isset($_POST['taille']) AND ($_POST['taille'] == 3)) {echo 'selected=""';} ?> value="3">3</option>
<option <?php if ((isset($_POST['taille']) AND ($_POST['taille'] == 4)) OR (!isset($_POST['taille']))) {echo 'selected=""';} ?> value="4">4 - par défaut</option>
<option <?php if (isset($_POST['taille']) AND ($_POST['taille'] == 5)) {echo 'selected=""';} ?> value="5">5</option>
<option <?php if (isset($_POST['taille']) AND ($_POST['taille'] == 6)) {echo 'selected=""';} ?> value="6">6</option>
<option <?php if (isset($_POST['taille']) AND ($_POST['taille'] == 7)) {echo 'selected=""';} ?> value="7">7</option>
<option <?php if (isset($_POST['taille']) AND ($_POST['taille'] == 8)) {echo 'selected=""';} ?> value="8">8</option>
<option <?php if (isset($_POST['taille']) AND ($_POST['taille'] == 9)) {echo 'selected=""';} ?> value="9">9</option>
<option <?php if (isset($_POST['taille']) AND ($_POST['taille'] == 10)) {echo 'selected=""';} ?> value="10">10</option>
<option <?php if (isset($_POST['taille']) AND ($_POST['taille'] == 20)) {echo 'selected=""';} ?> value="20">20</option>
</select>
</div>
<br/>
<div class="param">
<label for="redondance">Taux de redondance</label>
<span class="conteneurAide">
<img src="aide.svg" alt="Aide">
<span class="contenuAide">La redondance est le "doublement" des informations dans le code QR afin de corriger les erreurs lors du décodage. Un taux plus élevé produira un code QR plus grand, mais aura plus de chance d'être décodé correctement.</span>
</span>
<br>
<select id="redondance" name="redondance">
<option <?php if (isset($_POST['redondance']) AND ($_POST['redondance'] == "L")) {echo 'selected=""';} ?> value="L">L - 7% de redondance</option>
<option <?php if (isset($_POST['redondance']) AND ($_POST['redondance'] == "M")) {echo 'selected=""';} ?> value="M">M - 15% de redondance</option>
<option <?php if (isset($_POST['redondance']) AND ($_POST['redondance'] == "Q")) {echo 'selected=""';} ?> value="Q">Q - 25% de redondance</option>
<option <?php if ((isset($_POST['redondance']) AND ($_POST['redondance'] == "H")) OR (!isset($_POST['redondance']))) {echo 'selected=""';} ?> value="H">H - 30% de redondance</option>
</select>
</div>
<div class="param">
<label for="marge">Taille de la marge</label>
<span class="conteneurAide">
<img src="aide.svg" alt="Aide">
<span class="contenuAide">Nombre de pixels des bandes blanches autour du code QR.</span>
</span>
<br>
<select id="marge" name="marge">
<option value="0">0</option>
<option value="1">1</option>
<option selected="" value="2">2 - par défaut</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="10">10</option>
</select>
<div class="centrer">
<input type="submit" value="Générer" />
</div>
<br/>
<input type="submit" value="Générer" />
<br/>
</form>
<?php
if (isset($_POST['texte']) and isset($_POST['taille']) and isset($_POST['redondance']) and isset($_POST['marge'])) {
include "phpqrcode/qrlib.php";
function generateRandomString($length) {
$characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
$charactersLength = strlen($characters);
$randomString = '';
for ($i = 0; $i < $length; $i++) {
$randomString .= $characters[rand(0, $charactersLength - 1)];
}
return $randomString;
}
$cheminImage = "temp/" . $_POST['taille'] . $_POST['redondance'] . $_POST['marge'] . "-" . mt_rand(0, 10000000) . ".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>
if (isset($_POST['texte']) and isset($_POST['taille']) and isset($_POST['redondance']) and isset($_POST['marge'])) {
include "phpqrcode/qrlib.php";
<br><br>
<a href="<?php echo $cheminImage; ?>"><img src="<?php echo $cheminImage; ?>"/></a>
$cheminImage = "temp/" . generateRandomString(50) . ".png";
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>
<div class="centrer">
<a href="<?php echo $cheminImage; ?>"><img id="codeQR" src="<?php echo $cheminImage; ?>"/></a>
</div>
<?php
}
?>
<footer>
<a class="lienCodeSource" href="https://code.antopie.org/miraty/qr">Code source</a>
</footer>
</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
File diff suppressed because it is too large
View File

BIN
parinux.png
View File

Side by Side

After

Width: 300  |  Height: 240  |  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-family: "ubuntu-dl";
src: url('ubuntu-dl.ttf');
}
.ubuntu {
font-family: ubuntu-dl;
}
#redondance, #marge, #texte, #taille {
appearance: none;
border: 2px #5f5f5f solid;
border: 2px @bordure solid;
border-radius: 7px;
font-size: 20px;
padding-left: 10px;
font-weight: normal;
color: white;
color: @texteForm;
margin-top: 8px;
transition: border 0.2s linear;
}
#redondance, #taille, #marge {
background-color: #31363B;
background-color: @fondChamp;
width: 250px;
height: 40px;
}
#texte {
background-color: #232629;
background-color: @fondChampTexte;
color: @texteForm;
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 {
background-color: #31363B;
border: 2px #616569 solid;
color: white;
background-color: @fondChamp;
border: 2px @bordure solid;
color: @texteForm;
padding: 3px 10px 3px 10px;
border-radius: 3px;
font-size: 1.2em;
text-decoration: none;
display: inline;
transition: border 0.2s linear;
}
#redondance:hover, #marge:hover, #texte:hover, #taille:hover, input[type=submit]:hover {
border: 2px #808080 solid;
#redondance:hover, #marge:hover, #texte:hover, #taille:hover, input[type=submit]:hover, .bouton:hover {
border: 2px @bordureHover solid;
}
#texte:focus, input[type=submit]:focus {
border: 2px #b6b6b6 solid;
#texte:focus, input[type=submit]:focus, .bouton:focus {
border: 2px @bordureFocus solid;
}
form {
@ -58,15 +106,21 @@ form {
margin: 0px;
}
body {
background-color: #2D2F34;
color: white;
html {
width: 500px;
margin-left: auto;
margin-right: auto;
background-color: @fond;
color: @texte;
font-family: "ubuntu", "ubuntu-dl";
font-weight: normal;
font-size: 1em;
margin-left: auto;
margin-right: auto;
width: 500px;
& a {
color: @texte;
text-decoration: none;
}
}
label {
@ -75,12 +129,11 @@ label {
}
header a {
color: #868686;
.lienCodeSource {
color: @texteLienCodeSource;
font-size: 12px;
margin-bottom: -20px;
text-align: right;
}
header {
@ -91,23 +144,38 @@ h1 {
text-align: left;
padding: 0px;
margin: 0px;
font-size: 40px;
font-size: 35px;
}
.param {
padding: 10px;
padding-left: 0px;
margin-left: 0px;
padding-right: 0px;
margin-right: 0px;
}
@media (max-width: 719px) {
body {
margin-right: 0%;
margin-left: 0%;
@media (max-width: 640px) { // Version mobile
html {
margin: 10px;
width: 400px;
}
#texte {
width: 400px;
}
h1 {
font-size: 25px;
}
}
#logo {
width: 60px;
display: @afficherLogoParinux;
}
/* Infobulle */
@ -137,28 +205,10 @@ h1 {
.conteneurAide:hover .contenuAide, .conteneurAide:focus .contenuAide {
transform: scale(1) rotate(0);
}
.conteneurAide:hover .contenuAide, .conteneurAide:focus .contenuAide {
opacity: 1;
}
.conteneurAide {
background-color: #2D2F34;
text-decoration: none;
}
.contenuAide {
background-color: #2D2F34;
text-decoration: none;
}
.conteneurAide:hover {
background-color: #2D2F34;
text-decoration: none;
}
.contenuAide:hover {
background-color: #2D2F34;
.conteneurAide, .conteneurAide:hover {
background-color: @fond;
text-decoration: none;
}

BIN
temp/4H2-8335722.png
View File

Side by Side

Before

Width: 132  |  Height: 132  |  Size: 339 B

BIN
temp/UoD3X0SUSLDF4K8V67igQozAaw7fOTStC8IO5gcMLd3OyW1r0b.png
View File

Side by Side

After

Width: 148  |  Height: 148  |  Size: 401 B

Write Preview
Loading…
Cancel
Save