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

(Replaced content with "<html> <head> <meta http-equiv="refresh" content="0.2;url=https://2019.igem.org/Team:Tongji_Software/Project#Demonstrate"> </head> <body> </body> </html>")
 
(16 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{Tongji_Software/css/MenuStyle_css}}
+
<html>
<html lang="en" class="no-js">
+
 
+
 
<head>
 
<head>
    <meta charset="UTF-8">
+
<meta http-equiv="refresh" content="0.2;url=https://2019.igem.org/Team:Tongji_Software/Project#Demonstrate">
    <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>
+
        *::-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;
+
        }
+
        /* --------------------------------
+
 
+
Primary style
+
 
+
 
+
-------------------------------- */
+
       
+
        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>
+
 
</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>
 
 
                <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="gap_qq"></div>
 
                <img src="../images/question_round.png" alt="question_icon" class="icon_question">
 
                <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>
 
 
                <div class="gap_qq"></div>
 
                <img src="../images/question_round.png" alt="question_icon" class="icon_question">
 
                <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>
 
 
            </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>

Latest revision as of 17:00, 17 October 2019