Merge main and body
This commit is contained in:
parent
108da9d050
commit
f6dbce3b97
294
index.php
294
index.php
|
|
@ -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
25
style.less
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue