|
|
| Line 1: |
Line 1: |
| − | | + | <!-- Template for HSIB onboarding page --> |
| − | <!--Employee Welcome Kit.Onboarding --> | |
| | | | |
| | <html> | | <html> |
| Line 25: |
Line 24: |
| | | | |
| | //var randY = y[Math.floor(Math.random() * y.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>
| |
| − |
| |
| − | <nowiki>*</nowiki>, *: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);
| |
| − |
| |
| − | }
| |
| − |
| |
| − | <nowiki>#</nowiki>onboardHeader, #onboardHeaderFR {
| |
| − |
| |
| − | background-size: contain;
| |
| − |
| |
| − | background-repeat: no-repeat;
| |
| − |
| |
| − | background-position: center;
| |
| − |
| |
| − |
| |
| − | width: 100%;
| |
| − |
| |
| − | height: 400px;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | <nowiki>#</nowiki>onboardHeader {
| |
| − |
| |
| − | background-image: url("<nowiki>http://www.gcpedia.gc.ca/gcwiki/images/2/2d/HSIBOnboardingHeader.jpg</nowiki>");
| |
| − |
| |
| − | }
| |
| − |
| |
| − | <nowiki>#</nowiki>onboardHeaderFR {
| |
| − |
| |
| − | background-image: url("<nowiki>http://www.gcpedia.gc.ca/gcwiki/images/0/0a/HSIBOnboardingHeaderFR.jpg</nowiki>");
| |
| − |
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − |
| |
| − | <style> /* Style set to remove certain GCpedia elements from the page */
| |
| − |
| |
| − | .firstHeading {
| |
| − |
| |
| − | display: none;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | <nowiki>#</nowiki>contentSub {
| |
| − |
| |
| − | display: none;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | <nowiki>#</nowiki>content {
| |
| − |
| |
| − | background-color: aliceblue;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − |
| |
| − | </head>
| |
| − |
| |
| − | </html>
| |
| − |
| |
| − | <!-- End of template for HSIB onboarding page --><div class="grid-container">[[File:Employee Welcome Kit Placemat - Test for GCwiki.pdf|thumb|Test for Wiki]]
| |
| − | [[File:2. Policy on COVID-19 Vaccination.docx|thumb|policy on COVID-19 vaccination]]
| |
| − | [[File:Employee Welcome Kit Placemat.pdf|thumb|Test]]
| |
