beenull/nibbleqr
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge main and body

Browse source
This commit is contained in:
Miraty 2022-03-03 18:26:21 +01:00
parent 108da9d050
commit f6dbce3b97
2 changed files with 156 additions and 163 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

294
index.php
View file

@ -124,180 +124,176 @@ if (
<body>
<main>
<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 id="firstWrapper">
<div id="firstWrapper">
<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="8" required="" id="txt" placeholder="<?= $loc['placeholder'] ?>" name="txt"><?= htmlspecialchars($params['txt']) ?></textarea>
</div>
<div class="param" id="txtParam">
<div id="sideParams">
<div class="param">
<details>
<summary><label for="txt"><?= $loc['label_content'] ?></label></summary>
<div class="helpText">
<?= $loc['help_content'] ?>
</div>
<summary><label for="redundancy"><?= $loc['label_redundancy'] ?></label></summary>
<p class="helpText">
<?= $loc['help_redundancy'] ?>
</p>
</details>
<textarea rows="8" required="" id="txt" placeholder="<?= $loc['placeholder'] ?>" name="txt"><?= htmlspecialchars($params['txt']) ?></textarea>
</div>
<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="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>
</div>
<div id="colors">
<div class="param">
<label for="bgColor"><?= $loc['label_bgColor'] ?></label>
<div class="inputColorContainer">
<input type="color" name="bgColor" id="bgColor" value="#<?= htmlspecialchars($params['bgColor']) ?>">
</div>
<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">
<label for="mainColor"><?= $loc['label_mainColor'] ?></label>
<div class="inputColorContainer">
<input type="color" name="mainColor" id="mainColor" value="#<?= htmlspecialchars($params['mainColor']) ?>">
</div>
<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>
</div>
<div id="colors">
<div class="param">
<label for="bgColor"><?= $loc['label_bgColor'] ?></label>
<div class="inputColorContainer">
<input type="color" name="bgColor" id="bgColor" value="#<?= htmlspecialchars($params['bgColor']) ?>">
</div>
</div>
<div class="centered">
<input class="button" type="submit" value="<?= $loc['button_create'] ?>" />
<div class="param">
<label for="mainColor"><?= $loc['label_mainColor'] ?></label>
<div class="inputColorContainer">
<input type="color" name="mainColor" id="mainColor" value="#<?= htmlspecialchars($params['mainColor']) ?>">
</div>
</div>
</div>
<div class="centered">
<input class="button" type="submit" value="<?= $loc['button_create'] ?>" />
</div>
</form>
<?php
if ($validFormSubmitted) {
$rgbBgColor = array(
'r' => hexdec(substr($params['bgColor'],0,2)),
'g' => hexdec(substr($params['bgColor'],2,2)),
'b' => hexdec(substr($params['bgColor'],4,2)),
);
require "barcode-generator/Utils/QrCode.php";
$qrCode = new QrCode();
if (!is_null($params['margin']))
$qrCode->setPadding($params['margin']);
$qrCode
->setText($params['txt'])
->setSize($params['size'])
->setErrorCorrection($params['redundancy'])
->setForegroundColor(array(
'r' => hexdec(substr($params['mainColor'],0,2)),
'g' => hexdec(substr($params['mainColor'],2,2)),
'b' => hexdec(substr($params['mainColor'],4,2)),
))
->setBackgroundColor($rgbBgColor)
->setImageType(QrCode::IMAGE_TYPE_PNG);
$dataUri = $qrCode->getDataUri();
$qrSize = $qrCode->getSize() + 2 * $qrCode->getPadding();
?>
<section id="output">
<div class="centered" id="downloadQR">
<a href="<?= $dataUri ?>" class="button" download="<?= htmlspecialchars($params['txt']); ?>.png"><?= $loc['button_download'] ?></a>
</div>
</form>
<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
<?php
// 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)));
if ($validFormSubmitted) {
// 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>
$rgbBgColor = array(
'r' => hexdec(substr($params['bgColor'],0,2)),
'g' => hexdec(substr($params['bgColor'],2,2)),
'b' => hexdec(substr($params['bgColor'],4,2)),
);
<?php } ?>
require "barcode-generator/Utils/QrCode.php";
$qrCode = new QrCode();
if (!is_null($params['margin']))
$qrCode->setPadding($params['margin']);
$qrCode
->setText($params['txt'])
->setSize($params['size'])
->setErrorCorrection($params['redundancy'])
->setForegroundColor(array(
'r' => hexdec(substr($params['mainColor'],0,2)),
'g' => hexdec(substr($params['mainColor'],2,2)),
'b' => hexdec(substr($params['mainColor'],4,2)),
))
->setBackgroundColor($rgbBgColor)
->setImageType(QrCode::IMAGE_TYPE_PNG);
$dataUri = $qrCode->getDataUri();
$qrSize = $qrCode->getSize() + 2 * $qrCode->getPadding();
<footer>
?>
<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
// 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)));
// 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 id="info" class="metaText">
<?= $loc['metaText_qr'] ?>
</section>
<?php } ?>
<footer>
<section id="info" class="metaText">
<?= $loc['metaText_qr'] ?>
</section>
<?php if (CUSTOM_TEXT_ENABLED) { ?>
<section class="metaText">
<?= CUSTOM_TEXT ?>
</section>
<?php } ?>
<?php if (CUSTOM_TEXT_ENABLED) { ?>
<section class="metaText">
<?= $loc['metaText_legal'] ?>
<?= CUSTOM_TEXT ?>
</section>
<?php } ?>
</footer>
<section class="metaText">
<?= $loc['metaText_legal'] ?>
</section>
</main>
</footer>
</body>
</html>

25
style.less
View file

@ -32,10 +32,18 @@ html {
}
body {
display: flex;
flex-direction: column;
width: 814px;
height: 100%;
margin: 0px;
margin-left: auto;
margin-right: auto;
font-weight: normal;
font-size: 20px;
height: 100%;
@media @light {
color: @text-light;
@ -170,15 +178,6 @@ summary {
text-decoration: none;
}
main {
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
width: 814px;
height: 100%;
}
header {
text-align: center;
padding-top: 12px;
@ -230,10 +229,8 @@ h2 {
}
.param {
padding: 10px;
padding-left: 0px;
padding: 4px;
margin-left: 0px;
padding-right: 0px;
margin-right: 0px;
}
@ -458,7 +455,7 @@ input[type=submit] {
@media (max-width: 850px) {
main {
body {
width: auto;
}