The Work Environment and Facilities
How do I make an the work environment and facilities?
What is a the work environment and facilities? How do you make a the work environment and facilities? This script and codes were developed by Marcus Macmillan on 23 September 2022, Friday.
The Work Environment and Facilities - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The Work Environment and Facilities</title> <link rel='stylesheet prefetch' href='https://www.education.tas.gov.au/documentcentre/Documents/HazardsRisksPagesStyle_1.css'>
<link rel='stylesheet prefetch' href='https://www.education.tas.gov.au/documentcentre/Documents/Menu.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <!--DIV CONTAINER FOR MEDIA QUERY--> <div id="Container"> <!--DIV LEFT PADDING FOR WEB PAGE--> <div id="PageMargin"> <!--Hazards and Risks Header!--> <img id="Header" src="https://www.education.tas.gov.au/documentcentre/Documents/(2)Hazards%20and%20Risks.PNG" /> <!--Menu Container--> <div id="MenuContainer" onclick="openNav()"> <div id="NewHeader">The Work Environment & Facilities</div> <div class="Menu1"></div> <div class="Menu2"></div> <div class="Menu3"></div> </div> <!--End of div Menu Container--> <!--Side Navigation Bar Menu--> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">x</a> <a href="https://www.education.tas.gov.au/intranet/CSD/HR/whs/SitePages/Home.aspx">Home</a> <a href="https://www.education.tas.gov.au/documentcentre/Documents/(1)%20Managing%20Health%20and%20Safety_1.html">Managing Work Health & Safety</a> <a href="https://www.education.tas.gov.au/documentcentre/Documents/(2)Hazards%20and%20Risks_1.html"> Hazards & Risks</a> <a href="https://www.education.tas.gov.au/documentcentre/Documents/(4)%20WHS%20Alerts_1.html">Work Health & Safety Alerts</a> <a href="https://www.education.tas.gov.au/documentcentre/Documents/(5)%20WHS%20Resources%20Page.html">WHS Resources Page</a> <a href="https://www.education.tas.gov.au/documentcentre/Documents/(6)%20WHS%20Events_1.html">WHS Events</a> <a href="https://www.education.tas.gov.au/documentcentre/Documents/(7)Emergency%20Management_1.html">Emergency Management</a> <a href="https://www.education.tas.gov.au/documentcentre/Documents/(8)Training%20and%20Development_1.html">Training & Development</a> <a href="https://www.education.tas.gov.au/documentcentre/Documents/(9)%20WHS%20Management%20System_1.html">Work Health & Safety Management System</a> <a href="https://www.education.tas.gov.au/documentcentre/Documents/(10)%20Incident%20Notification%20Procedures_1.html">Incident Notification Procedures</a> </div> <!-- End of SideNav div--> <!--Intro text section!--> <p>The Code of Practice – Managing the Work Environment and Facilities applies to all types of work and all workplaces covered by the WHS Act, including workplaces that are mobile, temporary and remote. It provides practical guidance for managers and others on how to provide and maintain a physical work environment that is without risks to health and safety.</p> <p>The code covers: <!--Unordered List!--> <ul> <li>The physical work environment, such as workspace, lighting and ventilation.</li> <li>Facilities for workers, including toilets, drinking water, washing and dining areas, change rooms, personal storage and shelter.</li> <li>Remote and isolated work.</li> <li>Emergency plans.</li> </ul> <p></p> <div class="Border2"> <p><a href="https://www.safeworkaustralia.gov.au/sites/SWA/about/Publications/Documents/626/Managing_Work_Environment_and_Facilities2.pdf">Code of Practice – Managing the Work Environment and Facilities</a></p> <p><a href="https://www.safeworkaustralia.gov.au/sites/SWA/about/Publications/Documents/695/managing-risks-of-plant-in-workplace-cop-21032016.pdf">Code of Practice – Managing the Risks of Plant in the Workplace</a></p> </div> <p></p> <p>The Department Of Education also has a number of policies, plans and procedures to manage work environments and these too should be consulted:</p> <!--BUTTON CONTAINER FOR ACCORDION MENUS--> <div id="ButtonContainer"> <!--ACCORDION DROP DOWN MENU--> <button class="accordion"><img class = "image" src = "https://www.education.tas.gov.au/documentcentre/Documents/Clipboard2_Icon.png"</img>Policies & procedures <span class = "span">A - L</span></button> <!--CONTAINER FOR DIV PANEL FOR DROP DOWN LIST ITEMS--> <div class="panel"> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/WHS%20-%20Building%20Inspection%20Checklist.docx">Building Inspection Checklist</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Community-Use-of-School-Facilities-and-Resources-Guideline.pdf">Community Use of School Facilities<span class = "hide1"> and Resources</span></a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Equipment%20Lockout_Tagout%20procedure.pdf">Equipment Lockout/Tagout Procedure</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Mobile%20Phone%20Guidelines.pdf">Mobile Phone Use Guidelines</a></p> <p><a href="https://www.vwa.vic.gov.au/__data/assets/pdf_file/0016/3634/Officewise_web.pdf">Officewise – <span class = "hide1">a Guide to</span> Health & Safety in the Office</span></a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Personal%20Equipment%20on%20Worksites%20WHS%20guidelines.pdf">Personal Equipment on Worksites</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Playground-Equipment-Guideline.pdf">Playground Equipment</a></p> <!--END OF CONTAINER FOR DIV PANEL FOR DROP DOWN LIST ITEMS--> </div> <!--ACCORDION DROP DOWN MENU--> <button class="accordion"><img class = "image" src = "https://www.education.tas.gov.au/documentcentre/Documents/Clipboard2_Icon.png"</img>Policies & procedures <span class = "span">M - W</span></button> <!--CONTAINER FOR DIV PANEL FOR DROP DOWN LIST ITEMS--> <div class="panel"> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Playground-Checklist.docx">Playground Checklist</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Smokefree-Workplaces%20Statement.pdf">Smokefree Workplaces Statement</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Tree-Management-Guideline.pdf">Tree Management Guidelines</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Working-in-heat.pdf">Working in Heat – Guidance Note</a></p> <p><a href="https://worksafe.tas.gov.au/__data/assets/pdf_file/0005/199139/nhp004.pdf">Working in Heat – WorkSafe Tasmania</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/WHS%20Basics%20for%20Cleaners.pdf"><span class = "hide1">Workplace Health And Safety</span><span class = "hide2">WHS </span> Basics for Cleaners</span></a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Health-and-Safety-Overview.pdf"><span class = "hide1">Work Health and Safety</span><span class = "hide2">WHS </span> Overview Infosheet</span></a></p> <!--END OF CONTAINER FOR DIV PANEL FOR DROP DOWN LIST ITEMS--> </div> <!--END OF BUTTON CONTAINER FOR ACCORDION MENUS--> </div> <br> <div id="Header2">Rain Water Tanks</div> <div class="Border2"> <p><a href="https://www.health.gov.au/internet/main/publishing.nsf/content/D3E8C00F3041304BCA257BF0001C685A/%24File/env_rainwater.pdf">Guidance on the Use of Rain Water Tanks</a></p> <p><a href="https://www.communitywaterplanner.gov.au/login?return=">Community Water Planner</a></p> </div> <!--No padding for footer!--> </div> <img id="Footer" src="https://www.education.tas.gov.au/documentcentre/Documents/WHS%20Footer.PNG" /> <!--END OF CONTAINER FOR PAGE MEDIA FORMATTING--> </div> <!--JAVACRIPT FOR MENU & NAVBAR--> <script src="Menu.js"></script>
</body> <script src='https://www.education.tas.gov.au/documentcentre/Documents/Menu.js'></script> <script src="js/index.js"></script>
</body>
</html>
The Work Environment and Facilities - Script Codes CSS Codes
/* THE WORK ENVIRONMENT & FACILITIES CSS */ ul { list-style-type: square; list-style-position: inside; padding-top: 20px; padding-right: 10px; padding-bottom: 20px; background-color: #cccccc; border-radius: 40px; line-height: 40px; padding-left: 50px; margin-left: 20px; margin-right: 20px; } /*CSS FOR ACCORDION MENUS CHECKLISTS MENU ACCORDION
CODES OF PRACTICE MENU ACCORDION*/ /*CONTAINER FOR BUTTON MENU*/ #ButtonContainer { margin: auto; width: 65%; margin-top: 40px; } /*Style the menu button panel that is used to open and close the Checkllists accordion panel*/ button.accordion { font-size: 24px; font-weight: bold; background-color: #cccccc; color: white; cursor: pointer; padding: 18px; width: 100%; text-align: left; border-radius: 20px; border-style: none; outline: none; transitiion: 0.4s; } /*Add a background colour to the menu button panel if is clicked on (add the .active class with JS), and when you move the mouse over it (hover)*/ button.accordion.active, button.accordion:hover { background-color: #bfbfbf; } /*Style the drop down list panel. Note: hidden by default*/ div.panel { padding: 1%; background-color: #d9d9d9; text-indent: 6%; line-height: 20px; font-weight: bold; border-radius: 20px; transition: 0.6s ease-in-out; max-height: 0; overflow: hidden; opacity: 0; } div.panel a:link { color: #808080; font-weight: bold; } div.panel a:hover { text-decoration: underline; } div.panel a:visited { color: #808080; } /*Color every 2nd panel of drop down list*/ div.panel p:nth-child(even) { background-color: white; padding: 20px 0px; } /*The 'show' class is addded to the drop down list panel when the user clicks on one of the buttons. This will show the panel content*/ div.panel.show { opacity: 1; max-height: 450px; } /*Button symbols to indicate whether the collapsable content is open or closed*/ button.accordion:after { content: '\02795'; /*Unicode character for'plus' sign(+)*/ font-size: 16px; color: white; float: right; margin-left: 5px; margin-top: 5px; } button.accordion.active:after { content: "\2796"; /*Unicode character for 'minus' sign (-)*/ } .span { padding-left: 20px; font-size: 26px; font-weight: 900; color: white; } .image { padding-right: 10px; margin-bottom: -5px; height: 35px; width: 45px; color: white; } .hide1 { display: inline; } .hide2 { display: none; }
}
/*FIRST MEDIA SCREEN SIZE SET CONTAINER WIDTH TO 100% FOR SIZING */
/*MEDIA SCREEN SIZE FOR LARGE SCREENS*/
@media screen and (max-width: 1820px) { #Container { width: 100%; } #Header { width: 100%; height: 200px; } #Footer { width: 100%; height: 120px; }
}
/*MEDIA SCREEN SIZE FOR MINIMIZED LARGE SCREEN DESKTOPS AND LAPTOPS*/
@media screen and (max-width: 1500px) { #Container { width: 100%; } p { font-size: 20px; } ul { font-size: 20px; } #Header { width: 100%; height: 150px; } #Footer { width: 100%; height: 75px; } #PageMargin { margin-left: 20px; } #Header2 { font-size: 20px; } ul { padding-top: 20px; padding-bottom: 20px; border-radius: 35px; line-height: 35px; padding-left: 40px; margin-left: 15px; margin-right: 15px; } /*Container for button menu*/ #ButtonContainer { margin: auto; width: 65%; margin-top: 30px; } /* Style the buttons that are used to open and close the accordion panel */ button.accordion { font-size: 22px; padding: 16px; border-radius: 18px; } /* Style the accordion panel. Note: hidden by default */ div.panel { text-indent: 50px; line-height: 16px; border-radius: 18px; } div.panel p:nth-child(even) { padding-top: 16px; padding-bottom: 16px; line-height: 16px; } /* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */ div.panel.show { opacity: 1; max-height: 500px; } /*Button symbols to indicate whether the collapsable content is open or closed*/ button.accordion:after { font-size: 14px; margin-left: 5px; } .span { padding-left: 18px; font-size: 24px; }
}
/*MEDIA SCREEN SIZE FOR IPADS - LANDSCAPE*/
@media screen and (max-width: 1024px) { #Container { width: 100%; } p { font-size: 18px; } ul { font-size: 18px; } #Header { width: 100%; height: 120px; } #Footer { width: 100%; height: 75px; } #PageMargin { margin-left: 15px; } #Header2 { font-size: 18px; border-width: 4px; border-radius: 5px; padding: 5px; box-shadow: 5px 5px 2px #B5B5B5; } ul { padding-top: 15px; padding-bottom: 15px; border-radius: 30px; line-height: 30px; padding-left: 30px; margin-left: 10px; margin-right: 10px; } /* Style the buttons that are used to open and close the accordion panel */ button.accordion { font-size: 20px; padding: 14px; border-radius: 16px; } /* Style the accordion panel. Note: hidden by default */ div.panel { text-indent: 30px; line-height: 14px; border-radius: 16px; } div.panel p:nth-child(even) { padding-top: 14px; padding-bottom: 14px; line-height: 14px; } /* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */ div.panel.show { opacity: 1; max-height: 420px; } /*Button symbols to indicate whether the collapsable content is open or closed*/ button.accordion:after { font-size: 12px; margin-left: 5px; margin-top: 8px; } .span { padding-left: 16px; font-size: 22px; } .image { padding-right: 10px; margin-bottom: -4px; height: 30px; width: 40px; }
}
/*MEDIA SCREEN SIZE FOR MIPADS - PORTRAIT*/
@media screen and (max-width: 768px) { #Container { width: 100%; } p { font-size: 14px; } ul { font-size: 14px; } #Header { width: 100%; height: 75px; } #Footer { width: 100%; height: 50px; } #PageMargin { margin-left: 10px; } #Header2 { font-size: 14px; border-width: 2px; border-radius: 5px; padding: 4px; box-shadow: 5px 5px 2px #B5B5B5 } ul { padding-top: 10px; padding-bottom: 10px; border-radius: 30px; line-height: 30px; padding-left: 20px; margin-left: 10px; margin-right: 10px; } /*Container for button menu*/ #ButtonContainer { margin: auto; width: 65%; margin-top: 40px; border-radius: 14px; } /* Style the buttons that are used to open and close the accordion panel */ button.accordion { font-size: 14px; padding: 12px; border-radius: 14px; } /* Style the accordion panel. Note: hidden by default */ div.panel { text-indent: 20px; line-height: 12px; border-radius: 14px; } div.panel p:nth-child(even) { padding-top: 12px; padding-bottom: 12px; line-height: 12px; } /* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */ div.panel.show { opacity: 1; max-height: 360px; } /*Button symbols to indicate whether the collapsable content is open or closed*/ button.accordion:after { font-size: 10px; margin-left: 5px; } .span { padding-left: 14px; font-size: 20px; } .image { padding-right: 8px; margin-bottom: -3px; height: 25px; width: 35px; }
}
/*MEDIA SCREEN FOR NEWHEADER*/
@media screen and (max-width: 550px) { #Container { width: 100%; } p { font-size: 11px; } #PageMargin { margin-left: 0px; } #Header { width: 100%; height: 50px; } #Footer { width: 100%; height: 25px; } /*Container for button menu*/ #ButtonContainer { margin: auto; width: 75%; margin-top: 20px; } /* Style the buttons that are used to open and close the accordion panel */ button.accordion { font-size: 12px; padding: 8px; border-radius: 12px; } /* Style the accordion panel. Note: hidden by default */ div.panel { text-indent: 8px; line-height: 8px; border-radius: 12px; } div.panel p:nth-child(even) { padding-top: 8px; padding-bottom: 8px; line-height: 8px; } /* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */ div.panel.show { opacity: 1; max-height: 360px; } /*Button symbols to indicate whether the collapsable content is open or closed*/ button.accordion:after { font-size: 10px; margin-left: 5px; margin-top: 7px; } .span { padding-left: 8px; font-size: 14px; } .image { padding-right: 2px; margin-bottom: -1px; height: 20px; width: 30px; } #NewHeader { font-size: 16px; padding-top: 0.2%; padding-left: 25%; }
}
/*MEDIA SCREEN FOR NEWHEADER*/
@media screen and (max-width: 450px) { #NewHeader { font-size: 14px; padding-top: 0.2%; padding-left: 20%; }
}
/*Accordion Menu adjustment for screen*/
@media screen and (max-width: 400px) { .span { padding-left: 4px; font-size: 14px; } .image { padding-right: 0px; margin-bottom: -1px; height: 20px; width: 30px; } .hide1 { display: none; } .hide2 { display: inline-block; }
}
/*SET SMALLEST SCREEN SIZE ALLOWABLE*/
@media screen and (max-width: 360px) { #Container { width: 320px; } p { font-size: 12px; } ul { font-size: 12px; } #Header { width: 100%; height: 75px; } #Footer { width: 100%; height: 25px; } #PageMargin { margin-left: 5px; } #NewHeader { font-size: 12px; padding-top: 0.4%; padding-left: 20%; } #Header2 { font-size: 12px; border-width: 2px; border-radius: 5px; padding: 2px; box-shadow: 5px 5px 2px #B5B5B5; } ul { padding-top: 5px; padding-bottom: 5px; border-radius: 30px; line-height: 25px; padding-left: 15px; margin-left: 5px; margin-right: 5px; }
}
The Work Environment and Facilities - Script Codes JS Codes
/*Accordion for Checklists Menus*/
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) { acc[i].onclick = function() { this.classList.toggle("active"); this.nextElementSibling.classList.toggle("show"); }
}
Developer | Marcus Macmillan |
Username | Marcus666 |
Uploaded | September 23, 2022 |
Rating | 3 |
Size | 5,849 Kb |
Views | 24,288 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Driving Safety While at Work | 2,863 Kb |
Asbsestos Management | 3,338 Kb |
WHS Resources | 4,501 Kb |
Incident Notification | 4,425 Kb |
Managing HS | 6,166 Kb |
Wet Weather | 4,291 Kb |
WHS Resources_New | 4,455 Kb |
Endless Scrolling Bar | 2,127 Kb |
Home Economics | 3,144 Kb |
Managing the Risks of Falls | 6,202 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Weather Icons | Gtalin | 2,519 Kb |
TweetBox with React JS | J0zelito | 3,325 Kb |
Caputre Cam with JS | KimmoCommit | 2,795 Kb |
Button Option Group | Honchoman | 1,859 Kb |
HTML5 Breakout | Jaysalvat | 4,873 Kb |
Responsive Advert | James_zedd | 2,354 Kb |
Mega Menu by Joni | Asakasinsky | 3,171 Kb |
Fullscreen Parallax | Bassta | 3,313 Kb |
Slide In Panel | Vikvarg | 2,811 Kb |
Map Controls | Iliadraznin | 3,721 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!