394 lines
11 KiB
Plaintext
394 lines
11 KiB
Plaintext
{% assign isAuthenticatedUser = false %}
|
|
|
|
{% for group in current_person.groups %}
|
|
{% if group.name == "All Users" or group.id == "6331d115-ea74-418a-99b2-af5c81208fe1" or group.name == "Internal
|
|
Zenjob Testing" or group.id == "940a5d24-32af-45f1-8ed4-8a6b4689d9c9" %}
|
|
{% assign isAuthenticatedUser = true %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% if current_person.email contains "+preview" %}
|
|
{% assign isAuthenticatedUser = true %}
|
|
{% endif %}
|
|
|
|
{% unless isAuthenticatedUser %}
|
|
<main class="np-main np-homepage unauthorized">
|
|
<div class="np-homepage-content">
|
|
<div class="np-homepage-hero-content">
|
|
<div class="np-homepage-headline" style="color: #fff">
|
|
{{ homepage.headline }}
|
|
</div>
|
|
<div class="np-homepage-subheadline">
|
|
Ups, hier ist etwas schief gelaufen. Bitte stelle sicher, dass du die aktuellste App Version installiert hast und öffne den Zenjob Online Campus erneut über "Profil" > "Trainings & Equipment". Danach solltest du diese Seite problemlos öffnen können.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
{% endunless %}
|
|
|
|
{% if isAuthenticatedUser %}
|
|
{% assign catalog_courses = courses.in_catalog %}
|
|
{% include "header", current_page_orgin: "false" %}
|
|
|
|
<main class="np-main np-homepage">
|
|
<div class="np-homepage-content">
|
|
<div class="np-homepage-hero-content">
|
|
<div class="np-homepage-headline" style="color: #fff">
|
|
<span data-lang="DE">{{ homepage.headline }}</span>
|
|
<span data-lang="EN">Welcome to our Zenjob Online Campus!</span>
|
|
</div>
|
|
<div class="np-homepage-subheadline">
|
|
<span data-lang="DE">Hallo {{ current_person.first_name }}, hier bereiten wir dich auf alles vor, was du für deine erste Schicht als
|
|
<div class="dropdown homepage-content-dropdown">
|
|
<button class="dropbtn">Job auswählen</button>
|
|
<div class="dropdown-content">
|
|
<a href="#kassierer-in" data-category-name="Kassierer/in">Kassierer*in</a>
|
|
<a href="#kellner-in" data-category-name="Kellner/in">Kellner*in</a>
|
|
<a href="#warenverräumer-in" data-category-name="Warenverräumer/in">Warenverräumer*in</a>
|
|
</div>
|
|
</div>
|
|
wissen musst.
|
|
</span>
|
|
<span data-lang="EN">Hello {{ current_person.first_name }}, here we prepare you for everything you need to know for your first shift as a
|
|
<div class="dropdown homepage-content-dropdown">
|
|
<button class="dropbtn">select job</button>
|
|
<div class="dropdown-content">
|
|
<a href="#kassierer-in" data-category-name="Kassierer/in">Cashier</a>
|
|
<a href="#kellner-in" data-category-name="Kellner/in">Waitress</a>
|
|
<a href="#warenverräumer-in" data-category-name="Warenverräumer/in">Goods mover</a>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="homepage-cards-section row np-max-width">
|
|
{% for course in catalog_courses %}
|
|
{% if course.properties.homepage_course %}
|
|
{% for cat in course.categories %}
|
|
{% if cat.id == "087ea56d-888b-4e0f-af1f-68627318c841" or cat.id == "9be55234-19c5-4df4-bd1d-03e93f0faf83" or cat.id == "6580e10e-eacf-402d-a330-51d202721cce" or cat.id == "a63019c7-0a46-40bd-bc1b-935c887a4380" or cat.name == "Warenverräumer/in" or cat.name == "Kellner/in" or cat.name == "Kassierer/in" %}
|
|
<div class="col-xs-12 col-sm-6 col-md-3 homepage-card-column" style="display:none;" data-category="{{cat.id}}" data-category-name="{{cat.name}}" data-lang="{{course.properties.course_language}}">
|
|
<a href="{% route course, id: course.id %}" class="homepage-card">
|
|
<div class="homepage-card-content">
|
|
<div class="homepage-card-img">
|
|
<img src="https://s3.amazonaws.com/static.northpass.com/zenjob/FINAL+-+Zenjob+(Purple+Cashier).png" alt="">
|
|
</div>
|
|
<div class="homepage-card-title-wrapper">
|
|
<div>{{course.name}}</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% for learning_path in learning_paths.available %}
|
|
{% assign learning_path_lang = "DE" %}
|
|
{% for learning_path_cat in learning_path.categories %}
|
|
{% if learning_path_cat.name == "English" %}
|
|
{% assign learning_path_lang = "EN" %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% for learning_path_cat in learning_path.categories %}
|
|
{% if learning_path_cat.id == "087ea56d-888b-4e0f-af1f-68627318c841" or learning_path_cat.id == "9be55234-19c5-4df4-bd1d-03e93f0faf83" or learning_path_cat.id == "6580e10e-eacf-402d-a330-51d202721cce" or learning_path_cat.id == "a63019c7-0a46-40bd-bc1b-935c887a4380" or learning_path_cat.name == "Warenverräumer/in" or learning_path_cat.name == "Kellner/in" or learning_path_cat.name == "Kassierer/in" %}
|
|
<div class="col-xs-12 col-sm-6 col-md-3 homepage-card-column" style="display:none;" data-category="{{learning_path_cat.id}}" data-category-name="{{learning_path_cat.name}}" data-lang="{{learning_path_lang}}">
|
|
<a href="{% route learning_path, id: learning_path.id %}" class="homepage-card">
|
|
<div class="homepage-card-content">
|
|
<div class="homepage-card-img">
|
|
<img src="https://s3.amazonaws.com/static.northpass.com/zenjob/opened-book.png" alt="">
|
|
</div>
|
|
<div class="homepage-card-title-wrapper">
|
|
<div>{{learning_path.name}} <span>(optional)</span></div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
{% include "footer" %}
|
|
{% endif %}
|
|
|
|
<style>
|
|
|
|
.np-header {
|
|
background: transparent;
|
|
}
|
|
|
|
main.np-homepage {
|
|
background-color: rgba(118,37,247,1);
|
|
background: linear-gradient(90deg, rgba(62,17,145,1) 0%, rgba(118,37,247,1) 50%, rgba(139,120,250,1) 100%);
|
|
background-size: cover;
|
|
animation: gradient 15s ease-in-out infinite;
|
|
height: 100%;
|
|
padding-top: 100px;
|
|
margin-bottom:0;
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
main.np-homepage.unauthorized {
|
|
padding-top:0;
|
|
}
|
|
|
|
.np-homepage-content {
|
|
align-items: center;
|
|
display: flex;
|
|
position: relative;
|
|
height: 100%;
|
|
flex-direction: column;
|
|
padding-bottom: 60px;
|
|
}
|
|
|
|
.unauthorized .np-homepage-content {
|
|
justify-content:center;
|
|
}
|
|
|
|
.np-homepage-hero-content {
|
|
position: unset;
|
|
padding-bottom: 2.5rem;
|
|
text-align: center;
|
|
}
|
|
.np-homepage-content .np-homepage-headline {
|
|
font-size: 1.75rem;
|
|
color: #fff;
|
|
line-height: 1.1;
|
|
}
|
|
.np-homepage-content .np-homepage-subheadline {
|
|
font-size: 1.25rem;
|
|
line-height: 1.1;
|
|
color: #fff;
|
|
opacity: 100%;
|
|
}
|
|
|
|
@keyframes gradient {
|
|
0% {
|
|
background-position: 0% 79%;
|
|
}
|
|
50% {
|
|
background-position: 100% 22%;
|
|
}
|
|
100% {
|
|
background-position: 0% 79%;
|
|
}
|
|
}
|
|
|
|
.homepage-content-dropdown {
|
|
margin-right: 13px;
|
|
}
|
|
|
|
.dropbtn {
|
|
background-color: transparent;
|
|
color: #fff;
|
|
border: black;
|
|
text-decoration: underline;
|
|
font-weight: 700;
|
|
position:relative;
|
|
cursor:pointer;
|
|
padding: 0 4px 0 0;
|
|
}
|
|
|
|
.dropbtn:after {
|
|
content:"▼";
|
|
position:absolute;
|
|
right: -13px;
|
|
top: 8px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.dropdown-content {
|
|
display: none;
|
|
position: absolute;
|
|
background-color: #E1E2E5;
|
|
color:#707483;
|
|
min-width: 100%;
|
|
box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
|
|
z-index: 100;
|
|
}
|
|
|
|
.dropdown-content a {
|
|
color: black;
|
|
padding: 12px 16px;
|
|
text-decoration: none;
|
|
display: block;
|
|
}
|
|
|
|
.dropdown:hover .dropdown-content {display: block;}
|
|
|
|
.dropdown:hover .dropbtn {background-color: #635bff60;}
|
|
|
|
|
|
/* CARDS SECTION */
|
|
.homepage-cards-section {
|
|
padding: 0 24px;
|
|
width:100%;
|
|
}
|
|
|
|
.homepage-card {
|
|
margin: 0 auto 24px;
|
|
max-width: 350px;
|
|
text-decoration:none;
|
|
display:block;
|
|
}
|
|
|
|
.homepage-card-content {
|
|
display:flex;
|
|
align-items:center;
|
|
background-color: #fff;
|
|
border-radius: 16px;
|
|
box-shadow: rgb(141 148 158 / 30%) 0px 4px 12px;
|
|
}
|
|
|
|
.homepage-card-title-wrapper {
|
|
width:65%;
|
|
color: #3E1191;
|
|
font-weight:700;
|
|
text-align:center;
|
|
padding:16px;
|
|
transition:all 0.2s;
|
|
}
|
|
|
|
.homepage-card:hover .homepage-card-title-wrapper {
|
|
color:#7625F7;
|
|
}
|
|
|
|
.homepage-card-img {
|
|
width:45%;
|
|
border-right: 1px solid #e0f3ff;
|
|
padding:24px 16px;
|
|
text-align:center;
|
|
}
|
|
|
|
.homepage-card-img img {
|
|
max-width: 90px;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
@media (min-width:768px) {
|
|
.np-homepage-hero-content {
|
|
padding-top: 5rem;
|
|
padding-bottom: 3rem;
|
|
max-width:1170px;
|
|
}
|
|
.np-homepage-content .np-homepage-headline {
|
|
font-size: 2.5rem;
|
|
}
|
|
.np-homepage-content .np-homepage-subheadline {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.homepage-content-dropdown {
|
|
margin-right: 22px;
|
|
}
|
|
|
|
.dropbtn:after {
|
|
right: -21px;
|
|
top: 12px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.homepage-cards-section {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.homepage-card {
|
|
max-width: 275px;
|
|
height: 100%;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.homepage-card-content {
|
|
flex-direction: column-reverse;
|
|
height: 100%;
|
|
}
|
|
|
|
.homepage-card-title-wrapper {
|
|
font-size: 18px;
|
|
line-height: 22px;
|
|
width:100%;
|
|
border-bottom:1px solid #e0f3ff;
|
|
flex: 1;
|
|
}
|
|
|
|
.homepage-card-img {
|
|
width: 100%;
|
|
border: none;
|
|
padding: 40px 16px;
|
|
}
|
|
|
|
.homepage-card-img img {
|
|
width: 120px;
|
|
height:120px;
|
|
max-width:120px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
$("document").ready(function() {
|
|
if (window.location.hash) {
|
|
filterCoursesByHash(window.location.hash)
|
|
} else {
|
|
//$(".homepage-card-column[data-category='087ea56d-888b-4e0f-af1f-68627318c841']").show()
|
|
if ($("body").attr("data-lang") == "DE") {
|
|
$(".homepage-card-column[data-category-name='Kassierer/in'][data-lang='DE']").show()
|
|
} else if ($("body").attr("data-lang") == "EN") {
|
|
$(".homepage-card-column[data-category-name='Kassierer/in'][data-lang='EN']").show()
|
|
}
|
|
|
|
}
|
|
})
|
|
|
|
|
|
$(".dropdown-content a").click(function() {
|
|
$(".dropbtn").text($(this).text())
|
|
filterCoursesBySelectedJob($(this))
|
|
})
|
|
|
|
function filterCoursesBySelectedJob(selection) {
|
|
const selectedCategory = $(selection).data("category-name")
|
|
|
|
$(".homepage-card-column").hide()
|
|
|
|
if ($("body").attr("data-lang") == "DE") {
|
|
$(`.homepage-card-column[data-category-name='${selectedCategory}'][data-lang='DE']`).show()
|
|
} else if ($("body").attr("data-lang") == "EN") {
|
|
$(`.homepage-card-column[data-category-name='${selectedCategory}'][data-lang='EN']`).show()
|
|
}
|
|
|
|
}
|
|
|
|
function filterCoursesByHash(urlHash) {
|
|
if ($("body").attr("data-lang") == "DE") {
|
|
$("span[data-lang='DE'] .dropdown-content a").each(function() {
|
|
if ($(this).attr('href') == urlHash) {
|
|
$("span[data-lang='DE'] .dropbtn").text($(this).text())
|
|
filterCoursesBySelectedJob($(this))
|
|
}
|
|
})
|
|
} else if ($("body").attr("data-lang") == "EN") {
|
|
$("span[data-lang='EN'] .dropdown-content a").each(function() {
|
|
if ($(this).attr('href') == urlHash) {
|
|
$("span[data-lang='EN'] .dropbtn").text($(this).text())
|
|
filterCoursesBySelectedJob($(this))
|
|
}
|
|
})
|
|
}
|
|
|
|
}
|
|
</script>
|