|
|
| Line 1: |
Line 1: |
| | {{NUS_Singapore-A}} | | {{NUS_Singapore-A}} |
| − | <html>
| |
| − |
| |
| − | <head>
| |
| − | <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600" rel="stylesheet">
| |
| − | <link href="https://fonts.googleapis.com/css?family=Lora:400,400i" rel="stylesheet">
| |
| − | </head>
| |
| − |
| |
| − | <!-- <script type="text/javascript" src="https://2018.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> -->
| |
| − |
| |
| − | <script src="https://2018.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
| |
| − | <script type="text/x-mathjax-config">
| |
| − | MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
| |
| − | </script>
| |
| − |
| |
| − | <style>
| |
| − | /***************************************************CSS STARTS HERE*********************************************************/
| |
| − | /* The accordion is the class given to the drop-down menu thingy */
| |
| − | .accordion {
| |
| − | background-color: #f2f2f2;
| |
| − | color: black;
| |
| − | cursor: pointer;
| |
| − | padding: 15px;
| |
| − | width: 90%;
| |
| − | text-align: left;
| |
| − | margin-left: 5%;
| |
| − | margin-right: 5%;
| |
| − | border: none;
| |
| − | outline: none;
| |
| − | /* I wanted to give a gradual change, but it's having some trouble reading the 'transition' property. I'll look into having it javascripted instead. */
| |
| − | /*transition: 0.4s ease;*/
| |
| − | font-family: "Montserrat", sans-serif;
| |
| − | font-weight: 300;
| |
| − | font-size: 20px;
| |
| − | }
| |
| − |
| |
| − | /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
| |
| − | .active, .accordion:hover {
| |
| − | font: bold 20px "Montserrat", sans-serif;
| |
| − | background-color: #e6e6e6;
| |
| − | }
| |
| − |
| |
| − | /* Style the accordion panel. Note: hidden by default */
| |
| − | .panel {
| |
| − | background-color: white;
| |
| − | text-align: left;
| |
| − | margin-top: 10px;
| |
| − | max-height: 0;
| |
| − | overflow: hidden;
| |
| − | transition: max-height 0.2s ease-out;
| |
| − | }
| |
| − | .accordion:after {
| |
| − | content: '+';
| |
| − | font-size: 13px;
| |
| − | color: #777;
| |
| − | float: right;
| |
| − | margin-left: 5px;
| |
| − | }
| |
| − |
| |
| − | /* Not sure why this function does not work. Need to check */
| |
| − | .active:after {
| |
| − | content: "-";
| |
| − | }
| |
| − |
| |
| − | table, th, td {
| |
| − | border: none;
| |
| − | border-collapse: collapse;
| |
| − | }
| |
| − | table {
| |
| − | font-family: "Lora";
| |
| − | font-size: 13px;
| |
| − | word-spacing: 0.5em;
| |
| − | }
| |
| − |
| |
| − | th, td {
| |
| − | text-align: left;
| |
| − | padding: 3px;
| |
| − | }
| |
| − |
| |
| − | table caption {
| |
| − |
| |
| − | }
| |
| − |
| |
| − | h1 {
| |
| − | font-family: "MONTSERRAT", sans-serif;
| |
| − | font-weight: bold;
| |
| − | font-size: 22px;
| |
| − | text-align: left;
| |
| − | color: black;
| |
| − | padding-left: 5%;
| |
| − | padding-top: 1.5%;
| |
| − | padding-bottom: 1%;
| |
| − | border: none;
| |
| − | }
| |
| − |
| |
| − | h2 {
| |
| − | font-family: "Lora", sans;
| |
| − | font-weight: 300;
| |
| − | text-align: left;
| |
| − | color: black;
| |
| − | margin-left: 5%;
| |
| − | margin-bottom: 15px;
| |
| − | }
| |
| − |
| |
| − | h3 {
| |
| − | font-family: "Lora", sans;
| |
| − | font-weight: 300;
| |
| − | text-align: left;
| |
| − | color: black;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | p, ol li, ul li {
| |
| − | font-family: "Lora", serif;
| |
| − | font-size: 14px;
| |
| − | word-spacing: 0.5em;
| |
| − | text-align:justify;
| |
| − | }
| |
| − |
| |
| − | img {
| |
| − | display: block;
| |
| − | margin-left: auto;
| |
| − | margin-right: auto;
| |
| − | }
| |
| − |
| |
| − | .discussion_graph, .measurement_table{
| |
| − | width: 70%;
| |
| − | height: auto;
| |
| − | margin: auto;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | .safety-header{
| |
| − | width: 47.5%;
| |
| − | height: auto;
| |
| − | margin: auto;
| |
| − | }
| |
| − | .center-justified{
| |
| − | text-align: justify;
| |
| − | margin: 0 auto;
| |
| − | width: 70%;
| |
| − | }
| |
| − |
| |
| − | /**********************
| |
| − | Start of two columns */
| |
| − | * {
| |
| − | box-sizing: border-box;
| |
| − | }
| |
| − |
| |
| − | /* Create two columns that floats next to each other */
| |
| − | .column {
| |
| − | float: left;
| |
| − | text-align: left;
| |
| − | }
| |
| − |
| |
| − | .left {
| |
| − | width: 50%;
| |
| − | padding-left: 5%;
| |
| − | padding-right: 2.5%;
| |
| − | }
| |
| − |
| |
| − | .right {
| |
| − | width: 50%;
| |
| − | padding-left: 2.5%;
| |
| − | padding-right: 5%;
| |
| − | }
| |
| − |
| |
| − | /* Clear floats after the columns */
| |
| − | .row:after {
| |
| − | content: "";
| |
| − | display: table;
| |
| − | clear: both;
| |
| − | }
| |
| − |
| |
| − | /********************
| |
| − | End of two columns */
| |
| − |
| |
| − | .pictures{
| |
| − | width: 50px;
| |
| − | height: 50px;
| |
| − | background-colour: grey;
| |
| − | }
| |
| − |
| |
| − | /***************************************************CSS ENDS HERE**********************************************************/
| |
| − | </style>
| |
| − |
| |
| − |
| |
| − | <body>
| |
| − | <div class="inner-border" style="border-top: none;">
| |
| − |
| |
| − | <img src="https://static.igem.org/mediawiki/2018/1/17/T--NUS_Singapore-A--Safety_header_C.png" class="safety-header">
| |
| − |
| |
| − | <h1>OVERVIEW</h1>
| |
| − | <div class="row">
| |
| − | <div class="column left" style="background-color:white;">
| |
| − | <p>Clothes are a second skin - no other product is quite as intimate. We dream of our flavonoids being used to dye clothes which are beautiful and meaningful; to create an everyday magic within anyone’s reach. It is thus our top priority to ensure that our dyes, which will be in constant contact with one’s skin, is safe for everyone to use. . </p>
| |
| − |
| |
| − | </div>
| |
| − | <div class="column right" style="background-color:white;">
| |
| − | <p>From our project’s inception, we have also taken great care to design a biomanufacturing process that dramatically minimizes hazards for the entire supply chain. We present to you our answer to the toxic practices of the fashion industry today, and the story of how we built our culture of safety.</p>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <br>
| |
| − | <hr>
| |
| − | <br>
| |
| − |
| |
| − | <div>
| |
| − | <h1>THE RIGHT CHOICES</h1>
| |
| − | <div class="row">
| |
| − | <div class="column left" style="background-color:white;">
| |
| − | <p>Beauty comes at an ugly cost. The fashion industry is the second largest polluting industry in the world, second only to fossil fuel energy production. According to Mr. Vinod Agnihotri of LANXess, the most toxic part of the fashion industry is the manufacturing of synthetic dyes. Not only does it take a toll on factory workers’ health, but also the effluent is often discharged into nearby water bodies, harming the local flora and fauna, as well as severely decreasing the quality of life of everyone living nearby. It is difficult to get rid of synthetic dyes once they are released into the environment because they have been designed to be extremely persistent. It feels great when our clothes still look brand-new after a long time, but it’s bad news for the environment.
| |
| − | </p>
| |
| − | <br>
| |
| − | <p>Our team decided that producing natural dyes instead could be a suitable substitute for synthetic dyes because they are non-toxic, and synthetic biology has the potential to overcome the current challenges facing natural dye manufacturing, and finally make natural dyes a viable alternative to synthetic dyes.
| |
| − | </p>
| |
| − | </div>
| |
| − | <div class="column right" style="background-color: white;">
| |
| − | <p>The flavonoid dyes produced in our experiments are all present in edible plants. Chrysanthemin is present in raspberries and peaches, callistephin is present in pomegranates and strawberries, and luteolin can be found in celery and broccoli. The starting reagent, naringenin, can be found in grapefruits. These flavonoids are not known allergens. Furthermore, they have historically been used as natural dyes. As such, they are unlikely to cause any harm to anyone when used on clothing, during production, or if accidentally released into the environment in large quantities.
| |
| − | </p>
| |
| − | <p>They say you are what you eat. Why not wear what you eat? (Except the meat dress. Do not wear a meat dress.)
| |
| − | </p>
| |
| − | </div>
| |
| − | <br>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <br>
| |
| − | <hr>
| |
| − | <br>
| |
| − |
| |
| − | <div>
| |
| − | <h1>LAB SAFETY</h1>
| |
| − | <div class="row">
| |
| − | <div class="column left" style="background-color:white;">
| |
| − | <p>And so, the time came for us to start developing a synthetic biology solution to this problem. We knew that it was of fundamental importance that we adhere to lab best practices because if we can’t follow safe microbiological lab procedures, and prove that it is possible to produce our dyes safely, how can we expect anyone to be convinced by our solution?
| |
| − | </p>
| |
| − | <br>
| |
| − | </div>
| |
| − | <div class="column right" style="background-color:white;">
| |
| − | <p>Our completed, detailed iGEM safety form demonstrates our commitment to safety, and all of us are pleased to invite you to read it <a href="#">here</a>.
| |
| − | </p>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <br>
| |
| − | <hr>
| |
| − | <br>
| |
| − |
| |
| − | <div>
| |
| − | <h1>HUMAN PRACTICES</h1>
| |
| − | <div class="row">
| |
| − | <div class="column left" style="background-color: white;">
| |
| − | <p>As word of our project spread, designers like Leong Minyi expressed interest in using our dyes. We were reminded that we needed to consider the future of our project and how it would impact society.
| |
| − | </p>
| |
| − | <br>
| |
| − | <p>At that time, we were filling in the first draft of safety forms, the very same one we mentioned earlier. However, our excitement to share our project with the world was dampened when we realized that the iGEM safety rules stated that we were not allowed to release any products derived from our work in the lab. Nevertheless, we firmly believed that our project deserved to be released, so that we could get useful and important feedback from our targeted end users, designers, as well as show the world the revolutionary potential of synthetic biology.
| |
| − | </p>
| |
| − | </div>
| |
| − | <div class="column left" style="background-color: white;">
| |
| − | <p>Hence, we wrote to the iGEM Safety Committee with a protocol we developed for ensuring that the product we extract is microbe-free:
| |
| − | </p>
| |
| − | <br>
| |
| − | <p><protocol></p>
| |
| − | <p>We first spin down our bacterial culture and filter the supernatant. This supernatant is the decontaminated flavonoid dye. Next, we will plate the supernatant on an LB agar plate without antibiotics, and an LB agar plate with antibiotics such as kanamycin and chloramphenicol, which are used in our constructs. The absence of colonies on both plates will indicate that our dyes are free from any microbes.
| |
| − | </p>
| |
| − | <br>
| |
| − | <p></protocol></p>
| |
| − | <br>
| |
| − | <p>We are proud to say that this protocol has been approved by the iGEM Safety Committee!</p>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <br>
| |
| − | <br>
| |
| − |
| |
| − | <div class="row">
| |
| − | <div class="column left" style="background-color: white;">
| |
| − | <p><i>A little bit more</i></p>
| |
| − | <img src="#" class="pictures" alt="Image of Na2Ting2">
| |
| − | <br>
| |
| − | <img src="#" class="pictures" alt="Image of empty agar plates LOL">
| |
| − | <br>
| |
| − | </div>
| |
| − | <div class="column right" style="background-color: white;">
| |
| − | <p>In addition, we were commended by the Safety Committee!</p>
| |
| − | <br>
| |
| − | <img src="#" class="pictures" alt="email screenshot">
| |
| − | <br>
| |
| − | <p>We are deeply grateful to the Safety Committee for validating our efforts towards developing a safe biomanufacturing process.
| |
| − | </p>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <br>
| |
| − | <hr>
| |
| − | <br>
| |
| − |
| |
| − | <div>
| |
| − | <h1>BIOMANUFACTURING PROCESS</h1>
| |
| − | <div class="row">
| |
| − | <div class="column left" style="background-color: white;">
| |
| − | <p>After approval, we were spurred on to develop a biomanufacturing process that uses as little potentially toxic, harmful, or pollutive chemicals as possible. If it could have a positive impact on the environment, even better. To do this, we explored some novel methods to increase the eco-friendliness of our biomanufacturing process.
| |
| − | </p>
| |
| − | </div>
| |
| − | <div class="column right" style="background-color: white;">
| |
| − | <p>We tried to use xylose from empty fruit bunches as a feedstock, giving the waste material a new lease of life. </p>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div>
| |
| − | <h1> ALL TITLES IN CAPS </h1>
| |
| − | <button class="accordion">Safe Shipment</button>
| |
| − | <div class="panel" style="line-height: 17em;">
| |
| − | <div class="row">
| |
| − | <div class="column left" style="background-color:white;">
| |
| − | <p>Did you face any safety problems in sending your DNA parts to the Registry?</p>
| |
| − | </div>
| |
| − | <div class="column right" style="background-color:white;">
| |
| − | <p>How did you solve those problems?</p>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <button class="accordion">OPEN ME PLEASE</button>
| |
| − | <div class="panel" style="line-height: 17em;">
| |
| − | <div class="row">
| |
| − | <div class="column left" style="background-color:white;">
| |
| − | <p>Blah Blah Blah</p>
| |
| − | </div>
| |
| − | <div class="column right" style="background-color:white;">
| |
| − | <p>Blargh Blargh Blargh</p>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | </div>
| |
| − | </body>
| |
| − |
| |
| − | <script>
| |
| − | /***************************************************JAVASCRIPT STARTS HERE**************************************************/
| |
| − |
| |
| − |
| |
| − | var acc = document.getElementsByClassName("accordion");
| |
| − | var i;
| |
| − |
| |
| − | for (i = 0; i < acc.length; i++) {
| |
| − | acc[i].addEventListener("click", function() {
| |
| − |
| |
| − | /* Toggle between adding and removing the "active" class,
| |
| − | to highlight the button that controls the panel */
| |
| − |
| |
| − | this.classList.toggle("active");
| |
| − |
| |
| − | /* Toggle between hiding and showing the active panel */
| |
| − |
| |
| − | var panel = this.nextElementSibling;
| |
| − | if (panel.style.display === "block") {
| |
| − | panel.style.display = "none";
| |
| − | } else {
| |
| − | panel.style.display = "block";
| |
| − | }
| |
| − | });
| |
| − | }
| |
| − |
| |
| − | for (i = 0; i < acc.length; i++) {
| |
| − | acc[i].addEventListener("click", function() {
| |
| − | this.classList.toggle("active");
| |
| − | var panel = this.nextElementSibling;
| |
| − | if (panel.style.maxHeight){
| |
| − | panel.style.maxHeight = null;
| |
| − | } else {
| |
| − | panel.style.maxHeight = panel.scrollHeight + "px";
| |
| − | }
| |
| − | });
| |
| − | }
| |
| − | /***************************************************JAVASCRIPT ENDS HERE****************************************************/
| |
| − | </script>
| |
| − |
| |
| − |
| |
| − | </html>
| |
| | | | |
| | {{:Team:NUS_Singapore-A/Templates/Footer}} | | {{:Team:NUS_Singapore-A/Templates/Footer}} |
