<div id="qrcode-wrapper">
<div class="center">
<div class="color-me">
<div class="no-resize">
<textarea class="textInput" placeholder="Scrie adresa aici"></textarea>
<div class="generate btn bubble" value="generate">GENEREAZĂ
</div>
<hr>
<label class="fileupload btn bubble">ÎNCARCĂ LOGO
<input id="getnewimage" type="file">
</label>
<hr>
<label id="logosize">ALEGE MĂRIME IMAGINE
<span class="new">30%</span>
</label>
<input id="lsize" type="range" value="30" min="0" max="100" step="5">
<span class="info">RECOMANDAT:
< 30%</span>
<hr>
<label id="qrsize">MĂRIME:
<span class="new">300px</span>
</label>
<input id="size" type="range" value="350" min="100" max="350" step="25">
<span class="info">Recommended: >= 200px</span>
<hr>
</div>
<span class="info">Right click > 'Save image as' pentru a salva codul</span>
<div id="qrcode-result">
</div>
<img style="display:none;" name="datei" width="30" height="auto" id="background" src="" />
</div>
</div>
<div id="preview"></div>
</div>
$background-primary: #fff;
$background-secondary: #fff;
$background-third: #fff;
$font-color-primary: rgb(44, 62, 80);
$btn-color-primary: #2ecc71;
$btn-width: 300px;
$btn-padding: 15px;
$btn-duration: 0.75s;
$btn-transition-style: ease-in-out;
$background-color: linear-gradient(
to bottom left,
$background-primary,
$background-secondary,
$background-third
);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
color: $font-color-primary;
}
textarea,
input {
padding: 10px;
width: 100%;
max-width: 300px;
display: inline-block;
box-sizing: border-box;
}
textarea {
height: 75px;
}
#qrcode-wrapper {
padding: 10px;
min-width: 350px;
max-width: 350px;
height: 100%;
box-sizing: border-box;
margin: auto;
display: table;
overflow: hidden;
.info {
font-size: 11px;
color: rgb(231, 76, 60);
}
hr {
margin: 15px 0px;
border-color: rgb(189, 195, 199);
border-width: 1px;
border-style: solid;
}
img {
width: auto;
max-width: 100%;
height: auto;
}
#qrcode-result {
text-align: center;
}
.center {
display: table-cell;
vertical-align: middle;
}
.color-me {
background: #fff;
padding: 25px;
}
}
.btn {
margin: 5px auto;
position: relative;
color: #fff;
background: $btn-color-primary;
padding: $btn-padding;
width: $btn-width;
overflow: hidden;
text-align: center;
cursor: pointer;
text-transform: uppercase;
&.left:after {
left: 0;
}
&.right:after {
right: 0;
}
&.bubble:after {
content: "";
background: #fff;
position: absolute;
width: $btn-width;
height: $btn-width;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0;
margin: auto;
border-radius: 50%;
transform: scale(1);
transition: all $btn-duration $btn-transition-style;
}
&.bubble:active:after {
transform: scale(0);
opacity: 1;
transition: 0s;
}
}
/* Colors */
$dark: #95a5a6;
$light-grey: #ecf0f1;
$grey: #bdc3c7;
/* Slider options */
$track-color: $grey;
$track-range-color: $light-grey;
$thumb-color: #2ecc71;
$thumb-radius: 50%;
$thumb-height: 15px;
$thumb-width: 15px;
$thumb-shadow-size: 0px;
$thumb-shadow-blur: 0px;
$thumb-shadow-color: rgba(0, 0, 0, 1);
$thumb-border-width: 0px;
$thumb-border-color: rgba(0, 0, 0, 1);
$track-width: 100%;
$track-height: 5px;
$track-shadow-size: 0px;
$track-shadow-blur: 0px;
$track-shadow-color: #fff;
$track-border-width: 0px;
$track-border-color: black;
/* File upload Options */
$file-display: inline-block;
$file-width: 300px;
$file-height: auto;
$file-padding: 15px;
$file-margin: 0px auto;
$file-border: 0px solid;
$file-border-radius: 0;
$file-align: center;
$file-font: sans-serif;
$file-text-transform: none;
$file-font-size: 100%;
$file-color: #fff;
$file-background: #3498db;
$file-background-hover: #3498db;
$file-transition: 0.5s all ease;
/* Additional Options */
$track-radius: 0px;
$contrast: 0%;
$scale: scale(1.15);
@mixin shadow($shadow-size, $shadow-blur, $shadow-color) {
box-shadow: $shadow-size $shadow-size $shadow-blur $shadow-color,
0px 0px $shadow-size lighten($shadow-color, 5%);
}
@mixin file() {
height: 0;
width: 0;
margin: 0;
padding: 0;
visibility: hidden;
}
@mixin track() {
width: $track-width;
height: $track-height;
cursor: pointer;
animate: 0.5s;
}
@mixin thumb() {
@include shadow($thumb-shadow-size, $thumb-shadow-blur, $thumb-shadow-color);
border: $thumb-border-width solid $thumb-border-color;
height: $thumb-height;
width: $thumb-width;
border-radius: $thumb-radius;
background: $thumb-color;
cursor: pointer;
transition: 0.25s all ease;
}
[type="file"] {
@include file();
}
.fileupload {
display: $file-display;
height: $file-height;
width: $file-width;
padding: $file-padding;
margin: $file-margin;
border: $file-border;
text-align: $file-align;
transition: $file-transition;
background: $file-background;
color: $file-color;
font-family: $file-font;
font-size: $file-font-size;
text-transform: $file-text-transform;
border-radius: $file-border-radius;
&:hover {
background: $file-background-hover;
}
}
input[type="range"] {
-webkit-appearance: none;
margin: $thumb-height/2 0;
width: $track-width;
&:focus {
outline: none;
}
&::-webkit-slider-runnable-track {
@include track();
@include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
background: $track-color;
border-radius: $track-radius;
border: $track-border-width solid $track-border-color;
}
&::-webkit-slider-thumb {
@include thumb();
-webkit-appearance: none;
margin-top: ((-$track-border-width * 2 + $track-height) / 2) - ($thumb-height /
2);
}
&:hover::-webkit-slider-thumb {
transform: $scale;
margin-top: ((-$track-border-width * 2 + $track-height) / 2) - ($thumb-height /
2);
transform: $scale;
}
&:focus::-webkit-slider-runnable-track {
background: lighten($track-color, $contrast);
}
&::-moz-range-track {
@include track();
@include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
background: $track-color;
border-radius: $track-radius;
border: $track-border-width solid $track-border-color;
}
&::-moz-range-thumb {
@include thumb();
}
&::-ms-track {
@include track();
background: transparent;
border-color: transparent;
border-width: $thumb-width 0;
color: transparent;
}
&::-ms-fill-lower {
background: darken($track-color, $contrast);
border: $track-border-width solid $track-border-color;
border-radius: $track-radius*2;
@include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
}
&::-ms-fill-upper {
background: $track-color;
border: $track-border-width solid $track-border-color;
border-radius: $track-radius*2;
@include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
}
&::-ms-thumb {
@include thumb();
}
&:focus::-ms-fill-lower {
background: $track-color;
}
&:focus::-ms-fill-upper {
background: lighten($track-color, $contrast);
}
}
a {
position: fixed;
right: 25px;
width: 100%;
bottom: 25px;
color: #fff;
font-family: sans-serif;
text-align: center;
font-size: 1em;
width: 50px;
background-size: contain;
}
View Compiled
$(document).ready(function() {
var clear = "";
var a = "Enjoy it! Leave a heart, if you like it :)";
var mode = 0;
var logosize = $("#lsize").val() / 100;
var qrsize = $("#size").val();
createQrcode();
function createQrcode(s) {
$("#qrcode-result").html(clear);
var s = $("textarea.textInput").val();
if (s == "") {
$("#qrcode-result").qrcode({
render: "image",
ecLevel: "H",
quiet: 0,
minVersion: 5,
maxVersion: 40,
size: qrsize,
fill: "#000",
text: a,
mode: mode,
mSize: logosize,
image: $("#background")[0]
});
} else {
$("#qrcode-result").qrcode({
render: "image",
ecLevel: "H",
quiet: 0,
minVersion: 5,
maxVersion: 40,
size: qrsize,
fill: "#000",
text: s,
mode: mode,
mSize: logosize,
image: $("#background")[0]
});
}
}
/* If HTML values change, set the new values */
$("#size").on("input change", setNewSize);
$("#getnewimage").on("change", setNewImage);
$("#lsize").on("input change", setNewlogoSize);
function setNewSize() {
qrsize = $("#size").val();
setTimeout(update, 250);
}
function setNewlogoSize() {
logosize = $("#lsize").val() / 100;
setTimeout(update, 250);
}
/* Bind new image to the QR Code if uploaded */
function setNewImage() {
var input = $("#getnewimage")[0];
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(event) {
$("#background").attr("src", event.target.result);
mode = 4;
setTimeout(update, 250);
};
reader.readAsDataURL(input.files[0]);
}
}
/* Update neccessary HTML Values */
function update() {
createQrcode();
$("#qrsize .new").html(qrsize + "px");
$("#logosize .new").html(logosize * 100 + "%");
}
/* Generate QR Code on Click and bind it to the img */
$(".generate").on("click", function generate() {
s = $("input.textInput").val();
createQrcode(s);
qrimg = $("#qrcode-result img").attr("src");
});
});
This Pen doesn't use any external CSS resources.