Difference between revisions of "Team:Kobe"

Line 1: Line 1:
−
{{Kobe}}
 
 
<html>
 
<html>
  
 +
<head>
  
−
<div class="main">
+
     <!-- This tells the browser that your page is responsive -->
−
     <h1>
+
     <meta name="viewport" content="width=device-width, initial-scale=1"
−
        <br />
+
          charset="utf-8">
−
        Project Description
+
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
−
    </h1>
+
−
     <div id="zu">
+
−
        <br/>
+
−
<br/>
+
−
        <img src="https://static.igem.org/mediawiki/2017/0/00/T--Kobe--home1.jpg" />
+
−
    </div>
+
−
    <p>The aim of our project is to create a biosensor for evaluating the concentration of L-theanine.<br/><br/><br/></p>
+
−
     <div id="hidari">
+
−
        <img src="https://static.igem.org/mediawiki/2017/3/3c/T--Kobe--home2.jpg" />
+
−
    </div>
+
  
 +
</head>
  
−
    <p>Theanine is an amino acid primarily found in particular plants, especially in tea plant (Camellia sinensis). Theanine boosts alpha brain waves, promoting relaxation. In addition, theanine is one of the taste ingredients of green tea, which is called “umami” in Japanese, meaning pleasant savory taste. For these reasons, green tea containing the more theanine is considered to have the higher quality [1][2].<br/><br/><br/> </p>
+
<script>
  
−
     <div id="migi"><br/>
+
     $(function () {
−
         <img src="https://static.igem.org/mediawiki/2017/6/68/T--Kobe--home3.jpg" />
+
         var Accordion = function (el, multiple) {
−
    </div>
+
            this.el = el || {};
 +
            // more then one submenu open?
 +
            this.multiple = multiple || false;
  
−
    <p>
+
            var dropdownlink = this.el.find('.dropdownlink');
−
        Currently, the theanine content in green tea is measured by instrumental analysis depending on the expensive equipment[2].
+
            dropdownlink.on('click',
−
    </p>
+
                            { el: this.el, multiple: this.multiple },
 +
                            this.dropdown);
 +
        };
  
−
    <div id="hidari"><br/><br/><br/>
+
        Accordion.prototype.dropdown = function (e) {
−
        <img src="https://static.igem.org/mediawiki/2017/4/42/T--Kobe--home4.jpg" />
+
            var $el = e.data.el,
−
    </div>
+
                $this = $(this),
 +
                //this is the ul.submenuItems
 +
                $next = $this.next();
  
 +
            $next.slideToggle();
 +
            $this.parent().toggleClass('open');
  
−
    <p>
+
            if (!e.data.multiple) {
−
        To reduce the cost and special technique required for the measurement, we aimed at developing a bacteria sensor to evaluate the theanine content in green tea based on identification of the genes in Bacillus subtilis that are induced in the presence of theanine.
+
                //show only one menu at the same time
−
    </p>
+
                $el.find('.submenuItems').not($next).slideUp().parent().removeClass('open');
 +
            }
 +
        }
  
−
    <h3><br/><br/><br/>Reference</h3>
+
         var accordion = new Accordion($('.accordion-menu'), false);
−
    <p>
+
     })
−
         [1] Vuong, Quan V., Michael C. Bowyer, and Paul D. Roach. "L‐Theanine: properties, synthesis and isolation from tea." Journal of the Science of Food and Agriculture 91.11 (2011): 1931-1939.
+
−
        <br />[2] Shimizu, Yoichiro, et al. "Sensitive enzymatic method for the quantification of theanine, a principal umami component of commercial tea beverages." Food Science and Technology Research 19.5 (2013): 909-913.
+
−
     </p>
+
  
−
     <style>
+
 
−
         #zu {
+
     //when clicking on a "menu_button", it will change the "+/-" accordingly and it will show/hide the corresponding submenu
−
            text-align: center;
+
    $(".menu_button").click(function () {
 +
 
 +
        // add or remove the class "open" , this class holds the "-"
 +
        $(this).children().toggleClass("open");
 +
        // show or hide the submenu
 +
        $(this).next('.submenu_wrapper').fadeToggle(400);
 +
    });
 +
 
 +
