Difference between revisions of "Team:Tongji Software/Demonstrate"

(Prototype team page)
 
Line 1: Line 1:
−
{{Tongji_Software}}
+
{{Tongji_Software/css/MenuStyle_css}}
−
<html>
+
<html lang="en" class="no-js">
  
 +
<head>
 +
    <meta charset="UTF-8">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1">
 +
    <script src="https://2019.igem.org/Template:Tongji_Software/js/ProjectModernizr_js?action=raw&ctype=text/javascript"></script>
 +
    <title>Safety</title>
 +
    <style>
 +
        /* --------------------------------
  
 +
Primary style
  
−
<div class="column full_size judges-will-not-evaluate">
 
−
<h3>★  ALERT! </h3>
 
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2019.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2019.igem.org/Judging/Awards"> award listed below</a>. </p>
 
−
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2019.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
 
−
</div>
 
  
 +
-------------------------------- */
 +
       
 +
        html * {
 +
            -webkit-font-smoothing: antialiased;
 +
            -moz-osx-font-smoothing: grayscale;
 +
        }
 +
       
 +
        *,
 +
        *:after,
 +
        *:before {
 +
            -webkit-box-sizing: border-box;
 +
            -moz-box-sizing: border-box;
 +
            box-sizing: border-box;
 +
        }
 +
       
 +
        body {
 +
            font-size: 100%;
 +
            font-family: Ubuntu, sans-serif;
 +
            /*color: #3e3947;*/
 +
            color: white;
 +
            background-color: white;
 +
        }
 +
       
 +
        body,
 +
        html {
 +
            height: 100%;
 +
        }
 +
       
 +
        a {
 +
            color: #3e3947;
 +
            text-decoration: none;
 +
        }
 +
       
 +
        img {
 +
            max-width: 100%;
 +
        }
 +
        /* --------------------------------
  
−
<div class="clear"></div>
+
Modules - reusable parts of our design
  
 +
-------------------------------- */
 +
       
 +
        .cd-img-replace {
 +
            /* replace text with a background-image */
 +
            display: inline-block;
 +
            overflow: hidden;
 +
            text-indent: 100%;
 +
            white-space: nowrap;
 +
        }
 +
        /* --------------------------------
  
 +
Main components
  
−
<div class="column full_size">
+
-------------------------------- */
−
<h1>Demonstrate</h1>
+
        /*
−
<h3>Gold Medal Criterion #4</h3>
+
1em -> 16px -> 1.1vw
 +
1px -> 0.06875vw
 +
950px -> 65.5vw --- width of SectionContianer
 +
*/
 +
        /*整体的section*/
 +
       
 +
        #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;
 +
        }
 +
       
 +
        #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;
 +
        }
 +
        /*加大的首字母*/
 +
       
 +
        #SectionContainer .cd-section b {
 +
            position: relative;
 +
            font-weight: 500;
 +
            font-size: 1.4em;
 +
            overflow: unset;
 +
        }
 +
        /*总标题*/
 +
       
 +
        #SectionContainer .cd-section #SafetyMainTitle {
 +
            color: white;
 +
            font-weight: bold;
 +
            font-size: 3.5vw;
 +
            /*50px*/
 +
            position: relative;
 +
            bottom: auto;
 +
            padding-bottom: 1.2em;
 +
        }
 +
        /*问题*/
 +
       
 +
        #SectionContainer .cd-section .question:not(#question1) {
 +
            color: white;
 +
            font-weight: 500;
 +
            font-size: 2.1vw;
 +
            /*31px*/
 +
            position: relative;
 +
            bottom: auto;
 +
            /*padding-top: 6em;*/
 +
        }
 +
       
 +
        #SectionContainer .cd-section #question1 {
 +
            color: white;
 +
            font-weight: 500;
 +
            font-size: 2.1vw;
 +
            /*31px*/
 +
            position: relative;
 +
            bottom: auto;
 +
            /*padding-top: 20vh;*/
 +
            padding-left: 20px;
 +
        }
 +
        /*回答*/
 +
       
 +
        #SectionContainer .cd-section .answer {
 +
            padding-left: 20vw;
 +
            width: 60vw;
 +
            text-align: justify;
 +
            position: relative;
 +
            color: white;
 +
            padding-bottom: 1em;
 +
            font-size: 1.5vw;
 +
            /*22px*/
 +
        }
 +
        /*每个问题间间距*/
 +
       
 +
        #SectionContainer .cd-section .gap_qq {
 +
            height: 8em;
 +
        }
 +
       
 +
        #SectionContainer .cd-section #gap_qq1 {
 +
            height: 20vh;
 +
        }
 +
       
 +
        #SectionContainer .cd-section .gap_qa {
 +
            height: 2.5em;
 +
        }
 +
       
 +
        #SectionContainer .cd-section p {
 +
            position: relative;
 +
            line-height: 1.6;
 +
        }
 +
       
 +
        #SectionContainer .cd-section .icon_question {
 +
            float: left;
 +
            width: 4vw;
 +
            margin-right: 15px;
 +
        }
 +
       
 +
        #SectionContainer .cd-section .icon_answer {
 +
            float: right;
 +
            width: 4vw;
 +
            margin-left: 15px;
 +
        }
 +
        /*/*/
 +
       
 +
        @media only screen and (min-width: 768px) {
 +
            /*p的字体设置*/
 +
            #SectionContainer .cd-section p {
 +
                /*font-size: 1px;*/
 +
                font-size: 1.1vw;
 +
                /*1em*/
 +
                color: white;
 +
                /*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: 0.9vw;
 +
            /*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: 0.6vw;
 +
            /*10px/
 +
  /*padding: .4em .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;
 +
            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;
 +
            }
 +
        }
 +
    </style>
 +
</head>
  
−
<p>
+
<body>
−
Teams that can show their system working under real world conditions are usually good at impressing the judges in iGEM. To achieve gold medal criterion #4, convince the judges that your engineered system works.
+
    <div style="position:absolute; margin:0vh 0vw 0vh -10px; width:100vw; color:white" id="section">
−
<br><br>
+
        <div id="SectionContainer">
−
Your engineered system has to work under realistic conditions. Your system must comply with all <a href="https://2019.igem.org/Safety/Rules">rules</a> and <a href="https://2019.igem.org/Safety/Policies">policies</a> approved by the iGEM Safety Committee. Your system can derive from or make functional a previous iGEM project by your team or by another team. For multi-component projects, the judges may consider the function of individual components.
+
            <section class="cd-section">
 +
                <h1 id="SafetyMainTitle"><b>S</b>AFETY</h1>
  
−
</p>
+
                <div id="gap_qq1"></div>
 +
                <img src="../images/question_round.png" alt="question_icon" class="icon_question">
 +
                <p class="question" id="question1"><b>W</b>ho will use Pathlab?</p>
 +
                <div class="gap_qa"></div>
 +
                <img src="../images/answer.png" alt="answer_icon" class="icon_answer">
 +
                <p class="answer" style="text-align: right">iGEMers or Synthetic biologist.</p>
  
−
<p>
+
                <div class="gap_qq"></div>
−
To be eligible for this award, you must add clear documentation to this page and delete the alert box at the top of this page.
+
                <img src="../images/question_round.png" alt="question_icon" class="icon_question">
−
</p>
+
                <p class="question"><b>W</b>ill Pathlab harm human body or the environment?</p>
 +
                <div class="gap_qa"></div>
 +
                <img src="../images/answer.png" alt="answer_icon" class="icon_answer">
 +
                <p class="answer">Pathlab runs on a computer only. So, it does no harm to human body and the environment.</p>
  
−
<p>
+
                <div class="gap_qq"></div>
−
Please see the <a href="https://2019.igem.org/Judging/Medals">2019 Medals Page</a> for more information.
+
                <img src="../images/question_round.png" alt="question_icon" class="icon_question">
−
</p>
+
                <p class="question"><b>H</b>ow does Pathlab deal with users’ personal information?</p>
−
 
+
                <div class="gap_qa"></div>
−
 
+
                <img src="../images/answer.png" alt="answer_icon" class="icon_answer">
−
 
+
                <p class="answer">Pathlab has neat data format, which means users have no need to upload or download any files. Meanwhile, users’ search record will not be collected, so there is no risk of information exposure.</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/ProjectMain_js?action=raw&ctype=text/javascript"></script>
 +
        <!-- Resource jQuery -->
 +
    </div>
 +
</body>
  
 
</html>
 
</html>

Revision as of 15:12, 10 October 2019

Tongji Software | Pathlab

Safety

SAFETY

question_icon

Who will use Pathlab?

answer_icon

iGEMers or Synthetic biologist.

question_icon

Will Pathlab harm human body or the environment?

answer_icon

Pathlab runs on a computer only. So, it does no harm to human body and the environment.

question_icon

How does Pathlab deal with users’ personal information?

answer_icon

Pathlab has neat data format, which means users have no need to upload or download any files. Meanwhile, users’ search record will not be collected, so there is no risk of information exposure.