Qr-Code generator
QR Code Generator der das Bild auf einer Drittseite anzeigt
Der hier verwendete 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">© 2018 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>