basti1012.bplaced.net

QR Code Generator der das Bild auf einer Drittseite anzeigt

Code

                                    
                                
<title>QR Code Generator</title>
<style>
#alles{
  display:flex;
  flex-direction:column;
    margin:0; 

  text-align:center;
  font-size:20px;
}
 
 </style>
   <style>
.qr-code {
  max-width: 200px;
  margin: 10px;
}

#qrgenerstor{
  width:90%;
  height:90%;
  text-align:center;
}
 
#content,.texta{
  margin-top:20px;
   border-radius:5px;
   width:80%;
  margin-left:10%;
   height:50px;
   font-size:35px;
   font-weight:600;
   color:#000088;
 }
 
 
 h1,h2,h3,h4{
   text-align:center;
 }
 #cc{
   font-size:80%;
   font-weight:500;
 }
 #linker{
 text-align:center
 }
 

.tool{
    height:auto;
    width:auto;
    background:#2E3732;
	color: #FFFFFF;
 border-radius:10px;
    position:absolute;
 border:2px solid black;
  font-size:16px;
	z-index: 1000;
	padding: 5px;
display:none;
}
 
</style>

<div id="alles">
<div id="qrgenerstor">
<h1>
Qr-Code-Generator
</h1>
<div id="img">
<img src="https://chart.googleapis.com/chart?cht=qr&chl=Hello+World&chs=160x160&chld=L|0" class="qr-code"></div>

<input type="text" class="form-control" id="content" placeholder="Enter content"> 
<br>
 <button type="button" class="btn btn-default" id="generate">Generate</button></div>
<h3 id="linker" >Link Adresse Bild</h3>
<textarea  class="texta" id="qrlink" name="text" cols="65" rows="4" onclick="this.focus();this.select();"> </textarea>
<h3>BBC Code für Forums und Co</h3>
<textarea  class="texta" id="qrbbc" name="text" cols="65" rows="4" onclick="this.focus();this.select();"></textarea>
<h3>Link code für Homepage</h3>
<textarea  class="texta" id="qrhp" name="text" cols="65" rows="4" onclick="this.focus();this.select();"></textarea>
 <footer>
<a href="https://basti1012.bplaced.net"><span id="cc">&copy;&nbsp;2018&nbsp;Copyright By Basti1012</span></a>
 </footer>

 <span class="tool">Der Text wurde in der zwischenablage Kopiert</span> 
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

 <script>
 function htmlEncode (value){
  return $('<div/>').text(value).html();
}

$(function() {
  $("#generate").click(function() {
 $(".qr-code").attr("src", "https://chart.googleapis.com/chart?cht=qr&chl=" + htmlEncode($("#content").val()) + "&chs=160x160&chld=L|0"); 
var a=$(".qr-code").attr("src");

$('#qrlink').text(a)
$('#qrbbc').text('[url='+a+'][img]'+a+'[/img][/url]');
$('#qrhp').text('<a href="'+a+'" target="_blank"><img src="'+a+'" /></a>');
  });
});


$('.texta').click(function( event ) {
$(".tool").css("left",event.pageX+"px")
$(".tool").css("top",event.pageY+"px")
$(".tool").fadeIn("fast");
 
function close(){
    $(".tool").fadeOut("fast");
}   
setTimeout(function(){close()},2000)
var inpu=$(this).html()
document.execCommand("copy");
}); 
 </script>