اداة انشاء باركود QR
بواسطة morbah |
|
أنشئ رمز QR احترافي لروابط موقعك، شبكة الواي فاي، أو حتى رقم هاتفك. أداة ضرورية لكل أصحاب الأعمال والمسوقين.
استخدامات الـ QR:
- 🔗 تحويل الروابط الطويلة إلى كود يسهل مسحه.
- 📶 مشاركة كلمة سر الواي فاي دون كتابتها.
- 👤 إنشاء بطاقة عمل رقمية (vCard).
مولد رموز QR احترافي
<p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEgs_FrSjPs1kK8I5sHhVOBPlBv5K-gjg6vrrP9_3XrnA7xrbabzkogVxHtfDRYwNKFuSMZr-ZA6bh8uP9SS-kJFYgWySHGaTJOWY4n01ZvMtXOr8MZFfv2VF9_XOqybJGf_iVvKQYqUHMkb_i_8skbOnEpXc7NKzxrrjYcmiYWnkfD3O01Ub9MAHZzPOoU" style="margin-left: 1em; margin-right: 1em;"><img alt="" data-original-height="720" data-original-width="1280" height="360" loading="lazy" src="https://blogger.googleusercontent.com/img/a/AVvXsEgs_FrSjPs1kK8I5sHhVOBPlBv5K-gjg6vrrP9_3XrnA7xrbabzkogVxHtfDRYwNKFuSMZr-ZA6bh8uP9SS-kJFYgWySHGaTJOWY4n01ZvMtXOr8MZFfv2VF9_XOqybJGf_iVvKQYqUHMkb_i_8skbOnEpXc7NKzxrrjYcmiYWnkfD3O01Ub9MAHZzPOoU=w640-h360-rw" width="640" /></a></div><br /><p></p><p>أنشئ <strong>رمز QR احترافي</strong> لروابط موقعك، شبكة الواي فاي، أو حتى رقم هاتفك. أداة ضرورية لكل أصحاب الأعمال والمسوقين.</p>
<h2>استخدامات الـ QR:</h2>
<ul>
<li>🔗 تحويل الروابط الطويلة إلى كود يسهل مسحه.</li>
<li>📶 مشاركة كلمة سر الواي فاي دون كتابتها.</li>
<li>👤 إنشاء بطاقة عمل رقمية (vCard).</li>
</ul>
<html dir="rtl" lang="ar">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>مولد رموز QR احترافي</title>
<link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" referrerpolicy="no-referrer" rel="stylesheet"></link>
<style>
/* أنماط CSS - تصميم احترافي محدث لمولد QR - إصدار متقدم */
/* أنماط عامة وإعادة الضبط (مقتبسة ومعدلة من كود Keyword Suggest) - زيادة بسيطة جدًا في الحجم */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background-color: #f8fafc; /* لون خلفية أفتح */
color: #374151; /* لون نص أغمق قليلاً */
line-height: 1.6; /* تباعد أسطر أفضل للقراءة */
direction: rtl;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.container { /* حاوية رئيسية - زيادة بسيطة جدًا */
width: 95%;
max-width: 1050px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 30px;
}
.qr-generator-card { /* بطاقة مولد QR - تصميم احترافي */
padding: 2rem; /* حشو أكبر */
margin-bottom: 2.5rem;
background-color: #fff;
border-radius: 1rem;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15); /* ظل أكثر بروزًا */
border: 1px solid #e2e8f0; /* حدود أنعم */
}
h1 { /* عنوان مولد QR - تصميم احترافي */
color: #2d3748; /* لون عنوان أغمق */
text-align: center;
font-weight: 700;
font-size: 2rem; /* حجم خط أكبر قليلاً */
margin-bottom: 1.5rem;
}
/* تصميم أزرار أنواع QR */
.qr-type-buttons {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin-bottom: 1.5rem;
}
.qr-type-button {
background-color: #edf2f7; /* لون خلفية أزرار الأنواع */
color: #4a5568; /* لون أيقونات الأزرار */
border: none;
border-radius: 0.75rem;
padding: 1rem;
margin: 0.5rem;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
font-size: 1rem; /* حجم خط أكبر قليلاً */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 80px; /* عرض ثابت للأزرار */
height: 80px; /* ارتفاع ثابت للأزرار - مربع */
font-weight: 600; /* خط اثقل للازرار */
}
.qr-type-button:hover, .qr-type-button.active {
background-color: #d2e3ef; /* لون أغمق عند التحويم والتفعيل */
color: #00a3c4; /* لون أيقونات أزرق مخضر عند التحويم والتفعيل */
transform: scale(1.05); /* تأثير تكبير طفيف */
box-shadow: 0 4px 8px rgba(0,0,0,0.12); /* ظل أكبر عند التحويم والتفعيل */
}
.qr-type-button i {
margin-bottom: 0.5rem; /* مساحة أسفل الأيقونة */
}
.input-area {
margin-bottom: 1.75rem;
}
.input-label {
display: block;
margin-bottom: 0.75rem;
font-weight: 600; /* وزن خط أثقل للتسميات */
color: #4a5568; /* لون تسمية أغمق */
font-size: 1.1rem;
}
textarea, input[type="text"], input[type="email"] { /* تصميم حقول الإدخال الاحترافي */
display: block;
width: calc(100% - 30px); /* تعويض عن الحشو */
padding: 1rem 1.5rem; /* حشو أكبر */
margin-top: 0.5rem;
margin-bottom: 1.25rem;
font-size: 1.05rem;
border: 2px solid #cbd5e0; /* حدود أكثر سمكًا وبلون أفتح */
border-radius: 0.75rem;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.06); /* ظل داخلي ناعم */
resize: vertical;
direction: rtl;
text-align: right;
outline: none;
color: #4a5568; /* لون نص أغمق */
background-color: #f7fafc; /* خلفية افتح لحقول الإدخال */
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
textarea:focus, input[type="text"]:focus, input[type="email"]:focus {
border-color: #00a3c4; /* لون التركيز أزرق مخضر */
box-shadow: 0 0 0 4px rgba(0, 163, 196, 0.25), inset 0 2px 4px rgba(0,0,0,0.06); /* ظل تركيز أكثر وضوحًا */
}
button#generate-button { /* زر إنشاء رمز QR - تصميم احترافي */
display: block;
margin: 1.5rem auto; /* تقليل الهامش العلوي للزر */
padding: 1rem 2.5rem; /* حشو أكبر للأزرار */
border: none;
border-radius: 0.75rem;
background-color: #00a3c4; /* لون أزرق مخضر */
color: white;
cursor: pointer;
font-size: 1.1rem;
font-weight: 600; /* خط أثقل للأزرار */
transition: background-color 0.3s ease, transform 0.2s ease; /* تأثيرات انتقال إضافية */
box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* ظل أنعم للأزرار */
outline: none;
}
button#generate-button:hover {
background-color: #00849e; /* لون أغمق عند التحويم */
transform: scale(1.03); /* تأثير تكبير طفيف عند التحويم */
}
button#generate-button:active {
background-color: #007085; /* لون أغمق عند الضغط */
transform: scale(1); /* إعادة الحجم الطبيعي عند الضغط */
box-shadow: 0 2px 4px rgba(0,0,0,0.15); /* ظل أصغر عند الضغط */
}
button#generate-button:disabled {
background-color: #9ca3af; /* لون أفتح للأزرار المعطلة */
color: #e5e7eb;
cursor: not-allowed;
opacity: 1;
box-shadow: none;
transform: none;
}
#qrcode-container {
margin-top: 2rem;
text-align: center;
}
#qrcode-container img {
max-width: 100%; /* صورة QR متجاوبة */
height: auto;
}
/* تصميم متجاوب - تعديلات طفيفة لتصميم احترافي */
@media (max-width: 768px) {
.container {
margin: 2rem auto;
border-radius: 0.75rem;
}
h1 {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.input-label, button, textarea, input[type="text"] {
font-size: 1rem;
}
.results-area {
margin-top: 1.5rem;
padding: 0.8rem;
}
}
@media (max-width: 480px) {
.container {
margin: 1.5rem auto;
padding: 1.25rem;
border-radius: 0.58rem;
}
h1 {
font-size: 1.3rem;
margin-bottom: 0.9rem;
}
.input-label, button, textarea, input[type="text"] {
font-size: 0.9rem;
}
.results-area {
margin-top: 1rem;
padding: 0.75rem;
}
}
/* تصميم إضافي لحقول WIFI و vCard المخفية */
.input-area.hidden {
display: none;
}
.thank-you-message { /* تصميم رسالة الشكر */
text-align: center;
margin-top: 2rem;
color: #5a677a;
font-size: 1rem;
}
</style>
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
</head>
<body>
<div class="container">
<div class="qr-generator-card">
<h1>مولد رموز QR احترافي</h1>
<div class="qr-type-buttons">
<button class="qr-type-button active" data-type="url">URL</button>
<button class="qr-type-button" data-type="text">Text</button>
<button class="qr-type-button" data-type="email">Email</button>
<button class="qr-type-button" data-type="sms">SMS</button>
<button class="qr-type-button" data-type="wifi">WIFI</button>
<button class="qr-type-button" data-type="vcard">vCard</button>
</div>
<div class="input-area" id="url-input-area">
<label class="input-label" for="qr-input-url">أدخل رابط URL لإنشاء رمز QR:</label>
<textarea id="qr-input-url" placeholder="أدخل رابط URL هنا" rows="5"></textarea>
</div>
<div class="input-area hidden" id="text-input-area">
<label class="input-label" for="qr-input-text">أدخل النص لإنشاء رمز QR:</label>
<textarea id="qr-input-text" placeholder="أدخل النص هنا" rows="5"></textarea>
</div>
<div class="input-area hidden" id="email-input-area">
<label class="input-label" for="qr-input-email">أدخل عنوان البريد الإلكتروني:</label>
<input id="qr-input-email" placeholder="أدخل عنوان البريد الإلكتروني هنا" type="email" />
<label class="input-label" for="qr-input-email-subject">الموضوع (اختياري):</label>
<input id="qr-input-email-subject" placeholder="الموضوع" type="text" />
<label class="input-label" for="qr-input-email-body">نص الرسالة (اختياري):</label>
<textarea id="qr-input-email-body" placeholder="نص الرسالة" rows="3"></textarea>
</div>
<div class="input-area hidden" id="sms-input-area">
<label class="input-label" for="qr-input-sms-number">أدخل رقم الهاتف:</label>
<input id="qr-input-sms-number" placeholder="أدخل رقم الهاتف هنا" type="text" />
<label class="input-label" for="qr-input-sms-message">نص الرسالة (اختياري):</label>
<textarea id="qr-input-sms-message" placeholder="نص الرسالة" rows="3"></textarea>
</div>
<div class="input-area hidden" id="wifi-input-area">
<label class="input-label" for="qr-input-wifi-name">اسم شبكة WIFI (SSID):</label>
<input id="qr-input-wifi-name" placeholder="أدخل اسم شبكة WIFI هنا" type="text" />
<label class="input-label" for="qr-input-wifi-password">كلمة مرور WIFI (اختياري):</label>
<input id="qr-input-wifi-password" placeholder="أدخل كلمة مرور WIFI هنا (إذا كانت محمية بكلمة مرور)" type="text" />
<label class="input-label" for="qr-input-wifi-encryption">نوع التشفير:</label>
<select id="qr-input-wifi-encryption">
<option value="WPA">WPA/WPA2</option>
<option value="WEP">WEP</option>
<option value="nopass">No Encryption</option>
</select>
</div>
<div class="input-area hidden" id="vcard-input-area"> <!-- منطقة vCard الجديدة -->
<label class="input-label" for="qr-input-vcard-name">الاسم:</label>
<input id="qr-input-vcard-name" placeholder="أدخل الاسم هنا" type="text" />
<label class="input-label" for="qr-input-vcard-phone">رقم الهاتف:</label>
<input id="qr-input-vcard-phone" placeholder="أدخل رقم الهاتف هنا" type="text" />
<label class="input-label" for="qr-input-vcard-email">البريد الإلكتروني:</label>
<input id="qr-input-vcard-email" placeholder="أدخل البريد الإلكتروني هنا" type="email" />
<label class="input-label" for="qr-input-vcard-org">المنظمة (اختياري):</label>
<input id="qr-input-vcard-org" placeholder="أدخل اسم المنظمة (اختياري)" type="text" />
</div>
<button id="generate-button">إنشاء رمز QR</button>
<div id="qrcode-container" style="display: none;">
<h2>رمز QR الذي تم إنشاؤه:</h2>
<div id="qrcode"></div> <!-- حاوية رمز QR -->
</div>
<p class="thank-you-message">شكراً لاستخدام أداة مولد رموز QR الخاصة بنا!</p> <!-- رسالة شكر جديدة -->
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const generateButton = document.getElementById('generate-button');
const qrInputURL = document.getElementById('qr-input-url');
const qrInputText = document.getElementById('qr-input-text');
const qrInputEmail = document.getElementById('qr-input-email');
const qrInputEmailSubject = document.getElementById('qr-input-email-subject');
const qrInputEmailBody = document.getElementById('qr-input-email-body');
const qrInputSMSNumber = document.getElementById('qr-input-sms-number');
const qrInputSMSMessage = document.getElementById('qr-input-sms-message');
const qrInputWifiName = document.getElementById('qr-input-wifi-name');
const qrInputWifiPassword = document.getElementById('qr-input-wifi-password');
const qrInputWifiEncryption = document.getElementById('qr-input-wifi-encryption');
const qrInputVCardName = document.getElementById('qr-input-vcard-name'); // حقول vCard الجديدة
const qrInputVCardPhone = document.getElementById('qr-input-vcard-phone');
const qrInputVCardEmail = document.getElementById('qr-input-vcard-email');
const qrInputVCardOrg = document.getElementById('qr-input-vcard-org');
const qrcodeContainer = document.getElementById('qrcode-container');
const qrcodeDiv = document.getElementById('qrcode');
const qrTypeButtons = document.querySelectorAll('.qr-type-button');
const inputLabelText = document.getElementById('input-label-text');
// مناطق الإدخال المختلفة
const urlInputArea = document.getElementById('url-input-area');
const textInputArea = document.getElementById('text-input-area');
const emailInputArea = document.getElementById('email-input-area');
const smsInputArea = document.getElementById('sms-input-area');
const wifiInputArea = document.getElementById('wifi-input-area');
const vcardInputArea = document.getElementById('vcard-input-area'); // منطقة vCard الجديدة
let currentQRType = 'url'; // النوع الافتراضي هو URL
qrTypeButtons.forEach(button => {
button.addEventListener('click', function() {
qrTypeButtons.forEach(btn => btn.classList.remove('active'));
this.classList.add('active');
currentQRType = this.dataset.type;
// إخفاء جميع مناطق الإدخال وإظهار المنطقة المناسبة فقط
urlInputArea.classList.add('hidden');
textInputArea.classList.add('hidden');
emailInputArea.classList.add('hidden');
smsInputArea.classList.add('hidden');
wifiInputArea.classList.add('hidden');
vcardInputArea.classList.add('hidden');
switch(currentQRType) {
case 'url':
urlInputArea.classList.remove('hidden');
break;
case 'text':
textInputArea.classList.remove('hidden');
break;
case 'email':
emailInputArea.classList.remove('hidden');
break;
case 'sms':
smsInputArea.classList.remove('hidden');
break;
case 'wifi':
wifiInputArea.classList.remove('hidden');
break;
case 'vcard': // إظهار منطقة vCard الجديدة
vcardInputArea.classList.remove('hidden');
break;
}
// تحديث نص placeholder و label بناءً على النوع المحدد (يمكنك تعديل هذا الجزء إذا لزم الأمر)
switch(currentQRType) {
case 'url':
inputLabelText.textContent = "أدخل رابط URL لإنشاء رمز QR:";
break;
case 'text':
inputLabelText.textContent = "أدخل النص لإنشاء رمز QR:";
break;
case 'email':
inputLabelText.textContent = "أدخل تفاصيل البريد الإلكتروني لإنشاء رمز QR:";
break;
case 'sms':
inputLabelText.textContent = "أدخل تفاصيل الرسائل القصيرة لإنشاء رمز QR:";
break;
case 'wifi':
inputLabelText.textContent = "أدخل تفاصيل WIFI لإنشاء رمز QR:";
break;
case 'vcard': // تحديث label لنوع vCard
inputLabelText.textContent = "أدخل معلومات الاتصال لإنشاء رمز QR vCard:";
break;
}
});
});
generateButton.addEventListener('click', generateQRCode);
function generateQRCode() {
let qrText = "";
switch(currentQRType) {
case 'url':
qrText = qrInputURL.value.trim();
break;
case 'text':
qrText = qrInputText.value.trim();
break;
case 'email':
const emailAddress = qrInputEmail.value.trim();
const emailSubject = qrInputEmailSubject.value.trim();
const emailBody = qrInputEmailBody.value.trim();
qrText = `mailto:${emailAddress}?subject=${encodeURIComponent(emailSubject)}&body=${encodeURIComponent(emailBody)}`;
break;
case 'sms':
const smsNumber = qrInputSMSNumber.value.trim();
const smsMessage = qrInputSMSMessage.value.trim();
qrText = `smsto:${smsNumber}:${encodeURIComponent(smsMessage)}`;
break;
case 'wifi':
const wifiName = qrInputWifiName.value.trim();
const wifiPassword = qrInputWifiPassword.value.trim();
const wifiEncryption = qrInputWifiEncryption.value;
qrText = `WIFI:S:${wifiName};T:${wifiEncryption};P:${wifiPassword};;`; // تنسيق WIFI بسيط
break;
case 'vcard': // تجميع بيانات vCard
const vcardName = qrInputVCardName.value.trim();
const vcardPhone = qrInputVCardPhone.value.trim();
const vcardEmail = qrInputVCardEmail.value.trim();
const vcardOrg = qrInputVCardOrg.value.trim();
qrText = `BEGIN:VCARD\nVERSION:3.0\nN:${vcardName}\nTEL:${vcardPhone}\nEMAIL:${vcardEmail}\nORG:${vcardOrg}\nEND:VCARD`; // تنسيق vCard بسيط
break;
default:
qrText = qrInputURL.value.trim(); // افتراضيًا: URL
}
if (!qrText) {
alert("الرجاء إدخال البيانات المطلوبة لإنشاء رمز QR.");
return;
}
qrcodeDiv.innerHTML = ""; // مسح أي رمز QR سابق
const qrcode = new QRCode(qrcodeDiv, {
text: qrText,
width: 256,
height: 256,
colorDark : "#000",
colorLight : "#fff",
correctLevel : QRCode.CorrectLevel.H
});
qrcodeContainer.style.display = 'block';
}
});
</script>
</body>
</html>
انا مهتم بمجال التقنية والربح من الانترنت واتطلع لنشر المزيد من المقالات التي تفيدكم
![Author](data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240" role="img" aria-label="Default profile avatar"%3E%3Cdefs%3E%3ClinearGradient id="g" x1="0" x2="1" y1="0" y2="1"%3E%3Cstop offset="0" stop-color="%236db3f2"/%3E%3Cstop offset="1" stop-color="%234a90e2"/%3E%3C/linearGradient%3E%3Cfilter id="soft" x="-50%25" y="-50%25" width="200%25" height="200%25"%3E%3CfeDropShadow dx="0" dy="6" stdDeviation="12" flood-opacity="0.12"/%3E%3C/filter%3E%3C/defs%3E%3Cg transform="translate(120,120)"%3E%3Ccircle r="108" fill="url(%23g)" filter="url(%23soft)"/%3E%3Ccircle r="88" fill="rgba(255,255,255,0.06)"/%3E%3C/g%3E%3Cg transform="translate(120,120)"%3E%3Ccircle cx="0" cy="-24" r="28" fill="%23ffffff" fill-opacity="0.95"/%3E%3Cpath d="M-56,64 C-56,36 -36,16 0,16 C36,16 56,36 56,64 L56,76 C56,88 44,100 0,100 C-44,100 -56,88 -56,76 Z" fill="%23ffffff" fill-opacity="0.95"/%3E%3Cellipse cx="0" cy="72" rx="52" ry="12" fill="%23000" opacity="0.04"/%3E%3C/g%3E%3C/svg%3E){kind=avatar}
تعليقات
إرسال تعليق