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

Line 1: Line 1:
−
{{Tongji_Software/CSS}}
+
{{Tongji_Software/css/MenuStyle_css}}
−
<html>
+
<html lang="en" class="no-js">
 +
 
 
<head>
 
<head>
−
     <title>test</title>
+
    <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>
 
     <style>
 +
        *::-webkit-scrollbar {
 +
            display: none;
 +
        }
 +
       
 +
        html,
 +
        body,
 +
        div,
 +
        span,
 +
        applet,
 +
        object,
 +
        iframe,
 +
        h1,
 +
        h2,
 +
        h3,
 +
        h4,
 +
        h5,
 +
        h6,
 +
        p,
 +
        blockquote,
 +
        pre,
 +
        a,
 +
        abbr,
 +
        acronym,
 +
        address,
 +
        big,
 +
        cite,
 +
        code,
 +
        del,
 +
        dfn,
 +
        em,
 +
        img,
 +
        ins,
 +
        kbd,
 +
        q,
 +
        s,
 +
        samp,
 +
        small,
 +
        strike,
 +
        strong,
 +
        sub,
 +
        sup,
 +
        tt,
 +
        var,
 +
        b,
 +
        u,
 +
        i,
 +
        center,
 +
        dl,
 +
        dt,
 +
        dd,
 +
        ol,
 +
        ul,
 +
        li,
 +
        fieldset,
 +
        form,
 +
        label,
 +
        legend,
 +
        table,
 +
        caption,
 +
        tbody,
 +
        tfoot,
 +
        thead,
 +
        tr,
 +
        th,
 +
        td,
 +
        article,
 +
        aside,
 +
        canvas,
 +
        details,
 +
        embed,
 +
        figure,
 +
        figcaption,
 +
        footer,
 +
        header,
 +
        hgroup,
 +
        menu,
 +
        nav,
 +
        output,
 +
        ruby,
 +
        section,
 +
        summary,
 +
        time,
 +
        mark,
 +
        audio,
 +
        video {
 +
            margin: 0;
 +
            padding: 0;
 +
            border: 0;
 +
            /*font-size: 100%;*/
 +
            font: inherit;
 +
            vertical-align: baseline;
 +
        }
 +
        /* HTML5 display-role reset for older browsers */
 +
       
 +
        article,
 +
        aside,
 +
        details,
 +
        figcaption,
 +
        figure,
 +
        footer,
 +
        header,
 +
        hgroup,
 +
        menu,
 +
        nav,
 +
        section,
 +
        main {
 +
            display: block;
 +
        }
 +
       
 +
        body {
 +
            line-height: 1;
 +
        }
 +
       
 +
        ol,
 +
        ul {
 +
            list-style: none;
 +
        }
 +
       
 +
        blockquote,
 +
        q {
 +
            quotes: none;
 +
        }
 +
       
 +
        blockquote:before,
 +
        blockquote:after,
 +
        q:before,
 +
        q:after {
 +
            content: '';
 +
            content: none;
 +
        }
 +
       
 +
        table {
 +
            border-collapse: collapse;
 +
            border-spacing: 0;
 +
        }
 +
        /* --------------------------------
  
−
        .homebg1 {background-image: url(https://static.igem.org/mediawiki/2019/e/ec/T--Tongji_Software--homebg1.jpeg); background-size:cover; height:100vh; width:100%; }
+
Primary style
−
.homebg2 {display: table;background-size:cover; height:100vh; width:100%;background: url(https://static.igem.org/mediawiki/2019/3/3e/T--Tongji_Software--homebg2.jpeg) no-repeat bottom center;}
+
−
.homebg3 {display: table;background-size:cover; height:100vh; width:100%;;background: url(https://static.igem.org/mediawiki/2019/0/07/T--Tongji_Software--homebg3.jpeg) no-repeat bottom center;}
+
  
  
 +
-------------------------------- */
 +
       
 +
        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%;
 +
        }
 +
        /* --------------------------------
 +
 +
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
 +
 +
-------------------------------- */
 +
        /*
 +
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;
 +
            overflow: unset;
 +
        }
 +
        /*问题*/
 +
       
 +
        #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>
 
     </style>
 
</head>
 
</head>
  
 
<body>
 
<body>
 +
    <div style="position:absolute; margin:0vh 0vw 0vh -10px; width:100vw; color:white" id="section">
 +
        <div id="SectionContainer">
 +
            <section class="cd-section">
 +
                <h1 id="SafetyMainTitle"><b>S</b>AFETY</h1>
  
−
<!--content-->
+
                <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>
  
−
    <div class="homebg1">  
+
                <div class="gap_qq"></div>
−
    <p style="padding:150px 0 5px 600px"><font size="7">PathLab</font></p>
+
                <img src="../images/question_round.png" alt="question_icon" class="icon_question">
−
<p style="padding:10px 0 5px 600px"><font size="4">brief introduction</font></p>
+
                <p class="question"><b>W</b>ill Pathlab harm human body or the environment?</p>
−
    </div>
+
                <div class="gap_qa"></div>
−
  <div class="homebg2">
+
                <img src="../images/answer.png" alt="answer_icon" class="icon_answer">
−
    <p>problems while building a pathway to get products</p>
+
                <p class="answer">Pathlab runs on a computer only. So, it does no harm to human body and the environment.</p>
−
<p>brief introduction</p>
+
−
</div>
+
−
<div class="homebg3">
+
−
    <p>pathlab solve the problems</p>
+
−
<p>brief introduction</p>
+
−
</div>
+
  
−
    <script>
+
                <div class="gap_qq"></div>
−
        $(window).scroll(function () {
+
                <img src="../images/question_round.png" alt="question_icon" class="icon_question">
−
            if ($(".navbar").offset().top > 50) {$(".navbar-fixed-top").addClass("top-nav");
+
                <p class="question"><b>H</b>ow does Pathlab deal with users’ personal information?</p>
−
            }else {$(".navbar-fixed-top").removeClass("top-nav");}
+
                <div class="gap_qa"></div>
−
         })</script>
+
                <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>
 +
 
 +
            </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>
 
</body>
 +
 
</html>
 
</html>

Revision as of 07:00, 18 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.