Browse Source

backend en anglais + vérification améliorée des params

tags/1.2.0
Miraty 6 months ago
parent
commit
47da216738
88 changed files with 1837 additions and 1969 deletions
  1. +1
    -0
      .gitignore
  2. +25
    -14
      README.md
  3. +2
    -2
      aide.svg
  4. +16
    -22
      config.inc.php
  5. +246
    -185
      index.php
  6. +18
    -23
      manifest.php
  7. +4
    -4
      opensearch.php
  8. +1177
    -1177
      phpqrcode.php
  9. +270
    -139
      style.less
  10. +1
    -0
      style.min.css
  11. +1
    -0
      temp/.gitkeep
  12. BIN
      temp/6MBFnPdqJOHR6SrkUx5hTlzXLuNkt96TFSTtbmnLkyyuvB8Feu.png
  13. BIN
      temp/UoD3X0SUSLDF4K8V67igQozAaw7fOTStC8IO5gcMLd3OyW1r0b.png
  14. BIN
      themes/dark/icons/128.png
  15. BIN
      themes/dark/icons/16.png
  16. BIN
      themes/dark/icons/192.png
  17. BIN
      themes/dark/icons/256.png
  18. BIN
      themes/dark/icons/32.png
  19. BIN
      themes/dark/icons/384.png
  20. BIN
      themes/dark/icons/48.png
  21. BIN
      themes/dark/icons/512.png
  22. BIN
      themes/dark/icons/64.png
  23. BIN
      themes/dark/icons/96.png
  24. BIN
      themes/dark/icons/source.png
  25. +17
    -0
      themes/dark/theme.php
  26. +0
    -17
      themes/defaut/defaut.php
  27. BIN
      themes/defaut/favicons/128.png
  28. BIN
      themes/defaut/favicons/16.png
  29. BIN
      themes/defaut/favicons/192.png
  30. BIN
      themes/defaut/favicons/256.png
  31. BIN
      themes/defaut/favicons/32.png
  32. BIN
      themes/defaut/favicons/384.png
  33. BIN
      themes/defaut/favicons/48.png
  34. BIN
      themes/defaut/favicons/512.png
  35. BIN
      themes/defaut/favicons/64.png
  36. BIN
      themes/defaut/favicons/96.png
  37. +0
    -17
      themes/defaut/theme.php
  38. BIN
      themes/light/icons/128.png
  39. BIN
      themes/light/icons/16.png
  40. BIN
      themes/light/icons/192.png
  41. BIN
      themes/light/icons/256.png
  42. BIN
      themes/light/icons/32.png
  43. BIN
      themes/light/icons/384.png
  44. BIN
      themes/light/icons/48.png
  45. BIN
      themes/light/icons/512.png
  46. BIN
      themes/light/icons/64.png
  47. BIN
      themes/light/icons/96.png
  48. BIN
      themes/light/icons/source.png
  49. +17
    -0
      themes/light/theme.php
  50. BIN
      themes/parinux/favicons/128.png
  51. BIN
      themes/parinux/favicons/16.png
  52. BIN
      themes/parinux/favicons/192.png
  53. BIN
      themes/parinux/favicons/256.png
  54. BIN
      themes/parinux/favicons/32.png
  55. BIN
      themes/parinux/favicons/384.png
  56. BIN
      themes/parinux/favicons/48.png
  57. BIN
      themes/parinux/favicons/512.png
  58. BIN
      themes/parinux/favicons/64.png
  59. BIN
      themes/parinux/favicons/96.png
  60. BIN
      themes/parinux/icons/128.png
  61. BIN
      themes/parinux/icons/16.png
  62. BIN
      themes/parinux/icons/192.png
  63. BIN
      themes/parinux/icons/256.png
  64. BIN
      themes/parinux/icons/32.png
  65. BIN
      themes/parinux/icons/384.png
  66. BIN
      themes/parinux/icons/48.png
  67. BIN
      themes/parinux/icons/512.png
  68. BIN
      themes/parinux/icons/64.png
  69. BIN
      themes/parinux/icons/96.png
  70. BIN
      themes/parinux/icons/source.png
  71. +0
    -17
      themes/parinux/parinux.php
  72. +10
    -10
      themes/parinux/theme.php
  73. +31
    -0
      themes/resize.php
  74. +0
    -2
      ubuntu/.gitignore
  75. +0
    -3
      ubuntu/site/.bowerrc
  76. +0
    -3
      ubuntu/site/.gitignore
  77. +0
    -20
      ubuntu/site/_config.yml
  78. +0
    -12
      ubuntu/site/_includes/footer.html
  79. +0
    -17
      ubuntu/site/_includes/head.html
  80. +0
    -7
      ubuntu/site/_includes/header.html
  81. +0
    -13
      ubuntu/site/_layouts/default.html
  82. +0
    -75
      ubuntu/site/_sass/_layout.scss
  83. +0
    -66
      ubuntu/site/_sass/_syntax-highlighting.scss
  84. +0
    -14
      ubuntu/site/about.md
  85. +0
    -36
      ubuntu/site/bower.json
  86. +0
    -6
      ubuntu/site/css/ubuntu-fontface-site.scss
  87. +0
    -67
      ubuntu/site/index.html
  88. +1
    -1
      ubuntu/ubuntu.min.css

+ 1
- 0
.gitignore View File

@@ -0,0 +1 @@
.directory

+ 25
- 14
README.md View File

@@ -1,4 +1,4 @@
# ![Logo](themes/defaut/favicons/32.png) Générateur de codes QR
# ![](themes/dark/favicons/32.png) LibreQR

## Présentation

@@ -10,12 +10,11 @@ Une instance de ce service est disponible à l'adresse [https://qr.antopie.org](

## Fonctionnement

Le Générateur de codes QR inclus un plugin [OpenSearch](https://developer.mozilla.org/docs/Web/OpenSearch), ce qui permet de l'ajouter comme moteur de recherche dans Firefox.
Vous pouvez ainsi générer un code QR directement depuis la barre de recherche.
LibreQR inclus un plugin [OpenSearch](https://developer.mozilla.org/docs/Web/OpenSearch), ce qui permet de l'ajouter comme moteur de recherche dans Firefox et de sauvegarder vos paramètres.
Vous pouvez ainsi générer un code QR directement depuis la barre de recherche avec les réglages de LibreQR utilisés lors de l'ajout comme moteur de recherche.

Un [WebManifest](https://developer.mozilla.org/docs/Web/Manifest) est également inclus, ce qui permet de mieux l'intégrer au système via Fennec (Firefox Android) ou Chromium.


## Installation

### Générique
@@ -26,7 +25,9 @@ Placez ce code source dans un serveur Web avec PHP, tout simplement.

### 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/
@@ -36,18 +37,28 @@ sudo yunohost app install https://code.antopie.org/miraty/qr_ynh/

### Changer de thème

Dans options.inc.php, donnez à $theme le nom du thème voulu.
Dans config.inc.php, donnez à $theme le nom du thème voulu.

Par défaut, deux thèmes sont proposés :
Par défaut, trois thèmes sont proposés :

* defaut, 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>
* dark, le thème par défaut, sombre. Il est utilisé ici : <https://qr.antopie.org>
* light, thème clair
* parinux, un thème bleu, créé pour [Bastet](https://bastet.parinux.org/), le CHATON de [Parinux](https://parinux.org/). Il est utilisé ici : <https://codeqr.parinux.org>

### Créer un thème

* Copiez themes/defaut 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
* Complétez theme.php en fonctions des favicons créées précédemment et des couleurs CSS voulues dans l'interface
* Copiez themes/dark vers themes/[nom de votre thème]
* Complétez theme.php en fonction des couleurs CSS voulues dans l'interface
* Modifiez l'image source.png en fonction de votre thème

* Pour générer automatiquement les icônes aux tailles correctes, utilisez

```
php themes/resize.php [nom de votre thème]
```

Cela nécessitera d'avoir installé [ImageMagick](https://imagemagick.org) et
[pngquant](https://pngquant.org).

## Bibliothèques tierces

@@ -61,8 +72,8 @@ Ce code source inclus :

[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/>

+ 2
- 2
aide.svg View File

@@ -2,8 +2,8 @@
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g 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>
<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>
<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["text"]; ?>"></path>
</g>
</g>
</g>


options.inc.php → config.inc.php View File

@@ -1,28 +1,24 @@
<?php

// ----- 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
$theme = "defaut"; // defaut ou parinux
$env = "dev"; // dev ou prod

// ----- Trucs nécessaires partout -----
deleteOldQR(60 * 60 * 24 * 7); // Temps en secondes après lequel le code QR sera supprimé lors du chargement d'un page

{ // Définit l'URL racine
if (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] != 'off') {
$protocole = "https://";
} else {
$protocole = "http://";
}
$theme = "parinux"; // dark, light ou parinux

$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)
$fileNameLenght = 32; // Longueur du nom du fichier du code QR

// ----- Trucs nécessaires partout -----

$cheminInstall = preg_replace('#(manifest|opensearch|index).php$#i', '', $cheminInstall);
$cheminInstall = preg_replace('#\?.*$#', '', $cheminInstall);
}
// Définit l'URL racine
if (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] != 'off')
$protocol = "https";
else
$protocol = "http";
$instPath = $protocol . "://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
$instPath = preg_replace('#\?.*$#', '', $instPath);
$instPath = preg_replace('#(manifest|opensearch|index).php$#i', '', $instPath);

require "lessphp/lessc.inc.php";
$less = new lessc;
require "themes/" . $theme . "/theme.php"; // Charge le thème graphique

function generateRandomString($length) {
@@ -35,19 +31,17 @@ function generateRandomString($length) {
return $randomString;
}

function supprimerVieuxQR($tempsDeSuppression) {
function deleteOldQR($tempsDeSuppression) {
/*
Cette fonction supprime les fichiers (normalement des images de codes QR) dans temp/ plus vieux que le temps en seconde passé en argument
Cette fonction supprime les fichiers (normalement des images de codes QR)
dans temp/ plus vieux que le temps en seconde passé en argument
*/
$listeCodesQR = new DirectoryIterator("temp");
foreach($listeCodesQR as $listeCodesQR) {
if ($listeCodesQR->getFilename() != "." AND $listeCodesQR->getFilename() != ".." AND $listeCodesQR->getFilename() != "UoD3X0SUSLDF4K8V67igQozAaw7fOTStC8IO5gcMLd3OyW1r0b.png") {
if ($listeCodesQR->getFilename() != "." AND $listeCodesQR->getFilename() != ".." AND $listeCodesQR->getFilename() != ".gitkeep") {
if ((time() - filemtime("temp/" . $listeCodesQR->getFilename())) > $tempsDeSuppression) { // Si le temps actuel (en heure Posix) moins la date de dernière modification de l'image est supérieur à la durée de vie demandée de l'image
unlink("temp/" . $listeCodesQR->getFilename()); // Alors supprimer cette image
}
}
}
}


?>

+ 246
- 185
index.php View File

@@ -1,242 +1,303 @@
<?php require "options.inc.php"; ?>
<?php require "config.inc.php"; ?>
<!--
_____ _ _ _ _____ ______
| __ \ // // | | | | | | | _ || ___ \
| | \/ ___ _ __ ___ _ __ __ _ | |_ ___ _ _ _ __ __| | ___ ___ ___ __| | ___ ___ | | | || |_/ /
| | __ / _ \| '_ \ / _ \| '__| / _` || __| / _ \| | | || '__| / _` | / _ \ / __| / _ \ / _` | / _ \/ __| | | | || /
| |_\ \| __/| | | || __/| | | (_| || |_ | __/| |_| || | | (_| || __/ | (__ | (_) || (_| || __/\__ \ \ \/' /| |\ \
\____/ \___||_| |_| \___||_| \__,_| \__| \___| \__,_||_| \__,_| \___| \___| \___/ \__,_| \___||___/ \_/\_\\_| \_|

Version 1.2.0dev
Créé par Miraty et diffusé sous AGPLv3+
Code source : https://code.antopie.org/miraty/qr
_ _ _ ___ ____
| | (_| |__ _ __ ___ / _ \| _ \
| | | | '_ \| '__/ _ | | | | |_) |
| |___| | |_) | | | __| |_| | _ <
|_____|_|_.__/|_| \___|\__\_|_| \_\

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/>.

-->

<!DOCTYPE HTML>
<?php

function badQuery() { // Check if browser must be redirected

// Check if parameters are set
if (!isset($_GET['txt']))
return true;
else if (!isset($_GET['size']))
return true;
else if (!isset($_GET['redondancy']))
return true;
else if (!isset($_GET['margin']))
return true;
else if (!isset($_GET['bgColor']))
return true;
else if (!isset($_GET['mainColor']))
return true;

// Check parameters's types
else if (!is_numeric($_GET['size']))
return true;
else if (!is_string($_GET['redondancy']))
return true;
else if (!is_numeric($_GET['margin']))
return true;
else if (!is_string($_GET['bgColor']))
return true;
else if (!is_string($_GET['mainColor']))
return true;

// Check if redondancy value is correct
else if ($_GET['redondancy'] != "L" AND $_GET['redondancy'] != "M" AND $_GET['redondancy'] != "Q" AND $_GET['redondancy'] != "H")
return true;

else
return false;
}

if (badQuery()) {

parse_str(parse_url($_SERVER['REQUEST_URI'], PHP_URL_QUERY), $params);

if (!isset($params['txt']))
$params['txt'] = "";

if (!isset($params['redondancy']) OR !is_string($params['redondancy']) OR ($params['redondancy'] != "L" AND $params['redondancy'] != "M" AND $params['redondancy'] != "Q" AND $params['redondancy'] != "H"))
$params['redondancy'] = "H";

if (!isset($params['margin']) OR !is_numeric($params['margin']))
$params['margin'] = 2;

if (!isset($params['size']) OR !is_numeric($params['size']))
$params['size'] = 4;

if (!isset($params['bgColor']) OR !is_string($params['bgColor']))
$params['bgColor'] = "#FFFFFF";

if (!isset($params['mainColor']) OR !is_string($params['mainColor']))
$params['mainColor'] = "#000000";

header('Location: ' . $instPath . "?" . http_build_query($params));
exit;
}

?>

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<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="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">
<link rel="manifest" href="manifest.php">
<link rel="search" type="application/opensearchdescription+xml" title="Générer un code QR" href="opensearch.php">

<style>
<link rel="search" type="application/opensearchdescription+xml" title="Générer un code QR" href="opensearch.php&#63;redondancy=<?= $_GET['redondancy'] ?>&amp;margin=<?= $_GET['margin'] ?>&amp;size=<?= $_GET['size'] ?>&amp;bgColor=<?= urlencode($_GET['bgColor']) ?>&amp;mainColor=<?= urlencode($_GET['mainColor']) ?>">
<?php
require "lessphp/lessc.inc.php";
$less = new lessc;
$less->setVariables($variablesTheme); // Rends ces couleurs utilisables dans style.less

// If style.min.css exists
if (file_exists("style.min.css"))
// And if it's older than the theme config
if (filemtime("themes/" . $theme . "/theme.php") > filemtime("style.min.css"))
// Then delete it
unlink("style.min.css");

if ($env == "prod") { // En production : minimise et met en cache style.less dans style.css
$less->setFormatter("compressed");
$less->checkedCompile("style.less", "style.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)

} 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");
// Compile, minimise et met en cache style.less dans style.min.css
$less->setFormatter("compressed");
$less->checkedCompile("style.less", "style.min.css");
?>
<link type="text/css" rel="stylesheet" href="style.min.css">
<link type="text/css" rel="stylesheet" href="ubuntu/ubuntu.min.css">

} else {
echo "Erreur : $env doit valoir prod ou dev dans options.inc.php";
} ?>
</style>
<?php

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";
} ?>
foreach($themeDimensionsIcons as $dimFav) { // Indique toutes les dimensions d'icones
echo ' <link rel="icon" type="image/png" href="themes/' . $theme . '/icons/' . $dimFav . '.png" sizes="' . $dimFav . 'x' . $dimFav . '">' . "\n";
} ?>

</head>

<body lang="fr">
<body>

<div class="center">

<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="lienTitres" href="./">
<img id="logo" src="themes/<?php echo $theme; ?>/icons/64.png" alt="Code QR stylisé">
<div id="titres">
<h1>LibreQR</h1>
<h2>Générateur de codes QR</h2>
</div>
</a>
</header>

<?php if (!isset($_GET["texte"])) { // Si OpenSearch n'a pas été utilisé ?>

<form method="post">

<div class="param">
<label for="texte">Texte à encoder</label>
<span class="conteneurAide">
<span class="boutonAide"><?php include "aide.svg"; ?></span>
<span class="contenuAide">Vous pouvez encoder ce que vous voulez sous forme de texte.</span>
</span>
<br>
<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'];
}

?></textarea>
</div>
<form method="get" action="./">

<div id="firstWrapper">

<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 class="param">
<label for="taille">Taille de l'image</label>
<label for="txt">Texte à encoder</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 class="boutonAide" tabindex="0"><?php include "aide.svg"; ?></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>
<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>
<textarea rows="8" required="" id="txt" placeholder="Entrez le texte à encoder dans le code QR" name="txt"><?php

if (isset($_GET['txt'])) {
echo htmlspecialchars($_GET['txt']);
}

?></textarea>
</div>

<div class="param">
<label for="redondance">Taux de redondance</label>
<span class="conteneurAide">
<span class="boutonAide"><?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>
<br>
<select id="redondance" name="redondance">
<option <?php if (isset($_POST['redondance']) AND ($_POST['redondance'] == "L")) {echo 'selected="" ';} ?>value="L">L - 7% de redondance</option>
<option <?php if (isset($_POST['redondance']) AND ($_POST['redondance'] == "M")) {echo 'selected="" ';} ?>value="M">M - 15% de redondance</option>
<option <?php if (isset($_POST['redondance']) AND ($_POST['redondance'] == "Q")) {echo 'selected="" ';} ?>value="Q">Q - 25% de redondance</option>
<option <?php if ((isset($_POST['redondance']) AND ($_POST['redondance'] == "H")) OR (!isset($_POST['redondance']))) {echo 'selected="" ';} ?>value="H">H - 30% de redondance</option>
</select>
<div id="menusDeroulants">

<div class="param">
<label for="redondancy">Taux de redondance</label>
<span class="conteneurAide">
<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>
<br>
<select id="redondancy" name="redondancy">
<option <?php if (isset($_GET['redondancy']) AND ($_GET['redondancy'] == "L")) {echo 'selected="" ';} ?>value="L">L - 7% 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($_GET['redondancy']) AND ($_GET['redondancy'] == "Q")) {echo 'selected="" ';} ?>value="Q">Q - 25% 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>
</div>

<div class="param">
<label for="margin">Taille de la marge</label>
<span class="conteneurAide">
<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>
<br>
<select id="margin" name="margin">
<option <?php if (isset($_GET['margin']) AND ($_GET['margin'] == "0")) {echo 'selected="" ';} ?>value="0">0</option>
<option <?php if (isset($_GET['margin']) AND ($_GET['margin'] == "1")) {echo 'selected="" ';} ?>value="1">1</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($_GET['margin']) AND ($_GET['margin'] == "3")) {echo 'selected="" ';} ?>value="3">3</option>
<option <?php if (isset($_GET['margin']) AND ($_GET['margin'] == "4")) {echo 'selected="" ';} ?>value="4">4</option>
<option <?php if (isset($_GET['margin']) AND ($_GET['margin'] == "5")) {echo 'selected="" ';} ?>value="5">5</option>
<option <?php if (isset($_GET['margin']) AND ($_GET['margin'] == "8")) {echo 'selected="" ';} ?>value="8">8</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'] == 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>
</div>

</div>

</div>

<div id="colors">

<div class="param">
<label for="marge">Taille de la marge</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>
<select id="marge" name="marge">
<option <?php if (isset($_POST['marge']) AND ($_POST['marge'] == "0")) {echo 'selected="" ';} ?>value="0">0</option>
<option <?php if (isset($_POST['marge']) AND ($_POST['marge'] == "1")) {echo 'selected="" ';} ?>value="1">1</option>
<option <?php if ((isset($_POST['marge']) AND ($_POST['marge'] == "2")) OR (!isset($_POST['marge']))) {echo 'selected="" ';} ?>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>
<label for="bgColor">Couleur de fond</label>
<div class="conteneurInputColor">
<input type="color" name="bgColor" id="bgColor" value="<?php if (!empty($_GET['bgColor'])) {echo htmlspecialchars($_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 htmlspecialchars($_GET['mainColor']);} else {echo "#000000";} ?>">
</div>
</div>
</div>

<br>

<div class="centrer">
<input type="submit" class="bouton" value="Générer" />
<input class="bouton" type="submit" value="Générer" />
</div>
<br>
<br>


</form>

<?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'])) {
require "phpqrcode.php";
<?php

$cheminImage = "temp/" . generateRandomString(50) . ".png";
if (!empty($_GET['txt']) AND !empty($_GET['size']) AND !empty($_GET['redondancy']) AND !empty($_GET['margin']) AND !empty($_GET['bgColor']) AND !empty($_GET['mainColor'])) {
if (isset($_GET['txt']) AND isset($_GET['size']) AND isset($_GET['redondancy']) AND isset($_GET['margin']) AND isset($_GET['bgColor']) AND isset($_GET['mainColor'])) {
require "phpqrcode.php";


QRcode::png($_POST['texte'], $cheminImage, $_POST['redondance'], $_POST['taille'], $_POST['marge'], false, hexdec($_POST['couleurFond']), hexdec($_POST['couleurPrincipale'])); ?>
$cheminImage = "temp/" . generateRandomString($fileNameLenght) . ".png";
QRcode::png($_GET['txt'], $cheminImage, $_GET['redondancy'], $_GET['size'], $_GET['margin'], false, hexdec($_GET['bgColor']), hexdec($_GET['mainColor']));
?>
<div class="centrer">
<a href="<?php echo $cheminImage; ?>" class="bouton" download="<?php echo htmlspecialchars($_GET['txt']); ?>.png">Télécharger ce code QR</a>
</div>

<div class="centrer">
<a href="<?php echo $cheminImage; ?>" class="bouton" download="<?php echo htmlspecialchars($_POST['texte']); ?>.png">Télécharger ce code QR</a>
</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($_POST['texte']); ?>"' id="codeQR" src="<?php echo $cheminImage; ?>"/></a>
</div>
<?php
<div class="centrer" id="showOnlyQR">
<a title="Cliquez pour afficher uniquement ce code QR" href="<?php echo $cheminImage; ?>"><img alt='Un code QR contenant "<?php echo htmlspecialchars($_GET['txt']); ?>"' id="qrCode" src="<?php echo $cheminImage; ?>"/></a>
</div>
<?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>
<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 } } ?>
</div>

<section class="info">
<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 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>
</section>
<div id="metaTexts">

<footer>
<a class="topRight" href="https://code.antopie.org/miraty/qr/">Code source</a>
</footer>
<section id="info" class="metaText">
<h3>Qu'est-ce qu'un code QR ?</h3>
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.
<a href="https://fr.wikipedia.org/wiki/Code_QR">Code QR sur Wikipédia</a>
</section>

<footer class="metaText">
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>

</div>

</body>
</html>

+ 18
- 23
manifest.php View File

@@ -1,33 +1,28 @@
<?php require "options.inc.php"; ?>
<?php require "config.inc.php"; ?>
{
"dir": "ltr",
"lang": "fr-FR",
"name": "Générateur de code QR",
"short_name": "Code QR",
"description": "Générez un code QR rapidement",
"start_url": "<?php echo $cheminInstall; ?>",
"scope": "<?php echo $cheminInstall; ?>",
"lang": "fr",
"name": "LibreQR",
"short_name": "LibreQR",
"description": "Générer un code QR rapidement",
"start_url": "<?php echo $instPath; ?>",
"scope": "<?php echo $instPath; ?>",
"display": "standalone",
"theme_color": "<?php echo $variablesTheme["fond"]; ?>",
"background_color": "<?php echo $variablesTheme["fond"]; ?>",
"theme_color": "<?php echo $variablesTheme["bg"]; ?>",
"background_color": "<?php echo $variablesTheme["bg"]; ?>",
"orientation": "portrait",
"icons":
[
<?php
for ($i = 0; $i < (count($themeDimensionsFavicons) - 1); $i++) { ?>
{
"src": "themes/<?php echo $theme; ?>/favicons/<?php echo $themeDimensionsFavicons[$i]; ?>.png",
"sizes": "<?php echo $themeDimensionsFavicons[$i]; ?>x<?php echo $themeDimensionsFavicons[$i]; ?>",
"type": "image/png"
},

<?php

}
?>
<?php for ($i = 0; $i < (count($themeDimensionsIcons) - 1); $i++) { ?>
{
"src": "themes/<?php echo $theme; ?>/icons/<?php echo $themeDimensionsIcons[$i]; ?>.png",
"sizes": "<?php echo $themeDimensionsIcons[$i]; ?>x<?php echo $themeDimensionsIcons[$i]; ?>",
"type": "image/png"
},
<?php } ?>
{
"src": "themes/<?php echo $theme; ?>/favicons/<?php echo $themeDimensionsFavicons[$i]; ?>.png",
"sizes": "<?php echo $themeDimensionsFavicons[$i]; ?>x<?php echo $themeDimensionsFavicons[$i]; ?>",
"src": "themes/<?php echo $theme; ?>/icons/<?php echo $themeDimensionsIcons[$i]; ?>.png",
"sizes": "<?php echo $themeDimensionsIcons[$i]; ?>x<?php echo $themeDimensionsIcons[$i]; ?>",
"type": "image/png"
}
]


+ 4
- 4
opensearch.php View File

@@ -1,15 +1,15 @@
<?php require "options.inc.php"; ?>
<?php require "config.inc.php"; ?>
<?xml version="1.0" encoding="UTF-8" ?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>Générer un code QR</ShortName>
<Description>Générez des codes QR depuis votre barre de recherche ou d'adresse</Description>
<?php
foreach($themeDimensionsFavicons as $dimFav) {
echo ' <Image height="' . $dimFav . '" width="' . $dimFav . '" type="image/png">' . $cheminInstall . 'themes/' . $theme . '/favicons/' . $dimFav . '.png</Image>' . "\n";
echo ' <Image height="' . $dimFav . '" width="' . $dimFav . '" type="image/png">' . $instPath . 'themes/' . $theme . '/icons/' . $dimFav . '.png</Image>' . "\n";
}
?>
<Language>fr</Language>
<InputEncoding>UTF-8</InputEncoding>
<Url type="text/html" template="<?php echo $cheminInstall; ?>?texte={searchTerms}"/>
<Url type="application/opensearchdescription+xml" rel="self" template="<?php echo $cheminInstall; ?>opensearch.php" />
<Url type="text/html" template="<?php echo $instPath; ?>&#63;txt={searchTerms}&amp;redondancy=<?php if (isset($_GET['redondancy'])) { echo $_GET['redondancy']; } ?>&amp;margin=<?= $_GET['margin'] ?>&amp;size=<?= $_GET['size'] ?>&amp;bgColor=<?= urlencode($_GET['bgColor']) ?>&amp;mainColor=<?= urlencode($_GET['mainColor']) ?>"/>
<Url type="application/opensearchdescription+xml" rel="self" template="<?php echo $instPath; ?>opensearch.php" />
</OpenSearchDescription>

+ 1177
- 1177
phpqrcode.php
File diff suppressed because it is too large
View File


+ 270
- 139
style.less View File

@@ -1,56 +1,84 @@
/*

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;
scrollbar-color: @text @bg;
scrollbar-width: auto;
}

h1 {
font-weight: 700;
}
a {
color: @text;
text-decoration: underline;

#menusDeroulants {
text-align: center;
&:hover {
text-decoration: none;
}
}

#codeQR {
max-width: 500px;
#firstWrapper {
display: flex;
flex-direction: row;
}

#lienCodeQR {
#menusDeroulants {
text-align: center;
margin-left: 20px;
}

.centrer {
text-align: center;
#qrCode {
max-width: 480px;
}

.topRight {
position: fixed;
top: 5px;
right: 5px;
.centrer {
text-align: center;
}

.bouton {
padding: 3px 10px 3px 10px;
text-decoration: none;
}

form {
display: flex;
flex-direction: column;
display: inline;
padding: 0px;
margin: 0px;
display: block;
margin-bottom: 30px;
}

html, body {
width: 500px;
.center {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: auto;
margin-right: auto;
background-color: @fond;
color: @texte;
width: 814px;
}

body {
margin: 18px;
background-color: @bg;
color: @text;
font-weight: normal;
font-size: 1em;
font-size: 20px;

& h1 {
color: @texte;
color: @text;
text-decoration: none;
}

@@ -58,36 +86,48 @@ html, body {

label {
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 {
text-align: center;
padding: 0px;
margin: 0px;
height: 48px;
height: 64px;
}

header > a {
#logo {
width: 64px;
height: 64px;
}

#titres {
margin-left: 20px;
}

h1, h2, h3, h4, h5, h6 {
margin: 0px;
font-weight: normal;
}

h1 {
padding: auto;
font-size: 33px;
}

h2 {
font-size: 22px;
}

#lienTitres {
text-align: left;
justify-content: center;
text-decoration: none;
display: flex;
flex-direction: row;
}

h1, #logo {
margin: auto;
font-size: 35px;
#showOnlyQR {
margin-top: 30px;
}

.param {
@@ -98,181 +138,272 @@ h1, #logo {
margin-right: 0px;
}

@media (max-width: 640px) { // Version mobile

html {
margin: 10px;
width: 100%;
}

#texte {
width: 90%;
}

h1 {
font-size: 25px;
}

}

#logo {
width: 48px;
height: 48px;
}

.conteneurInputColor {
display: flex;
flex-direction: row;
justify-content: center;
width: 250px;
}

::selection {
color: @fond;
background-color: @texte;
color: @bg;
background-color: @text;
}

:link {
text-decoration: none;
label[for=txt] {
padding-left: 22px;
}

#couleurs {
#colors {
display: flex;
flex-direction: row;
justify-content: space-between;
text-align: center;

& .param {
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
width: 100%;
}
}

.info {
color: grey;
position: absolute;
bottom: 20px;
right: 20px;
width: 300px;
.metaText {
color: @secondaryText;
text-align: left;
transition: color 0.12s cubic-bezier(0.42, 0.0, 1.0, 1.0);
position: fixed;
width: 400px;

& a {
color: grey;
& a:link {
transition: color 0.12s cubic-bezier(0.42, 0.0, 1.0, 1.0);
color: @secondaryText;
text-decoration: underline;
}

&:hover, &:hover a {
color: @texte;
&:hover, &:hover a:link {
color: @text;
}

}

footer {
font-size: 14px;
bottom: 20px;
left: 20px;
}

#info {
font-size: 16px;
bottom: 20px;
right: 20px;
margin: 0px;

& h3 {
font-size: 20px;
font-weight: normal;
padding-bottom: 10px;
}
}


/* Inputs */

#redondance, #marge, #texte, #taille, input[type=color], input[type=submit], .bouton {
border: 2px @bordure solid;
#redondancy, #margin, #txt, #size, input[type=color], input[type=submit], .bouton {
border: 2px @border solid;
border-radius: 10px;
font-size: 20px;
padding-left: 10px;
font-weight: normal;
color: @texteForm;
color: @text;
transition: border 0.1s linear;
background-color: @fondChamp;
background-color: @bgField;
margin-top: 8px;

&:hover {
border: 2px @bordureHover solid;
border: 2px @borderHover solid;
}

&:focus {
border: 2px @bordureFocus solid;
border: 2px @borderFocus solid;
outline: none;
}
}

#redondance, #taille, #marge {
background-color: @fondChamp;
#redondancy, #size, #margin {
background-color: @bgField;
width: 250px;
height: 40px;
}

#texte {
background-color: @fondChampTexte;
color: @texteForm;
padding-top: 6px;
#txt {
background-color: @bgTextField;
color: @text;
padding: 10px;
margin: 10px;
width: 500px;
scrollbar-color: @text @bgTextField;
scrollbar-width: auto;
}

#redondance:hover, #marge:hover, #texte:hover, #taille:hover, input[type=submit]:hover, .bouton:hover {

}

#texte:focus, input[type=submit]:focus, .bouton:focus {

input[type=submit] {
font-size: 28px;
padding: 10px;
padding-left: 14px;
padding-right: 14px;
}

#texte::placeholder {
color: lighten(@fondChampTexte, 40%);
#txt::placeholder {
color: @secondaryText;
opacity: 1;
font-family: "Ubuntu";
font-family: "Ubuntu", sans-serif;
font-weight: normal;
font-size: 1em;
}

input[type=color] {
height: 50px;
width: 50px;
height: 60px;
width: 84px;
padding: 5px;
background-color: @fondChamp;
border: 2px @bordure solid;
}

input[type=color]:hover {
border: 2px @bordureHover solid;
}

input[type=color]:focus {
border: 2px @bordureFocus solid;
border: 2px @border solid;
}

/* Infobulle */

svg {
width: 18px;
height: 18px;
width: 20px;
height: 20px;
margin-bottom: -3px;
margin-left: 5px;
}

.boutonAide {
height: 18px;
width: 18px;
color: @texte;
height: 0px;
width: 0px;
color: @text;
cursor: help;
}

.contenuAide {
max-width: 500px;
}

.conteneurAide {
color: #ccc;
}

.conteneurAide:hover, .conteneurAide:focus {
background: rgba(0,0,0,.4);
}

.conteneurAide .contenuAide {
position: absolute;
transform: scale(0) rotate(-12deg);
color: #FFFFFF;
background: rgba(0,0,0,1);
color: @text;
background: @bgHelp;
padding: 15px;
border-radius: 3px;
box-shadow: 0 0 2px rgba(0,0,0,.5);
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,.5);
margin-top: 23px;
margin-left: -35px;
transition: all .25s;
opacity: 0;
max-width: 500px;
font-size: 20px;
text-align: left;

@media (max-width: 500px) {
width: 300px;
}

}

.conteneurAide:hover .contenuAide, .conteneurAide:focus .contenuAide {
.conteneurAide:hover .contenuAide, .conteneurAide:focus-within .contenuAide {
transform: scale(1) rotate(0);
opacity: 1;
}

.conteneurAide, .conteneurAide:hover {
background-color: @fond;
text-decoration: none;
/* Media queries */

@media (max-width: 1400px) {
.metaText {
width: 250px;
}
}

@media (max-width: 1050px) {

#metaTexts {
display: flex;
flex-direction: row;
}

.metaText {
width: 100%;
position: static;
font-size: 20px;
}

footer {
margin-top: 50px;
}

#info {
color: @text;
margin-bottom: 20px;
padding-top: 30px;

& a:link {
color: @text;
}
}
}

@media (max-width: 850px) {

#metaTexts {
flex-direction: column;
width: 480px;
justify-content: center;
margin-left: auto;
margin-right: auto;
}

.center {
width: auto;
}

#firstWrapper {
flex-direction: column;
}

body {
margin: 10px;
}

#txt {
width: 92%;
}

}

@media (max-width: 500px) { // Version mobile

#metaTexts {
width: auto;
}

#colors {
flex-direction: column;
}

h1 {
font-size: 28px;
padding-top: 6px;
}

#txt {
width: 85%;
}

#qrCode {
max-width: 94%;
}

}

@media (max-width: 415px) {

h1 {
padding: 0px;
}

}

+ 1
- 0
style.min.css View File

@@ -0,0 +1 @@
*{font-family:"Ubuntu", sans-serif;scrollbar-color:#d5f3ff #157097;scrollbar-width:auto;}a{color:#d5f3ff;text-decoration:underline;}a:hover{text-decoration:none;}#firstWrapper{display:flex;flex-direction:row;}#menusDeroulants{text-align:center;margin-left:20px;}#qrCode{max-width:480px;}.centrer{text-align:center;}.bouton{padding:3px 10px 3px 10px;text-decoration:none;}form{display:block;margin-bottom:30px;}.center{display:flex;flex-direction:column;justify-content:center;margin-left:auto;margin-right:auto;width:814px;}body{margin:18px;background-color:#157097;color:#d5f3ff;font-weight:normal;font-size:20px;}body h1{color:#d5f3ff;text-decoration:none;}label{font-size:20px;}header{text-align:center;padding:0px;margin:0px;height:64px;}#logo{width:64px;height:64px;}#titres{margin-left:20px;}h1,h2,h3,h4,h5,h6{margin:0px;font-weight:normal;}h1{padding:auto;font-size:33px;}h2{font-size:22px;}#lienTitres{text-align:left;justify-content:center;text-decoration:none;display:flex;flex-direction:row;}#showOnlyQR{margin-top:30px;}.param{padding:10px;padding-left:0px;margin-left:0px;padding-right:0px;margin-right:0px;}.conteneurInputColor{display:flex;flex-direction:row;justify-content:center;}::selection{color:#157097;background-color:#d5f3ff;}label[for=txt]{padding-left:22px;}#colors{display:flex;flex-direction:row;justify-content:space-between;text-align:center;}#colors .param{text-align:center;display:flex;justify-content:center;flex-direction:column;width:100%;}.metaText{color:#65b7da;text-align:left;transition:color 0.12s cubic-bezier(0.42,0.0,1.0,1.0);position:fixed;width:400px;}.metaText a:link{transition:color 0.12s cubic-bezier(0.42,0.0,1.0,1.0);color:#65b7da;text-decoration:underline;}.metaText:hover,.metaText:hover a:link{color:#d5f3ff;}footer{font-size:14px;bottom:20px;left:20px;}#info{font-size:16px;bottom:20px;right:20px;margin:0px;}#info h3{font-size:20px;font-weight:normal;padding-bottom:10px;}#redondancy,#margin,#txt,#size,input[type=color],input[type=submit],.bouton{border:2px #48aed9 solid;border-radius:10px;font-size:20px;padding-left:10px;font-weight:normal;color:#d5f3ff;transition:border 0.1s linear;background-color:#2794c2;margin-top:8px;}#redondancy:hover,#margin:hover,#txt:hover,#size:hover,input[type=color]:hover,input[type=submit]:hover,.bouton:hover{border:2px #87d1f1 solid;}#redondancy:focus,#margin:focus,#txt:focus,#size:focus,input[type=color]:focus,input[type=submit]:focus,.bouton:focus{border:2px #e2f6ff solid;outline:none;}#redondancy,#size,#margin{background-color:#2794c2;width:250px;height:40px;}#txt{background-color:#2794c2;color:#d5f3ff;padding:10px;margin:10px;width:500px;scrollbar-color:#d5f3ff #2794c2;scrollbar-width:auto;}input[type=submit]{font-size:28px;padding:10px;padding-left:14px;padding-right:14px;}#txt::placeholder{color:#65b7da;opacity:1;font-family:"Ubuntu", sans-serif;font-weight:normal;font-size:1em;}input[type=color]{height:60px;width:84px;padding:5px;border:2px #48aed9 solid;}svg{width:20px;height:20px;margin-bottom:-3px;margin-left:5px;}.boutonAide{height:0px;width:0px;color:#d5f3ff;cursor:help;}.conteneurAide .contenuAide{position:absolute;transform:scale(0) rotate(-12deg);color:#d5f3ff;background:#118abe;padding:15px;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,0.5);margin-top:23px;margin-left:-35px;transition:all .25s;opacity:0;max-width:500px;font-size:20px;text-align:left;}@media (max-width: 500px){.conteneurAide .contenuAide{width:300px;}}.conteneurAide:hover .contenuAide,.conteneurAide:focus-within .contenuAide{transform:scale(1) rotate(0);opacity:1;}@media (max-width: 1400px){.metaText{width:250px;}}@media (max-width: 1050px){#metaTexts{display:flex;flex-direction:row;}.metaText{width:100%;position:static;font-size:20px;}footer{margin-top:50px;}#info{color:#d5f3ff;margin-bottom:20px;padding-top:30px;}#info a:link{color:#d5f3ff;}}@media (max-width: 850px){#metaTexts{flex-direction:column;width:480px;justify-content:center;margin-left:auto;margin-right:auto;}.center{width:auto;}#firstWrapper{flex-direction:column;}body{margin:10px;}#txt{width:92%;}}@media (max-width: 500px){#metaTexts{width:auto;}#colors{flex-direction:column;}h1{font-size:28px;padding-top:6px;}#txt{width:85%;}#qrCode{max-width:94%;}}@media (max-width: 415px){h1{padding:0px;}}

+ 1
- 0
temp/.gitkeep View File

@@ -0,0 +1 @@

BIN
temp/6MBFnPdqJOHR6SrkUx5hTlzXLuNkt96TFSTtbmnLkyyuvB8Feu.png View File

Before After
Width: 148  |  Height: 148  |  Size: 392 B

BIN
temp/UoD3X0SUSLDF4K8V67igQozAaw7fOTStC8IO5gcMLd3OyW1r0b.png View File

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

BIN
themes/dark/icons/128.png View File

Before After
Width: 128  |  Height: 128  |  Size: 612 B

BIN
themes/dark/icons/16.png View File

Before After
Width: 16  |  Height: 16  |  Size: 433 B

BIN
themes/dark/icons/192.png View File

Before After
Width: 192  |  Height: 192  |  Size: 760 B

BIN
themes/dark/icons/256.png View File

Before After
Width: 256  |  Height: 256  |  Size: 1.0 KiB

BIN
themes/dark/icons/32.png View File

Before After
Width: 32  |  Height: 32  |  Size: 480 B

BIN
themes/dark/icons/384.png View File

Before After
Width: 384  |  Height: 384  |  Size: 1.3 KiB

BIN
themes/dark/icons/48.png View File

Before After
Width: 48  |  Height: 48  |  Size: 495 B

BIN
themes/dark/icons/512.png View File

Before After
Width: 512  |  Height: 512  |  Size: 1.8 KiB

BIN
themes/dark/icons/64.png View File

Before After
Width: 64  |  Height: 64  |  Size: 532 B

BIN
themes/dark/icons/96.png View File

Before After
Width: 96  |  Height: 96  |  Size: 587 B

BIN
themes/dark/icons/source.png View File

Before After
Width: 1024  |  Height: 1024  |  Size: 6.2 KiB

+ 17
- 0
themes/dark/theme.php View File

@@ -0,0 +1,17 @@
<?php

$themeDimensionsIcons = array(16, 32, 48, 64, 96, 128, 192, 256, 384, 512); // Liste les dimensions des icones

$variablesTheme = array(
"bg" => "#2a2a2a",
"bgField" => "#31363B",
"bgTextField" => "#232629",
"bgHelp" => "#151616",
"border" => "#5f5f5f",
"borderHover" => "#808080",
"borderFocus" => "white",
"text" => "white",
"secondaryText" => "#868686"
); // Définit les couleurs du thème

?>

+ 0
- 17
themes/defaut/defaut.php View File

@@ -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

?>

BIN
themes/defaut/favicons/128.png View File

Before After
Width: 128  |  Height: 128  |  Size: 1.9 KiB

BIN
themes/defaut/favicons/16.png View File

Before After
Width: 16  |  Height: 16  |  Size: 1.6 KiB

BIN
themes/defaut/favicons/192.png View File

Before After
Width: 192  |  Height: 192  |  Size: 2.1 KiB

BIN
themes/defaut/favicons/256.png View File

Before After
Width: 256  |  Height: 256  |  Size: 2.3 KiB

BIN
themes/defaut/favicons/32.png View File

Before After
Width: 32  |  Height: 32  |  Size: 1.6 KiB

BIN
themes/defaut/favicons/384.png View File

Before After
Width: 384  |  Height: 384  |  Size: 2.8 KiB

BIN
themes/defaut/favicons/48.png View File

Before After
Width: 48  |  Height: 48  |  Size: 1.7 KiB

BIN
themes/defaut/favicons/512.png View File

Before After
Width: 512  |  Height: 512  |  Size: 3.4 KiB

BIN
themes/defaut/favicons/64.png View File

Before After
Width: 64  |  Height: 64  |  Size: 1.7 KiB

BIN
themes/defaut/favicons/96.png View File

Before After
Width: 96  |  Height: 96  |  Size: 1.8 KiB

+ 0
- 17
themes/defaut/theme.php View File

@@ -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

?>

BIN
themes/light/icons/128.png View File

Before After
Width: 128  |  Height: 128  |  Size: 209 B

BIN
themes/light/icons/16.png View File

Before After
Width: 16  |  Height: 16  |  Size: 159 B

BIN
themes/light/icons/192.png View File

Before After
Width: 192  |  Height: 192  |  Size: 242 B

BIN
themes/light/icons/256.png View File

Before After
Width: 256  |  Height: 256  |  Size: 242 B

BIN
themes/light/icons/32.png View File

Before After
Width: 32  |  Height: 32  |  Size: 183 B

BIN
themes/light/icons/384.png View File

Before After
Width: 384  |  Height: 384  |  Size: 287 B

BIN
themes/light/icons/48.png View File

Before After
Width: 48  |  Height: 48  |  Size: 214 B

BIN
themes/light/icons/512.png View File

Before After
Width: 512  |  Height: 512  |  Size: 335 B

BIN
themes/light/icons/64.png View File

Before After
Width: 64  |  Height: 64  |  Size: 192 B

BIN
themes/light/icons/96.png View File

Before After
Width: 96  |  Height: 96  |  Size: 226 B

BIN
themes/light/icons/source.png View File

Before After
Width: 1024  |  Height: 1024  |  Size: 6.2 KiB

+ 17
- 0
themes/light/theme.php View File

@@ -0,0 +1,17 @@
<?php

$themeDimensionsIcons = array(16, 32, 48, 64, 96, 128, 192, 256, 384, 512); // Liste les dimensions des icones

$variablesTheme = array(
"bg" => "white",
"bgField" => "#eeeeee",
"bgTextField" => "#e5e5e5",
"bgHelp" => "#ececec",
"border" => "#65666b",
"borderHover" => "#46484e",
"borderFocus" => "#2D2F34",
"text" => "#2D2F34",
"secondaryText" => "#868686"
); // Définit les couleurs du thème

?>

BIN
themes/parinux/favicons/128.png View File

Before After
Width: 128  |  Height: 128  |  Size: 1.5 KiB

BIN
themes/parinux/favicons/16.png View File

Before After
Width: 16  |  Height: 16  |  Size: 1.2 KiB

BIN
themes/parinux/favicons/192.png View File

Before After
Width: 192  |  Height: 192  |  Size: 1.6 KiB

BIN
themes/parinux/favicons/256.png View File

Before After
Width: 256  |  Height: 256  |  Size: 1.9 KiB

BIN
themes/parinux/favicons/32.png View File

Before After
Width: 32  |  Height: 32  |  Size: 1.2 KiB

BIN
themes/parinux/favicons/384.png View File

Before After
Width: 384  |  Height: 384  |  Size: 2.4 KiB

BIN
themes/parinux/favicons/48.png View File

Before After
Width: 48  |  Height: 48  |  Size: 1.3 KiB

BIN
themes/parinux/favicons/512.png View File

Before After
Width: 512  |  Height: 512  |  Size: 3.0 KiB

BIN
themes/parinux/favicons/64.png View File

Before After
Width: 64  |  Height: 64  |  Size: 1.3 KiB

BIN
themes/parinux/favicons/96.png View File

Before After
Width: 96  |  Height: 96  |  Size: 1.4 KiB

BIN
themes/parinux/icons/128.png View File

Before After
Width: 128  |  Height: 128  |  Size: 209 B

BIN
themes/parinux/icons/16.png View File

Before After
Width: 16  |  Height: 16  |  Size: 159 B

BIN
themes/parinux/icons/192.png View File

Before After
Width: 192  |  Height: 192  |  Size: 242 B

BIN
themes/parinux/icons/256.png View File

Before After
Width: 256  |  Height: 256  |  Size: 242 B

BIN
themes/parinux/icons/32.png View File

Before After
Width: 32  |  Height: 32  |  Size: 183 B

BIN
themes/parinux/icons/384.png View File

Before After
Width: 384  |  Height: 384  |  Size: 287 B

BIN
themes/parinux/icons/48.png View File

Before After
Width: 48  |  Height: 48  |  Size: 214 B

BIN
themes/parinux/icons/512.png View File

Before After
Width: 512  |  Height: 512  |  Size: 335 B

BIN
themes/parinux/icons/64.png View File

Before After
Width: 64  |  Height: 64  |  Size: 192 B

BIN
themes/parinux/icons/96.png View File

Before After
Width: 96  |  Height: 96  |  Size: 226 B

BIN
themes/parinux/icons/source.png View File

Before After
Width: 1024  |  Height: 1024  |  Size: 6.3 KiB

+ 0
- 17
themes/parinux/parinux.php View File

@@ -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

?>

+ 10
- 10
themes/parinux/theme.php View File

@@ -1,17 +1,17 @@
<?php

$themeDimensionsFavicons = array(16, 32, 48, 64, 96, 128, 192, 256, 384, 512); // Liste les dimensions des favicons
$themeDimensionsIcons = array(16, 32, 48, 64, 96, 128, 192, 256, 384, 512); // Liste les dimensions des icones

$variablesTheme = array(
"fond" => "#157097",
"fondChamp" => "#2794c2",
"fondChampTexte" => "#2794c2",
"bordure" => "#48aed9",
"bordureHover" => "#87d1f1",
"bordureFocus" => "#e2f6ff",
"texte" => "#d5f3ff",
"texteForm" => "#e2f6ff",
"texteLienCodeSource" => "#3da3cf"
"bg" => "#157097",
"bgField" => "#2794c2",
"bgTextField" => "#2794c2",
"bgHelp" => "#118abe",
"border" => "#48aed9",
"borderHover" => "#87d1f1",
"borderFocus" => "#e2f6ff",
"text" => "#d5f3ff",
"secondaryText" => "#65b7da"
); // Définit les couleurs du thème

?>

+ 31
- 0
themes/resize.php View File

@@ -0,0 +1,31 @@
<?php
if (php_sapi_name() == "cli") {
if (isset($argv[1])) {
$done = array();
$line = "";
$theme = $argv[1];

for ($pow = 0; $pow <= 3; $pow++) {
for ($mult = 1; $mult <= 4; $mult++) {
$size = $mult * 2**(4+$pow);
if (!in_array($size, $done)) {
shell_exec("convert themes/" . $theme . "/icons/source.png -scale " . $size . "x" . $size . " themes/" . $theme . "/icons/" . $size . ".png");
shell_exec("pngquant -f themes/" . $theme . "/icons/" . $size . ".png --output themes/" . $theme . "/icons/" . $size . ".png");
$done[] = $size;
}
}
}

foreach ($done as $done) {
$line = $line . ", " . $done;
}

echo substr($line, 2) . "\n";

} else {
echo "Usage: php themes/resize.php <theme name>\n";
}

} else {
echo "Available only via CLI for security reasons. Use 'php themes/resize.php'";
}

+ 0
- 2
ubuntu/.gitignore View File

@@ -1,2 +0,0 @@
.DS_Store
webify

+ 0
- 3
ubuntu/site/.bowerrc View File

@@ -1,3 +0,0 @@
{
"directory": "_build/components"
}

+ 0
- 3
ubuntu/site/.gitignore View File

@@ -1,3 +0,0 @@
_build
.git
.sass-cache

+ 0
- 20
ubuntu/site/_config.yml View File

@@ -1,20 +0,0 @@
# Site settings
title: Ubuntu Font (Bower project)
email: earaujoassis@gmail.com
description: Ubuntu Font Family Bower-ready
baseurl: "/ubuntu-fontface"
url: "https://earaujoassis.github.io"
creators_website: "http://earaujoassis.com"
twitter_username: earaujoassis
github_username: earaujoassis
github_project: evolve
source: .
destination: ./_build

# Build settings
exclude: ['Gemfile', 'Gemfile.lock', 'bower.json', 'README.md']
keep_files: ['components', '.git']
markdown: kramdown
sass:
style: :compressed
sass_dir: _sass

+ 0
- 12
ubuntu/site/_includes/footer.html View File

@@ -1,12 +0,0 @@
<footer class="site-footer">
<div class="row">
<div class="small-8 columns">
<p>Created and maintained by <a href="//earaujoassis.com/">Ewerton Assis</a> &copy; {{ site.time | date: '%Y' }}</p>
</div>
<div class="small-4 columns text-right">
<a href="//github.com/earaujoassis/ubuntu-fontface" class="button github">
<span class="octicon octicon-logo-github"></span>
</a>
</div>
</div>
</footer>

+ 0
- 17
ubuntu/site/_includes/head.html View File

@@ -1,17 +0,0 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
<meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">

<link rel="stylesheet" href="{{ "/components/foundation/css/normalize.css" | prepend: site.baseurl }}">
<link rel="stylesheet" href="{{ "/components/foundation/css/foundation.css" | prepend: site.baseurl }}">
<link rel="stylesheet" href="{{ "/components/octicons/octicons/octicons.css" | prepend: site.baseurl }}">
<link rel="stylesheet" href="{{ "/components/ubuntu-fontface/ubuntu.css" | prepend: site.baseurl }}">
<link rel="stylesheet" href="{{ "/css/ubuntu-fontface-site.css" | prepend: site.baseurl }}">
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create','UA-69793003-1','auto');ga('send','pageview');</script>
</head>

+ 0
- 7
ubuntu/site/_includes/header.html View File

@@ -1,7 +0,0 @@
<header class="site-header">
<div class="row">
<div class="columns large-12">
<h1>Ubuntu Font Family Bower-ready</h1>
</div>
</div>
</header>

+ 0
- 13
ubuntu/site/_layouts/default.html View File

@@ -1,13 +0,0 @@
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include header.html %}
<div class="page-content">
<div class="wrapper">
{{ content }}
</div>
</div>
{% include footer.html %}
</body>
</html>

+ 0
- 75
ubuntu/site/_sass/_layout.scss View File

@@ -1,75 +0,0 @@
body {
font-family: "Ubuntu", sans-serif;
background: #fff;
color: #444;
}

h1, h2, h3, h4, h5, h6, p {
font-family: inherit;
color: inherit;
font-weight: 300;
}

.button, button {
&.github {
margin: 0px;
padding: 0.5rem 1.4rem;
border-radius: 4px;
background: #f3f3f3 none repeat scroll 0% 0%;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
}
}

.page-content, .site-footer {
.button, button {
&.button {
background: #dbdbdb none repeat scroll 0% 0%;
color: #777;
box-shadow: none;
}
}
}

pre, code {
font-family: "Ubuntu Monospace", sans-serif;
}

.site-header {
text-align: center;
background: #dd4814;
background: -moz-linear-gradient(left, #dd4814 0%, #772953 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#dd4814), color-stop(100%,#772953));
background: -webkit-linear-gradient(left, #dd4814 0%,#772953 100%);
background: -o-linear-gradient(left, #dd4814 0%,#772953 100%);
background: -ms-linear-gradient(left, #dd4814 0%,#772953 100%);
background: linear-gradient(to right, #dd4814 0%,#772953 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd4814', endColorstr='#772953',GradientType=1 );
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.25);

h1 {
margin: 120px 0;
color: #fff;
font-weight: 300;
}
}

.page-content {
padding: 50px 0 25px;

blockquote {
margin-left: 30px;
}

section ~ section {
margin-top: 25px;
}
}

.site-footer {
padding: 25px 0 50px;
color: #b6b6b6;

a {
color: #777;
}
}

+ 0
- 66
ubuntu/site/_sass/_syntax-highlighting.scss View File

@@ -1,66 +0,0 @@
/**
* Syntax highlighting styles
*/
.highlight {
background: #fff;

.c { color: #998; font-style: italic } // Comment
.err { color: #a61717; background-color: #e3d2d2 } // Error
.k { font-weight: 300 } // Keyword
.o { font-weight: 300 } // Operator
.cm { color: #998; font-style: italic } // Comment.Multiline
.cp { color: #999; font-weight: 300 } // Comment.Preproc
.c1 { color: #998; font-style: italic } // Comment.Single
.cs { color: #999; font-weight: 300; font-style: italic } // Comment.Special
.gd { color: #000; background-color: #fdd } // Generic.Deleted
.gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
.ge { font-style: italic } // Generic.Emph
.gr { color: #a00 } // Generic.Error
.gh { color: #999 } // Generic.Heading
.gi { color: #000; background-color: #dfd } // Generic.Inserted
.gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
.go { color: #888 } // Generic.Output
.gp { color: #555 } // Generic.Prompt
.gs { font-weight: 300 } // Generic.Strong
.gu { color: #aaa } // Generic.Subheading
.gt { color: #a00 } // Generic.Traceback
.kc { font-weight: 300 } // Keyword.Constant
.kd { font-weight: 300 } // Keyword.Declaration
.kp { font-weight: 300 } // Keyword.Pseudo
.kr { font-weight: 300 } // Keyword.Reserved
.kt { color: #458; font-weight: 300 } // Keyword.Type
.m { color: #099 } // Literal.Number
.s { color: #d14 } // Literal.String
.na { color: #008080 } // Name.Attribute
.nb { color: #0086B3 } // Name.Builtin
.nc { color: #458; font-weight: 300 } // Name.Class
.no { color: #008080 } // Name.Constant
.ni { color: #800080 } // Name.Entity
.ne { color: #900; font-weight: 300 } // Name.Exception
.nf { color: #900; font-weight: 300 } // Name.Function
.nn { color: #555 } // Name.Namespace
.nt { color: #000080 } // Name.Tag
.nv { color: #008080 } // Name.Variable
.ow { font-weight: 300 } // Operator.Word
.w { color: #bbb } // Text.Whitespace
.mf { color: #099 } // Literal.Number.Float
.mh { color: #099 } // Literal.Number.Hex
.mi { color: #099 } // Literal.Number.Integer
.mo { color: #099 } // Literal.Number.Oct
.sb { color: #d14 } // Literal.String.Backtick
.sc { color: #d14 } // Literal.String.Char
.sd { color: #d14 } // Literal.String.Doc
.s2 { color: #d14 } // Literal.String.Double
.se { color: #d14 } // Literal.String.Escape
.sh { color: #d14 } // Literal.String.Heredoc
.si { color: #d14 } // Literal.String.Interpol
.sx { color: #d14 } // Literal.String.Other
.sr { color: #009926 } // Literal.String.Regex
.s1 { color: #d14 } // Literal.String.Single
.ss { color: #990073 } // Literal.String.Symbol
.bp { color: #999 } // Name.Builtin.Pseudo
.vc { color: #008080 } // Name.Variable.Class
.vg { color: #008080 } // Name.Variable.Global
.vi { color: #008080 } // Name.Variable.Instance
.il { color: #099 } // Literal.Number.Integer.Long
}

+ 0
- 14
ubuntu/site/about.md View File

@@ -1,14 +0,0 @@
# Ubuntu Font Family

> Ubuntu Font Family Bower-ready (also SCSS-ready, LESS-ready, and plain CSS-ready)

**Requirements**

* Ruby 1.9+ + `$ gem install jekyll`
* Bower (Node.js + NPM) + `$ bower install`

To test the web page locally, run `$ jekyll serve` and open the browser in http://localhost:400/ubuntu-fontface/.

## License

Code under [MIT License](http://earaujoassis.mit-license.org/) &copy; Ewerton Assis

+ 0
- 36
ubuntu/site/bower.json View File

@@ -1,36 +0,0 @@
{
"name": "ubuntu-fontface/site",
"version": "0.1.13",
"homepage": "https://github.com/earaujoassis/ubuntu-fontface",
"authors": [
"Ewerton Assis <earaujoassis@gmail.com>"
],
"description": "Static website for the ubuntu-fontface project",
"keywords": [
"ubuntu",
"font",
"fontface",
"css",
"sass",
"less",
"web",
"design"
],
"main": "none",
"moduleType": [],
"license": "MIT",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"_build/components",
"test",
"tests"
],
"dependencies": {
"foundation": "~5.5.2",
"octicons": "~3.1.0",
"ubuntu-fontface": "~0.1.13"
}
}

+ 0
- 6
ubuntu/site/css/ubuntu-fontface-site.scss View File

@@ -1,6 +0,0 @@
---
# Only the main Sass file needs front matter (the dashes are enough)
---
@charset "utf-8";

@import "layout", "syntax-highlighting";

+ 0
- 67
ubuntu/site/index.html View File

@@ -1,67 +0,0 @@
---
layout: default
---
<div class="home">
<section>
<div class="row">
<div class="small-8 columns">
<h2>How to use it</h2>
</div>
<div class="small-4 columns text-right">
<a href="//github.com/earaujoassis/ubuntu-fontface" class="button github">
<span class="octicon octicon-logo-github"></span>
</a>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<ol>
<li>
<p>Install it from <a href="//bower.io">Bower</a></p>
<pre class="highlight">
<span class="m">$</span> bower install [--save] ubuntu-fontface
</pre>
</li>
<li>
<p>Import it on SCSS/LESS/CSS source code. Assuming <code class="highlight"><span class="si">{BOWER_PATH}</span></code> is <code class="highlight"><span class="sr">bower_components</span></code>;
<code class="highlight"><span class="si">{SUFFIX}</span></code> options are <code class="highlight"><span class="sr">-base</span></code>, <code class="highlight"><span class="sr">-condensed</span></code> and <code class="highlight"><span class="sr">-mono</span></code>;
<code class="highlight"><span class="si">{EXTENSION}</span></code> options are <code class="highlight"><span class="sr">css</span></code>, <code class="highlight"><span class="sr">less</span></code>, <code class="highlight"><span class="sr">scss</span></code>,
depending whether you're using pure CSS, <a href="//sass-lang.com/">SCSS</a> or <a href="//lesscss.org/">LESS</a>. The <code class="highlight"><span class="si">{SUFFIX}</span></code> is not available if you're importing the pure CSS file.
A minified file is available for the pure CSS version.</p>
<pre class="highlight">
<span class="nf">@import</span> <span class="sr">"<span class="si">{BOWER_PATH}</span>/ubuntu-fontface/ubuntu<span class="si">{SUFFIX}</span>.<span class="si">{EXTENSION}</span>"</span>;
</pre>
</li>