Use tabs instead of spaces, better indentation

This commit is contained in:
Miraty 2022-05-30 20:16:36 +02:00
parent 147a25c93f
commit 68cbec8a8d
25 changed files with 1645 additions and 1674 deletions

File diff suppressed because it is too large Load Diff

View File

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

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

View File

@ -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>.",
);

View File

@ -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>.",
);

View File

@ -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 limatge",
'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 limatge",
'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 lentorn del còdi QR.",
'help_size' => "Per quant deu la dimensions de limatge è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 lentorn del còdi QR.",
'help_size' => "Per quant deu la dimensions de limatge è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>Ques 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 dun capteur optic pòt lo deschifrar, amb laplicacion 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>Ques 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 dun capteur optic pòt lo deschifrar, amb laplicacion 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>.",
);

View File

@ -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",
);

View File

@ -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;
}
&:focus {
width: 254px;
height: 48px;
}
}
input[type=color] {
height: 60px;
width: 84px;
padding: 5px;
&:hover {
height: 62px;
width: 86px;
}
&:focus {
<