Thème Parinux + suppression automatique + centrage de l'interface
This commit is contained in:
parent
9ca63cff3d
commit
2be8145a54
Binary file not shown.
Before Width: | Height: | Size: 196 B After Width: | Height: | Size: 1.1 KiB |
103
index.php
103
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>
|
<!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());
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
?>
|
||||||
|
|
File diff suppressed because one or more lines are too long
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-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 |
Loading…
Reference in New Issue