(Blanked the page) |
|||
Line 1: | Line 1: | ||
+ | <html> | ||
+ | <head> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
+ | <link href="https://fonts.googleapis.com/css?family=Raleway:700" rel="stylesheet"> | ||
+ | <link href="https://fonts.googleapis.com/css?family=Montserrat:300|Vollkorn:700|Wallpoet|Heebo:800|Alegreya+Sans+SC:900" rel="stylesheet"> | ||
+ | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | ||
+ | </head> | ||
+ | <style> | ||
+ | * { | ||
+ | -webkit-box-sizing: border-box; | ||
+ | box-sizing: border-box; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | html { | ||
+ | font-size:16px; | ||
+ | } | ||
+ | body { | ||
+ | width: 100%; | ||
+ | margin: 48px 0 0 0; | ||
+ | padding: 0; | ||
+ | color: black; | ||
+ | background-color: white; | ||
+ | font: inherit; | ||
+ | font-size:16px; | ||
+ | word-wrap: break-word; | ||
+ | } | ||
+ | |||
+ | @media (min-width: 1024px) { | ||
+ | body { | ||
+ | margin: 16px 0 0 0; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | #globalWrapper { | ||
+ | width: 100%; | ||
+ | padding: 0; | ||
+ | background-color: #149375; | ||
+ | position: relative; | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | #content { | ||
+ | width: 100%; | ||
+ | min-height: 80vh; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | border: none; | ||
+ | color: inherit; | ||
+ | background-color: #ffffff; | ||
+ | position: relative; | ||
+ | } | ||
+ | #HQ_page { | ||
+ | width: 100%; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | background: none; | ||
+ | } | ||
+ | #top_title{display:none;} | ||
+ | |||
+ | |||
+ | #bodyContent { | ||
+ | } | ||
+ | |||
+ | html *{ | ||
+ | cursor:url("https://static.igem.org/mediawiki/2018/4/48/T--Bulgaria--idea.png"),auto; | ||
+ | } | ||
+ | |||
+ | h1{ | ||
+ | padding-top: 70px; | ||
+ | font-size: 40px; | ||
+ | font-family: 'Alegreya Sans SC', sans-serif !important; | ||
+ | padding-bottom: 10px; | ||
+ | } | ||
+ | |||
+ | #bottomLayer{ | ||
+ | position: fixed; | ||
+ | top:15px; | ||
+ | left:0px; | ||
+ | height: 110%; | ||
+ | width: 100%; | ||
+ | background-color: #0A1215; | ||
+ | |||
+ | } | ||
+ | |||
+ | .backgroundPicture{ | ||
+ | position: fixed; | ||
+ | top: 15; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | opacity: 0.5; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2018/7/70/T--Bulgaria--safety.jpg"); | ||
+ | background-color: #0A1215; | ||
+ | background-position: center; | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: cover; | ||
+ | } | ||
+ | |||
+ | |||
+ | .navigation { | ||
+ | position:fixed; | ||
+ | top:15px; | ||
+ | width: 100%; | ||
+ | left:0px; | ||
+ | overflow: hidden; | ||
+ | background-color: #62071B; | ||
+ | } | ||
+ | |||
+ | .navigation a { | ||
+ | font-family: 'Raleway', sans-serif; | ||
+ | float: left; | ||
+ | display: block; | ||
+ | color: White; | ||
+ | text-align: center; | ||
+ | padding: 14px 16px; | ||
+ | text-decoration: none; | ||
+ | font-size: 17px; | ||
+ | } | ||
+ | |||
+ | .navigation a:hover { | ||
+ | background-color: #380615; | ||
+ | color: White; | ||
+ | } | ||
+ | |||
+ | #specialMenu { | ||
+ | background-color: #D5898A; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | #activeMenu{ | ||
+ | background-color: #9F182F; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | .navigation .icon { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | @media screen and (max-width: 1000px) { | ||
+ | .navigation a:not(:first-child) {display: none;} | ||
+ | .navigation a.icon { | ||
+ | float: right; | ||
+ | display: block; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media screen and (max-width: 1000px) { | ||
+ | .navigation.responsive { position:fixed; | ||
+ | top:15px; | ||
+ | width: 100%; | ||
+ | left:0px;} | ||
+ | .navigation.responsive .icon { | ||
+ | position: absolute; | ||
+ | right: 0; | ||
+ | top: 0; | ||
+ | } | ||
+ | .navigation.responsive a { | ||
+ | float: none; | ||
+ | display: block; | ||
+ | text-align: left; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | .contentHolder{ | ||
+ | -webkit-touch-callout: none; | ||
+ | -webkit-user-select: none; | ||
+ | -khtml-user-select: none; | ||
+ | -moz-user-select: none; | ||
+ | -ms-user-select: none; | ||
+ | user-select: none; | ||
+ | opacity: 0.8; | ||
+ | position: relative; | ||
+ | top:70vh; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | width: 850px; | ||
+ | padding-bottom: 70px; | ||
+ | padding-top: 20px; | ||
+ | background-color: #b5b7b8; | ||
+ | height: auto; | ||
+ | text-align: center !important; | ||
+ | } | ||
+ | |||
+ | a{ | ||
+ | color: black; | ||
+ | |||
+ | } | ||
+ | a:hover{ | ||
+ | color: black; | ||
+ | text-decoration: none; | ||
+ | |||
+ | } | ||
+ | |||
+ | .contentHolder:hover{ | ||
+ | background-color: C5C7C8; | ||
+ | |||
+ | } | ||
+ | |||
+ | #topTitle{ | ||
+ | padding-top: 50px; | ||
+ | border-radius: 50px 50px 0px 0px; | ||
+ | opacity: 1; | ||
+ | text-align: center; | ||
+ | font-family: 'Heebo', sans-serif; | ||
+ | font-size: 60px; | ||
+ | height: 30px; | ||
+ | } | ||
+ | #topTitle:hover{ | ||
+ | background-color: B5B7B8; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | p{ | ||
+ | text-align: center !important; | ||
+ | margin-left: 64px; | ||
+ | margin-right: 64px; | ||
+ | font-family: 'Montserrat', sans-serif !important; | ||
+ | font-size: 20px !important; | ||
+ | } | ||
+ | |||
+ | strong{ | ||
+ | font-family: 'Heebo', sans-serif; | ||
+ | } | ||
+ | |||
+ | .dropbtn { | ||
+ | background-color: #4CAF50; | ||
+ | color: white; | ||
+ | padding: 16px; | ||
+ | font-size: 16px; | ||
+ | border: none; | ||
+ | cursor: pointer; | ||
+ | width: 20vw; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .quickfind-content { | ||
+ | font-family: 'Heebo', sans-serif; | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | background-color: #f9f9f9; | ||
+ | width: 20vw; | ||
+ | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | ||
+ | z-index: 1; | ||
+ | |||
+ | } | ||
+ | |||
+ | .quickfind-content a { | ||
+ | color: black; | ||
+ | padding: 12px 16px; | ||
+ | text-decoration: none; | ||
+ | display: block; | ||
+ | text-align: center; | ||
+ | border-style: solid none none none; | ||
+ | } | ||
+ | |||
+ | .quickfind-content a:hover {background-color: #B1B1B1} | ||
+ | |||
+ | .quickfind:hover .quickfind-content { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .quickfind:hover .dropbtn { | ||
+ | background-color: #3e8e41; | ||
+ | } | ||
+ | .quickfind { | ||
+ | position: absolute; | ||
+ | width: 20vw; | ||
+ | left: 40vw; | ||
+ | top: 15vh; | ||
+ | } | ||
+ | |||
+ | @media screen and (max-width: 1000px) { | ||
+ | |||
+ | p{ | ||
+ | margin-left: 32px; | ||
+ | margin-right: 32px; | ||
+ | } | ||
+ | |||
+ | .contentHolder:hover{ | ||
+ | background-color: B5B7B8; | ||
+ | |||
+ | } | ||
+ | .contentHolder{ | ||
+ | height: auto; | ||
+ | width: auto; | ||
+ | } | ||
+ | |||
+ | |||
+ | #topTitle{ | ||
+ | border-radius: 50px 50px 0px 0px; | ||
+ | opacity: 1; | ||
+ | text-align: center; | ||
+ | font-family: 'Heebo', sans-serif; | ||
+ | font-size: 42px; | ||
+ | height: 0vw; | ||
+ | } | ||
+ | #topTitle:hover{ | ||
+ | background-color: B5B7B8; | ||
+ | } | ||
+ | |||
+ | .dropbtn { | ||
+ | background-color: #4CAF50; | ||
+ | color: white; | ||
+ | padding: 16px; | ||
+ | font-size: 16px; | ||
+ | border: none; | ||
+ | cursor: pointer; | ||
+ | width: 50vw; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .quickfind-content { | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | background-color: #f9f9f9; | ||
+ | width: 50vw; | ||
+ | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | ||
+ | z-index: 1; | ||
+ | } | ||
+ | |||
+ | .quickfind-content a { | ||
+ | color: black; | ||
+ | padding: 12px 16px; | ||
+ | text-decoration: none; | ||
+ | display: block; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .quickfind-content a:hover { | ||
+ | background-color: #f1f1f1; | ||
+ | |||
+ | } | ||
+ | |||
+ | .quickfind:hover .quickfind-content { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .quickfind:hover .dropbtn { | ||
+ | background-color: #3e8e41; | ||
+ | } | ||
+ | .quickfind { | ||
+ | position: absolute; | ||
+ | width: 50vw; | ||
+ | left: 25vw; | ||
+ | top: 100px; | ||
+ | } | ||
+ | } | ||
+ | <--!end mobile-> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | #topbtn { | ||
+ | display: none; | ||
+ | position: fixed; | ||
+ | bottom: 20px; | ||
+ | right: 30px; | ||
+ | z-index: 99; | ||
+ | font-size: 18px; | ||
+ | border: none; | ||
+ | outline: none; | ||
+ | background-color: green; | ||
+ | color: white; | ||
+ | cursor: pointer; | ||
+ | padding: 15px; | ||
+ | border-radius: 4px; | ||
+ | } | ||
+ | |||
+ | #topbtn:hover { | ||
+ | background-color: #555; | ||
+ | } | ||
+ | |||
+ | #scroldown { | ||
+ | width: 100%; | ||
+ | height: 20; | ||
+ | |||
+ | } | ||
+ | #scroldown::before{ | ||
+ | content: '╲╱'; | ||
+ | color: #fff; | ||
+ | position: fixed; | ||
+ | opacity: 0.7; | ||
+ | text-shadow: 0 0 6px rgba(0,0,0,0.5); | ||
+ | font-size: 20px; | ||
+ | width: 60px; | ||
+ | height: 40px; | ||
+ | line-height: 40px; | ||
+ | text-align: center; | ||
+ | border-radius: 10px; | ||
+ | bottom: 20px; | ||
+ | left: 50%; | ||
+ | margin-left: -30px; | ||
+ | animation: bounce 1s ease infinite; | ||
+ | } | ||
+ | |||
+ | @keyframes bounce { | ||
+ | 50% { | ||
+ | transform: translateY(-50%); | ||
+ | } | ||
+ | 100% { | ||
+ | transform: translateY(0); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | </style> | ||
+ | <script> | ||
+ | $(document).ready(function(){ | ||
+ | $("a").on('click', function(event) { | ||
+ | if (this.hash !== "") { | ||
+ | event.preventDefault(); | ||
+ | var hash = this.hash; | ||
+ | $('html, body').animate({ | ||
+ | scrollTop: $(hash).offset().top | ||
+ | }, 800, function(){ | ||
+ | window.location.hash = hash; | ||
+ | }); | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | <script> | ||
+ | window.onscroll = function() {scrollFunction()}; | ||
+ | |||
+ | function scrollFunction() { | ||
+ | if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { | ||
+ | document.getElementById("topbtn").style.display = "block"; | ||
+ | } else { | ||
+ | document.getElementById("topbtn").style.display = "none"; | ||
+ | } | ||
+ | } | ||
+ | function topFunction() { | ||
+ | document.body.scrollTop = 0; | ||
+ | document.documentElement.scrollTop = 0; | ||
+ | } | ||
+ | |||
+ | function burgermenu() { | ||
+ | var x = document.getElementById("nav"); | ||
+ | if (x.className === "navigation") { | ||
+ | x.className += " responsive"; | ||
+ | } else { | ||
+ | x.className = "navigation"; | ||
+ | } | ||
+ | } | ||
+ | </script> | ||
+ | <body> | ||
+ | <!-- CUSTOM OVERLAY --> | ||
+ | <div class="overlays" id="bottomLayer"></div> | ||
+ | <div class="backgroundPicture"> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="quickfind"> | ||
+ | <button class="dropbtn">LEARN MORE</button> | ||
+ | <div class="quickfind-content"> | ||
+ | <a href="#WHOUSE">PROJECT USE</a> | ||
+ | <a href="#SAFE">IS IT SAFE</a> | ||
+ | <a href="#USEDSTRAINS">USED ORGANISM STRAINS</a> | ||
+ | <a href="#RISKS">POTENTIAL RISKS</a> | ||
+ | <a href="#WASTE">WASTE TREATMENT</a> | ||
+ | <a href="#EMERGENCY">EMERGENCY REACTIONS</a> | ||
+ | <a href="#EQUIPMENT">PROTECTIVE EQUIPMENT</a> | ||
+ | <a href="#OTHERS">OTHER RULES</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <button onclick="topFunction()" id="topbtn" title="Go to top">Top</button> | ||
+ | <!-- CUSTOM TOP --> | ||
+ | <div class="contentHolder" id="topTitle"> | ||
+ | <a id="pagetitle">SAFETY</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div id="scroldown"></div> | ||
+ | <!-- CUSTOM CONTENT HOLDER --> | ||
+ | <div class="contentHolder" id="WHOUSE"> | ||
+ | <h1>WHO WILL USE OUR PRODUCT</h1> | ||
+ | <p>Our target audience consists of scientists and clinicians interested in the detection of the Delta F508 mutation | ||
+ | , responsible for approximately 70% of the Cystic Fibrosis cases in Bulgaria and Europe as a whole. Our system is pla | ||
+ | nned to be used only in a controlled environment. | ||
+ | </p> | ||
+ | </div> | ||
+ | |||
+ | <!-- CUSTOM CONTENT HOLDER --> | ||
+ | <div class="contentHolder" id="SAFE"> | ||
+ | <h1>IS IT SAFE?</h1> | ||
+ | <p>Not only is it safer than any other technology that does the same thing, | ||
+ | but it is also drastically cheaper and vastly beneficial due to its simplicity | ||
+ | - it does not require DNA sequencing for the detection step. | ||
+ | </p> | ||
+ | </div> | ||
+ | |||
+ | <!-- CUSTOM CONTENT HOLDER --> | ||
+ | <div class="contentHolder" id="USEDSTRAINS"> | ||
+ | <h1>USED ORGANISM STRAINS</h1> | ||
+ | <p> | ||
+ | # <i>Escherichia coli</i> - DH5α strain | ||
+ | <br> | ||
+ | # <i>Escherichia coli</i> - TOP10 strain | ||
+ | </p> | ||
+ | </div> | ||
+ | |||
+ | <!-- CUSTOM CONTENT HOLDER --> | ||
+ | <div class="contentHolder" id="RISKS"> | ||
+ | <h1>POTENTIAL RISKS</h1> | ||
+ | <p>Our project poses the typical risks of working with a level 1 GMO. | ||
+ | </p> | ||
+ | </div> | ||
+ | |||
+ | <!-- CUSTOM CONTENT HOLDER --> | ||
+ | <div class="contentHolder" id="WASTE"> | ||
+ | <h1>WASTE TREATMENT</h1> | ||
+ | <p>All biological materials and equipment used for handling were collected separately and autoclaved. | ||
+ | </p> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <!-- CUSTOM CONTENT HOLDER --> | ||
+ | <div class="contentHolder" id="EMERGENCY"> | ||
+ | <h1>EMERGENCY REACTIONS</h1> | ||
+ | <p> | ||
+ | |||
+ | <strong>If lab coats or clothes start burning:</strong><br> | ||
+ | emergency showers | ||
+ | <br><strong>If acids or other harmful liquids get in the eyes:</strong><br> | ||
+ | eye showers | ||
+ | <br><strong>If injuries occur:</strong><br> | ||
+ | treat them with first aid-kits, report the injury, go to the hospital if necessary | ||
+ | <br><strong>If solutions with GMO are running down the bench:</strong><br> | ||
+ | swap and disinfect the place with NaClO (bleach) | ||
+ | </p> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <!-- CUSTOM CONTENT HOLDER --> | ||
+ | <div class="contentHolder" id="EQUIPMENT"> | ||
+ | <h1>PROTECTIVE EQUIPMENT</h1> | ||
+ | <p> | ||
+ | <strong>Eye protection</strong><br> | ||
+ | <strong>Lab coats </strong><br> | ||
+ | <strong>Safety glasses in special areas of the lab</strong><br> | ||
+ | <a style="font-size: 15px;">(should be used in other areas if necessary)</a> | ||
+ | </p> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <!-- CUSTOM CONTENT HOLDER --> | ||
+ | <div class="contentHolder" id="OTHERS"> | ||
+ | <h1>OTHER RULES</h1> | ||
+ | <p> | ||
+ | <strong>Do not work alone!</strong><br> | ||
+ | <a style="font-size: 15px;">There should be at least one person in the lab with you.</a><br> | ||
+ | <br><strong>Do not pipette with your mouth!</strong><br> | ||
+ | <br><strong>Disinfect hands after contamination with GMOs!</strong><br> | ||
+ | <br><strong>Disinfect hands and wash them after working in the lab!</strong><br> | ||
+ | <br><strong>Do not eat, swallow, wash and snore with any chemicals!</strong><br> | ||
+ | <br><strong>Do not bring food, drinks, pets and snacks in the lab!</strong><br> | ||
+ | <br><strong>Be sure that you have informed the instructor of the next step of the experiment plan and gotten the permission of him!</strong><br> | ||
+ | <br><strong>Record the general nature of the work clearly in your lab journal!</strong><br> | ||
+ | |||
+ | </p> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <!-- CUSTOM MENU --> | ||
+ | <div class="navigation" id="nav"> | ||
+ | <a href="https://2018.igem.org/Team:Bulgaria">HOME</a> | ||
+ | <a href="https://2018.igem.org/Team:Bulgaria/theteam">TEAM</a> | ||
+ | <a href="https://2018.igem.org/Team:Bulgaria/theproject">PROJECT</a> | ||
+ | <a href="https://2018.igem.org/Team:Bulgaria/humanPractices">HUMAN PRACTICES</a> | ||
+ | <a href="https://2018.igem.org/Team:Bulgaria/collabs">COLLABORATIONS</a> | ||
+ | <a href="https://2018.igem.org/Team:Bulgaria/parts">PARTS</a> | ||
+ | <a href="https://2018.igem.org/Team:Bulgaria/safety" id="activeMenu">SAFETY</a> | ||
+ | <a href="https://2018.igem.org/Team:Bulgaria/jForm" id="specialMenu">JUDGING FORM</a> | ||
+ | <a href="javascript:void(0);" class="icon" onclick="burgermenu()"> | ||
+ | MENU | ||
+ | </a> | ||
+ | |||
+ | </div> | ||
+ | </body> | ||
+ | </html> |
Revision as of 00:01, 17 October 2018
WHO WILL USE OUR PRODUCT
Our target audience consists of scientists and clinicians interested in the detection of the Delta F508 mutation , responsible for approximately 70% of the Cystic Fibrosis cases in Bulgaria and Europe as a whole. Our system is pla nned to be used only in a controlled environment.
IS IT SAFE?
Not only is it safer than any other technology that does the same thing, but it is also drastically cheaper and vastly beneficial due to its simplicity - it does not require DNA sequencing for the detection step.
USED ORGANISM STRAINS
# Escherichia coli - DH5α strain
# Escherichia coli - TOP10 strain
POTENTIAL RISKS
Our project poses the typical risks of working with a level 1 GMO.
WASTE TREATMENT
All biological materials and equipment used for handling were collected separately and autoclaved.
EMERGENCY REACTIONS
If lab coats or clothes start burning:
emergency showers
If acids or other harmful liquids get in the eyes:
eye showers
If injuries occur:
treat them with first aid-kits, report the injury, go to the hospital if necessary
If solutions with GMO are running down the bench:
swap and disinfect the place with NaClO (bleach)
PROTECTIVE EQUIPMENT
Eye protection
Lab coats
Safety glasses in special areas of the lab
(should be used in other areas if necessary)
OTHER RULES
Do not work alone!
There should be at least one person in the lab with you.
Do not pipette with your mouth!
Disinfect hands after contamination with GMOs!
Disinfect hands and wash them after working in the lab!
Do not eat, swallow, wash and snore with any chemicals!
Do not bring food, drinks, pets and snacks in the lab!
Be sure that you have informed the instructor of the next step of the experiment plan and gotten the permission of him!
Record the general nature of the work clearly in your lab journal!