qr generator by @Codewith.it - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio
requiredRende obbligatorio un campo di input
disabledImpedisce la modifica di un input
langSpecifica la lingua del contenuto di un elemento
<hr>Inserisce una linea orizzontale

Users

Log in to search for users

Explore

Find inspiration

Tabella Landing page

es riepilogativo da correggere

Pro Vercelli Segreteria

20240126 pagina html

Group 1 - Irregular Verbs

conta caratteri online

Esercizio tabella e form

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<script src="https://codewith.it/qr/qrcode.min.js">
</script>
<style>
  .qritem{
    margin: auto;
    width: 300px;
  }
  .btncustom:hover{
    background:white;
    cursor:pointer;
  }
  .qrcont{
    text-align: center;
    background:#efefef;
    padding:5px;
  }
  .qrcont input{
    text-align:center;
  }
  .qrbase {
    background:white;
    margin:30px;
    padding:25px 15px;
    border-radius:10px;
    box-shadow:inset 2px 2px 15px #0004;
    display:flex;
    flex-direction:row;

  }
  .qrbase div{
    flex:1;
  }
  .qroptions {
    display:flex;
    flex-direction:column;
    margin:auto;
    grid-gap:5px;
  }
  .qroptions button {
    border-radius: 5px;
    border: solid 2px #ccc;
  }   
  .qroptions button:hover {
    background:#ccc;
    cursor:pointer;
    border-radius: 5px;
    border: solid 2px #ccc;
  }
  @media screen and (max-width: 650px) {
    .qrbase {
      flex-direction:column;
    }
    #qrcode img{
      width:200px;
      margin:auto;
    }
  }
</style>
<script>
  var codeType;
  var codeMess = 0;
</script>

<div class="qrcont">
  <div class="qrbase">
    <div>
      <div class="qroptions" style="width:200px;">
        <label>Tipologia</label>
        <button onclick="codeType = ''; genQR()">URL</button>
        <button onclick="codeType = 'email'; genQR()">Email</button>
        <button onclick="codeType = 'sms'; genQR()">SMS</button>
        <button onclick="codeType = 'tel'; genQR()">Telefono (Phone)</button><br>
        <div>
          <label>Usa una frase</label><input type="radio" name="rad" checked>
        </div>
        <input placeholder="Messaggio aggiuntivo" value="Visita il sito" id="txtQR" autocomplete="off" maxlength="22" onkeyup="codeMess=1">
        <br>
        <div>
          <label>Usa un logo</label><input type="radio" name="rad" >
          <input type="file" id="fileQR" onchange="genQR()" >
        </div>
        <hr>
        <button class="" onclick="genQR()">
          Ricarica QR
        </button> 
      </div>

    </div>
    <div>
      <div class="qroptions">
        <input placeholder="URL/testo" id="qrgen" autocomplete="off" maxlength="250">
        <input placeholder="Oggetto" id="qrsub" autocomplete="off" maxlength="250" style=" display:none;">
        <textarea placeholder="Messaggio" id="qrmess" autocomplete="off" style="height:80px; display:none;"></textarea>
        <br>
        <div id="qrcode" class="qritem">
        </div>
        <br>
        <hr>
        <button class="btncustom qritem icn-down-small" onclick="downloadQR()">
          <b>Scarica QR
          </b> come immagine
        </button>  
      </div>
    </div> 
  </div>
</div>


<script>


  var QR_CODE = new QRCode("qrcode", {
    width: 300,
    height: 300,
    colorDark: "#000000",
    colorLight: "#ffffff",

    correctLevel: QRCode.CorrectLevel.L
  }
                          );
  var qrgen = document.getElementById('qrgen');
  var qrsub = document.getElementById('qrsub');
  var pmess = document.getElementById('qrmess');
  var radio = document.getElementsByName('rad');

  var ltimer;

  var txtQR = document.getElementById('txtQR');
  var fileQR = document.getElementById('fileQR');


  qrgen.addEventListener("keyup", function(){
    genQR()
  });     
  qrsub.addEventListener("keyup", function(){
    genQR()
  });   
  pmess.addEventListener("keyup", function(){
    genQR()
  });
  txtQR.addEventListener("keyup", function(){
    genQR()
  });
  function genQR(){
    clearTimeout(ltimer);
    ltimer = setTimeout(function(){
      if (qrgen.value.length <=250) {

        //format SMSTO:+1123456:This is a SMS stored in a QR Code!

        switch (codeType){
          case "email":
            qrgen.placeholder = "Indirizzo email";
            pmess.style.display = "block";
            qrsub.style.display = "block";
            if(codeMess == 0){
              txtQR.value = "Invia un email";
            }
            QR_CODE.makeCode("mailto:"+qrgen.value+ "?subject="+qrsub.value + "&body="+ pmess.value);
            break; 

          case "tel":
            qrgen.placeholder = "Numero di telefono";
            pmess.style.display = "none";
            qrsub.style.display = "none";
            if(codeMess == 0){
              txtQR.value = "Chiamami";
            }
            QR_CODE.makeCode("tel:"+qrgen.value);
            break; 

          case "sms":
            qrgen.placeholder = "Numero di telefono";
            pmess.style.display = "block";
            qrsub.style.display = "none";
            if(codeMess == 0){
              txtQR.value = "Invia un SMS";
            }
            QR_CODE.makeCode("SMSTO:"+qrgen.value+ ":"+ pmess.value);
            break;

          default:
            qrgen.placeholder = "URL/testo";
            pmess.style.display = "none";
            qrsub.style.display = "none";
            if(codeMess == 0){
              txtQR.value = "Visita il sito";
            }
            QR_CODE.makeCode(qrgen.value);
                        }
        let canvass =document.getElementsByTagName('canvas')[0];
        let ctx = canvass.getContext("2d");
        if(txtQR.value.length >0 && radio[0].checked == true){
          ctx.fillStyle = "#fffffff1";
          ctx.font = "bold 20px Ubuntu";
          var mt = ctx.measureText(txtQR.value);
          ctx.fillRect((canvass.width-mt.width-20), (canvass.height-40), mt.width+25, 40);
          ctx.textAlign = 'right';
          ctx.fillStyle = "rgb(38,59,85)";
          ctx.fillText(txtQR.value, 290,290);
          QR_CODE.makeImage();
        }else if(fileQR.value.length >0 && radio[1].checked == true){

          var reader = new FileReader();
          reader.readAsDataURL(fileQR.files[0]);
          reader.onload = function (e) {
            ctx.fillStyle = "#ffffff";
            ctx.fillRect((canvass.width/3)-2, (canvass.height/3)-2,(canvass.width/3)+4, (canvass.height/3)+4);
            var pimage = document.createElement('img');
            pimage.src=e.target.result;
            ctx.drawImage(pimage, canvass.width/3, canvass.height/3,canvass.width/3, canvass.height/3);
            QR_CODE.makeImage();
             if(pimage.width == 0){
               genQR();
             }
          }
        }
      }
      else{
        alert("Caratteri massimi 250 - Max 250 Characters");
      }
    }, 300);
  }


  QR_CODE.makeCode("https://www.byte-post.com");

  function downloadQR(){
    var qrsrc = document.getElementById("qrcode").getElementsByTagName('img')[0].src;
    var a = document.createElement("a");
    a.href = qrsrc;
    a.download = "myQR.png";
    a.click();
  } 


</script>

*{ }