</script>
 +
 
 +
 
 +
 
 +
<style>
 +
    html {
 +
         height: 100%
 +
    }
 +
 
 +
    * {
 +
        margin: 0;
 +
        padding: 0;
 +
    }
 +
 
 +
    body {
 +
        background: #C8E6C9;
 +
        height: 100%;
 +
    }
 +
 
 +
    ul {
 +
        list-style: none;
 +
    }
 +
 
 +
    a {
 +
        text-decoration: none;
 +
    }
 +
 
 +
    h2 {
 +
        text-align: center;
 +
        margin: 20px auto;
 +
        color: #fff;
 +
    }
 +
 
 +
    .accordion-menu {
 +
        background: #fff;
 +
        border-radius: 4px;
 +
        margin-top: 0px;
 +
        margin-left: 0px;
 +
    }
 +
 
 +
 
 +
        .accordion-menu li.open .dropdownlink {
 +
            color: #CDDC39;
 
         }
 
         }
  
−
         img {
+
    .fa-chevron-down {
−
             width: 400px;
+
         transform: rotate(180deg);
−
             max-width: 100%
+
    }
 +
 
 +
 
 +
 
 +
    .accordion-menu li:last-child .dropdownlink {
 +
        border-bottom: 0;
 +
    }
 +
 
 +
    .dropdownlink {
 +
        cursor: pointer;
 +
        display: block;
 +
        padding: 15px 15px 15px 45px;
 +
        font-size: 18px;
 +
        border-bottom: 1px solid #ccc;
 +
        color: #212121;
 +
        position: relative;
 +
        transition: all 0.4s ease-out;
 +
    }
 +
 
 +
        .dropdownlink i {
 +
             position: absolute;
 +
             top: 17px;
 +
            left: 16px;
 
         }
 
         }
  
−
         #hidari {
+
    .fa-chevron-down {
−
             text-align: left
+
         right: 12px;
 +
        left: auto;
 +
    }
 +
 
 +
 
 +
 
 +
    .submenuItems {
 +
        display: none;
 +
        background: #C8E6C9;
 +
    }
 +
 
 +
        .submenuItems li {
 +
             border-bottom: 1px solid #B6B6B6;
 
         }
 
         }
  
−
         #migi {
+
 
−
             text-align: right
+
         .submenuItems a {
 +
             display: block;
 +
            color: #727272;
 +
            padding: 12px 12px 12px 45px;
 +
            transition: all 0.4s ease-out;
 
         }
 
         }
  
−
         .main>h1 {
+
         .submenuItems :hover {
−
             font-family: "Comic Sans MS",Georgia,sans-serif !important;
+
             background-color: #CDDC39;
 +
            color: #fff;
 
         }
 
         }
  
