Merhabalar Herkese bugun QR kod olusturmam lazimdi ama biraz guzel bir QR kod internetde bazi Siteler var ama bizim linki kendi serverleri uzerinden geciriyorlardi bende yapay zeka yardimi ile kendi qr generatorumu yazdim onu paylasmak isdiyorum umarim yardimci olur sizlere
h4Ek - QR KOD GENERATOR BY ENVER su sitedende
kullana bilirsiz bir ucretsiz site yardimiyla webde paylasdim kim isterse asagida kodu birakicam html dosyasi olarak kayd edib kullana ve ya degisiklik yapa bilir
<!DOCTYPE html>
<html lang="az">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>QR Generator</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/qr-code-styling.js"></script>
<style>
body {font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;background:#0f172a;color:#e0e7ff;margin:0;padding:20px;}
h1 {text-align:center;margin-bottom:20px;font-weight:800;letter-spacing:0.08em;color:#3b82f6;user-select:none;}
.container {display:flex;flex-wrap:wrap;justify-content:center;gap:20px;max-width:1200px;margin:auto;}
.panel {background:#1e293b;border-radius:14px;padding:20px;box-shadow:0 4px 24px rgba(59,130,246,0.4);flex:1 1 380px;max-width:460px;color:#cbd5e1;}
label {display:block;margin-top:16px;font-weight:700;font-size:13px;color:#94a3b8;}
input[type=text],input[type=number],select {width:100%;padding:10px;margin-top:6px;border-radius:8px;border:none;background:#334155;color:#e0e7ff;font-weight:600;font-size:14px;}
input[type=color]{padding:0;border:none;background:none;width:48px;height:36px;cursor
ointer;}
input[type=range]{width:100%;margin-top:6px;-webkit-appearance:none;background:#334155;height:8px;border-radius:6px;cursorointer;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:22px;width:22px;border-radius:50%;background:#3b82f6;cursorointer;margin-top:-7px;box-shadow:0 0 5px #3b82f6;}
button {margin-top:18px;background:#2563eb;color:white;padding:12px 20px;border:none;border-radius:14px;font-weight:700;font-size:15px;cursorointer;transition:background-color 0.3s ease;}
button:hover{background:#1e40af;}
#canvasWrap{background:#fff;border-radius:18px;padding:14px;display:flex;justify-content:center;align-items:center;box-shadow:0 0 24px #3b82f6aa;margin-top:20px;position:relative;width:fit-content;}
.footer{margin-top:16px;font-size:12px;color:#94a3b8;text-align:center;user-select:none;}
.small{font-size:12px;color:#94a3b8;}
.flex-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;}
.flex-row>div{flex:1 1 45%;}
@media(max-width:768px){.container{flex-direction:column;}}
</style>
</head>
<body>
<h1>QR Generator)</h1>
<div class="container">
<div class="panel">
<label for="data">Link / Mətn</label>
<input id="data" type="text" value="Оптовая База Посуда из Турции PASA BEY" autocomplete="on" />
<div class="flex-row">
<div>
<label for="iconUrl">Logo URL</label>
<input id="iconUrl" type="text" placeholder="https://..." autocomplete="on" />
<div class="small">Remote URL üçün CORS tələb oluna bilər.</div>
</div>
<div>
<label for="iconFile">Lokal fayldan logo yüklə</label>
<input id="iconFile" type="file" accept="image/*" />
</div>
</div>
<label for="qrSize">QR Ölçüsü (px)</label>
<input id="qrSize" type="number" min="120" max="2000" value="360" />
<div class="flex-row">
<div>
<label for="ecLevel">Error Correction Level</label>
<select id="ecLevel">
<option value="L">L (Aşağı)</option>
<option value="M">M</option>
<option value="Q">Q</option>
<option value="H" selected>H (Yüksək)</option>
</select>
</div>
<div>
<label for="dotType">Dot Forması</label>
<select id="dotType">
<option value="square">Kvadrat</option>
<option value="dots" selected>Dairə</option>
<option value="rounded">Yarım Yuvarlaq</option>
<option value="extra-rounded">Tam Yuvarlaq</option>
</select>
</div>
</div>
<div class="flex-row">
<div>
<label for="cornerType">Künc Forması</label>
<select id="cornerType">
<option value="square">Kvadrat</option>
<option value="dot">Dairə</option>
<option value="extra-rounded" selected>Yumru</option>
</select>
</div>
<div>
<label for="logoBgShape">Logo fonu</label>
<select id="logoBgShape">
<option value="none">Heç</option>
<option value="circle" selected>Dairə (Ağ)</option>
<option value="square">Kvadrat (Ağ)</option>
</select>
</div>
</div>
<div class="flex-row">
<div>
<label for="dotColor1">Dot Rəngi (Başlanğıc)</label>
<input id="dotColor1" type="color" value="#000000" />
</div>
<div>
<label for="dotColor2">Dot Rəngi (Son)</label>
<input id="dotColor2" type="color" value="#3b82f6" />
</div>
</div>
<label for="bgColor">Fon Rəngi</label>
<input id="bgColor" type="color" value="#ffffff" />
<label for="imageSize">Logo Ölçüsü (%)</label>
<input id="imageSize" type="range" min="6" max="35" value="20" />
<label for="logoRadius">Logo Kənar Radiusu (px)</label>
<input id="logoRadius" type="range" min="0" max="40" value="12" />
<label for="logoPadding">Logo Padding (px)</label>
<input id="logoPadding" type="number" min="0" max="40" value="8" />
<button id="downloadBtn">
PNG Yüklə</button>
<button id="downloadSvgBtn"> SVG Yüklə</button>
<button id="clearLogoBtn">🗑 Logo Sil</button>
</div>
<div class="panel" style="position:relative;">
<div id="canvasWrap"></div>
</div>
</div>
<div class="footer">Enver QR generator</div>
<script>
const $ = id => document.getElementById(id);
let qr = null;
let iconDataUrl = "";
// svg-based logo background insertion
function insertLogoBgInSvg(svgEl, size, imageSize, shape, radius, padding) {
if (!svgEl) return;
const NS = "SVG namespace";
const prev = svgEl.getElementById && svgEl.getElementById('logoBg');
if (prev) prev.remove();
if (shape === 'none') return;
const totalPx = size * imageSize + (padding * 2);
const center = size / 2;
const g = document.createElementNS(NS, 'g');
g.setAttribute('id', 'logoBg');
if (shape === 'circle') {
const c = document.createElementNS(NS, 'circle');
c.setAttribute('cx', center);
c.setAttribute('cy', center);
c.setAttribute('r', totalPx / 2);
c.setAttribute('fill', '#fff');
g.appendChild(c);
} else {
const rect = document.createElementNS(NS, 'rect');
rect.setAttribute('x', center - totalPx / 2);
rect.setAttribute('y', center - totalPx / 2);
rect.setAttribute('width', totalPx);
rect.setAttribute('height', totalPx);
rect.setAttribute('rx', radius);
rect.setAttribute('ry', radius);
rect.setAttribute('fill', '#fff');
g.appendChild(rect);
}
const imageEl = svgEl.querySelector('image');
if (imageEl && imageEl.parentNode) {
imageEl.parentNode.insertBefore(g, imageEl);
} else {
svgEl.appendChild(g);
}
}
function tryInsertBg(size, imageSize, shape, radius, padding, attempt = 0) {
const svgEl = $('canvasWrap').querySelector('svg');
if (svgEl) {
insertLogoBgInSvg(svgEl, size, imageSize, shape, radius, padding);
} else if (attempt < 6) {
setTimeout(() => tryInsertBg(size, imageSize, shape, radius, padding, attempt + 1), 40);
}
}
function createQR() {
const data = $('data').value.trim() || " ";
const iconUrl = $('iconUrl').value.trim();
const imageToUse = iconDataUrl || (iconUrl ? iconUrl : undefined);
const size = parseInt($('qrSize').value) || 360;
const ecLevel = $('ecLevel').value;
const dotType = $('dotType').value;
const cornerType = $('cornerType').value;
const dotColor1 = $('dotColor1').value;
const dotColor2 = $('dotColor2').value;
const bgColor = $('bgColor').value;
const imageSizePercent = parseInt($('imageSize').value);
const imageSize = imageSizePercent / 100;
const logoRadius = parseInt($('logoRadius').value);
const logoPadding = parseInt($('logoPadding').value);
const logoBgShape = $('logoBgShape').value;
const crossOriginSetting = (imageToUse && !imageToUse.startsWith('data:')) ? "anonymous" : undefined;
const opts = {
width: size,
height: size,
data: data,
image: imageToUse,
qrOptions: { errorCorrectionLevel: ecLevel },
dotsOptions: {
type: dotType,
gradient: {
type: "linear",
rotation: 0,
colorStops: [
{ offset: 0, color: dotColor1 },
{ offset: 1, color: dotColor2 }
]
}
},
cornersSquareOptions: { type: cornerType, color: dotColor1 },
cornersDotOptions: { color: dotColor2 },
backgroundOptions: { color: bgColor },
imageOptions: {
crossOrigin: crossOriginSetting,
margin: logoPadding,
hideBackgroundDots: true,
imageSize: imageSize,
imageRadius: logoRadius
},
type: "svg"
};
if (!qr) {
qr = new QRCodeStyling(opts);
$('canvasWrap').innerHTML = "";
qr.append($('canvasWrap'));
} else {
qr.update(opts);
}
//
Logo varsa fon əlavə et
if (imageToUse) {
tryInsertBg(size, imageSize, logoBgShape, logoRadius, logoPadding);
}
}
// Logo yükləmə
$('iconFile').addEventListener('change', e => {
const f = e.target.files[0];
if (!f) {
iconDataUrl = "";
createQR();
return;
}
if (!f.type || !f.type.startsWith('image/')) {
alert('Zəhmət olmasa şəkil faylı yükləyin!');
e.target.value = "";
iconDataUrl = "";
createQR();
return;
}
const reader = new FileReader();
reader.onload = ev => {
iconDataUrl = ev.target.result;
createQR();
};
reader.onerror = () => {
alert('Fayl oxunarkən xəta baş verdi!');
iconDataUrl = "";
$('iconFile').value = "";
createQR();
};
reader.readAsDataURL(f);
});
$('clearLogoBtn').addEventListener('click', () => {
iconDataUrl = "";
$('iconFile').value = "";
$('iconUrl').value = "";
createQR();
});
$('downloadBtn').addEventListener('click', () => {
if (!qr) return alert('QR kod hazır deyil!');
qr.download({ name: 'qr_code', extension: 'png' });
});
$('downloadSvgBtn').addEventListener('click', () => {
if (!qr) return alert('QR kod hazır deyil!');
qr.download({ name: 'qr_code', extension: 'svg' });
});
[
'data','iconUrl','ecLevel','qrSize','dotType','cornerType',
'dotColor1','dotColor2','bgColor','imageSize','logoRadius',
'logoPadding','logoBgShape'
].forEach(id => $(id).addEventListener('input', createQR));
createQR();
</script>
</body>
</html>
h4Ek - QR KOD GENERATOR BY ENVER su sitedende
kullana bilirsiz bir ucretsiz site yardimiyla webde paylasdim kim isterse asagida kodu birakicam html dosyasi olarak kayd edib kullana ve ya degisiklik yapa bilir
<!DOCTYPE html>
<html lang="az">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>QR Generator</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/qr-code-styling.js"></script>
<style>
body {font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;background:#0f172a;color:#e0e7ff;margin:0;padding:20px;}
h1 {text-align:center;margin-bottom:20px;font-weight:800;letter-spacing:0.08em;color:#3b82f6;user-select:none;}
.container {display:flex;flex-wrap:wrap;justify-content:center;gap:20px;max-width:1200px;margin:auto;}
.panel {background:#1e293b;border-radius:14px;padding:20px;box-shadow:0 4px 24px rgba(59,130,246,0.4);flex:1 1 380px;max-width:460px;color:#cbd5e1;}
label {display:block;margin-top:16px;font-weight:700;font-size:13px;color:#94a3b8;}
input[type=text],input[type=number],select {width:100%;padding:10px;margin-top:6px;border-radius:8px;border:none;background:#334155;color:#e0e7ff;font-weight:600;font-size:14px;}
input[type=color]{padding:0;border:none;background:none;width:48px;height:36px;cursor
ointer;}input[type=range]{width:100%;margin-top:6px;-webkit-appearance:none;background:#334155;height:8px;border-radius:6px;cursor
ointer;}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:22px;width:22px;border-radius:50%;background:#3b82f6;cursor
ointer;margin-top:-7px;box-shadow:0 0 5px #3b82f6;}button {margin-top:18px;background:#2563eb;color:white;padding:12px 20px;border:none;border-radius:14px;font-weight:700;font-size:15px;cursor
ointer;transition:background-color 0.3s ease;}button:hover{background:#1e40af;}
#canvasWrap{background:#fff;border-radius:18px;padding:14px;display:flex;justify-content:center;align-items:center;box-shadow:0 0 24px #3b82f6aa;margin-top:20px;position:relative;width:fit-content;}
.footer{margin-top:16px;font-size:12px;color:#94a3b8;text-align:center;user-select:none;}
.small{font-size:12px;color:#94a3b8;}
.flex-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;}
.flex-row>div{flex:1 1 45%;}
@media(max-width:768px){.container{flex-direction:column;}}
</style>
</head>
<body>
<h1>QR Generator)</h1>
<div class="container">
<div class="panel">
<label for="data">Link / Mətn</label>
<input id="data" type="text" value="Оптовая База Посуда из Турции PASA BEY" autocomplete="on" />
<div class="flex-row">
<div>
<label for="iconUrl">Logo URL</label>
<input id="iconUrl" type="text" placeholder="https://..." autocomplete="on" />
<div class="small">Remote URL üçün CORS tələb oluna bilər.</div>
</div>
<div>
<label for="iconFile">Lokal fayldan logo yüklə</label>
<input id="iconFile" type="file" accept="image/*" />
</div>
</div>
<label for="qrSize">QR Ölçüsü (px)</label>
<input id="qrSize" type="number" min="120" max="2000" value="360" />
<div class="flex-row">
<div>
<label for="ecLevel">Error Correction Level</label>
<select id="ecLevel">
<option value="L">L (Aşağı)</option>
<option value="M">M</option>
<option value="Q">Q</option>
<option value="H" selected>H (Yüksək)</option>
</select>
</div>
<div>
<label for="dotType">Dot Forması</label>
<select id="dotType">
<option value="square">Kvadrat</option>
<option value="dots" selected>Dairə</option>
<option value="rounded">Yarım Yuvarlaq</option>
<option value="extra-rounded">Tam Yuvarlaq</option>
</select>
</div>
</div>
<div class="flex-row">
<div>
<label for="cornerType">Künc Forması</label>
<select id="cornerType">
<option value="square">Kvadrat</option>
<option value="dot">Dairə</option>
<option value="extra-rounded" selected>Yumru</option>
</select>
</div>
<div>
<label for="logoBgShape">Logo fonu</label>
<select id="logoBgShape">
<option value="none">Heç</option>
<option value="circle" selected>Dairə (Ağ)</option>
<option value="square">Kvadrat (Ağ)</option>
</select>
</div>
</div>
<div class="flex-row">
<div>
<label for="dotColor1">Dot Rəngi (Başlanğıc)</label>
<input id="dotColor1" type="color" value="#000000" />
</div>
<div>
<label for="dotColor2">Dot Rəngi (Son)</label>
<input id="dotColor2" type="color" value="#3b82f6" />
</div>
</div>
<label for="bgColor">Fon Rəngi</label>
<input id="bgColor" type="color" value="#ffffff" />
<label for="imageSize">Logo Ölçüsü (%)</label>
<input id="imageSize" type="range" min="6" max="35" value="20" />
<label for="logoRadius">Logo Kənar Radiusu (px)</label>
<input id="logoRadius" type="range" min="0" max="40" value="12" />
<label for="logoPadding">Logo Padding (px)</label>
<input id="logoPadding" type="number" min="0" max="40" value="8" />
<button id="downloadBtn">
PNG Yüklə</button><button id="downloadSvgBtn">
SVG Yüklə</button><button id="clearLogoBtn">🗑 Logo Sil</button>
</div>
<div class="panel" style="position:relative;">
<div id="canvasWrap"></div>
</div>
</div>
<div class="footer">Enver QR generator</div>
<script>
const $ = id => document.getElementById(id);
let qr = null;
let iconDataUrl = "";
// svg-based logo background insertion
function insertLogoBgInSvg(svgEl, size, imageSize, shape, radius, padding) {
if (!svgEl) return;
const NS = "SVG namespace";
const prev = svgEl.getElementById && svgEl.getElementById('logoBg');
if (prev) prev.remove();
if (shape === 'none') return;
const totalPx = size * imageSize + (padding * 2);
const center = size / 2;
const g = document.createElementNS(NS, 'g');
g.setAttribute('id', 'logoBg');
if (shape === 'circle') {
const c = document.createElementNS(NS, 'circle');
c.setAttribute('cx', center);
c.setAttribute('cy', center);
c.setAttribute('r', totalPx / 2);
c.setAttribute('fill', '#fff');
g.appendChild(c);
} else {
const rect = document.createElementNS(NS, 'rect');
rect.setAttribute('x', center - totalPx / 2);
rect.setAttribute('y', center - totalPx / 2);
rect.setAttribute('width', totalPx);
rect.setAttribute('height', totalPx);
rect.setAttribute('rx', radius);
rect.setAttribute('ry', radius);
rect.setAttribute('fill', '#fff');
g.appendChild(rect);
}
const imageEl = svgEl.querySelector('image');
if (imageEl && imageEl.parentNode) {
imageEl.parentNode.insertBefore(g, imageEl);
} else {
svgEl.appendChild(g);
}
}
function tryInsertBg(size, imageSize, shape, radius, padding, attempt = 0) {
const svgEl = $('canvasWrap').querySelector('svg');
if (svgEl) {
insertLogoBgInSvg(svgEl, size, imageSize, shape, radius, padding);
} else if (attempt < 6) {
setTimeout(() => tryInsertBg(size, imageSize, shape, radius, padding, attempt + 1), 40);
}
}
function createQR() {
const data = $('data').value.trim() || " ";
const iconUrl = $('iconUrl').value.trim();
const imageToUse = iconDataUrl || (iconUrl ? iconUrl : undefined);
const size = parseInt($('qrSize').value) || 360;
const ecLevel = $('ecLevel').value;
const dotType = $('dotType').value;
const cornerType = $('cornerType').value;
const dotColor1 = $('dotColor1').value;
const dotColor2 = $('dotColor2').value;
const bgColor = $('bgColor').value;
const imageSizePercent = parseInt($('imageSize').value);
const imageSize = imageSizePercent / 100;
const logoRadius = parseInt($('logoRadius').value);
const logoPadding = parseInt($('logoPadding').value);
const logoBgShape = $('logoBgShape').value;
const crossOriginSetting = (imageToUse && !imageToUse.startsWith('data:')) ? "anonymous" : undefined;
const opts = {
width: size,
height: size,
data: data,
image: imageToUse,
qrOptions: { errorCorrectionLevel: ecLevel },
dotsOptions: {
type: dotType,
gradient: {
type: "linear",
rotation: 0,
colorStops: [
{ offset: 0, color: dotColor1 },
{ offset: 1, color: dotColor2 }
]
}
},
cornersSquareOptions: { type: cornerType, color: dotColor1 },
cornersDotOptions: { color: dotColor2 },
backgroundOptions: { color: bgColor },
imageOptions: {
crossOrigin: crossOriginSetting,
margin: logoPadding,
hideBackgroundDots: true,
imageSize: imageSize,
imageRadius: logoRadius
},
type: "svg"
};
if (!qr) {
qr = new QRCodeStyling(opts);
$('canvasWrap').innerHTML = "";
qr.append($('canvasWrap'));
} else {
qr.update(opts);
}
//
Logo varsa fon əlavə etif (imageToUse) {
tryInsertBg(size, imageSize, logoBgShape, logoRadius, logoPadding);
}
}
// Logo yükləmə
$('iconFile').addEventListener('change', e => {
const f = e.target.files[0];
if (!f) {
iconDataUrl = "";
createQR();
return;
}
if (!f.type || !f.type.startsWith('image/')) {
alert('Zəhmət olmasa şəkil faylı yükləyin!');
e.target.value = "";
iconDataUrl = "";
createQR();
return;
}
const reader = new FileReader();
reader.onload = ev => {
iconDataUrl = ev.target.result;
createQR();
};
reader.onerror = () => {
alert('Fayl oxunarkən xəta baş verdi!');
iconDataUrl = "";
$('iconFile').value = "";
createQR();
};
reader.readAsDataURL(f);
});
$('clearLogoBtn').addEventListener('click', () => {
iconDataUrl = "";
$('iconFile').value = "";
$('iconUrl').value = "";
createQR();
});
$('downloadBtn').addEventListener('click', () => {
if (!qr) return alert('QR kod hazır deyil!');
qr.download({ name: 'qr_code', extension: 'png' });
});
$('downloadSvgBtn').addEventListener('click', () => {
if (!qr) return alert('QR kod hazır deyil!');
qr.download({ name: 'qr_code', extension: 'svg' });
});
[
'data','iconUrl','ecLevel','qrSize','dotType','cornerType',
'dotColor1','dotColor2','bgColor','imageSize','logoRadius',
'logoPadding','logoBgShape'
].forEach(id => $(id).addEventListener('input', createQR));
createQR();
</script>
</body>
</html>
