Merge main and body
This commit is contained in:
Miraty
parent
108da9d050
commit
f6dbce3b97
294
index.php
294
index.php
@ -124,180 +124,176 @@ if (
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<main>
|
<header>
|
||||||
|
<a id="linkTitles" href="./">
|
||||||
|
<div id="titles">
|
||||||
|
<h1>LibreQR</h1>
|
||||||
|
<h2><?= $loc['subtitle'] ?></h2>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</header>
|
||||||
|
|
||||||
<header>
|
<form method="post" action="./#output">
|
||||||
<a id="linkTitles" href="./">
|
|
||||||
<div id="titles">
|
|
||||||
<h1>LibreQR</h1>
|
|
||||||
<h2><?= $loc['subtitle'] ?></h2>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<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>
|
<details>
|
||||||
<summary><label for="txt"><?= $loc['label_content'] ?></label></summary>
|
<summary><label for="redundancy"><?= $loc['label_redundancy'] ?></label></summary>
|
||||||
<div class="helpText">
|
<p class="helpText">
|
||||||
<?= $loc['help_content'] ?>
|
<?= $loc['help_redundancy'] ?>
|
||||||
</div>
|
</p>
|
||||||
</details>
|
</details>
|
||||||
<textarea rows="8" required="" id="txt" placeholder="<?= $loc['placeholder'] ?>" name="txt"><?= htmlspecialchars($params['txt']) ?></textarea>
|
<select id="redundancy" name="redundancy">
|
||||||
</div>
|
<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>
|
||||||
<div id="sideParams">
|
<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>
|
||||||
<div class="param">
|
</select>
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="param">
|
<div class="param">
|
||||||
<label for="mainColor"><?= $loc['label_mainColor'] ?></label>
|
<details>
|
||||||
<div class="inputColorContainer">
|
<summary><label for="margin"><?= $loc['label_margin'] ?></label></summary>
|
||||||
<input type="color" name="mainColor" id="mainColor" value="#<?= htmlspecialchars($params['mainColor']) ?>">
|
<p class="helpText">
|
||||||
</div>
|
<?= $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>
|
</div>
|
||||||
|
|
||||||
<div class="centered">
|
<div class="param">
|
||||||
<input class="button" type="submit" value="<?= $loc['button_create'] ?>" />
|
<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>
|
</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(
|
<?php } ?>
|
||||||
'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";
|
<footer>
|
||||||
$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="info" class="metaText">
|
||||||
|
<?= $loc['metaText_qr'] ?>
|
||||||
<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>
|
</section>
|
||||||
|
|
||||||
<?php } ?>
|
<?php if (CUSTOM_TEXT_ENABLED) { ?>
|
||||||
|
|
||||||
<footer>
|
|
||||||
|
|
||||||
<section id="info" class="metaText">
|
|
||||||
<?= $loc['metaText_qr'] ?>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<?php if (CUSTOM_TEXT_ENABLED) { ?>
|
|
||||||
<section class="metaText">
|
|
||||||
<?= CUSTOM_TEXT ?>
|
|
||||||
</section>
|
|
||||||
<?php } ?>
|
|
||||||
|
|
||||||
<section class="metaText">
|
<section class="metaText">
|
||||||
<?= $loc['metaText_legal'] ?>
|
<?= CUSTOM_TEXT ?>
|
||||||
</section>
|
</section>
|
||||||
|
<?php } ?>
|
||||||
|
|
||||||
</footer>
|
<section class="metaText">
|
||||||
|
<?= $loc['metaText_legal'] ?>
|
||||||
|
</section>
|
||||||
|
|
||||||
</main>
|
</footer>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
25
style.less
25
style.less
@ -32,10 +32,18 @@ html {
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
width: 814px;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
@media @light {
|
@media @light {
|
||||||
color: @text-light;
|
color: @text-light;
|
||||||
@ -170,15 +178,6 @@ summary {
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
width: 814px;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
header {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding-top: 12px;
|
padding-top: 12px;
|
||||||
@ -230,10 +229,8 @@ h2 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.param {
|
.param {
|
||||||
padding: 10px;
|
padding: 4px;
|
||||||
padding-left: 0px;
|
|
||||||
margin-left: 0px;
|
margin-left: 0px;
|
||||||
padding-right: 0px;
|
|
||||||
margin-right: 0px;
|
margin-right: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -458,7 +455,7 @@ input[type=submit] {
|
|||||||
|
|
||||||
@media (max-width: 850px) {
|
@media (max-width: 850px) {
|
||||||
|
|
||||||
main {
|
body {
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user