Use tabs instead of spaces, better indentation
This commit is contained in:
parent
147a25c93f
commit
68cbec8a8d
25 changed files with 1645 additions and 1674 deletions
1370
LICENSE.html
1370
LICENSE.html
File diff suppressed because it is too large
Load diff
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"require": {
|
||||
"endroid/qr-code": "^4.4",
|
||||
"wikimedia/less.php": "^3.1"
|
||||
}
|
||||
"require": {
|
||||
"endroid/qr-code": "^4.4",
|
||||
"wikimedia/less.php": "^3.1"
|
||||
}
|
||||
}
|
||||
|
|
467
index.php
467
index.php
|
@ -14,295 +14,292 @@ define("LIBREQR_VERSION", "2.0.0dev");
|
|||
|
||||
// Defines the locale to be used
|
||||
if (isset($_SERVER['HTTP_ACCEPT_LANGUAGE'])) {
|
||||
$clientLocales = $_SERVER['HTTP_ACCEPT_LANGUAGE'];
|
||||
$clientLocales = preg_replace("#[A-Z0-9]|q=|;|-|\.#", "", $clientLocales);
|
||||
$clientLocales = explode(',', $clientLocales);
|
||||
$availableLocales = array('en', 'fr', 'oc', 'template');
|
||||
foreach ($clientLocales as $clientLocale) {
|
||||
if (in_array($clientLocale, $availableLocales)) {
|
||||
$locale = $clientLocale;
|
||||
break;
|
||||
}
|
||||
}
|
||||
$clientLocales = $_SERVER['HTTP_ACCEPT_LANGUAGE'];
|
||||
$clientLocales = preg_replace("#[A-Z0-9]|q=|;|-|\.#", "", $clientLocales);
|
||||
$clientLocales = explode(',', $clientLocales);
|
||||
$availableLocales = array('en', 'fr', 'oc', 'template');
|
||||
foreach ($clientLocales as $clientLocale) {
|
||||
if (in_array($clientLocale, $availableLocales)) {
|
||||
$locale = $clientLocale;
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
$locale = DEFAULT_LOCALE;
|
||||
$locale = DEFAULT_LOCALE;
|
||||
}
|
||||
require "locales/" . $locale . ".php";
|
||||
|
||||
$params = array(
|
||||
"txt" => "",
|
||||
"redundancy" => DEFAULT_REDUNDANCY,
|
||||
"margin" => DEFAULT_MARGIN,
|
||||
"size" => DEFAULT_SIZE,
|
||||
"bgColor" => DEFAULT_BGCOLOR,
|
||||
"mainColor" => DEFAULT_MAINCOLOR,
|
||||
"txt" => "",
|
||||
"redundancy" => DEFAULT_REDUNDANCY,
|
||||
"margin" => DEFAULT_MARGIN,
|
||||
"size" => DEFAULT_SIZE,
|
||||
"bgColor" => DEFAULT_BGCOLOR,
|
||||
"mainColor" => DEFAULT_MAINCOLOR,
|
||||
);
|
||||
|
||||
$validFormSubmitted = false;
|
||||
|
||||
if (
|
||||
isset($_POST['txt'])
|
||||
AND isset($_POST['redundancy'])
|
||||
AND isset($_POST['margin'])
|
||||
AND isset($_POST['size'])
|
||||
AND isset($_POST['bgColor'])
|
||||
AND isset($_POST['mainColor'])
|
||||
isset($_POST['txt'])
|
||||
AND isset($_POST['redundancy'])
|
||||
AND isset($_POST['margin'])
|
||||
AND isset($_POST['size'])
|
||||
AND isset($_POST['bgColor'])
|
||||
AND isset($_POST['mainColor'])
|
||||
) {
|
||||
|
||||
if (strlen($_POST['txt']) >= 1 AND strlen($_POST['txt']) <= 4096) {
|
||||
$params['txt'] = $_POST['txt'];
|
||||
} else {
|
||||
http_response_code(400);
|
||||
exit("Wrong value for txt");
|
||||
}
|
||||
if (strlen($_POST['txt']) >= 1 AND strlen($_POST['txt']) <= 4096) {
|
||||
$params['txt'] = $_POST['txt'];
|
||||
} else {
|
||||
http_response_code(400);
|
||||
exit("Wrong value for txt");
|
||||
}
|
||||
|
||||
if ($_POST['redundancy'] === "low" OR $_POST['redundancy'] === "medium" OR $_POST['redundancy'] === "quartile" OR $_POST['redundancy'] === "high") {
|
||||
$params['redundancy'] = $_POST['redundancy'];
|
||||
} else {
|
||||
http_response_code(400);
|
||||
exit("Wrong value for redundancy");
|
||||
}
|
||||
if ($_POST['redundancy'] === "low" OR $_POST['redundancy'] === "medium" OR $_POST['redundancy'] === "quartile" OR $_POST['redundancy'] === "high") {
|
||||
$params['redundancy'] = $_POST['redundancy'];
|
||||
} else {
|
||||
http_response_code(400);
|
||||
exit("Wrong value for redundancy");
|
||||
}
|
||||
|
||||
if (is_numeric($_POST['margin']) AND $_POST['margin'] >= 0 AND $_POST['margin'] <= 1024) {
|
||||
$params['margin'] = $_POST['margin'];
|
||||
} else if (empty($_POST['margin'])) {
|
||||
$params['margin'] = NULL;
|
||||
} else {
|
||||
http_response_code(400);
|
||||
exit("Wrong value for margin");
|
||||
}
|
||||
if (is_numeric($_POST['margin']) AND $_POST['margin'] >= 0 AND $_POST['margin'] <= 1024) {
|
||||
$params['margin'] = $_POST['margin'];
|
||||
} else if (empty($_POST['margin'])) {
|
||||
$params['margin'] = NULL;
|
||||
} else {
|
||||
http_response_code(400);
|
||||
exit("Wrong value for margin");
|
||||
}
|
||||
|
||||
if (is_numeric($_POST['size']) AND $_POST['size'] >= 1 AND $_POST['size'] <= 4096) {
|
||||
$params['size'] = $_POST['size'];
|
||||
} else if (empty($_POST['size'])) {
|
||||
$params['size'] = NULL;
|
||||
} else {
|
||||
http_response_code(400);
|
||||
exit("Wrong value for size");
|
||||
}
|
||||
if (is_numeric($_POST['size']) AND $_POST['size'] >= 1 AND $_POST['size'] <= 4096) {
|
||||
$params['size'] = $_POST['size'];
|
||||
} else if (empty($_POST['size'])) {
|
||||
$params['size'] = NULL;
|
||||
} else {
|
||||
http_response_code(400);
|
||||
exit("Wrong value for size");
|
||||
}
|
||||
|
||||
if (preg_match("/^#[abcdefABCDEF0-9]{6}$/", $_POST['bgColor'])) {
|
||||
$params['bgColor'] = substr($_POST['bgColor'], -6);
|
||||
} else {
|
||||
http_response_code(400);
|
||||
exit("Wrong value for bgColor");
|
||||
}
|
||||
if (preg_match("/^#[abcdefABCDEF0-9]{6}$/", $_POST['bgColor'])) {
|
||||
$params['bgColor'] = substr($_POST['bgColor'], -6);
|
||||
} else {
|
||||
http_response_code(400);
|
||||
exit("Wrong value for bgColor");
|
||||
}
|
||||
|
||||
if (preg_match("/^#[abcdefABCDEF0-9]{6}$/", $_POST['mainColor'])) {
|
||||
$params['mainColor'] = substr($_POST['mainColor'], -6);
|
||||
} else {
|
||||
http_response_code(400);
|
||||
exit("Wrong value for mainColor");
|
||||
}
|
||||
if (preg_match("/^#[abcdefABCDEF0-9]{6}$/", $_POST['mainColor'])) {
|
||||
$params['mainColor'] = substr($_POST['mainColor'], -6);
|
||||
} else {
|
||||
http_response_code(400);
|
||||
exit("Wrong value for mainColor");
|
||||
}
|
||||
|
||||
$validFormSubmitted = true;
|
||||
$validFormSubmitted = true;
|
||||
}
|
||||
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="<?= $locale ?>">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>LibreQR · <?= $loc['subtitle'] ?></title>
|
||||
<meta name="description" content="<?= $loc['description'] ?>">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="color-scheme" content="dark light">
|
||||
<meta name="application-name" content="LibreQR">
|
||||
<meta name="referrer" content="no-referrer">
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' data:; style-src 'self'; form-action 'self';">
|
||||
<?php
|
||||
require "themes/" . THEME . "/theme.php";
|
||||
$colorScheme['theme'] = THEME;
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>LibreQR · <?= $loc['subtitle'] ?></title>
|
||||
<meta name="description" content="<?= $loc['description'] ?>">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="color-scheme" content="dark light">
|
||||
<meta name="application-name" content="LibreQR">
|
||||
<meta name="referrer" content="no-referrer">
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' data:; style-src 'self'; form-action 'self';">
|
||||
<?php
|
||||
require "themes/" . THEME . "/theme.php";
|
||||
$colorScheme['theme'] = THEME;
|
||||
|
||||
$options = array('cache_dir' => 'css/', 'compress' => true);
|
||||
$cssFileName = Less_Cache::Get(array("style.less" => ""), $options, $colorScheme);
|
||||
?>
|
||||
<link rel="stylesheet" media="screen" href="css/<?= $cssFileName ?>">
|
||||
<?php
|
||||
foreach($themeDimensionsIcons as $dimFav) { // Set all icons dimensions
|
||||
echo ' <link rel="icon" type="image/png" href="themes/' . THEME . '/icons/' . $dimFav . '.png" sizes="' . $dimFav . 'x' . $dimFav . '">' . "\n";
|
||||
}
|
||||
?>
|
||||
</head>
|
||||
$options = array('cache_dir' => 'css/', 'compress' => true);
|
||||
$cssFileName = Less_Cache::Get(array("style.less" => ""), $options, $colorScheme);
|
||||
?>
|
||||
<link rel="stylesheet" media="screen" href="css/<?= $cssFileName ?>">
|
||||
<?php
|
||||
foreach($themeDimensionsIcons as $dimFav) // Set all icons dimensions
|
||||
echo ' <link rel="icon" type="image/png" href="themes/' . THEME . '/icons/' . $dimFav . '.png" sizes="' . $dimFav . 'x' . $dimFav . '">' . "\n";
|
||||
?>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<a id="linkTitles" href="./">
|
||||
<div id="titles">
|
||||
<h1>LibreQR</h1>
|
||||
<h2><?= $loc['subtitle'] ?></h2>
|
||||
</div>
|
||||
</a>
|
||||
</header>
|
||||
<header>
|
||||
<a id="linkTitles" href="./">
|
||||
<div id="titles">
|
||||
<h1>LibreQR</h1>
|
||||
<h2><?= $loc['subtitle'] ?></h2>
|
||||
</div>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<form method="post" action="./#output">
|
||||
<form method="post" action="./#output">
|
||||
|
||||
<div class="param" id="txtParam">
|
||||
<details>
|
||||
<summary><label for="txt"><?= $loc['label_content'] ?></label></summary>
|
||||
<div class="helpText">
|
||||
<?= $loc['help_content'] ?>
|
||||
</div>
|
||||
</details>
|
||||
<textarea rows="3" required="" id="txt" placeholder="<?= $loc['placeholder'] ?>" name="txt"><?= htmlspecialchars($params['txt']) ?></textarea>
|
||||
</div>
|
||||
<div class="param" id="txtParam">
|
||||
<details>
|
||||
<summary><label for="txt"><?= $loc['label_content'] ?></label></summary>
|
||||
<div class="helpText">
|
||||
<?= $loc['help_content'] ?>
|
||||
</div>
|
||||
</details>
|
||||
<textarea rows="3" required="" id="txt" placeholder="<?= $loc['placeholder'] ?>" name="txt"><?= htmlspecialchars($params['txt']) ?></textarea>
|
||||
</div>
|
||||
|
||||
<div id="sideParams">
|
||||
<div id="sideParams">
|
||||
|
||||
<div class="param">
|
||||
<details>
|
||||
<summary><label for="redundancy"><?= $loc['label_redundancy'] ?></label></summary>
|
||||
<p class="helpText">
|
||||
<?= $loc['help_redundancy'] ?>
|
||||
</p>
|
||||
</details>
|
||||
<select id="redundancy" name="redundancy">
|
||||
<option <?php if ($params['redundancy'] === "low") echo 'selected="" '; ?>value="low">L - 7%</option>
|
||||
<option <?php if ($params['redundancy'] === "medium") echo 'selected="" '; ?>value="medium">M - 15%</option>
|
||||
<option <?php if ($params['redundancy'] === "quartile") echo 'selected="" '; ?>value="quartile">Q - 25%</option>
|
||||
<option <?php if ($params['redundancy'] === "high") echo 'selected="" '; ?>value="high">H - 30%</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="param">
|
||||
<details>
|
||||
<summary><label for="redundancy"><?= $loc['label_redundancy'] ?></label></summary>
|
||||
<p class="helpText">
|
||||
<?= $loc['help_redundancy'] ?>
|
||||
</p>
|
||||
</details>
|
||||
<select id="redundancy" name="redundancy">
|
||||
<option <?php if ($params['redundancy'] === "low") echo 'selected="" '; ?>value="low">L - 7%</option>
|
||||
<option <?php if ($params['redundancy'] === "medium") echo 'selected="" '; ?>value="medium">M - 15%</option>
|
||||
<option <?php if ($params['redundancy'] === "quartile") echo 'selected="" '; ?>value="quartile">Q - 25%</option>
|
||||
<option <?php if ($params['redundancy'] === "high") echo 'selected="" '; ?>value="high">H - 30%</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="param">
|
||||
<details>
|
||||
<summary><label for="margin"><?= $loc['label_margin'] ?></label></summary>
|
||||
<p class="helpText">
|
||||
<?= $loc['help_margin'] ?>
|
||||
</p>
|
||||
</details>
|
||||
<input type="number" list="margins" id="margin" placeholder="<?= $loc['placeholder_pixels'] ?>" name="margin" min="0" max="1024" value="<?= htmlspecialchars($params['margin']) ?>">
|
||||
<datalist id="margins">
|
||||
<option value="16">
|
||||
<option value="32">
|
||||
<option value="64">
|
||||
<option value="128">
|
||||
</datalist>
|
||||
</div>
|
||||
<div class="param">
|
||||
<details>
|
||||
<summary><label for="margin"><?= $loc['label_margin'] ?></label></summary>
|
||||
<p class="helpText">
|
||||
<?= $loc['help_margin'] ?>
|
||||
</p>
|
||||
</details>
|
||||
<input type="number" list="margins" id="margin" placeholder="<?= $loc['placeholder_pixels'] ?>" name="margin" min="0" max="1024" value="<?= htmlspecialchars($params['margin']) ?>">
|
||||
<datalist id="margins">
|
||||
<option value="16">
|
||||
<option value="32">
|
||||
<option value="64">
|
||||
<option value="128">
|
||||
</datalist>
|
||||
</div>
|
||||
|
||||
<div class="param">
|
||||
<details>
|
||||
<summary><label for="size"><?= $loc['label_size'] ?></label></summary>
|
||||
<p class="helpText">
|
||||
<?= $loc['help_size'] ?>
|
||||
</p>
|
||||
</details>
|
||||
<input type="number" list="sizes" id="size" placeholder="<?= $loc['placeholder_pixels'] ?>" name="size" min="1" max="4096" value="<?= htmlspecialchars($params['size']) ?>">
|
||||
<datalist id="sizes">
|
||||
<option value="128">
|
||||
<option value="256">
|
||||
<option value="512">
|
||||
<option value="1024">
|
||||
</datalist>
|
||||
</div>
|
||||
<div class="param">
|
||||
<details>
|
||||
<summary><label for="size"><?= $loc['label_size'] ?></label></summary>
|
||||
<p class="helpText">
|
||||
<?= $loc['help_size'] ?>
|
||||
</p>
|
||||
</details>
|
||||
<input type="number" list="sizes" id="size" placeholder="<?= $loc['placeholder_pixels'] ?>" name="size" min="1" max="4096" value="<?= htmlspecialchars($params['size']) ?>">
|
||||
<datalist id="sizes">
|
||||
<option value="128">
|
||||
<option value="256">
|
||||
<option value="512">
|
||||
<option value="1024">
|
||||
</datalist>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="colors">
|
||||
<div id="colors">
|
||||
<div class="param">
|
||||
<label for="bgColor"><?= $loc['label_bgColor'] ?></label>
|
||||
<input type="color" name="bgColor" id="bgColor" value="#<?= htmlspecialchars($params['bgColor']) ?>">
|
||||
</div>
|
||||
<div class="param">
|
||||
<label for="mainColor"><?= $loc['label_mainColor'] ?></label>
|
||||
<input type="color" name="mainColor" id="mainColor" value="#<?= htmlspecialchars($params['mainColor']) ?>">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="param">
|
||||
<label for="bgColor"><?= $loc['label_bgColor'] ?></label>
|
||||
<input type="color" name="bgColor" id="bgColor" value="#<?= htmlspecialchars($params['bgColor']) ?>">
|
||||
</div>
|
||||
<div class="centered">
|
||||
<input class="button" type="submit" value="<?= $loc['button_create'] ?>" />
|
||||
</div>
|
||||
|
||||
<div class="param">
|
||||
<label for="mainColor"><?= $loc['label_mainColor'] ?></label>
|
||||
<input type="color" name="mainColor" id="mainColor" value="#<?= htmlspecialchars($params['mainColor']) ?>">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="centered">
|
||||
<input class="button" type="submit" value="<?= $loc['button_create'] ?>" />
|
||||
</div>
|
||||
<?php
|
||||
|
||||
</form>
|
||||
if ($validFormSubmitted) {
|
||||
|
||||
<?php
|
||||
$rgbBgColor = array(
|
||||
'r' => hexdec(substr($params['bgColor'],0,2)),
|
||||
'g' => hexdec(substr($params['bgColor'],2,2)),
|
||||
'b' => hexdec(substr($params['bgColor'],4,2)),
|
||||
);
|
||||
|
||||
if ($validFormSubmitted) {
|
||||
$qrCode = Builder::create()
|
||||
->data($params['txt']);
|
||||
if (!is_null($params['margin']))
|
||||
$qrCode->margin($params['margin']);
|
||||
if (!is_null($params['size']))
|
||||
$qrCode->size($params['size']);
|
||||
|
||||
$rgbBgColor = array(
|
||||
'r' => hexdec(substr($params['bgColor'],0,2)),
|
||||
'g' => hexdec(substr($params['bgColor'],2,2)),
|
||||
'b' => hexdec(substr($params['bgColor'],4,2)),
|
||||
);
|
||||
if ($params['redundancy'] === "high")
|
||||
$qrCode->errorCorrectionLevel(new ErrorCorrectionLevelHigh());
|
||||
else if ($params['redundancy'] === "quartile")
|
||||
$qrCode->errorCorrectionLevel(new ErrorCorrectionLevelQuartile());
|
||||
else if ($params['redundancy'] === "medium")
|
||||
$qrCode->errorCorrectionLevel(new ErrorCorrectionLevelMedium());
|
||||
else if ($params['redundancy'] === "low")
|
||||
$qrCode->errorCorrectionLevel(new ErrorCorrectionLevelLow());
|
||||
|
||||
$qrCode = Builder::create()
|
||||
->data($params['txt']);
|
||||
if (!is_null($params['margin']))
|
||||
$qrCode->margin($params['margin']);
|
||||
if (!is_null($params['size']))
|
||||
$qrCode->size($params['size']);
|
||||
$qrCode
|
||||
->backgroundColor(new Color(
|
||||
$rgbBgColor['r'],
|
||||
$rgbBgColor['g'],
|
||||
$rgbBgColor['b']
|
||||
))
|
||||
->foregroundColor(new Color(
|
||||
hexdec(substr($params['mainColor'],0,2)),
|
||||
hexdec(substr($params['mainColor'],2,2)),
|
||||
hexdec(substr($params['mainColor'],4,2))
|
||||
));
|
||||
|
||||
if ($params['redundancy'] === "high")
|
||||
$qrCode->errorCorrectionLevel(new ErrorCorrectionLevelHigh());
|
||||
else if ($params['redundancy'] === "quartile")
|
||||
$qrCode->errorCorrectionLevel(new ErrorCorrectionLevelQuartile());
|
||||
else if ($params['redundancy'] === "medium")
|
||||
$qrCode->errorCorrectionLevel(new ErrorCorrectionLevelMedium());
|
||||
else if ($params['redundancy'] === "low")
|
||||
$qrCode->errorCorrectionLevel(new ErrorCorrectionLevelLow());
|
||||
$result = $qrCode->build();
|
||||
|
||||
$qrCode
|
||||
->backgroundColor(new Color(
|
||||
$rgbBgColor['r'],
|
||||
$rgbBgColor['g'],
|
||||
$rgbBgColor['b']
|
||||
))
|
||||
->foregroundColor(new Color(
|
||||
hexdec(substr($params['mainColor'],0,2)),
|
||||
hexdec(substr($params['mainColor'],2,2)),
|
||||
hexdec(substr($params['mainColor'],4,2))
|
||||
));
|
||||
$dataUri = $result->getDataUri();
|
||||
|
||||
$result = $qrCode->build();
|
||||
?>
|
||||
|
||||
$dataUri = $result->getDataUri();
|
||||
<section id="output">
|
||||
<div class="centered" id="downloadQR">
|
||||
<a href="<?= $dataUri ?>" class="button" download="<?= htmlspecialchars($params['txt']); ?>.png"><?= $loc['button_download'] ?></a>
|
||||
</div>
|
||||
|
||||
?>
|
||||
<div class="centered" id="showOnlyQR">
|
||||
<a title="<?= $loc['title_showOnlyQR'] ?>" href="<?= $dataUri ?>"><img width="<?= $qrSize ?>" height="<?= $qrSize ?>" alt='<?= $loc['alt_QR_before'] ?><?= htmlspecialchars($params['txt']); ?><?= $loc['alt_QR_after'] ?>' id="qrCode"<?php
|
||||
|
||||
<section id="output">
|
||||
<div class="centered" id="downloadQR">
|
||||
<a href="<?= $dataUri ?>" class="button" download="<?= htmlspecialchars($params['txt']); ?>.png"><?= $loc['button_download'] ?></a>
|
||||
</div>
|
||||
// Compute the difference between the QR code and theme background colors
|
||||
$diffLight = abs($rgbBgColor['r']-hexdec(substr($colorScheme['bg-light'],-6,2))) + abs($rgbBgColor['g']-hexdec(substr($colorScheme['bg-light'],-4,2))) + abs($rgbBgColor['b']-hexdec(substr($colorScheme['bg-light'],-2,2)));
|
||||
$diffDark = abs($rgbBgColor['r']-hexdec(substr($colorScheme['bg-dark'],-6,2))) + abs($rgbBgColor['g']-hexdec(substr($colorScheme['bg-dark'],-4,2))) + abs($rgbBgColor['b']-hexdec(substr($colorScheme['bg-dark'],-2,2)));
|
||||
|
||||
<div class="centered" id="showOnlyQR">
|
||||
<a title="<?= $loc['title_showOnlyQR'] ?>" href="<?= $dataUri ?>"><img width="<?= $qrSize ?>" height="<?= $qrSize ?>" alt='<?= $loc['alt_QR_before'] ?><?= htmlspecialchars($params['txt']); ?><?= $loc['alt_QR_after'] ?>' id="qrCode"<?php
|
||||
// Determine whether a CSS corner is needed to let the user see the margin of the QR code
|
||||
$contrastThreshold = 64;
|
||||
if ($diffLight < $contrastThreshold)
|
||||
echo " class='needLightContrast'";
|
||||
if ($diffDark < $contrastThreshold)
|
||||
echo " class='needDarkContrast'";
|
||||
?> src="<?= $dataUri ?>"></a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
// Compute the difference between the QR code and theme background colors
|
||||
$diffLight = abs($rgbBgColor['r']-hexdec(substr($colorScheme['bg-light'],-6,2))) + abs($rgbBgColor['g']-hexdec(substr($colorScheme['bg-light'],-4,2))) + abs($rgbBgColor['b']-hexdec(substr($colorScheme['bg-light'],-2,2)));
|
||||
$diffDark = abs($rgbBgColor['r']-hexdec(substr($colorScheme['bg-dark'],-6,2))) + abs($rgbBgColor['g']-hexdec(substr($colorScheme['bg-dark'],-4,2))) + abs($rgbBgColor['b']-hexdec(substr($colorScheme['bg-dark'],-2,2)));
|
||||
<?php } ?>
|
||||
|
||||
// Determine whether a CSS corner is needed to let the user see the margin of the QR code
|
||||
$contrastThreshold = 64;
|
||||
if ($diffLight < $contrastThreshold)
|
||||
echo " class='needLightContrast'";
|
||||
if ($diffDark < $contrastThreshold)
|
||||
echo " class='needDarkContrast'";
|
||||
?> src="<?= $dataUri ?>"></a>
|
||||
</div>
|
||||
</section>
|
||||
<footer>
|
||||
|
||||
<?php } ?>
|
||||
<section id="info" class="metaText">
|
||||
<?= $loc['metaText_qr'] ?>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<?php if (CUSTOM_TEXT_ENABLED) { ?>
|
||||
<section class="metaText">
|
||||
<?= CUSTOM_TEXT ?>
|
||||
</section>
|
||||
<?php } ?>
|
||||
|
||||
<section id="info" class="metaText">
|
||||
<?= $loc['metaText_qr'] ?>
|
||||
</section>
|
||||
<section class="metaText">
|
||||
<small><?= $loc['metaText_legal'] ?></small>
|
||||
</section>
|
||||
|
||||
<?php if (CUSTOM_TEXT_ENABLED) { ?>
|
||||
<section class="metaText">
|
||||
<?= CUSTOM_TEXT ?>
|
||||
</section>
|
||||
<?php } ?>
|
||||
</footer>
|
||||
|
||||
<section class="metaText">
|
||||
<small><?= $loc['metaText_legal'] ?></small>
|
||||
</section>
|
||||
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -1,41 +1,41 @@
|
|||
<?php // This file is part of LibreQR, which is distributed under the GNU AGPLv3+ license
|
||||
$loc = array(
|
||||
'subtitle' => "QR codes generator",
|
||||
'description' => "Generate QR codes freely. Choose content, size, colors…",
|
||||
'subtitle' => "QR codes generator",
|
||||
'description' => "Generate QR codes freely. Choose content, size, colors…",
|
||||
|
||||
'label_content' => "Text to encode",
|
||||
'label_redundancy' => "Redundancy rate",
|
||||
'label_margin' => "Margin size",
|
||||
'label_size' => "Image size",
|
||||
'label_bgColor' => "Background color",
|
||||
'label_mainColor' => "Foreground color",
|
||||
'label_content' => "Text to encode",
|
||||
'label_redundancy' => "Redundancy rate",
|
||||
'label_margin' => "Margin size",
|
||||
'label_size' => "Image size",
|
||||
'label_bgColor' => "Background color",
|
||||
'label_mainColor' => "Foreground color",
|
||||
|
||||
'placeholder' => "Enter the text to encode in the QR code",
|
||||
'placeholder_pixels' => "automatic",
|
||||
'placeholder' => "Enter the text to encode in the QR code",
|
||||
'placeholder_pixels' => "automatic",
|
||||
|
||||
'help_content' => "
|
||||
<p>You can encode whatever text you want.</p>
|
||||
<p>Software which decodes these QR codes could suggest to open them with dedicated software, depending on their <a href='https://en.wikipedia.org/wiki/List_of_URI_schemes' hreflang='en' rel='help external noreferrer'>URI scheme</a>.</p>
|
||||
<p>For instance, to open a webpage: <code>https://www.example/</code></p>
|
||||
<p>To send an email: <code>mailto:contact@email.example</code></p>
|
||||
<p>To share geographic coordinates: <code>geo:48.867564,2.364057</code></p>
|
||||
",
|
||||
'help_redundancy' => "Redundancy is the duplication of information in the QR code to correct errors during decoding. A higher rate will produce a bigger QR code, but will have a better chance of being decoded correctly.",
|
||||
'help_margin' => "Number of pixels in each white band around the QR code.",
|
||||
'help_size' => "Image width and height in pixels, without the margin.",
|
||||
'help_content' => "
|
||||
<p>You can encode whatever text you want.</p>
|
||||
<p>Software which decodes these QR codes could suggest to open them with dedicated software, depending on their <a href='https://en.wikipedia.org/wiki/List_of_URI_schemes' hreflang='en' rel='help external noreferrer'>URI scheme</a>.</p>
|
||||
<p>For instance, to open a webpage: <code>https://www.example/</code></p>
|
||||
<p>To send an email: <code>mailto:contact@email.example</code></p>
|
||||
<p>To share geographic coordinates: <code>geo:48.867564,2.364057</code></p>
|
||||
",
|
||||
'help_redundancy' => "Redundancy is the duplication of information in the QR code to correct errors during decoding. A higher rate will produce a bigger QR code, but will have a better chance of being decoded correctly.",
|
||||
'help_margin' => "Number of pixels in each white band around the QR code.",
|
||||
'help_size' => "Image width and height in pixels, without the margin.",
|
||||
|
||||
'button_create' => "Generate",
|
||||
'button_download' => "Save this QR code",
|
||||
'button_create' => "Generate",
|
||||
'button_download' => "Save this QR code",
|
||||
|
||||
'title_showOnlyQR' => "Show this QR code only",
|
||||
'title_showOnlyQR' => "Show this QR code only",
|
||||
|
||||
'alt_QR_before' => 'QR code meaning "',
|
||||
'alt_QR_after' => '"',
|
||||
'alt_QR_before' => 'QR code meaning "',
|
||||
'alt_QR_after' => '"',
|
||||
|
||||
'metaText_qr' => "
|
||||
<h3>What's a QR code?</h3>
|
||||
A QR code is a 2 dimensional barcode in which text is written in binary. It can be decoded with a device equipped with a photo sensor and an adequate software.
|
||||
<a href='https://en.wikipedia.org/wiki/QR_code' hreflang='en' rel='help external noreferrer'>QR code on Wikipedia</a>.
|
||||
",
|
||||
'metaText_legal' => "LibreQR " . LIBREQR_VERSION . " is a free software whose <a href='https://code.antopie.org/miraty/libreqr/' rel='external noreferrer'>source code</a> is available under the terms of the <abbr title='GNU Affero General Public License version 3 or any later version'><a href='LICENSE.html' hreflang='en' rel='license'>AGPLv3</a>+</abbr>.",
|
||||
'metaText_qr' => "
|
||||
<h3>What's a QR code?</h3>
|
||||
A QR code is a 2 dimensional barcode in which text is written in binary. It can be decoded with a device equipped with a photo sensor and an adequate software.
|
||||
<a href='https://en.wikipedia.org/wiki/QR_code' hreflang='en' rel='help external noreferrer'>QR code on Wikipedia</a>.
|
||||
",
|
||||
'metaText_legal' => "LibreQR " . LIBREQR_VERSION . " is a free software whose <a href='https://code.antopie.org/miraty/libreqr/' rel='external noreferrer'>source code</a> is available under the terms of the <abbr title='GNU Affero General Public License version 3 or any later version'><a href='LICENSE.html' hreflang='en' rel='license'>AGPLv3</a>+</abbr>.",
|
||||
);
|
||||
|
|
|
@ -1,41 +1,41 @@
|
|||
<?php // This file is part of LibreQR, which is distributed under the GNU AGPLv3+ license
|
||||
$loc = array(
|
||||
'subtitle' => "Générer des codes QR",
|
||||
'description' => "Générer des codes QR librement. Choix du contenu, de la taille, des couleurs…",
|
||||
'subtitle' => "Générer des codes QR",
|
||||
'description' => "Générer des codes QR librement. Choix du contenu, de la taille, des couleurs…",
|
||||
|
||||
'label_content' => "Texte à encoder",
|
||||
'label_redundancy' => "Taux de redondance",
|
||||
'label_margin' => "Taille de la marge",
|
||||
'label_size' => "Taille de l'image",
|
||||
'label_bgColor' => "Couleur de fond",
|
||||
'label_mainColor' => "Couleur de premier plan",
|
||||
'label_content' => "Texte à encoder",
|
||||
'label_redundancy' => "Taux de redondance",
|
||||
'label_margin' => "Taille de la marge",
|
||||
'label_size' => "Taille de l'image",
|
||||
'label_bgColor' => "Couleur de fond",
|
||||
'label_mainColor' => "Couleur de premier plan",
|
||||
|
||||
'placeholder' => "Entrez le texte à encoder dans le code QR",
|
||||
'placeholder_pixels' => "automatique",
|
||||
'placeholder' => "Entrez le texte à encoder dans le code QR",
|
||||
'placeholder_pixels' => "automatique",
|
||||
|
||||
'help_content' => "
|
||||
<p>Vous pouvez encoder ce que vous voulez sous forme de texte.</p>
|
||||
<p>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' hreflang='fr' rel='help external noreferrer'>schéma d'URI</a>.</p>
|
||||
<p>Par exemple, pour ouvrir une page Web : <code>https://www.example/</code></p>
|
||||
<p>Pour envoyer un mail : <code>mailto:contact@email.example</code></p>
|
||||
<p>Pour partager des coordonnées géographique : <code>geo:48.867564,2.364057</code></p>
|
||||
",
|
||||
'help_redundancy' => "La redondance est la duplication 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.",
|
||||
'help_margin' => "Nombre de pixels de chaque bande blanche autour du code QR.",
|
||||
'help_size' => "Largeur et hauteur de l'image en pixels, sans la marge.",
|
||||
'help_content' => "
|
||||
<p>Vous pouvez encoder ce que vous voulez sous forme de texte.</p>
|
||||
<p>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' hreflang='fr' rel='help external noreferrer'>schéma d'URI</a>.</p>
|
||||
<p>Par exemple, pour ouvrir une page Web : <code>https://www.example/</code></p>
|
||||
<p>Pour envoyer un mail : <code>mailto:contact@email.example</code></p>
|
||||
<p>Pour partager des coordonnées géographique : <code>geo:48.867564,2.364057</code></p>
|
||||
",
|
||||
'help_redundancy' => "La redondance est la duplication 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.",
|
||||
'help_margin' => "Nombre de pixels de chaque bande blanche autour du code QR.",
|
||||
'help_size' => "Largeur et hauteur de l'image en pixels, sans la marge.",
|
||||
|
||||
'button_create' => "Générer",
|
||||
'button_download' => "Enregistrer ce code QR",
|
||||
'button_create' => "Générer",
|
||||
'button_download' => "Enregistrer ce code QR",
|
||||
|
||||
'title_showOnlyQR' => "Afficher uniquement ce code QR",
|
||||
'title_showOnlyQR' => "Afficher uniquement ce code QR",
|
||||
|
||||
'alt_QR_before' => "Code QR signifiant « ",
|
||||
'alt_QR_after' => " »",
|
||||
'alt_QR_before' => "Code QR signifiant « ",
|
||||
'alt_QR_after' => " »",
|
||||
|
||||
'metaText_qr' => "
|
||||
<h3>Qu'est-ce qu'un code QR ?</h3>
|
||||
Un code QR est un code-barres en 2 dimensions dans lequel du texte est inscrit en binaire. 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' hreflang='fr' rel='help external noreferrer'>Code QR sur Wikipédia</a>.
|
||||
",
|
||||
'metaText_legal' => "LibreQR " . LIBREQR_VERSION . " est un logiciel libre dont le <a href='https://code.antopie.org/miraty/libreqr/' rel='external noreferrer'>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' hreflang='en' rel='license'>AGPLv3</a>+</abbr>.",
|
||||
'metaText_qr' => "
|
||||
<h3>Qu'est-ce qu'un code QR ?</h3>
|
||||
Un code QR est un code-barres en 2 dimensions dans lequel du texte est inscrit en binaire. 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' hreflang='fr' rel='help external noreferrer'>Code QR sur Wikipédia</a>.
|
||||
",
|
||||
'metaText_legal' => "LibreQR " . LIBREQR_VERSION . " est un logiciel libre dont le <a href='https://code.antopie.org/miraty/libreqr/' rel='external noreferrer'>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' hreflang='en' rel='license'>AGPLv3</a>+</abbr>.",
|
||||
);
|
||||
|
|
|
@ -1,41 +1,41 @@
|
|||
<?php // This file is part of LibreQR, which is distributed under the GNU AGPLv3+ license
|
||||
$loc = array(
|
||||
'subtitle' => "Generator de còdis QR",
|
||||
'description' => "Generatz de còdis QR liurament. Causissètz lo contengut, la talha, las colors…",
|
||||
'subtitle' => "Generator de còdis QR",
|
||||
'description' => "Generatz de còdis QR liurament. Causissètz lo contengut, la talha, las colors…",
|
||||
|
||||
'label_content' => "Tèxt de codar",
|
||||
'label_redundancy' => "Taus de redondància",
|
||||
'label_margin' => "Talha del marge",
|
||||
'label_size' => "Talha de l’imatge",
|
||||
'label_bgColor' => "Color de fons",
|
||||
'label_mainColor' => "Color del primièr plan",
|
||||
'label_content' => "Tèxt de codar",
|
||||
'label_redundancy' => "Taus de redondància",
|
||||
'label_margin' => "Talha del marge",
|
||||
'label_size' => "Talha de l’imatge",
|
||||
'label_bgColor' => "Color de fons",
|
||||
'label_mainColor' => "Color del primièr plan",
|
||||
|
||||
'placeholder' => "Dintratz lo tèxt de codar en còdi QR",
|
||||
'placeholder_pixels' => "auto",
|
||||
'placeholder' => "Dintratz lo tèxt de codar en còdi QR",
|
||||
'placeholder_pixels' => "auto",
|
||||
|
||||
'help_content' => "
|
||||
<p>Podètz pas que codar lo tèxt que volètz.</p>
|
||||
<p>Los logicials que deschifran los còdis QR poirián suggerir de los dubrir dins de logicials especials, segon lor <a href='https://en.wikipedia.org/wiki/List_of_URI_schemes' hreflang='en' rel='help external noreferrer'>esquèma URI</a>.</p>
|
||||
<p>Per exemple, per dubrir la pagina web : https://www.example/</p>
|
||||
<p>Per enviar un corrièl : mailto:contact@email.example</p>
|
||||
<p>Per partejar de coordonadas geograficas : geo:48.867564,2.364057</p>
|
||||
",
|
||||
'help_redundancy' => "La redondància es la duplicacion de las informacions al còdi QR per dire de corregir las errors pendent lo deschiframent. Un taux mai naut produirà un còdi mai grand, mas serà de melhor deschifrar corrèctament.",
|
||||
'help_margin' => "Nombre de pixèls de la banda blanca a l’entorn del còdi QR.",
|
||||
'help_size' => "Per quant deu la dimensions de l’imatge èsser multiplicada ?",
|
||||
'help_content' => "
|
||||
<p>Podètz pas que codar lo tèxt que volètz.</p>
|
||||
<p>Los logicials que deschifran los còdis QR poirián suggerir de los dubrir dins de logicials especials, segon lor <a href='https://en.wikipedia.org/wiki/List_of_URI_schemes' hreflang='en' rel='help external noreferrer'>esquèma URI</a>.</p>
|
||||
<p>Per exemple, per dubrir la pagina web : https://www.example/</p>
|
||||
<p>Per enviar un corrièl : mailto:contact@email.example</p>
|
||||
<p>Per partejar de coordonadas geograficas : geo:48.867564,2.364057</p>
|
||||
",
|
||||
'help_redundancy' => "La redondància es la duplicacion de las informacions al còdi QR per dire de corregir las errors pendent lo deschiframent. Un taux mai naut produirà un còdi mai grand, mas serà de melhor deschifrar corrèctament.",
|
||||
'help_margin' => "Nombre de pixèls de la banda blanca a l’entorn del còdi QR.",
|
||||
'help_size' => "Per quant deu la dimensions de l’imatge èsser multiplicada ?",
|
||||
|
||||
'button_create' => "Generar",
|
||||
'button_download' => "Telecargar aqueste còdi QR",
|
||||
'button_create' => "Generar",
|
||||
'button_download' => "Telecargar aqueste còdi QR",
|
||||
|
||||
'title_showOnlyQR' => "Mostrar sonque aqueste còdi QR",
|
||||
'title_showOnlyQR' => "Mostrar sonque aqueste còdi QR",
|
||||
|
||||
'alt_QR_before' => 'Significacion de còdi QR"',
|
||||
'alt_QR_after' => '"',
|
||||
'alt_QR_before' => 'Significacion de còdi QR"',
|
||||
'alt_QR_after' => '"',
|
||||
|
||||
'metaText_qr' => "
|
||||
<h3>Qu’es aquò un còdi QR ?</h3>
|
||||
Un còdi QR es un còdi de barras en doas dimensions dins lo qual lo tèxt es escrich en binari. Un aparalh equipat d’un capteur optic pòt lo deschifrar, amb l’aplicacion que cal.
|
||||
<a lang='ca' href='https://ca.wikipedia.org/wiki/Codi_QR' hreflang='ca' rel='help external noreferrer'>Còdi QR a la Wikipèdia</a>.
|
||||
",
|
||||
'metaText_legal' => "LibreQR " . LIBREQR_VERSION . " es un logicial liure que son <a href='https://code.antopie.org/miraty/libreqr/' rel='external noreferrer'>còdi font</a> es disponible jols tèrmes de la licéncia <abbr title='GNU Affero General Public License version 3 or any later version'><a href='LICENSE.html' hreflang='en' rel='license'>AGPLv3</a>+</abbr>.",
|
||||
'metaText_qr' => "
|
||||
<h3>Qu’es aquò un còdi QR ?</h3>
|
||||
Un còdi QR es un còdi de barras en doas dimensions dins lo qual lo tèxt es escrich en binari. Un aparalh equipat d’un capteur optic pòt lo deschifrar, amb l’aplicacion que cal.
|
||||
<a lang='ca' href='https://ca.wikipedia.org/wiki/Codi_QR' hreflang='ca' rel='help external noreferrer'>Còdi QR a la Wikipèdia</a>.
|
||||
",
|
||||
'metaText_legal' => "LibreQR " . LIBREQR_VERSION . " es un logicial liure que son <a href='https://code.antopie.org/miraty/libreqr/' rel='external noreferrer'>còdi font</a> es disponible jols tèrmes de la licéncia <abbr title='GNU Affero General Public License version 3 or any later version'><a href='LICENSE.html' hreflang='en' rel='license'>AGPLv3</a>+</abbr>.",
|
||||
);
|
||||
|
|
|
@ -1,32 +1,32 @@
|
|||
<?php // This file is part of LibreQR, which is distributed under the GNU AGPLv3+ license
|
||||
$loc = array(
|
||||
'subtitle' => "subtitle",
|
||||
'description' => "description",
|
||||
'subtitle' => "subtitle",
|
||||
'description' => "description",
|
||||
|
||||
'label_content' => "label_content",
|
||||
'label_redundancy' => "label_redundancy",
|
||||
'label_margin' => "label_margin",
|
||||
'label_size' => "label_size",
|
||||
'label_bgColor' => "label_bgColor",
|
||||
'label_mainColor' => "label_mainColor",
|
||||
'label_content' => "label_content",
|
||||
'label_redundancy' => "label_redundancy",
|
||||
'label_margin' => "label_margin",
|
||||
'label_size' => "label_size",
|
||||
'label_bgColor' => "label_bgColor",
|
||||
'label_mainColor' => "label_mainColor",
|
||||
|
||||
'placeholder' => "placeholder",
|
||||
'placeholder' => "placeholder",
|
||||
|
||||
'value_default' => "value_default",
|
||||
'value_default' => "value_default",
|
||||
|
||||
'help_content' => "help_content",
|
||||
'help_redundancy' => "help_redundancy",
|
||||
'help_margin' => "help_margin",
|
||||
'help_size' => "help_size",
|
||||
'help_content' => "help_content",
|
||||
'help_redundancy' => "help_redundancy",
|
||||
'help_margin' => "help_margin",
|
||||
'help_size' => "help_size",
|
||||
|
||||
'button_create' => "button_create",
|
||||
'button_download' => "button_download",
|
||||
'button_create' => "button_create",
|
||||
'button_download' => "button_download",
|
||||
|
||||
'title_showOnlyQR' => "title_showOnlyQR",
|
||||
'title_showOnlyQR' => "title_showOnlyQR",
|
||||
|
||||
'alt_QR_before' => "alt_QR_before",
|
||||
'alt_QR_after' => "alt_QR_after",
|
||||
'alt_QR_before' => "alt_QR_before",
|
||||
'alt_QR_after' => "alt_QR_after",
|
||||
|
||||
'metaText_qr' => "metaText_qr",
|
||||
'metaText_legal' => "metaText_legal",
|
||||
'metaText_qr' => "metaText_qr",
|
||||
'metaText_legal' => "metaText_legal",
|
||||
);
|
||||
|
|
591
style.less
591
style.less
|
@ -5,456 +5,457 @@
|
|||
@import "themes/@{theme}/logo.less";
|
||||
|
||||
:root {
|
||||
@media @light {
|
||||
color-scheme: light;
|
||||
}
|
||||
@media @dark {
|
||||
color-scheme: dark;
|
||||
}
|
||||
@media @light {
|
||||
color-scheme: light;
|
||||
}
|
||||
@media @dark {
|
||||
color-scheme: dark;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: system-ui, sans-serif;
|
||||
font-family: system-ui, sans-serif;
|
||||
|
||||
scrollbar-width: auto;
|
||||
scrollbar-width: auto;
|
||||
|
||||
@media @light {
|
||||
scrollbar-color: @text-light @bg-light;
|
||||
}
|
||||
@media @light {
|
||||
scrollbar-color: @text-light @bg-light;
|
||||
}
|
||||
|
||||
@media @dark {
|
||||
scrollbar-color: @text-dark @bg-dark;
|
||||
}
|
||||
@media @dark {
|
||||
scrollbar-color: @text-dark @bg-dark;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
max-width: 812px;
|
||||
height: 100%;
|
||||
max-width: 812px;
|
||||
height: 100%;
|
||||
|
||||
margin: 0px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin: 0px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
font-weight: normal;
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
font-size: 20px;
|
||||
|
||||
@media @light {
|
||||
color: @text-light;
|
||||
background-color: @bg-light;
|
||||
}
|
||||
@media @light {
|
||||
color: @text-light;
|
||||
background-color: @bg-light;
|
||||
}
|
||||
|
||||
@media @dark {
|
||||
color: @text-dark;
|
||||
background-color: @bg-dark;
|
||||
}
|
||||
@media @dark {
|
||||
color: @text-dark;
|
||||
background-color: @bg-dark;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
|
||||
@media @light {
|
||||
color: @text-light;
|
||||
}
|
||||
@media @light {
|
||||
color: @text-light;
|
||||
}
|
||||
|
||||
@media @dark {
|
||||
color: @text-dark;
|
||||
}
|
||||
@media @dark {
|
||||
color: @text-dark;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: monospace;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.helpText {
|
||||
margin: 5px 0px 0px 0px;
|
||||
padding: 5px;
|
||||
border-radius: 10px;
|
||||
border-width: 2px;
|
||||
border-style: dashed;
|
||||
text-align: left;
|
||||
margin: 5px 0px 0px 0px;
|
||||
padding: 5px;
|
||||
border-radius: 10px;
|
||||
border-width: 2px;
|
||||
border-style: dashed;
|
||||
text-align: left;
|
||||
|
||||
@media @light {
|
||||
background-color: @bgHelp-light;
|
||||
border-color: @borderHelp-light;
|
||||
}
|
||||
@media @light {
|
||||
background-color: @bgHelp-light;
|
||||
border-color: @borderHelp-light;
|
||||
}
|
||||
|
||||
@media @dark {
|
||||
background-color: @bgHelp-dark;
|
||||
border-color: @borderHelp-dark;
|
||||
}
|
||||
@media @dark {
|
||||
background-color: @bgHelp-dark;
|
||||
border-color: @borderHelp-dark;
|
||||
}
|
||||
|
||||
& p {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 8px;
|
||||
&:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
& p {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 8px;
|
||||
&:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#sideParams {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
& .param {
|
||||
max-width: 270px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
& .param {
|
||||
max-width: 270px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
summary {
|
||||
margin-left: 20px;
|
||||
cursor: help;
|
||||
margin-left: 20px;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
#qrCode {
|
||||
max-width: 94%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 94%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
|
||||
@width: 2px;
|
||||
@lenght: 16px;
|
||||
padding: @width;
|
||||
@width: 2px;
|
||||
@lenght: 16px;
|
||||
padding: @width;
|
||||
|
||||
&.needLightContrast {
|
||||
@media @light {
|
||||
background:
|
||||
linear-gradient(to right, @borderQr-light @width, transparent 0px) 0 0,
|
||||
linear-gradient(to right, @borderQr-light @width, transparent 0px) 0 100%,
|
||||
linear-gradient(to left, @borderQr-light @width, transparent 0px) 100% 0,
|
||||
linear-gradient(to left, @borderQr-light @width, transparent 0px) 100% 100%,
|
||||
linear-gradient(to bottom, @borderQr-light @width, transparent 0px) 0 0,
|
||||
linear-gradient(to bottom, @borderQr-light @width, transparent 0px) 100% 0,
|
||||
linear-gradient(to top, @borderQr-light @width, transparent 0px) 0 100%,
|
||||
linear-gradient(to top, @borderQr-light @width, transparent 0px) 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: @lenght @lenght;
|
||||
}
|
||||
}
|
||||
&.needLightContrast {
|
||||
@media @light {
|
||||
background:
|
||||
linear-gradient(to right, @borderQr-light @width, transparent 0px) 0 0,
|
||||
linear-gradient(to right, @borderQr-light @width, transparent 0px) 0 100%,
|
||||
linear-gradient(to left, @borderQr-light @width, transparent 0px) 100% 0,
|
||||
linear-gradient(to left, @borderQr-light @width, transparent 0px) 100% 100%,
|
||||
linear-gradient(to bottom, @borderQr-light @width, transparent 0px) 0 0,
|
||||
linear-gradient(to bottom, @borderQr-light @width, transparent 0px) 100% 0,
|
||||
linear-gradient(to top, @borderQr-light @width, transparent 0px) 0 100%,
|
||||
linear-gradient(to top, @borderQr-light @width, transparent 0px) 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: @lenght @lenght;
|
||||
}
|
||||
}
|
||||
|
||||
&.needDarkContrast {
|
||||
@media @dark {
|
||||
background:
|
||||
linear-gradient(to right, @borderQr-dark @width, transparent 0px) 0 0,
|
||||
linear-gradient(to right, @borderQr-dark @width, transparent 0px) 0 100%,
|
||||
linear-gradient(to left, @borderQr-dark @width, transparent 0px) 100% 0,
|
||||
linear-gradient(to left, @borderQr-dark @width, transparent 0px) 100% 100%,
|
||||
linear-gradient(to bottom, @borderQr-dark @width, transparent 0px) 0 0,
|
||||
linear-gradient(to bottom, @borderQr-dark @width, transparent 0px) 100% 0,
|
||||
linear-gradient(to top, @borderQr-dark @width, transparent 0px) 0 100%,
|
||||
linear-gradient(to top, @borderQr-dark @width, transparent 0px) 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: @lenght @lenght;
|
||||
}
|
||||
}
|
||||
&.needDarkContrast {
|
||||
@media @dark {
|
||||
background:
|
||||
linear-gradient(to right, @borderQr-dark @width, transparent 0px) 0 0,
|
||||
linear-gradient(to right, @borderQr-dark @width, transparent 0px) 0 100%,
|
||||
linear-gradient(to left, @borderQr-dark @width, transparent 0px) 100% 0,
|
||||
linear-gradient(to left, @borderQr-dark @width, transparent 0px) 100% 100%,
|
||||
linear-gradient(to bottom, @borderQr-dark @width, transparent 0px) 0 0,
|
||||
linear-gradient(to bottom, @borderQr-dark @width, transparent 0px) 100% 0,
|
||||
linear-gradient(to top, @borderQr-dark @width, transparent 0px) 0 100%,
|
||||
linear-gradient(to top, @borderQr-dark @width, transparent 0px) 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: @lenght @lenght;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.centered {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 3px 10px 3px 10px;
|
||||
text-decoration: none;
|
||||
padding: 3px 10px 3px 10px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
padding-top: 12px;
|
||||
height: 64px;
|
||||
text-align: center;
|
||||
padding-top: 12px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
#linkTitles::before {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
content: "";
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
content: "";
|
||||
|
||||
background-repeat: no-repeat;
|
||||
@media @light {
|
||||
background-image: var(--logo-light);
|
||||
}
|
||||
background-repeat: no-repeat;
|
||||
@media @light {
|
||||
background-image: var(--logo-light);
|
||||
}
|
||||
|
||||
@media @dark {
|
||||
background-image: var(--logo-dark);
|
||||
}
|
||||
@media @dark {
|
||||
background-image: var(--logo-dark);
|
||||
}
|
||||
}
|
||||
|
||||
#titles {
|
||||
margin-left: 2%;
|
||||
margin-left: 2%;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0px;
|
||||
font-weight: normal;
|
||||
margin: 0px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 29px;
|
||||
font-size: 29px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
#linkTitles {
|
||||
text-align: left;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
text-align: left;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#downloadQR {
|
||||
margin-top: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#showOnlyQR {
|
||||
margin-top: 30px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.param {
|
||||
padding: 4px;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
padding: 4px;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
::selection {
|
||||
|
||||
@media @light {
|
||||
color: @bg-light;
|
||||
background-color: @text-light;
|
||||
}
|
||||
@media @light {
|
||||
color: @bg-light;
|
||||
background-color: @text-light;
|
||||
}
|
||||
|
||||
@media @dark {
|
||||
color: @bg-dark;
|
||||
background-color: @text-dark;
|
||||
}
|
||||
@media @dark {
|
||||
color: @bg-dark;
|
||||
background-color: @text-dark;
|
||||
}
|
||||
}
|
||||
|
||||
label[for=txt] summary {
|
||||
margin-left: 22px;
|
||||
margin-left: 22px;
|
||||
}
|
||||
|
||||
#colors {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
text-align: center;
|
||||
|
||||
& .param {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
& .param {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.metaText {
|
||||
padding: 6px;
|
||||
@media @light {
|
||||
color: @text-light;
|
||||
}
|
||||
padding: 6px;
|
||||
@media @light {
|
||||
color: @text-light;
|
||||
}
|
||||
|
||||
@media @dark {
|
||||
color: @text-dark;
|
||||
}
|
||||
@media @dark {
|
||||
color: @text-dark;
|
||||
}
|
||||
|
||||
& a, a:visited {
|
||||
text-decoration: underline;
|
||||
@media @light {
|
||||
color: @text-light;
|
||||
}
|
||||
& a, a:visited {
|
||||
text-decoration: underline;
|
||||
@media @light {
|
||||
color: @text-light;
|
||||
}
|
||||
|
||||
@media @dark {
|
||||
color: @text-dark;
|
||||
}
|
||||
}
|
||||
@media @dark {
|
||||
color: @text-dark;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
footer {
|
||||
font-size: 16px;
|
||||
margin-top: auto;
|
||||
padding-top: 10px;
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
margin-top: auto;
|
||||
padding-top: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#info {
|
||||
font-size: 16px;
|
||||
margin: 0px;
|
||||
font-size: 16px;
|
||||
margin: 0px;
|
||||
|
||||
& h3 {
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
& h3 {
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Inputs */
|
||||
|
||||
#redundancy, #margin, #txt, #size, input[type=color], input[type=submit], .button {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-radius: 10px;
|
||||
font-size: 20px;
|
||||
padding-left: 10px;
|
||||
font-weight: normal;
|
||||
transition: border-color 0.1s ease;
|
||||
margin: 6px;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-radius: 10px;
|
||||
font-size: 20px;
|
||||
padding-left: 10px;
|
||||
font-weight: normal;
|
||||
transition: border-color 0.1s ease;
|
||||
margin: 6px;
|
||||
|
||||
@media @light {
|
||||
color: @text-light;
|
||||
background-color: @bgField-light;
|
||||
border-color: @border-light;
|
||||
}
|
||||
@media @light {
|
||||
color: @text-light;
|
||||
background-color: @bgField-light;
|
||||
border-color: @border-light;
|
||||
}
|
||||
|
||||
@media @dark {
|
||||
color: @text-dark;
|
||||
background-color: @bgField-dark;
|
||||
border-color: @border-dark;
|
||||
}
|
||||
@media @dark {
|
||||
color: @text-dark;
|
||||
background-color: @bgField-dark;
|
||||
border-color: @border-dark;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-width: 3px;
|
||||
margin: 5px;
|
||||
border-style: solid;
|
||||
&:hover {
|
||||
border-width: 3px;
|
||||
margin: 5px;
|
||||
border-style: solid;
|
||||
|
||||
@media @light {
|
||||
border-color: @borderHover-light;
|
||||
}
|
||||
@media @light {
|
||||
border-color: @borderHover-light;
|
||||
}
|
||||
|
||||
@media @dark {
|
||||
border-color: @borderHover-dark;
|
||||
}
|
||||
}
|
||||
@media @dark {
|
||||
border-color: @borderHover-dark;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-width: 4px;
|
||||
margin: 4px;
|
||||
border-style: solid;
|
||||
outline: none;
|
||||
&:focus {
|
||||
border-width: 4px;
|
||||
margin: 4px;
|
||||
border-style: solid;
|
||||
outline: none;
|
||||
|
||||
@media @light {
|
||||
border-color: @borderFocus-light;
|
||||
}
|
||||
@media @light {
|
||||
border-color: @borderFocus-light;
|
||||
}
|
||||
|
||||
@media @dark {
|
||||
border-color: @borderFocus-dark;
|
||||
}
|
||||
}
|
||||
@media @dark {
|
||||
border-color: @borderFocus-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#redundancy {
|
||||
width: 250px;
|
||||
height: 44px;
|
||||
&:hover {
|
||||
width: 252px;
|
||||
height: 46px;
|
||||
}
|
||||
&:focus {
|
||||
width: 254px;
|
||||
height: 48px;
|
||||
}
|
||||
width: 250px;
|
||||
height: 44px;
|
||||
&:hover {
|
||||
width: 252px;
|
||||
height: 46px;
|
||||