Stylish Login Widget Customizer & Code Generator (आसान लॉगिन/साइनअप विजेट बनाएं) V1a

ठीक है, मैं समझ गया हूँ। आप चाहते हैं कि कस्टमाइज़र इंटरफ़ेस (कंट्रोल पैनल, कोड बॉक्स, और प्रीव्यू सेक्शन) को और अधिक आकर्षक और आधुनिक बनाया जाए। इसमें शामिल हैं: 1. **लेआउट समायोजन:** कंट्रोल पैनल स्लाइडर और प्रीव्यू कंटेनर से पृष्ठभूमि और बॉर्डर हटाना, ताकि वे अधिक एकीकृत दिखें। 2. **स्क्रॉलिंग:** इन क्षेत्रों में सामग्री ओवरफ्लो होने पर स्क्रॉल बार जोड़ना और यह सुनिश्चित करना कि वे सभी उपकरणों पर ठीक काम करें। 3. **स्टाइलिंग:** * तीनों मुख्य सेक्शन (कंट्रोल, कोड, प्रीव्यू) के लिए अलग-अलग ग्रेडिएंट पृष्ठभूमि (5 मुख्य रंगों का उपयोग करके, विभिन्न कोणों के साथ)। * तीनों सेक्शन के लिए अलग-अलग बॉर्डर (5 मुख्य रंगों का उपयोग करके)। * स्टाइलिश फोंट, टेक्स्ट रंग (5 मुख्य रंगों का उपयोग करके), और एनिमेशन। * कोड बॉक्स को अधिक आकर्षक बनाना। 4. **स्लाइडर नेविगेशन:** * अगला/पिछला बटन को चौड़ा करना। * स्लाइड का शीर्षक (जो वर्तमान में बटनों के बीच में है) को बटनों के *नीचे* प्रदर्शित करना। आइए इन परिवर्तनों को लागू करें। **प्रमुख परिवर्तन:** 1. **CSS:** एक नया `

अपने सपनों का लॉगिन विजेट बनाएं - मिनटों में, बिना कोडिंग के! ✨

क्या आप अपनी वेबसाइट या ब्लॉग के लिए एक प्रोफेशनल और आकर्षक लॉगिन/साइनअप सिस्टम चाहते हैं, लेकिन जटिल कोडिंग से बचना चाहते हैं?

पेश है अल्टीमेट लॉगिन विजेट कस्टमाइज़र और कोड जेनरेटर! 🚀

यह शक्तिशाली ऑनलाइन टूल आपको एक खूबसूरत और पूरी तरह से कार्यात्मक लॉगिन/साइनअप विजेट बनाने की सुविधा देता है, जिसे आप अपनी साइट के डिज़ाइन से पूरी तरह मेल खाने के लिए कस्टमाइज़ कर सकते हैं। बोरिंग डिफ़ॉल्ट फॉर्म को भूल जाइए - अब आप एक ऐसा अनुभव बना सकते हैं जो आपके ब्रांड को दर्शाता है और उपयोगकर्ताओं को आकर्षित करता है!

यह टूल इतना शानदार क्यों है?

• 🎨 असीमित स्टाइलिंग: रंग, फ़ॉन्ट, बॉर्डर, पैडिंग, साइज़ - सब कुछ आपकी उंगलियों पर। अपने विजेट को बिल्कुल वैसा बनाएं जैसा आप चाहते हैं!
• ⏱️ रीयल-टाइम प्रीव्यू: जैसे ही आप बदलाव करते हैं, तुरंत देखें कि आपका विजेट कैसा दिखेगा। कोई अंदाज़ा लगाने की ज़रूरत नहीं!
• ⚙️ सरल कॉन्फ़िगरेशन: अपनी पहचान सेवा (जैसे फायरबेस) की कुंजियाँ आसानी से सेट करें।
• ✂️ रेडी-टू-यूज़ कोड: एक क्लिक में साफ, अनुकूलित HTML, CSS और जावास्क्रिप्ट कोड प्राप्त करें।
• <0xF0><0x9F><0xAA><0x99> सभी के लिए: चाहे आप शुरुआती हों या अनुभवी डेवलपर, यह टूल आपका समय और प्रयास बचाएगा।
• 💅 नया डिज़ाइन: अब और भी आकर्षक ग्रेडिएंट बैकग्राउंड और बेहतर UI के साथ!

नीचे दिए गए इंटरेक्टिव टूल का उपयोग करके अभी अपना कस्टम विजेट बनाना शुरू करें!

---

टूल का उपयोग कैसे करें: स्टेप-बाय-स्टेप गाइड

1. कंट्रोल पैनल पर जाएँ: नीचे "Customize Widget " सेक्शन को देखें।
2. सेटिंग्स के माध्यम से नेविगेट करें: आपको विभिन्न कस्टमाइज़ेशन विकल्पों के लिए कई स्लाइड दिखेंगे। < Previous और Next > बटन का उपयोग करके इन स्लाइड के बीच जाएँ। वर्तमान स्लाइड का नाम (जैसे "Backend Configuration", "Main Colors") अब नेविगेशन बटनों के *नीचे* दिखाई देगा।
3. कॉन्फ़िगरेशन सेट करें (पहला स्लाइड):
   • यदि आप फायरबेस जैसी सेवा का उपयोग कर रहे हैं, तो अपनी प्रोजेक्ट कुंजियाँ (apiKey, authDomain आदि) यहाँ दर्ज करें। यह सुनिश्चित करेगा कि आपका विजेट सही ढंग से काम करे।
   • (ध्यान दें: यह स्लाइड केवल नीचे "Full Widget Code " बॉक्स में कोड को अपडेट करती है, लाइव प्रीव्यू की दिखावट को नहीं।)
4. विजेट को स्टाइल करें (अन्य स्लाइड्स):
   • रंग चुनने के लिए कलर पिकर पर क्लिक करें।
   • आकार, पैडिंग, बॉर्डर की चौड़ाई आदि बदलने के लिए नंबर इनपुट का उपयोग करें।
   • फ़ॉन्ट फ़ैमिली बदलने के लिए टेक्स्ट इनपुट का उपयोग करें।
5. लाइव प्रीव्यू देखें:
   • जैसे ही आप स्टाइल बदलते हैं, "Live Preview " सेक्शन में विजेट का लुक तुरंत अपडेट हो जाएगा। यह सेक्शन अब स्क्रॉल करने योग्य है।
   • (याद रखें: यह प्रीव्यू केवल दिखावट के लिए है और वास्तविक लॉगिन फ़ंक्शन का परीक्षण नहीं करता है।)
6. तैयार कोड प्राप्त करें:
   • आपके सभी स्टाइल और कॉन्फ़िगरेशन परिवर्तन स्वचालित रूप से "Full Widget Code " टेक्स्टएरिया में कोड को अपडेट करते हैं।
7. कोड कॉपी करें:
   • जब आप अपने कस्टम विजेट से खुश हों, तो "Full Widget Code" बॉक्स के हेडर में "Copy " बटन पर क्लिक करें।
8. अपनी साइट पर उपयोग करें:
   • कॉपी किए गए कोड को अपनी वेबसाइट के HTML में या अपने ब्लॉग पोस्ट (HTML व्यू में) में पेस्ट करें जहाँ आप विजेट दिखाना चाहते हैं।

---

---

Customize Widget

Backend Configuration

API Key:

Auth Domain:

Project ID:

Storage Bucket:

Messaging Sender ID:

App ID:

(These settings only update the code in the 'Full Widget Code' box below)

Main Colors

Primary:

Danger:

Success:

Info:

Text & Backgrounds

Widget BG:

Dark Text:

Medium Text:

Light Text:

Placeholder:

Borders & Radius

Divider/Border:

Input Border:

Widget Border:

Widget Brdr W:px

Radius (Lg):px

Radius (Md):px

Input Focus:

Sizing & Font

Widget Width:px

W. Padding:px

Base Font:px

Font Family:

Input Pad V:px

Input Pad H:px

Button Pad V:px

Button Pad H:px

Message Styles

Error BG:

Error Border:

Success BG:

Success Brdr:

Success Text:

Info BG:

Info Border:

Provider Colors

Facebook:

GitHub:

Yahoo:

(Google button color is fixed)

Backend Configuration

Full Widget Code

<!doctype html> <!-- Login/Signup Widget - Centered --> <style> /* ======================================== */ /* CSS Variables & Basic Setup */ /* ======================================== */ :root { /* --- Style Variables (Updated by Controls) --- */ --primary-color: #007bff; --danger-color: #dc3545; --success-color: #28a745; --info-color: #17a2b8; --bg-light: #ffffff; --dark-text: #212529; --medium-text: #495057; --light-text: #6c757d; --grey-text: #adb5bd; --border-color: #dee2e6; --input-border-color: #ced4da; --widget-border-color: #007bff; --widget-border-width: 2px; --border-radius-lg: 6px; --border-radius-md: 4px; --input-focus-shadow-color: rgba(0, 123, 255, 0.15); --widget-width-preview: 300px; --widget-padding-preview: 18px; --widget-base-font-size: 13px; --widget-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --input-padding-vertical: 9px; --input-padding-horizontal: 10px; --button-padding-vertical: 9px; --button-padding-horizontal: 9px; --danger-light-bg: #ffe3e3; --danger-border-color: #f5c6cb; --success-light-bg: #eaf7ec; --success-border: #a1d9a5; --success-dark-text: #155724; --info-light-bg: #e8f7fa; --info-border: #bee5eb; --facebook-color: #1877F2; --github-color: #333333; --yahoo-color: #6001d2; /* --- Non-Controlled Style Variables --- */ --primary-light-bg: #e7f5ff; --bg-body: #f8f9fa; --box-shadow-light: 0px 1px 2px rgba(0, 0, 0, 0.05); --box-shadow-strong: 0px 2px 6px rgba(0, 0, 0, 0.1); } /* Widget styles... (Rest of CSS remains the same) */ .firebase-auth-widget-container, .firebase-auth-logout-box, .firebase-auth-popup { font-family: var(--widget-font); font-size: var(--widget-base-font-size); box-sizing: border-box; } .firebase-auth-widget-container *, .firebase-auth-logout-box *, .firebase-auth-popup * { box-sizing: border-box; } .firebase-auth-widget-hidden { display: none !important; } #firebase-auth-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.3); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 999; } #firebase-auth-backdrop.firebase-auth-widget-hidden { display: none !important; } .firebase-auth-widget-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: var(--widget-width-preview); background: var(--bg-light); padding: var(--widget-padding-preview); border-radius: var(--border-radius-lg); box-shadow: var(--box-shadow-strong); display: flex; flex-direction: column; align-items: center; z-index: 1000; border: var(--widget-border-width) solid var(--widget-border-color); color: var(--dark-text); max-height: 90vh; overflow-y: auto; } .firebase-auth-widget-box { width: 100%; text-align: center; } .firebase-auth-widget-box h2 { color: var(--dark-text); font-weight: 600; font-size: calc(var(--widget-base-font-size) * 1.1); margin: 0 0 12px 0; line-height: 1.3; flex-shrink: 0; } .firebase-auth-input-group { margin-bottom: 10px; width: 100%; flex-shrink: 0;} .firebase-auth-input-group input { width: 100%; padding: var(--input-padding-vertical) var(--input-padding-horizontal); border: 1px solid var(--input-border-color); border-radius: var(--border-radius-md); font-size: var(--widget-base-font-size); transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; background-color: var(--bg-light); color: var(--dark-text); margin-bottom: 6px; font-family: inherit; } .firebase-auth-input-group input:last-child { margin-bottom: 0; } .firebase-auth-input-group input::placeholder { color: var(--grey-text); opacity: 1; } .firebase-auth-input-group input:hover { background-color: #f8f9fa; } .firebase-auth-input-group input:focus { border-color: var(--primary-color); outline: none; box-shadow: 0 0 0 2px var(--input-focus-shadow-color); background-color: var(--bg-light); } .firebase-auth-action-btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: var(--button-padding-vertical) var(--button-padding-horizontal); border: none; cursor: pointer; border-radius: var(--border-radius-md); font-size: var(--widget-base-font-size); font-weight: 600; transition: all 0.2s ease; margin-top: 5px; font-family: inherit; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; } .firebase-auth-action-btn:hover { opacity: 1; transform: translateY(-1px); filter: brightness(1.1); } .firebase-auth-action-btn:disabled { opacity: 0.65; cursor: not-allowed; filter: brightness(1); transform: none; } .firebase-auth-sign-in-btn { background-color: var(--primary-color); color: white; } .firebase-auth-sign-up-btn { background-color: var(--success-color); color: white; } .firebase-auth-reset-btn { background-color: var(--info-color); color: white; } .firebase-auth-email-link-btn { color: var(--medium-text); background-color: #f1f3f5; border: 1px solid var(--input-border-color); margin-top: 10px; text-transform: none; letter-spacing: normal; font-weight: 500; } .firebase-auth-email-link-btn:hover { background-color: #e9ecef; border-color: #adb5bd; filter: brightness(1); } .firebase-auth-link-btn { background: none; border: none; color: var(--primary-color); font-size: calc(var(--widget-base-font-size) * 0.85); cursor: pointer; padding: 0; text-align: right; width: 100%; display: block; margin-top: 4px; margin-bottom: 8px; font-family: inherit; flex-shrink: 0;} .firebase-auth-link-btn:hover { text-decoration: underline; } .firebase-auth-toggle-link { background: none; border: none; color: var(--primary-color); font-size: calc(var(--widget-base-font-size) * 0.92); cursor: pointer; padding: 5px 0; text-align: center; width: 100%; display: block; margin-top: 10px; font-weight: 500; font-family: inherit; flex-shrink: 0;} .firebase-auth-toggle-link:hover { text-decoration: underline; } .firebase-auth-provider-btn { margin: 5px 0; color: white; text-transform: none; letter-spacing: normal; font-weight: 500; border-radius: var(--border-radius-md); } .firebase-auth-provider-btn:hover { filter: brightness(1.1); } .firebase-auth-google-btn { background: #DB4437; } .firebase-auth-facebook-btn-style { background: var(--facebook-color); } .firebase-auth-github-btn-style { background: var(--github-color); } .firebase-auth-yahoo-btn-style { background: var(--yahoo-color); } .firebase-auth-message { color: var(--danger-color); margin-top: 12px; margin-bottom: 12px; min-height: 1.4em; font-size: calc(var(--widget-base-font-size) * 0.92); font-weight: 500; text-align: center; width: 100%; line-height: 1.4; word-wrap: break-word; padding: 6px 8px; border-radius: var(--border-radius-md); border: 1px solid transparent; flex-shrink: 0; } .firebase-auth-message.info { color: var(--info-color); background-color: var(--info-light-bg); border-color: var(--info-border); } .firebase-auth-message.error { color: var(--danger-color); background-color: var(--danger-light-bg); border-color: var(--danger-border-color); } .firebase-auth-message.success { color: var(--success-dark-text); background-color: var(--success-light-bg); border-color: var(--success-border); } .firebase-auth-divider { font-size: calc(var(--widget-base-font-size) * 0.85); color: var(--light-text); margin: 15px 0; text-align: center; position: relative; width: 100%; line-height: 1; flex-shrink: 0; } .firebase-auth-divider::before, .firebase-auth-divider::after { content: ''; position: absolute; top: 50%; width: 37%; height: 1px; background-color: var(--border-color); transform: translateY(-50%); } .firebase-auth-divider::before { left: 0; } .firebase-auth-divider::after { right: 0; } .firebase-auth-legal-text { font-size: calc(var(--widget-base-font-size) * 0.77); color: var(--light-text); margin-top: 10px; line-height: 1.3; text-align: center; width: 100%; flex-shrink: 0; } .firebase-auth-legal-text a { color: var(--primary-color); text-decoration: none; } .firebase-auth-legal-text a:hover { text-decoration: underline; } .firebase-auth-popup { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: auto; max-width: 90%; min-width: 250px; background-color: var(--success-light-bg); color: var(--success-dark-text); border: 1px solid var(--success-border); border-radius: var(--border-radius-lg); padding: 18px 25px; box-shadow: var(--box-shadow-strong); z-index: 2000; text-align: center; font-size: 14px; font-weight: 600; line-height: 1.4; } .firebase-auth-popup p { margin: 0; padding: 0; } .firebase-auth-logout-box { width: auto; padding: 5px 8px; position: fixed; bottom: 15px; left: 15px; background-color: var(--bg-light); color: var(--dark-text); border-radius: 18px; box-shadow: var(--box-shadow-light); border: 1px solid var(--border-color); display: flex; align-items: center; gap: 6px; z-index: 9999; transition: background-color 0.2s ease, box-shadow 0.2s ease; } .firebase-auth-logout-box.firebase-auth-widget-hidden { display: none !important; } .firebase-auth-logout-box:hover { box-shadow: var(--box-shadow-strong); } .firebase-auth-profile-img { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border-color); display: block; } .firebase-auth-profile-initial { width: 24px; height: 24px; border-radius: 50%; background-color: var(--primary-color); color: white; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; line-height: 1; text-transform: uppercase; border: 1px solid var(--border-color); } .firebase-auth-logout-box button { background-color: transparent; color: var(--danger-color); border: 1px solid var(--danger-light-bg); padding: 3px 8px; font-size: 11px; font-weight: 600; cursor: pointer; margin: 0; width: auto; border-radius: var(--border-radius-md); transition: all 0.2s ease; font-family: inherit; } .firebase-auth-logout-box button:hover { background-color: var(--danger-color); color: white; border-color: var(--danger-color); text-decoration: none; transform: translateY(-1px); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); } #firebase-auth-reset-password-section p { font-size: calc(var(--widget-base-font-size) * 0.92); color: var(--medium-text); margin-bottom: 10px; line-height: 1.4; flex-shrink: 0; } </style> <!-- Backdrop Element --> <div id="firebase-auth-backdrop" class="firebase-auth-widget-hidden"></div> <!-- Login Widget HTML --> <div id="firebase-auth-login-popup" class="firebase-auth-widget-container firebase-auth-widget-hidden"> <div class="firebase-auth-widget-box"> <div id="firebase-auth-sign-in-section"><h2>Sign In</h2><div class="firebase-auth-input-group"><input type="email" id="firebase-auth-email-input-signin" placeholder="Enter email" aria-label="Email address for Sign In" autocomplete="email" /><input type="password" id="firebase-auth-password-input-signin" placeholder="Enter password" aria-label="Password for Sign In" autocomplete="current-password" /></div><button onclick="firebaseAuthToggleView('reset')" class="firebase-auth-link-btn">Forgot Password?</button><button id="firebase-auth-signin-btn" onclick="firebaseAuthSignInWithEmailPassword()" class="firebase-auth-action-btn firebase-auth-sign-in-btn">Sign In</button><button onclick="firebaseAuthToggleView('signup')" class="firebase-auth-toggle-link">New user? Sign Up</button></div> <div id="firebase-auth-sign-up-section" class="firebase-auth-widget-hidden"><h2>Create Account</h2><div class="firebase-auth-input-group"><input type="email" id="firebase-auth-email-input-signup" placeholder="Enter email" aria-label="Email address for Sign Up" autocomplete="email" /><input type="password" id="firebase-auth-password-input-signup" placeholder="Create password (min. 6 chars)" aria-label="Password for Sign Up" autocomplete="new-password" /><input type="password" id="firebase-auth-password-confirm-signup" placeholder="Confirm password" aria-label="Confirm Password for Sign Up" autocomplete="new-password" /></div><button onclick="firebaseAuthSignUpWithEmailPassword()" class="firebase-auth-action-btn firebase-auth-sign-up-btn">Sign Up</button><button onclick="firebaseAuthToggleView('signin')" class="firebase-auth-toggle-link">Already have an account? Sign In</button></div> <div id="firebase-auth-reset-password-section" class="firebase-auth-widget-hidden"><h2>Reset Password</h2><p>Enter your email address below and we'll send you a link to reset your password.</p><div class="firebase-auth-input-group"><input type="email" id="firebase-auth-email-input-reset" placeholder="Enter your email" aria-label="Email address for Password Reset" autocomplete="email" /></div><button onclick="firebaseAuthSendPasswordReset()" class="firebase-auth-action-btn firebase-auth-reset-btn">Send Reset Link</button><button onclick="firebaseAuthToggleView('signin')" class="firebase-auth-toggle-link">Back to Sign In</button></div> <p id="firebase-auth-message" class="firebase-auth-message" aria-live="polite"></p> <div id="firebase-auth-other-methods-divider" class="firebase-auth-divider">OR</div> <button id="firebase-auth-magic-link-btn" onclick="firebaseAuthSendEmailLink()" class="firebase-auth-action-btn firebase-auth-email-link-btn">Send Magic Link (Passwordless)</button> <div id="firebase-auth-provider-divider" class="firebase-auth-divider" style="margin-top: 10px;">OR USE</div> <button id="firebase-auth-google-btn" onclick="firebaseAuthLoginWithProvider('google')" class="firebase-auth-action-btn firebase-auth-provider-btn firebase-auth-google-btn">Continue with Google</button> <button id="firebase-auth-facebook-btn" onclick="firebaseAuthLoginWithProvider('facebook')" class="firebase-auth-action-btn firebase-auth-provider-btn firebase-auth-facebook-btn-style">Continue with Facebook</button> <button id="firebase-auth-github-btn" onclick="firebaseAuthLoginWithProvider('github')" class="firebase-auth-action-btn firebase-auth-provider-btn firebase-auth-github-btn-style">Continue with GitHub</button> <button id="firebase-auth-yahoo-btn" onclick="firebaseAuthLoginWithProvider('yahoo')" class="firebase-auth-action-btn firebase-auth-provider-btn firebase-auth-yahoo-btn-style">Continue with Yahoo</button> <p class="firebase-auth-legal-text">By signing in, you agree to our <a href="#">Policy</a> & <a href="#">Terms</a>.</p> </div> </div> <!-- Logout Box HTML --> <div id="firebase-auth-logout-box" class="firebase-auth-logout-box firebase-auth-widget-hidden"><img id="firebase-auth-profile-pic" src="" alt="User profile picture" class="firebase-auth-profile-img firebase-auth-widget-hidden" /><div id="firebase-auth-profile-fallback" class="firebase-auth-profile-initial firebase-auth-widget-hidden"><span id="firebase-auth-profile-initial-letter"></span></div><button onclick="firebaseAuthLogout()">Logout</button></div> <!-- Success Popup Box HTML --> <div id="firebase-auth-success-popup" class="firebase-auth-popup firebase-auth-widget-hidden"><p id="firebase-auth-popup-message"></p></div> <!-- Backend Service SDKs --> <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app-compat.js"></script> <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-auth-compat.js"></script> <!-- Application Script --> <script> (function() { "use strict"; // --- Backend Configuration --- // This object will be updated by the code generator based on user inputs const firebaseConfig = { apiKey: "PLACEHOLDER_API_KEY", authDomain: "PLACEHOLDER_AUTH_DOMAIN", projectId: "PLACEHOLDER_PROJECT_ID", storageBucket: "PLACEHOLDER_STORAGE_BUCKET", messagingSenderId: "PLACEHOLDER_SENDER_ID", appId: "PLACEHOLDER_APP_ID" }; // --- End Backend Configuration --- // --- Constants and Variables --- const EMAIL_STORAGE_KEY = 'loginWidgetEmailForSignIn'; const actionCodeSettings = { url: window.location.href.split('?')[0].split('#')[0], handleCodeInApp: true }; const SIGNUP_SUCCESS_DELAY = 4000; const RESET_SUCCESS_DELAY = 3000; const fallbackColors = ["#007bff","#6f42c1","#e83e8c","#dc3545","#fd7e14","#ffc107","#28a745","#20c997","#17a2b8","#6c757d"]; let auth = null; let app = null; // --- DOM Element References --- const loginPopup=document.getElementById('firebase-auth-login-popup'),logoutBox=document.getElementById('firebase-auth-logout-box'),backdrop=document.getElementById('firebase-auth-backdrop'),profilePic=document.getElementById('firebase-auth-profile-pic'),profileFallback=document.getElementById('firebase-auth-profile-fallback'),initialSpan=document.getElementById('firebase-auth-profile-initial-letter'),messageElement=document.getElementById('firebase-auth-message'),signInSection=document.getElementById('firebase-auth-sign-in-section'),signUpSection=document.getElementById('firebase-auth-sign-up-section'),resetPasswordSection=document.getElementById('firebase-auth-reset-password-section'),emailInputSignIn=document.getElementById('firebase-auth-email-input-signin'),passwordInputSignIn=document.getElementById('firebase-auth-password-input-signin'),signInBtn=document.getElementById('firebase-auth-signin-btn'),emailInputSignUp=document.getElementById('firebase-auth-email-input-signup'),passwordInputSignUp=document.getElementById('firebase-auth-password-input-signup'),passwordConfirmInputSignUp=document.getElementById('firebase-auth-password-confirm-signup'),emailInputReset=document.getElementById('firebase-auth-email-input-reset'),successPopup=document.getElementById('firebase-auth-success-popup'),popupMessageElement=document.getElementById('firebase-auth-popup-message'),otherMethodsDivider=document.getElementById('firebase-auth-other-methods-divider'),magicLinkBtn=document.getElementById('firebase-auth-magic-link-btn'),providerDivider=document.getElementById('firebase-auth-provider-divider'),googleBtn=document.getElementById('firebase-auth-google-btn'),facebookBtn=document.getElementById('firebase-auth-facebook-btn'),githubBtn=document.getElementById('firebase-auth-github-btn'),yahooBtn=document.getElementById('firebase-auth-yahoo-btn'); // --- Helper Functions --- const getVisibleEmailInput=()=>{ return signInSection && !signInSection.classList.contains('firebase-auth-widget-hidden') ? emailInputSignIn : (signUpSection && !signUpSection.classList.contains('firebase-auth-widget-hidden') ? emailInputSignUp : emailInputReset); }; function isValidEmail(e){return!!e&&/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(e).toLowerCase())}; function getUserColorIndex(e){if(!e)return 0;let t=0;for(let n=0;n<e.length;n++)t=e.charCodeAt(n)+((t<<5)-t),t&=t;return Math.abs(t)%fallbackColors.length}; function showLoginPopupMessage(e,t="error"){if(messageElement){messageElement.textContent=e;messageElement.className="firebase-auth-message";if(e&&t)messageElement.classList.add(t)}}; function clearMessages(){showLoginPopupMessage("")}; function showSuccessPopup(message, duration) { if (!successPopup || !popupMessageElement) return; popupMessageElement.textContent = message; successPopup.classList.remove('firebase-auth-widget-hidden'); setTimeout(() => { successPopup.classList.add('firebase-auth-widget-hidden'); }, duration); } function cleanUrlAfterSignIn(){if(window.history&&window.history.replaceState){const e=window.location.protocol+"//"+window.location.host+window.location.pathname+window.location.hash;try{window.history.replaceState({path:e},"",e)}catch(err){console.warn("Could not clean URL:",err)}}}; function displayGlobalError(e){console.error("GLOBAL WIDGET ERROR:",e);if(messageElement){showLoginPopupMessage(e,"error");if(loginPopup)loginPopup.classList.remove("firebase-auth-widget-hidden")}else if(loginPopup){loginPopup.innerHTML=`<p style='color:red; font-weight:bold; padding: 10px;'>${e}</p>`;loginPopup.classList.remove("firebase-auth-widget-hidden")}else{alert("Widget Error: "+e)}if(backdrop)backdrop.classList.remove("firebase-auth-widget-hidden")}; // --- Core Logic --- function initializeApp(){ const requiredElements = [loginPopup, logoutBox, backdrop, profilePic, profileFallback, initialSpan, messageElement, signInSection, signUpSection, resetPasswordSection, emailInputSignIn, passwordInputSignIn, signInBtn, emailInputSignUp, passwordInputSignUp, passwordConfirmInputSignUp, emailInputReset, successPopup, popupMessageElement]; if (requiredElements.some(el => !el)) { displayGlobalError("Widget Initialization Error: Missing required HTML elements."); return; } try { if (typeof firebase === "undefined" || !firebase.initializeApp || !firebase.auth) { throw new Error("Backend service SDKs not loaded correctly."); } // Use the dynamically generated firebaseConfig if (!firebase.apps.length) { app = firebase.initializeApp(firebaseConfig); } else { app = firebase.app(); } auth = firebase.auth(app); console.log("Authentication service initialized for project:", app.options.projectId); setupAuthentication(); handleEmailLinkSignInOnLoad(); } catch(e) { console.error("Initialization Failed:", e); displayGlobalError("Widget failed to start: " + (e.message || "Init error")); } }; function setupAuthentication(){if(!auth)return;auth.setPersistence(firebase.auth.Auth.Persistence.LOCAL).then(()=>{auth.onAuthStateChanged(handleAuthStateChange)}).catch(e=>{console.error("Persistence error:",e);auth.onAuthStateChanged(handleAuthStateChange)})}; window.firebaseAuthToggleView=e=>{if(!signInSection||!signUpSection||!resetPasswordSection)return;signInSection.classList.add("firebase-auth-widget-hidden");signUpSection.classList.add("firebase-auth-widget-hidden");resetPasswordSection.classList.add("firebase-auth-widget-hidden");successPopup&&successPopup.classList.add("firebase-auth-widget-hidden");clearMessages();let t=!0;"signin"===e?signInSection.classList.remove("firebase-auth-widget-hidden"):"signup"===e?signUpSection.classList.remove("firebase-auth-widget-hidden"):"reset"===e&&(resetPasswordSection.classList.remove("firebase-auth-widget-hidden"),t=!1);[otherMethodsDivider,magicLinkBtn,providerDivider,googleBtn,facebookBtn,githubBtn,yahooBtn].forEach(el=>{el&&el.classList.toggle("firebase-auth-widget-hidden",!t)})}; function handleAuthStateChange(e){/* ... (Authentication state change logic - unchanged) ... */ successPopup&&successPopup.classList.add("firebase-auth-widget-hidden");if(!loginPopup||!logoutBox||!backdrop||!profilePic||!profileFallback||!initialSpan||!passwordInputSignIn)return;const t=auth&&auth.isSignInWithEmailLink(window.location.href);if(e){loginPopup.classList.add("firebase-auth-widget-hidden");backdrop.classList.add("firebase-auth-widget-hidden");logoutBox.classList.remove("firebase-auth-widget-hidden");if(e.photoURL){profilePic.src=e.photoURL;profilePic.classList.remove("firebase-auth-widget-hidden");profileFallback.classList.add("firebase-auth-widget-hidden")}else{const i=(e.displayName?.charAt(0)||e.email?.charAt(0)||"U").toUpperCase(),c=getUserColorIndex(e.uid);initialSpan.textContent=i;if(profileFallback){profileFallback.style.backgroundColor=fallbackColors[c];profileFallback.classList.remove("firebase-auth-widget-hidden")}profilePic.classList.add("firebase-auth-widget-hidden")}console.log("User logged in:",e.uid);messageElement?.classList.contains("success")?setTimeout(()=>clearMessages(),3500):clearMessages();passwordInputSignIn.value="";if(passwordInputSignUp)passwordInputSignUp.value="";if(passwordConfirmInputSignUp)passwordConfirmInputSignUp.value="";if(emailInputReset)emailInputReset.value=""}else{logoutBox.classList.add("firebase-auth-widget-hidden");profilePic.classList.add("firebase-auth-widget-hidden");profileFallback.classList.add("firebase-auth-widget-hidden");passwordInputSignIn.value="";if(passwordInputSignUp)passwordInputSignUp.value="";if(passwordConfirmInputSignUp)passwordConfirmInputSignUp.value="";if(emailInputReset)emailInputReset.value="";console.log("User logged out or not logged in.");if(!t){loginPopup.classList.remove("firebase-auth-widget-hidden");backdrop.classList.remove("firebase-auth-widget-hidden");firebaseAuthToggleView("signin");clearMessages()}else{loginPopup.classList.add("firebase-auth-widget-hidden");backdrop.classList.add("firebase-auth-widget-hidden")}}}; window.firebaseAuthSignUpWithEmailPassword=()=>{/* ... (Signup logic - unchanged) ... */ if(!auth||!emailInputSignUp||!passwordInputSignUp||!passwordConfirmInputSignUp)return;const e=emailInputSignUp.value.trim(),t=passwordInputSignUp.value,n=passwordConfirmInputSignUp.value;clearMessages();if(!isValidEmail(e))return showLoginPopupMessage("Invalid email format","error"),void emailInputSignUp.focus();if(t.length<6)return showLoginPopupMessage("Password must be at least 6 characters","error"),void passwordInputSignUp.focus();if(t!==n)return showLoginPopupMessage("Passwords do not match","error"),void passwordConfirmInputSignUp.focus();showLoginPopupMessage("Creating account...","info");auth.createUserWithEmailAndPassword(e,t).then(t=>{console.log("Sign up OK:",t.user?.uid);clearMessages();showSuccessPopup("Account created! You can now sign in.", SIGNUP_SUCCESS_DELAY);if(emailInputSignUp)emailInputSignUp.value="";if(passwordInputSignUp)passwordInputSignUp.value="";if(passwordConfirmInputSignUp)passwordConfirmInputSignUp.value="";setTimeout(()=>{firebaseAuthToggleView("signin");if(emailInputSignIn)emailInputSignIn.value=e;if(passwordInputSignIn)passwordInputSignIn.focus()},SIGNUP_SUCCESS_DELAY)}).catch(handleAuthError)}; window.firebaseAuthSignInWithEmailPassword=()=>{/* ... (Signin logic - unchanged) ... */ if(!auth||!emailInputSignIn||!passwordInputSignIn||!signInBtn)return;const e=emailInputSignIn.value.trim(),t=passwordInputSignIn.value;clearMessages();if(!isValidEmail(e))return showLoginPopupMessage("Invalid email format","error"),void emailInputSignIn.focus();if(!t)return showLoginPopupMessage("Please enter your password","error"),void passwordInputSignIn.focus();signInBtn.disabled=!0;signInBtn.textContent="Signing In...";showLoginPopupMessage("Signing in...","info");auth.signInWithEmailAndPassword(e,t).then(e=>{console.log("Sign in OK:",e.user?.uid);}).catch(e=>{if(passwordInputSignIn)passwordInputSignIn.value="";handleAuthError(e)}).finally(()=>{if(signInBtn){signInBtn.disabled=!1;signInBtn.textContent="Sign In"}if(messageElement&&messageElement.classList.contains("info")&&!messageElement.classList.contains("error")&&!messageElement.classList.contains("success"))clearMessages()})}; window.firebaseAuthSendPasswordReset=()=>{/* ... (Password reset logic - unchanged) ... */ if(!auth||!emailInputReset)return;const e=emailInputReset.value.trim();clearMessages();if(!isValidEmail(e))return showLoginPopupMessage("Please enter a valid email address","error"),void emailInputReset.focus();showLoginPopupMessage("Sending password reset link...","info");auth.sendPasswordResetEmail(e,actionCodeSettings).then(()=>{console.log("Reset email sent:",e);showSuccessPopup("Password reset email sent. Check your inbox.", RESET_SUCCESS_DELAY);setTimeout(()=>{firebaseAuthToggleView("signin");if(emailInputReset)emailInputReset.value=""},RESET_SUCCESS_DELAY)}).catch(handleAuthError)}; function handleEmailLinkSignInOnLoad(){/* ... (Magic link signin logic - unchanged) ... */ if(backdrop)backdrop.classList.add("firebase-auth-widget-hidden");if(!auth||typeof auth.isSignInWithEmailLink!=="function")return;if(auth.isSignInWithEmailLink(window.location.href)){if(loginPopup)loginPopup.classList.remove("firebase-auth-widget-hidden");if(backdrop)backdrop.classList.remove("firebase-auth-widget-hidden");firebaseAuthToggleView("signin");showLoginPopupMessage("Verifying magic link...","info");let e=window.localStorage.getItem(EMAIL_STORAGE_KEY);if(!e){e=window.prompt("Please provide your email address again:");if(!e||!isValidEmail(e))return showLoginPopupMessage("Valid email required. Try the link again.","error"),void cleanUrlAfterSignIn()}auth.signInWithEmailLink(e,window.location.href).then(e=>{console.log("Email link sign-in OK:",e.user?.uid);window.localStorage.removeItem(EMAIL_STORAGE_KEY);cleanUrlAfterSignIn();}).catch(e=>{console.error("Email link sign-in error:",e);window.localStorage.removeItem(EMAIL_STORAGE_KEY);handleAuthError(e);cleanUrlAfterSignIn()})}}; window.firebaseAuthSendEmailLink=()=>{/* ... (Send magic link logic - unchanged) ... */ if(!auth)return void showLoginPopupMessage("Auth service unavailable","error");const e=getVisibleEmailInput();if(!e)return void showLoginPopupMessage("Email field not found","error");const t=e.value.trim();clearMessages();if(!isValidEmail(t))return showLoginPopupMessage("Enter email first","error"),void e.focus();showLoginPopupMessage("Sending magic link...","info");auth.sendSignInLinkToEmail(t,actionCodeSettings).then(()=>{console.log("Sign-in link sent to:",t);window.localStorage.setItem(EMAIL_STORAGE_KEY,t);showLoginPopupMessage("Magic link sent! Check your email.","success")}).catch(handleAuthError)}; window.firebaseAuthLoginWithProvider=e=>{/* ... (Provider login logic - unchanged) ... */ console.log("Login with:",e);if(!auth)return void showLoginPopupMessage("Auth service unavailable","error");clearMessages();let t,n=e.charAt(0).toUpperCase()+e.slice(1);try{switch(e.toLowerCase()){case"google":t=new firebase.auth.GoogleAuthProvider;n="Google";break;case"facebook":t=new firebase.auth.FacebookAuthProvider;n="Facebook";break;case"github":t=new firebase.auth.GithubAuthProvider;n="GitHub";break;case"yahoo":t=new firebase.auth.OAuthProvider("yahoo.com");n="Yahoo";break;default:throw new Error(`Unsupported provider: ${e}`)}}catch(err){return console.error(`Provider error ${n}:`,err),void showLoginPopupMessage(`Cannot setup ${n}`,"error")}showLoginPopupMessage(`Connecting to ${n}...`,"info");auth.signInWithPopup(t).then(e=>{console.log(`${n} sign-in OK:`,e.user?.uid);clearMessages()}).catch(e=>{if("auth/popup-closed-by-user"===e.code||"auth/cancelled-popup-request"===e.code){console.log(`${n} popup closed`);clearMessages()}else if("auth/account-exists-with-different-credential"===e.code){console.warn("Account exists",e.email);const provider=e.customData?.providerId||"other method";showLoginPopupMessage(`Email linked to ${provider}. Sign in that way.`,"error")}else{handleAuthError(e)}})}; window.firebaseAuthLogout=()=>{/* ... (Logout logic - unchanged) ... */ if(!auth)return console.error("Logout fail: No auth"),void alert("Logout failed: Service unavailable.");auth.signOut().then(()=>{console.log("Logout OK")}).catch(e=>{console.error("Logout error:",e);(loginPopup&&!loginPopup.classList.contains("firebase-auth-widget-hidden")&&messageElement)?showLoginPopupMessage("Logout failed","error"):alert("Logout failed: "+e.message)})}; function handleAuthError(e){/* ... (Error handling logic - unchanged) ... */ console.error("Auth Error:",e.code,e.message);let t="",n="error";switch(e.code){case"auth/invalid-login-credentials":case"auth/invalid-credential":t="Incorrect email or password.";break;case"auth/invalid-email":t="Invalid email format.";break;case"auth/email-already-in-use":t="Email already registered.";break;case"auth/weak-password":t="Password too short.";break;case"auth/requires-recent-login":t="Sign in again.",n="info";break;case"auth/too-many-requests":t="Too many attempts. Wait.",n="info";break;case"auth/network-request-failed":t="Network error.",n="info";break;case"auth/user-disabled":t="Account disabled.";break;case"auth/user-not-found":t="No account found with this email.";break;case"auth/wrong-password":t="Incorrect password.";break;case"auth/invalid-action-code":t="Link invalid/expired.";break;case"auth/operation-not-allowed":t="Method not enabled.";break;case"auth/popup-blocked":t="Popup blocked.";break;case"auth/popup-closed-by-user":case"auth/cancelled-popup-request":return void clearMessages();case"auth/account-exists-with-different-credential":t=`Email uses ${e.customData?.providerId||"other method"}.`;break;case"auth/unauthorized-domain":t="Domain not allowed.";break;case"auth/auth-domain-config-required":t="Config error.";break;default:console.warn("Unhandled Error:",e.code),t=`Unexpected issue (${e.code}).`}showLoginPopupMessage(t,n)}; // --- Run Application --- // DOM तैयार होने पर ऐप इनिशियलाइज़ करें "loading"===document.readyState?document.addEventListener("DOMContentLoaded",initializeApp):initializeApp(); })(); </script></!doctype>

Live Preview (Appearance Only)

Sign In

Create Account

Reset Password

Enter email for reset link.

OR

OR USE

By signing in, you agree to our Policy & Terms.

---

अपना कस्टमाइज़ किया हुआ विजेट कहाँ उपयोग करें?

इस टूल से जेनरेट किया गया कोड अत्यंत बहुमुखी है! आप इसे लगभग कहीं भी उपयोग कर सकते हैं जहाँ आप कस्टम HTML, CSS और जावास्क्रिप्ट जोड़ सकते हैं:

• ब्लॉगस्पॉट (Blogger): सीधे पोस्ट या पेज के HTML व्यू में पेस्ट करें, या गैजेट/विजेट के रूप में जोड़ें।
• वर्डप्रेस (WordPress): कस्टम HTML ब्लॉक (गुटेनबर्ग) का उपयोग करें, या टेक्स्ट विजेट (क्लासिक एडिटर/साइडबार) में डालें। आप "Insert Headers and Footers" जैसे प्लगइन का भी उपयोग कर सकते हैं।
• स्टैटिक HTML साइटें: कोड को सीधे अपने .html फ़ाइल में पेस्ट करें।
• स्टैटिक साइट जेनरेटर (Jekyll, Hugo, Gatsby आदि): कोड को अपने लेआउट या टेम्प्लेट फाइलों में शामिल करें।
• अन्य CMS (Drupal, Joomla): कस्टम कोड या मॉड्यूल/एक्सटेंशन जोड़ने के विकल्पों का उपयोग करें।
• ई-कॉमर्स प्लेटफ़ॉर्म (Shopify, BigCommerce): थीम कोड (जैसे Liquid फ़ाइलें) को संपादित करके जोड़ें (सावधानी से)।
• नो-कोड/लो-कोड प्लेटफ़ॉर्म (Webflow, Carrd, Bubble): उनके "Embed Code" या "Custom HTML" फ़ीचर का उपयोग करें।

कुछ महत्वपूर्ण बातें:

• बैकएंड सेटअप: याद रखें कि यह विजेट केवल फ्रंट-एंड (दिखावट और उपयोगकर्ता इंटरैक्शन) प्रदान करता है। वास्तविक उपयोगकर्ता प्रमाणीकरण को संभालने के लिए, आपको फायरबेस या किसी अन्य संगत बैकएंड सेवा को ठीक से कॉन्फ़िगर करने की आवश्यकता होगी (जैसे, Authentication सक्षम करना, Authorized Domains सेट करना)।
• प्लेटफ़ॉर्म सीमाएँ: कुछ प्लेटफ़ॉर्म कस्टम जावास्क्रिप्ट या बाहरी स्क्रिप्ट को लोड करने पर प्रतिबंध लगा सकते हैं। अपने प्लेटफ़ॉर्म के दस्तावेज़ देखें।
• सुरक्षा: टूल केवल क्लाइंट-साइड कॉन्फ़िगरेशन (जैसे फायरबेस वेब कुंजियाँ) का उपयोग करता है। सुनिश्चित करें कि आप कोड में कभी भी कोई संवेदनशील सर्वर-साइड कुंजी शामिल नहीं करते हैं।

---

तो इंतज़ार क्यों? इस टूल का उपयोग करके आज ही अपनी वेबसाइट के लिए एक शानदार, कस्टम लॉगिन अनुभव बनाना शुरू करें!

हमें उम्मीद है कि आपको यह लॉगिन विजेट कस्टमाइज़र टूल पसंद आएगा! अपनी रचनाएँ और प्रतिक्रिया नीचे कमेंट्स में साझा करें।

``` **मुख्य बदलावों का सारांश:** 1. **नया `

Sign In

Create Account

Reset Password

Enter your email address below and we'll send you a link to reset your password.

OR

OR USE

By signing in, you agree to our Policy & Terms.