DOM और Web Browser Environment क्या है? (DOM and Web Browser Environments in Hindi)
DOM और Web Browser Environment क्या है? (DOM and Web Browser Environments in Hindi)
DOM और Web Browser Environment क्या है? (DOM and Web Browser Environments in Hindi)
परिचय
JavaScript का उपयोग मुख्य रूप से वेब ब्राउज़र में किया जाता है, जहां यह वेब पेज को डायनामिक और इंटरएक्टिव बनाने में मदद करता है। JavaScript के दो महत्वपूर्ण घटक होते हैं: DOM (Document Object Model) और Web Browser Environment। DOM वेब पेज की संरचना को नियंत्रित करता है, जबकि ब्राउज़र एनवायरनमेंट JavaScript कोड के निष्पादन के लिए आवश्यक सुविधाएँ प्रदान करता है।
1. DOM (Document Object Model) क्या है?
DOM एक प्रोग्रामिंग इंटरफेस (API) है, जो HTML और XML डॉक्यूमेंट को ट्री-स्ट्रक्चर में प्रस्तुत करता है। DOM के माध्यम से हम वेब पेज के HTML एलिमेंट्स को एक्सेस, एडिट, हटाने (delete) और जोड़ने (add) का काम कर सकते हैं।
DOM Tree का स्ट्रक्चर
DOM एक ट्री (Tree) स्ट्रक्चर में HTML डॉक्यूमेंट को प्रस्तुत करता है। उदाहरण के लिए:
├──
│ ├──
│ ├── <meta>
├── <body>
├── <h1>
├── <p>
├── <div>
</code>
</pre>
<h3>DOM के तीन मुख्य घटक</h3>
<ul>
<li><b>Elements:</b> HTML टैग्स जैसे <code><h1></code>, <code><p></code>, <code><div></code>।</li>
<li><b>Attributes:</b> HTML टैग्स के गुण जैसे <code>id</code>, <code>class</code>, <code>src</code>।</li>
<li><b>Text:</b> HTML टैग्स के अंदर लिखी गई सामग्री।</li>
</ul>
<h2>2. DOM के माध्यम से HTML को कैसे एक्सेस करें?</h2>
<p>JavaScript हमें DOM को एक्सेस करने के लिए कई विधियाँ प्रदान करता है।</p>
<h3>2.1. getElementById()</h3>
<p>किसी <code>id</code> वाले एलिमेंट को एक्सेस करने के लिए।</p>
<pre>
<code>
let heading = document.getElementById("main-heading");
console.log(heading.innerHTML);
</code>
</pre>
<h3>2.2. getElementsByClassName()</h3>
<p>एक ही <code>class</code> वाले सभी एलिमेंट्स को एक्सेस करने के लिए।</p>
<pre>
<code>
let elements = document.getElementsByClassName("paragraph");
console.log(elements[0].innerHTML);
</code>
</pre>
<h3>2.3. querySelector()</h3>
<p>CSS सेलेक्टर की तरह किसी भी एलिमेंट को एक्सेस करने के लिए।</p>
<pre>
<code>
let para = document.querySelector(".paragraph");
console.log(para.innerHTML);
</code>
</pre>
<h2>3. DOM के माध्यम से HTML को कैसे अपडेट करें?</h2>
<p>JavaScript का उपयोग करके DOM के एलिमेंट्स को बदला जा सकता है।</p>
<h3>3.1. innerHTML के माध्यम से</h3>
<pre>
<code>
document.getElementById("main-heading").innerHTML = "नया टेक्स्ट!";
</code>
</pre>
<h3>3.2. style प्रॉपर्टी के माध्यम से</h3>
<pre>
<code>
document.getElementById("main-heading").style.color = "red";
</code>
</pre>
<h2>4. Web Browser Environment क्या है?</h2>
<p>Web Browser Environment वह वातावरण (environment) होता है, जिसमें JavaScript कोड वेब ब्राउज़र पर चलता है। इसमें निम्नलिखित मुख्य घटक होते हैं:</p>
<h3>4.1. Window Object</h3>
<p>JavaScript में <b>window</b> सबसे शीर्ष (top-level) ऑब्जेक्ट होता है, जिसमें ब्राउज़र से संबंधित सभी जानकारी होती है।</p>
<h4>Example: Window Object</h4>
<pre>
<code>
console.log(window.innerHeight); // ब्राउज़र विंडो की ऊँचाई
console.log(window.innerWidth); // ब्राउज़र विंडो की चौड़ाई
</code>
</pre>
<h3>4.2. Document Object</h3>
<p><b>document</b> ऑब्जेक्ट HTML डॉक्यूमेंट को एक्सेस करने के लिए उपयोग किया जाता है।</p>
<h4>Example: Document Object</h4>
<pre>
<code>
console.log(document.title); // वेब पेज का टाइटल
console.log(document.URL); // वेब पेज का URL
</code>
</pre>
<h3>4.3. Navigator Object</h3>
<p><b>navigator</b> ऑब्जेक्ट ब्राउज़र की जानकारी प्रदान करता है।</p>
<h4>Example: Navigator Object</h4>
<pre>
<code>
console.log(navigator.userAgent); // ब्राउज़र का नाम और वर्शन
console.log(navigator.language); // ब्राउज़र की भाषा
</code>
</pre>
<h3>4.4. Location Object</h3>
<p><b>location</b> ऑब्जेक्ट वर्तमान वेब पेज का URL दिखाता है और पेज को रीडायरेक्ट भी कर सकता है।</p>
<h4>Example: Location Object</h4>
<pre>
<code>
console.log(location.href); // वर्तमान पेज का URL
// location.href = "https://www.google.com"; // गूगल पर रीडायरेक्ट
</code>
</pre>
<h3>4.5. History Object</h3>
<p><b>history</b> ऑब्जेक्ट ब्राउज़र के बैक और फॉरवर्ड नेविगेशन को नियंत्रित करता है।</p>
<h4>Example: History Object</h4>
<pre>
<code>
// पिछला पेज खोलने के लिए
history.back();
// अगला पेज खोलने के लिए
history.forward();
</code>
</pre>
<h2>5. Events और Event Handling</h2>
<p>JavaScript में <b>इवेंट्स</b> का उपयोग उपयोगकर्ता की गतिविधियों (जैसे <b>क्लिक, कीबोर्ड प्रेस, माउस मूवमेंट</b>) को नियंत्रित करने के लिए किया जाता है।</p>
<h3>Example: Event Handling</h3>
<pre>
<code>
document.getElementById("btn").addEventListener("click", function() {
alert("बटन क्लिक किया गया!");
});
</code>
</pre>
<h2>6. Web Storage API</h2>
<p>Web Browser Environment में <b>Local Storage</b> और <b>Session Storage</b> जैसी विशेषताएँ होती हैं, जो ब्राउज़र में डेटा को स्टोर करने की अनुमति देती हैं।</p>
<h3>Example: Local Storage</h3>
<pre>
<code>
localStorage.setItem("username", "Rahul");
console.log(localStorage.getItem("username"));
</code>
</pre>
<h2>निष्कर्ष</h2>
<p><b>DOM</b> और <b>Web Browser Environment</b> वेब डेवलपमेंट में एक महत्वपूर्ण भूमिका निभाते हैं। DOM हमें HTML डॉक्यूमेंट को एक्सेस और संशोधित करने की सुविधा देता है, जबकि ब्राउज़र एनवायरमेंट हमें विभिन्न ब्राउज़र सुविधाओं तक पहुंच प्रदान करता है। JavaScript के साथ इन दोनों अवधारणाओं को समझना आवश्यक है, क्योंकि ये वेब डेवलपमेंट के लिए आवश्यक हैं।</p> </div>
</div>
<!-- Tab 2 -->
<div id="tab2" class="tab-content hidden">
<div class="bg-white p-6 rounded-lg shadow">
<br>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="col-span-1">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">Related Articles</h2>
<div class="space-y-6">
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 mb-2 line-clamp-2">PHP में Cookies और Session का उपयोग (Cookies and Session in PHP in Hindi)</h3>
<p class="text-gray-600 text-sm mb-3 line-clamp-2">PHP में Cookies और Session का उपयोग (Cookies and Session in PHP in Hindi)
पर...</p>
<a href="https://myprojecthd.in/blog/cookies-and-session-in-php-in-hindi" class="inline-block bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
Read More →
</a>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 mb-2 line-clamp-2">PHP में ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग (OOP) का परिचय (Object Oriented Programming with PHP in Hindi)</h3>
<p class="text-gray-600 text-sm mb-3 line-clamp-2">PHP में ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग (OOP) का ...</p>
<a href="https://myprojecthd.in/blog/object-oriented-programming-with-php-in-hindi" class="inline-block bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
Read More →
</a>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 mb-2 line-clamp-2">PHP का परिचय और बुनियादी सिंटैक्स (Introduction and Basic Syntax of PHP in Hindi)</h3>
<p class="text-gray-600 text-sm mb-3 line-clamp-2">PHP का परिचय और बुनियादी सिंटैक्स (Introduction and Basic Syntax o...</p>
<a href="https://myprojecthd.in/blog/introduction-and-basic-syntax-of-php-in-hindi" class="inline-block bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
Read More →
</a>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 mb-2 line-clamp-2">XML के प्रमुख घटक (XML Key Components in Web Technology in Hindi)</h3>
<p class="text-gray-600 text-sm mb-3 line-clamp-2">XML के प्रमुख घटक (XML Key Components in Web Technology in Hindi)
परिचय...</p>
<a href="https://myprojecthd.in/blog/xml-key-components-in-web-technology-in-hindi" class="inline-block bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
Read More →
</a>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 mb-2 line-clamp-2">वेब टेक्नोलॉजी में XML के उपयोग (Uses of XML in Web Technology in Hindi)</h3>
<p class="text-gray-600 text-sm mb-3 line-clamp-2">वेब टेक्नोलॉजी में XML के उपयोग (Uses of XML in Web Technology in Hind...</p>
<a href="https://myprojecthd.in/blog/uses-of-xml-in-web-technology-in-hindi" class="inline-block bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
Read More →
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Comment List -->
<!-- <div class="space-y-4">
<h3 class="text-xl font-semibold text-gray-800 mb-2">Comments</h3>
<div class="bg-gray-100 rounded-md p-4">
<p class="text-sm text-gray-600 font-semibold">CharlesJatte</p>
<p class="text-gray-800">4x4 rental tbilisi <a href=https://drivelity.com/car-rental-tbilisi-georgia>https://drivelity.com/car-rental-tbilisi-georgia</a></p>
</div>
<div class="bg-gray-100 rounded-md p-4">
<p class="text-sm text-gray-600 font-semibold">CharlesJatte</p>
<p class="text-gray-800"><a href=https://drivelity.com/car-rental-yerevan-armenia>luxury car rental yerevan</a></p>
</div>
<div class="bg-gray-100 rounded-md p-4">
<p class="text-sm text-gray-600 font-semibold">Randyfeews</p>
<p class="text-gray-800"><a href=https://drivelity-greece.com/rent-car-kalamata-greece>car rental kalamata airport</a></p>
</div>
<div class="bg-gray-100 rounded-md p-4">
<p class="text-sm text-gray-600 font-semibold">Randyfeews</p>
<p class="text-gray-800"><a href=https://drivelity-greece.com/car-rental-heraklion-crete>car rental heraklion no credit card</a></p>
</div>
</div>
</div> -->
<!-- <div class="mt-10 max-w-3xl mx-auto bg-white shadow-md rounded-lg p-6">
<h2 class="text-2xl font-semibold text-gray-800 mb-4">Comments</h2>
<form action="https://myprojecthd.in/comment" method="POST" class="space-y-4 database_operations">
<div>
<label for="name" class="block text-sm font-medium text-gray-700">Name</label>
<input type="hidden" name="_token" value="XlJrjxS6h1ipMgI8XOzJMdnS0qAU4oR3R8ZKTGCy">
<input type="hidden" name="blog_id" value="1647" >
<input type="text" id="name" name="name" required
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700">Email</label>
<input type="email" id="email" name="email" required
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500">
</div>
<div>
<label for="comment" class="block text-sm font-medium text-gray-700">Comment</label>
<textarea id="comment" name="comment" rows="4" required
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500"></textarea>
</div>
<div>
<button type="submit"
class="px-6 py-2 bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white rounded-md font-semibold hover:opacity-90">
Submit
</button>
</div>
</form>
</div> -->
</div>
<div class="max-w-7xl mx-auto mb-4 mt-4">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7413641233735665"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-7413641233735665"
data-ad-slot="1208383348"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</main>
<script>
// Tab functionality
const tabs = document.querySelectorAll('.tab-btn');
const contents = document.querySelectorAll('.tab-content');
tabs.forEach((tab) => {
tab.addEventListener('click', () => {
// Remove active class
tabs.forEach(t => t.classList.remove('text-pink-500', 'border-pink-500', 'active'));
contents.forEach(c => c.classList.add('hidden'));
// Add active class to clicked tab
tab.classList.add('text-pink-500', 'border-pink-500', 'active');
const target = document.getElementById(tab.dataset.tab);
target.classList.remove('hidden');
});
});
</script>
<!-- Enhanced Modern Footer -->
<footer class="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-white relative overflow-hidden">
<!-- Decorative Background Elements -->
<div class="absolute inset-0 opacity-5">
<div class="absolute top-0 left-0 w-96 h-96 bg-purple-500 rounded-full blur-3xl"></div>
<div class="absolute bottom-0 right-0 w-96 h-96 bg-pink-500 rounded-full blur-3xl"></div>
</div>
<div class="max-w-7xl mx-auto px-6 py-16 relative z-10">
<!-- Main Footer Content -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12">
<!-- Brand Section -->
<div class="space-y-4">
<div class="flex items-center space-x-2 mb-4">
<div class="w-10 h-10 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg flex items-center justify-center">
<span class="text-2xl font-bold">M</span>
</div>
<h3 class="text-2xl font-bold bg-gradient-to-r from-purple-400 via-pink-400 to-red-400 bg-clip-text text-transparent">My Project HD</h3>
</div>
<p class="text-gray-400 leading-relaxed">Empowering students with free projects, tutorials, and resources for computer science education in Hindi.</p>
<div class="flex space-x-3 pt-4">
<a href="https://www.instagram.com/myprojecthd.in/" target="_blank" rel="noopener noreferrer" aria-label="Follow us on Instagram" class="w-10 h-10 bg-gradient-to-r from-pink-600 to-purple-600 rounded-lg flex items-center justify-center transform hover:scale-110 hover:rotate-6 transition-all duration-300 shadow-lg hover:shadow-pink-500/50">
<img src="https://myprojecthd.in/public/social-icon/instagram.png" alt="Instagram" class="w-6 h-6">
</a>
<a href="https://www.youtube.com/c/MyProjectHD" target="_blank" rel="noopener noreferrer" aria-label="Subscribe to our YouTube channel" class="w-10 h-10 bg-gradient-to-r from-red-600 to-pink-600 rounded-lg flex items-center justify-center transform hover:scale-110 hover:rotate-6 transition-all duration-300 shadow-lg hover:shadow-red-500/50">
<img src="https://myprojecthd.in/public/social-icon/youtube.png" alt="YouTube" class="w-6 h-6">
</a>
<a href="https://www.facebook.com/engineersworld.in/" target="_blank" rel="noopener noreferrer" aria-label="Like us on Facebook" class="w-10 h-10 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-lg flex items-center justify-center transform hover:scale-110 hover:rotate-6 transition-all duration-300 shadow-lg hover:shadow-blue-500/50">
<img src="https://myprojecthd.in/public/social-icon/facebook.png" alt="Facebook" class="w-6 h-6">
</a>
</div>
</div>
<!-- Quick Links -->
<div>
<h4 class="text-lg font-bold mb-6 text-pink-400 flex items-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
Quick Links
</h4>
<ul class="space-y-3">
<li><a href="https://myprojecthd.in" class="text-gray-400 hover:text-white hover:translate-x-2 inline-block transition-all duration-300">→ Home</a></li>
<li><a href="https://myprojecthd.in/about-us" class="text-gray-400 hover:text-white hover:translate-x-2 inline-block transition-all duration-300">→ About Us</a></li>
<li><a href="https://myprojecthd.in/contact-us" class="text-gray-400 hover:text-white hover:translate-x-2 inline-block transition-all duration-300">→ Contact</a></li>
<li><a href="https://myprojecthd.in/project-categories" class="text-gray-400 hover:text-white hover:translate-x-2 inline-block transition-all duration-300">→ Projects</a></li>
<li><a href="https://myprojecthd.in/web-technology-tutorial-in-hindi" class="text-gray-400 hover:text-white hover:translate-x-2 inline-block transition-all duration-300">→ Web Development</a></li>
<li><a href="https://myprojecthd.in/tech-news" class="text-gray-400 hover:text-white hover:translate-x-2 inline-block transition-all duration-300">→ Tech News</a></li>
</ul>
</div>
<!-- Popular Categories -->
<div>
<h4 class="text-lg font-bold mb-6 text-pink-400 flex items-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
</svg>
Study Hub
</h4>
<ul class="space-y-3">
<li><a href="https://myprojecthd.in/rgpv-notes" class="text-gray-400 hover:text-white hover:translate-x-2 inline-block transition-all duration-300">📚 RGPV Notes</a></li>
<li><a href="https://myprojecthd.in/computer-science-notes" class="text-gray-400 hover:text-white hover:translate-x-2 inline-block transition-all duration-300">💻 CS Notes</a></li>
<li><a href="https://myprojecthd.in/final-year-projects" class="text-gray-400 hover:text-white hover:translate-x-2 inline-block transition-all duration-300">🚀 Final Year Projects</a></li>
<!-- <li><a href="https://myprojecthd.in/programming-tutorials" class="text-gray-400 hover:text-white hover:translate-x-2 inline-block transition-all duration-300">🎥 Programming Tutorials</a></li> -->
<li><a href="https://myprojecthd.in/development-tools" class="text-gray-400 hover:text-white hover:translate-x-2 inline-block transition-all duration-300">🛠️ Dev Tools</a></li>
</ul>
</div>
<!-- Newsletter & Stats -->
<div>
<h4 class="text-lg font-bold mb-6 text-pink-400 flex items-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
</svg>
Our Impact
</h4>
<div class="space-y-4">
<div class="bg-white/5 backdrop-blur rounded-xl p-4 border border-white/10 hover:border-purple-500/50 transition-all duration-300">
<div class="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400">500+</div>
<div class="text-sm text-gray-400">Free Projects</div>
</div>
<div class="bg-white/5 backdrop-blur rounded-xl p-4 border border-white/10 hover:border-pink-500/50 transition-all duration-300">
<div class="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-pink-400 to-red-400">1000+</div>
<div class="text-sm text-gray-400">Video Tutorials</div>
</div>
</div>
</div>
</div>
<!-- Divider -->
<div class="border-t border-gray-700 pt-8">
<!-- Trust Links -->
<div class="text-center mb-6">
<div class="flex flex-wrap justify-center gap-6 text-sm">
<a href="https://myprojecthd.in/privacy-policy" class="text-gray-400 hover:text-white transition-colors">Privacy Policy</a>
<a href="https://myprojecthd.in/disclaimer" class="text-gray-400 hover:text-white transition-colors">Disclaimer</a>
</div>
</div>
<div class="text-center">
<p class="text-gray-400 text-sm">
© 2026 My Project HD Team. All rights reserved. Made with
<span class="text-red-500 animate-pulse">❤</span> for Students
</p>
</div>
</div>
</div>
<!-- Bottom Gradient Line -->
<div class="h-1 bg-gradient-to-r from-purple-600 via-pink-600 to-red-600"></div>
</footer>
<!-- Modal Background -->
<div id="authModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 hidden">
<div class="bg-white rounded-2xl shadow-lg w-full max-w-md p-6 relative">
<button id="closeModal" class="absolute top-2 right-2 text-gray-500 hover:text-red-600 text-xl">×</button>
<h3 id="modalTitle" class="text-2xl mb-2 font-bold text-gray-800">Join With</h3>
<div id="g_id_onload"
data-client_id="963847232336-5ge5nvieancsbi1o5nqr4943o0t3bq10.apps.googleusercontent.com"
data-callback="handleCredentialResponse">
</div>
<div class="g_id_signin"
data-type="standard"
data-size="large"
data-theme="outline"
data-text="sign_in_with"
data-shape="rectangular"
data-logo_alignment="left">
</div>
</div>
<!-- Font Awesome for social media icons -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<!-- JavaScript for Menu Toggle -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script>
function handleCredentialResponse(response) {
// JWT decode
const payload = JSON.parse(atob(response.credential.split('.')[1]));
$.post(BASE_URL+'/api/googlelogin',{name:payload.name,email:payload.email,profile_pic:payload.picture},function(){
window.location.reload();
})
}
// Optional: Retry if auto-login fails
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_CLIENT_ID',
callback: handleCredentialResponse,
});
google.accounts.id.prompt(); // Show one-tap prompt
};
const menuToggle = document.getElementById('menu-toggle');
const menuClose = document.getElementById('menu-close');
const mobileMenu = document.getElementById('mobile-menu');
menuToggle.addEventListener('click', function () {
mobileMenu.classList.add('open');
});
menuClose.addEventListener('click', function () {
mobileMenu.classList.remove('open');
});
function toggleModal(id) {
const modal = document.getElementById(id);
modal.classList.toggle('hidden');
}
// Modern Navigation Scroll Effect - Simple shadow on scroll
const modernNav = document.querySelector('.modern-nav');
const isHomePage = window.location.pathname === '/' || window.location.pathname === '';
console.log('Is Home Page:', isHomePage);
console.log('Modern Nav Element:', modernNav);
if (modernNav) {
// Check initial state
console.log('Initial classes:', modernNav.className);
window.addEventListener('scroll', function() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
console.log('Scroll position:', scrollTop);
// Only apply scroll effect on home page
// On other pages, keep the solid background always
if (isHomePage) {
if (scrollTop > 50) {
modernNav.classList.add('scrolled');
console.log('Added scrolled class');
} else {
modernNav.classList.remove('scrolled');
console.log('Removed scrolled class');
}
}
// For non-home pages, scrolled class is already applied via PHP
});
// Force check on page load
const initialScroll = window.pageYOffset || document.documentElement.scrollTop;
if (isHomePage && initialScroll > 50) {
modernNav.classList.add('scrolled');
}
}
</script>
<!-- Firebase CDN -->
<script src="https://www.gstatic.com/firebasejs/9.6.11/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.11/firebase-messaging-compat.js"></script>
<script>
// Step 1: Firebase Config from your Firebase Console
const firebaseConfig = {
apiKey: "AIzaSyCg2iyzAiusQVMQbJ7gW-3Xf6OTFMUhK48",
authDomain: "webpush-c7626.firebaseapp.com",
databaseURL: "https://webpush-c7626.firebaseio.com",
projectId: "webpush-c7626",
storageBucket: "webpush-c7626.firebasestorage.app",
messagingSenderId: "272378245464",
appId: "1:272378245464:web:346d05bfc861e684aef52d"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
// New style for requesting permission and getting token
function initFirebaseMessagingRegistration() {
Notification.requestPermission().then((permission) => {
if (permission === 'granted') {
messaging.getToken({
vapidKey: 'BP89Rr-JBJtnsCBBiRhhY5ahdKoO2s6kALIBInc7Lq-C7EzzsXOrtTrN-7VXzOIBoogCzl0nsJFPF8EFKREf3sc'
}).then((currentToken) => {
if (currentToken) {
// Send token to server
$.get(`${BASE_URL}/save-token/${currentToken}`,{
},function(fb){
})
} else {
console.log('No registration token available. Request permission to generate one.');
}
}).catch((err) => {
console.log('An error occurred while retrieving token. ', err);
});
} else {
console.log('Notification permission not granted.');
}
});
}
// Trigger on DOM load
document.addEventListener("DOMContentLoaded", function () {
initFirebaseMessagingRegistration();
});
// Receive foreground messages
messaging.onMessage((payload) => {
console.log('Message received: ', payload);
// Show custom UI or toast here
});
</script>
</body>
</html>