GCcollabNNHPDtest
Employee Welcome Kit.
onboarding
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function animateLinkBox() {
var angles = ["1deg","2deg","3deg", "4deg", "359deg", "358deg", "357deg", "356deg"];
//var x = ["-1px", "-2px", "-3px", "-4px"];
//var y = ["5px", "6px", "7px", "8px"];
var randAngle = randomDoubleFromInterval((-3),(3));//angles[Math.floor(Math.random() * angles.length)];
//var randX = x[Math.floor(Math.random() * x.length)];
//var randY = y[Math.floor(Math.random() * y.length)];
var randX = randomDoubleFromInterval((-30),(-20));
var randY = randomDoubleFromInterval((20),(30));
$(".link-box")[0].style.transform = "translateX("+randX.toString()+"px) translateY("+randY.toString()+"px) rotate("+randAngle+"deg)";
randAngle = randomDoubleFromInterval((-3),(3));
randX = randomDoubleFromInterval((-30),(-20));
randY = randomDoubleFromInterval((20),(30));
$(".link-box")[1].style.transform = "translateX("+randX.toString()+"px) translateY("+randY.toString()+"px) rotate("+randAngle+"deg)";
}
function selectTab(selectedTab) {
$("div.page-content-container").hide();
$("div#"+selectedTab.id+".page-content-container").show();
$("div.tab-style").removeClass("selected");
selectedTab.classList.add("selected");
//animateLinkBox();
}
function randomDoubleFromInterval(min,max) // min and max included
{
return Math.random()*(max-min+1)+min;
}
$(document).ready(function(){
animateLinkBox();
})
</script>
<style>
*, *:before, *:after {
box-sizing: border-box; /* Set all sizing to include border size */
}
.grid-container {
display: grid;
grid-template-columns: [col1-start] 1fr [col1-end col2-start] 10px [col2-end col3-start] 1fr [col3-end col4-start] 2fr [col4-end];
grid-template-rows: [row1-start] 1fr [row1-end row2-start] auto [row2-end row3-start] auto [row3-end];
display: -ms-grid;
-ms-grid-columns: 1fr 10px 1fr 2fr;
-ms-grid-rows: 1fr auto auto;
}
.btn {
border: 2px solid black;
background-color: white;
color: black;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
}
.links{
border-color: #BB1B8D;
color: black;
}
.links:hover {
background-color: #BB1B8D;
color: white;
}
.tab-style {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
/* Unselected tab background and font colour */
background: #e0e0ba;
color: black;
/* Unselected tab margin and padding */
padding: 10px 20px;
min-width: 250px;
/* Unselected tab font size, and weight*/
font-size:20px;
font-weight: bold;
font-family: sans-serif;
text-align: center;
line-height: initial;
overflow:hidden;
cursor:pointer;
box-shadow: 0 5px 0 #e0e0ba, 0 0 1px #333;
transition: opacity 0.25s ease-out;
}
.tab-style:hover { /* Label hover effect */
box-shadow: 0 5px 0 #000000, 0 0 5px #888;
}
.selected {
background-color: #fcfccf;
color: black;
/*border-left: 1px solid #333333;
border-right: 1px solid #333333;
border-top: 1px solid #333333;
border-bottom: 0;*/
box-shadow: 0 5px 0 #fcfccf, 0 0 5px #888;
z-index: 1;
}
.tab1 {
grid-column-start: col1-start;
grid-column-end: col1-end;
grid-row-start: row2-start;
grid-row-end: row2-end;
-ms-grid-column: 1;
-ms-grid-column-span: 1;
-ms-grid-row: 2;
-ms-grid-row-span: 1;
}
div.tab-style>p.tab1-label {
margin: 0;
background: white;
border-top: 10px solid black;
border-radius: 5px;
padding: 8px;
box-shadow:
0px 1px 1px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
}
.tab2 {
grid-column-start: col3-start;
grid-column-end: col3-end;
grid-row-start: row2-start;
grid-row-end: row2-end;
-ms-grid-column: 3;
-ms-grid-column-span: 1;
-ms-grid-row: 2;
-ms-grid-row-span: 1;
}
div.tab-style>p.tab2-label {
margin: 0;
background: white;
border-top: 10px solid black;
border-radius: 5px;
padding: 8px;
box-shadow:
0px 1px 1px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
}
.tab-gap1 {
grid-column-start: col2-start;
grid-column-end: col2-end;
grid-row-start: row2-start;
grid-row-end: row2-end;
/*border-bottom: 1px solid #333333;*/
-ms-grid-column: 2;
-ms-grid-column-span: 1;
-ms-grid-row: 2;
-ms-grid-row-span: 1;
}
.tab-gap2 {
grid-column-start: col4-start;
grid-column-end: col4-end;
grid-row-start: row2-start;
grid-row-end: row2-end;
/*border-bottom: 1px solid #333333;*/
-ms-grid-column: 4;
-ms-grid-column-span: 1;
-ms-grid-row: 2;
-ms-grid-row-span: 1;
}
.page-content-container {
grid-column-start: col1-start;
grid-column-end: col4-end;
grid-row-start: row3-start;
grid-row-end: row3-end;
-ms-grid-column: 1;
-ms-grid-column-span: 4;
-ms-grid-row: 3;
-ms-grid-row-span: 1;
display: grid;
grid-template-columns: [col1-start] 3fr [col1-end col2-start] 1fr [col2-end];
grid-template-rows: [row1-start] 300px [row1-end row2-start] auto [row2-end];
display: -ms-grid;
-ms-grid-columns: 3fr 1fr;
-ms-grid-rows: 300px auto;
border-top-right-radius: 7px;
/*border-bottom-right-radius: 7px;
border-bottom-left-radius: 7px;*/
/*border-left: 1px solid #333333;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;*/
box-shadow: 0 0 5px #888;
background-color: #fcfccf;
}
.page-content-back {
grid-column-start: col1-start;
grid-column-end: col2-end;
grid-row-start: row1-start;
grid-row-end: row2-end;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
-ms-grid-row: 1;
-ms-grid-row-span: 2;
padding: 20px;
margin: 15px;
background: #FFFFF9;
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
}
.page-content {
grid-column-start: col1-start;
grid-column-end: col1-end;
grid-row-start: row1-start;
grid-row-end: row2-end;
-ms-grid-column: 1;
-ms-grid-column-span: 1;
-ms-grid-row: 1;
-ms-grid-row-span: 2;
padding: 20px;
margin: 15px;
}
.page-content-style {
font-family: sans-serif;
/*font-weight: ;*/
font-size: 1.1em;
}
div .page-content-header-style {
font-family: sans-serif;
font-weight: bold;
font-size: 1.3em;
margin: 0;
border: 0;
}
.page-content-rule-style {
border-width: 2px;
border-color: black;
margin: 0;
margin-bottom: 10px;
}
.link-box {
grid-column-start: col2-start;
grid-column-end: col2-end;
grid-row-start: row1-start;
grid-row-end: row1-end;
-ms-grid-column: 2;
-ms-grid-column-span: 1;
-ms-grid-row: 1;
-ms-grid-row-span: 1;
/*border: 2px solid black;
border-radius: 5px;*/
margin: 25px;
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
transform: translateY(5px);
}
.link-box-style {
padding: 10px;
font-size: 1.2em;
font-family: sans-serif;
background-color: #ffff88;
}
.link-box>ul,
div.page-content-style>ul,
.checklist-style>ul,
td.table-content-style>ul{
list-style: none;
}
.link-box>ul>li:before,
div.page-content-style>ul>li:before,
.table-content-style>ul>li:before{
content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */
color: black; /* Change the color */
font-weight: bold; /* If you want it to be bold */
font-size: 1.2em;
display: inline-block; /* Needed to add space between the bullet and the text */
width: 1em; /* Also needed for space (tweak if needed) */
margin-left: -1em; /* Also needed for space (tweak if needed) */
vertical-align: middle;
}
.page-content-style .checklist-style>ul>li:before{
content: "\25A1"; /* Add content: \25A1 is the CSS Code/unicode for a square */
color: black; /* Change the color */
font-weight: bold; /* If you want it to be bold */
font-size: 1.5em;
display: inline-block; /* Needed to add space between the bullet and the text */
width: 1em; /* Also needed for space (tweak if needed) */
margin-left: -1em; /* Also needed for space (tweak if needed) */
}
.checklist-style>ul>li{
padding: 10px;
}
.title-container {
grid-column-start: col1-start;
grid-column-end: col4-end;
grid-row-start: row1-start;
grid-row-end: row1-end;
/*align-self: end;*/
-ms-grid-column: 1;
-ms-grid-column-span: 4;
-ms-grid-row: 1;
-ms-grid-row-span: 1;
/*-ms-grid-row-align: end;*/
}
.title-content {
text-align: center;
font-size: 3em;
text-transform: uppercase;
font-weight: bold;
/*text-shadow: 0.25vw 0.15vw grey;*/
font-family: sans-serif;
}
a.link-style {
font-weight: bold;
text-decoration: none;
color: royalblue;
}
a.link-style:visited {
color: royalblue;
}
a.link-style:hover {
color: darkblue;
text-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
}
#onboardHeader, #onboardHeaderFR {
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 400px;
}
#onboardHeader {
background-image: url("http://www.gcpedia.gc.ca/gcwiki/images/2/2d/HSIBOnboardingHeader.jpg");
}
#onboardHeaderFR {
background-image: url("http://www.gcpedia.gc.ca/gcwiki/images/0/0a/HSIBOnboardingHeaderFR.jpg");
}
</style>
<style> /* Style set to remove certain GCpedia elements from the page */
.firstHeading {
display: none;
}
#contentSub {
display: none;
}
#content {
background-color: aliceblue;
}
</style>
</head>
</html>
