Difference between revisions of "Team:NTU-LIHPAO-Taiwan/Modeling"
(Prototype team page) |
|||
Line 1: | Line 1: | ||
− | |||
<html> | <html> | ||
+ | <head> | ||
− | < | + | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> |
+ | <script type="text/javascript" charset="utf-8"> | ||
− | <div class=" | + | //-----Hover Facebook Icon-----// |
− | < | + | $(document).ready(function(){ |
− | < | + | $('#Facebook_icon_hover').hover(function () { |
− | </div> | + | this.src = "https://static.igem.org/mediawiki/2015/3/35/NTU-Top-Facebook_icon2.png"; |
+ | }, function () { | ||
+ | this.src = "https://static.igem.org/mediawiki/2015/9/98/NTU-Top-Facebook_icon1.png"; | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | //-----Hover iGem Icon-----// | ||
+ | $(document).ready(function(){ | ||
+ | $('#iGEM_icon_hover').hover(function () { | ||
+ | this.src = "https://static.igem.org/mediawiki/2015/0/0a/NTU-Top-iGEM_icon2.png"; | ||
+ | }, function () { | ||
+ | this.src = "https://static.igem.org/mediawiki/2015/1/1d/NTU-Top-iGEM_icon1.png"; | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | //-----Hover NTU Icon-----// | ||
+ | $(document).ready(function(){ | ||
+ | $('#NTU_icon_hover').hover(function () { | ||
+ | this.src = "https://static.igem.org/mediawiki/2015/6/6e/NTU-Top-NTU_icon2.png"; | ||
+ | }, function () { | ||
+ | this.src = "https://static.igem.org/mediawiki/2015/1/14/NTU-Top-NTU_icon1.png"; | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | </script> | ||
+ | |||
+ | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
+ | <title>NTU-LIHPAO-Taiwan</title> | ||
+ | <style type="text/css"> | ||
+ | |||
+ | /*-------------------------------------------*/ | ||
+ | /*--------------Wiki Page Reset--------------*/ | ||
+ | /*-------------------------------------------*/ | ||
+ | |||
+ | #contentSub, #contentcontainer, #footer-box, #sitesub, #catlinks, #search-controls, #p-logo, .h3, .printfooter, .firstHeading, .visualClear { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #globalWrapper, #content { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | border: 0px; | ||
+ | background-color: transparent; | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | } | ||
+ | |||
+ | html, body, .wrapper { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | |||
+ | /*-------------------------------------------*/ | ||
+ | /*-------------------Body--------------------*/ | ||
+ | /*-------------------------------------------*/ | ||
+ | |||
+ | body { | ||
+ | background-color: #FFF; | ||
+ | } | ||
+ | body,td,th { | ||
+ | font-size: 14px; | ||
+ | font-family: Calibri, "Arial Narrow", "Agency FB", "Raavi"; | ||
+ | } | ||
+ | |||
+ | #Wrapper { | ||
+ | margin-right: auto; | ||
+ | margin-left: auto; | ||
+ | background-color: #FFF; | ||
+ | margin-top: 0px; | ||
+ | margin-bottom: 0px; | ||
+ | width: 90%; | ||
+ | height: auto; | ||
+ | top: 0px; | ||
+ | left: 5%; | ||
+ | right: 5%; | ||
+ | position: absolute; | ||
+ | bottom: 0px; | ||
+ | padding-top: 0px; | ||
+ | padding-bottom: 0px; | ||
+ | z-index: 0; | ||
+ | } | ||
+ | |||
+ | #Wrapper_Left { | ||
+ | margin-right: auto; | ||
+ | margin-left: auto; | ||
+ | background-color: #F0F0F0; | ||
+ | margin-top: 0px; | ||
+ | margin-bottom: 0px; | ||
+ | width: 5%; | ||
+ | height: 100%; | ||
+ | top: 0px; | ||
+ | left: 0%; | ||
+ | right: auto; | ||
+ | position: fixed; | ||
+ | bottom: 0px; | ||
+ | padding-top: 0px; | ||
+ | padding-bottom: 0px; | ||
+ | z-index: 0; | ||
+ | } | ||
+ | |||
+ | #Wrapper_Right { | ||
+ | margin-right: auto; | ||
+ | margin-left: auto; | ||
+ | background-color: #F0F0F0; | ||
+ | margin-top: 0px; | ||
+ | margin-bottom: 0px; | ||
+ | width: 5%; | ||
+ | height: 100%; | ||
+ | top: 0px; | ||
+ | left: auto; | ||
+ | right: 0%; | ||
+ | position: fixed; | ||
+ | bottom: 0px; | ||
+ | padding-top: 0px; | ||
+ | padding-bottom: 0px; | ||
+ | z-index: 0; | ||
+ | } | ||
+ | |||
+ | #Wrapper_TopPic { | ||
+ | margin-right: auto; | ||
+ | margin-left: auto; | ||
+ | background-color: #FFF; | ||
+ | margin-top: 0px; | ||
+ | margin-bottom: 0px; | ||
+ | width: 100%; | ||
+ | height: 58px; | ||
+ | top: 0px; | ||
+ | left: 0px; | ||
+ | right: 0px; | ||
+ | position: fixed; | ||
+ | bottom: 0px; | ||
+ | padding-top: 0px; | ||
+ | padding-bottom: 0px; | ||
+ | z-index: 9998; | ||
+ | border-bottom-style: solid; | ||
+ | border-bottom-color: #fe5838; | ||
+ | border-bottom-width: 2px; | ||
+ | z-index: 9998; | ||
+ | background-repeat: no-repeat; | ||
+ | } | ||
+ | |||
+ | #Wrapper_Bottom { | ||
+ | width: 100%; | ||
+ | height: 100px; | ||
+ | bottom: 0px; | ||
+ | top: auto; | ||
+ | background-color: #FFF; | ||
+ | border-top-style: solid; | ||
+ | border-top-color: #079235; | ||
+ | border-top-width: 3px; | ||
+ | margin-right: auto; | ||
+ | margin-left: auto; | ||
+ | margin-top: 0px; | ||
+ | margin-bottom: 0px; | ||
+ | z-index: 9998; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /*-------------------------------------------*/ | ||
+ | /*-----------------Top icons-----------------*/ | ||
+ | /*-------------------------------------------*/ | ||
+ | #Facebook_icon_pic { | ||
+ | height: 30px; | ||
+ | width: 30px; | ||
+ | position: absolute; | ||
+ | left: auto; | ||
+ | top: 23px; | ||
+ | right: 5.5%; | ||
+ | bottom: auto; | ||
+ | z-index: 9999; | ||
+ | } | ||
+ | |||
+ | #iGEM_icon_pic { | ||
+ | height: 30px; | ||
+ | width: 38px; | ||
+ | position: absolute; | ||
+ | left: auto; | ||
+ | top: 23px; | ||
+ | right: 1%; | ||
+ | bottom: auto; | ||
+ | z-index: 9999; | ||
+ | } | ||
+ | |||
+ | #NTU_icon_pic { | ||
+ | height: 30px; | ||
+ | width: 69px; | ||
+ | position: absolute; | ||
+ | left: auto; | ||
+ | top: 23px; | ||
+ | right: 9%; | ||
+ | bottom: auto; | ||
+ | z-index: 9999; | ||
+ | } | ||
+ | |||
+ | #NTUXLIHPAO_icon { | ||
+ | height: 40px; | ||
+ | width: 200px; | ||
+ | position: absolute; | ||
+ | left: 3%; | ||
+ | top: 18px; | ||
+ | right: auto; | ||
+ | bottom: auto; | ||
+ | z-index: 9999; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /*-------------------------------------------*/ | ||
+ | /*-----------------Slide Menu----------------*/ | ||
+ | /*-------------------------------------------*/ | ||
+ | .Slidemenu { | ||
+ | z-index: 9999; | ||
+ | position: absolute; | ||
+ | top: 32px; | ||
+ | bottom: 0px; | ||
+ | left: 51%; | ||
+ | right: 15%; | ||
+ | list-style:none; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | position: absolute; | ||
+ | margin-left: -350px; | ||
+ | /*background:rgba(100%,100%,100%,0); 主選單色系選擇*/ | ||
+ | } | ||
+ | |||
+ | .Slidemenu ul { | ||
+ | *zoom:1; | ||
+ | list-style:none; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | /*background:rgba(100%,100%,100%,0); 主選單色系選擇*/ | ||
+ | } | ||
+ | |||
+ | .Slidemenu ul:before,.Slidemenu ul:after { | ||
+ | content:""; | ||
+ | display:table; | ||
+ | } | ||
+ | |||
+ | .Slidemenu ul:after { | ||
+ | clear:both; | ||
+ | } | ||
+ | |||
+ | .Slidemenu a { | ||
+ | text-decoration:none; | ||
+ | display:block; | ||
+ | padding:4px 4px; | ||
+ | line-height:1em; | ||
+ | color:#000; | ||
+ | text-align: center; | ||
+ | vertical-align: middle; | ||
+ | height: auto; | ||
+ | width: auto; | ||
+ | font-family: "Agency FB"; | ||
+ | font-size: 1em; | ||
+ | } | ||
+ | |||
+ | .Slidemenu a:hover { | ||
+ | text-decoration:none; | ||
+ | background:rgba(0,0,0,0.03); | ||
+ | text-align: center; | ||
+ | vertical-align: middle; | ||
+ | } | ||
+ | |||
+ | .Slidemenu li ul { | ||
+ | position:absolute; | ||
+ | left:0; | ||
+ | top:26px; | ||
+ | z-index:1; | ||
+ | } | ||
+ | |||
+ | .Slidemenu li ul li { | ||
+ | overflow:hidden; | ||
+ | height: 0px; | ||
+ | margin-bottom: 0px; | ||
+ | } | ||
+ | |||
+ | .Slidemenu li ul a { | ||
+ | border:none; | ||
+ | -webkit-transition:background 300ms ease-in-out; | ||
+ | -moz-transition:background 300ms ease-in-out; | ||
+ | -o-transition:background 300ms ease-in-out; | ||
+ | transition:background 300ms ease-in-out; | ||
+ | line-height:1.1em; | ||
+ | } | ||
+ | |||
+ | .Slidemenu li ul a:hover { | ||
+ | background-color: rgba(240,240,240,1); | ||
+ | } | ||
+ | |||
+ | .Slidemenu ul > li { | ||
+ | text-decoration:none; | ||
+ | float: left; | ||
+ | position: relative; | ||
+ | height: 27px; /*--改主要選單高度--*/ | ||
+ | } | ||
+ | |||
+ | .width_small { | ||
+ | width: 100px; /*--改主要選單寬度--*/ | ||
+ | } | ||
+ | |||
+ | .Slidemenu ul > li:hover ul.subs { | ||
+ | height: auto; | ||
+ | width: 150px; /*--改拉出的選單寬度--*/ | ||
+ | border-left-width: 3px; | ||
+ | border-left-style: solid; | ||
+ | border-left-color: #3300FF; | ||
+ | background:rgba(255,255,255,1); /*--改拉出選單顏色--*/ | ||
+ | } | ||
+ | |||
+ | .Slidemenu ul > li:hover ul li { | ||
+ | text-decoration:none; | ||
+ | height: 26px; /*--改拉出的選單高度--*/ | ||
+ | width: 150px; /*--改拉出的選單寬度--*/ | ||
+ | text-align: center; | ||
+ | vertical-align: middle; | ||
+ | -webkit-transition:height 250ms ease-in; | ||
+ | -moz-transition:height 250ms ease-in; | ||
+ | -o-transition:height 250ms ease-in; | ||
+ | transition:height 250ms ease-in; | ||
+ | } | ||
+ | |||
+ | #Position_Now { | ||
+ | background:rgba(0,0,0,0.03); | ||
+ | } | ||
+ | |||
+ | |||
+ | /*-------------------------------------------*/ | ||
+ | /*------------------Content------------------*/ | ||
+ | /*-------------------------------------------*/ | ||
+ | |||
+ | #Content * { | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | #Content_Container { | ||
+ | position: fixed; | ||
+ | width: 17.8%; | ||
+ | height: 100%; | ||
+ | left: 5.2%; | ||
+ | right: auto; | ||
+ | background: #f7fbff; | ||
+ | z-index: 5; | ||
+ | } | ||
+ | |||
+ | #Content { | ||
+ | position: absolute; | ||
+ | top: 60px; | ||
+ | width: 100%; | ||
+ | height: auto; | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | transition: 0.5s; | ||
+ | font-size: 0.8rem; | ||
+ | font-family: Calibri; | ||
+ | } | ||
+ | |||
+ | #Content-title { | ||
+ | position: absolute; | ||
+ | width: 100%; | ||
+ | top: 0.5rem; | ||
+ | font-size: 1.5rem; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #Content ul { | ||
+ | margin: 0.5rem 0rem 0.5rem; | ||
+ | } | ||
+ | |||
+ | .main-Content { | ||
+ | position: absolute; | ||
+ | top: 5rem; | ||
+ | left: 10%; | ||
+ | width: 90%; | ||
+ | } | ||
+ | |||
+ | .main-Content #title { | ||
+ | color: #ABCDEF; | ||
+ | } | ||
+ | |||
+ | .main-Content > li { | ||
+ | cursor: pointer; | ||
+ | color: #369CF5; | ||
+ | font-size: 25px; | ||
+ | padding-top: 5px; | ||
+ | padding-bottom: 5px; | ||
+ | line-height: 30px; | ||
+ | } | ||
+ | |||
+ | .sub-Content { | ||
+ | font-size: 18px; | ||
+ | overflow-y: auto; | ||
+ | transition: 0.5s; | ||
+ | width: 85%; | ||
+ | left: 15%; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .sub-Content > li { | ||
+ | padding-top: 10px; | ||
+ | padding-bottom: 10px; | ||
+ | } | ||
+ | |||
+ | .sub-Content > li a{ | ||
+ | display: block; | ||
+ | color: #0791DB; | ||
+ | text-decoration: none; | ||
+ | transition: 0.5s; | ||
+ | } | ||
+ | |||
+ | .sub-Content > li a:hover { | ||
+ | opacity: 0.5; | ||
+ | } | ||
+ | |||
+ | #Healthin_Logo_Content { | ||
+ | width: 100%; | ||
+ | height: auto; | ||
+ | } | ||
+ | |||
+ | #Healthin_Logo { | ||
+ | top: 55px; | ||
+ | padding-left: 3%; | ||
+ | padding-right: 3%; | ||
+ | position: absolute; | ||
+ | width: 94%; | ||
+ | height: 94%; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /*-------------------------------------------*/ | ||
+ | /*---------------Introduction----------------*/ | ||
+ | /*-------------------------------------------*/ | ||
+ | |||
+ | .Container_Bottom1 { | ||
+ | height: 70px; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .Container_Bottom2 { | ||
+ | height: 70px; | ||
+ | width: 100%; | ||
+ | padding-top: 10px; | ||
+ | border-top-style: solid; | ||
+ | border-top-color: #079235; | ||
+ | border-top-width: 3px; | ||
+ | } | ||
+ | |||
+ | .Intro_Picture { | ||
+ | width: 100%; | ||
+ | height: auto; | ||
+ | background-color: #FFF; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | #NTUschool_logo { | ||
+ | background-color: #FFF; | ||
+ | padding-left: 9.6%; | ||
+ | padding-right: 60.4%; | ||
+ | position: absolute; | ||
+ | width: 30%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | #LIHPAO_logo { | ||
+ | background-color: #FFF; | ||
+ | padding-left: 66.4%; | ||
+ | padding-right: 9.6%; | ||
+ | position: absolute; | ||
+ | width: 24%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | #NTUBST_logo { | ||
+ | background-color: #FFF; | ||
+ | padding-left: 49.2%; | ||
+ | padding-right: 43.2%; | ||
+ | position: absolute; | ||
+ | width: 7.6%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | .Text_Sponsor { | ||
+ | color: #767676; | ||
+ | font-size: 15px; | ||
+ | font-family: Calibri; | ||
+ | text-align: center; | ||
+ | line-height: 20px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*-------------------------------------------*/ | ||
+ | /*---------------Article Picture-------------*/ | ||
+ | /*-------------------------------------------*/ | ||
+ | |||
+ | .Container_Article_Picture { | ||
+ | height: 280px; | ||
+ | width: 100%; | ||
+ | padding-top: 25px; | ||
+ | padding-bottom: 25px; | ||
+ | } | ||
+ | |||
+ | .Article_Picture { | ||
+ | width: 480px; | ||
+ | height: auto; | ||
+ | left: 50%; | ||
+ | right: auto; | ||
+ | background-color: #FFF; | ||
+ | margin: 0 0 0 -240px; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | .Article_PictureText { | ||
+ | width: 430px; | ||
+ | height: auto; | ||
+ | padding-left: 25px; | ||
+ | padding-right: 25px; | ||
+ | border-top-width: 2px; | ||
+ | border-top-style: dashed; | ||
+ | border-top-color: #fe5838; | ||
+ | } | ||
+ | |||
+ | .Text_Picture { | ||
+ | font-size: 18px; | ||
+ | font-family: Calibri; | ||
+ | text-align: justify; | ||
+ | line-height: 26px; | ||
+ | color: #08923a; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*-------------------------------------------*/ | ||
+ | /*-----------------Articles------------------*/ | ||
+ | /*-------------------------------------------*/ | ||
+ | |||
+ | #Articles { | ||
+ | width: 100%; | ||
+ | height: auto; | ||
+ | top: -10px; | ||
+ | position: absolute; | ||
+ | background-color: #FFF; | ||
+ | z-index: 1; | ||
+ | color: #000; | ||
+ | } | ||
+ | |||
+ | .ContentBox { | ||
+ | width: 76%; | ||
+ | height: auto; | ||
+ | left: 22%; | ||
+ | right: 2%; | ||
+ | position: absolute; | ||
+ | background-color: #FFF; | ||
+ | } | ||
+ | |||
+ | .Text1 { | ||
+ | font-size: 28px; | ||
+ | font-family: Calibri; | ||
+ | left: 20px; | ||
+ | right: 20px; | ||
+ | padding-top: 80px; | ||
+ | padding-right: 20px; | ||
+ | padding-bottom: 10px; | ||
+ | padding-left: 20px; | ||
+ | border-bottom-width: 2px; | ||
+ | border-bottom-style: dashed; | ||
+ | border-bottom-color: #fe5838; | ||
+ | color: #c00000; | ||
+ | } | ||
+ | |||
+ | .Text2 { | ||
+ | font-size: 24px; | ||
+ | font-family: Calibri; | ||
+ | padding-top: 30px; | ||
+ | padding-right: 50px; | ||
+ | padding-bottom: 10px; | ||
+ | padding-left: 50px; | ||
+ | color: #00b050; | ||
+ | } | ||
+ | |||
+ | .Text3 { | ||
+ | font-size: 20px; | ||
+ | font-family: Calibri; | ||
+ | text-align: justify; | ||
+ | padding-top: 10px; | ||
+ | padding-right: 80px; | ||
+ | padding-bottom: 10px; | ||
+ | padding-left: 80px; | ||
+ | line-height: 26px; | ||
+ | } | ||
+ | |||
+ | .Text_TitleUnderline { | ||
+ | font-size: 22px; | ||
+ | font-family: Calibri; | ||
+ | text-align: justify; | ||
+ | padding-top: 10px; | ||
+ | padding-bottom: 0px; | ||
+ | line-height: 26px; | ||
+ | color: #0070c0; | ||
+ | text-decoration: underline; | ||
+ | } | ||
+ | |||
+ | .Text_italic { | ||
+ | font-style: italic; | ||
+ | } | ||
+ | |||
+ | ol.part1 { | ||
+ | list-style-type: none; | ||
+ | margin-left: 0px; | ||
+ | } | ||
+ | |||
+ | ol.part2 { | ||
+ | list-style-type: decimal; | ||
+ | margin-left: 0px; | ||
+ | } | ||
+ | |||
+ | ol.part2 li { | ||
+ | padding-top: 10px; | ||
+ | padding-bottom: 10px; | ||
+ | } | ||
+ | |||
+ | ol.part3 { | ||
+ | list-style-type: lower-alpha; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*-------------------------------------------*/ | ||
+ | /*-------------------Media-------------------*/ | ||
+ | /*-------------------------------------------*/ | ||
+ | |||
+ | @media screen and (min-width: 0px) and (max-width: 1200px) { | ||
+ | |||
+ | #NTUXLIHPAO_icon { | ||
+ | height: 40px; | ||
+ | width: 200px; | ||
+ | position: absolute; | ||
+ | left: 1%; | ||
+ | top: 18px; | ||
+ | right: auto; | ||
+ | bottom: auto; | ||
+ | z-index: 9999; | ||
+ | } | ||
+ | |||
+ | |||
+ | #width_small { | ||
+ | width: 95px; /*--改主要選單寬度--*/ | ||
+ | } | ||
+ | |||
+ | .Slidemenu { | ||
+ | z-index: 9999; | ||
+ | position: absolute; | ||
+ | top: 32px; | ||
+ | bottom: 0px; | ||
+ | left: 49%; | ||
+ | right: auto; | ||
+ | list-style:none; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | position: absolute; | ||
+ | margin-left: -320px; | ||
+ | /*background:rgba(100%,100%,100%,0); 主選單色系選擇*/ | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media screen and (min-width: 901px) and (max-width: 1050px) { | ||
+ | |||
+ | .Container_Bottom2 { | ||
+ | height: 60px; | ||
+ | width: 100%; | ||
+ | padding-top: 10px; | ||
+ | border-top-style: solid; | ||
+ | border-top-color: #079235; | ||
+ | border-top-width: 3px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media screen and (min-width: 0px) and (max-width: 900px) { | ||
+ | |||
+ | .Container_Bottom2 { | ||
+ | height: 50px; | ||
+ | width: 100%; | ||
+ | padding-top: 10px; | ||
+ | border-top-style: solid; | ||
+ | border-top-color: #079235; | ||
+ | border-top-width: 3px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | </style> | ||
+ | </head> | ||
+ | |||
+ | |||
+ | <!----------------------------------------> | ||
+ | <!----------------------------------------> | ||
+ | <!------------------BODY------------------> | ||
+ | <!----------------------------------------> | ||
+ | <!----------------------------------------> | ||
+ | |||
+ | <body> | ||
+ | |||
+ | <div id="Wrapper_Left"></div> | ||
+ | <div id="Wrapper_Right"></div> | ||
+ | |||
+ | <div id="Wrapper"> | ||
+ | <div id="Wrapper_TopPic"> | ||
+ | <div id="NTUXLIHPAO_icon"><img src="https://static.igem.org/mediawiki/2015/c/c7/NTU-Top-NTUXLIHPAO.png" height="40" /></div> | ||
+ | <div id="Facebook_icon_pic"> | ||
+ | <a href="https://www.facebook.com/NationalTaiwanUniversityiGEM"><img id="Facebook_icon_hover" src="https://static.igem.org/mediawiki/2015/9/98/NTU-Top-Facebook_icon1.png" /></a></div> | ||
+ | <div id="iGEM_icon_pic"> | ||
+ | <a href="https://igem.org/Main_Page"><img id="iGEM_icon_hover" src="https://static.igem.org/mediawiki/2015/1/1d/NTU-Top-iGEM_icon1.png" /></a></div> | ||
+ | <div id="NTU_icon_pic"> | ||
+ | <a href="http://www.ntu.edu.tw/english/index.html"><img id="NTU_icon_hover" src="https://static.igem.org/mediawiki/2015/1/14/NTU-Top-NTU_icon1.png" /></a></div> | ||
+ | |||
+ | <div class="Slidemenu"> | ||
+ | <ul> | ||
+ | <li><div class=width_small><div id=Position_Now><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan">Home</a></div></div> | ||
+ | </li> | ||
+ | |||
+ | <li><div class=width_small span style="cursor:default"><a>Team</a></div> | ||
+ | <ul class="subs"> | ||
+ | <li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Team">Team</a></li> | ||
+ | <li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Attributions">Attributions</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | <li><div class=width_small span style="cursor:default"><a>Project</a></div> | ||
+ | <ul class="subs"> | ||
+ | <li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Description">Description</a></li> | ||
+ | <li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Design">Design</a></li> | ||
+ | <li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Results">Results</a></li> | ||
+ | <li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Modeling">Modeling</a></li> | ||
+ | <li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Experiments">Protocols</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | <li><div class=width_small span style="cursor:default"><a>Parts</a></div> | ||
+ | <ul class="subs"> | ||
+ | <li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Parts">Team Parts</a></li> | ||
+ | <li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Basic_Part">Basic Parts</a></li> | ||
+ | <li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Composite_Part">Composite Parts</a></li> | ||
+ | <li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Part_Collection">Part Collection</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | <li><div class=width_small><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Notebook">Notebook</a></div> | ||
+ | </li> | ||
+ | |||
+ | <li><div class=width_small><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Safety">Safety</a></div> | ||
+ | </li> | ||
+ | |||
+ | <li><div class=width_small span style="cursor:default"><a>Society</a></div> | ||
+ | <ul class="subs"> | ||
+ | <li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Practices">Human Practices</a></li> | ||
+ | <li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Collaborations">Collaborations</a></li> | ||
+ | <li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Entrepreneurship">Entrepreneurship</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div id="Content_Container"> | ||
+ | <div id="Healthin_Logo_Content"><div id="Healthin_Logo"><img src="https://static.igem.org/mediawiki/2015/6/69/Healthin_White.png" style="max-width: 100%; height: auto"/></div></div> | ||
+ | <div id="Content"> | ||
+ | <ul class="main-Content"> | ||
+ | <li> | ||
+ | <span class="title">Overview</span> | ||
+ | <ul class="sub-Content"> | ||
+ | <li><a href="#First1">Pigout Versus Stay in Shape</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <span class="title">Background</span> | ||
+ | <ul class="sub-Content"> | ||
+ | <li><a href="#Second1">CPP-PYY</a></li> | ||
+ | <li><a href="#Second2">Nisin Selection</a></li> | ||
+ | <li><a href="#Second3">Suicide</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <span class="title">Reference</span> | ||
+ | <ul class="sub-Content"> | ||
+ | <li><a href="#Third1">Reference</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | <script> | ||
+ | (function() { | ||
+ | var main_Contents = document.querySelectorAll("ul.main-Content>li"); | ||
+ | function ContentOpen(index) { | ||
+ | for (var i = 0; i < main_Contents.length; i++) { | ||
+ | var sub_Content = main_Contents[i].querySelector(".sub-Content"); | ||
+ | if (i === index) { | ||
+ | sub_Content.style.height = '13rem'; | ||
+ | } else { | ||
+ | sub_Content.style.height = '0'; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | function makeContentOpenFunc(index) { | ||
+ | return function() { | ||
+ | ContentOpen(index); | ||
+ | }; | ||
+ | } | ||
+ | for (var i = 0; i < main_Contents.length; i++) { | ||
+ | main_Contents[i].onclick = makeContentOpenFunc(i); | ||
+ | } | ||
+ | ContentOpen(0); | ||
+ | })(); | ||
+ | </script> | ||
− | < | + | <div id="Articles"> |
+ | <div class="ContentBox"> | ||
+ | <div class="ContentHolder"> | ||
+ | <div class="Text1">Modeling</div> | ||
+ | <div class="Text2" id="First1">Introduction</div> | ||
+ | <div class="Text3"> | ||
+ | Noticing the problem of obesity growing in Taiwan, our team NTU-LIHPAO-Taiwan make efforts to improve a designed probiotic for oral peptide drug — “Healthin”. For preventing the side effects from commercial weight loss pills, as in our project design, the product CPP-PYY complex is produced by genetically modified Lactobacillus casei, which is orally ingested. TAT helps to penetrate through the villi, and the released PYY then binds to hypothalamus for appetite suppression. | ||
+ | </div> | ||
+ | <div class="Text3"> | ||
+ | In the Modeling part, we tried to simulate the pathways of our designed probiotic L. casei and secreted CPP-PYY complex inside human body, from oral ingestion to final PYY releasing, respectively. The ultimate goal is to build the general formula, and to find out the suitable and optimal dose for Healthin, which hopefully exerts the beneficial and harmless effect for appetite suppression. In general, after taking Healthin, some L. casei pass through stomach and reach human intestine. Within the transient colonization, these modified L. casei produce CPP-PYY complex, and with the help of TAT, the complexes penetrate through the small intestine epithelial cells into circulation system. The linker between the complex is cut by thrombin in the blood, thus releasing free PYY for circulation, which binds to Y2 receptor in the hypothalamus for controlling satiety feeling. Moreover, the suicide device and bacteria survival were also considered in the simulation for safety concern. Combining data obtained from experimental results and several literatures, we applied MATLAB for calculation and simulation. By analyzing the pathways of L. casei inside human body step by step, the ultimate dose could be determined from the general formula. | ||
+ | </div> | ||
− | < | + | <div class="Container_Bottom1"></div> |
− | + | <div class="Container_Bottom2"> | |
− | </ | + | <div class="Intro_Picture"> |
− | < | + | <div id="NTUschool_logo"><a href="http://www.ntu.edu.tw/english/index.html"><img src="https://static.igem.org/mediawiki/2015/d/de/NTUschool_icon.png" style="max-width: 100%; max-height: 70px"/></a></div> |
− | < | + | <div id="LIHPAO_logo"><a href="http://www.llsc.com.tw/"><img src="https://static.igem.org/mediawiki/2015/d/d4/LIHPAO_logo.png" style="max-width: 100%; max-height: 70px"/></a></div> |
− | < | + | <div id="NTUBST_logo"><a href="http://www.bst.ntu.edu.tw/BST-new/NTUBST.html"><img src="https://static.igem.org/mediawiki/2015/6/68/NTUBST_logo.png" style="max-width: 100%; max-height: 70px"/></a></div> |
− | </ | + | </div> |
+ | </div> | ||
+ | <div class="Text_Sponsor"> | ||
+ | Maintained by the iGEM team NTU-LIHPAO-Taiwan ©2015 NTU-LIHPAO-Taiwan | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <script> | ||
+ | $('.sub-Content>li a').click(function() { | ||
+ | console.log(this.hash); | ||
+ | if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') || location.hostname == this.hostname) { | ||
+ | var target = $('[id="'+this.hash.substring(1)+'"]'); | ||
+ | target = target.length ? target : $('[name="' + this.hash.slice(1) +'"]'); | ||
+ | if (target.length) { | ||
+ | $('html,body').animate({ | ||
+ | scrollTop: target.offset().top-55 | ||
+ | }, 700); | ||
+ | return false; | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | $('.title').click(function() { | ||
+ | console.log(this.hash); | ||
+ | if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') || location.hostname == this.hostname) { | ||
+ | var target = $('[id="'+this.hash.substring(1)+'"]'); | ||
+ | target = target.length ? target : $('[name="' + this.hash.slice(1) +'"]'); | ||
+ | if (target.length) { | ||
+ | $('html,body').animate({ | ||
+ | scrollTop: target.offset().top-55 | ||
+ | }, 700); | ||
+ | return false; | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | $('.Text3 > a').click(function() { | ||
+ | console.log(this.hash); | ||
+ | if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') || location.hostname == this.hostname) { | ||
+ | var target = $('[id="'+this.hash.substring(1)+'"]'); | ||
+ | target = target.length ? target : $('[name="' + this.hash.slice(1) +'"]'); | ||
+ | if (target.length) { | ||
+ | $('html,body').animate({ | ||
+ | scrollTop: target.offset().top-55 | ||
+ | }, 700); | ||
+ | return false; | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | </script> | ||
</div> | </div> | ||
+ | </body> | ||
</html> | </html> |
Revision as of 11:40, 12 September 2015
- Overview
- Background
- Reference
Modeling
Introduction
Noticing the problem of obesity growing in Taiwan, our team NTU-LIHPAO-Taiwan make efforts to improve a designed probiotic for oral peptide drug — “Healthin”. For preventing the side effects from commercial weight loss pills, as in our project design, the product CPP-PYY complex is produced by genetically modified Lactobacillus casei, which is orally ingested. TAT helps to penetrate through the villi, and the released PYY then binds to hypothalamus for appetite suppression.
In the Modeling part, we tried to simulate the pathways of our designed probiotic L. casei and secreted CPP-PYY complex inside human body, from oral ingestion to final PYY releasing, respectively. The ultimate goal is to build the general formula, and to find out the suitable and optimal dose for Healthin, which hopefully exerts the beneficial and harmless effect for appetite suppression. In general, after taking Healthin, some L. casei pass through stomach and reach human intestine. Within the transient colonization, these modified L. casei produce CPP-PYY complex, and with the help of TAT, the complexes penetrate through the small intestine epithelial cells into circulation system. The linker between the complex is cut by thrombin in the blood, thus releasing free PYY for circulation, which binds to Y2 receptor in the hypothalamus for controlling satiety feeling. Moreover, the suicide device and bacteria survival were also considered in the simulation for safety concern. Combining data obtained from experimental results and several literatures, we applied MATLAB for calculation and simulation. By analyzing the pathways of L. casei inside human body step by step, the ultimate dose could be determined from the general formula.
Maintained by the iGEM team NTU-LIHPAO-Taiwan ©2015 NTU-LIHPAO-Taiwan