|
|
| (7 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | Employee Welcome Kit.
| + | <html> |
| − | | |
| − | onboarding
| |
| − | | |
| − | | |
| − | | |
| − | <!-- Template for HSIB onboarding page -->
| |
| − | | |
| − | <html> | |
| | | | |
| | <head> | | <head> |
| − | | + | <div class="title-container"> |
| − | <meta name="viewport" content="width=device-width, initial-scale=1"> | + | Got to do some research on <div id="onboardHeader"></div></div> |
| − | | + | <div id="newEmp" class="tab-style tab1 selected" onclick="selectTab(this);"><p class="tab1-label">New Employee</p></div> |
| − | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | + | <div class="tab-gap1"></div> |
| − | | + | <div id="hireMgr" class="tab-style tab2" onclick="selectTab(this);"><p class="tab2-label">Hiring Manager</p></div> |
| − | <script> | + | <div class="tab-gap2"></div> |
| − | | + | <div id="newEmp" class="page-content-container"> |
| − | function animateLinkBox() {
| + | <div class="page-content-back"></div> |
| − | | + | <div class="page-content page-content-style"> |
| − | var angles = ["1deg","2deg","3deg", "4deg", "359deg", "358deg", "357deg", "356deg"];
| + | |
| − | | + | <h2 class="page-content-header-style">Welcome to HSIB</h2><br/> |
| − | //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> | |
| − | | |
| − | <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]]
| |