−
            .main > p {
+
 
−
                font-size: 26px !important;
+
 
−
                font-family: "Comic Sans MS",Georgia,sans-serif !important;
+
    .teamlogo {
 +
        width: 100%;
 +
        margin-top: 0px;
 +
    }
 +
 
 +
    .directlink {
 +
        cursor: pointer;
 +
        display: block;
 +
        padding: 15px 15px 15px 45px;
 +
        font-size: 18px;
 +
        border-bottom: 1px solid #ccc;
 +
        color: #212121;
 +
        position: relative;
 +
    }
 +
 
 +
 
 +
 
 +
 
 +
 
 +
    .main p {
 +
        padding: 15px 20px;
 +
        margin: 0;
 +
    }
 +
 
 +
    .main h1 {
 +
        text-align: center
 +
    }
 +
 
 +
    #home_logo, #sideMenu {
 +
        display: none;
 +
    }
 +
 
 +
    #sideMenu, #top_title, .patrollink {
 +
        display: none;
 +
    }
 +
 
 +
    #content {
 +
        width: 100%;
 +
        padding: 0px;
 +
        margin-top: -7px;
 +
        margin-left: 0px;
 +
    }
 +
 
 +
 
 +
 
 +
    #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {
 +
        margin-bottom: 0px;
 +
    }
 +
 
 +
    #bodyContent {
 +
        margin-top: 0px;
 +
        margin-left: 0px;
 +
    }
 +
 
 +
    #HQ_page {
 +
        margin-top: 0px;
 +
        margin-left: 0px;
 +
    }
 +
 
 +
 
 +
 
 +
    #content {
 +
        background-color: #C8E6C9;
 +
    }
 +
 
 +
    table {
 +
        border-collapse: collapse;
 +
        text-align: left;
 +
        line-height: 1.5;
 +
    }
 +
 
 +
        table th {
 +
            padding: 10px;
 +
            font-weight: bold;
 +
            vertical-align: top;
 +
            border: 1px solid #ccc;
 +
        }
 +
 
 +
        table td {
 +
            padding: 10px;
 +
            vertical-align: top;
 +
            border: 1px solid #ccc;
 +
            width: 100px;
 +
        }
 +
 
 +
    .empty {
 +
        background-image: linear-gradient(to top right, transparent, transparent 49%, black 49%, black 51%, transparent 51%, transparent);
 +
    }
 +
 
 +
    .mw-content-ltr ul {
 +
        margin: 0px !important;
 +
    }
 +
 
 +
 
 +
    table {
 +
        border-collapse: collapse;
 +
        text-align: left;
 +
        line-height: 1.5;
 +
    }
 +
 
 +
        table th {
 +
            width: 100px;
 +
            padding: 10px;
 +
            font-weight: bold;
 +
            vertical-align: top;
 +
            border: 1px solid #ccc;
 +
        }
 +
 
 +
        table td {
 +
            padding: 10px;
 +
            vertical-align: top;
 +
            border: 1px solid #ccc;
 +
        }
 +
 
 +
 
 +
        main>p{
 +
            font-size:30px;
 +
        }
 +
</style>
 +
 
 +
 
 +
 
 +
<head>
 +
 
 +
    <!-- This tells the browser that your page is responsive -->
 +
    <meta name="viewport" content="width=device-width, initial-scale=1">
 +
 
 +
 
 +
    <style>
 +
        .main h1 .main h2 .main h3 .main h4 {
 +
            margin: 0 auto;
 +
        }
 +
 
 +
        .menu-title {
 +
            display: block;
 +
        }
 +
 
 +
        .dropdownlink::before {
 +
            content: "+";
 +
        }
 +
 
 +
        @media screen and (min-width: 800px) {
 +
            /* 表示領域が800px以上の場合に適用するスタイル */
 +
            .menu-title {
 +
                display: none;
 
             }
 
             }
 +
 +
            .accordion-menu {
 +
                width: 20%;
 +
                max-height: 100%;
 +
                position: fixed;
 +
                max-width: 350px;
 +
                overflow: scroll;
 +
                margin-right: auto
 +
            }
 +
 +
            .main {
 +
                margin-left: 35%;
 +
                margin-right: 15%;
 +
                margin-top: 10px;
 +
                margin-bottom: 10px;
 +
            }
 +
        }
 +
 +
        @media only screen and (max-width: 800px) {
 +
            #open, .teamlogo {
 +
                display: none;
 +
            }
 +
 +
            .accordion-menu, .main {
 +
                width: 100%
 +
            }
 +
 +
            .menu-title {
 +
                cursor: pointer;
 +
                display: block;
 +
                padding: 15px 15px 15px 45px;
 +
                font-size: 18px;
 +
                border-bottom: 1px solid #ccc;
 +
                color: #212121;
 +
                position: relative;
 +
            }
 +
        }
 
     </style>
 
     </style>
−
</div>
+
</head>
 +
 
 +
