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>
|