पाठ्यक्रम विवरण
Loading...
Loading Course Content
• Introduction to HTML & Web Design: Basics of HTML, HTML5, Doctype, HTML elements, tags, attributes, understanding web browsers, text formatting, headings, paragraphs, line breaks.
• HTML Document Structure: Understanding the structure of an HTML document, use of elements like , ,
,
, <body>, etc.
• <strong>Working with Links</strong>: Learning to create links, link types, link attributes, email links, and how to open links in new windows.
• <strong>Images & Multimedia</strong>: Adding images, videos, audios, using <img> tag, multimedia attributes, video and audio formats, embedding multimedia from external sources.
• <strong>HTML Tables</strong>: Table structure, table headers, table data, table rows, spanning columns, merging cells, border attributes, table captions, and using CSS for table formatting.
• <strong>Lists & Forms</strong>: Different types of lists (ordered, unordered, and definition), list attributes, form elements, text fields, checkboxes, radio buttons, dropdown lists, and form attributes.
• <strong>HTML5 Layout & Semantics</strong>: New semantic elements in HTML5, header, footer, nav, article, section, aside, figure, figcaption, details, and summary.
• <strong>HTML Responsive Web Design</strong>: Flexible grid layouts, media queries, using CSS frameworks, responsive images, and best practices for responsive design.
• <strong>Web Design Strategy</strong>: Understanding the importance of user experience (UX), user interface (UI), design principles, color theory, typography, website accessibility, usability testing, and website analytics.
</p>
</div>
</div>
</div>
</div>
<div class="col-md-12 mt-4">
<div class="card">
<div class="card-body">
<h2 class="text-2xl font-bold text-gray-900 mb-4">करियर पथ</h2>
<div id="careerPath" class="mt-3">
<div style="width: 100%; height: 400px; margin-bottom: 2rem;">
<div id="chart_div"></div>
<script src='https://www.gstatic.com/charts/loader.js'></script>
<script>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Role', 'Percentage'],
['Front-End Developer', 35],
['Full-Stack Developer', 45],
['Web Designer', 15],
['Web Strategist', 5]
]);
var options = {
title: 'Global Certificate in HTML: Web Design & Strategy Job Market Trends (UK)',
is3D: true,
backgroundColor: 'transparent',
sliceVisibilityThreshold: 0,
legend: { position: 'labeled' },
width: '100%',
height: 400,
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</div>
The above section displays a 3D pie chart that represents the job market trends for the Global Certificate in HTML: Web Design & Strategy in the UK. The chart is responsive and adapts to all screen sizes, with a transparent background and no added background color. It includes the following roles, each with a concise description:
1. **Front-End Developer**: Focuses on the design and implementation of user interfaces and user experience.
2. **Full-Stack Developer**: Handles both front-end and back-end development tasks, ensuring smooth functionality and integration.
3. **Web Designer**: Works on the visual aesthetics and layout of a website, optimizing for user engagement and usability.
4. **Web Strategist**: Collaborates with developers and designers to define the long-term vision and goals for a website or web application.
The Google Charts library is loaded using the correct script URL, and the JavaScript code defines the chart data, options, and rendering logic. The chart displays the percentage distribution of these roles in the job market, offering a 3D visual representation for improved understanding and engagement. </div>
</div>
</div>
</div>
<!-- Entry Requirements and Accreditation Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
<!-- Entry Requirements Section -->
<div class="bg-white rounded-lg shadow-sm overflow-hidden border border-gray-100">
<div class="p-6">
<div class="flex items-center mb-3">
<h2 class="text-lg font-semibold text-gray-900">प्रवेश आवश्यकताएं</h2>
</div>
<div class="prose prose-sm prose-blue max-w-none text-gray-600">
<ul class="list-disc pl-5 space-y-1 text-sm">
<li>विषय की बुनियादी समझ</li>
<li>अंग्रेजी भाषा में दक्षता</li>
<li>कंप्यूटर और इंटरनेट पहुंच</li>
<li>बुनियादी कंप्यूटर कौशल</li>
<li>पाठ्यक्रम पूरा करने के लिए समर्पण</li>
</ul>
<p class="mt-2 text-sm">कोई पूर्व औपचारिक योग्यता आवश्यक नहीं। पाठ्यक्रम पहुंच के लिए डिज़ाइन किया गया है।</p>
</div>
</div>
</div>
<!-- Accreditation Section -->
<div class="bg-white rounded-lg shadow-sm overflow-hidden border border-gray-100">
<div class="p-6">
<div class="flex items-center mb-3">
<h2 class="text-lg font-semibold text-gray-900">पाठ्यक्रम स्थिति</h2>
</div>
<div class="prose prose-sm prose-green max-w-none text-gray-600">
<p class="text-sm">यह पाठ्यक्रम व्यावसायिक विकास के लिए व्यावहारिक ज्ञान और कौशल प्रदान करता है। यह है:</p>
<ul class="list-disc pl-5 space-y-1 text-sm">
<li>यह ध्यान दिया जाना चाहिए कि यह पाठ्यक्रम किसी मान्यता प्राप्त पुरस्कार देने वाले निकाय द्वारा मान्यता प्राप्त नहीं है या किसी अधिकृत संस्थान/निकाय द्वारा विनियमित नहीं है।</li>
<li>किसी अधिकृत संस्था द्वारा विनियमित नहीं</li>
<li>औपचारिक योग्यताओं के लिए पूरक</li>
</ul>
<p class="mt-2 text-sm">पाठ्यक्रम को सफलतापूर्वक पूरा करने पर आपको पूर्णता का प्रमाणपत्र मिलेगा।</p>
</div>
</div>
</div>
</div>
<!-- Student Reviews Section (AJAX loaded) -->
<div id="reviewsSection" class="my-8">
<div class="bg-white rounded-2xl shadow-md p-8">
<h2 class="text-2xl font-bold text-gray-900 mb-6">लोग अपने करियर के लिए हमें क्यों चुनते हैं</h2>
<div id="reviewsLoading" class="text-center text-gray-500">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-[#0056D2] mx-auto"></div>
<p class="mt-2">समीक्षाएं लोड हो रही हैं...</p>
</div>
</div>
</div>
<!-- FAQ Section -->
<div class="my-4">
<div class="bg-white rounded-2xl shadow-md p-4">
<h2 class="text-2xl font-bold text-gray-900 mb-3">अक्सर पूछे जाने वाले प्रश्न</h2>
<div class="grid grid-cols-1 gap-2" itemscope itemtype="https://schema.org/FAQPage">
<!-- FAQ Item 1 -->
<div class="expandable-card bg-gradient-to-br from-gray-50 to-white rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-all duration-200 cursor-pointer" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<div class="px-3 py-2 flex items-center justify-between card-header">
<h3 class="text-lg font-semibold text-gray-900" itemprop="name">यह पाठ्यक्रम दूसरों की तुलना में क्या अनूठा बनाता है?</h3>
<span class="expand-icon text-gray-400 transition-transform duration-200">▼</span>
</div>
<div class="px-3 pb-2 card-content hidden" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div class="text-gray-700 leading-relaxed" itemprop="text">
<p>हमारा पाठ्यक्रम एक केंद्रित सीखने का अनुभव प्रदान करता है:</p>
<ul class="list-disc pl-4 mt-0.5 space-y-0.5">
<li>व्यापक पाठ्यक्रम सामग्री तक पहुंच</li>
<li>आपकी आवश्यकताओं के अनुरूप लचीला सीखने का कार्यक्रम</li>
<li>स्व-गति से सीखने का वातावरण</li>
<li>आपके नामांकन की अवधि के लिए पाठ्यक्रम सामग्री तक पहुंच</li>
<li>पाठ्यक्रम पूरा करने पर पूर्णता का प्रमाणपत्र</li>
</ul>
</div>
</div>
</div>
<!-- FAQ Item 2 -->
<div class="expandable-card bg-gradient-to-br from-gray-50 to-white rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-all duration-200 cursor-pointer" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<div class="px-3 py-2 flex items-center justify-between card-header">
<h3 class="text-lg font-semibold text-gray-900" itemprop="name">पाठ्यक्रम पूरा करने में कितना समय लगता है?</h3>
<span class="expand-icon text-gray-400 transition-transform duration-200">▼</span>
</div>
<div class="px-3 pb-2 card-content hidden" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div class="text-gray-700 leading-relaxed" itemprop="text">
<p>हम आपके कार्यक्रम के अनुरूप दो लचीले सीखने के मार्ग प्रदान करते हैं:</p>
<ul class="list-disc pl-4 mt-0.5 space-y-0.5">
<li><strong>तेज़ ट्रैक:</strong> सप्ताह में 3-4 घंटे अध्ययन के साथ 1 महीने में पूरा करें</li>
<li><strong>मानक मोड:</strong> सप्ताह में 2-3 घंटे के साथ 2 महीने में पूरा करें</li>
</ul>
<p class="mt-0.5">आप अपनी गति से आगे बढ़ सकते हैं और सामग्री 24/7 एक्सेस कर सकते हैं।</p>
</div>
</div>
</div>
<!-- FAQ Item 3 -->
<div class="expandable-card bg-gradient-to-br from-gray-50 to-white rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-all duration-200 cursor-pointer" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<div class="px-3 py-2 flex items-center justify-between card-header">
<h3 class="text-lg font-semibold text-gray-900" itemprop="name">पाठ्यक्रम के दौरान मुझे क्या सहायता मिलेगी?</h3>
<span class="expand-icon text-gray-400 transition-transform duration-200">▼</span>
</div>
<div class="px-3 pb-2 card-content hidden" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div class="text-gray-700 leading-relaxed" itemprop="text">
<p>आपके पाठ्यक्रम के दौरान, आपको निम्नलिखित तक पहुंच होगी:</p>
<ul class="list-disc pl-4 mt-0.5 space-y-0.5">
<li>पाठ्यक्रम सामग्री और संसाधनों तक 24/7 पहुंच</li>
<li>प्लेटफॉर्म से संबंधित मुद्दों के लिए तकनीकी सहायता</li>
<li>पाठ्यक्रम से संबंधित प्रश्नों के लिए ईमेल सहायता</li>
<li>स्पष्ट पाठ्यक्रम संरचना और सीखने की सामग्री</li>
</ul>
<p class="mt-0.5">कृपया ध्यान दें कि यह एक स्व-गति वाला पाठ्यक्रम है, और जबकि हम सीखने की सामग्री और बुनियादी सहायता प्रदान करते हैं, असाइनमेंट या प्रोजेक्ट पर नियमित प्रतिक्रिया नहीं होती है।</p>
</div>
</div>
</div>
<!-- FAQ Item 4 -->
<div class="expandable-card bg-gradient-to-br from-gray-50 to-white rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-all duration-200 cursor-pointer" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<div class="px-3 py-2 flex items-center justify-between card-header">
<h3 class="text-lg font-semibold text-gray-900" itemprop="name">क्या प्रमाणपत्र अंतरराष्ट्रीय स्तर पर मान्यता प्राप्त है?</h3>
<span class="expand-icon text-gray-400 transition-transform duration-200">▼</span>
</div>
<div class="px-3 pb-2 card-content hidden" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div class="text-gray-700 leading-relaxed" itemprop="text">
<p>यह कार्यक्रम आपकी नौकरी की भूमिका में सीधे लागू किया जा सकने वाला मूल्यवान अंतर्दृष्टि और जानकारी प्रदान करने के लिए डिज़ाइन किया गया है। हालांकि, यह औपचारिक डिग्री या डिप्लोमा प्राप्त करने के बराबर या उसका विकल्प नहीं है।</p>
<p class="mt-0.5">इस पाठ्यक्रम से आपको क्या मिलेगा:</p>
<ul class="list-disc pl-4 mt-0.5 space-y-0.5">
<li>विषय की जानकारी और समझ</li>
<li>सीखने के प्रति आपकी प्रतिबद्धता को प्रदर्शित करने के लिए पूर्णता का प्रमाणपत्र</li>
<li>स्व-गति से सीखने का अनुभव</li>
<li>व्यापक पाठ्यक्रम सामग्री तक पहुंच</li>
<li>क्षेत्र में मुख्य अवधारणाओं और सिद्धांतों की समझ</li>
</ul>
<p class="mt-0.5">औपचारिक योग्यताओं के लिए पूरक</p>
</div>
</div>
</div>
<!-- FAQ Item 5 -->
<div class="expandable-card bg-gradient-to-br from-gray-50 to-white rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-all duration-200 cursor-pointer" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<div class="px-3 py-2 flex items-center justify-between card-header">
<h3 class="text-lg font-semibold text-gray-900" itemprop="name">यह पाठ्यक्रम क्या करियर के अवसर खोलेगा?</h3>
<span class="expand-icon text-gray-400 transition-transform duration-200">▼</span>
</div>
<div class="px-3 pb-2 card-content hidden" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div class="text-gray-700 leading-relaxed" itemprop="text">
<p>यह पाठ्यक्रम विषय क्षेत्र में ज्ञान और समझ प्रदान करता है, जो निम्नलिखित के लिए मूल्यवान हो सकता है:</p>
<ul class="list-disc pl-4 mt-0.5 space-y-0.5">
<li>क्षेत्र की आपकी समझ को बढ़ाना</li>
<li>आपके पेशेवर विकास पोर्टफोलियो में जोड़ना</li>
<li>सीखने के प्रति आपकी प्रतिबद्धता को प्रदर्शित करना</li>
<li>विषय में बुनियादी ज्ञान का निर्माण</li>
<li>आपके मौजूदा करियर पथ का समर्थन</li>
</ul>
<p class="mt-0.5">कृपया ध्यान दें कि जबकि यह पाठ्यक्रम मूल्यवान ज्ञान प्रदान करता है, यह विशिष्ट करियर परिणाम या नौकरी प्लेसमेंट की गारंटी नहीं देता है। पाठ्यक्रम का मूल्य इस बात पर निर्भर करेगा कि आप अपने पेशेवर संदर्भ में प्राप्त ज्ञान को कैसे लागू करते हैं।</p>
</div>
</div>
</div>
<!-- FAQ Item 6 -->
<div class="expandable-card bg-gradient-to-br from-gray-50 to-white rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-all duration-200 cursor-pointer" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<div class="px-3 py-2 flex items-center justify-between card-header">
<h3 class="text-lg font-semibold text-gray-900" itemprop="name">मैं कब कोर्स शुरू कर सकता हूं?</h3>
<span class="expand-icon text-gray-400 transition-transform duration-200">▼</span>
</div>
<div class="px-3 pb-2 card-content hidden" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div class="text-gray-700 leading-relaxed" itemprop="text">
<p>हम अपने खुले नामांकन सिस्टम के माध्यम से कोर्स सामग्री तक तत्काल पहुंच प्रदान करते हैं। इसका मतलब है:</p>
<ul class="list-disc pl-4 mt-0.5 space-y-0.5">
<li>कोर्स शुरू होता है जैसे ही आप कोर्स शुल्क का भुगतान करते हैं, तुरंत</li>
<li>कोई प्रतीक्षा अवधि या निश्चित प्रारंभ तिथि नहीं</li>
<li>भुगतान पर सभी कोर्स सामग्री तक तत्काल पहुंच</li>
<li>अपनी सुविधा के अनुसार शुरू करने की लचीलापन</li>
</ul>
<p class="mt-0.5">यह स्व-गति दृष्टिकोण आपको अपने मौजूदा प्रतिबद्धताओं के आसपास अपनी सीखने को फिट करते हुए तुरंत अपनी पेशेवर विकास यात्रा शुरू करने की अनुमति देता है।</p>
</div>
</div>
</div>
<!-- FAQ Item 7 -->
<div class="expandable-card bg-gradient-to-br from-gray-50 to-white rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-all duration-200 cursor-pointer" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<div class="px-3 py-2 flex items-center justify-between card-header">
<h3 class="text-lg font-semibold text-gray-900" itemprop="name">कोर्स का प्रारूप और सीखने का दृष्टिकोण क्या है?</h3>
<span class="expand-icon text-gray-400 transition-transform duration-200">▼</span>
</div>
<div class="px-3 pb-2 card-content hidden" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div class="text-gray-700 leading-relaxed" itemprop="text">
<p>हमारा कोर्स एक व्यापक स्व-अध्ययन कार्यक्रम के रूप में डिज़ाइन किया गया है जो प्रदान करता है:</p>
<ul class="list-disc pl-4 mt-0.5 space-y-0.5">
<li>24/7 सुलभ संरचित सीखने की सामग्री</li>
<li>स्व-अध्ययन के लिए व्यापक कोर्स सामग्री</li>
<li>आपकी जीवनशैली के अनुरूप लचीला सीखने का कार्यक्रम</li>
<li>सभी आवश्यक संसाधनों और सामग्री तक पहुंच</li>
</ul>
<p class="mt-0.5">यह स्व-निर्देशित सीखने का दृष्टिकोण आपको अपनी गति से आगे बढ़ने की अनुमति देता है, जो व्यस्त पेशेवरों के लिए आदर्श है जिन्हें अपने सीखने के कार्यक्रम में लचीलापन की आवश्यकता होती है। हालांकि कोई लाइव कक्षाएं या व्यावहारिक सत्र नहीं हैं, कोर्स सामग्री स्व-अध्ययन के माध्यम से विषय की गहन समझ प्रदान करने के लिए डिज़ाइन की गई है।</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Sidebar -->
<div class="space-y-6">
<!-- Debug line -->
<div class="hidden">Debug: False</div>
<!-- Podcast Box -->
<!-- Skills Gained Box (replaces Course Information) -->
<!-- Pricing Box -->
<div class="course-fee-section bg-gradient-to-br from-blue-100/60 to-indigo-100/40 rounded-2xl shadow-xl border border-blue-200/40 p-1">
<div class="bg-white rounded-2xl p-6 md:p-8 shadow-lg">
<h3 class="text-2xl font-extrabold text-gray-900 mb-7 tracking-tight">कोर्स शुल्क</h3>
<div class="space-y-7">
<!-- Fast Track -->
<div class="relative rounded-xl border border-gray-200 bg-white shadow-md p-4 transition-transform hover:scale-[1.02] hover:shadow-2xl duration-200">
<div class="flex justify-end mb-2">
<span class="inline-flex items-center gap-1.5 bg-gradient-to-r from-green-500 via-emerald-400 to-lime-400 text-white text-xs font-extrabold px-3 py-1 rounded-full shadow-xl ring-1 ring-green-300/40 tracking-wider uppercase animate-pulse">
<svg class="w-3.5 h-3.5 text-white drop-shadow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
सबसे लोकप्रिय
</span>
</div>
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-1 gap-2">
<span class="text-2xl font-extrabold text-gray-900">तेज़ ट्रैक:</span>
<span class="text-3xl font-black text-gray-900 flex items-baseline whitespace-nowrap"><span class="mr-1 text-[1.25rem]">GBP £</span>140</span>
</div>
<div class="text-base text-gray-500 font-medium mb-2">1 महीने में पूरा करें</div>
<div class="inline-flex items-center bg-green-100 text-green-800 font-semibold text-base rounded-lg px-3 py-1.5 mb-2 shadow-sm">
<svg class="w-4 h-4 mr-2 text-green-600" 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"/></svg>
त्वरित सीखने का मार्ग
</div>
<ul class="text-sm text-gray-700 space-y-1 mb-3">
<li class="flex items-center"><svg class="w-4 h-4 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>सप्ताह में 3-4 घंटे</li>
<li class="flex items-center"><svg class="w-4 h-4 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>जल्दी प्रमाणपत्र वितरण</li>
<li class="flex items-center"><svg class="w-4 h-4 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>खुला नामांकन - कभी भी शुरू करें</li>
</ul>
<a href="https://shortcourses.lsibonline.com/ExternalApi/GenerateCourseByTitle?CourseTitle=Global Certificate in HTML: Web Design & Strategy" target="_blank" class="w-full block text-center py-[0.6rem] rounded-lg bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-[1.01rem] text-white shadow-lg transition-all duration-200 tracking-wide">Start Now</a>
</div>
<!-- Standard Mode -->
<div class="rounded-xl border border-gray-200 bg-white shadow p-4">
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-1 gap-2">
<span class="text-2xl font-extrabold text-gray-900">मानक मोड:</span>
<span class="text-3xl font-black text-gray-900 flex items-baseline whitespace-nowrap"><span class="mr-1 text-[1.25rem]">GBP £</span>90</span>
</div>
<div class="text-base text-gray-500 font-medium mb-2">2 महीने में पूरा करें</div>
<div class="inline-flex items-center bg-blue-100 text-blue-800 font-semibold text-base rounded-lg px-3 py-1.5 mb-2 shadow-sm">
<svg class="w-4 h-4 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2v-8a2 2 0 012-2h2"/></svg>
लचीला सीखने का गति
</div>
<ul class="text-sm text-gray-700 space-y-1 mb-3">
<li class="flex items-center"><svg class="w-4 h-4 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>सप्ताह में 2-3 घंटे</li>
<li class="flex items-center"><svg class="w-4 h-4 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>नियमित प्रमाणपत्र वितरण</li>
<li class="flex items-center"><svg class="w-4 h-4 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>खुला नामांकन - कभी भी शुरू करें</li>
</ul>
<a href="https://shortcourses.lsibonline.com/ExternalApi/GenerateCourseByTitle?CourseTitle=Global Certificate in HTML: Web Design & Strategy" target="_blank" class="w-full block text-center py-[0.6rem] rounded-lg bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-[1.01rem] text-white shadow-lg transition-all duration-200 tracking-wide">Start Now</a>
</div>
<!-- Included in both plans -->
<div class="rounded-xl border border-gray-100 bg-gradient-to-r from-gray-50 to-white shadow p-3">
<div class="font-bold text-gray-900 mb-1 text-base">दोनों योजनाओं में क्या शामिल है:</div>
<ul class="text-sm text-gray-700 space-y-1">
<li class="flex items-center"><svg class="w-4 h-4 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>पूर्ण कोर्स पहुंच</li>
<li class="flex items-center"><svg class="w-4 h-4 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>डिजिटल प्रमाणपत्र</li>
<li class="flex items-center"><svg class="w-4 h-4 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>कोर्स सामग्री</li>
</ul>
</div>
<div class="text-xs text-gray-500 mb-4 text-center font-medium">सभी समावेशी मूल्य निर्धारण • कोई छिपी हुई फीस या अतिरिक्त लागत नहीं</div>
</div>
</div>
</div>
<!-- Email Form Box -->
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
<div class="p-6">
<h3 class="text-lg font-semibold text-gray-900 mb-4">पाठ्यक्रम की जानकारी प्राप्त करें</h3>
<form method="post" class="space-y-4" action="/hi/global-uk/Course/SendCourseEmail">
<input type="hidden" name="id" value="224593" />
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">आपका ईमेल पता</label>
<div class="relative rounded-md shadow-sm">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
</svg>
</div>
<input type="email"
name="email"
id="email"
required
class="block w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0056D2] focus:border-[#0056D2] sm:text-sm transition duration-150 ease-in-out"
placeholder="Enter your email address">
</div>
<p class="mt-1 text-sm text-gray-500">हम आपको विस्तृत कोर्स जानकारी भेजेंगे</p>
</div>
<button type="submit" class="w-full inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
जानकारी प्राप्त करें
</button>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8CyKpNhmGJ5GrOr-xwY3r-_86J2LnKfSGDTrs0-9Uzk1v3q2_0go0OGc3Hltkiyt5qepP0ucGMnfmlDiDpmIDpQWRH0Od8qbC5uPdcpUy4mTjjQdeEK7bD1D22JLKrVZzrI4Ol__honyeENu1FXHOHg" /></form>
</div>
</div>
<!-- Pay as a company Box -->
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
<div class="p-6">
<h3 class="text-lg font-semibold text-gray-900 mb-4">कंपनी के रूप में भुगतान करें</h3>
<p class="text-sm text-gray-600 mb-4">इस पाठ्यक्रम के लिए भुगतान करने के लिए अपनी कंपनी के लिए चालान का अनुरोध करें।</p>
<a class="w-full inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" href="/hi/global-uk/Invoice?courseId=224593">
चालान द्वारा भुगतान करें
</a>
</div>
</div>
<!-- Sample Certificate Box -->
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
<div class="p-6">
<h3 class="text-lg font-semibold text-gray-900 mb-4">करियर प्रमाणपत्र अर्जित करें</h3>
<div class="w-full max-w-md mx-auto relative" style="aspect-ratio:1/1.414;">
<img src="/uploads/certificate-backgrounds/d614f209-1de3-4607-8afc-9031b9decf15_001.jpg"
alt="नमूना प्रमाणपत्र पृष्ठभूमि"
class="w-full h-full rounded-xl border border-gray-200 object-cover"
onerror="this.onerror=null; this.src='/images/certificate-bg.jpg';"
loading="lazy" width="600" height="850" />
<div class="absolute inset-0 flex flex-col items-center justify-center px-4 py-8 text-center pointer-events-none select-none">
<div class="text-sm md:text-lg font-bold text-gray-900 mb-2 drop-shadow-sm">GLOBAL CERTIFICATE IN HTML: WEB DESIGN & STRATEGY</div>
<div class="text-xs md:text-sm text-gray-800 mb-0.5">को प्रदान किया गया है</div>
<div class="text-sm md:text-lg font-bold text-gray-900 mb-1">शिक्षार्थी का नाम</div>
<div class="text-[11px] md:text-xs text-gray-800 mb-0.5">जिसने में एक कार्यक्रम पूरा किया है</div>
<div class="text-[11px] md:text-xs font-semibold text-gray-900 mb-2">London School of International Business (LSIB)</div>
<div class="text-[11px] md:text-xs text-gray-800 mb-0.5">प्रदान किया गया</div>
<div class="text-[11px] md:text-xs font-semibold text-gray-900 mb-1">05 May 2025</div>
<div class="text-[9px] md:text-[10px] text-gray-700 mt-1">ब्लॉकचेन आईडी: s-1-a-2-m-3-p-4-l-5-e</div>
</div>
</div>
<div class="mt-4 text-sm text-gray-600">
इस प्रमाणपत्र को अपने LinkedIn प्रोफाइल, रिज्यूमे, या CV में जोड़ें। इसे सोशल मीडिया पर और अपने प्रदर्शन समीक्षा में साझा करें।
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
/* .prose {
max-width: 65ch;
color: #374151;
}
.prose h1, .prose h2, .prose h3, .prose h4 {
color: #111827;
font-weight: 600;
margin-top: 1.5em;
margin-bottom: 0.5em;
}
.prose p {
margin-top: 1.25em;
margin-bottom: 1.25em;
}
.prose ul {
margin-top: 1.25em;
margin-bottom: 1.25em;
list-style-type: disc;
padding-left: 1.625em;
}
.prose li {
margin-top: 0.5em;
margin-bottom: 0.5em;
} */
.glass-card {
background: rgba(255, 255, 255, 0.35);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 1rem;
border: 1px solid rgba(255, 255, 255, 0.18);
padding: 1rem;
transition: box-shadow 0.3s, transform 0.3s;
}
.glass-card:hover {
box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.25);
transform: translateY(-2px) scale(1.03);
}
.course-fee-section {
font-size: 95%;
}
</style>
<!-- Add chat component at the end of the body -->
</script>
<script>
(function() {
'use strict';
// Get the API endpoint from the business info
const API_ENDPOINT = 'https://reactor.LSIB.co.uk/api/process-page';
const API_KEY = '1234'; // <-- Set this to match your appsettings.json
// Debug: Log the API endpoint being used
console.log('API_ENDPOINT from BusinessInfo:', 'https://reactor.LSIB.co.uk/api/process-page');
console.log('Final API_ENDPOINT value:', API_ENDPOINT);
console.log('BusinessInfo object:', {"id":1,"businessName":"London School of International Business (LSIB)","location":"London, United Kingdom (U.K.)","isActive":true,"updatedAt":"2025-09-23T19:23:42.38","updatedBy":null,"emailAddress":"admissions@LSIB.co.uk","smtpServer":"smtp.mandrillapp.com","smtpPort":587,"smtpUsername":"LSIB","smtpPassword":"md-9dtwpX.91IN676p8thZfIA","enableSsl":true,"footerColor":null,"loginUrl":"https://shortcourses.lsibonline.com/Account/Login","homeTitle":null,"homeMetaKeywords":null,"homeMetaDescription":null,"homeOGTitle":null,"homeOGDescription":null,"homeOGImageUrl":null,"homeTwitterTitle":null,"homeTwitterDescription":null,"homeTwitterImageUrl":null,"homeCanonicalUrl":null,"searchTitle":null,"searchMetaKeywords":null,"searchMetaDescription":null,"searchOGTitle":null,"searchOGDescription":null,"searchOGImageUrl":null,"searchTwitterTitle":null,"searchTwitterDescription":null,"searchTwitterImageUrl":null,"searchCanonicalUrl":null,"domainName":"https://onlinetraining.lsib.nl","showExpertConversations":false,"defaultFee1":"140","defaultFee2":"90","currency":"GBP \u00A3","logoHeightInEmail":60,"logoHeightInWebsite":80,"reactorURL":"https://reactor.LSIB.co.uk/api/process-page"});
function init() {
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', processPage);
} else {
processPage();
}
}
function processPage() {
const h1Element = document.querySelector('h1');
if (!h1Element) {
console.log('No H1 element found');
return;
}
const title = h1Element.textContent.trim();
const url = window.location.href;
console.log('Found title:', title);
console.log('Current URL:', url);
console.log('Sending to API...');
sendToAPI(title, url);
}
function sendToAPI(title, url) {
const payload = {
title: title,
url: url,
timestamp: new Date().toISOString(),
userAgent: navigator.userAgent,
referrer: document.referrer,
website: window.location.hostname
};
fetch(API_ENDPOINT, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-API-Key': API_KEY
},
body: JSON.stringify(payload)
})
.then(response => {
console.log('API Response status:', response.status);
if (response.ok) {
console.log('Course title processed successfully');
return response.json();
} else {
return response.json().then(data => {
console.log('API error:', data);
throw new Error(data.message || 'API request failed');
});
}
})
.then(data => {
if (data) {
console.log('API Response data:', data);
}
})
.catch(error => {
console.log('API call failed:', error.message);
});
}
init();
})();
</script>
</main>
<footer b-u4k2yyhrco class="text-white py-8 mt-12 shadow-inner" style="background: linear-gradient(to right, #1e3a8a, #0A2676, #1e3a8a);">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" crossorigin="anonymous" />
<div b-u4k2yyhrco class="max-w-7xl mx-auto px-4 flex flex-col md:flex-row items-center justify-between">
<div b-u4k2yyhrco class="text-left w-full md:w-auto mb-4 md:mb-0">
<span b-u4k2yyhrco class="text-xs md:text-sm" style="font-family: 'Source Sans Pro', sans-serif; font-weight: 400;">
© 2026 London School of International Business (LSIB), London, United Kingdom (U.K.). सर्वाधिकार सुरक्षित।
</span>
</div>
<div b-u4k2yyhrco class="flex flex-col md:flex-row md:items-center md:space-x-6 space-y-2 md:space-y-0 mb-4 md:mb-0">
<a b-u4k2yyhrco href="/CookiePolicy" class="text-white hover:text-blue-300 text-xs md:text-sm transition-colors">कुकीज़ नीति</a>
<a b-u4k2yyhrco href="/TermsAndConditions" class="text-white hover:text-blue-300 text-xs md:text-sm transition-colors">नियम और शर्तें</a>
<a b-u4k2yyhrco href="/PrivacyPolicy" class="text-white hover:text-blue-300 text-xs md:text-sm transition-colors">गोपनीयता नीति</a>
</div>
<div b-u4k2yyhrco class="flex space-x-2">
<a b-u4k2yyhrco href="#" class="hover:text-blue-300" aria-label="Facebook"><span b-u4k2yyhrco class="fa-stack fa-sm"><i b-u4k2yyhrco class="fa fa-circle fa-stack-2x"></i><i b-u4k2yyhrco class="fab fa-facebook-f fa-stack-1x fa-inverse"></i></span></a>
<a b-u4k2yyhrco href="#" class="hover:text-blue-300" aria-label="LinkedIn"><span b-u4k2yyhrco class="fa-stack fa-sm"><i b-u4k2yyhrco class="fa fa-circle fa-stack-2x"></i><i b-u4k2yyhrco class="fab fa-linkedin-in fa-stack-1x fa-inverse"></i></span></a>
<a b-u4k2yyhrco href="#" class="hover:text-blue-300" aria-label="Twitter"><span b-u4k2yyhrco class="fa-stack fa-sm"><i b-u4k2yyhrco class="fa fa-circle fa-stack-2x"></i><i b-u4k2yyhrco class="fab fa-twitter fa-stack-1x fa-inverse"></i></span></a>
<a b-u4k2yyhrco href="#" class="hover:text-blue-300" aria-label="YouTube"><span b-u4k2yyhrco class="fa-stack fa-sm"><i b-u4k2yyhrco class="fa fa-circle fa-stack-2x"></i><i b-u4k2yyhrco class="fab fa-youtube fa-stack-1x fa-inverse"></i></span></a>
<a b-u4k2yyhrco href="#" class="hover:text-blue-300" aria-label="Instagram"><span b-u4k2yyhrco class="fa-stack fa-sm"><i b-u4k2yyhrco class="fa fa-circle fa-stack-2x"></i><i b-u4k2yyhrco class="fab fa-instagram fa-stack-1x fa-inverse"></i></span></a>
<a b-u4k2yyhrco href="#" class="hover:text-blue-300" aria-label="TikTok"><span b-u4k2yyhrco class="fa-stack fa-sm"><i b-u4k2yyhrco class="fa fa-circle fa-stack-2x"></i><i b-u4k2yyhrco class="fab fa-tiktok fa-stack-1x fa-inverse"></i></span></a>
</div>
</div>
<div b-u4k2yyhrco class="text-center mt-2">
<span b-u4k2yyhrco class="text-xs text-gray-300">IP: 216.73.216.22</span>
</div>
</footer>
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/site.js?v=5t4OrdtvjXcig92cDnIv_JtyQzfFb98buyozA7dkZ-E"></script>
<script src="/lib/microsoft/signalr/dist/browser/signalr.js" defer></script>
<script src="/js/chat.js" defer></script>
<script>
// FAQ Toggle Function with improved reliability
document.addEventListener('DOMContentLoaded', function() {
const faqButtons = document.querySelectorAll('.faq-button');
faqButtons.forEach(button => {
button.addEventListener('click', function() {
const faqItem = this.closest('.faq-item');
const content = faqItem.querySelector('.faq-content');
const icon = faqItem.querySelector('.faq-icon');
// Toggle content visibility
content.classList.toggle('hidden');
// Toggle icon rotation
icon.classList.toggle('rotate-180');
// Add active state to the button
this.classList.toggle('active');
});
});
});
const connection = new signalR.HubConnectionBuilder()
.withUrl("/courseHub")
.build();
connection.on("ReceiveCourseOverview", (courseId, overview) => {
if (courseId === 224593) {
const overviewElement = document.getElementById('courseOverview');
const preloader = document.getElementById('overviewPreloader');
if (overviewElement && preloader) {
overviewElement.innerHTML = overview;
preloader.style.display = 'none';
overviewElement.style.display = 'block';
}
}
});
// Remove the TitleSEOUpdated SignalR handler and add polling
function pollTitleSEO() {
fetch(`/Course/GetTitleSEO/${224593}`)
.then(response => response.text())
.then(titleSEO => {
if (titleSEO && titleSEO.trim() !== '') {
// Update the page title
document.title = titleSEO;
// Update meta title
const metaTitle = document.querySelector('meta[name="title"]');
if (metaTitle) {
metaTitle.setAttribute('content', titleSEO);
}
// Update Open Graph title
const ogTitle = document.querySelector('meta[property="og:title"]');
if (ogTitle) {
ogTitle.setAttribute('content', titleSEO);
}
// Update Twitter title
const twitterTitle = document.querySelector('meta[name="twitter:title"]');
if (twitterTitle) {
twitterTitle.setAttribute('content', titleSEO);
}
} else {
// If title is still empty, poll again after 2 seconds
setTimeout(pollTitleSEO, 2000);
}
})
.catch(error => {
console.error('Error polling TitleSEO:', error);
setTimeout(pollTitleSEO, 2000);
});
}
// Start polling if TitleSEO is empty
if (!True.ToString().toLowerCase()) {
pollTitleSEO();
}
connection.on("DescriptionUpdated", (courseId, description) => {
if (courseId === 224593) {
const descriptionElement = document.getElementById('courseDescription');
const preloader = document.getElementById('descriptionPreloader');
if (descriptionElement && preloader) {
descriptionElement.innerHTML = description;
preloader.style.display = 'none';
descriptionElement.style.display = 'block';
}
}
});
connection.on("CourseDetailsUpdated", (courseId, details) => {
if (courseId === 224593) {
console.log('Received CourseDetailsUpdated SignalR event for course:', courseId);
const courseDetailsElement = document.getElementById('courseDetails');
const preloaderElement = document.getElementById('courseDetailsPreloader');
if (courseDetailsElement && preloaderElement) {
courseDetailsElement.innerHTML = details;
preloaderElement.style.display = 'none';
console.log('Course details updated via SignalR');
}
}
});
connection.on("CareerPathUpdated", (courseId, careerPath) => {
if (courseId === 224593) {
const careerPathElement = document.getElementById('careerPath');
const preloaderElement = document.getElementById('careerPathPreloader');
if (careerPathElement && preloaderElement) {
careerPathElement.innerHTML = careerPath;
preloaderElement.style.display = 'none';
}
}
});
connection.start()
.then(() => console.log("SignalR Connected"))
.catch(err => console.error("SignalR Connection Error: ", err));
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const courseId = 224593;
// Load Reviews
function loadReviews() {
fetch(`/Course/GetReviewsText/${courseId}`)
.then(response => {
if (!response.ok) throw new Error('No reviews');
return response.json();
})
.then(reviews => {
const reviewsSection = document.getElementById('reviewsSection');
if (!Array.isArray(reviews) || reviews.length === 0) {
reviewsSection.innerHTML = `
<div class="bg-white rounded-2xl shadow-md p-8">
<h2 class="text-2xl font-bold text-gray-900 mb-6">Why people choose us for their career</h2>
<div class="text-center text-gray-500">No reviews available.</div>
</div>`;
return;
}
let html = `
<div class="bg-white rounded-2xl shadow-md p-8">
<h2 class="text-2xl font-bold text-gray-900 mb-6">Why people choose us for their career</h2>
<div class="space-y-6">`;
reviews.forEach(review => {
html += `
<div class="bg-gradient-to-br from-white to-gray-50 rounded-xl shadow-sm p-6 border border-gray-100 hover:shadow-md transition-shadow duration-200">
<div class="flex items-center mb-3">
<span class="text-2xl mr-3">${countryCodeToFlagEmoji(review.countryCode)}</span>
<div>
<span class="font-semibold text-lg text-gray-900">${review.name}</span>
<span class="ml-2 px-2 py-0.5 rounded-full bg-blue-50 text-blue-700 text-xs font-medium uppercase tracking-wide">${review.countryCode ? review.countryCode.toUpperCase() : ''}</span>
</div>
<div class="ml-auto flex items-center">
<div class="flex items-center">
${generateStarRating(review.rating)}
</div>
<span class="ml-2 text-sm text-gray-600">${review.rating.toFixed(1)}</span>
</div>
</div>
<div class="text-gray-700 text-base leading-relaxed italic pl-11">
" ${review.review} "
</div>
</div>`;
});
html += `
</div>
</div>`;
reviewsSection.innerHTML = html;
})
.catch(() => {
const reviewsSection = document.getElementById('reviewsSection');
reviewsSection.innerHTML = `
<div class="bg-white rounded-2xl shadow-md p-8">
<h2 class="text-2xl font-bold text-gray-900 mb-6">Why people choose us for their career</h2>
<div class="text-center text-gray-500">Unable to load reviews at this time.</div>
</div>`;
});
}
// Load Podcast
function loadPodcast() {
fetch(`/Course/CheckPodcastStatus/${courseId}`)
.then(response => response.json())
.then(data => {
const podcastContainer = document.getElementById('podcastContainer');
if (data.status === 'ready') {
podcastContainer.innerHTML = `
<audio id="podcastPlayer" controls class="w-full" preload="auto">
<source src="/Course/GetPodcastAudio/${courseId}" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div class="flex justify-end items-center mt-2 mb-2">
<a href="#" id="toggleTranscript" class="text-blue-600 hover:underline text-xs font-medium">Show transcript</a>
</div>
<p class="text-sm text-gray-600 mb-4">Listen to industry experts discuss key concepts and real-world applications of this course</p>
<div id="transcript" class="mt-2 hidden bg-gray-50 border border-gray-200 rounded-lg p-4 text-gray-900 text-sm max-h-48 overflow-y-auto">
Loading transcript...
</div>
`;
// Load transcript
fetch(`/Course/GetPodcastTranscript/${courseId}`)
.then(response => response.text())
.then(content => {
const transcript = document.getElementById('transcript');
if (transcript) {
// Format the transcript content
const formattedContent = content
.split('\n')
.map(line => {
if (line.startsWith('HOST:')) {
return `<div class="mb-2"><span class="font-semibold text-blue-700">HOST:</span> ${line.substring(5).trim()}</div>`;
} else if (line.startsWith('GUEST:')) {
return `<div class="mb-3"><span class="font-semibold text-green-700">GUEST:</span> ${line.substring(6).trim()}</div>`;
}
return line;
})
.join('');
transcript.innerHTML = formattedContent;
}
});
// Setup transcript toggle
const toggleButton = document.getElementById('toggleTranscript');
const transcript = document.getElementById('transcript');
if (toggleButton && transcript) {
toggleButton.addEventListener('click', function(e) {
e.preventDefault();
const isHidden = transcript.classList.contains('hidden');
transcript.classList.toggle('hidden');
toggleButton.textContent = isHidden ? 'Hide transcript' : 'Show transcript';
});
}
} else {
podcastContainer.innerHTML = `
<div class="text-center py-4">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-[#0056D2] mx-auto"></div>
<p class="mt-2 text-sm text-gray-600">Generating podcast...</p>
</div>
`;
// Check status again in 5 seconds
setTimeout(loadPodcast, 5000);
}
})
.catch(error => {
console.error('Error loading podcast:', error);
const podcastContainer = document.getElementById('podcastContainer');
podcastContainer.innerHTML = `
<div class="text-center py-4">
<p class="text-sm text-red-600">Error loading podcast. Please try again later.</p>
</div>
`;
});
}
// Helper to convert country code to emoji flag
function countryCodeToFlagEmoji(code) {
if (!code || code.length !== 2) return '';
return String.fromCodePoint(0x1F1E6 + code.toUpperCase().charCodeAt(0) - 65)
+ String.fromCodePoint(0x1F1E6 + code.toUpperCase().charCodeAt(1) - 65);
}
function generateStarRating(rating) {
let stars = '';
const fullStars = Math.floor(rating);
const hasHalfStar = rating % 1 >= 0.5;
// Add full stars
for (let i = 0; i < fullStars; i++) {
stars += `<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>`;
}
// Add half star if needed
if (hasHalfStar) {
stars += `<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<defs>
<linearGradient id="halfStar">
<stop offset="50%" stop-color="currentColor"/>
<stop offset="50%" stop-color="#D1D5DB"/>
</linearGradient>
</defs>
<path fill="url(#halfStar)" d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>`;
}
// Add empty stars
const emptyStars = 5 - fullStars - (hasHalfStar ? 1 : 0);
for (let i = 0; i < emptyStars; i++) {
stars += `<svg class="w-5 h-5 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>`;
}
return stars;
}
// Start loading both sections
loadReviews();
loadPodcast();
// AJAX call to update Fee2 if needed
fetch('/Course/UpdateFee2IfNeeded', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]')?.value || ''
},
body: 'id=' + encodeURIComponent(224593)
});
// AJAX call to update Fee1 if needed
fetch('/Course/UpdateFee1IfNeeded', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]')?.value || ''
},
body: 'id=' + encodeURIComponent(224593)
});
// Add AJAX call for Duration1 update
// AJAX call to update Duration1 if needed
fetch('/Course/UpdateDuration1IfNeeded', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]')?.value || ''
},
body: 'id=' + encodeURIComponent(224593)
});
// Add AJAX call for Duration2 update
// AJAX call to update Duration2 if needed
fetch('/Course/UpdateDuration2IfNeeded', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'RequestVerificationToken': document.querySelector('input[name=\"__RequestVerificationToken\"]')?.value || ''
},
body: 'id=' + encodeURIComponent(224593)
});
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const courseId = 224593;
// Load Reviews
function loadReviews() {
fetch(`/Course/GetReviewsText/${courseId}`)
.then(response => {
if (!response.ok) throw new Error('No reviews');
return response.json();
})
.then(reviews => {
const reviewsSection = document.getElementById('reviewsSection');
if (!Array.isArray(reviews) || reviews.length === 0) {
reviewsSection.innerHTML = `
<div class="bg-white rounded-2xl shadow-md p-8">
<h2 class="text-2xl font-bold text-gray-900 mb-6">Why people choose us for their career</h2>
<div class="text-center text-gray-500">No reviews available.</div>
</div>`;
return;
}
let html = `
<div class="bg-white rounded-2xl shadow-md p-8">
<h2 class="text-2xl font-bold text-gray-900 mb-6">Why people choose us for their career</h2>
<div class="space-y-6">`;
reviews.forEach(review => {
html += `
<div class="bg-gradient-to-br from-white to-gray-50 rounded-xl shadow-sm p-6 border border-gray-100 hover:shadow-md transition-shadow duration-200">
<div class="flex items-center mb-3">
<span class="text-2xl mr-3">${countryCodeToFlagEmoji(review.countryCode)}</span>
<div>
<span class="font-semibold text-lg text-gray-900">${review.name}</span>
<span class="ml-2 px-2 py-0.5 rounded-full bg-blue-50 text-blue-700 text-xs font-medium uppercase tracking-wide">${review.countryCode ? review.countryCode.toUpperCase() : ''}</span>
</div>
<div class="ml-auto flex items-center">
<div class="flex items-center">
${generateStarRating(review.rating)}
</div>
<span class="ml-2 text-sm text-gray-600">${review.rating.toFixed(1)}</span>
</div>
</div>
<div class="text-gray-700 text-base leading-relaxed italic pl-11">
" ${review.review} "
</div>
</div>`;
});
html += `
</div>
</div>`;
reviewsSection.innerHTML = html;
})
.catch(() => {
const reviewsSection = document.getElementById('reviewsSection');
reviewsSection.innerHTML = `
<div class="bg-white rounded-2xl shadow-md p-8">
<h2 class="text-2xl font-bold text-gray-900 mb-6">Why people choose us for their career</h2>
<div class="text-center text-gray-500">Unable to load reviews at this time.</div>
</div>`;
});
}
// Load Podcast
function loadPodcast() {
fetch(`/Course/CheckPodcastStatus/${courseId}`)
.then(response => response.json())
.then(data => {
const podcastContainer = document.getElementById('podcastContainer');
if (data.status === 'ready') {
podcastContainer.innerHTML = `
<audio id="podcastPlayer" controls class="w-full" preload="auto">
<source src="/Course/GetPodcastAudio/${courseId}" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div class="flex justify-end items-center mt-2 mb-2">
<a href="#" id="toggleTranscript" class="text-blue-600 hover:underline text-xs font-medium">Show transcript</a>
</div>
<p class="text-sm text-gray-600 mb-4">Listen to industry experts discuss key concepts and real-world applications of this course</p>
<div id="transcript" class="mt-2 hidden bg-gray-50 border border-gray-200 rounded-lg p-4 text-gray-900 text-sm max-h-48 overflow-y-auto">
Loading transcript...
</div>
`;
// Load transcript
fetch(`/Course/GetPodcastTranscript/${courseId}`)
.then(response => response.text())
.then(content => {
const transcript = document.getElementById('transcript');
if (transcript) {
// Format the transcript content
const formattedContent = content
.split('\n')
.map(line => {
if (line.startsWith('HOST:')) {
return `<div class="mb-2"><span class="font-semibold text-blue-700">HOST:</span> ${line.substring(5).trim()}</div>`;
} else if (line.startsWith('GUEST:')) {
return `<div class="mb-3"><span class="font-semibold text-green-700">GUEST:</span> ${line.substring(6).trim()}</div>`;
}
return line;
})
.join('');
transcript.innerHTML = formattedContent;
}
});
// Setup transcript toggle
const toggleButton = document.getElementById('toggleTranscript');
const transcript = document.getElementById('transcript');
if (toggleButton && transcript) {
toggleButton.addEventListener('click', function(e) {
e.preventDefault();
const isHidden = transcript.classList.contains('hidden');
transcript.classList.toggle('hidden');
toggleButton.textContent = isHidden ? 'Hide transcript' : 'Show transcript';
});
}
} else {
podcastContainer.innerHTML = `
<div class="text-center py-4">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-[#0056D2] mx-auto"></div>
<p class="mt-2 text-sm text-gray-600">Generating podcast...</p>
</div>
`;
// Check status again in 5 seconds
setTimeout(loadPodcast, 5000);
}
})
.catch(error => {
console.error('Error loading podcast:', error);
const podcastContainer = document.getElementById('podcastContainer');
podcastContainer.innerHTML = `
<div class="text-center py-4">
<p class="text-sm text-red-600">Error loading podcast. Please try again later.</p>
</div>
`;
});
}
// Helper to convert country code to emoji flag
function countryCodeToFlagEmoji(code) {
if (!code || code.length !== 2) return '';
return String.fromCodePoint(0x1F1E6 + code.toUpperCase().charCodeAt(0) - 65)
+ String.fromCodePoint(0x1F1E6 + code.toUpperCase().charCodeAt(1) - 65);
}
function generateStarRating(rating) {
let stars = '';
const fullStars = Math.floor(rating);
const hasHalfStar = rating % 1 >= 0.5;
// Add full stars
for (let i = 0; i < fullStars; i++) {
stars += `<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>`;
}
// Add half star if needed
if (hasHalfStar) {
stars += `<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<defs>
<linearGradient id="halfStar">
<stop offset="50%" stop-color="currentColor"/>
<stop offset="50%" stop-color="#D1D5DB"/>
</linearGradient>
</defs>
<path fill="url(#halfStar)" d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>`;
}
// Add empty stars
const emptyStars = 5 - fullStars - (hasHalfStar ? 1 : 0);
for (let i = 0; i < emptyStars; i++) {
stars += `<svg class="w-5 h-5 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>`;
}
return stars;
}
// Start loading both sections
loadReviews();
loadPodcast();
});
</script>
<script>
// Add polling for career path updates
function pollCareerPath() {
fetch(`/Course/GetCareerPath/${224593}`)
.then(response => response.text())
.then(careerPath => {
if (careerPath && careerPath.trim() !== '') {
const careerPathElement = document.getElementById('careerPath');
const preloaderElement = document.getElementById('careerPathPreloader');
if (careerPathElement && preloaderElement) {
careerPathElement.innerHTML = careerPath;
preloaderElement.style.display = 'none';
}
} else {
setTimeout(pollCareerPath, 2000); // Poll every 2 seconds
}
})
.catch(error => {
console.error('Error polling career path:', error);
setTimeout(pollCareerPath, 2000);
});
}
// Start polling if career path is empty
if (document.getElementById('careerPathPreloader')) {
pollCareerPath();
}
</script>
<script>
// Add polling for course details updates
function pollCourseDetails() {
console.log('Polling course details for course ID:', 224593);
fetch(`/Course/GetCourseDetails/${224593}`)
.then(response => {
console.log('Course details response status:', response.status);
return response.text();
})
.then(courseDetails => {
console.log('Course details received:', courseDetails ? courseDetails.length + ' characters' : 'empty');
if (courseDetails && courseDetails.trim() !== '') {
const courseDetailsElement = document.getElementById('courseDetails');
const preloaderElement = document.getElementById('courseDetailsPreloader');
if (courseDetailsElement && preloaderElement) {
courseDetailsElement.innerHTML = courseDetails;
preloaderElement.style.display = 'none';
console.log('Course details updated in UI');
}
} else {
console.log('Course details still empty, continuing to poll...');
setTimeout(pollCourseDetails, 2000); // Poll every 2 seconds
}
})
.catch(error => {
console.error('Error polling course details:', error);
setTimeout(pollCourseDetails, 2000);
});
}
// Start polling if course details is empty
const preloaderElement = document.getElementById('courseDetailsPreloader');
const courseDetailsElement = document.getElementById('courseDetails');
// Check if CourseDetails is empty or preloader is visible
const isCourseDetailsEmpty = !courseDetailsElement ||
!courseDetailsElement.innerHTML ||
courseDetailsElement.innerHTML.trim() === '' ||
courseDetailsElement.innerHTML.trim() === 'Page Not Found';
// Only start polling if preloader is visible AND CourseDetails is empty
if (preloaderElement && preloaderElement.style.display !== 'none' && isCourseDetailsEmpty) {
console.log('Starting course details polling...');
console.log('Preloader display:', preloaderElement.style.display);
console.log('CourseDetails empty:', isCourseDetailsEmpty);
pollCourseDetails();
} else {
console.log('Course details already loaded, skipping polling');
console.log('Preloader display:', preloaderElement ? preloaderElement.style.display : 'null');
console.log('CourseDetails content length:', courseDetailsElement ? courseDetailsElement.innerHTML.length : 0);
}
// Add manual trigger for testing (remove in production)
window.manualPollCourseDetails = function() {
console.log('Manual polling triggered');
pollCourseDetails();
};
// Add a test function to check if polling is working
window.testPolling = function() {
console.log('Testing polling mechanism...');
const courseDetailsElement = document.getElementById('courseDetails');
const preloaderElement = document.getElementById('courseDetailsPreloader');
console.log('CourseDetails element:', courseDetailsElement);
console.log('Preloader element:', preloaderElement);
console.log('CourseDetails content:', courseDetailsElement ? courseDetailsElement.innerHTML : 'null');
console.log('Preloader display:', preloaderElement ? preloaderElement.style.display : 'null');
pollCourseDetails();
};
// Fallback: Start polling after a short delay if CourseDetails is still empty
setTimeout(function() {
const courseDetailsElement = document.getElementById('courseDetails');
const preloaderElement = document.getElementById('courseDetailsPreloader');
if (courseDetailsElement && preloaderElement &&
(!courseDetailsElement.innerHTML ||
courseDetailsElement.innerHTML.trim() === '' ||
courseDetailsElement.innerHTML.trim() === 'Page Not Found') &&
preloaderElement.style.display !== 'none') {
console.log('Fallback: Starting course details polling after delay...');
pollCourseDetails();
}
}, 1000);
// Optimized Dynamic Viewer Count
(function initializeViewerCount() {
const viewersElement = document.getElementById('currentViewers');
if (!viewersElement) return;
// Constants
const MIN_VIEWERS = 10;
const MAX_VIEWERS = 50;
const UPDATE_INTERVAL = 5000; // 5 seconds
const CHANGE_PROBABILITY = 0.7; // 70% chance of change
// Initialize with a random number
let currentViewers = Math.floor(Math.random() * (MAX_VIEWERS - MIN_VIEWERS + 1)) + MIN_VIEWERS;
viewersElement.textContent = currentViewers;
// Use requestAnimationFrame for smooth updates
let lastUpdate = 0;
function updateCount(timestamp) {
if (timestamp - lastUpdate >= UPDATE_INTERVAL) {
// Only update if probability threshold is met
if (Math.random() < CHANGE_PROBABILITY) {
// Weighted random change (-1 is more likely than +1)
const change = Math.random() < 0.6 ? -1 : 1;
currentViewers = Math.max(MIN_VIEWERS, Math.min(MAX_VIEWERS, currentViewers + change));
viewersElement.textContent = currentViewers;
}
lastUpdate = timestamp;
}
requestAnimationFrame(updateCount);
}
// Start the animation loop
requestAnimationFrame(updateCount);
})();
</script>
<script>
// Add polling for about this course updates
function pollAboutThisCourse() {
fetch(`/Course/GetAboutThisCourse/${224593}`)
.then(response => response.text())
.then(overview => {
if (overview && overview.trim() !== '') {
const descriptionElement = document.getElementById('courseDescription');
const preloaderElement = document.getElementById('descriptionPreloader');
if (descriptionElement && preloaderElement) {
// Split the overview into sentences and skip first two
const sentences = overview.split('.');
const remainingContent = sentences.slice(2).join('.').trimStart('.');
descriptionElement.innerHTML = remainingContent;
preloaderElement.style.display = 'none';
descriptionElement.style.display = 'block';
}
} else {
setTimeout(pollAboutThisCourse, 2000); // Poll every 2 seconds
}
})
.catch(error => {
console.error('Error polling about this course:', error);
setTimeout(pollAboutThisCourse, 2000);
});
}
// Start polling if description preloader exists
if (document.getElementById('descriptionPreloader')) {
pollAboutThisCourse();
}
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const cards = document.querySelectorAll('.expandable-card');
cards.forEach(card => {
const header = card.querySelector('.card-header');
const content = card.querySelector('.card-content');
const icon = card.querySelector('.expand-icon');
header.addEventListener('click', function(e) {
// Close all other cards
cards.forEach(otherCard => {
if (otherCard !== card) {
const otherContent = otherCard.querySelector('.card-content');
const otherIcon = otherCard.querySelector('.expand-icon');
if (otherContent && !otherContent.classList.contains('hidden')) {
otherContent.classList.add('hidden');
otherIcon.classList.remove('rotate-180');
}
}
});
// Toggle this card
content.classList.toggle('hidden');
icon.classList.toggle('rotate-180');
});
});
});
</script>
<script>
// Existing scripts...
// Handle success badge
document.addEventListener('DOMContentLoaded', function() {
const successBadge = document.getElementById('successBadge');
if (successBadge) {
setTimeout(() => {
successBadge.style.opacity = '0';
successBadge.style.transform = 'translateY(-20px)';
setTimeout(() => {
successBadge.remove();
}, 300);
}, 5000);
}
});
</script>
<script>
// Language switcher functionality and visibility management
document.addEventListener('DOMContentLoaded', function() {
// Function to get current culture from URL path or default to current thread culture
function getCurrentCulture() {
const path = window.location.pathname;
const segments = path.split('/').filter(segment => segment.length > 0);
if (segments.length > 0) {
const supportedLanguages = ['en', 'es', 'fr', 'de', 'ar', 'zh', 'ja', 'ko', 'hi', 'pt'];
if (supportedLanguages.includes(segments[0])) {
return segments[0];
}
}
return 'hi';
}
// Function to get current location from URL path or default to 'global'
function getCurrentLocation() {
const path = window.location.pathname;
const segments = path.split('/').filter(segment => segment.length > 0);
if (segments.length >= 2) {
return segments[1];
}
return 'global';
}
// Function to update all search forms with the correct language and location-based action URLs
function updateSearchFormsCulture() {
const mobileSearchForm = document.getElementById('mobileSearchForm');
const desktopSearchForm = document.getElementById('desktopSearchForm');
const homeSearchForm = document.getElementById('homeSearchForm');
const currentCulture = getCurrentCulture();
const currentLocation = getCurrentLocation();
if (mobileSearchForm) {
mobileSearchForm.action = `/${currentCulture}/${currentLocation}/Search`;
}
if (desktopSearchForm) {
desktopSearchForm.action = `/${currentCulture}/${currentLocation}/Search`;
}
if (homeSearchForm) {
homeSearchForm.action = `/${currentCulture}/${currentLocation}/Search`;
}
}
// Initialize search forms with current culture
updateSearchFormsCulture();
// Add form submit event listeners to ensure forms are always updated
const mobileSearchForm = document.getElementById('mobileSearchForm');
const desktopSearchForm = document.getElementById('desktopSearchForm');
const homeSearchForm = document.getElementById('homeSearchForm');
if (mobileSearchForm) {
mobileSearchForm.addEventListener('submit', function(e) {
updateSearchFormsCulture();
});
}
if (desktopSearchForm) {
desktopSearchForm.addEventListener('submit', function(e) {
updateSearchFormsCulture();
});
}
if (homeSearchForm) {
homeSearchForm.addEventListener('submit', function(e) {
updateSearchFormsCulture();
});
}
// Set up language switcher functionality
function setupLanguageSwitcher() {
const buttons = document.querySelectorAll('#language-menu-button');
const menus = document.querySelectorAll('#language-menu');
buttons.forEach((button, index) => {
const menu = menus[index];
if (button && menu) {
// Toggle menu on button click
button.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
const isExpanded = button.getAttribute('aria-expanded') === 'true';
button.setAttribute('aria-expanded', !isExpanded);
if (isExpanded) {
menu.classList.add('hidden');
} else {
menu.classList.remove('hidden');
}
});
// Close menu when clicking outside
document.addEventListener('click', function(event) {
if (!button.contains(event.target) && !menu.contains(event.target)) {
button.setAttribute('aria-expanded', 'false');
menu.classList.add('hidden');
}
});
// Close menu on escape key
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
button.setAttribute('aria-expanded', 'false');
menu.classList.add('hidden');
}
});
// Prevent menu from closing when clicking inside it
menu.addEventListener('click', function(event) {
event.stopPropagation();
});
}
});
}
// Initialize language switcher functionality
setupLanguageSwitcher();
// Listen for language changes from the language switcher
function setupLanguageChangeListener() {
// Monitor for URL changes (when language is switched)
let currentUrl = window.location.href;
// Check for URL changes every 100ms
setInterval(function() {
if (window.location.href !== currentUrl) {
currentUrl = window.location.href;
updateSearchFormsCulture();
}
}, 100);
// Also listen for popstate events (back/forward navigation)
window.addEventListener('popstate', function() {
updateSearchFormsCulture();
});
// Listen for clicks on language switcher links
document.addEventListener('click', function(e) {
if (e.target.closest('#language-menu a')) {
// Language link was clicked, update forms after a short delay
setTimeout(updateSearchFormsCulture, 50);
}
});
}
// Initialize language change listener
setupLanguageChangeListener();
// Check if language switcher is visible and show fallback if needed
setTimeout(function() {
const mainLangSwitcher = document.querySelector('.language-switcher-desktop');
const fallbackLangSwitcher = document.querySelector('.language-switcher-fallback');
const directLangSwitcher = document.querySelector('.direct-language-switcher');
if (mainLangSwitcher && fallbackLangSwitcher) {
const mainStyles = window.getComputedStyle(mainLangSwitcher);
const isMainVisible = mainStyles.display !== 'none' &&
mainStyles.visibility !== 'hidden' &&
mainStyles.opacity !== '0';
if (!isMainVisible) {
fallbackLangSwitcher.style.display = 'block';
mainLangSwitcher.style.display = 'none';
// Also check if fallback is visible
setTimeout(function() {
const fallbackStyles = window.getComputedStyle(fallbackLangSwitcher);
const isFallbackVisible = fallbackStyles.display !== 'none' &&
fallbackStyles.visibility !== 'hidden' &&
fallbackStyles.opacity !== '0';
if (!isFallbackVisible && directLangSwitcher) {
directLangSwitcher.style.display = 'block';
fallbackLangSwitcher.style.display = 'none';
mainLangSwitcher.style.display = 'none';
}
}, 500);
}
}
// Final check - ensure at least one language switcher is visible on desktop
if (window.innerWidth >= 768) {
setTimeout(function() {
const anyVisible = document.querySelector('.language-switcher-desktop:not([style*="display: none"]), .language-switcher-fallback:not([style*="display: none"]), .direct-language-switcher:not([style*="display: none"])');
if (!anyVisible) {
if (directLangSwitcher) {
directLangSwitcher.style.display = 'block';
}
}
}, 2000);
}
}, 1000);
// Add loading indicator when form is submitted
const searchForm = document.querySelector('form[action*="/Search"]');
if (searchForm) {
searchForm.addEventListener('submit', function() {
const searchInput = this.querySelector('input[name="query"]');
if (searchInput.value.trim()) {
const loadingOverlay = document.createElement('div');
loadingOverlay.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
loadingOverlay.innerHTML = `
<div class="bg-white p-6 rounded-lg shadow-lg">
<div class="animate-spin rounded-full h-10 w-10 border-b-2 border-blue-600 mx-auto"></div>
<p class="mt-4 text-gray-700 text-lg">Searching courses...</p>
<p class="mt-2 text-gray-500 text-sm">Searching through our course database</p>
</div>
`;
document.body.appendChild(loadingOverlay);
}
});
}
});
</script>
<!-- Tidio Chat -->
<script src="//code.tidio.co/2b9vcx7pcchcf0q0jsnrjyx4vtzka7kw.js" async></script>
<!-- Enrollment Notification Popup -->
<div b-u4k2yyhrco id="enrollmentNotification" class="fixed bottom-4 left-4 bg-gradient-to-r from-white to-blue-50 rounded-lg shadow-lg p-4 max-w-md transform transition-all duration-500 translate-y-full opacity-0 flex items-start space-x-4 z-50 border border-blue-100 hover:shadow-xl cursor-pointer group hover:bg-blue-50/50 notification-container">
<!-- Full notification content -->
<div b-u4k2yyhrco id="fullNotification" class="flex items-start space-x-4 w-full">
<div b-u4k2yyhrco class="flex-shrink-0 relative">
<img b-u4k2yyhrco src="/uploads/logos/0a50f1fa-ecb4-44b8-9de1-7a376227302a.png" alt="SSB Logo" class="h-12 w-12 object-contain transition-all duration-300 group-hover:scale-105">
<div b-u4k2yyhrco class="absolute -top-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-white"></div>
</div>
<div b-u4k2yyhrco class="flex-1 min-w-0">
<div b-u4k2yyhrco class="flex items-center space-x-2">
<div b-u4k2yyhrco class="flex-1">
<p b-u4k2yyhrco class="text-sm font-semibold text-gray-900 line-clamp-2 group-hover:text-blue-700 transition-colors" id="notificationText"></p>
<div b-u4k2yyhrco class="mt-0.5 flex items-center space-x-2">
<span b-u4k2yyhrco class="inline-flex items-center text-xs">
<svg b-u4k2yyhrco class="w-3 h-3 text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path b-u4k2yyhrco d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
<span b-u4k2yyhrco id="courseRating" class="text-yellow-600 font-medium">4.8</span>
</span>
<span b-u4k2yyhrco class="inline-flex items-center text-xs text-gray-500">
<svg b-u4k2yyhrco class="w-3 h-3 text-gray-400 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path b-u4k2yyhrco fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path>
</svg>
<span b-u4k2yyhrco id="notificationTime" class="group-hover:text-blue-600 transition-colors"></span>
</span>
</div>
</div>
</div>
<div b-u4k2yyhrco class="mt-2 flex items-center justify-between">
<div b-u4k2yyhrco class="flex items-center space-x-2">
<span b-u4k2yyhrco class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800 group-hover:bg-blue-200 transition-colors">
नया नामांकन
</span>
<span b-u4k2yyhrco id="courseLevelBadge" class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800 group-hover:bg-purple-200 transition-colors"></span>
</div>
<div b-u4k2yyhrco class="flex items-center space-x-2">
<a b-u4k2yyhrco id="courseLink" href="#" class="inline-flex items-center text-xs text-blue-600 hover:text-blue-800 font-medium">
<span b-u4k2yyhrco class="group-hover:inline mr-1">→</span>
कोर्स देखें
</a>
<button b-u4k2yyhrco id="muteNotification" class="inline-flex items-center text-xs text-gray-500 hover:text-gray-700 font-medium">
<svg b-u4k2yyhrco class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path b-u4k2yyhrco fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM12.293 7.293a1 1 0 011.414 0L15 8.586l1.293-1.293a1 1 0 111.414 1.414L16.414 10l1.293 1.293a1 1 0 01-1.414 1.414L15 11.414l-1.293 1.293a1 1 0 01-1.414-1.414L13.586 10l-1.293-1.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
म्यूट
</button>
</div>
</div>
<div b-u4k2yyhrco class="mt-2 w-full bg-gray-200 rounded-full h-1.5 overflow-hidden">
<div b-u4k2yyhrco id="courseProgress" class="bg-blue-600 h-1.5 rounded-full w-0 transition-all duration-1000 ease-out transform scale-x-0 origin-left"></div>
</div>
</div>
</div>
<!-- Muted notification content (compact) -->
<div b-u4k2yyhrco id="mutedNotification" class="flex items-center justify-between w-full hidden py-0">
<div b-u4k2yyhrco class="flex items-center space-x-1">
<span b-u4k2yyhrco id="mutedCountryFlag" class="text-xs"></span>
<span b-u4k2yyhrco class="inline-flex items-center px-1 py-0 rounded text-xs font-medium bg-blue-100 text-blue-800">
नया नामांकन
</span>
<span b-u4k2yyhrco class="text-xs font-medium text-gray-900 truncate max-w-32" id="mutedCourseTitle"></span>
</div>
<button b-u4k2yyhrco id="unmuteNotification" class="inline-flex items-center text-xs text-blue-600 hover:text-blue-800 font-medium ml-1">
<svg b-u4k2yyhrco class="w-2.5 h-2.5 mr-0" fill="currentColor" viewBox="0 0 20 20">
<path b-u4k2yyhrco fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM12.293 7.293a1 1 0 011.414 0L15 8.586l1.293-1.293a1 1 0 111.414 1.414L16.414 10l1.293 1.293a1 1 0 01-1.414 1.414L15 11.414l-1.293 1.293a1 1 0 01-1.414-1.414L13.586 10l-1.293-1.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
म्यूट हटाएं
</button>
</div>
</div>
<style>
#courseProgress {
transform-origin: left;
transition: all 7s linear;
}
.notification-container.muted {
padding: 0.5rem !important;
}
</style>
<!-- Add notification script -->
<script>
// Localized strings for notifications
const localizedStrings = {
enrolledIn: 'ने नामांकन किया',
ago: 'पहले'
};
let availableCourses = [];
let currentNotificationUrl = null;
let nameQueue = [];
let countryQueue = [];
let isNotificationMuted = false;
let currentCourseTitle = '';
let currentCountryFlag = '';
// Shuffle array function using Fisher-Yates algorithm
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// Generate random rating between 4.5 and 5.0
function generateRating() {
return (4.5 + Math.random() * 0.5).toFixed(1);
}
// Initialize name queues by region
const namesByRegion = {
westernNames: [
{ name: 'Sarah Williams', gender: 'f' },
{ name: 'John Anderson', gender: 'm' },
{ name: 'Emma Thompson', gender: 'f' },
{ name: 'James Wilson', gender: 'm' },
{ name: 'Olivia Brown', gender: 'f' },
{ name: 'William Parker', gender: 'm' },
{ name: 'Charlotte Davis', gender: 'f' },
{ name: 'Benjamin Foster', gender: 'm' }
],
hispanicNames: [
{ name: 'Maria Rodriguez', gender: 'f' },
{ name: 'Alex Martinez', gender: 'm' },
{ name: 'Isabella Garcia', gender: 'f' },
{ name: 'Carlos Hernandez', gender: 'm' },
{ name: 'Sofia Morales', gender: 'f' },
{ name: 'Miguel Torres', gender: 'm' }
],
eastAsianNames: [
{ name: 'David Chen', gender: 'm' },
{ name: 'Lisa Zhang', gender: 'f' },
{ name: 'Thomas Lee', gender: 'm' },
{ name: 'Isabella Kim', gender: 'f' },
{ name: 'Andrew Wong', gender: 'm' },
{ name: 'Michelle Liu', gender: 'f' },
{ name: 'Kevin Tan', gender: 'm' },
{ name: 'Grace Park', gender: 'f' }
],
southAsianNames: [
{ name: 'Arjun Patel', gender: 'm' },
{ name: 'Priya Singh', gender: 'f' },
{ name: 'Arun Kumar', gender: 'm' },
{ name: 'Neha Sharma', gender: 'f' },
{ name: 'Raj Malhotra', gender: 'm' },
{ name: 'Anjali Mehta', gender: 'f' },
{ name: 'Vikram Shah', gender: 'm' },
{ name: 'Zara Khan', gender: 'f' }
],
middleEasternNames: [
{ name: 'Ahmed Hassan', gender: 'm' },
{ name: 'Leila Rahman', gender: 'f' },
{ name: 'Omar Malik', gender: 'm' },
{ name: 'Yasmin Ahmed', gender: 'f' },
{ name: 'Ali Syed', gender: 'm' }
],
africanNames: [
{ name: 'Samuel Okafor', gender: 'm' },
{ name: 'Amara Okonkwo', gender: 'f' },
{ name: 'Daniel Mensah', gender: 'm' },
{ name: 'Zainab Diallo', gender: 'f' },
{ name: 'Emmanuel Adebayo', gender: 'm' }
]
};
// Country to region mapping
const countryRegionMap = {
// Western Countries
'UK': 'westernNames',
'Ireland': 'westernNames',
'Germany': 'westernNames',
'France': 'westernNames',
'Spain': 'hispanicNames',
'Italy': 'westernNames',
'USA': 'westernNames',
'Canada': 'westernNames',
'Australia': 'westernNames',
'New Zealand': 'westernNames',
// East Asian Countries
'Singapore': 'eastAsianNames',
'Japan': 'eastAsianNames',
'South Korea': 'eastAsianNames',
'Malaysia': 'eastAsianNames',
// South Asian Countries
'India': 'southAsianNames',
'Nepal': 'southAsianNames',
'Sri Lanka': 'southAsianNames',
// Middle Eastern Countries
'UAE': 'middleEasternNames',
'Saudi Arabia': 'middleEasternNames',
'Qatar': 'middleEasternNames',
'Kuwait': 'middleEasternNames',
// African Countries
'Nigeria': 'africanNames',
'South Africa': 'africanNames',
'Kenya': 'africanNames',
'Ghana': 'africanNames'
};
// Initialize country queue
function resetCountryQueue() {
countryQueue = shuffleArray([
// Europe
{ name: 'UK', flag: '🇬🇧' },
{ name: 'Ireland', flag: '🇮🇪' },
{ name: 'Germany', flag: '🇩🇪' },
{ name: 'France', flag: '🇫🇷' },
{ name: 'Spain', flag: '🇪🇸' },
{ name: 'Italy', flag: '🇮🇹' },
// North America
{ name: 'USA', flag: '🇺🇸' },
{ name: 'Canada', flag: '🇨🇦' },
// Asia Pacific
{ name: 'Australia', flag: '🇦🇺' },
{ name: 'New Zealand', flag: '🇳🇿' },
{ name: 'Singapore', flag: '🇸🇬' },
{ name: 'Japan', flag: '🇯🇵' },
{ name: 'South Korea', flag: '🇰🇷' },
{ name: 'Malaysia', flag: '🇲🇾' },
// South Asia
{ name: 'India', flag: '🇮🇳' },
{ name: 'Nepal', flag: '🇳🇵' },
{ name: 'Sri Lanka', flag: '🇱🇰' },
// Middle East
{ name: 'UAE', flag: '🇦🇪' },
{ name: 'Saudi Arabia', flag: '🇸🇦' },
{ name: 'Qatar', flag: '🇶🇦' },
{ name: 'Kuwait', flag: '🇰🇼' },
// Africa
{ name: 'Nigeria', flag: '🇳🇬' },
{ name: 'South Africa', flag: '🇿🇦' },
{ name: 'Kenya', flag: '🇰🇪' },
{ name: 'Ghana', flag: '🇬🇭' }
]);
}
// Get a random name based on country
function getRandomNameForCountry(countryName) {
const regionType = countryRegionMap[countryName] || 'westernNames';
const names = namesByRegion[regionType];
return names[Math.floor(Math.random() * names.length)];
}
// Function to show random enrollment
function showRandomEnrollment() {
if (availableCourses.length === 0 || countryQueue.length === 0) {
resetCountryQueue();
return;
}
const courseIndex = Math.floor(Math.random() * availableCourses.length);
const course = availableCourses[courseIndex];
const countryIndex = Math.floor(Math.random() * countryQueue.length);
const country = countryQueue[countryIndex];
// Get a name appropriate for the country
const learner = getRandomNameForCountry(country.name);
const timeAgo = Math.floor(Math.random() * 5) + 1;
const message = `${learner.name} from ${country.flag} ${country.name} ${localizedStrings.enrolledIn} ${course.title}`;
// Store country flag for muted notifications
currentCountryFlag = country.flag;
showEnrollmentNotification(message, `${timeAgo}m ${localizedStrings.ago}`, course.url, course.level);
// Remove used country from queue
countryQueue.splice(countryIndex, 1);
if (countryQueue.length === 0) {
resetCountryQueue();
}
}
// Fetch courses asynchronously after page load
async function fetchCourses() {
try {
const response = await fetch('/Course/GetRandomCourseTitles');
if (response.ok) {
availableCourses = await response.json();
console.log('Courses loaded successfully');
}
} catch (error) {
console.error('Error loading courses:', error);
// Fallback to demo courses if fetch fails
availableCourses = [
{ id: 1, title: 'Advanced Diploma in Business Management', level: 'Advanced Level', url: '/Course/Details/1' },
{ id: 2, title: 'Professional Certificate in Digital Marketing', level: 'Professional Level', url: '/Course/Details/2' },
{ id: 3, title: 'Diploma in Project Management', level: 'Professional Level', url: '/Course/Details/3' },
{ id: 4, title: 'Advanced Diploma in Disaster Health Management', level: 'Advanced Level', url: '/Course/Details/4' },
{ id: 5, title: 'Certificate in Human Resource Management', level: 'Professional Level', url: '/Course/Details/5' },
{ id: 6, title: 'Diploma in Supply Chain Management', level: 'Professional Level', url: '/Course/Details/6' }
];
}
}
// Load courses after page load
window.addEventListener('load', fetchCourses);
function showEnrollmentNotification(message, timeAgo, courseUrl, courseLevel) {
const notification = document.getElementById('enrollmentNotification');
const notificationText = document.getElementById('notificationText');
const notificationTime = document.getElementById('notificationTime');
const courseLink = document.getElementById('courseLink');
const courseRating = document.getElementById('courseRating');
const courseLevelBadge = document.getElementById('courseLevelBadge');
const courseProgress = document.getElementById('courseProgress');
// Extract course title from the message
const courseTitleMatch = message.match(new RegExp(`${localizedStrings.enrolledIn} (.+)$`));
currentCourseTitle = courseTitleMatch ? courseTitleMatch[1] : 'Course';
notificationText.textContent = message;
notificationTime.textContent = timeAgo;
courseLink.href = courseUrl;
currentNotificationUrl = courseUrl;
courseRating.textContent = generateRating();
courseLevelBadge.textContent = courseLevel;
// Reset progress bar
courseProgress.style.transition = 'none';
courseProgress.style.transform = 'scaleX(0)';
courseProgress.style.width = '0%';
// Show notification with enhanced animation
notification.classList.remove('translate-y-full', 'opacity-0');
// Show appropriate notification content based on mute state
if (isNotificationMuted) {
document.getElementById('fullNotification').classList.add('hidden');
document.getElementById('mutedNotification').classList.remove('hidden');
document.getElementById('mutedCourseTitle').textContent = currentCourseTitle;
document.getElementById('mutedCountryFlag').textContent = currentCountryFlag;
document.getElementById('enrollmentNotification').classList.add('muted');
} else {
document.getElementById('fullNotification').classList.remove('hidden');
document.getElementById('mutedNotification').classList.add('hidden');
document.getElementById('enrollmentNotification').classList.remove('muted');
}
// Add bounce animation
notification.animate([
{ transform: 'translateY(0)' },
{ transform: 'translateY(-10px)', offset: 0.1 },
{ transform: 'translateY(5px)', offset: 0.3 },
{ transform: 'translateY(-3px)', offset: 0.5 },
{ transform: 'translateY(2px)', offset: 0.7 },
{ transform: 'translateY(-1px)', offset: 0.9 },
{ transform: 'translateY(0)' }
], {
duration: 1000,
easing: 'ease-out'
});
// Start progress animation after a short delay
setTimeout(() => {
// Re-enable transition and start progress animation
courseProgress.style.transition = 'all 7s linear';
courseProgress.style.width = '100%';
courseProgress.style.transform = 'scaleX(1)';
}, 100);
// Hide after 7 seconds with fade out
setTimeout(() => {
notification.classList.add('translate-y-full', 'opacity-0');
// Reset progress bar when notification hides
setTimeout(() => {
courseProgress.style.transition = 'none';
courseProgress.style.width = '0%';
courseProgress.style.transform = 'scaleX(0)';
}, 500);
}, 7000);
}
// Add click handler for the entire notification
document.getElementById('enrollmentNotification').addEventListener('click', function(e) {
if (currentNotificationUrl) {
window.location.href = currentNotificationUrl;
}
});
// Prevent the click on the course link from triggering the notification click
document.getElementById('courseLink').addEventListener('click', function(e) {
e.stopPropagation();
});
// Show a notification every 25 seconds
setInterval(() => {
showRandomEnrollment();
}, 25000);
// Show first notification after 3 seconds
setTimeout(showRandomEnrollment, 3000);
// Add mute/unmute functionality
document.getElementById('muteNotification').addEventListener('click', function(e) {
e.stopPropagation();
muteNotification();
});
document.getElementById('unmuteNotification').addEventListener('click', function(e) {
e.stopPropagation();
unmuteNotification();
});
function muteNotification() {
isNotificationMuted = true;
document.getElementById('fullNotification').classList.add('hidden');
document.getElementById('mutedNotification').classList.remove('hidden');
document.getElementById('mutedCourseTitle').textContent = currentCourseTitle;
document.getElementById('mutedCountryFlag').textContent = currentCountryFlag;
document.getElementById('enrollmentNotification').classList.add('muted');
}
function unmuteNotification() {
isNotificationMuted = false;
document.getElementById('fullNotification').classList.remove('hidden');
document.getElementById('mutedNotification').classList.add('hidden');
document.getElementById('enrollmentNotification').classList.remove('muted');
}
</script>
</body>
</html>