Difference between revisions of "Team:Tongji Software/Public Engagement"
| Line 1: | Line 1: | ||
| − | <html> | + | {{Tongji_Software/css/MenuStyle_css}} |
| + | <html lang="en" class="no-js"> | ||
<head> | <head> | ||
| − | < | + | <meta charset="UTF-8"> |
| + | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<style> | <style> | ||
*::-webkit-scrollbar { | *::-webkit-scrollbar { | ||
display: none; | display: none; | ||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
html, | html, | ||
| Line 112: | Line 94: | ||
padding: 0; | padding: 0; | ||
border: 0; | border: 0; | ||
| − | font-size: 100%; | + | /*font-size: 100%;*/ |
| − | /* font: inherit;*/ | + | /* font: inherit; */ |
vertical-align: baseline; | vertical-align: baseline; | ||
} | } | ||
| Line 147: | Line 129: | ||
} | } | ||
| − | blockquote:before,blockquote:after,q:before,q:after { | + | blockquote:before, |
| + | blockquote:after, | ||
| + | q:before, | ||
| + | q:after { | ||
content: ''; | content: ''; | ||
content: none; | content: none; | ||
| Line 156: | Line 141: | ||
border-spacing: 0; | border-spacing: 0; | ||
} | } | ||
| − | /* -------------------------------- Primary style -------------------------------- */ | + | /* -------------------------------- |
| + | |||
| + | Primary style | ||
| + | |||
| + | |||
| + | -------------------------------- */ | ||
| + | |||
| + | html * { | ||
| + | -webkit-font-smoothing: antialiased; | ||
| + | -moz-osx-font-smoothing: grayscale; | ||
| + | } | ||
| − | *,*:after,*:before { | + | *, |
| + | *:after, | ||
| + | *:before { | ||
-webkit-box-sizing: border-box; | -webkit-box-sizing: border-box; | ||
-moz-box-sizing: border-box; | -moz-box-sizing: border-box; | ||
| Line 166: | Line 163: | ||
body { | body { | ||
font-size: 100%; | font-size: 100%; | ||
| − | font-family: | + | font-family: Ubuntu, sans-serif; |
| − | color | + | /*color: #3e3947;*/ |
| − | + | color: white; | |
| − | + | background-color: white; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | background | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | body | + | body, |
| − | + | html { | |
| − | + | height: 100%; | |
} | } | ||
a { | a { | ||
| − | color: | + | color: #3e3947; |
text-decoration: none; | text-decoration: none; | ||
} | } | ||
| − | + | img { | |
| − | + | max-width: 100%; | |
} | } | ||
| − | /* -------------------------------- Modules - reusable parts of our design -------------------------------- */ | + | /* -------------------------------- |
| + | |||
| + | Modules - reusable parts of our design | ||
| + | |||
| + | -------------------------------- */ | ||
| − | .cd- | + | .cd-img-replace { |
| − | /* | + | /* replace text with a background-image */ |
| − | + | display: inline-block; | |
| − | + | overflow: hidden; | |
| − | + | text-indent: 100%; | |
| + | white-space: nowrap; | ||
} | } | ||
| + | /* -------------------------------- | ||
| + | |||
| + | Main components | ||
| + | |||
| + | -------------------------------- */ | ||
| + | /* | ||
| + | 1em -> 16px -> 1.1vw | ||
| + | 1px -> 0.06875vw | ||
| + | 950px -> 65.5vw --- width of SectionContianer | ||
| + | */ | ||
| + | /*整体的section*/ | ||
| − | .cd- | + | #SectionContainer .cd-section { |
| − | + | min-height: 100vh; | |
| − | + | position: relative; | |
| − | + | padding: 21vh 24.5vw 15vh 10vw; | |
| + | /*21vh 22em 2em 10vw*/ | ||
| + | text-align: justify; | ||
} | } | ||
| − | |||
| − | + | #SectionContainer .cd-section:nth-of-type(odd) { | |
| − | + | background-color: #3e3947; | |
} | } | ||
| − | .cd- | + | #SectionContainer .cd-section:nth-of-type(odd) p { |
| − | + | color: white; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | #SectionContainer .cd-section:nth-of-type(even) { | |
| − | + | background-color: #745360; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | #SectionContainer .cd-section:nth-of-type(even) p { | |
| − | + | color: white; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| + | /*每个推送的标题*/ | ||
| − | .cd- | + | #SectionContainer .cd-section p.PushTitle { |
| − | + | position: relative; | |
| − | position: | + | color: white; |
| − | + | padding-top: 5em; | |
| − | + | /*3.5em*/ | |
| − | - | + | padding-bottom: 1em; |
| − | + | font-size: 1.5vw; | |
| − | - | + | /*22px*/ |
| − | - | + | |
| − | + | ||
| − | + | ||
} | } | ||
| − | .cd- | + | #SectionContainer .cd-section p { |
| − | + | position: relative; | |
} | } | ||
| + | /*加大的首字母*/ | ||
| − | + | #SectionContainer .cd-section b { | |
| − | + | position: relative; | |
| − | + | font-weight: 500; | |
| − | + | font-size: 1.4em; | |
| + | overflow: unset; | ||
} | } | ||
| + | /*总标题*/ | ||
| − | .cd- | + | #SectionContainer .cd-section #EduMainTitle { |
| − | + | color: white; | |
| − | + | font-weight: bold; | |
| + | font-size: 3.5vw; | ||
| + | /*50px*/ | ||
| + | position: relative; | ||
bottom: auto; | bottom: auto; | ||
| − | - | + | padding-bottom: 1.2em; |
| − | + | overflow: unset; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| + | /*三个部分的大标题*/ | ||
| − | .cd- | + | #SectionContainer .cd-section h1.EduSubTitle:not(#EduSubTitle1) { |
| − | + | color: white; | |
| − | + | font-weight: 500; | |
| + | font-size: 2.1vw; | ||
| + | /*31px*/ | ||
| + | position: relative; | ||
| + | bottom: auto; | ||
| + | padding-bottom: 1.2em; | ||
| + | overflow: unset; | ||
} | } | ||
| − | .cd- | + | #SectionContainer .cd-section h1#EduSubTitle1 { |
| − | + | ||
color: white; | color: white; | ||
| − | + | font-weight: 500; | |
| − | font- | + | font-size: 2.1vw; |
| + | /*31px*/ | ||
| + | position: relative; | ||
| + | bottom: auto; | ||
| + | padding-bottom: 0.5em; | ||
| + | /*padding-top: 2em;*/ | ||
| + | overflow: unset; | ||
} | } | ||
| − | + | #SectionContainer .cd-section p { | |
| − | + | line-height: 1.6; | |
| − | + | ||
| − | + | ||
} | } | ||
| − | .cd- | + | #SectionContainer .cd-section img.PushImage { |
| − | + | display: block; | |
| − | + | margin: 0 auto; | |
| − | + | padding-bottom: 10px; | |
| − | + | padding-top: 10px; | |
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | #cd- | + | #SectionContainer .cd-section #ImageTable { |
| − | + | margin: 0 auto; | |
| − | + | padding-top: 20px; | |
| − | + | ||
} | } | ||
| − | .cd- | + | #SectionContainer .cd-section #PushTableImage1 { |
| − | + | padding-right: 1.5vw; | |
| − | + | /*15px*/ | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | /* | + | |
} | } | ||
| − | .cd- | + | #SectionContainer .cd-section #PushImage4 { |
| − | + | position: relative; | |
| − | + | float: right; | |
| − | + | margin: auto; | |
| − | + | padding-left: 20px; | |
| − | position: | + | padding-right: 10px; |
| − | + | ||
| − | + | ||
| − | - | + | |
| − | - | + | |
| − | + | ||
} | } | ||
| − | .cd- | + | #SectionContainer .cd-section .CharmingPoint { |
| − | + | padding-left: 4em; | |
} | } | ||
| − | .cd- | + | #SectionContainer .cd-section #CharmingHeader { |
| − | + | padding-left: 1.5em; | |
} | } | ||
| − | .cd- | + | #SectionContainer .cd-section #highschool { |
| − | + | float: right; | |
| + | padding-left: 20px; | ||
| + | padding-right: 10px; | ||
| + | top: 5em; | ||
} | } | ||
| + | /*/*/ | ||
| − | + | @media only screen and (min-width: 768px) { | |
| − | + | /*.cd-section h1 { | |
| − | + | font-size: 30px; | |
| + | font-size: 1.875rem; | ||
| + | }*/ | ||
| + | /*p的字体设置*/ | ||
| + | #SectionContainer .cd-section p { | ||
| + | /*font-size: 1px;*/ | ||
| + | font-size: 1.2vw; | ||
| + | /*1em*/ | ||
| + | color: white; | ||
| + | /*line-height: 2;*/ | ||
| + | } | ||
} | } | ||
| − | .cd- | + | .cd-scroll-down { |
| − | + | position: absolute; | |
| − | -webkit-transform: | + | left: 50%; |
| − | -moz-transform: | + | right: auto; |
| − | -ms-transform: | + | -webkit-transform: translateX(-50%); |
| − | -o-transform: | + | -moz-transform: translateX(-50%); |
| − | transform: | + | -ms-transform: translateX(-50%); |
| + | -o-transform: translateX(-50%); | ||
| + | transform: translateX(-50%); | ||
| + | bottom: 20px; | ||
| + | width: 38px; | ||
| + | height: 44px; | ||
| + | /*background: url("../images/cd-arrow-bottom.svg") no-repeat center center;*/ | ||
} | } | ||
| + | /* No Touch devices */ | ||
| − | .cd | + | .cd-nav-trigger { |
| − | + | display: none; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | .no-touch #cd-vertical-nav { | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
position: fixed; | position: fixed; | ||
| − | + | right: 40px; | |
| − | + | top: 25%; | |
| − | + | bottom: auto; | |
| − | + | -webkit-transform: translateY(-50%); | |
| − | + | -moz-transform: translateY(-50%); | |
| − | + | -ms-transform: translateY(-50%); | |
| − | + | -o-transform: translateY(-50%); | |
| − | + | transform: translateY(-50%); | |
| − | + | z-index: 1; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | -webkit-transform: translateY(- | + | |
| − | -moz-transform: translateY(- | + | |
| − | -ms-transform: translateY(- | + | |
| − | -o-transform: translateY(- | + | |
| − | transform: translateY(- | + | |
| − | - | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | .cd- | + | .no-touch #cd-vertical-nav li { |
| − | + | text-align: right; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | .cd- | + | .no-touch #cd-vertical-nav a { |
display: inline-block; | display: inline-block; | ||
| − | + | /* prevent weird movements on hover when you use a CSS3 transformation - webkit browsers */ | |
| − | + | -webkit-backface-visibility: hidden; | |
| − | -webkit- | + | backface-visibility: hidden; |
| − | - | + | |
| − | + | ||
} | } | ||
| − | .no-touch | + | .no-touch #cd-vertical-nav a:after { |
| − | + | content: ""; | |
| − | + | display: table; | |
| + | clear: both; | ||
} | } | ||
| − | .cd- | + | .no-touch #cd-vertical-nav a span { |
| − | + | float: right; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
display: inline-block; | display: inline-block; | ||
| − | + | -webkit-transform: scale(0.6); | |
| + | -moz-transform: scale(0.6); | ||
| + | -ms-transform: scale(0.6); | ||
| + | -o-transform: scale(0.6); | ||
| + | transform: scale(0.6); | ||
} | } | ||
| − | .cd- | + | .no-touch #cd-vertical-nav a.is-selected span { |
| − | + | -webkit-transform: scale(1); | |
| − | + | -moz-transform: scale(1); | |
| − | + | -ms-transform: scale(1); | |
| − | + | -o-transform: scale(1); | |
| − | + | transform: scale(1); | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | .cd- | + | .no-touch #cd-vertical-nav a:hover span { |
| − | + | -webkit-transform: scale(1); | |
| + | -moz-transform: scale(1); | ||
| + | -ms-transform: scale(1); | ||
| + | -o-transform: scale(1); | ||
| + | transform: scale(1); | ||
} | } | ||
| + | /*.no-touch #cd-vertical-nav a:hover .cd-label {*/ | ||
| + | /* opacity: 1;*/ | ||
| + | /*}*/ | ||
| − | .cd- | + | .no-touch #cd-vertical-nav a.is-selected .cd-label { |
| − | + | opacity: 1; | |
} | } | ||
| − | .cd- | + | .no-touch #cd-vertical-nav a.is-selected .cd-dot { |
| − | background- | + | /*点到达时的颜色*/ |
| + | background-color: white; | ||
} | } | ||
| − | .cd- | + | .no-touch #cd-vertical-nav .cd-dot { |
| − | + | position: relative; | |
| − | + | /* we set a top value in order to align the dot with the label. If you change label's font, you may need to change this top value*/ | |
| − | + | top: 0.9vw; | |
| − | -webkit-transform: | + | /*13px*/ |
| − | -moz-transform: | + | height: 12px; |
| − | -ms-transform: | + | width: 12px; |
| − | -o-transform: | + | border-radius: 50%; |
| − | transform: | + | /*点未到达时的颜色*/ |
| + | background-color: dodgerblue; | ||
| + | -webkit-transition: -webkit-transform 0.2s, background-color 0.5s; | ||
| + | -moz-transition: -moz-transform 0.2s, background-color 0.5s; | ||
| + | transition: transform 0.2s, background-color 0.5s; | ||
| + | -webkit-transform-origin: 50% 50%; | ||
| + | -moz-transform-origin: 50% 50%; | ||
| + | -ms-transform-origin: 50% 50%; | ||
| + | -o-transform-origin: 50% 50%; | ||
| + | transform-origin: 50% 50%; | ||
} | } | ||
| − | + | .no-touch #cd-vertical-nav .cd-label { | |
| − | + | position: relative; | |
| − | . | + | margin-right: 0.6vw; |
| − | + | padding: .2em .5em; | |
| − | + | /*padding: 0;*/ | |
| + | color: white; | ||
| + | font-size: 2.3vw; | ||
| + | /*34px*/ | ||
| + | /*font-size: 0.875rem;*/ | ||
| + | -webkit-transition: -webkit-transform 0.2s, opacity 0.2s; | ||
| + | -moz-transition: -moz-transform 0.2s, opacity 0.2s; | ||
| + | transition: transform 0.2s, opacity 0.2s; | ||
| + | /*文字未hover时的透明度*/ | ||
| + | opacity: 0.5; | ||
| + | -webkit-transform-origin: 100% 50%; | ||
| + | -moz-transform-origin: 100% 50%; | ||
| + | -ms-transform-origin: 100% 50%; | ||
| + | -o-transform-origin: 100% 50%; | ||
| + | transform-origin: 100% 50%; | ||
} | } | ||
| + | /* Touch devices */ | ||
| − | + | .touch .cd-nav-trigger { | |
| − | + | display: block; | |
| − | + | z-index: 2; | |
| − | + | position: fixed; | |
| − | + | bottom: 30px; | |
| − | + | right: 5%; | |
| − | + | height: 44px; | |
| − | + | width: 44px; | |
| − | + | border-radius: 0.25em; | |
| + | background: rgba(255, 255, 255, 0.9); | ||
} | } | ||
| − | . | + | .touch .cd-nav-trigger span { |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
position: absolute; | position: absolute; | ||
| − | width: | + | height: 4px; |
| − | + | width: 4px; | |
| + | background-color: #3e3947; | ||
| + | border-radius: 50%; | ||
left: 50%; | left: 50%; | ||
top: 50%; | top: 50%; | ||
| Line 599: | Line 507: | ||
-o-transform: translateX(-50%) translateY(-50%); | -o-transform: translateX(-50%) translateY(-50%); | ||
transform: translateX(-50%) translateY(-50%); | transform: translateX(-50%) translateY(-50%); | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| − | + | .touch .cd-nav-trigger span::before, | |
| − | + | .touch .cd-nav-trigger span::after { | |
| − | + | content: ''; | |
| − | + | height: 100%; | |
| − | + | width: 100%; | |
| + | position: absolute; | ||
| + | left: 0; | ||
| + | background-color: inherit; | ||
| + | border-radius: inherit; | ||
} | } | ||
| − | + | .touch .cd-nav-trigger span::before { | |
| − | + | top: -9px; | |
| − | + | ||
| − | + | ||
} | } | ||
| − | .cd- | + | .touch .cd-nav-trigger span::after { |
| − | position: | + | bottom: -9px; |
| + | } | ||
| + | |||
| + | .touch #cd-vertical-nav { | ||
| + | position: fixed; | ||
z-index: 1; | z-index: 1; | ||
| + | right: 5%; | ||
| + | bottom: 30px; | ||
| + | width: 90%; | ||
| + | max-width: 400px; | ||
| + | max-height: 90%; | ||
| + | overflow-y: scroll; | ||
| + | -webkit-overflow-scrolling: touch; | ||
| + | -webkit-transform-origin: right bottom; | ||
| + | -moz-transform-origin: right bottom; | ||
| + | -ms-transform-origin: right bottom; | ||
| + | -o-transform-origin: right bottom; | ||
| + | transform-origin: right bottom; | ||
| + | -webkit-transform: scale(0); | ||
| + | -moz-transform: scale(0); | ||
| + | -ms-transform: scale(0); | ||
| + | -o-transform: scale(0); | ||
| + | transform: scale(0); | ||
| + | -webkit-transition-property: -webkit-transform; | ||
| + | -moz-transition-property: -moz-transform; | ||
| + | transition-property: transform; | ||
| + | -webkit-transition-duration: 0.2s; | ||
| + | -moz-transition-duration: 0.2s; | ||
| + | transition-duration: 0.2s; | ||
| + | border-radius: 0.25em; | ||
| + | background-color: rgba(255, 255, 255, 0.9); | ||
} | } | ||
| − | .cd- | + | .touch #cd-vertical-nav a { |
| − | + | display: block; | |
| − | + | padding: 1em; | |
| + | border-bottom: 1px solid rgba(62, 57, 71, 0.1); | ||
} | } | ||
| − | @media only screen and (min-width: | + | .touch #cd-vertical-nav a span:first-child { |
| − | .cd- | + | display: none; |
| − | + | } | |
| − | + | ||
| + | .touch #cd-vertical-nav a.is-selected span:last-child { | ||
| + | color: #d88683; | ||
| + | } | ||
| + | |||
| + | .touch #cd-vertical-nav.open { | ||
| + | -webkit-transform: scale(1); | ||
| + | -moz-transform: scale(1); | ||
| + | -ms-transform: scale(1); | ||
| + | -o-transform: scale(1); | ||
| + | transform: scale(1); | ||
| + | } | ||
| + | |||
| + | .touch #cd-vertical-nav.open+.cd-nav-trigger { | ||
| + | background-color: transparent; | ||
| + | } | ||
| + | |||
| + | .touch #cd-vertical-nav.open+.cd-nav-trigger span { | ||
| + | background-color: rgba(62, 57, 71, 0); | ||
| + | } | ||
| + | |||
| + | .touch #cd-vertical-nav.open+.cd-nav-trigger span::before, | ||
| + | .touch #cd-vertical-nav.open+.cd-nav-trigger span::after { | ||
| + | background-color: #3e3947; | ||
| + | height: 3px; | ||
| + | width: 20px; | ||
| + | border-radius: 0; | ||
| + | left: -8px; | ||
| + | } | ||
| + | |||
| + | .touch #cd-vertical-nav.open+.cd-nav-trigger span::before { | ||
| + | -webkit-transform: rotate(45deg); | ||
| + | -moz-transform: rotate(45deg); | ||
| + | -ms-transform: rotate(45deg); | ||
| + | -o-transform: rotate(45deg); | ||
| + | transform: rotate(45deg); | ||
| + | top: 1px; | ||
| + | } | ||
| + | |||
| + | .touch #cd-vertical-nav.open+.cd-nav-trigger span::after { | ||
| + | -webkit-transform: rotate(135deg); | ||
| + | -moz-transform: rotate(135deg); | ||
| + | -ms-transform: rotate(135deg); | ||
| + | -o-transform: rotate(135deg); | ||
| + | transform: rotate(135deg); | ||
| + | bottom: 0; | ||
| + | } | ||
| + | |||
| + | .touch #cd-vertical-nav li:last-child a { | ||
| + | border-bottom: none; | ||
| + | } | ||
| + | |||
| + | @media only screen and (min-width: 768px) { | ||
| + | .touch .cd-nav-trigger, | ||
| + | .touch #cd-vertical-nav { | ||
| + | bottom: 40px; | ||
} | } | ||
} | } | ||
</style> | </style> | ||
| + | <!-- <link href='../font/T--Tongji_Software--fonts-Ubuntu.ttf' rel='stylesheet' type='text/css'> --> | ||
| + | <script src="https://2019.igem.org/Template:Tongji_Software/js/ProjectModernizr_js?action=raw&ctype=text/javascript"></script> | ||
| + | <!-- Modernizr --> | ||
| + | <title>PROJECT</title> | ||
</head> | </head> | ||
<body> | <body> | ||
| − | <div id=" | + | <div style="position:absolute; margin:0vh 0vw 0vh -10px; width:100vw; color:white" id="section"> |
| − | + | <nav id="cd-vertical-nav"> | |
| − | + | <ul> | |
| − | + | <li> | |
| − | + | <a href="#section1" data-number="1"> | |
| − | <a class="cd- | + | <span class="cd-dot"></span> |
| − | + | <span class="cd-label">Public Number</span> | |
| − | + | </a> | |
| − | + | </li> | |
| − | < | + | <li> |
| − | </ | + | <a href="#section2" data-number="2"> |
| + | <span class="cd-dot"></span> | ||
| + | <span class="cd-label">High School</span> | ||
| + | </a> | ||
| + | </li> | ||
| + | <li> | ||
| + | <a href="#section3" data-number="3"> | ||
| + | <span class="cd-dot"></span> | ||
| + | <span class="cd-label">Tongji University</span> | ||
| + | </a> | ||
| + | </li> | ||
| + | </ul> | ||
| + | </nav> | ||
| + | <a class="cd-nav-trigger cd-img-replace">Open navigation<span></span></a> | ||
| + | <div id="SectionContainer"> | ||
| + | <section id="section1" class="cd-section"> | ||
| + | <h1 id="EduMainTitle"><b>E</b>DUCATION & <b>E</b>NGAGEMENT</h1> | ||
| + | <br><br><br><br><br><br> | ||
| + | <h1 class="EduSubTitle" id="EduSubTitle1"><b>T</b>ONGJI iGEM <b>P</b>UBLIC <b>N</b>UMBER</h1> | ||
| + | <p>We created the tongji iGEM public number and regularly posted relevant pushes on iGEM in the public number.</p> | ||
| + | <br><br><br><br><br><br><br><br><br> | ||
| + | <img src="../images/PublicnnumberPicture.png" alt="PublicNumberPicture1" style="width: 65.5vw;height: 20.7vw"> | ||
| + | <!--width: 950px;height: 300px--> | ||
| + | <br><br><br><br><br> | ||
| − | + | <p class="PushTitle"><b>T</b>HE FIRST PUSH: PROGRAMMER (BALD) <b>iGEM</b>ER IS ONLINE</p> | |
| − | + | <br><br> | |
| − | + | <img src="../images/push1.png" alt="PushImage" style="width: 65.5vw"> | |
| − | < | + | <!--950px--> |
| − | < | + | <br><br> |
| + | <p> | ||
| + | Main content: Introduce igem from the perspective of software, including the teams participating in the calendar year, the main content of the project, etc., so that readers have a general understanding of igem and software. | ||
| + | <br> | ||
| + | </p> | ||
| − | < | + | <p class="PushTitle"><b>T</b>HE SECOND PUSH: <b>6</b>th CCIC IN <b>S</b>HEN<b>Z</b>HEN</p> |
| − | + | <div id="ImageTable"> | |
| + | <table class="PushImage"> | ||
| + | <tr> | ||
| + | <td id="PushTableImage1"> | ||
| + | <img src="../images/push2.1.png" alt="second push 1" class="PushImage" style="width: 32vw;height: 24vw"> | ||
| + | <!--width: 468px;height: 355px--> | ||
| + | </td> | ||
| + | <td> | ||
| + | <img src="../images/push2.2.png" alt="second push 2" class="PushImage" style="width: 32vw;height: 24vw"> | ||
| + | </td> | ||
| + | </tr> | ||
| + | </table> | ||
| + | </div> | ||
| + | <br> | ||
| + | <p> | ||
| + | Main content: It mainly introduces the tongji software team's participation in ccic in Shenzhen, and the harvest of our team. In the process of participating in ccic, we not only listened to the presentation of many teams, but also learned from the experience | ||
| + | of other teams. We also listened to many lectures by biological experts and valuable suggestions from the judges on our projects. This was before the official igem competition. Very good exchange opportunities in China. | ||
| + | </p> | ||
| − | < | + | <p class="PushTitle"><b>T</b>HE THIRD PUSH: SUBVERSIVE DISCIPLINE - <b>S</b>YNTHETIC <b>B</b>IOLOGY</p> |
| − | + | <p> | |
| − | + | Original intention: Since our project is closely related to synthetic biology, we hope that our readers will have a certain understanding of synthetic biology before we formally introduce our project, so that we can better understand pathlab. | |
| − | < | + | <br> Main content: As an emerging discipline in the field of biology in the 21st century, synthetic biology is the product of multidisciplinary intersections of molecular and cellular biology, evolutionary systematics, biochemistry, |
| − | + | informatics, mathematics, computer and engineering. So far, it has made remarkable achievements in many fields such as bioenergy, biomaterials, medical technology and exploring the laws of life. In 2014, the US Department of Defense | |
| − | + | listed it as one of the six major disruptive technologies for priority development in the 21st century; in the third technical forecast completed in 2014, China listed synthetic biotechnology as one of the top ten breakthrough technologies. | |
| − | + | . Moreover, in the “13th Five-Year Plan” for scientific and technological innovation strategic planning, synthetic biotechnology has been listed as a strategic forward-looking key development direction. | |
| + | </p> | ||
| − | < | + | <p class="PushTitle"><b>T</b>HE FOURTH PUSH: EFFICIENT PATH SEARCHER - <b>A</b>LPHA <b>A</b>NT</p> |
| + | <img src="../images/push4.png" alt="fourth push" class="PushImage" style="width: 30vw;height: 30.6vw" id="PushImage4"> | ||
| + | <!--440px;400px--> | ||
| + | <div style="width: 35vw"> | ||
| + | <!--500px--> | ||
| + | <p> | ||
| + | Original intention: Our project pathlab was inspired by the previous tongji software project alpha ant. Before introducing pathlab, we wanted the reader to first understand the alpha ant and related path search knowledge. | ||
| + | <br> Main content: Alpha Ant is essentially a computational tool for pathway design and reconstruction. Allowing users to turn on Alpha Ant's effective and powerful path design guide in the face of the vast passages will clarify | ||
| + | their choice. Alpha Ant represents an efficient and convenient path building tool. Alpha means "origination." In fact, Alpha Ant is the first software to be equipped with an integrated ranking standard. Alpha Ant means that it | ||
| + | can find the most effective metabolic pathway connecting two molecules, just like the biological wisdom of an ant colony. Once food is discovered by scouts, it can be quickly organized to find the most effective source of food. | ||
| + | So use ants to represent efficient signal detectors and path searchers. | ||
| + | </p> | ||
| + | </div> | ||
| − | < | + | <p class="PushTitle"><b>T</b>HE FIFTH PUSH: PATH SEARCH <b>2.0</b> - INTEGRATED SERVICE PLATFORM <b>P</b>ATHLAB</p> |
| − | < | + | <p>Main content: Pathlab is a comprehensive platform for channel design, which is mainly used for brainstorming in the early stage of determining the topic. When the user knows the product he wants or the substrate he can use, Path search, |
| − | + | enzyme selection, and component search can be performed through Pathlab. In addition to the functions of these backbones, we also have functions such as word cloud, data update, and data upload to assist users in their use. | |
| − | < | + | </p> |
| − | </ | + | <div id="CharmingHeader"> |
| − | </ | + | <p>Charming points:</p> |
| + | </div> | ||
| + | <div style="width: 51.6vw"> | ||
| + | <!--750px--> | ||
| + | <p class="CharmingPoint">1. Optimize on the basis of dfs algorithm, adopt greedy (greedy) algorithm, and make a selection in each step, which is optimal.</p> | ||
| + | <p class="CharmingPoint">2. codon optimization, improve the efficiency of enzyme expression in the plasmid</p> | ||
| + | <p class="CharmingPoint">3. modular design, each part can be split and used separately</p> | ||
| + | <p class="CharmingPoint">4. depth information, to provide users with newer research progress of each enzyme</p> | ||
| + | </div> | ||
| + | |||
| + | </section> | ||
| + | <!-- cd-section --> | ||
| + | |||
| + | <section id="section2" class="cd-section"> | ||
| + | <h1 class="EduSubTitle"><b>X</b>IANG <b>M</b>ING <b>H</b>IGH <b>S</b>CHOOL</h1> | ||
| + | <div class="TextContainer"> | ||
| + | <img src="../images/high_school2.png" class="PushImage" alt="high school" style="width: 30vw;height: 32vw" id="highschool"> | ||
| + | <!--width: 440px;height: 410px--> | ||
| + | <div style="width: 35vw"> | ||
| + | <!--500px--> | ||
| + | <p> | ||
| + | In the early stage of the team, we represented for 2019 Tongji_Software team to give an introduction of Alpha Ant, the project of 2018 Tongji_Software, to the high school students of Xiangming High School. | ||
| + | <br> We aimed at making those who are going to enter university have a general idea of iGEM and synthetic biology by making project presentations. Meanwhile, we encouraged them to take part in the iGEM competition, because | ||
| + | they can learn many interesting and useful things by engaging themselves to the whole process of iGEM. Through this presentation, we found that those high school students showed great interests in iGEM and synthetic biology, | ||
| + | and they also had some fresh ideas about synthetic biology and the project. For example, they asked whether there are connections between synthetic pathway of biology and organic synthesis of chemistry, and they were interested | ||
| + | in the possibility of using machines or robots to simulate the biology pathways in reality. | ||
| + | </p> | ||
| + | </div> | ||
| + | <p> | ||
| + | This presentation, for our team, is the first human practice activity, and the key to this human practice is a review and conclusion of Alpha Ant, so as to have a clearer understanding of the whole project process and a deeper understanding of iGEM. Through | ||
| + | this human practice, we realized the importance of biology simulation and the necessity of using computers to simulate bacteria to achieve the goal of reducing costs. | ||
| + | </p> | ||
| + | </div> | ||
| + | </section> | ||
| + | <!-- cd-section --> | ||
| + | |||
| + | <section id="section3" class="cd-section"> | ||
| + | <h1 class="EduSubTitle"><b>P</b>RESENTATION IN <b>T</b>ONGJI <b>U</b>NIVERSITY</h1> | ||
| + | <div class="TextContainer"> | ||
| + | <p>The second presentation mainly introduced the status of bioinformatics in life science, the functions of bioinformatics in iGEM and how to use the knowledge of bioinformatics to construct a software about synthetic biology in iGEM. | ||
| + | This presentation made us have a new understanding of bioinformatics, and understand the application of bioinformatics in synthetic biology. Meanwhile, in the process of preparing, we also organized the construction of software，to | ||
| + | prepare for the later construction of software. | ||
| + | <br> Firstly, we raised questions and divided these questions into parts, then we read related literature and discussed about the solutions, and in the process of finding solutions, we collected and cleared up useful data, built | ||
| + | models to solve it, and we set up visual platform to make abstract problems more concrete. The interesting combination of codes in bioinformatics attracted students to join in the study of bioinformatics. The participation of software | ||
| + | teams in iGEM competition also makes them see the wide application of bioinformatics and more motivated for them to learn. At the same time, in this presentation, we raised a question to the students about how to do the sequence | ||
| + | alignment, and some of them thought that we can do the alignment from the beginning or the end of the sequences. | ||
| + | <br> Although the students didn’t take many aspects into consideration, their different opinions on the same question inspired us to continue to try different algorithms, continuously optimize. | ||
| + | </p> | ||
| + | </div> | ||
| + | </section> | ||
| + | <!-- cd-section --> | ||
| + | </div> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<script src="https://2019.igem.org/Template:Tongji_Software/js/jquery_210_min_js?action=raw&ctype=text/javascript"></script> | <script src="https://2019.igem.org/Template:Tongji_Software/js/jquery_210_min_js?action=raw&ctype=text/javascript"></script> | ||
| − | <script src="https://2019.igem.org/Template:Tongji_Software/js/ | + | <script src="https://2019.igem.org/Template:Tongji_Software/js/ProjectMain_js?action=raw&ctype=text/javascript"></script> |
| − | + | ||
| − | + | ||
| + | <!-- Resource jQuery --> | ||
</div> | </div> | ||
</body> | </body> | ||
</html> | </html> | ||
Revision as of 02:35, 14 October 2019
Open navigation
EDUCATION & ENGAGEMENT
TONGJI iGEM PUBLIC NUMBER
We created the tongji iGEM public number and regularly posted relevant pushes on iGEM in the public number.
THE FIRST PUSH: PROGRAMMER (BALD) iGEMER IS ONLINE
Main content: Introduce igem from the perspective of software, including the teams participating in the calendar year, the main content of the project, etc., so that readers have a general understanding of igem and software.
THE SECOND PUSH: 6th CCIC IN SHENZHEN
|
|
Main content: It mainly introduces the tongji software team's participation in ccic in Shenzhen, and the harvest of our team. In the process of participating in ccic, we not only listened to the presentation of many teams, but also learned from the experience of other teams. We also listened to many lectures by biological experts and valuable suggestions from the judges on our projects. This was before the official igem competition. Very good exchange opportunities in China.
THE THIRD PUSH: SUBVERSIVE DISCIPLINE - SYNTHETIC BIOLOGY
Original intention: Since our project is closely related to synthetic biology, we hope that our readers will have a certain understanding of synthetic biology before we formally introduce our project, so that we can better understand pathlab.
Main content: As an emerging discipline in the field of biology in the 21st century, synthetic biology is the product of multidisciplinary intersections of molecular and cellular biology, evolutionary systematics, biochemistry,
informatics, mathematics, computer and engineering. So far, it has made remarkable achievements in many fields such as bioenergy, biomaterials, medical technology and exploring the laws of life. In 2014, the US Department of Defense
listed it as one of the six major disruptive technologies for priority development in the 21st century; in the third technical forecast completed in 2014, China listed synthetic biotechnology as one of the top ten breakthrough technologies.
. Moreover, in the “13th Five-Year Plan” for scientific and technological innovation strategic planning, synthetic biotechnology has been listed as a strategic forward-looking key development direction.
THE FOURTH PUSH: EFFICIENT PATH SEARCHER - ALPHA ANT
Original intention: Our project pathlab was inspired by the previous tongji software project alpha ant. Before introducing pathlab, we wanted the reader to first understand the alpha ant and related path search knowledge.
Main content: Alpha Ant is essentially a computational tool for pathway design and reconstruction. Allowing users to turn on Alpha Ant's effective and powerful path design guide in the face of the vast passages will clarify
their choice. Alpha Ant represents an efficient and convenient path building tool. Alpha means "origination." In fact, Alpha Ant is the first software to be equipped with an integrated ranking standard. Alpha Ant means that it
can find the most effective metabolic pathway connecting two molecules, just like the biological wisdom of an ant colony. Once food is discovered by scouts, it can be quickly organized to find the most effective source of food.
So use ants to represent efficient signal detectors and path searchers.
THE FIFTH PUSH: PATH SEARCH 2.0 - INTEGRATED SERVICE PLATFORM PATHLAB
Main content: Pathlab is a comprehensive platform for channel design, which is mainly used for brainstorming in the early stage of determining the topic. When the user knows the product he wants or the substrate he can use, Path search, enzyme selection, and component search can be performed through Pathlab. In addition to the functions of these backbones, we also have functions such as word cloud, data update, and data upload to assist users in their use.
Charming points:
1. Optimize on the basis of dfs algorithm, adopt greedy (greedy) algorithm, and make a selection in each step, which is optimal.
2. codon optimization, improve the efficiency of enzyme expression in the plasmid
3. modular design, each part can be split and used separately
4. depth information, to provide users with newer research progress of each enzyme
XIANG MING HIGH SCHOOL
In the early stage of the team, we represented for 2019 Tongji_Software team to give an introduction of Alpha Ant, the project of 2018 Tongji_Software, to the high school students of Xiangming High School.
We aimed at making those who are going to enter university have a general idea of iGEM and synthetic biology by making project presentations. Meanwhile, we encouraged them to take part in the iGEM competition, because
they can learn many interesting and useful things by engaging themselves to the whole process of iGEM. Through this presentation, we found that those high school students showed great interests in iGEM and synthetic biology,
and they also had some fresh ideas about synthetic biology and the project. For example, they asked whether there are connections between synthetic pathway of biology and organic synthesis of chemistry, and they were interested
in the possibility of using machines or robots to simulate the biology pathways in reality.
This presentation, for our team, is the first human practice activity, and the key to this human practice is a review and conclusion of Alpha Ant, so as to have a clearer understanding of the whole project process and a deeper understanding of iGEM. Through this human practice, we realized the importance of biology simulation and the necessity of using computers to simulate bacteria to achieve the goal of reducing costs.
PRESENTATION IN TONGJI UNIVERSITY
The second presentation mainly introduced the status of bioinformatics in life science, the functions of bioinformatics in iGEM and how to use the knowledge of bioinformatics to construct a software about synthetic biology in iGEM.
This presentation made us have a new understanding of bioinformatics, and understand the application of bioinformatics in synthetic biology. Meanwhile, in the process of preparing, we also organized the construction of software，to
prepare for the later construction of software.
Firstly, we raised questions and divided these questions into parts, then we read related literature and discussed about the solutions, and in the process of finding solutions, we collected and cleared up useful data, built
models to solve it, and we set up visual platform to make abstract problems more concrete. The interesting combination of codes in bioinformatics attracted students to join in the study of bioinformatics. The participation of software
teams in iGEM competition also makes them see the wide application of bioinformatics and more motivated for them to learn. At the same time, in this presentation, we raised a question to the students about how to do the sequence
alignment, and some of them thought that we can do the alignment from the beginning or the end of the sequences.
Although the students didn’t take many aspects into consideration, their different opinions on the same question inspired us to continue to try different algorithms, continuously optimize.