MINI

files >> C:/xampp/htdocs/te/rekap.php
 <!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Aplikasi Sharing QR Code</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- QRCode JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

<style>
body {
    background: linear-gradient(135deg, #1d2671, #c33764);
    min-height: 100vh;
}
.card {
    border-radius: 20px;
}
#qrcode canvas {
    margin: auto;
}
</style>
</head>

<body class="d-flex justify-content-center align-items-center">

<div class="card shadow p-4 text-center" style="max-width:420px;width:100%;">
    <h4 class="mb-3">📲 Sharing QR Code</h4>

    <input type="text" id="qrText" class="form-control mb-3" placeholder="Masukkan teks / link">

    <button class="btn btn-primary w-100 mb-3" onclick="generateQR()">Generate QR</button>

    <div id="qrcode" class="mb-3"></div>

    <div class="d-flex gap-2">
        <button class="btn btn-success w-100" onclick="downloadQR()">Download</button>
        <button class="btn btn-warning w-100" onclick="shareQR()">Share</button>
    </div>
</div>

<script>
let qr;

function generateQR() {
    const text = document.getElementById("qrText").value;
    if (!text) {
        alert("Masukkan teks atau link!");
        return;
    }

    document.getElementById("qrcode").innerHTML = "";
    qr = new QRCode(document.getElementById("qrcode"), {
        text: text,
        width: 200,
        height: 200,
    });
}

function downloadQR() {
    const canvas = document.querySelector("#qrcode canvas");
    if (!canvas) return alert("QR belum dibuat");

    const link = document.createElement("a");
    link.href = canvas.toDataURL("image/png");
    link.download = "qr-code.png";
    link.click();
}

async function shareQR() {
    const canvas = document.querySelector("#qrcode canvas");
    if (!canvas) return alert("QR belum dibuat");

    const blob = await new Promise(resolve => canvas.toBlob(resolve));
    const file = new File([blob], "qr-code.png", { type: "image/png" });

    if (navigator.share) {
        navigator.share({
            title: "QR Code",
            text: "Scan QR Code ini",
            files: [file]
        });
    } else {
        alert("Browser tidak mendukung fitur share");
    }
}
</script>

</body>
</html>