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>
|
||||
<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">
|
||||
|
@ -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());
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
?>
|
||||
|
|
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-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 |
Binary file not shown.
After Width: | Height: | Size: 401 B |
Loading…
Reference in New Issue