|
|
(2001 intermediate revisions not shown) |
Line 1: |
Line 1: |
- | <html>
| + | {{:Team:Groningen/Template/MODULE/basepage|home|category1|btnone|d/df/Overlay.home.png}} |
- | <body>
| + | |
- | | + | |
- | | + | |
- | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript">
| + | |
- | // This will load an important jquery library.
| + | |
- | </script>
| + | |
- | | + | |
- | <script type="text/javascript">
| + | |
- | // The script below will remove all wikistylesheets, so you now have unlimited freedom for inline CSS.
| + | |
- | for ( i=0; i<document.styleSheets.length; i++) {
| + | |
- | void(document.styleSheets.item(i).disabled=true);
| + | |
- | }
| + | |
- | | + | |
- | // This script will make sure the navigation stuff always stays on top of the page, after you scrolled past the logo and banner.
| + | |
- | $(function(){
| + | |
- | $(window).scroll(function(){
| + | |
- | if( $(window).scrollTop() > 205) {
| + | |
- | $('#noscroll').css({position: 'fixed', top: '0px'});
| + | |
- | } else {
| + | |
- | $('#noscroll').css({position: 'absolute', top: '205px'});
| + | |
- | }
| + | |
- | });
| + | |
- | });
| + | |
- | | + | |
- | // The variables set below will make sure the page displays correctly and not empty on startup. | + | |
- | var page="home";
| + | |
- | </script>
| + | |
- | | + | |
- | <style type="text/css">
| + | |
- | /*The text below will make some of the annoying standard elements invisible, like the mega iGEM logo, the search box and the footer about wikimedia. Because our custom div (in which we code our entire site) is embedded inside #globalwrapper, that we just made invisible, we have to make the custom div visible again. The same counts for the #menubar, that is one of the elements that MUST stay on the page.*/
| + | |
- | #globalWrapper{visibility:hidden; position:relative;}
| + | |
- | #menubar{visibility:visible;}
| + | |
- | #scrollablecontent{visibility:visible;}
| + | |
- | #noscroll{visibility:visible;}
| + | |
- | | + | |
- | /*Below is our unlimited freedom CSS inline stylesheet. :D */
| + | |
- | | + | |
- | body{
| + | |
- | background:#000000;
| + | |
- | }
| + | |
- | | + | |
- | #menubar ul{
| + | |
- | /*Everything related to the menubar. The menubar is one of the things we MUST keep. Note that there are two elements with the id menubar, and that they are divided into two classes, namely left-menu noprint and right-menu noprint.*/
| + | |
- | width:365px;
| + | |
- | height:12px;
| + | |
- | background:#000000;
| + | |
- | position:absolute;
| + | |
- | top:-24px;
| + | |
- | left:50%;
| + | |
- | padding: 0;
| + | |
- | list-style-type: none;
| + | |
- | }
| + | |
- | | + | |
- | .left-menu ul{
| + | |
- | margin-left:-365px;
| + | |
- | }
| + | |
- | | + | |
- | .left-menu li{
| + | |
- | float:left;
| + | |
- | margin-right:10px;
| + | |
- | display: inline;
| + | |
- | color:#ffffff;
| + | |
- | font:10px arial,sans-serif;
| + | |
- | }
| + | |
- | | + | |
- | .right-menu li{
| + | |
- | float:right;
| + | |
- | margin-left:10px;
| + | |
- | display: inline;
| + | |
- | color:#ffffff;
| + | |
- | font:10px arial,sans-serif;
| + | |
- | }
| + | |
- | | + | |
- | #menubar a{
| + | |
- | color:#ffffff;
| + | |
- | font:10px arial,sans-serif;
| + | |
- | text-decoration: none;
| + | |
- | }
| + | |
- | | + | |
- | #scrollablecontent{
| + | |
- | /*Everything related to the container where we put the entire scrollable part of the site in.*/
| + | |
- | position:absolute;
| + | |
- | width:730px;
| + | |
- | height:300px;
| + | |
- | left:50%;
| + | |
- | top:5px;
| + | |
- | margin-left:-365px;
| + | |
- | }
| + | |
- | | + | |
- | #logobox{
| + | |
- | /*Everything related to the logobox*/
| + | |
- | background:#ffff00;
| + | |
- | width:220px;
| + | |
- | height:200px;
| + | |
- | position:absolute;
| + | |
- | left:0px;
| + | |
- | top:0px;
| + | |
- | }
| + | |
- | | + | |
- | #bannerbox{
| + | |
- | /*Everything related to the banner*/
| + | |
- | background:#ff00ff;
| + | |
- | width:510px;
| + | |
- | height:200px;
| + | |
- | position:absolute;
| + | |
- | left:220px;
| + | |
- | top:0px;
| + | |
- | }
| + | |
- | | + | |
- | #contentbox{
| + | |
- | /*Everything related to the contents (multiple stylesheets, because the content is dynamically switched with javascript, and different pages could need different stylesheets.*/
| + | |
- | background:#ff0000;
| + | |
- | width:510px;
| + | |
- | height:500px;
| + | |
- | position:absolute;
| + | |
- | left:220px;
| + | |
- | top:240px;
| + | |
- | }
| + | |
- | | + | |
- | #noscroll{
| + | |
- | /*Everything related to the container where we put the entire not scrollable part of the site in. Inside this container are the language menu, the navigation menu and the title of the content. The idea is that this part only scrolls a little bit, and after that, it stays on top of the page.*/
| + | |
- | position:absolute;
| + | |
- | width:730px;
| + | |
- | height:300px;
| + | |
- | left:50%;
| + | |
- | top:205px;
| + | |
- | margin-left:-365px;
| + | |
- | }
| + | |
- | | + | |
- | #languagemenubox{
| + | |
- | /*Everything related to the languagemenu*/
| + | |
- | background:#ffaaff;
| + | |
- | width:220px;
| + | |
- | height:40px;
| + | |
- | position:absolute;
| + | |
- | left:0px;
| + | |
- | top:0px;
| + | |
- | }
| + | |
- | | + | |
- | #titlebox{
| + | |
- | /*Everything related to the content title box*/
| + | |
- | background:#ff99ff;
| + | |
- | width:510px;
| + | |
- | height:40px;
| + | |
- | position:absolute;
| + | |
- | left:220px;
| + | |
- | top:0px;
| + | |
- | }
| + | |
- | | + | |
- | #titlebox h1{
| + | |
- | color:#00ff00;
| + | |
- | font:20px arial,sans-serif;
| + | |
- | }
| + | |
- | | + | |
- | #navigationmenubox{
| + | |
- | /*Everything related to the navigation menu*/
| + | |
- | background:#00ff00;
| + | |
- | width:220px;
| + | |
- | height:500px;
| + | |
- | position:absolute;
| + | |
- | left:0px;
| + | |
- | top:40px;
| + | |
- | }
| + | |
- | | + | |
- | </style>
| + | |
- | | + | |
- | <div id="scrollablecontent"> /*This div is used to program all our own content in.*/
| + | |
- | <div id="logobox">logo</div>
| + | |
- | <div id="bannerbox"></div>
| + | |
- | <div id="contentbox">
| + | |
- | <p>
| + | |
- | Our aim is to introduce a ‘smart’ bandage that will moderate the use of antibiotics in modern healthcare. As a case-study for this concept, we want to make a bandage specifically designed for burn-wounds that offers an alternative to the current (antibiotic-intensive) treatment. With the ever increasing antibiotic resistance it will become harder to treat all kinds of bacterial infections, thus an alternative to the use of antibiotics is sought for.
| + | |
- | When activated, our bandage aims to abate the most common infections in burn-wounds. These are caused by either Pseudomonas aeruginosa and/or Staphylococcus aureus. Our bandage will secrete three kinds of anti-microbial molecules, each targeting a different aspect of the infection. The first molecule is the lantibiotic called nisin, which aims to kill the gram-positive S. aureus. Nisin is used more often in the food industry, but seldom used for medical purposes. Besides nisin we want AiiA (auto inducer inactivator) and DspB (Dispersin B) to be secreted by our bandage. The AiiA protein is a quorum quenching molecule that will disturb the quorum sensing of P. aeruginosa. DspB is an anti-biofilm molecule, which will destroy the biofilm formed by P. aeruginosa. Similar to nisin, AiiA and DspB are not widely used in a medical context. In line with our choice for reducing the general use of antibiotics, the three anti-microbial compounds only are to be secreted when the pathogens are present. The key lies with the fact that the bandage will be activated when an infection arises. At this point, secretion of anti-microbial compounds will start. The system thus prevents an excess use of antibiotics. As a chassis we will use Lactococcus lactis. The modified L. lactis will be put into a contained compartment within the bandage and will not be able to enter the wound or environment. As a back-up, the bandage should be able to sense these kind of infections by producing a blue chromoprotein, amilCP. This helps users to know if they should seek further medical attention. To increase the safety of our product we are considering certain kill switches that come into play when the bacterium is released into the
| + | |
- | environment (e.g. when the bandage is thrown in the dustbin).
| + | |
- | </p>
| + | |
- | | + | |
- | <p>
| + | |
- | This bandage minimizes the use of antibiotics when treating burn-wounds. In the future, this system of
| + | |
- | detection and secretion of anti-microbial molecules might be used in other fields, thus preventing antimicrobial
| + | |
- | resistance and helping society.
| + | |
- | </p>
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | | + | |
- | <div id="noscroll">
| + | |
- | <div id="languagemenubox"></div>
| + | |
- | <div id="titlebox">
| + | |
- | <script type="text/javascript">
| + | |
- | if ($(page)="home") {
| + | |
- | print("<h1>LactoAid</h1>")
| + | |
- | } else if (page="team") {
| + | |
- | block of code to be executed if the condition1 is false and condition2 is true
| + | |
- | } else {
| + | |
- | block of code to be executed if the condition1 is false and condition2 is false
| + | |
- | }
| + | |
- | </script>
| + | |
- | | + | |
- | </div>
| + | |
- | <div id="navigationmenubox">
| + | |
- | <ul>
| + | |
- | <li><a target="content" href="https://2014.igem.org/Team:Groningen/home"style="color:#000000">Home</a></li>
| + | |
- | <li><a target="content" href="https://2014.igem.org/Team:Groningen/Team"style="color:#000000"> Team</a></li>
| + | |
- | <li><a target="content" href="https://igem.org/Team.cgi?year=2014&team_name=Groningen"style="color:#000000"> Official Team Profile</a></li>
| + | |
- | <li><a target="content" href="https://2014.igem.org/Team:Groningen/Project"style="color:#000000"> Project</a></li>
| + | |
- | <li><a target="content" href="https://2014.igem.org/Team:Groningen/Parts"style="color:#000000"> Parts</a></li>
| + | |
- | <li><a target="content" href="https://2014.igem.org/Team:Groningen/Modeling"style="color:#000000"> Modeling</a></li>
| + | |
- | <li><a target="content" href="https://2014.igem.org/Team:Groningen/Notebook"style="color:#000000"> Notebook</a></li>
| + | |
- | <li><a target="content" href="https://2014.igem.org/Team:Groningen/Safety"style=" color:#000000"> Safety </a></li>
| + | |
- | <li><a target="content" href="https://2014.igem.org/Team:Groningen/Attributions"style="color:#000000"> Attributions </a></li>
| + | |
- | <li><a target="content" href="https://2014.igem.org/Main_Page"> <img src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" width="30px"></a></li>
| + | |
- | </ul>
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | | + | |
- | </body>
| + | |
- | </html>
| + | |