153 lines
7.8 KiB
HTML
153 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
||
<!--
|
||
Numex QR Studio — açıklama sayfası (Market künyesi)
|
||
Tek dosya: kurulum yok, çevrimdışı çalışır. Tüm bileşenler yerel.
|
||
|
||
Geliştirici notu /
|
||
vendor/qrcode-kernel.js elle yazılmadı: `node build.js` ile gömülü qrcode kütüphanesinden
|
||
üretilir. Kaynağı değiştirmek gerekirse build.js çalıştırılmalı; o dosyayı elle düzenlemeyin.
|
||
-->
|
||
<html lang="tr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Numex QR Studio — Tasarla, okut, paylaş</title>
|
||
<meta name="description" content="Bağlantı, metin, telefon, e-posta ve Wi-Fi için okunabilir QR kodlar. Renk, gradyan, logo; SVG ve yüksek çözünürlüklü PNG. Tümü tarayıcında, çevrimdışı.">
|
||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%230f172a'/%3E%3Cg fill='%2338bdf8'%3E%3Crect x='6' y='6' width='8' height='8' rx='2'/%3E%3Crect x='18' y='6' width='8' height='8' rx='2'/%3E%3Crect x='6' y='18' width='8' height='8' rx='2'/%3E%3Crect x='18' y='18' width='4' height='4' rx='1'/%3E%3C/g%3E%3C/svg%3E">
|
||
<style>
|
||
:root {
|
||
--murekkep: #0f172a; --mavi: #2563eb; --gok: #38bdf8;
|
||
--kagit: #f6f7fb; --cizgi: #e2e8f0; --soluk: #64748b; --yesil: #059669;
|
||
}
|
||
* { box-sizing: border-box; }
|
||
body {
|
||
margin: 0; min-height: 100vh; overflow-y: auto;
|
||
font-family: "Segoe UI", "Inter", system-ui, -apple-system, sans-serif;
|
||
background:
|
||
radial-gradient(1100px 480px at 88% -10%, rgba(56,189,248,.18), transparent 60%),
|
||
radial-gradient(900px 400px at 2% 0%, rgba(37,99,235,.10), transparent 55%),
|
||
var(--kagit);
|
||
color: var(--murekkep); line-height: 1.55;
|
||
font-size: clamp(14px, 1.4vw, 15.5px);
|
||
}
|
||
.kutu { max-width: 1020px; margin: 0 auto; padding: clamp(20px, 4vw, 46px) clamp(14px, 3vw, 30px) 40px; }
|
||
.ust { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: clamp(18px, 3vw, 30px); }
|
||
.ust h1 { margin: 0; font-size: clamp(21px, 3.4vw, 31px); letter-spacing: -.02em; }
|
||
.ust p { margin: 2px 0 0; color: var(--soluk); font-size: clamp(13px, 1.5vw, 15px); }
|
||
.etiket {
|
||
display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700;
|
||
color: var(--yesil); background: rgba(5,150,105,.1); border: 1px solid rgba(5,150,105,.24);
|
||
padding: 4px 11px; border-radius: 999px; white-space: nowrap;
|
||
}
|
||
.duzen { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 18px; align-items: start; }
|
||
.kart {
|
||
background: #fff; border: 1px solid var(--cizgi); border-radius: 16px;
|
||
padding: clamp(16px, 2.4vw, 24px);
|
||
box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 12px 30px -18px rgba(15,23,42,.35);
|
||
}
|
||
h2 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--soluk); }
|
||
ul, ol { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
|
||
.adimlar { counter-reset: adim; list-style: none; padding-left: 0; }
|
||
.adimlar li { counter-increment: adim; position: relative; padding-left: 32px; }
|
||
.adimlar li::before {
|
||
content: counter(adim);
|
||
position: absolute; left: 0; top: 1px;
|
||
width: 22px; height: 22px; border-radius: 50%;
|
||
background: var(--murekkep); color: #fff;
|
||
font-size: 12px; font-weight: 700;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
li strong { font-weight: 650; }
|
||
.ac { margin-top: 20px; }
|
||
.btn {
|
||
align-self: flex-start;
|
||
width: auto;
|
||
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
||
min-height: 50px; padding: 0 26px; border-radius: 12px; border: 1px solid transparent;
|
||
background: var(--murekkep); color: #fff; font: inherit; font-weight: 650; font-size: 15px;
|
||
text-decoration: none; cursor: pointer;
|
||
box-shadow: 0 12px 24px -16px rgba(15,23,42,.9);
|
||
transition: background 160ms ease, transform 160ms ease;
|
||
}
|
||
.btn:hover { background: #17253c; }
|
||
.btn:active { transform: translateY(1px); }
|
||
.roz { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: var(--soluk); }
|
||
.roz span { background: #f1f5f9; border-radius: 999px; padding: 4px 10px; }
|
||
code { background: #f1f5f9; border-radius: 5px; padding: 1px 5px; font-size: 12.5px; }
|
||
.not { margin-top: 18px; font-size: 12px; color: var(--soluk); }
|
||
@media (max-width: 780px) { .duzen { grid-template-columns: minmax(0, 1fr); } }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="kutu">
|
||
|
||
<div class="ust">
|
||
<svg viewBox="0 0 48 48" width="46" height="46" aria-hidden="true">
|
||
<rect width="48" height="48" rx="12" fill="#0f172a"/>
|
||
<g fill="#38bdf8">
|
||
<rect x="9" y="9" width="12" height="12" rx="3"/><rect x="27" y="9" width="12" height="12" rx="3"/>
|
||
<rect x="9" y="27" width="12" height="12" rx="3"/><rect x="27" y="27" width="6" height="6" rx="2"/>
|
||
<rect x="35" y="35" width="5" height="5" rx="1.5"/>
|
||
</g>
|
||
</svg>
|
||
<div>
|
||
<h1>Numex QR Studio</h1>
|
||
<p>Tasarla, okut, paylaş — tarayıcıda çalışan QR tasarım aracı.</p>
|
||
</div>
|
||
<span class="etiket">Ücretsiz · Açık kaynak</span>
|
||
</div>
|
||
|
||
<div class="duzen">
|
||
<section class="kart">
|
||
<h2>Ne yapar</h2>
|
||
<ul>
|
||
<li><strong>Beş tür:</strong> Bağlantı, metin, telefon, e-posta (konulu/mesajlı) ve Wi-Fi ağı.</li>
|
||
<li><strong>Canlı önizleme:</strong> Her tuş vuruşunda QR anında yeniden çizilir.</li>
|
||
<li><strong>Üç stil:</strong> Kare, yuvarlatılmış ve noktalı; istediğin gibi renk ve gradyan.</li>
|
||
<li><strong>Logo:</strong> Ortaya kendi görselini koy; hata düzeltme otomatik <strong>H</strong> seviyesine çıkar.</li>
|
||
<li><strong>Çıktı:</strong> Vektörel SVG ve 1024 / 2048 / 4096 px PNG.</li>
|
||
<li><strong>Baskı:</strong> Beyaz, şeffaf ya da istediğin zemin rengi; kenar boşluğu ayarlanabilir.</li>
|
||
<li><strong>Hazır şablonlar:</strong> Altı hazır tasarım, tek tıkla.</li>
|
||
</ul>
|
||
<p class="not">Veriler cihazından çıkmaz: QR üretimi tamamen tarayıcında yapılır, bağlantın hiçbir sunucuya gönderilmez.</p>
|
||
</section>
|
||
|
||
<section class="kart">
|
||
<h2>Nasıl kullanılır</h2>
|
||
<ol class="adimlar">
|
||
<li>Türü seç, içeriği yaz.</li>
|
||
<li>Stili, renkleri, logoyu ve zeminini ayarla.</li>
|
||
<li>SVG (baskı/vektör) veya PNG (sosyal medya, ekran) olarak indir.</li>
|
||
</ol>
|
||
<p class="not">Doğrudan çalıştırmak için <code>index.html</code> dosyasını çift tıkla; kurulum ve internet gerekmez.</p>
|
||
<div class="ac">
|
||
<a class="btn" href="index.html">Uygulamayı aç →</a>
|
||
<div class="roz">
|
||
<span>Kurulum gerekmez</span>
|
||
<span>Çevrimdışı çalışır</span>
|
||
<span>Telefonda da açılır</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<section class="kart" style="margin-top:18px">
|
||
<h2>Teknik not — okunabilirlik ölçüldü</h2>
|
||
<p style="margin:0">
|
||
Üretilen kodlar göze güzel görünmekle kalmıyor; bağımsız bir QR okuyucuyla (jsQR) geri okunarak
|
||
sınandı. <strong>29/29 yapılandırma okundu:</strong> kare, yuvarlatılmış ve noktalı stiller, gradyanlı
|
||
renkler, şeffaf zemin, Türkçe karakterli metin, Wi-Fi, %28'e kadar logo ve altı hazır şablonun her biri
|
||
üç boyutta. Noktalı stilde zamanlama ve hizalama desenlerinin kare kalması gerektiği, kod rengiyle zemin
|
||
arasında en az ~3,3 kontrast gerektiği de bu ölçümle bulundu; zayıf kontrastta uygulama uyarır.
|
||
Ölçüm betiği: <code>tools/dogrula.js</code>.
|
||
</p>
|
||
<p class="not">
|
||
Numex AI tarafından geliştirildi. Gömülü QR kütüphanesi MIT lisanslı qrcode paketidir;
|
||
<code>build.js</code> ile tek dosyaya paketlenmiştir.
|
||
</p>
|
||
</section>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|