338 lines
11 KiB
Plaintext
338 lines
11 KiB
Plaintext
<div class="language-picker-container">
|
||
<div class="language-content-wrapper">
|
||
<h1>Confirm course language</h1>
|
||
<p>Please confirm the language you want to use for the Jersey City safety course. You won’t be able to change it after starting.</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">
|
||
{% comment %} <div class="lang-option">
|
||
中文 (Mandarin)
|
||
</div> {% endcomment %}
|
||
<div class="lang-option" course-id="fe9a67d5-c268-4579-b408-9edd4196e109">
|
||
Español (Spanish)
|
||
</div>
|
||
<div class="lang-option" course-id="11f6bec4-8058-4206-9c6f-e862aab70095">
|
||
English (US)
|
||
</div>
|
||
<div class="lang-option" course-id="766a111a-3ba1-42d1-82fe-72b097423837">
|
||
Français (French)
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="button-container">
|
||
<button class="language-picker-confirm-btn">Confirm language</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: 15px;
|
||
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: 'Confirm course language',
|
||
description: "Please confirm the language you want to use for the ‘Jersey City safety course’. You won’t be able to change it after starting.",
|
||
confirm: "Confirm language"
|
||
},
|
||
zh: {
|
||
title: '确认课程语言',
|
||
description: "请确认您希望使用的‘泽西市安全课程’的语言。开始后将无法更改。",
|
||
confirm: "确认语言"
|
||
},
|
||
es: {
|
||
title: 'Confirmar idioma del curso',
|
||
description: "Por favor confirme el idioma que desea usar para el ‘Curso de seguridad de Jersey City’. No podrá cambiarlo después de comenzar.",
|
||
confirm: "Confirmar idioma"
|
||
},
|
||
tl: {
|
||
title: 'Kumpirmahin ang wika ng kurso',
|
||
description: "Pakikumpirma ang wika na nais mong gamitin para sa ‘Jersey City safety course’. Hindi na ito mababago kapag nagsimula na.",
|
||
confirm: "Kumpirmahin ang wika"
|
||
},
|
||
fr: {
|
||
title: 'Confirmer la langue du cours',
|
||
description: "Veuillez confirmer la langue que vous souhaitez utiliser pour le ‘Cours de sécurité de Jersey City’. Vous ne pourrez plus la changer après avoir commencé.",
|
||
confirm: "Confirmer la langue"
|
||
},
|
||
vi: {
|
||
title: 'Xác nhận ngôn ngữ khóa học',
|
||
description: "Vui lòng xác nhận ngôn ngữ bạn muốn sử dụng cho ‘Khóa học an toàn Jersey City’. Bạn sẽ không thể thay đổi sau khi bắt đầu.",
|
||
confirm: "Xác nhận ngôn ngữ"
|
||
},
|
||
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> |