Difference between revisions of "Team:ICT-Mumbai/HP"
Adityakamat (Talk | contribs) |
Revathireddy (Talk | contribs) |
||
| (37 intermediate revisions by 3 users not shown) | |||
| Line 17: | Line 17: | ||
| − | body,h1,h2,h3,h4,h5,h6 {font-family: " | + | body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;} |
body, html { | body, html { | ||
| Line 48: | Line 48: | ||
background-attachment: scroll; | background-attachment: scroll; | ||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
</style> | </style> | ||
</body> | </body> | ||
| − | |||
<!-- Navbar (sit on top) --> | <!-- Navbar (sit on top) --> | ||
| Line 99: | Line 59: | ||
</a> | </a> | ||
| − | <a href="#home" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-home" aria-hidden="true"></i> | + | <a href="https://2017.igem.org/Team:ICT-Mumbai#home" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-home" aria-hidden="true"></i> |
Home</a> | Home</a> | ||
| Line 110: | Line 70: | ||
<a href="https://2017.igem.org/Team:ICT-Mumbai/Description" class="w3-bar-item w3-button">Description</a> | <a href="https://2017.igem.org/Team:ICT-Mumbai/Description" class="w3-bar-item w3-button">Description</a> | ||
<a href="https://2017.igem.org/Team:ICT-Mumbai/Design" class="w3-bar-item w3-button">Design</a> | <a href="https://2017.igem.org/Team:ICT-Mumbai/Design" class="w3-bar-item w3-button">Design</a> | ||
| − | <a href="https://2017.igem.org/Team:ICT-Mumbai/ | + | <a href="https://2017.igem.org/Team:ICT-Mumbai/Protocols" class="w3-bar-item w3-button">Protocols</a> |
<a href="https://2017.igem.org/Team:ICT-Mumbai/Notebook"class="w3-bar-item w3-button">Notebook</a> | <a href="https://2017.igem.org/Team:ICT-Mumbai/Notebook"class="w3-bar-item w3-button">Notebook</a> | ||
| − | <a href="https://2017.igem.org/Team:ICT-Mumbai/ | + | <a href="https://2017.igem.org/Team:ICT-Mumbai/InterLab"class="w3-bar-item w3-button">Interlab</a> |
<a href="https://2017.igem.org/Team:ICT-Mumbai/Results"class="w3-bar-item w3-button">Results</a> | <a href="https://2017.igem.org/Team:ICT-Mumbai/Results"class="w3-bar-item w3-button">Results</a> | ||
</div> | </div> | ||
| Line 118: | Line 78: | ||
<div class="w3-dropdown-hover"> | <div class="w3-dropdown-hover"> | ||
| − | < | + | <button class="w3-button" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-users" aria-hidden="true"></i>Team</button></a> |
<div class="w3-dropdown-content w3-bar-block w3-animate-opacity"> | <div class="w3-dropdown-content w3-bar-block w3-animate-opacity"> | ||
<a href="https://2017.igem.org/Team:ICT-Mumbai/Team"class="w3-bar-item w3-button">Team</a> | <a href="https://2017.igem.org/Team:ICT-Mumbai/Team"class="w3-bar-item w3-button">Team</a> | ||
| Line 126: | Line 86: | ||
<div class="w3-dropdown-hover"> | <div class="w3-dropdown-hover"> | ||
| − | <a href=" | + | <a href="https://2017.igem.org/Team:ICT-Mumbai/Parts" button class="w3-button" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-cogs" aria-hidden="true"></i> Part</a> |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | <a href=" | + | <a href="https://2017.igem.org/Team:ICT-Mumbai/Safety" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-flag" aria-hidden="true"></i> |
Safety</a> | Safety</a> | ||
| Line 141: | Line 97: | ||
| − | <a href=" | + | <a href="https://2017.igem.org/Team:ICT-Mumbai/Attributions" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-user-o" aria-hidden="true"></i>Attributions</a> |
| − | + | ||
| − | |||
| − | |||
</div> | </div> | ||
| Line 162: | Line 115: | ||
</div> | </div> | ||
</div> | </div> | ||
| + | |||
| + | <style> | ||
| + | button.accordion { | ||
| + | background-color: #eee; | ||
| + | color: #444; | ||
| + | cursor: pointer; | ||
| + | padding: 18px; | ||
| + | width: 80%; | ||
| + | border: none; | ||
| + | text-align: left; | ||
| + | outline: none; | ||
| + | font-size: 15px; | ||
| + | transition: 0.4s; | ||
| + | margin-left:10%; | ||
| + | margin-right:10%; | ||
| + | } | ||
| + | |||
| + | button.accordion.active, button.accordion:hover { | ||
| + | background-color: #ccc; | ||
| + | } | ||
| + | |||
| + | div.panel { | ||
| + | padding: 0 18px; | ||
| + | background-color: white; | ||
| + | max-height: 0; | ||
| + | overflow: hidden; | ||
| + | transition: max-height 0.2s ease-out; | ||
| + | } | ||
| + | |||
| + | |||
| + | </style> | ||
| + | </head> | ||
| + | <body> | ||
<!-- Container (About Section) --> | <!-- Container (About Section) --> | ||
| Line 167: | Line 153: | ||
<br><h3 class="w3-center">Overview</h3> </br> | <br><h3 class="w3-center">Overview</h3> </br> | ||
| − | <p style="font-size:20px; colour:lightgrey;">From the time we decided to take on the issue of ammonia removal from | + | <p style="height:70 px; font-family:'Lato'; font-size:20px; colour:lightgrey;">From the time we decided to take on the issue of ammonia removal from |
the environment, our sights were set on designing a portable machine that | the environment, our sights were set on designing a portable machine that | ||
could harbor our engineered bacteria. We aspire to use this device chiefly | could harbor our engineered bacteria. We aspire to use this device chiefly | ||
| Line 174: | Line 160: | ||
up our idea.</p> | up our idea.</p> | ||
| − | + | <p style="height:70 px; font-family:'Lato'; font-size:20px; colour:lightgrey;"> Have a look at what we have done by clicking on the buttons below: </p> | |
| − | <button | + | |
| + | <button class="accordion">Current solutions</button> | ||
| + | <div class="panel"> | ||
| + | <p style="height:70 px; font-family:'Lato'; font-size:20px; colour:lightgrey;">Before embarking on our pursuit, we first analysed the current solutions | ||
| + | that are available for deodorization of toilets and their short-comings. A | ||
| + | summary of our findings is given below:</p> | ||
| + | |||
| + | <p style="height:70 px; font-family:'Lato'; font-size:20px; colour:lightgrey;">1) Perfume or Naptha balls: This is the most commonly used method for tackling | ||
| + | toilet odour. Perfumes used may vary in price from affordable deodorants to | ||
| + | high-end fragrances while naptha balls are usually cheap. They just offer a band- | ||
| + | aid solution and tend to fade away with time.</p> | ||
| + | |||
| + | <p style="height:70 px; font-family:'Lato'; font-size:20px; colour:lightgrey;">2) Water-less toilets: Water-less toilets though proven to provide odorless sanitation | ||
| + | and capable of saving water, come at a steep price. Majority of today's | ||
| + | washrooms cannot be upgraded into a water-less facility without making drastic | ||
| + | changes, thus limiting its usage.</p> | ||
| + | <p style="height:70 px; font-family:'Lato'; font-size:20px; colour:lightgrey;">3) Bioblocks: Bioblocks provide a bio-response that is, they release benevolent | ||
| + | bacteria every time they come in contact with urine. The bacteria prevent odour | ||
| + | formation in addition to release of a fine fragrance. Their only limitation is the fact | ||
| + | that they need to be replaced every few days, making them inconvenient.</p> | ||
| + | </div> | ||
| + | |||
| + | <button class="accordion">Public and educational outreach</button> | ||
| + | <div class="panel"> | ||
| + | <p style="height:70 px; font-family:'Lato'; font-size:20px; colour:lightgrey;">Science is all about curiosity and kids are known to be very curious! Hence, sparking | ||
| + | scientific curiosity amongst kids has been over main focus. We are thankful to Sparsha | ||
| + | Charitable Trust for giving us the opportunity to interact with kids from K. D. Vidyalaya | ||
| + | school. In our interactive sessions, we tried our best to convey the sense of | ||
| + | biotechnology beginning right from explaining what a cell is, to giving day-to- day | ||
| + | examples such as bread, ethanol, and curd production by microbes. This went a long | ||
| + | way in clearing a common misconception amongst them that all microorganisms are | ||
| + | bad. The kids thoroughly enjoyed the session and we were satisfied that we could | ||
| + | introduce them to biotechnology and convert them into science enthusiasts.</p> | ||
| + | <img src="https://static.igem.org/mediawiki/2017/b/b6/HP_ict.jpg" alt="Norway" style="width:30%" hspace="15" > | ||
| + | <img src="https://static.igem.org/mediawiki/2017/b/bc/ICT-Mumbai_HP_image_2.jpeg" class="w3-round" alt="Norway" style="width:30%" hspace="10"> | ||
| + | <img src="https://static.igem.org/mediawiki/2017/c/c9/ICT-Mumbai_HP_image_3.jpeg" class="w3-round" alt="Norway" style="width:30%" hspace="10"> | ||
| + | </div> | ||
| + | |||
| + | <button class="accordion">Expert advice</button> | ||
| + | <div class="panel"> | ||
| + | <p style="height:70 px; font-family:'Lato'; font-size:20px; colour:lightgrey;">In order to make our device suitable for practical use in public washrooms, we consulted Sulabh International, an NGO behind the ‘Sulabh Sanitation Movement’ who have built 1.5 million household toilets & 54 million government toilets around India. According to Mr. Nirmal Singh, President of Sulabh International, Mumbai the device under design by us could one day be used in public washrooms provided it is economically feasible. From above interaction, we got an idea of how public toilets are being maintained and this motivated us to make this process easier and economical.</p> | ||
| + | </div> | ||
| + | |||
| + | <button class="accordion">Survey</button> | ||
| + | <div class="panel"> | ||
| + | <br> | ||
| + | <p style="height:70 px; font-family:'Lato'; font-size:20px; colour:lightgrey;">Q: Status of these toilets?</p> | ||
| + | <p style="text-align:center;"><img src="https://static.igem.org/mediawiki/2017/4/40/Survey1.png" height="40%" width="40%"></p> | ||
| + | |||
| + | <p style="height:70 px; font-family:'Lato'; font-size:20px; colour:lightgrey;">Q: Do you use them?</p> | ||
| + | <p style="text-align:center;"><img src="https://static.igem.org/mediawiki/2017/thumb/e/e2/Survey2.png/800px-Survey2.png" height="40%" width="40%"></p> | ||
| + | |||
| + | <p style="height:70 px; font-family:'Lato'; font-size:20px; colour:lightgrey;">Q: Does public toilet smell deter you from using them?</p> | ||
| + | <p style="text-align:center;"><img src="https://static.igem.org/mediawiki/2017/thumb/d/d5/Survey3.png/740px-Survey3.png | ||
| + | " height="40%" width="40%"></p> | ||
| + | |||
| + | <p style="height:70 px; font-family:'Lato'; font-size:20px; colour:lightgrey;">Q: If we could come up with a solution that eliminates this odor, would you use these toilets?</p> | ||
| + | <p style="text-align:center;"><img src="https://static.igem.org/mediawiki/2017/thumb/9/95/Survey4.png/800px-Survey4.png" height="40%" width="40%"></p> | ||
| + | |||
| + | |||
| + | |||
| + | </div> | ||
| + | |||
| + | <script> | ||
| + | var acc = document.getElementsByClassName("accordion"); | ||
| + | var i; | ||
| + | |||
| + | for (i = 0; i < acc.length; i++) { | ||
| + | acc[i].onclick = function() { | ||
| + | this.classList.toggle("active"); | ||
| + | var panel = this.nextElementSibling; | ||
| + | if (panel.style.maxHeight){ | ||
| + | panel.style.maxHeight = null; | ||
| + | } else { | ||
| + | panel.style.maxHeight = panel.scrollHeight + "px"; | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | </script> | ||
| + | |||
| + | |||
| + | <!-- | ||
| + | |||
| + | ========= | ||
| + | *, *:before, *:after { | ||
| + | box-sizing: inherit; | ||
| + | } | ||
| + | |||
| + | .column { | ||
| + | float: left; | ||
| + | width: 33.3%; | ||
| + | margin-bottom: 16px; | ||
| + | padding: 0 8px; | ||
| + | } | ||
| + | |||
| + | @media (max-width: 650px) { | ||
| + | .column { | ||
| + | width: 100%; | ||
| + | display: block; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .card { | ||
| + | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); | ||
| + | |||
| + | } | ||
| + | |||
| + | .container { | ||
| + | padding: 0 16px; | ||
| + | height: 526px | ||
| + | } | ||
| + | |||
| + | .container::after, .row::after { | ||
| + | content: ""; | ||
| + | clear: both; | ||
| + | display: table; | ||
| + | } | ||
| + | |||
| + | |||
| + | |||
| + | .title { | ||
| + | color: grey; | ||
| + | } | ||
| + | |||
| + | /* Style the tab */ | ||
| + | div.tab { | ||
| + | overflow: hidden; | ||
| + | border: 1px solid #ccc; | ||
| + | background-color: #f1f1f1; | ||
| + | } | ||
| + | |||
| + | /* Style the buttons inside the tab */ | ||
| + | div.tab button { | ||
| + | background-color: inherit; | ||
| + | float: left; | ||
| + | border: solid; | ||
| + | outline: none; | ||
| + | cursor: pointer; | ||
| + | padding: 14px 16px; | ||
| + | transition: 0.3s; | ||
| + | font-size: 17px; | ||
| + | } | ||
| + | |||
| + | /* Change background color of buttons on hover */ | ||
| + | div.tab button:hover { | ||
| + | background-color: #00FFFF | ||
| + | ; | ||
| + | } | ||
| + | |||
| + | /* Create an active/current tablink class */ | ||
| + | div.tab button.active { | ||
| + | background-color: #ccc; | ||
| + | } | ||
| + | |||
| + | /* Style the tab content */ | ||
| + | .tabcontent { | ||
| + | display: none; | ||
| + | padding: 6px 12px; | ||
| + | border: 1px solid #ccc; | ||
| + | border-top: none; | ||
| + | } | ||
| + | |||
| + | ========= | ||
| + | <div class="tab"> | ||
| + | <button class="tablinks" onclick="openCity(event, 'London')">Current Solutions | ||
| + | |||
| + | </button> | ||
| + | <button class="tablinks" onclick="openCity(event, 'Paris')">Public and Educational outreach | ||
| + | |||
| + | </button> | ||
| + | <button class="tablinks" onclick="openCity(event, 'Tokyo')">Expert advice</button> | ||
| + | <button class="tablinks" onclick="openCity(event, 'Tokyo')">Survey</button> | ||
| + | |||
| + | </div> | ||
| − | + | <div id="London" class="tabcontent"> | |
| − | + | <h3>Currrent solutions</h3> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
<p style="font-size:20px; colour:lightgrey;">Before embarking on our pursuit, we first analysed the current solutions | <p style="font-size:20px; colour:lightgrey;">Before embarking on our pursuit, we first analysed the current solutions | ||
that are available for deodorization of toilets and their short-comings. A | that are available for deodorization of toilets and their short-comings. A | ||
| Line 202: | Line 356: | ||
that they need to be replaced every few days, making them inconvenient.</p> | that they need to be replaced every few days, making them inconvenient.</p> | ||
</div> | </div> | ||
| − | + | <div id="Paris" class="tabcontent"> | |
| − | + | <h3>Public and Educational outreach</h3> | |
| − | + | <p style="font-size:20px; colour:lightgrey; text-align: justify;">Science is all about curiosity and kids are known to be very curious! Hence, sparking | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
scientific curiosity amongst kids has been over main focus. We are thankful to Sparsha | scientific curiosity amongst kids has been over main focus. We are thankful to Sparsha | ||
Charitable Trust for giving us the opportunity to interact with kids from K.D.Vidyalaya | Charitable Trust for giving us the opportunity to interact with kids from K.D.Vidyalaya | ||
| Line 222: | Line 367: | ||
bad. The kids thoroughly enjoyed the session and we were satisfied that we could | bad. The kids thoroughly enjoyed the session and we were satisfied that we could | ||
introduce them to biotechnology and convert them into science enthusiasts.</p> | introduce them to biotechnology and convert them into science enthusiasts.</p> | ||
| − | <img src="https://static.igem.org/mediawiki/2017/b/b6/HP_ict.jpg" alt="Norway" style="width:30%" hspace="15"> | + | <img src="https://static.igem.org/mediawiki/2017/b/b6/HP_ict.jpg" alt="Norway" style="width:30%" hspace="15" > |
<img src="https://static.igem.org/mediawiki/2017/b/bc/ICT-Mumbai_HP_image_2.jpeg" class="w3-round" alt="Norway" style="width:30%" hspace="10"> | <img src="https://static.igem.org/mediawiki/2017/b/bc/ICT-Mumbai_HP_image_2.jpeg" class="w3-round" alt="Norway" style="width:30%" hspace="10"> | ||
<img src="https://static.igem.org/mediawiki/2017/c/c9/ICT-Mumbai_HP_image_3.jpeg" class="w3-round" alt="Norway" style="width:30%" hspace="10"> | <img src="https://static.igem.org/mediawiki/2017/c/c9/ICT-Mumbai_HP_image_3.jpeg" class="w3-round" alt="Norway" style="width:30%" hspace="10"> | ||
| + | </div> | ||
| + | <div id="Tokyo" class="tabcontent"> | ||
| + | <h3>Expert advice</h3> | ||
| + | <p style="font-size:20px; colour:lightgrey; text-align: justify;">In order to make our device suitable for practical use in public washrooms, we consulted Sulabh International, an NGO behind the ‘Sulabh Sanitation Movement’ who have built 1.5 million household toilets & 54 million government toilets around India. According to Mr.Nirmal Singh, President of Sulabh International, Mumbai the device under design by us could one day be used in public washrooms provided it is economically feasible. From above interaction, we got an idea of how public toilets are being maintained and this motivated us to make this process easier & economical.</p> | ||
| + | </div> | ||
| + | <div id="London" class="tabcontent"> | ||
| + | <h3>Survey</h3> | ||
| + | <p style="font-size:20px; colour:lightgrey; text-align: justify;">Q: Status of these toilets?</p> | ||
| + | <p style="text-align:center;"><img src="https://2017.igem.org/File:Survey1.png"></p> | ||
| − | + | <script> | |
| + | function openCity(evt, cityName) { | ||
| + | var i, tabcontent, tablinks; | ||
| + | tabcontent = document.getElementsByClassName("tabcontent"); | ||
| + | for (i = 0; i < tabcontent.length; i++) { | ||
| + | tabcontent[i].style.display = "none"; | ||
| + | } | ||
| + | tablinks = document.getElementsByClassName("tablinks"); | ||
| + | for (i = 0; i < tablinks.length; i++) { | ||
| + | tablinks[i].className = tablinks[i].className.replace(" active", ""); | ||
| + | } | ||
| + | document.getElementById(cityName).style.display = "block"; | ||
| + | evt.currentTarget.className += " active"; | ||
| + | } | ||
</script> | </script> | ||
| − | + | --> | |
<div class="w3-row"> | <div class="w3-row"> | ||
Latest revision as of 12:46, 1 November 2017
