Thème Parinux + suppression automatique + centrage de l'interface
This commit is contained in:
Miraty
parent
9ca63cff3d
commit
2be8145a54
7 changed files with 243 additions and 118 deletions
BIN
favicon.png
Executable file → Normal file
BIN
favicon.png
Executable file → Normal file
Binary file not shown.
|
Before Width: | Height: | Size: 196 B After Width: | Height: | Size: 1.1 KiB |
133
index.php
133
index.php
|
|
@ -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,7 +34,7 @@
|
|||
?></textarea>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="menusDeroulants">
|
||||
<div class="param">
|
||||
<label for="taille">Taille de l'image</label>
|
||||
<span class="conteneurAide">
|
||||
|
|
@ -41,17 +43,17 @@
|
|||
</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>
|
||||
<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>
|
||||
|
||||
|
|
@ -65,10 +67,10 @@
|
|||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
|
@ -80,38 +82,93 @@
|
|||
</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>
|
||||
|
||||
<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>
|
||||
<br/>
|
||||
|
||||
<div class="centrer">
|
||||
<input type="submit" value="Générer" />
|
||||
|
||||
</div>
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
|
||||
</form>
|
||||
|
||||
<?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'])) {
|
||||
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>
|
||||
<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
|
||||
}
|
||||
?>
|
||||
|
||||
<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
vendored
Normal file
18
less.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
parinux.png
Normal file
BIN
parinux.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
|
|
@ -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: 640px) { // Version mobile
|
||||
|
||||
html {
|
||||
margin: 10px;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
#texte {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 719px) {
|
||||
body {
|
||||
margin-right: 0%;
|
||||
margin-left: 0%;
|
||||
}
|
||||
#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;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 339 B |
BIN
temp/UoD3X0SUSLDF4K8V67igQozAaw7fOTStC8IO5gcMLd3OyW1r0b.png
Normal file
BIN
temp/UoD3X0SUSLDF4K8V67igQozAaw7fOTStC8IO5gcMLd3OyW1r0b.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 401 B |
Loading…
Reference in a new issue