350 lines
11 KiB
Plaintext
350 lines
11 KiB
Plaintext
<div class="language-picker-container">
|
||
<div class="language-content-wrapper">
|
||
<h1>Select course language</h1>
|
||
<p>Please choose the language you’d like to take the ‘Jersey City safety course’ in. This language cannot be changed once the course begins.</p>
|
||
|
||
<div class="language-picker-dropdown" id="language-picker">
|
||
<button class="language-picker-btn">
|
||
<div class="language-picker-btn-content">
|
||
<img class="globe-icon" src="https://cdn.northpass.io/doordash/globe-line.svg" alt="">
|
||
<span>English (US)</span>
|
||
</div>
|
||
<span class="language-picker-arrow">
|
||
<i class="far fa-chevron-down picker-arrow"></i>
|
||
</span>
|
||
</button>
|
||
<div class="language-picker-content">
|
||
<div class="lang-option">
|
||
Հայերէն (Armenian)
|
||
</div>
|
||
<div class="lang-option">
|
||
中文 (Chinese)
|
||
</div>
|
||
<div class="lang-option">
|
||
Español (Spanish)
|
||
</div>
|
||
<div class="lang-option" course-id="a9aaf91c-a8fc-4a04-b461-941b3e9533d3">
|
||
English (US)
|
||
</div>
|
||
<div class="lang-option" course-id="f9d690e0-cf18-4a98-91b5-01fb18966729">
|
||
한국어 (Korean)
|
||
</div>
|
||
<div class="lang-option">
|
||
فارسی (Persian)
|
||
</div>
|
||
<div class="lang-option">
|
||
Tagalog
|
||
</div>
|
||
<div class="lang-option">
|
||
Tiếng Việt (Vietnamese)
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="button-container">
|
||
<button class="language-picker-confirm-btn">Confirm</button>
|
||
</div>
|
||
</div>
|
||
<div class="loading-overlay" id="loadingOverlay">
|
||
<div class="spinner"></div>
|
||
</div>
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
margin: 0;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.language-picker-container {
|
||
max-width: 400px;
|
||
margin: 0 auto;
|
||
text-align: left;
|
||
display: flex;
|
||
height: 100svh;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
padding: 20px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.language-picker-container h1 {
|
||
font-size: 1.5em;
|
||
margin: 0 0 10px;
|
||
font-weight: bold;
|
||
color: #191919;
|
||
}
|
||
|
||
.language-picker-container p {
|
||
margin: 0 0 20px;
|
||
line-height: 1.6;
|
||
color: #606060;
|
||
}
|
||
|
||
.language-picker-dropdown {
|
||
position: relative;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.language-picker-btn {
|
||
width: 100%;
|
||
background-color: #f4f4f4;
|
||
border: 1px solid #ccc;
|
||
padding: 10px 20px;
|
||
text-align: left;
|
||
cursor: pointer;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-radius: 5px;
|
||
font-size: 1em;
|
||
border: 2px solid #191919;
|
||
}
|
||
.button-container {
|
||
margin-top: auto;
|
||
}
|
||
.language-picker-content {
|
||
display: none;
|
||
position: absolute;
|
||
background-color: #fff;
|
||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||
width: 100%;
|
||
top: 100%;
|
||
left: 0;
|
||
z-index: 1;
|
||
border-radius: 5px;
|
||
overflow: hidden;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.language-picker-btn-content {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #191919;
|
||
}
|
||
.picker-arrow{
|
||
color:#191919;
|
||
}
|
||
.language-picker-content .lang-option {
|
||
cursor: pointer;
|
||
transition: background-color 0.3s;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.language-picker-content .lang-option:hover {
|
||
background-color: #ddd;
|
||
}
|
||
.lang-option {
|
||
padding: 9px 16px;
|
||
}
|
||
.language-picker-confirm-btn {
|
||
width: 100%;
|
||
background-color: #EB1700;
|
||
color: #fff;
|
||
padding: 12px;
|
||
border: none;
|
||
border-radius: 25px;
|
||
cursor: pointer;
|
||
font-size: 1em;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
}
|
||
|
||
.globe-icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.language-picker-arrow {
|
||
font-size: 0.8em;
|
||
}
|
||
aside {
|
||
display: none !important;
|
||
}
|
||
|
||
.loading-overlay {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(255, 255, 255, 0.8);
|
||
z-index: 1000;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.spinner {
|
||
border: 8px solid #f3f3f3;
|
||
border-top: 8px solid #3498db;
|
||
border-radius: 50%;
|
||
width: 40px;
|
||
height: 40px;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
</style>
|
||
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
const langParam = urlParams.get('lang');
|
||
|
||
const translations = {
|
||
en: {
|
||
title: 'Select course language',
|
||
description: "Please choose the language you’d like to take the ‘Jersey City safety course’ in. This language cannot be changed once the course begins.",
|
||
confirm: "Confirm"
|
||
},
|
||
zh: {
|
||
title: '选择课程语言',
|
||
description: "请选择您希望参加‘泽西市安全课程’的语言。一旦课程开始，此语言将无法更改。",
|
||
confirm: "确认"
|
||
},
|
||
es: {
|
||
title: 'Selecciona el idioma del curso',
|
||
description: "Por favor elija el idioma en el que desea tomar el ‘Curso de seguridad de Jersey City’. Este idioma no se puede cambiar una vez que comience el curso.",
|
||
confirm: "Confirmar"
|
||
},
|
||
tl: {
|
||
title: 'Pumili ng wika para sa kurso',
|
||
description: "Pumili ng wika na nais mong gamitin sa ‘Jersey City safety course’. Hindi na ito mababago kapag nagsimula na ang kurso.",
|
||
confirm: "Kumpirmahin"
|
||
},
|
||
fr: {
|
||
title: 'Sélectionnez la langue du cours',
|
||
description: "Veuillez choisir la langue dans laquelle vous souhaitez suivre le ‘Cours de sécurité de Jersey City’. Cette langue ne peut pas être modifiée une fois le cours commencé.",
|
||
confirm: "Confirmer"
|
||
},
|
||
vi: {
|
||
title: 'Chọn ngôn ngữ khóa học',
|
||
description: "Vui lòng chọn ngôn ngữ bạn muốn sử dụng cho ‘Khóa học an toàn Jersey City’. Ngôn ngữ này không thể thay đổi sau khi khóa học bắt đầu.",
|
||
confirm: "Xác nhận"
|
||
},
|
||
ko: {
|
||
title: '과정 언어 선택',
|
||
description: "‘저지시티 안전 과정’을 수강할 언어를 선택하세요. 과정이 시작되면 언어를 변경할 수 없습니다.",
|
||
confirm: "확인"
|
||
},
|
||
hy: {
|
||
title: 'Ընտրեք դասընթացի լեզուն',
|
||
description: "Խնդրում ենք ընտրել լեզուն, որով ցանկանում եք անցկացնել ‘Ջերսի Սիթի անվտանգության դասընթացը’: Դասընթացի մեկնարկից հետո այս լեզուն չի կարող փոփոխվել։",
|
||
confirm: "Հաստատել"
|
||
},
|
||
fa: {
|
||
title: 'زبان دوره را انتخاب کنید',
|
||
description: "لطفاً زبانی را که میخواهید دوره «ایمنی شهر جرزی» را در آن بگذرانید انتخاب کنید. پس از شروع دوره، این زبان قابل تغییر نیست.",
|
||
confirm: "تأیید"
|
||
}
|
||
};
|
||
|
||
if (langParam && translations[langParam]) {
|
||
|
||
localStorage.setItem('selectedLang', langParam);
|
||
|
||
document.body.setAttribute('data-lang', langParam);
|
||
|
||
const t = translations[langParam];
|
||
document.querySelector('.language-content-wrapper h1').textContent = t.title;
|
||
document.querySelector('.language-content-wrapper p').textContent = t.description;
|
||
document.querySelector('.language-picker-confirm-btn').textContent = t.confirm;
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const dropdown = document.getElementById('language-picker');
|
||
const btn = dropdown.querySelector('.language-picker-btn');
|
||
const selectedSpan = btn.querySelector('span');
|
||
const content = dropdown.querySelector('.language-picker-content');
|
||
const confirmBtn = document.querySelector('.language-picker-confirm-btn');
|
||
const options = Array.from(content.querySelectorAll('.lang-option'));
|
||
const loadingOverlay = document.getElementById('loadingOverlay');
|
||
|
||
let selectedCourseId = options.find(opt => opt.textContent.trim() === 'English (US)').getAttribute('course-id');
|
||
|
||
btn.addEventListener('click', function() {
|
||
content.style.display = content.style.display === 'block' ? 'none' : 'block';
|
||
});
|
||
|
||
options.forEach(option => {
|
||
option.addEventListener('click', function() {
|
||
selectedSpan.textContent = this.textContent;
|
||
|
||
options.forEach(opt => {
|
||
opt.classList.remove('selected');
|
||
const icon = opt.querySelector('.fa-check');
|
||
if (icon) icon.remove();
|
||
});
|
||
|
||
this.classList.add('selected');
|
||
const checkIcon = document.createElement('i');
|
||
checkIcon.className = 'far fa-check';
|
||
this.appendChild(checkIcon);
|
||
|
||
// Update selected course ID
|
||
selectedCourseId = this.getAttribute('course-id');
|
||
|
||
content.style.display = 'none';
|
||
});
|
||
});
|
||
|
||
window.addEventListener('click', function(e) {
|
||
if (!dropdown.contains(e.target)) {
|
||
content.style.display = 'none';
|
||
}
|
||
});
|
||
|
||
confirmBtn.addEventListener('click', function() {
|
||
if (selectedCourseId) {
|
||
loadingOverlay.style.display = 'flex';
|
||
enrollToCourse(selectedCourseId);
|
||
} else {
|
||
console.log('No course ID selected');
|
||
}
|
||
});
|
||
});
|
||
|
||
let enrollToCourse = async (courseId) => {
|
||
function apiCaller() {
|
||
return new Promise(function(res, rej) {
|
||
let xhr = new XMLHttpRequest();
|
||
url = "https://webhooks.workato.com/webhooks/rest/41ea4fc7-fb82-4d0b-8fb3-ca0d3a1e4b8e/enroll-to-course";
|
||
xhr.open("POST", url, true);
|
||
xhr.setRequestHeader('Content-Type', 'application/json');
|
||
xhr.onreadystatechange = function() {
|
||
if (xhr.readyState === 4 && xhr.status === 200) {
|
||
console.log('Enrollment successful');
|
||
res();
|
||
} else if (xhr.readyState === 4) {
|
||
console.log('Enrollment failed');
|
||
rej();
|
||
}
|
||
};
|
||
xhr.send(JSON.stringify({
|
||
"person_id": "{{ current_person.id }}",
|
||
"course_id": courseId
|
||
}));
|
||
});
|
||
}
|
||
|
||
try {
|
||
await apiCaller();
|
||
setTimeout(function() {
|
||
window.location.href = "/courses/" + courseId;
|
||
}, 3000);
|
||
} catch(err) {
|
||
console.log(err);
|
||
}
|
||
};
|
||
</script> |