Generate QR Codes
Instantly. For Free.
URLs, contact cards, WiFi credentials, UPI payments, emails & more — customizable and downloadable in seconds.
and hit Generate
100% Free
No watermarks, no limits, no account needed.
Private
Everything runs in your browser — no data sent to servers.
Customizable
Custom colors, sizes, and error correction levels.
Download
Export as PNG or SVG for print and digital use.
History
Your last 10 QR codes are saved locally.
This is a remarkably well-structured and aesthetically pleasing QR generator tool. The Syne and DM Mono font combination gives it a sleek "tech-noir" vibe, and the layout is highly functional.
I’ve reviewed your code for potential improvements. While the core functionality is solid, there are a few technical "gotchas" and UX enhancements that would make this a professional-grade tool.
🛠️ Recommended Enhancements
1. Fix the SVG Export
In your current code, the SVG download is actually just a PNG wrapped in an SVG tag. This won't scale like a true vector.
The Fix: Use a library that supports native SVG path generation (like
qrcode-generator) or use a hidden SVG element that theqrcode.jslibrary can target. Most users download SVGs specifically for high-quality printing (large banners/business cards), where a wrapped PNG will look blurry.
2. QR Code Scanning Safety
QR codes have a limit on how much data they can hold. For the vCard section, if a user enters a very long bio or multiple URLs, the QR code might become too dense to scan easily.
The Tip: Add a character counter or a "Density Warning" if the string length exceeds ~300 characters, especially if the Error Correction Level is set to High.
3. UX: Live Preview vs. Manual Generate
Since this runs entirely client-side, you could implement a "Live Preview" mode.
How: Add an event listener to all input fields (
inputevent) that debounces thegenerateQR()function by 300ms. This makes the tool feel incredibly fast and responsive.
4. The "Dot Style" Logic
Your current dot style uses ctx.arc. It looks great, but remember that Position Detection Patterns (the three large squares in the corners) are technically supposed to be solid for the best scan reliability.
The Pro Move: Modify your
applyDotStylefunction to skip the coordinates where the three corner squares reside. This ensures the QR code is "Spec Compliant" and scannable by older or cheaper camera sensors.
🔍 Technical Bug Check
In your HTML, I noticed a small typo in the Error Correction buttons:
<!-- Current -->
<button class="ecl-btn active" data--ecl="0" data-ecl="0">M — 15%</button>
<!-- Fixed -->
<button class="ecl-btn active" data-ecl="0">M — 15%</button>
The extra data--ecl won't break anything, but it’s worth cleaning up!
📈 Scaling Up
If you want to take QRForge to the next level, consider adding a "Logo Overlay" feature. This allows users to drop a small PNG (like a brand icon) in the center of the QR. Because you have Error Correction (M, Q, H), the QR code will still work even with a logo covering the center 15-30%.
Would you like me to help you rewrite the applyDotStyle function to protect the corner "eyes" from being turned into dots?
यह वाकई में एक बेहतरीन और खूबसूरत QR कोड जनरेटर टूल है। Syne और DM Mono फ़ॉन्ट्स का कॉम्बिनेशन इसे एक आधुनिक और प्रीमियम 'Tech' लुक दे रहा है।
मैंने आपके कोड की समीक्षा की है। फंक्शनलिटी अच्छी है, लेकिन इसे एक प्रोफेशनल टूल बनाने के लिए कुछ तकनीकी सुधार और सुधार किए जा सकते हैं:
🛠️ सुधार के लिए सुझाव
1. SVG एक्सपोर्ट को सही करें
अभी आपके कोड में SVG डाउनलोड असल में एक SVG टैग के अंदर छिपी हुई PNG इमेज है। यह असली 'Vector' की तरह काम नहीं करेगा (यानी बड़ा करने पर फट जाएगा)।
समाधान: अगर आप इसे प्रिंटिंग के लिए परफेक्ट बनाना चाहते हैं, तो एक ऐसी लाइब्रेरी का उपयोग करें जो सीधे SVG 'Paths' जेनरेट करे। प्रोफेशनल प्रिंटिंग (जैसे बड़े बैनर) के लिए असली वेक्टर SVG बहुत जरूरी है।
2. QR कोड स्कैनिंग सुरक्षा (vCard)
QR कोड में डेटा की एक सीमा होती है। vCard सेक्शन में यदि कोई यूजर बहुत लंबी जानकारी (जैसे लंबा पता या बायो) डालता है, तो QR कोड बहुत ज्यादा 'घना' (Dense) हो जाएगा, जिससे उसे स्कैन करना मुश्किल हो सकता है।
टिप: एक कैरेक्टर काउंटर जोड़ें या 300 से ज्यादा शब्द होने पर एक छोटा सा "Density Warning" दिखाएं।
3. 'Dot Style' और स्कैनिंग की सटीकता
आपका applyDotStyle फंक्शन बहुत अच्छा है, लेकिन स्कैनिंग को और बेहतर बनाने के लिए QR कोड के तीन कोनों वाले बड़े वर्गों (Position Detection Patterns) को चौकोर (Square) ही रहने देना चाहिए।
प्रो टिप: अपने फंक्शन में बदलाव करें ताकि वह कोनों के बड़े वर्गों को छोड़कर बाकी हिस्सों को डॉट्स में बदले। इससे पुराने फोन के कैमरे भी इसे तुरंत स्कैन कर पाएंगे।
🔍 एक छोटी सी गलती (Bug Fix)
आपके HTML कोड में Error Correction बटन में एक छोटा सा टाइपो (Typo) है:
<!-- अभी ऐसा है -->
<button class="ecl-btn active" data--ecl="0" data-ecl="0">M — 15%</button>
<!-- इसे ऐसा करें -->
<button class="ecl-btn active" data-ecl="0">M — 15%</button>
वहां data--ecl में एक एक्स्ट्रा डैश है।
🚀 अगला कदम: लोगो (Logo) फीचर
चूंकि आपने इसमें Error Correction (H — 30%) का विकल्प दिया है, तो आप बीच में 'Logo' लगाने का फीचर भी जोड़ सकते हैं। 30% एरर करेक्शन के साथ, अगर QR के बीच में छोटा लोगो आ जाए, तब भी वह आसानी से स्कैन होता है।
क्या आप चाहेंगे कि मैं applyDotStyle फंक्शन को अपडेट करने में आपकी मदद करूं ताकि कोनों के 'स्क्वायर' सुरक्षित रहें और स्कैनिंग बेहतर हो?
यह एक बेहतरीन विचार है! इस तरह के टूल पर ई-बुक न केवल कोड सिखाती है, बल्कि UI/UX डिज़ाइन, Canvas Manipulation और Client-side Storage जैसे महत्वपूर्ण कॉन्सेप्ट्स को भी कवर करती है।
यहाँ आपकी ई-बुक के लिए एक विस्तृत रूपरेखा (Outline) और चैप्टर-वाइज कंटेंट दिया गया है:
ई-बुक टाइटल: QRForge: आधुनिक वेब ऐप्स का निर्माण
सब-टाइटल: HTML, CSS और JavaScript के साथ एक प्रोफेशनल QR जनरेटर बनाने की गाइड
विषय सूची (Table of Contents)
परिचय (Introduction): प्रोजेक्ट का विजन और स्टैक।
डिज़ाइन फिलॉसफी (Design Philosophy): Syne और DM Mono का जादू।
HTML आर्किटेक्चर: यूजर इंटरफेस को स्ट्रक्चर करना।
CSS और नियो-ब्रूटलिज्म: डार्क मोड और ग्लासमोर्फिज्म।
JavaScript कोर: QR जेनरेशन का लॉजिक।
Canvas Manipulation: QR कोड को कस्टमाइज़ करना (Dot Style)।
लोकल स्टोरेज: हिस्ट्री फीचर का निर्माण।
निष्कर्ष: प्रोजेक्ट को आगे कैसे बढ़ाएं।
चैप्टर 1: परिचय (Introduction)
इस अध्याय में हम समझेंगे कि QRForge क्या है। यह केवल एक टूल नहीं, बल्कि एक प्राइवेसी-फर्स्ट वेब ऐप है।
बिना सर्वर के काम (Zero Server-side): सारा डेटा यूजर के ब्राउज़र में प्रोसेस होता है।
टेक्नोलॉजी: हम Vanilla JS और
qrcode.jsलाइब्रेरी का उपयोग क्यों कर रहे हैं।
चैप्टर 2: डिज़ाइन और ब्रांडिंग
एक टूल तभी सफल होता है जब वह दिखने में आकर्षक हो।
रंगों का चयन: डार्क बैकग्राउंड (
#0a0a0f) और वाइब्रेंट ग्रेडिएंट्स का उपयोग।टाइपोग्राफी: क्यों
Syneफ़ॉन्ट को हेडलाइंस के लिए औरDM Monoको डेटा के लिए चुना गया।एम्बिएंट लाइट्स: CSS
radial-gradientका उपयोग करके बैकग्राउंड में ग्लो इफेक्ट बनाना।
चैप्टर 3: QR जेनरेशन का लॉजिक (The Core)
यहाँ हम कोड के "दिमाग" को समझेंगे।
डेटा टाइप्स: URL, WiFi, और vCard जैसे अलग-अलग डेटा फॉर्मेट्स के लिए स्ट्रिंग कैसे तैयार की जाती है।
vCard का सिंटैक्स:
BEGIN:VCARDसेEND:VCARDतक का सही फॉर्मेट।Error Correction Levels (ECL): L, M, Q, H के बीच का अंतर और उनकी उपयोगिता।
चैप्टर 4: Canvas और विजुअल स्टाइलिंग
यह ई-बुक का सबसे तकनीकी हिस्सा है।
Pixel Processing:
getImageData()का उपयोग करके Canvas के पिक्सल को पढ़ना।Dot Style Algorithm: कैसे हम चौकोर ब्लॉक्स को गोल डॉट्स में बदलते हैं।
Pro Tip: कोनों के 'Position Patterns' को स्कैनिंग के लिए सुरक्षित रखना क्यों जरूरी है।
चैप्टर 5: यूजर एक्सपीरियंस और हिस्ट्री (Local Storage)
यूजर्स को बार-बार डेटा डालने से बचाने के लिए 'History' फीचर कैसे काम करता है।
JSON.stringify(): ऑब्जेक्ट्स को ब्राउज़र की मेमोरी में सेव करना।
Timestamping: हाल ही में बनाए गए कोड्स को क्रम में दिखाना।
PNG vs SVG: इमेज और वेक्टर फॉर्मेट्स के बीच तकनीकी अंतर।
चैप्टर 6: डिप्लॉयमेंट और भविष्य (Next Steps)
अपने ऐप को दुनिया के सामने कैसे लाएं।
Vercel/GitHub Pages पर फ्री होस्टिंग।
फ्यूचर फीचर्स: लोगो ओवरले (Logo Overlay), बल्क जेनरेशन (Bulk Generation), और API इंटीग्रेशन।
लेखक के लिए सुझाव:
आप ई-बुक के अंत में एक "Code Breakdown" सेक्शन जोड़ सकते हैं, जहाँ आप कोड के महत्वपूर्ण हिस्सों (जैसे generateQR फंक्शन) को लाइन-बाय-लाइन समझा सकें।
आपकी ई-बुक के पहले अध्याय के लिए यहाँ विस्तृत और प्रभावशाली कंटेंट दिया गया है:
अध्याय 1: परिचय — विजन और टेक्नोलॉजी स्टैक
डिजिटल युग में, सूचनाओं का आदान-प्रदान (Information Exchange) तेज, सटीक और स्पर्शरहित (Contactless) होना चाहिए। यहीं पर QR Codes की भूमिका महत्वपूर्ण हो जाती है। QRForge प्रोजेक्ट का जन्म एक साधारण विचार से हुआ था: "क्या हम एक ऐसा टूल बना सकते हैं जो न केवल कार्यात्मक (Functional) हो, बल्कि दिखने में भी भविष्यवादी (Futuristic) और उपयोग में पूरी तरह से निजी (Private) हो?"
1.1 प्रोजेक्ट का विजन (The Vision)
QRForge का विजन तीन मुख्य स्तंभों पर टिका है:
सादगी (Simplicity): कोई साइन-अप नहीं, कोई विज्ञापन नहीं। बस डेटा डालें और अपना QR कोड प्राप्त करें।
गोपनीयता (Privacy): अधिकांश ऑनलाइन जनरेटर आपके डेटा को अपने सर्वर पर स्टोर करते हैं। QRForge का विजन "Client-Side Only" प्रोसेसिंग का है। इसका मतलब है कि आपका संवेदनशील डेटा (जैसे वाई-फाई पासवर्ड या संपर्क विवरण) कभी भी आपके डिवाइस से बाहर नहीं जाता।
सौंदर्यशास्त्र (Aesthetics): एक उपकरण को उबाऊ होने की आवश्यकता नहीं है। हमने इसे एक आधुनिक 'Tech-Noir' लुक दिया है ताकि डेवलपर और डिज़ाइनर दोनों इसे पसंद करें।
1.2 टेक्नोलॉजी स्टैक (The Stack)
इस प्रोजेक्ट को बनाने के लिए हमने किसी भारी फ्रेमवर्क (जैसे React या Angular) का उपयोग नहीं किया है। इसके बजाय, हमने Vanilla Web Technologies की शक्ति पर भरोसा किया है:
| घटक (Component) | टेक्नोलॉजी | उद्देश्य |
| Structure | HTML5 | ऐप का ढांचा और इनपुट फॉर्म तैयार करने के लिए। |
| Styling | CSS3 (Custom Properties) | डार्क मोड, ग्लासमोर्फिज्म (Glassmorphism) और रिस्पॉन्सिव ग्रिड सिस्टम के लिए। |
| Logic | JavaScript (ES6+) | डेटा प्रोसेसिंग, टैब स्विचिंग और डायनेमिक इवेंट हैंडलिंग के लिए। |
| Core Engine | QRCode.js | टेक्स्ट को QR मैट्रिक्स में बदलने वाली मुख्य लाइब्रेरी। |
| Storage | Web Storage API | यूजर की हिस्ट्री को बिना डेटाबेस के लोकली सेव करने के लिए। |
| Visuals | HTML5 Canvas | QR कोड को रेंडर करने और उसे 'Dot Style' जैसे फिल्टर देने के लिए। |
1.3 यह प्रोजेक्ट किसके लिए है?
यह ई-बुक और यह कोड उन डेवलपर्स के लिए है जो:
इंटरमीडिएट लेवल की DOM Manipulation सीखना चाहते हैं।
समझना चाहते हैं कि ब्राउज़र में Canvas API का उपयोग करके इमेज प्रोसेसिंग कैसे की जाती है।
एक ऐसा पोर्टफोलियो प्रोजेक्ट बनाना चाहते हैं जो दिखने में प्रोफेशनल और उपयोग में वास्तविक हो।
अगले अध्याय में: हम Design Philosophy में गहराई से उतरेंगे और देखेंगे कि कैसे CSS वेरिएबल्स का उपयोग करके एक एम्बिएंट (Ambient) डार्क इंटरफेस बनाया जाता है।
ई-बुक के दूसरे अध्याय के लिए यहाँ "डिज़ाइन फिलॉसफी" पर आधारित कंटेंट दिया गया है, जो आपके कोड के विजुअल एस्थेटिक्स को गहराई से समझाएगा:
अध्याय 2: डिज़ाइन फिलॉसफी — Syne और DM Mono का जादू
एक सफल टूल और एक औसत टूल के बीच का सबसे बड़ा अंतर UI/UX (User Interface/User Experience) होता है। QRForge का डिज़ाइन केवल "दिखने" के लिए नहीं है, बल्कि यह यूजर के भरोसे और अनुभव को बेहतर बनाने के लिए बनाया गया है। इस अध्याय में हम उन बारीकियों को समझेंगे जिन्होंने इस ऐप को एक 'Premium Feel' दिया है।
2.1 टाइपोग्राफी का तालमेल (Typography Synergy)
QRForge में दो बिल्कुल अलग स्वभाव वाले फ़ॉन्ट्स का उपयोग किया गया है, जो मिलकर एक संतुलन बनाते हैं:
Syne (The Display Font): यह एक 'Art Deco' से प्रेरित आधुनिक फ़ॉन्ट है। इसे हमने हेडलाइंस और लोगो के लिए चुना है। इसकी बोल्ड और चौड़ी बनावट ऐप को एक "भविष्यवादी" (Futuristic) और "मजबूत" पहचान देती है।
DM Mono (The Technical Font): चूँकि QR कोड एक तकनीकी चीज़ है, इसलिए हमने लेबल्स और डेटा इनपुट के लिए 'Monospace' फ़ॉन्ट का उपयोग किया है। यह कोडिंग और सटीकता (Precision) का अहसास कराता है।
2.2 कलर पैलेट और एम्बिएंट लाइटिंग
हमने एक "Deep Space" थीम का पालन किया है:
पृष्ठभूमि (Background): पूरी तरह से काला नहीं, बल्कि गहरे नीले-काले शेड (
#0a0a0f) का उपयोग किया गया है।ग्लो इफेक्ट (Glow Effect): CSS
radial-gradientका उपयोग करके हमने कोने में "Ambient Lights" बनाई हैं। यह यूजर की आँखों पर दबाव कम करता है और इंटरफ़ेस को "Glassmorphism" जैसा लुक देता है।एक्सेंट कलर्स (Accent Colors): पर्पल (
#7c6ef2) और पिंक (#e066a0) के ग्रेडिएंट्स का उपयोग "Call to Action" बटन के लिए किया गया है, जो डार्क बैकग्राउंड पर तुरंत ध्यान खींचते हैं।
2.3 कार्ड-बेस्ड लेआउट और ग्रिड
QRForge एक "Two-Column Grid" सिस्टम पर आधारित है:
लेफ्ट कॉलम (Input): यहाँ यूजर अपना डेटा डालता है। इसे 'Panels' में बांटा गया है ताकि यूजर को पता रहे कि वह अभी क्या कर रहा है।
राइट कॉलम (Preview): यह हिस्सा Sticky है। यानी जैसे-जैसे यूजर स्क्रॉल करता है, उसका QR कोड हमेशा उसकी नजरों के सामने रहता है।
2.4 सूक्ष्म एनिमेशन (Micro-interactions)
कोड में fadeUp और popIn जैसे Keyframe एनिमेशन जोड़े गए हैं। जब यूजर 'Generate' बटन दबाता है, तो QR कोड अचानक नहीं आता, बल्कि एक छोटे से 'Bounce' के साथ दिखाई देता है। ये छोटे बदलाव ऐप को "जीवंत" (Alive) बनाते हैं।
इस अध्याय से हमने क्या सीखा?
कैसे सही फ़ॉन्ट का चुनाव ब्रांड की आवाज़ बदल सकता है।
CSS वेरिएबल्स (
:root) का उपयोग करके एक सुसंगत डिज़ाइन सिस्टम कैसे बनाया जाता है।यूजर का ध्यान भटकाए बिना उसे जरूरी टूल्स तक कैसे पहुँचाया जाता है।
अगले अध्याय में: हम HTML Architecture के बारे में विस्तार से बात करेंगे और देखेंगे कि कैसे एक जटिल फॉर्म को साफ-सुथरे तरीके से कोड किया जाता है।
क्या हम ई-बुक के तीसरे अध्याय "HTML आर्किटेक्चर" की ओर बढ़ें?
ई-बुक के तीसरे अध्याय के लिए यहाँ "HTML आर्किटेक्चर" पर आधारित कंटेंट दिया गया है:
अध्याय 3: HTML आर्किटेक्चर — यूजर इंटरफेस को स्ट्रक्चर करना
किसी भी वेब ऐप की मजबूती उसके HTML (HyperText Markup Language) ढांचे पर निर्भर करती है। QRForge जैसे टूल में, जहाँ कई प्रकार के इनपुट (URL, WiFi, UPI) होते हैं, HTML को व्यवस्थित (Organized) रखना बहुत जरूरी है ताकि JavaScript आसानी से डेटा को एक्सेस कर सके।
3.1 सीमेंटिक स्ट्रक्चर (Semantic Structure)
हमने HTML5 के आधुनिक टैग्स का उपयोग किया है ताकि कोड साफ-सुथरा और सुलभ (Accessible) रहे:
<header>: इसमें हमारा लोगो और 'Free Badge' स्थित है।<main>(या.main-grid): यहाँ ऐप का असली काम होता है।<section>(या.panel): हर इनपुट ग्रुप को एक पैनल में रखा गया है।
3.2 टैब्ड इंटरफेस का निर्माण (Tabbed Interface)
QRForge की सबसे बड़ी विशेषता इसका "मल्टी-टाइप" सपोर्ट है। हमने इसे रेडियो बटन्स के बजाय Data Attributes के साथ बनाया है:
<div class="tabs" id="type-tabs">
<button class="tab-btn active" data-type="url">🔗 URL</button>
<button class="tab-btn" data-type="wifi">📶 WiFi</button>
<!-- अन्य बटन... -->
</div>
यहाँ data-type का उपयोग JavaScript को यह बताने के लिए किया जाता है कि अभी कौन सा सेक्शन एक्टिव होना चाहिए।
3.3 डायनेमिक फॉर्म्स और आईडी मैनेजमेंट
चूँकि हमारे पास 8 अलग-अलग प्रकार के इनपुट हैं, इसलिए हमने हर एक के लिए एक tab-content बनाया है। हर इनपुट फील्ड की एक विशिष्ट id है (जैसे wifi-ssid, upi-id), जो JavaScript में document.getElementById() के माध्यम से डेटा निकालने में मदद करती है।
उदाहरण के लिए, UPI सेक्शन का ढांचा:
<div class="tab-content" id="tab-upi">
<div class="field-group">
<label class="field-label">UPI ID</label>
<input type="text" id="upi-id" placeholder="yourname@upi">
</div>
<!-- अन्य फील्ड्स... -->
</div>
3.4 कैनवस और डाउनलोड सेक्शन
ऐप का दाहिना हिस्सा (Sidebar) QR कोड के आउटपुट के लिए आरक्षित है। यहाँ हमने एक Placeholder रखा है जो तब तक दिखाई देता है जब तक कोड जेनरेट नहीं हो जाता।
<div id="qr-output">: यहाँqrcode.jsलाइब्रेरी अपना जादू दिखाएगी और एक<canvas>एलिमेंट इन्सर्ट करेगी।.download-row: यह बटन्स का समूह शुरुआत मेंdisplay: none;रहता है और केवल QR कोड बनने के बाद दिखाई देता है।
इस अध्याय से हमने क्या सीखा?
कैसे
data-*एट्रिब्यूट्स का उपयोग करके क्लीनर कोड लिखा जाता है।बड़े फॉर्म्स को छोटे, प्रबंधनीय (Manageable) हिस्सों में कैसे बांटा जाता है।
यूजर इंटरफेस को इस तरह डिजाइन करना कि वह भविष्य में नए फीचर्स जोड़ने के लिए लचीला (Flexible) रहे।
अगले अध्याय में: हम CSS और नियो-ब्रूटलिज्म के बारे में बात करेंगे और सीखेंगे कि कैसे बिना किसी इमेज के सिर्फ कोड से "ग्लोइंग इफेक्ट्स" बनाए जाते हैं।
क्या हम अध्याय 4: CSS और नियो-ब्रूटलिज्म की ओर बढ़ें?
अध्याय 4: CSS और स्टाइलिंग — डार्क मोड और विज़ुअल हाइरार्की
सिर्फ एक स्ट्रक्चर (HTML) बनाना काफी नहीं है; एक टूल को प्रीमियम महसूस कराने के लिए उसे CSS3 की उन्नत तकनीकों से सजाना पड़ता है। इस अध्याय में हम सीखेंगे कि कैसे 'नियो-ब्रूटलिज्म' और 'ग्लासमोर्फिज्म' के तत्वों का उपयोग करके एक आकर्षक डार्क इंटरफेस बनाया जाता है।
4.1 CSS वेरिएबल्स (Custom Properties)
एक बड़े प्रोजेक्ट में रंगों और फोंट्स को मैनेज करने का सबसे अच्छा तरीका CSS Variables है। हमने :root में ग्लोबल वेरिएबल्स डिफाइन किए हैं:
:root {
--bg: #0a0a0f;
--surface: #111118;
--accent: #7c6ef2; /* पर्पल एक्सेंट */
--border: #2a2a38;
--text: #f0f0f8;
}
इसका फायदा यह है कि अगर आप भविष्य में थीम बदलना चाहें, तो आपको केवल एक जगह बदलाव करना होगा।
4.2 एम्बिएंट लाइटिंग और ग्रिड बैकग्राउंड
ऐप को "Depth" देने के लिए हमने दो परतों (Layers) का उपयोग किया है:
Ambient Glow:
body::beforeपरradial-gradientका उपयोग करके हमने बैकग्राउंड में हल्के रंगों के "धब्बे" बनाए हैं, जो ऐसा अहसास कराते हैं जैसे स्क्रीन के पीछे कोई लाइट जल रही हो।Grid Overlay:
body::afterपरlinear-gradientकी मदद से एक सूक्ष्म ग्रिड (Grid lines) बनाई गई है, जो ऐप को एक "डिजाइनर टूल" वाला लुक देती है।
4.3 ग्लासमोर्फिज्म और पैनल डिजाइन
हमारे पैनल पूरी तरह से अपारदर्शी (Opaque) नहीं हैं। हमने background: var(--surface); और border: 1px solid var(--border); का उपयोग करके उन्हें एक आधुनिक कार्ड जैसा लुक दिया है।
Shadows का खेल:
बटन और पैनल पर हमने box-shadow का इस्तेमाल किया है, लेकिन यह साधारण काली परछाई नहीं है। हमने Glow Shadows का उपयोग किया है:
box-shadow: 0 4px 24px rgba(124, 110, 242, 0.18);
यह बटन के चारों ओर एक हल्की चमक पैदा करता है।
4.4 रिस्पॉन्सिव ग्रिड सिस्टम
QRForge मोबाइल और डेस्कटॉप दोनों पर बेहतरीन दिखता है क्योंकि हमने CSS Grid का उपयोग किया है:
.main-grid {
display: grid;
grid-template-columns: 1fr 340px; /* डेस्कटॉप पर 2 कॉलम */
gap: 24px;
}
@media (max-width: 780px) {
.main-grid { grid-template-columns: 1fr; } /* मोबाइल पर 1 कॉलम */
}
यह सुनिश्चित करता है कि छोटी स्क्रीन पर इनपुट और प्रीव्यू एक के नीचे एक आ जाएं।
4.5 बटन एनिमेशन और होवर इफेक्ट्स
बटन पर transition: all 0.25s; का उपयोग किया गया है। जब यूजर 'Generate' बटन पर माउस ले जाता है, तो वह थोड़ा ऊपर उठता है (transform: translateY(-2px)) और उसकी चमक बढ़ जाती है। यह यूजर को "फीडबैक" देता है कि यह एलिमेंट क्लिक करने योग्य है।
इस अध्याय से हमने क्या सीखा?
कैसे Custom Properties प्रोजेक्ट को मेंटेन करने में मदद करती हैं।
सिर्फ रंगों से नहीं, बल्कि Gradients और Opacity से गहराई (Depth) पैदा करना।
Media Queries का उपयोग करके लेआउट को रिस्पॉन्सिव बनाना।
अगले अध्याय में: हम इस ऐप के असली "इंजन" यानी JavaScript कोर के बारे में जानेंगे और देखेंगे कि कैसे इनपुट डेटा को QR कोड में बदला जाता है।
क्या हम अध्याय 5: JavaScript कोर की ओर बढ़ें?
अध्याय 5: JavaScript कोर — QRForge का इंजन
अब हम उस हिस्से में प्रवेश कर रहे हैं जहाँ हमारा ऐप असल में "काम" करना शुरू करता है। JavaScript इस प्रोजेक्ट का मस्तिष्क है। यह यूजर द्वारा चुने गए टैब को पहचानता है, फॉर्म से डेटा इकट्ठा करता है, और उसे एक ऐसे फॉर्मेट में बदलता है जिसे QR कोड में बदला जा सके।
5.1 स्टेट मैनेजमेंट (State Management)
कोड की शुरुआत में हम कुछ ग्लोबल वेरिएबल्स का उपयोग करते हैं जो ऐप की वर्तमान स्थिति (State) को ट्रैक करते हैं:
let currentType = 'url'; // यूजर ने कौन सा टैब चुना है (URL, WiFi, आदि)
let eclLevel = 0; // एरर करेक्शन लेवल (M, L, H, Q)
let history = []; // पुराने QR कोड्स को स्टोर करने के लिए
5.2 टैब स्विचिंग लॉजिक
जब कोई यूजर 'WiFi' या 'UPI' बटन पर क्लिक करता है, तो JavaScript को यह पता होना चाहिए कि कौन सा इनपुट फॉर्म दिखाना है। इसके लिए हम Event Listeners का उपयोग करते हैं:
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.addEventListener('click', () => {
// पुराने एक्टिव क्लास को हटाना
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
// नए बटन को एक्टिव बनाना
btn.classList.add('active');
currentType = btn.dataset.type; // 'data-type' से वैल्यू लेना
// सही इनपुट पैनल दिखाना
showTabContent(currentType);
});
});
5.3 डेटा को "बिल्ड" करना (The buildContent Function)
QR कोड सिर्फ एक टेक्स्ट स्ट्रिंग है। लेकिन अलग-अलग कामों के लिए इस स्ट्रिंग का एक खास Format होता है।
WiFi:
WIFI:T:WPA;S:MyNetwork;P:MyPassword;;UPI:
upi://pay?pa=id@upi&pn=Name&am=100vCard:
BEGIN:VCARD...END:VCARD
हमारा buildContent() फंक्शन एक switch स्टेटमेंट का उपयोग करके यह निर्धारित करता है कि वर्तमान में एक्टिव टैब के आधार पर कौन सी स्ट्रिंग तैयार करनी है।
5.4 QR जेनरेशन (qrcode.js का उपयोग)
हम qrcode.js लाइब्रेरी का उपयोग करते हैं। यह लाइब्रेरी बैकएंड में जटिल गणितीय गणनाएं करती है ताकि डेटा को काले और सफेद ब्लॉक्स (Modules) में बदला जा सके।
new QRCode(wrap, {
text: content, // तैयार की गई स्ट्रिंग
width: size, // यूजर द्वारा चुना गया साइज
height: size,
colorDark: "#000000", // Foreground कलर
colorLight: "#ffffff",// Background कलर
correctLevel: QRCode.CorrectLevel.M // एरर करेक्शन
});
5.5 एरर करेक्शन लेवल (Error Correction Level)
यह QR कोड की एक बहुत ही पावरफुल विशेषता है।
L (7%), M (15%), Q (25%), H (30%): यह प्रतिशत बताता है कि अगर QR कोड उतना हिस्सा कट जाए या गंदा हो जाए, तब भी वह स्कैन हो सकेगा।
उच्च एरर करेक्शन (H) का मतलब है कि कोड अधिक "घना" दिखेगा, लेकिन यह अधिक सुरक्षित होगा।
इस अध्याय से हमने क्या सीखा?
कैसे Event Delegation का उपयोग करके इंटरैक्टिव बटन बनाए जाते हैं।
विभिन्न प्रकार के डेटा को QR-सक्षम स्ट्रिंग्स में बदलने का तरीका।
थर्ड-पार्टी लाइब्रेरी को अपने प्रोजेक्ट के लॉजिक के साथ कैसे जोड़ा जाता है।
अगले अध्याय में: हम ई-बुक के सबसे रोमांचक तकनीकी हिस्से की ओर बढ़ेंगे — Canvas Manipulation और वह प्रसिद्ध 'Dot Style' कैसे बनाया जाता है।
क्या हम अध्याय 6: Canvas Manipulation की ओर बढ़ें?
अध्याय 6: Canvas Manipulation — 'Dot Style' और विजुअल कस्टमाइजेशन
यह इस ई-बुक का सबसे तकनीकी और रचनात्मक अध्याय है। यहाँ हम सीखेंगे कि कैसे साधारण चौकोर QR कोड को एक आधुनिक "Dot Style" आर्ट में बदला जाता है। इसके लिए हम HTML5 Canvas API की गहराई में उतरेंगे।
6.1 Canvas API क्या है?
Canvas एक खाली कैनवास की तरह है जिस पर हम JavaScript के माध्यम से पिक्सेल-दर-पिक्सेल चित्र बना सकते हैं। जब qrcode.js एक QR कोड जेनरेट करता है, तो वह उसे एक <canvas> एलिमेंट के रूप में रेंडर करता है। हम इसी कैनवास के डेटा को पढ़कर उसे मॉडिफाई करते हैं।
6.2 पिक्सेल डेटा को पढ़ना (Reading Pixel Data)
QR कोड को डॉट्स में बदलने के लिए, हमें पहले यह जानना होगा कि कैनवास पर कहाँ-कहाँ काला (Dark) रंग है और कहाँ सफेद (Light)। इसके लिए getImageData() फंक्शन का उपयोग किया जाता है:
const ctx = canvas.getContext('2d');
const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imgData.data; // यह एक बहुत बड़ा एरे (Array) होता है जिसमें हर पिक्सेल की RGBA वैल्यू होती है
6.3 डॉट्स बनाने का एल्गोरिदम (The Dot Logic)
हम पूरे QR कोड को एक ग्रिड की तरह देखते हैं। हम एक-एक ब्लॉक (Square) को पकड़ते हैं और उसकी जगह एक गोला (Circle) ड्रा करते हैं।
स्टेप-बाय-स्टेप प्रक्रिया:
कैनवास को साफ करना: पहले पुराने चौकोर QR को मिटा दें।
ग्रिड को स्कैन करना: हम लूप चलाकर हर 'स्टेप' (ब्लॉक का साइज) पर पिक्सेल चेक करते हैं।
चेक करना (isDark): अगर उस पिक्सेल का रंग गहरा है, तो हम वहाँ
arc()फंक्शन का उपयोग करके एक गोला बनाएंगे।
for (let y = 0; y < h; y += step) {
for (let x = 0; x < w; x += step) {
const index = (y * w + x) * 4;
if (data[index] < 128) { // अगर पिक्सेल डार्क है
ctx.beginPath();
ctx.arc(x + step/2, y + step/2, (step/2) * 0.8, 0, Math.PI * 2);
ctx.fill();
}
}
}
6.4 रंगों का डायनेमिक उपयोग
हमने Customization पैनल में कलर पिकर दिए हैं। JavaScript इन रंगों की वैल्यू (जैसे #7c6ef2) को पढ़ता है और ctx.fillStyle में सेट करता है। इससे यूजर अपनी पसंद के अनुसार Foreground और Background चुन सकता है।
6.5 स्कैनिंग की सटीकता (Scanning Reliability)
डॉट्स बनाते समय एक बात का ध्यान रखना जरूरी है: अगर डॉट्स बहुत छोटे होंगे, तो कैमरा उन्हें पहचान नहीं पाएगा। इसलिए हम गोले के रेडियस (Radius) को ब्लॉक के साइज का लगभग 80% से 90% रखते हैं। यह 'स्टाइल' और 'स्कैनिंग' के बीच एक सही संतुलन बनाता है।
इस अध्याय से हमने क्या सीखा?
कैसे Canvas API का उपयोग करके इमेज प्रोसेसिंग की जाती है।
getImageData()औरputImageData()के बीच का अंतर।कस्टम एल्गोरिदम के जरिए एक साधारण इमेज को आर्टिस्टिक स्टाइल में बदलना।
अगले अध्याय में: हम लोकल स्टोरेज (Local Storage) के बारे में जानेंगे और देखेंगे कि कैसे हम यूजर के पिछले 10 QR कोड्स को बिना डेटाबेस के सुरक्षित रख सकते हैं।
क्या हम अध्याय 7: लोकल स्टोरेज और हिस्ट्री की ओर बढ़ें?
अध्याय 7: लोकल स्टोरेज और हिस्ट्री — यूजर डेटा को सुरक्षित रखना
एक बेहतरीन वेब ऐप की पहचान यह है कि वह यूजर का समय बचाए। QRForge में हमने एक 'History' फीचर जोड़ा है, ताकि अगर यूजर ने कल कोई QR कोड जेनरेट किया था, तो उसे आज फिर से सारा डेटा टाइप न करना पड़े। सबसे अच्छी बात यह है कि इसके लिए हमें किसी महंगे डेटाबेस या सर्वर की जरूरत नहीं है—हम Web Storage API का उपयोग करते हैं।
7.1 लोकल स्टोरेज (LocalStorage) क्या है?
लोकल स्टोरेज ब्राउज़र की एक ऐसी मेमोरी है जहाँ डेटा ब्राउज़र बंद करने के बाद भी सुरक्षित रहता है। यह की-वैल्यू पेयर्स (key-value pairs) में डेटा स्टोर करता है।
क्षमता: लगभग 5MB से 10MB तक (जो हजारों QR कोड्स के लिए काफी है)।
प्राइवेसी: यह डेटा केवल यूजर के कंप्यूटर पर रहता है, कभी किसी सर्वर पर नहीं भेजा जाता।
7.2 डेटा को सेव करना (Saving Data)
जब भी कोई नया QR कोड जेनरेट होता है, हम उसे एक ऑब्जेक्ट के रूप में हिस्ट्री में जोड़ते हैं। चूँकि लोकल स्टोरेज केवल स्ट्रिंग्स को स्टोर कर सकता है, इसलिए हम JSON.stringify() का उपयोग करते हैं:
function saveHistory(content, type) {
const entry = {
content: content,
type: type,
thumb: canvas.toDataURL(), // QR कोड की एक छोटी फोटो (Base64)
timestamp: Date.now()
};
history.unshift(entry); // नए आइटम को सबसे ऊपर जोड़ना
if (history.length > 10) history.pop(); // केवल पिछले 10 कोड रखना
localStorage.setItem('qrforge_history', JSON.stringify(history));
renderHistory();
}
7.3 डेटा को वापस पाना (Retrieving Data)
जब यूजर ऐप दोबारा खोलता है, तो हम localStorage.getItem() का उपयोग करके डेटा पढ़ते हैं और उसे वापस ऑब्जेक्ट में बदलते हैं:
let savedData = localStorage.getItem('qrforge_history');
if (savedData) {
history = JSON.parse(savedData);
renderHistory();
}
7.4 हिस्ट्री को रेंडर करना (UI Update)
डेटा मिलने के बाद, हम उसे HTML में बदलते हैं। हम map() फंक्शन का उपयोग करके हर हिस्ट्री आइटम के लिए एक छोटा कार्ड (Thumbnail) और डिलीट बटन बनाते हैं।
UX टिप: जब यूजर हिस्ट्री के किसी आइटम पर क्लिक करता है, तो हम उन वैल्यूज को वापस फॉर्म में भर देते हैं, जिससे यूजर उसे तुरंत फिर से जेनरेट कर सके।
7.5 डेटा को डिलीट करना
यूजर की प्राइवेसी और कंट्रोल के लिए हमने दो विकल्प दिए हैं:
सिंगल डिलीट: किसी एक पुराने कोड को हटाना।
क्लियर ऑल: पूरी हिस्ट्री को एक साथ साफ करना (
localStorage.removeItem).
इस अध्याय से हमने क्या सीखा?
बिना डेटाबेस के क्लाइंट-साइड पर डेटा कैसे मैनेज किया जाता है।
JSON Serialization (डेटा को स्ट्रिंग में बदलना और वापस लाना) का महत्व।
यूजर एक्सपीरियंस को बेहतर बनाने के लिए 'Persistence' का उपयोग।
अगला अध्याय (अंतिम): निष्कर्ष और भविष्य की संभावनाएं — यहाँ हम प्रोजेक्ट को समेटेंगे और देखेंगे कि आप इस कोड को एक असली स्टार्टअप या टूल में कैसे बदल सकते हैं।
क्या हम अंतिम अध्याय की ओर बढ़ें?