Difference between revisions of "Template:Tongji Software/dist/ProjectIndex html"

Line 5: Line 5:
 
         <title>PROJECT</title>
 
         <title>PROJECT</title>
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<meta name="viewport" content="width=device-width, initial-scale=1">
−
         <style>    
+
         <style>
−
            *::-webkit-scrollbar {
+
                    *::-webkit-scrollbar {
 
                 display: none;
 
                 display: none;
 
             }
 
             }
Line 29: Line 29:
 
                 /*font: inherit;*/
 
                 /*font: inherit;*/
 
                 vertical-align: baseline;
 
                 vertical-align: baseline;
−
                overflow: unset;
 
 
             }
 
             }
 
             /* HTML5 display-role reset for older browsers */
 
             /* HTML5 display-role reset for older browsers */
Line 110: Line 109:
 
             -------------------------------- */
 
             -------------------------------- */
 
             /*整体的section*/
 
             /*整体的section*/
−
             .cd-section {
+
             #section{
 
                 min-height: 100%;
 
                 min-height: 100%;
 
                 position: relative;
 
                 position: relative;
Line 118: Line 117:
 
                 /*: "Ubuntu", sans-serif;*/
 
                 /*: "Ubuntu", sans-serif;*/
 
             }
 
             }
−
             .cd-section:nth-of-type(odd) {
+
             #section:nth-of-type(odd) {
 
                 background-color: #3e3947;
 
                 background-color: #3e3947;
 
                 /*font-family: "Ubuntu", sans-serif;*/
 
                 /*font-family: "Ubuntu", sans-serif;*/
 
             }
 
             }
−
            /* .cd-section:nth-of-type(odd) p {
 
−
                /*color: #898099;*/
 
−
                color: white;
 
−
                /*font-family: "Ubuntu", sans-serif;*/
 
−
            } */
 
−
 
 
 
             #section:nth-of-type(odd) p {
 
             #section:nth-of-type(odd) p {
 
                 /*color: #898099;*/
 
                 /*color: #898099;*/
Line 137: Line 130:
 
                 /*font-family: "Ubuntu", sans-serif;*/
 
                 /*font-family: "Ubuntu", sans-serif;*/
 
             }
 
             }
−
          #section:nth-of-type(even) p {
+
            #section:nth-of-type(even) p {
 
                 /*color: #d0dde4;*/
 
                 /*color: #d0dde4;*/
 
                 color: white;
 
                 color: white;
 
                 /*font-family: "Ubuntu", sans-serif;*/
 
                 /*font-family: "Ubuntu", sans-serif;*/
 
             }
 
             }
−
 
+
            /*#sectionh1{
 +
                position: relative;
 +
                bottom: auto;
 +
                padding-bottom: 1.2em;
 +
            }*/
 +
            /*#section.TextContainer{
 +
                padding-left: 2em;
 +
            }*/
 
             /*每个推送的标题*/
 
             /*每个推送的标题*/
−
             #section p.PushTitle{
+
             #sectionp.PushTitle{
 
                 position: relative;
 
                 position: relative;
 
                 /*padding: 1em 0.5em 0.5em 0.5em;*/
 
                 /*padding: 1em 0.5em 0.5em 0.5em;*/
Line 154: Line 154:
 
                 font-size: 22px;
 
                 font-size: 22px;
 
             }
 
             }
−
             #section p{
+
             #sectionp{
 
                 position: relative;
 
                 position: relative;
−
                font-size: 1em;
 
 
                 /*top: 3em;*/
 
                 /*top: 3em;*/
 
             }
 
             }
 
             /*加大的首字母*/
 
             /*加大的首字母*/
−
             #section b{
+
             #sectionb{
 
                 position: relative;
 
                 position: relative;
 
                 font-weight: 500;
 
                 font-weight: 500;
Line 166: Line 165:
 
             }
 
             }
 
             /*总标题*/
 
             /*总标题*/
−
             .cd-section #EduMainTitle{
+
             #section#EduMainTitle{
 
                 color: white;
 
                 color: white;
 
                 font-weight: bold;
 
                 font-weight: bold;
−
                 font-size: 40px;
+
                 font-size: 50px;
 
                 position: relative;
 
                 position: relative;
 
                 bottom: auto;
 
                 bottom: auto;
Line 175: Line 174:
 
             }
 
             }
 
             /*三个部分的大标题*/
 
             /*三个部分的大标题*/
−
             #section h1.EduSubTitle:not(#EduSubTitle1) {
+
             #sectionh1.EduSubTitle:not(#EduSubTitle1) {
 
                 color: white;
 
                 color: white;
 
                 font-weight: 500;
 
                 font-weight: 500;
Line 184: Line 183:
 
              
 
              
 
             }
 
             }
−
             #section h1#EduSubTitle1{
+
             #sectionh1#EduSubTitle1{
 
                 color: white;
 
                 color: white;
 
                 font-weight: 500;
 
                 font-weight: 500;
