<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;
}

$(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");
  });
});