Difference between revisions of "Team:NTU-LIHPAO-Taiwan/Modeling"
(Prototype team page) |
LesleyChiu (Talk | contribs) |
||
(27 intermediate revisions by 2 users not shown) | |||
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: 480px; | ||
+ | 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; | ||
+ | padding-left: 50px; | ||
+ | } | ||
+ | |||
+ | ol.part2 li { | ||
+ | padding-top: 3px; | ||
+ | padding-bottom: 3px; | ||
+ | } | ||
+ | |||
+ | 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><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan">Home</a></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"><div id=Position_Now><a>Project</a></div></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> | ||
+ | </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">Modeling</span> | ||
+ | <ul class="sub-Content"> | ||
+ | <li><a href="#First1">Introduction</a></li> | ||
+ | <li><a href="#First2">Pathways</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 <i>Lactobacillus casei</i>, 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 <b>simulate the pathways of our designed probiotic <i>L. casei</i> and secreted CPP-PYY complex inside human body</b>, from oral ingestion to final PYY releasing, respectively. The ultimate goal is to <b>build the general formula, and to find out the suitable and optimal dose for Healthin</b>, which hopefully exerts the beneficial and harmless effect for appetite suppression. | ||
+ | </div> | ||
+ | <div class="Text3"> | ||
+ | In general, after taking Healthin, some <i>L. casei</i> pass through stomach and reach human intestine. Within the transient colonization, these modified <i>L. casei</i> 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 <i>L. casei</i> inside human body step by step, the ultimate dose could be determined from the general formula. | ||
+ | </div> | ||
− | < | + | <div class="Text2" id="First2">Pathways</div> |
+ | <div class="Text3"> | ||
+ | The pathways of the novel oral peptide drug Healthin consist of 5 parts, from intake through peptide release inside human body : | ||
+ | </div> | ||
+ | <div class="Text3"> | ||
+ | <ol class="part2"> | ||
+ | <li>Bacteria distribution</li> | ||
+ | <li>CPP-PYY penetration efficiency</li> | ||
+ | <li>Absorption into bloodstream</li> | ||
+ | <li>Thrombin cleavage efficiency</li> | ||
+ | <li>Healthin drug effect</li> | ||
+ | </ol> | ||
+ | </div> | ||
+ | <div class="Text3"> | ||
+ | By utilizing MATLAB, we built a model from these pathways to construct the general formula for determining the dose response. | ||
+ | </div> | ||
+ | <div class="Text3"> | ||
+ | <b>—></b> <a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Modeling/Pathways"><b>[Click on here to see our Simulation Strategy and Results]</b></a> | ||
+ | </div> | ||
+ | <div class="Text3"> | ||
+ | <b>—></b> <a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Modeling/Conclusion"><b>[Click on here for Conclusion and Application]</b></a> | ||
+ | </div> | ||
+ | <div class="Container_Article_Picture"> | ||
+ | <div class="Article_Picture"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/6/60/NTU-Modeling.gif" width="480px"/> | ||
+ | <div class="Article_PictureText"><div class="Text_Picture">[Fig.2-1] Pathway of Healthin</div></div> | ||
+ | </div> | ||
+ | </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> |
Latest revision as of 13:15, 18 September 2015
- Modeling
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.
Pathways
The pathways of the novel oral peptide drug Healthin consist of 5 parts, from intake through peptide release inside human body :
- Bacteria distribution
- CPP-PYY penetration efficiency
- Absorption into bloodstream
- Thrombin cleavage efficiency
- Healthin drug effect
By utilizing MATLAB, we built a model from these pathways to construct the general formula for determining the dose response.
[Fig.2-1] Pathway of Healthin
Maintained by the iGEM team NTU-LIHPAO-Taiwan ©2015 NTU-LIHPAO-Taiwan