Line 193: Line 192:
 
                 /*padding-top: 2em;*/
 
                 /*padding-top: 2em;*/
 
             }
 
             }
 +
           
 +
            #sectionp {
 +
                line-height: 1.6;
 +
            }
 +
            #sectionimg.PushImage{
 +
                display: block;
 +
                margin: 0 auto;
 +
                padding-bottom: 10px;
 +
                padding-top: 10px;
 +
                /*padding-right: 15px;*/
 +
                /*width: 480px;
 +
                height: 210px;*/
 +
            }
 +
            #section#ImageTable{
 +
                margin: 0 auto;
 +
                /*padding-left: 50px;*/
 +
                padding-top: 20px;
 +
            }
 +
            #section#PushTableImage1{
 +
                padding-right: 15px;
 +
            }
 +
            #section#PushImage4{
 +
                float: right;
 +
                padding-left: 20px;
 +
                padding-right: 10px;
 +
            }
 +
            #section.CharmingPoint{
 +
                padding-left: 4em;
 +
            }
 +
            #section#highschool{
 +
                float: right;
 +
                padding-left: 20px;
 +
                padding-right: 10px;
 +
                top:5em;
 +
            }
 +
           
 +
           
 +
           
 +
            /*/*/
 
             @media only screen and (min-width: 768px) {
 
             @media only screen and (min-width: 768px) {
−
                 /*.cd-section h1 {
+
                 /*#sectionh1 {
 
                 font-size: 30px;
 
                 font-size: 30px;
 
                 font-size: 1.875rem;
 
                 font-size: 1.875rem;
 
                 }*/
 
                 }*/
−
              #section p {
+
                #sectionp {
 
                 /*font-size: 1px;*/
 
                 /*font-size: 1px;*/
 
                 font-size: 1em;
 
                 font-size: 1em;
 
                 color: white;
 
                 color: white;
 
                 /*line-height: 2;*/
 
                 /*line-height: 2;*/
−
                 }  
+
                }
 +
            }
 +
           
 +
            .cd-scroll-down {
 +
                position: absolute;
 +
                left: 50%;
 +
                right: auto;
 +
                -webkit-transform: translateX(-50%);
 +
                -moz-transform: translateX(-50%);
 +
                -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-nav-trigger {
 +
                display: none;
 +
            }
 +
           
 +
            .no-touch #cd-vertical-nav {
 +
                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;
 +
            }
 +
            .no-touch #cd-vertical-nav li {
 +
                text-align: right;
 +
            }
 +
            .no-touch #cd-vertical-nav a {
 +
                display: inline-block;
 +
                /* prevent weird movements on hover when you use a CSS3 transformation - webkit browsers */
 +
                -webkit-backface-visibility: hidden;
 +
                backface-visibility: hidden;
 +
            }
 +
            .no-touch #cd-vertical-nav a:after {
 +
                content: "";
 +
                display: table;
 +
                clear: both;
 +
            }
 +
            .no-touch #cd-vertical-nav a span {
 +
                float: right;
 +
                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);
 +
            }
 +
            .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);
 +
            }
 +
           
 +
            .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;*/
 +
            /*}*/
 +
           
 +
           
 +
            .no-touch #cd-vertical-nav a.is-selected .cd-label {
 +
                opacity: 1;
 +
            }
 +
           
 +
           
 +
            .no-touch #cd-vertical-nav a.is-selected .cd-dot {
 +
                /*点到达时的颜色*/
 +
                background-color: white;
 +
            }
 +
            .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: 13px;
 +
                height: 12px;
 +
                width: 12px;
 +
                border-radius: 50%;
 +
                /*点未到达时的颜色*/
 +
                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: 10px;
 +
                /*padding: .4em .5em;*/
 +
                padding: 0;
 +
                color: white;
 +
                font-size: 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;
 +
                height: 4px;
 +
                width: 4px;
 +
                background-color: #3e3947;
 +
                border-radius: 50%;
 +
                left: 50%;
 +
                top: 50%;
 +
                bottom: auto;
 +
                right: auto;
 +
                -webkit-transform: translateX(-50%) translateY(-50%);
 +
                -moz-transform: translateX(-50%) translateY(-50%);
 +
                -ms-transform: translateX(-50%) translateY(-50%);
 +
                -o-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;
 +
            }
 +
            .touch .cd-nav-trigger span::after {
 +
                bottom: -9px;
 +
            }
 +
           
 +
            .touch #cd-vertical-nav {
 +
                position: fixed;
 +
                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);
 +
            }
 +
            .touch #cd-vertical-nav a {
 +
                display: block;
 +
                padding: 1em;
 +
                border-bottom: 1px solid rgba(62, 57, 71, 0.1);
 +
            }
 +
            .touch #cd-vertical-nav a span:first-child {
 +
                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;
 +
                 }
 
             }
 
             }
−
        /* scroll style  */
 
−
       
 
 
         </style>
 
         </style>
 
</head>
 
</head>
 
<body>  
 
<body>  
 
<div style="position:absolute; z-index:0.5; margin:20px 0px 0px 24px;width:100vw;color:white;" id="section">
 
<div style="position:absolute; z-index:0.5; margin:20px 0px 0px 24px;width:100vw;color:white;" id="section">
−
          
+
         <nav id="cd-vertical-nav">
 +
<ul>
 +
<li>
 +
<a href="#section1" data-number="1">
 +
<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>
 
         <section id="section1" class="cd-section">
 
         <section id="section1" class="cd-section">
 
<h1 id="EduMainTitle">Education & Engagement</h1>
 
<h1 id="EduMainTitle">Education & Engagement</h1>

Revision as of 02:45, 7 October 2019

Tongji Software | Pathlab

PROJECT
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.










PublicNumberPicture1




THE FIRST PUSH: PROGRAMMER (BALD) iGEMER IS ONLINE



PushImage

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

second push 1 second push 2

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

fourth push

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.
&nbsp&nbsp&nbsp&nbspCharming 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