1781284178_qr code generator.php
<?php
// qr_generator.php — TenaCode Short Project
session_start();
$qr_url = '';
$input = '';
$error = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$input = trim($_POST['qr_input'] ?? '');
if ($input === '') {
$error = 'Enter some text or a URL first.';
} else {
// Google Charts QR API (free, no key needed)
$encoded = urlencode($input);
$qr_url = "https://api.qrserver.com/v1/create-qr-code/?size=300x300&data={$encoded}&bgcolor=0a0a0a&color=47fff6&margin=10";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Code Generator — TenaCode</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Mono:wght@300;400;500&display=swap" rel="stylesheet">
<style>
:root {
--bg: #080808;
--surface: #111114;
--border: #1e1e24;
--accent: #47fff6;
--accent2: #ff4d6d;
--text: #e8e8f0;
--muted: #6b6b7e;
--font-sans: 'Syne', sans-serif;
--font-mono: 'DM Mono', monospace;
--radius: 12px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 60px 20px 80px;
}
/* ── Header ── */
.page-header {
text-align: center;
margin-bottom: 48px;
animation: fadeUp .5s ease both;
}
.page-header .eyebrow {
font-family: var(--font-mono);
font-size: .7rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 12px;
}
.page-header h1 {
font-size: clamp(2rem, 5vw, 3.2rem);
font-weight: 800;
line-height: 1.1;
background: linear-gradient(135deg, var(--text) 40%, var(--accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.page-header p {
font-family: var(--font-mono);
font-size: .85rem;
color: var(--muted);
margin-top: 10px;
}
/* ── Card ── */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 36px 32px;
width: 100%;
max-width: 540px;
animation: fadeUp .5s .1s ease both;
}
/* ── Form ── */
label {
display: block;
font-family: var(--font-mono);
font-size: .75rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 8px;
}
textarea {
width: 100%;
background: #0d0d10;
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text);
font-family: var(--font-mono);
font-size: .9rem;
padding: 14px 16px;
resize: vertical;
min-height: 100px;
transition: border-color .2s;
outline: none;
}
textarea:focus { border-color: var(--accent); }
.error {
font-family: var(--font-mono);
font-size: .8rem;
color: var(--accent2);
margin-top: 8px;
}
.btn {
margin-top: 20px;
width: 100%;
padding: 14px;
background: var(--accent);
color: #080808;
font-family: var(--font-sans);
font-weight: 700;
font-size: .95rem;
border: none;
border-radius: 8px;
cursor: pointer;
transition: opacity .2s, transform .15s;
letter-spacing: .03em;
}
.btn:hover { opacity: .88; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
/* ── QR result ── */
.qr-result {
margin-top: 32px;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
animation: fadeUp .4s ease both;
}
.qr-frame {
padding: 16px;
background: #0a0a0a;
border: 1px solid var(--accent);
border-radius: var(--radius);
box-shadow: 0 0 32px rgba(71,255,246,.12);
}
.qr-frame img {
display: block;
width: 260px;
height: 260px;
border-radius: 6px;
}
.qr-actions {
display: flex;
gap: 12px;
}
.btn-outline {
padding: 10px 22px;
background: transparent;
color: var(--accent);
border: 1px solid var(--accent);
border-radius: 8px;
font-family: var(--font-sans);
font-weight: 600;
font-size: .85rem;
cursor: pointer;
text-decoration: none;
transition: background .2s, color .2s;
}
.btn-outline:hover { background: var(--accent); color: #080808; }
.qr-caption {
font-family: var(--font-mono);
font-size: .75rem;
color: var(--muted);
text-align: center;
max-width: 280px;
word-break: break-all;
}
/* ── Animations ── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Footer ── */
footer {
margin-top: 56px;
font-family: var(--font-mono);
font-size: .72rem;
color: var(--muted);
text-align: center;
}
footer a { color: var(--accent); text-decoration: none; }
</style>
</head>
<body>
<header class="page-header">
<div class="eyebrow">TenaCode · Mini Projects</div>
<h1>QR Code Generator</h1>
<p>Turn any URL or text into a scannable QR code.</p>
</header>
<div class="card">
<form method="POST" action="">
<label for="qr_input">Text or URL</label>
<textarea id="qr_input" name="qr_input" placeholder="https://example.com or any text…"><?= htmlspecialchars($input) ?></textarea>
<?php if ($error): ?>
<p class="error">⚠ <?= htmlspecialchars($error) ?></p>
<?php endif; ?>
<button class="btn" type="submit">Generate QR Code</button>
</form>
<?php if ($qr_url): ?>
<div class="qr-result">
<div class="qr-frame">
<img src="<?= htmlspecialchars($qr_url) ?>" alt="QR code for: <?= htmlspecialchars($input) ?>">
</div>
<div class="qr-actions">
<a class="btn-outline" href="<?= htmlspecialchars($qr_url) ?>" download="qrcode.png" target="_blank">↓ Download</a>
<button class="btn-outline" onclick="copyQR()">⎘ Copy URL</button>
</div>
<p class="qr-caption"><?= htmlspecialchars($input) ?></p>
</div>
<script>
function copyQR() {
navigator.clipboard.writeText(<?= json_encode($input) ?>).then(() => {
const btn = document.querySelectorAll('.btn-outline')[1];
btn.textContent = '✓ Copied!';
setTimeout(() => btn.textContent = '⎘ Copy URL', 2000);
});
}
</script>
<?php endif; ?>
</div>
<footer>
<a href="index.php">← Back to TenaCode</a> · Mini Projects Series
</footer>
</body>
</html>
Comments