<body>
 +
 
 +
    <ul class="accordion-menu">
 +
        <li>
 +
 
 +
            <img class="teamlogo" src=https://static.igem.org/mediawiki/2017/c/c0/T--Kobe--teamlogo.jpg>
 +
 
 +
        </li>
 +
        <li class="menu-title">
 +
            <div onclick="obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none';">
 +
                <a style="cursor:pointer;">MENU</a>
 +
            </div>
 +
        </li>
 +
 
 +
 
 +
        <div id="open">
 +
            <li>
 +
 
 +
            <li class="directlink">
 +
                <a href="https://2017.igem.org/Team:Kobe">
 +
                    HOME
 +
                </a>
 +
            </li>
 +
 
 +
 
 +
            <div class="dropdownlink">
 +
                <i aria-hidden="true"></i>
 +
                PROJECT
 +
                <i aria-hidden="true"></i>
 +
            </div>
 +
 
 +
            <ul class="submenuItems">
 +
                <li>
 +
                    <a href="https://2017.igem.org/Team:Kobe/Background">
 +
                        Background
 +
                    </a>
 +
                </li>
 +
                <li>
 +
                    <a href="https://2017.igem.org/Team:Kobe/Overview">
 +
                        Overview
 +
 
 +
                    </a>
 +
                </li>
 +
                <li>
 +
                    <a href="https://2017.igem.org/Team:Kobe/Design">
 +
                        Design
 +
                    </a>
 +
                </li>
 +
                <li>
 +
                    <a href="https://2017.igem.org/Team:Kobe/Parts">
 +
                        Parts
 +
                    </a>
 +
                </li>
 +
                <li>
 +
                    <a href="https://2017.igem.org/Team:Kobe/Experiments">
 +
                        Experiments
 +
                    </a>
 +
                </li>
 +
 
 +
                <li>
 +
                    <a href="https://2017.igem.org/Team:Kobe/Results&Discussion">
 +
                        Results & Discussion
 +
                    </a>
 +
                </li>
 +
 
 +
                <li>
 +
                    <a href="https://2017.igem.org/Team:Kobe/Notebook">
 +
                        Notebook
 +
                    </a>
 +
                </li>
 +
            </ul>
 +
            </li>
 +
 
 +
            <li class="directlink">
 +
                <a href="https://2017.igem.org/Team:Kobe/Safety">
 +
                    SAFETY
 +
                </a>
 +
            </li>
 +
 
 +
            <div class="dropdownlink">
 +
                <i aria-hidden="true"></i>
 +
                HUMAN PRACTICE
 +
                <i aria-hidden="true"></i>
 +
            </div>
 +
 
 +
            <ul class="submenuItems">
 +
 
 +
                <li>
 +
                    <a href="https://2017.igem.org/Team:Kobe/HP/Gold_Integrated">
 +
                        Integrated Human Practice
 +
                    </a>
 +
                </li>
 +
                <li>
 +
                    <a href="https://2017.igem.org/Team:Kobe/HP/Silver">
 +
                        Education and Public Engagement
 +
                    </a>
 +
                </li>
 +
            </ul>
 +
 
 +
            <li class="directlink">
 +
                <a href="https://2017.igem.org/Team:Kobe/InterLab">
 +
                    INTERLAB
 +
                </a>
 +
            </li>
 +
 
 +
 
 +
 
 +
 
 +
            <li>
 +
 
 +
                <div class="dropdownlink">
 +
                    <i aria-hidden="true"></i>
 +
                    ABOUT US
 +
                    <i aria-hidden="true"></i>
 +
                </div>
 +
 
 +
                <ul class="submenuItems">
 +
                    <li>
 +
                        <a href="https://2017.igem.org/Team:Kobe/Team">
 +
                            Meet the Team
 +
                        </a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="https://2017.igem.org/Team:Kobe/Attributions">
 +
                            Attributions
 +
                        </a>
 +
                    </li>
 +
 
 +
                    <li>
 +
                        <a href="https://2017.igem.org/Team:Kobe/Collaborations">
 +
                            Collaborations
 +
 
 +
                        </a>
 +
                    </li>
 +
 
 +
                    <li>
 +
                        <a href="https://2017.igem.org/Team:Kobe/Acknowledgement">
 +
                            Acknowledgement and Sponsor
 +
 
 +
                        </a>
 +
                    </li>
 +
 
 +
                </ul>
 +
            </li>
 +
 
 +
        </div>
 +
 
 +
    </ul>
  
 +
</body>
 
</html>
 
</html>

Revision as of 08:34, 29 October 2017