POST > GET ; defaut > dark
This commit is contained in:
Miraty
parent
ced67dcceb
commit
0f883cf573
18
README.md
18
README.md
@ -1,4 +1,4 @@
|
|||||||
#  Générateur de codes QR
|
#  LibreQR
|
||||||
|
|
||||||
## Présentation
|
## Présentation
|
||||||
|
|
||||||
@ -26,7 +26,9 @@ Placez ce code source dans un serveur Web avec PHP, tout simplement.
|
|||||||
|
|
||||||
### YunoHost
|
### YunoHost
|
||||||
|
|
||||||
J'ai créé un [paquet](https://code.antopie.org/miraty/qr_ynh/) [YunoHost](https://yunohost.org/).
|
J'ai créé un [paquet](https://code.antopie.org/miraty/qr_ynh/) pour [YunoHost](https://yunohost.org/).
|
||||||
|
|
||||||
|
Vous pouvez l'installer depuis l'interface d'administration ou avec cette commande :
|
||||||
|
|
||||||
```
|
```
|
||||||
sudo yunohost app install https://code.antopie.org/miraty/qr_ynh/
|
sudo yunohost app install https://code.antopie.org/miraty/qr_ynh/
|
||||||
@ -40,14 +42,14 @@ Dans options.inc.php, donnez à $theme le nom du thème voulu.
|
|||||||
|
|
||||||
Par défaut, deux thèmes sont proposés :
|
Par défaut, deux thèmes sont proposés :
|
||||||
|
|
||||||
* defaut, le thème par défaut, sombre. Il est utilisé ici : <https://qr.antopie.org>
|
* dark, le thème par défaut, sombre. Il est utilisé ici : <https://qr.antopie.org>
|
||||||
* parinux, un thème bleu, créé pour [Bastet](https://bastet.parinux.org/), le chaton de [Parinux](https://parinux.org/). Il est utilisé ici : <https://qrcode.parinux.org>
|
* parinux, un thème bleu, créé pour [Bastet](https://bastet.parinux.org/), le chaton de [Parinux](https://parinux.org/). Il est utilisé ici : <https://qrcode.parinux.org>
|
||||||
|
|
||||||
### Créer un thème
|
### Créer un thème
|
||||||
|
|
||||||
* Copiez themes/defaut vers themes/[nom de votre thème]
|
* Copiez themes/dark vers themes/[nom de votre thème]
|
||||||
* Depuis ce nouveau dossier, créez les icônes dans favicons/[longueur du côté de l'icone].png
|
* Depuis ce nouveau dossier, créez les icônes dans favicons/[longueur d'un côté de l'icône].png
|
||||||
* Complétez theme.php en fonctions des favicons créées précédemment et des couleurs CSS voulues dans l'interface
|
* Complétez theme.php en fonction des favicons créées précédemment et des couleurs CSS voulues dans l'interface
|
||||||
|
|
||||||
## Bibliothèques tierces
|
## Bibliothèques tierces
|
||||||
|
|
||||||
@ -61,8 +63,8 @@ Ce code source inclus :
|
|||||||
|
|
||||||
[AGPLv3+](https://code.antopie.org/miraty/qr/src/branch/master/LICENSE)
|
[AGPLv3+](https://code.antopie.org/miraty/qr/src/branch/master/LICENSE)
|
||||||
|
|
||||||
Ce générateur de codes QR est un logiciel libre ; vous pouvez le diffuser et le modifier suivant les termes de la GNU Affero General Public License telle que publiée par la Free Software Foundation ; soit la version 3 de cette licence, soit (à votre convenance) une version ultérieure.
|
LibreQR est un logiciel libre ; vous pouvez le diffuser et le modifier suivant les termes de la GNU Affero General Public License telle que publiée par la Free Software Foundation ; soit la version 3 de cette licence, soit (à votre convenance) une version ultérieure.
|
||||||
|
|
||||||
Ce générateur de codes QR est diffusé dans l’espoir qu’il sera utile, mais SANS AUCUNE GARANTIE ; sans même une garantie implicite de COMMERCIALISATION ou d’ADÉQUATION À UN USAGE PARTICULIER. Voyez la GNU Affero General Public License pour plus de détails.
|
LibreQR est diffusé dans l’espoir qu’il sera utile, mais SANS AUCUNE GARANTIE ; sans même une garantie implicite de COMMERCIALISATION ou d’ADÉQUATION À UN USAGE PARTICULIER. Voyez la GNU Affero General Public License pour plus de détails.
|
||||||
|
|
||||||
Vous devriez avoir reçu une copie de la GNU Affero General Public License avec ce code. Sinon, consultez <https://www.gnu.org/licenses/>
|
Vous devriez avoir reçu une copie de la GNU Affero General Public License avec ce code. Sinon, consultez <https://www.gnu.org/licenses/>
|
||||||
|
|||||||
4
aide.svg
4
aide.svg
@ -2,8 +2,8 @@
|
|||||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
<g transform="translate(-400.000000, -247.000000)">
|
<g transform="translate(-400.000000, -247.000000)">
|
||||||
<g id="69" transform="translate(400.000000, 247.000000)">
|
<g id="69" transform="translate(400.000000, 247.000000)">
|
||||||
<circle id="Oval-7" stroke="<?php echo $variablesTheme["texte"]; ?>" stroke-width="2" cx="12" cy="12" r="10"></circle>
|
<circle id="Oval-7" stroke="<?php echo $variablesTheme["text"]; ?>" stroke-width="2" cx="12" cy="12" r="10"></circle>
|
||||||
<path d="M12.016,14.544 C12.384,14.544 12.64,14.256 12.704,13.904 L12.768,13.168 C14.544,12.864 16,11.952 16,9.936 L16,9.904 C16,7.904 14.48,6.656 12.24,6.656 C10.768,6.656 9.696,7.184 8.848,7.984 C8.624,8.176 8.528,8.432 8.528,8.672 C8.528,9.152 8.928,9.552 9.424,9.552 C9.648,9.552 9.856,9.456 10.016,9.328 C10.656,8.752 11.344,8.448 12.192,8.448 C13.344,8.448 14.032,9.072 14.032,9.968 L14.032,10 C14.032,11.008 13.2,11.584 11.696,11.728 C11.264,11.776 11.008,12.096 11.072,12.528 L11.232,13.904 C11.28,14.272 11.552,14.544 11.92,14.544 L12.016,14.544 Z M10.784,16.816 L10.784,16.976 C10.784,17.6 11.264,18.08 11.92,18.08 C12.576,18.08 13.056,17.6 13.056,16.976 L13.056,16.816 C13.056,16.192 12.576,15.712 11.92,15.712 C11.264,15.712 10.784,16.192 10.784,16.816 Z" id="?" fill="<?php echo $variablesTheme["texte"]; ?>"></path>
|
<path d="M12.016,14.544 C12.384,14.544 12.64,14.256 12.704,13.904 L12.768,13.168 C14.544,12.864 16,11.952 16,9.936 L16,9.904 C16,7.904 14.48,6.656 12.24,6.656 C10.768,6.656 9.696,7.184 8.848,7.984 C8.624,8.176 8.528,8.432 8.528,8.672 C8.528,9.152 8.928,9.552 9.424,9.552 C9.648,9.552 9.856,9.456 10.016,9.328 C10.656,8.752 11.344,8.448 12.192,8.448 C13.344,8.448 14.032,9.072 14.032,9.968 L14.032,10 C14.032,11.008 13.2,11.584 11.696,11.728 C11.264,11.776 11.008,12.096 11.072,12.528 L11.232,13.904 C11.28,14.272 11.552,14.544 11.92,14.544 L12.016,14.544 Z M10.784,16.816 L10.784,16.976 C10.784,17.6 11.264,18.08 11.92,18.08 C12.576,18.08 13.056,17.6 13.056,16.976 L13.056,16.816 C13.056,16.192 12.576,15.712 11.92,15.712 C11.264,15.712 10.784,16.192 10.784,16.816 Z" id="?" fill="<?php echo $variablesTheme["text"]; ?>"></path>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
302
index.php
302
index.php
@ -1,47 +1,78 @@
|
|||||||
<?php require "options.inc.php"; ?>
|
<?php require "options.inc.php"; ?>
|
||||||
<!--
|
<!--
|
||||||
_____ _ _ _ _____ ______
|
_ _ _ ___ ____
|
||||||
| __ \ // // | | | | | | | _ || ___ \
|
| | (_| |__ _ __ ___ / _ \| _ \
|
||||||
| | \/ ___ _ __ ___ _ __ __ _ | |_ ___ _ _ _ __ __| | ___ ___ ___ __| | ___ ___ | | | || |_/ /
|
| | | | '_ \| '__/ _ | | | | |_) |
|
||||||
| | __ / _ \| '_ \ / _ \| '__| / _` || __| / _ \| | | || '__| / _` | / _ \ / __| / _ \ / _` | / _ \/ __| | | | || /
|
| |___| | |_) | | | __| |_| | _ <
|
||||||
| |_\ \| __/| | | || __/| | | (_| || |_ | __/| |_| || | | (_| || __/ | (__ | (_) || (_| || __/\__ \ \ \/' /| |\ \
|
|_____|_|_.__/|_| \___|\__\_|_| \_\
|
||||||
\____/ \___||_| |_| \___||_| \__,_| \__| \___| \__,_||_| \__,_| \___| \___| \___/ \__,_| \___||___/ \_/\_\\_| \_|
|
|
||||||
|
|
||||||
|
LibreQR version 1.2.0
|
||||||
|
Créé par Miraty et diffusé sous AGPLv3+
|
||||||
|
Code source : https://code.antopie.org/miraty/qr
|
||||||
|
|
||||||
|
Ce fichier fait partie de LibreQR.
|
||||||
|
|
||||||
|
LibreQR est un logiciel libre ; vous pouvez le redistribuer ou le modifier
|
||||||
|
suivant les termes de la GNU Affero General Public License
|
||||||
|
telle que publiée par la Free Software Foundation ; soit la version 3
|
||||||
|
de la licence, soit (à votre gré) toute version ultérieure.
|
||||||
|
|
||||||
|
LibreQR est distribué dans l'espoir qu'il sera utile,
|
||||||
|
mais SANS AUCUNE GARANTIE ; sans même la garantie tacite de
|
||||||
|
QUALITÉ MARCHANDE ou d'ADÉQUATION à UN BUT PARTICULIER.
|
||||||
|
Consultez la GNU Affero General Public License pour plus de détails.
|
||||||
|
|
||||||
|
Vous devez avoir reçu une copie de la GNU Affero General Public License
|
||||||
|
en même temps que LibreQR ; si ce n'est pas le cas,
|
||||||
|
consultez <https://www.gnu.org/licenses/>.
|
||||||
|
|
||||||
Version 1.2.0dev
|
|
||||||
Créé par Miraty et diffusé sous AGPLv3+
|
|
||||||
Code source : https://code.antopie.org/miraty/qr
|
|
||||||
-->
|
-->
|
||||||
|
|
||||||
|
<?php
|
||||||
|
if (!isset($_GET['text']) AND !isset($_GET['size']) AND !isset($_GET['redondancy']) AND !isset($_GET['margin']) AND !isset($_GET['bgColor']) AND !isset($_GET['mainColor'])) {
|
||||||
|
$arguments = $_SERVER['REQUEST_URI'];
|
||||||
|
$arguments = preg_replace('#(manifest|opensearch|index).php$#i', '', $arguments);
|
||||||
|
$arguments = preg_replace('#.*/#i', '', $arguments);
|
||||||
|
|
||||||
|
//$allVars = array("text", "redondancy")
|
||||||
|
//if (!isset($_GET['text'])) {
|
||||||
|
|
||||||
|
header('Location: ' . $cheminInstall . "?text=" . $_GET['text'] . "&redondancy=" . $_GET['redondancy'] . "&margin=" . $_GET['margin'] . "&size=" . $_GET['size'] . "&bgColor=" . $_GET['bgColor'] . "&mainColor=" . $_GET['mainColor']);
|
||||||
|
/*
|
||||||
|
if (empty($arguments)) {
|
||||||
|
header('Location: ' . $cheminInstall . $arguments . '?text=');
|
||||||
|
} else {
|
||||||
|
header('Location: ' . $cheminInstall . $arguments . '&text=');
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
//}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
?>
|
||||||
|
|
||||||
<!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>
|
||||||
<meta name="description" content="Générez des codes QR librement. Choisissez le contenu, la taille, la couleur...">
|
<meta name="description" content="Générez des codes QR librement. Choisissez le contenu, la taille, la couleur...">
|
||||||
<meta name="theme-color" content="<?php echo $variablesTheme['fond']; ?>">
|
<meta name="theme-color" content="<?php echo $variablesTheme['bg']; ?>">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="manifest" href="manifest.php">
|
<link rel="manifest" href="manifest.php">
|
||||||
<link rel="search" type="application/opensearchdescription+xml" title="Générer un code QR" href="opensearch.php">
|
<link rel="search" type="application/opensearchdescription+xml" title="Générer un code QR" href="opensearch.php?redondancy=<?= $_GET['redondancy'] ?>&margin=<?= $_GET['margin'] ?>&size=<?= $_GET['size'] ?>&bgColor=<?= urlencode($_GET['bgColor']) ?>&mainColor=<?= urlencode($_GET['mainColor']) ?>">
|
||||||
|
|
||||||
<style>
|
|
||||||
<?php
|
<?php
|
||||||
$less->setVariables($variablesTheme); // Rends ces couleurs utilisables dans style.less
|
$less->setVariables($variablesTheme); // Rends ces couleurs utilisables dans style.less
|
||||||
|
|
||||||
|
// Minimise et met en cache style.less dans style.min.css
|
||||||
if ($env == "prod") { // En production : minimise et met en cache style.less dans style.css
|
|
||||||
$less->setFormatter("compressed");
|
$less->setFormatter("compressed");
|
||||||
$less->checkedCompile("style.less", "style.css");
|
$less->checkedCompile("style.less", "style.min.css");
|
||||||
echo file_get_contents("ubuntu/ubuntu.min.css") . file_get_contents("style.css"); // Inclus toutes les CSS dans le document HTML (= moins de requêtes HTTP)
|
?>
|
||||||
|
<link type="text/css" rel="stylesheet" href="style.min.css" />
|
||||||
|
<link type="text/css" rel="stylesheet" href="ubuntu/ubuntu.min.css" />
|
||||||
|
|
||||||
} else if ($env == "dev") { // En développement : compile style.less à chaque chargement de page
|
|
||||||
echo file_get_contents("ubuntu/ubuntu.min.css") . $less->compileFile("style.less");
|
|
||||||
|
|
||||||
} else {
|
|
||||||
echo "Erreur : $env doit valoir prod ou dev dans options.inc.php";
|
|
||||||
} ?>
|
|
||||||
</style>
|
|
||||||
<?php
|
<?php
|
||||||
|
|
||||||
foreach($themeDimensionsFavicons as $dimFav) { // Indique toutes les dimensions de favicons
|
foreach($themeDimensionsFavicons as $dimFav) { // Indique toutes les dimensions de favicons
|
||||||
echo ' <link rel="icon" type="image/png" href="themes/' . $theme . '/favicons/' . $dimFav . '.png" sizes="' . $dimFav . 'x' . $dimFav . '">' . "\n";
|
echo ' <link rel="icon" type="image/png" href="themes/' . $theme . '/favicons/' . $dimFav . '.png" sizes="' . $dimFav . 'x' . $dimFav . '">' . "\n";
|
||||||
} ?>
|
} ?>
|
||||||
@ -50,193 +81,168 @@
|
|||||||
|
|
||||||
<body lang="fr">
|
<body lang="fr">
|
||||||
|
|
||||||
|
<div class="center">
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<a href="<?php echo $cheminInstall; ?>"><img id="logo" src="themes/<?php echo $theme; ?>/favicons/48.png" alt="Logo de code QR"> <h1>Générateur de codes QR</h1></a>
|
<a id="titre" href="<?php echo $cheminInstall; ?>"><img id="logo" src="themes/<?php echo $theme; ?>/favicons/48.png" alt="Logo de code QR"> <h1>Générateur de codes QR</h1></a>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<?php if (!isset($_GET["texte"])) { // Si OpenSearch n'a pas été utilisé ?>
|
|
||||||
|
|
||||||
<form method="post">
|
|
||||||
|
<form method="get" action="./">
|
||||||
|
|
||||||
|
<div id="firstWrapper">
|
||||||
|
|
||||||
<div class="param">
|
<div class="param">
|
||||||
<label for="texte">Texte à encoder</label>
|
<label for="text">Texte à encoder</label>
|
||||||
<span class="conteneurAide">
|
<span class="conteneurAide">
|
||||||
<span class="boutonAide"><?php include "aide.svg"; ?></span>
|
<span class="boutonAide" tabindex="0"><?php include "aide.svg"; ?></span>
|
||||||
<span class="contenuAide">Vous pouvez encoder ce que vous voulez sous forme de texte.</span>
|
<span class="contenuAide">
|
||||||
|
Vous pouvez encoder ce que vous voulez sous forme de texte.<br>
|
||||||
|
Les logiciels qui décodent ces codes QR pourraient proposer de les ouvrir avec un logiciel dédié, en fonction de leur <a href="https://fr.wikipedia.org/wiki/Sch%C3%A9ma_d%27URI">schéma d'URI</a>.<br><br>
|
||||||
|
Par exemple, pour ouvrir une page Web :<br>
|
||||||
|
https://www.domaine.tld/<br><br>
|
||||||
|
Pour envoyer un mail :<br>
|
||||||
|
mailto:contact@domaine.tld<br><br>
|
||||||
|
Pour partager des coordonnées géographique :<br>
|
||||||
|
geo:48.867564,2.364057<br><br>
|
||||||
|
Pour appeler un numéro de téléphone :<br>
|
||||||
|
tel:0639981871
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<br>
|
<br>
|
||||||
<textarea rows="8" required="" id="texte" placeholder="Entrez le texte à encoder dans le code QR" name="texte"><?php
|
<textarea rows="8" required="" id="text" placeholder="Entrez le texte à encoder dans le code QR" name="text"><?php
|
||||||
|
|
||||||
if (isset($_POST['texte'])) {
|
if (isset($_GET['text'])) {
|
||||||
echo $_POST['texte'];
|
echo $_GET['text'];
|
||||||
}
|
}
|
||||||
|
|
||||||
?></textarea>
|
?></textarea>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div id="couleurs">
|
|
||||||
|
|
||||||
<div class="param">
|
|
||||||
<label for="couleurFond">Couleur de fond</label>
|
|
||||||
<span class="conteneurAide">
|
|
||||||
<span class="boutonAide"><?php include "aide.svg"; ?></span>
|
|
||||||
<span class="contenuAide">Par combien les dimensions de l'image seront-elles multipliées ?</span>
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<div class="conteneurInputColor">
|
|
||||||
<input type="color" name="couleurFond" id="couleurFond" value="<?php if (isset($_POST['couleurFond'])) {echo $_POST['couleurFond'];} else {echo "#FFFFFF";} ?>">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="param">
|
|
||||||
<label for="couleurPrincipale">Couleur de premier plan</label>
|
|
||||||
<span class="conteneurAide">
|
|
||||||
<span class="boutonAide"><?php include "aide.svg"; ?></span>
|
|
||||||
<span class="contenuAide">Nombre de pixels des bandes blanches autour du code QR.</span>
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<div class="conteneurInputColor">
|
|
||||||
<input type="color" name="couleurPrincipale" id="couleurPrincipale" value="<?php if (isset($_POST['couleurPrincipale'])) {echo $_POST['couleurPrincipale'];} else {echo "#000000";} ?>">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div id="menusDeroulants">
|
<div id="menusDeroulants">
|
||||||
<div class="param">
|
|
||||||
<label for="taille">Taille de l'image</label>
|
|
||||||
<span class="conteneurAide">
|
|
||||||
<span class="boutonAide"><?php include "aide.svg"; ?></span>
|
|
||||||
<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'] == 10)) {echo 'selected="" ';} ?>value="10">10</option>
|
|
||||||
<option <?php if (isset($_POST['taille']) AND ($_POST['taille'] == 15)) {echo 'selected="" ';} ?>value="15">15</option>
|
|
||||||
<option <?php if (isset($_POST['taille']) AND ($_POST['taille'] == 20)) {echo 'selected="" ';} ?>value="20">20</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="param">
|
<div class="param">
|
||||||
<label for="redondance">Taux de redondance</label>
|
<label for="redondancy">Taux de redondance</label>
|
||||||
<span class="conteneurAide">
|
<span class="conteneurAide">
|
||||||
<span class="boutonAide"><?php include "aide.svg"; ?></span>
|
<span class="boutonAide" tabindex="0"><?php include "aide.svg"; ?></span>
|
||||||
<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 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>
|
</span>
|
||||||
<br>
|
<br>
|
||||||
<select id="redondance" name="redondance">
|
<select id="redondancy" name="redondancy">
|
||||||
<option <?php if (isset($_POST['redondance']) AND ($_POST['redondance'] == "L")) {echo 'selected="" ';} ?>value="L">L - 7% de redondance</option>
|
<option <?php if (isset($_GET['redondancy']) AND ($_GET['redondancy'] == "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($_GET['redondancy']) AND ($_GET['redondancy'] == "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($_GET['redondancy']) AND ($_GET['redondancy'] == "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($_GET['redondancy']) AND ($_GET['redondancy'] == "H")) OR (!isset($_GET['redondancy']) OR empty($_GET['redondancy']))) {echo 'selected="" ';} ?>value="H">H - 30% de redondance</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="param">
|
<div class="param">
|
||||||
<label for="marge">Taille de la marge</label>
|
<label for="margin">Taille de la marge</label>
|
||||||
<span class="conteneurAide">
|
<span class="conteneurAide">
|
||||||
<span class="boutonAide"><?php include "aide.svg"; ?></span>
|
<span class="boutonAide" tabindex="0"><?php include "aide.svg"; ?></span>
|
||||||
<span class="contenuAide">Nombre de pixels des bandes blanches autour du code QR.</span>
|
<span class="contenuAide">Nombre de pixels des bandes blanches autour du code QR.</span>
|
||||||
</span>
|
</span>
|
||||||
<br>
|
<br>
|
||||||
<select id="marge" name="marge">
|
<select id="margin" name="margin">
|
||||||
<option <?php if (isset($_POST['marge']) AND ($_POST['marge'] == "0")) {echo 'selected="" ';} ?>value="0">0</option>
|
<option <?php if (isset($_GET['margin']) AND ($_GET['margin'] == "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($_GET['margin']) AND ($_GET['margin'] == "1")) {echo 'selected="" ';} ?>value="1">1</option>
|
||||||
<option <?php if ((isset($_POST['marge']) AND ($_POST['marge'] == "2")) OR (!isset($_POST['marge']))) {echo 'selected="" ';} ?>value="2">2 - par défaut</option>
|
<option <?php if ((isset($_GET['margin']) AND ($_GET['margin'] == "2")) OR (!isset($_GET['margin']) OR empty($_GET['margin']))) {echo '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($_GET['margin']) AND ($_GET['margin'] == "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($_GET['margin']) AND ($_GET['margin'] == "5")) {echo 'selected="" ';} ?>value="5">5</option>
|
||||||
<option <?php if (isset($_POST['marge']) AND ($_POST['marge'] == "10")) {echo 'selected="" ';} ?>value="10">10</option>
|
<option <?php if (isset($_GET['margin']) AND ($_GET['margin'] == "10")) {echo 'selected="" ';} ?>value="10">10</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="param">
|
||||||
|
<label for="size">Taille de l'image</label>
|
||||||
|
<span class="conteneurAide">
|
||||||
|
<span class="boutonAide" tabindex="0"><?php include "aide.svg"; ?></span>
|
||||||
|
<span class="contenuAide">Par combien les dimensions de l'image seront-elles multipliées ?</span>
|
||||||
|
|
||||||
|
</span>
|
||||||
|
<br>
|
||||||
|
<select id="size" name="size">
|
||||||
|
<option <?php if (isset($_GET['size']) AND ($_GET['size'] == 1)) {echo 'selected="" ';} ?>value="1">1</option>
|
||||||
|
<option <?php if (isset($_GET['size']) AND ($_GET['size'] == 2)) {echo 'selected="" ';} ?>value="2">2</option>
|
||||||
|
<option <?php if (isset($_GET['size']) AND ($_GET['size'] == 3)) {echo 'selected="" ';} ?>value="3">3</option>
|
||||||
|
<option <?php if ((isset($_GET['size']) AND ($_GET['size'] == 4)) OR (!isset($_GET['size']) OR empty($_GET['size']))) {echo 'selected="" ';} ?>value="4">4 - par défaut</option>
|
||||||
|
<option <?php if (isset($_GET['size']) AND ($_GET['size'] == 5)) {echo 'selected="" ';} ?>value="5">5</option>
|
||||||
|
<option <?php if (isset($_GET['size']) AND ($_GET['size'] == 6)) {echo 'selected="" ';} ?>value="6">6</option>
|
||||||
|
<option <?php if (isset($_GET['size']) AND ($_GET['size'] == 7)) {echo 'selected="" ';} ?>value="7">7</option>
|
||||||
|
<option <?php if (isset($_GET['size']) AND ($_GET['size'] == 8)) {echo 'selected="" ';} ?>value="8">8</option>
|
||||||
|
<option <?php if (isset($_GET['size']) AND ($_GET['size'] == 10)) {echo 'selected="" ';} ?>value="10">10</option>
|
||||||
|
<option <?php if (isset($_GET['size']) AND ($_GET['size'] == 15)) {echo 'selected="" ';} ?>value="15">15</option>
|
||||||
|
<option <?php if (isset($_GET['size']) AND ($_GET['size'] == 20)) {echo 'selected="" ';} ?>value="20">20</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<div class="centrer">
|
|
||||||
<input type="submit" class="bouton" value="Générer" />
|
|
||||||
</div>
|
</div>
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
|
|
||||||
|
<div id="couleurs">
|
||||||
|
|
||||||
|
<div class="param">
|
||||||
|
<label for="bgColor">Couleur de fond</label>
|
||||||
|
<div class="conteneurInputColor">
|
||||||
|
<input type="color" name="bgColor" id="bgColor" value="<?php if (!empty($_GET['bgColor'])) {echo $_GET['bgColor'];} else {echo "#FFFFFF";} ?>">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="param">
|
||||||
|
<label for="mainColor">Couleur de premier plan</label>
|
||||||
|
<div class="conteneurInputColor">
|
||||||
|
<input type="color" name="mainColor" id="mainColor" value="<?php if (!empty($_GET['mainColor'])) {echo $_GET['mainColor'];} else {echo "#000000";} ?>">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<div class="centrer">
|
||||||
|
<input class="bouton" type="submit" value="Générer" />
|
||||||
|
</div>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
|
|
||||||
if (isset($_POST['texte']) AND isset($_POST['taille']) AND isset($_POST['redondance']) AND isset($_POST['marge']) AND isset($_POST['couleurFond']) AND isset($_POST['couleurPrincipale'])) {
|
if (!empty($_GET['text']) AND !empty($_GET['size']) AND !empty($_GET['redondancy']) AND !empty($_GET['margin']) AND !empty($_GET['bgColor']) AND !empty($_GET['mainColor'])) {
|
||||||
|
if (isset($_GET['text']) AND isset($_GET['size']) AND isset($_GET['redondancy']) AND isset($_GET['margin']) AND isset($_GET['bgColor']) AND isset($_GET['mainColor'])) {
|
||||||
require "phpqrcode.php";
|
require "phpqrcode.php";
|
||||||
|
|
||||||
$cheminImage = "temp/" . generateRandomString(50) . ".png";
|
$cheminImage = "temp/" . generateRandomString(64) . ".png";
|
||||||
|
|
||||||
|
|
||||||
QRcode::png($_POST['texte'], $cheminImage, $_POST['redondance'], $_POST['taille'], $_POST['marge'], false, hexdec($_POST['couleurFond']), hexdec($_POST['couleurPrincipale'])); ?>
|
|
||||||
|
|
||||||
|
QRcode::png($_GET['text'], $cheminImage); ?>
|
||||||
|
<img src="<?= $cheminImage ?>"/>
|
||||||
<div class="centrer">
|
<div class="centrer">
|
||||||
<a href="<?php echo $cheminImage; ?>" class="bouton" download="<?php echo htmlspecialchars($_POST['texte']); ?>.png">Télécharger ce code QR</a>
|
<a href="<?php echo $cheminImage; ?>" class="bouton" download="<?php echo htmlspecialchars($_GET['text']); ?>.png">Télécharger ce code QR</a>
|
||||||
</div>
|
</div>
|
||||||
<br><br>
|
<br><br>
|
||||||
<div class="centrer">
|
<div class="centrer">
|
||||||
<a title="Cliquez pour afficher uniquement ce code QR" href="<?php echo $cheminImage; ?>"><img alt='Un code QR contenant "<?php echo htmlspecialchars($_POST['texte']); ?>"' id="codeQR" src="<?php echo $cheminImage; ?>"/></a>
|
<a title="Cliquez pour afficher uniquement ce code QR" href="<?php echo $cheminImage; ?>"><img alt='Un code QR contenant "<?php echo htmlspecialchars($_GET['text']); ?>"' id="codeQR" src="<?php echo $cheminImage; ?>"/></a>
|
||||||
</div>
|
</div>
|
||||||
<?php
|
<?php
|
||||||
|
}
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<?php } else if (isset($_GET["texte"])) { // Si OpenSearch a été utilisé
|
|
||||||
|
|
||||||
if (empty($_GET["texte"])) { // Si rien n'a été recherché ?>
|
|
||||||
|
|
||||||
<span style="font-size: 30px;">Erreur : vous ne pouvez pas générer un code QR vide !
|
|
||||||
|
|
||||||
<?php } else {
|
|
||||||
|
|
||||||
require "phpqrcode.php";
|
|
||||||
$cheminImage = "temp/" . generateRandomString(50) . ".png";
|
|
||||||
|
|
||||||
QRcode::png($_GET['texte'], $cheminImage, "H", 4, 2); ?>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
Vous avez créé un code QR contenant :
|
|
||||||
<div class="contenuQR"><?php echo htmlspecialchars($_GET['texte']); ?></div>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<div class="centrer">
|
|
||||||
<a href="<?php echo $cheminImage; ?>" class="bouton" download="<?php echo htmlspecialchars($_GET['texte']); ?>.png">Télécharger ce code QR</a>
|
|
||||||
</div>
|
</div>
|
||||||
<br><br>
|
|
||||||
<div class="centrer">
|
|
||||||
<a title="Cliquez pour afficher uniquement ce code QR" href="<?php echo $cheminImage; ?>"><img alt='Un code QR contenant "<?php echo htmlspecialchars($_GET['texte']); ?>"' id="codeQR" src="<?php echo $cheminImage; ?>"/></a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<?php } } ?>
|
|
||||||
|
|
||||||
<section class="info">
|
<section class="info">
|
||||||
<strong>Qu'est-ce qu'un code QR ?</strong><br>
|
<strong>Qu'est-ce qu'un code QR ?</strong><br>
|
||||||
Un code QR est une image en 2 dimensions dans laquelle est inscrite en binaire des informations textuelles.<br>
|
Un code QR est un code-barres en 2 dimensions dans lequel est inscrit en binaire du texte. Il peut être décodé avec un appareil muni d'un capteur photo et d'un logiciel adéquat.
|
||||||
Un pixel blanc représente un 0 et un pixel noir représente un 1.<br>
|
|
||||||
<a href="https://fr.wikipedia.org/wiki/Code_QR">Code QR sur Wikipédia</a>
|
<a href="https://fr.wikipedia.org/wiki/Code_QR">Code QR sur Wikipédia</a>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<a class="topRight" href="https://code.antopie.org/miraty/qr/">Code source</a>
|
LibreQR 1.2.0 est un logiciel libre dont le <a href="https://code.antopie.org/miraty/qr/">code source</a> est disponible
|
||||||
|
selon les termes de l'<abbr title="GNU Affero General Public License version 3 ou toute version ultérieure"><a href="LICENSE.html">AGPLv3</a>+</abbr>.
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
19
manifest.php
19
manifest.php
@ -2,29 +2,24 @@
|
|||||||
{
|
{
|
||||||
"dir": "ltr",
|
"dir": "ltr",
|
||||||
"lang": "fr-FR",
|
"lang": "fr-FR",
|
||||||
"name": "Générateur de code QR",
|
"name": "LibreQR",
|
||||||
"short_name": "Code QR",
|
"short_name": "LibreQR",
|
||||||
"description": "Générez un code QR rapidement",
|
"description": "Générer un code QR rapidement",
|
||||||
"start_url": "<?php echo $cheminInstall; ?>",
|
"start_url": "<?php echo $cheminInstall; ?>",
|
||||||
"scope": "<?php echo $cheminInstall; ?>",
|
"scope": "<?php echo $cheminInstall; ?>",
|
||||||
"display": "standalone",
|
"display": "standalone",
|
||||||
"theme_color": "<?php echo $variablesTheme["fond"]; ?>",
|
"theme_color": "<?php echo $variablesTheme["bg"]; ?>",
|
||||||
"background_color": "<?php echo $variablesTheme["fond"]; ?>",
|
"background_color": "<?php echo $variablesTheme["bg"]; ?>",
|
||||||
"orientation": "portrait",
|
"orientation": "portrait",
|
||||||
"icons":
|
"icons":
|
||||||
[
|
[
|
||||||
<?php
|
<?php for ($i = 0; $i < (count($themeDimensionsFavicons) - 1); $i++) { ?>
|
||||||
for ($i = 0; $i < (count($themeDimensionsFavicons) - 1); $i++) { ?>
|
|
||||||
{
|
{
|
||||||
"src": "themes/<?php echo $theme; ?>/favicons/<?php echo $themeDimensionsFavicons[$i]; ?>.png",
|
"src": "themes/<?php echo $theme; ?>/favicons/<?php echo $themeDimensionsFavicons[$i]; ?>.png",
|
||||||
"sizes": "<?php echo $themeDimensionsFavicons[$i]; ?>x<?php echo $themeDimensionsFavicons[$i]; ?>",
|
"sizes": "<?php echo $themeDimensionsFavicons[$i]; ?>x<?php echo $themeDimensionsFavicons[$i]; ?>",
|
||||||
"type": "image/png"
|
"type": "image/png"
|
||||||
},
|
},
|
||||||
|
<?php } ?>
|
||||||
<?php
|
|
||||||
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
{
|
{
|
||||||
"src": "themes/<?php echo $theme; ?>/favicons/<?php echo $themeDimensionsFavicons[$i]; ?>.png",
|
"src": "themes/<?php echo $theme; ?>/favicons/<?php echo $themeDimensionsFavicons[$i]; ?>.png",
|
||||||
"sizes": "<?php echo $themeDimensionsFavicons[$i]; ?>x<?php echo $themeDimensionsFavicons[$i]; ?>",
|
"sizes": "<?php echo $themeDimensionsFavicons[$i]; ?>x<?php echo $themeDimensionsFavicons[$i]; ?>",
|
||||||
|
|||||||
@ -10,6 +10,6 @@
|
|||||||
?>
|
?>
|
||||||
<Language>fr</Language>
|
<Language>fr</Language>
|
||||||
<InputEncoding>UTF-8</InputEncoding>
|
<InputEncoding>UTF-8</InputEncoding>
|
||||||
<Url type="text/html" template="<?php echo $cheminInstall; ?>?texte={searchTerms}"/>
|
<Url type="text/html" template="<?php echo $cheminInstall; ?>?text={searchTerms}&redondancy=<?= if (isset())$_GET['redondancy'] ?>&margin=<?= $_GET['margin'] ?>&size=<?= $_GET['size'] ?>&bgColor=<?= urlencode($_GET['bgColor']) ?>&mainColor=<?= urlencode($_GET['mainColor']) ?>"/>
|
||||||
<Url type="application/opensearchdescription+xml" rel="self" template="<?php echo $cheminInstall; ?>opensearch.php" />
|
<Url type="application/opensearchdescription+xml" rel="self" template="<?php echo $cheminInstall; ?>opensearch.php" />
|
||||||
</OpenSearchDescription>
|
</OpenSearchDescription>
|
||||||
|
|||||||
@ -1,9 +1,10 @@
|
|||||||
<?php
|
<?php
|
||||||
|
|
||||||
// ----- Paramètres -----
|
// ----- Paramètres -----
|
||||||
|
|
||||||
supprimerVieuxQR(60 * 60 * 24 * 7); // Indique le temps en secondes après lequel le code qr sera supprimé quand quelqu'un chargera la page
|
supprimerVieuxQR(60 * 60 * 24 * 7); // Indique le temps en secondes après lequel le code qr sera supprimé quand quelqu'un chargera la page
|
||||||
$theme = "defaut"; // defaut ou parinux
|
|
||||||
$env = "dev"; // dev ou prod
|
$theme = "dark"; // dark ou parinux
|
||||||
|
|
||||||
// ----- Trucs nécessaires partout -----
|
// ----- Trucs nécessaires partout -----
|
||||||
|
|
||||||
@ -14,11 +15,10 @@ $env = "dev"; // dev ou prod
|
|||||||
$protocole = "http://";
|
$protocole = "http://";
|
||||||
}
|
}
|
||||||
|
|
||||||
$cheminInstall = $protocole . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; // L'adresse racine complète depuis laquelle le générateur sera accessible (avec le slash final)
|
$cheminInstall = $protocole . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
|
||||||
|
|
||||||
|
|
||||||
$cheminInstall = preg_replace('#(manifest|opensearch|index).php$#i', '', $cheminInstall);
|
|
||||||
$cheminInstall = preg_replace('#\?.*$#', '', $cheminInstall);
|
$cheminInstall = preg_replace('#\?.*$#', '', $cheminInstall);
|
||||||
|
$cheminInstall = preg_replace('#(manifest|opensearch|index).php$#i', '', $cheminInstall);
|
||||||
}
|
}
|
||||||
|
|
||||||
require "lessphp/lessc.inc.php";
|
require "lessphp/lessc.inc.php";
|
||||||
@ -48,6 +48,3 @@ function supprimerVieuxQR($tempsDeSuppression) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
?>
|
|
||||||
|
|||||||
306
style.less
306
style.less
@ -1,13 +1,50 @@
|
|||||||
|
/*
|
||||||
|
|
||||||
|
Ce fichier fait partie de LibreQR.
|
||||||
|
|
||||||
|
LibreQR est un logiciel libre ; vous pouvez le redistribuer ou le modifier
|
||||||
|
suivant les termes de la GNU Affero General Public License
|
||||||
|
telle que publiée par la Free Software Foundation ; soit la version 3
|
||||||
|
de la licence, soit (à votre gré) toute version ultérieure.
|
||||||
|
|
||||||
|
LibreQR est distribué dans l'espoir qu'il sera utile,
|
||||||
|
mais SANS AUCUNE GARANTIE ; sans même la garantie tacite de
|
||||||
|
QUALITÉ MARCHANDE ou d'ADÉQUATION à UN BUT PARTICULIER.
|
||||||
|
Consultez la GNU Affero General Public License pour plus de détails.
|
||||||
|
|
||||||
|
Vous devez avoir reçu une copie de la GNU Affero General Public License
|
||||||
|
en même temps que LibreQR ; si ce n'est pas le cas,
|
||||||
|
consultez <https://www.gnu.org/licenses/>.
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
* {
|
* {
|
||||||
font-family: "Ubuntu", sans-serif;
|
font-family: "Ubuntu", sans-serif;
|
||||||
|
scrollbar-color: @text @bg;
|
||||||
|
scrollbar-width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: @text;
|
||||||
|
text-decoration: underline;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-weight: 700;
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
#firstWrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
#menusDeroulants {
|
#menusDeroulants {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
margin-left: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#codeQR {
|
#codeQR {
|
||||||
@ -22,35 +59,35 @@ h1 {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topRight {
|
|
||||||
position: fixed;
|
|
||||||
top: 5px;
|
|
||||||
right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bouton {
|
.bouton {
|
||||||
padding: 3px 10px 3px 10px;
|
padding: 3px 10px 3px 10px;
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
form {
|
form {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
display: inline;
|
justify-content: center;
|
||||||
padding: 0px;
|
margin-left: auto;
|
||||||
margin: 0px;
|
margin-right: auto;
|
||||||
|
width: 814px;
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body {
|
html, body {
|
||||||
width: 500px;
|
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
background-color: @fond;
|
background-color: @bg;
|
||||||
color: @texte;
|
color: @text;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
|
|
||||||
& h1 {
|
& h1 {
|
||||||
color: @texte;
|
color: @text;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -58,19 +95,6 @@ html, body {
|
|||||||
|
|
||||||
label {
|
label {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
height: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.topRight {
|
|
||||||
color: @texteLienCodeSource;
|
|
||||||
font-size: 12px;
|
|
||||||
margin-bottom: -20px;
|
|
||||||
text-align: right;
|
|
||||||
transition: color 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: lighten(@texteLienCodeSource, 10%);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
@ -81,15 +105,26 @@ header {
|
|||||||
}
|
}
|
||||||
|
|
||||||
header > a {
|
header > a {
|
||||||
|
text-decoration: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, #logo {
|
h1, #logo {
|
||||||
margin: auto;
|
margin: 0px;
|
||||||
font-size: 35px;
|
font-size: 35px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
padding: auto;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#titre {
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
.param {
|
.param {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
padding-left: 0px;
|
padding-left: 0px;
|
||||||
@ -98,23 +133,6 @@ h1, #logo {
|
|||||||
margin-right: 0px;
|
margin-right: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 640px) { // Version mobile
|
|
||||||
|
|
||||||
html {
|
|
||||||
margin: 10px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#texte {
|
|
||||||
width: 90%;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#logo {
|
#logo {
|
||||||
width: 48px;
|
width: 48px;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
@ -124,16 +142,11 @@ h1, #logo {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 250px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
color: @fond;
|
color: @bg;
|
||||||
background-color: @texte;
|
background-color: @text;
|
||||||
}
|
|
||||||
|
|
||||||
:link {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#couleurs {
|
#couleurs {
|
||||||
@ -141,90 +154,171 @@ h1, #logo {
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
|
& .param {
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
footer, .info {
|
||||||
|
color: @secondaryText;
|
||||||
|
text-align: left;
|
||||||
|
transition: color 0.12s cubic-bezier(0.42, 0.0, 1.0, 1.0);
|
||||||
|
position: fixed;
|
||||||
|
width: 400px;
|
||||||
|
|
||||||
|
& a:link {
|
||||||
|
transition: color 0.12s cubic-bezier(0.42, 0.0, 1.0, 1.0);
|
||||||
|
color: @secondaryText;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover, &:hover a:link {
|
||||||
|
color: @text;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
font-size: 14px;
|
||||||
|
bottom: 20px;
|
||||||
|
left: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
color: grey;
|
font-size: 16px;
|
||||||
position: absolute;
|
|
||||||
bottom: 20px;
|
bottom: 20px;
|
||||||
right: 20px;
|
right: 20px;
|
||||||
width: 300px;
|
|
||||||
|
|
||||||
& a {
|
& strong {
|
||||||
color: grey;
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 850px) { // Version écran moyen
|
||||||
|
|
||||||
|
footer, .info {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
right: 0px;
|
||||||
|
top: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover, &:hover a {
|
.info {
|
||||||
color: @texte;
|
color: @text;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
& a:link {
|
||||||
|
color: @text;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#firstWrapper {
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 500px) { // Version mobile
|
||||||
|
|
||||||
|
#couleurs {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 28px;
|
||||||
|
padding-top: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 415px) {
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
/* Inputs */
|
/* Inputs */
|
||||||
|
|
||||||
#redondance, #marge, #texte, #taille, input[type=color], input[type=submit], .bouton {
|
#redondancy, #margin, #text, #size, input[type=color], input[type=submit], .bouton {
|
||||||
border: 2px @bordure solid;
|
border: 2px @border solid;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
color: @texteForm;
|
color: @text;
|
||||||
transition: border 0.1s linear;
|
transition: border 0.1s linear;
|
||||||
background-color: @fondChamp;
|
background-color: @bgField;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border: 2px @bordureHover solid;
|
border: 2px @borderHover solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
border: 2px @bordureFocus solid;
|
border: 2px @borderFocus solid;
|
||||||
|
outline: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#redondance, #taille, #marge {
|
#redondancy, #size, #margin {
|
||||||
background-color: @fondChamp;
|
background-color: @bgField;
|
||||||
width: 250px;
|
width: 250px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#texte {
|
#text {
|
||||||
background-color: @fondChampTexte;
|
background-color: @bgTextField;
|
||||||
color: @texteForm;
|
color: @text;
|
||||||
padding-top: 6px;
|
padding: 10px;
|
||||||
|
margin: 10px;
|
||||||
width: 500px;
|
width: 500px;
|
||||||
|
scrollbar-color: @text @bgTextField;
|
||||||
|
scrollbar-width: auto;
|
||||||
|
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
width: 85%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#redondance:hover, #marge:hover, #texte:hover, #taille:hover, input[type=submit]:hover, .bouton:hover {
|
input[type=submit] {
|
||||||
|
font-size: 34px;
|
||||||
|
padding: 10px;
|
||||||
|
padding-left: 14px;
|
||||||
|
padding-right: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#texte:focus, input[type=submit]:focus, .bouton:focus {
|
#text::placeholder {
|
||||||
|
color: lighten(@bgTextField, 40%);
|
||||||
}
|
|
||||||
|
|
||||||
#texte::placeholder {
|
|
||||||
color: lighten(@fondChampTexte, 40%);
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
font-family: "Ubuntu";
|
font-family: "Ubuntu", sans-serif;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type=color] {
|
input[type=color] {
|
||||||
height: 50px;
|
height: 60px;
|
||||||
width: 50px;
|
width: 84px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
background-color: @fondChamp;
|
border: 2px @border solid;
|
||||||
border: 2px @bordure solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=color]:hover {
|
|
||||||
border: 2px @bordureHover solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=color]:focus {
|
|
||||||
border: 2px @bordureFocus solid;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Infobulle */
|
/* Infobulle */
|
||||||
@ -235,44 +329,36 @@ svg {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.boutonAide {
|
.boutonAide {
|
||||||
height: 18px;
|
height: 0px;
|
||||||
width: 18px;
|
width: 0px;
|
||||||
color: @texte;
|
color: @text;
|
||||||
cursor: help;
|
cursor: help;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contenuAide {
|
.contenuAide {
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
}
|
|
||||||
|
|
||||||
.conteneurAide {
|
@media (max-width: 500px) {
|
||||||
color: #ccc;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.conteneurAide:hover, .conteneurAide:focus {
|
|
||||||
background: rgba(0,0,0,.4);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.conteneurAide .contenuAide {
|
.conteneurAide .contenuAide {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
transform: scale(0) rotate(-12deg);
|
transform: scale(0) rotate(-12deg);
|
||||||
color: #FFFFFF;
|
color: @text;
|
||||||
background: rgba(0,0,0,1);
|
background: @bgHelp;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
box-shadow: 0 0 2px rgba(0,0,0,.5);
|
box-shadow: 0 0 10px rgba(0,0,0,.5);
|
||||||
margin-top: 23px;
|
margin-top: 23px;
|
||||||
margin-left: -35px;
|
margin-left: -35px;
|
||||||
transition: all .25s;
|
transition: all .25s;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.conteneurAide:hover .contenuAide, .conteneurAide:focus .contenuAide {
|
.conteneurAide:hover .contenuAide, .conteneurAide:focus-within .contenuAide {
|
||||||
transform: scale(1) rotate(0);
|
transform: scale(1) rotate(0);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.conteneurAide, .conteneurAide:hover {
|
|
||||||
background-color: @fond;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 392 B |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
17
themes/dark/theme.php
Executable file
17
themes/dark/theme.php
Executable file
@ -0,0 +1,17 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
$themeDimensionsFavicons = array(16, 32, 48, 64, 96, 128, 192, 256, 384, 512); // Liste les dimensions des favicons
|
||||||
|
|
||||||
|
$variablesTheme = array(
|
||||||
|
"bg" => "#2D2F34",
|
||||||
|
"bgField" => "#31363B",
|
||||||
|
"bgTextField" => "#232629",
|
||||||
|
"bgHelp" => "#151616",
|
||||||
|
"border" => "#5f5f5f",
|
||||||
|
"borderHover" => "#808080",
|
||||||
|
"borderFocus" => "white",
|
||||||
|
"text" => "white",
|
||||||
|
"secondaryText" => "#868686"
|
||||||
|
); // Définit les couleurs du thème
|
||||||
|
|
||||||
|
?>
|
||||||
@ -1,17 +0,0 @@
|
|||||||
<?php
|
|
||||||
|
|
||||||
$themeDimensionsFavicons = array(16, 32, 48, 64, 96, 128, 192, 256, 384, 512); // Liste les dimensions des favicons
|
|
||||||
|
|
||||||
$variablesTheme = array(
|
|
||||||
"fond" => "#2D2F34",
|
|
||||||
"fondChamp" => "#31363B",
|
|
||||||
"fondChampTexte" => "#232629",
|
|
||||||
"bordure" => "#5f5f5f",
|
|
||||||
"bordureHover" => "#808080",
|
|
||||||
"bordureFocus" => "#b6b6b6",
|
|
||||||
"texte" => "white",
|
|
||||||
"texteForm" => "white",
|
|
||||||
"texteLienCodeSource" => "#868686"
|
|
||||||
); // Définit les couleurs du thème
|
|
||||||
|
|
||||||
?>
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
<?php
|
|
||||||
|
|
||||||
$themeDimensionsFavicons = array(16, 32, 48, 64, 96, 128, 192, 256, 384, 512); // Liste les dimensions des favicons
|
|
||||||
|
|
||||||
$variablesTheme = array(
|
|
||||||
"fond" => "#2D2F34",
|
|
||||||
"fondChamp" => "#31363B",
|
|
||||||
"fondChampTexte" => "#232629",
|
|
||||||
"bordure" => "#5f5f5f",
|
|
||||||
"bordureHover" => "#808080",
|
|
||||||
"bordureFocus" => "#b6b6b6",
|
|
||||||
"texte" => "white",
|
|
||||||
"texteForm" => "white",
|
|
||||||
"texteLienCodeSource" => "#868686"
|
|
||||||
); // Définit les couleurs du thème
|
|
||||||
|
|
||||||
?>
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
<?php
|
|
||||||
|
|
||||||
$themeDimensionsFavicons = array(16, 32, 48, 64, 96, 128, 192, 256, 384, 512); // Liste les dimensions des favicons
|
|
||||||
|
|
||||||
$variablesTheme = array(
|
|
||||||
"fond" => "#157097",
|
|
||||||
"fondChamp" => "#2794c2",
|
|
||||||
"fondChampTexte" => "#2794c2",
|
|
||||||
"bordure" => "#48aed9",
|
|
||||||
"bordureHover" => "#87d1f1",
|
|
||||||
"bordureFocus" => "#e2f6ff",
|
|
||||||
"texte" => "#d5f3ff",
|
|
||||||
"texteForm" => "#e2f6ff",
|
|
||||||
"texteLienCodeSource" => "#3da3cf"
|
|
||||||
); // Définit les couleurs du thème
|
|
||||||
|
|
||||||
?>
|
|
||||||
18
themes/parinux/theme.php
Normal file → Executable file
18
themes/parinux/theme.php
Normal file → Executable file
@ -3,15 +3,15 @@
|
|||||||
$themeDimensionsFavicons = array(16, 32, 48, 64, 96, 128, 192, 256, 384, 512); // Liste les dimensions des favicons
|
$themeDimensionsFavicons = array(16, 32, 48, 64, 96, 128, 192, 256, 384, 512); // Liste les dimensions des favicons
|
||||||
|
|
||||||
$variablesTheme = array(
|
$variablesTheme = array(
|
||||||
"fond" => "#157097",
|
"bg" => "#157097",
|
||||||
"fondChamp" => "#2794c2",
|
"bgField" => "#2794c2",
|
||||||
"fondChampTexte" => "#2794c2",
|
"bgTextField" => "#2794c2",
|
||||||
"bordure" => "#48aed9",
|
"bgHelp" => "#118abe",
|
||||||
"bordureHover" => "#87d1f1",
|
"border" => "#48aed9",
|
||||||
"bordureFocus" => "#e2f6ff",
|
"borderHover" => "#87d1f1",
|
||||||
"texte" => "#d5f3ff",
|
"borderFocus" => "#e2f6ff",
|
||||||
"texteForm" => "#e2f6ff",
|
"text" => "#d5f3ff",
|
||||||
"texteLienCodeSource" => "#3da3cf"
|
"secondaryText" => "#65b7da"
|
||||||
); // Définit les couleurs du thème
|
); // Définit les couleurs du thème
|
||||||
|
|
||||||
?>
|
?>
|
||||||
|
|||||||
2
ubuntu/ubuntu.min.css
vendored
2
ubuntu/ubuntu.min.css
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user