Difference between revisions of "Team:SCUT-China/Safety"

(Prototype team page)
 
Line 1: Line 1:
{{IGEM_TopBar}}
+
{{SCUT-China/CSS-header}}
{{SCUT-China}}
+
{{SCUT-China/CSS-TTF}}
 +
 
 +
 
 
<html>
 
<html>
 +
<head>
 +
 +
  <meta charset="utf-8">
 +
  <title></title>
 +
  <!-- 4444444444444444444444此处上传时需要删除44444444444444444 -->
 +
  <link rel="stylesheet" href="css/style.css">
 +
  <link rel="stylesheet" href="css/style-content.css">
 +
  <link rel="stylesheet" href="css/style_ttc_p.css">
 +
  <!-- 4444444444444444444444此处上传时需要删除44444444444444444 -->
 +
 +
 +
 +
 +
      <style media="screen">
 +
        #top_title{ display:none; }
 +
        #content { padding:0px; width:100%; margin-top:-7px; margin-left:0px; border:none;}
 +
      body, html {background-color:#ececea; width: 100%; height: 100%;scroll-behavior: smooth;}
 +
          body::-webkit-scrollbar{
 +
            display: none;
 +
        }
 +
 +
  /* 左侧导航栏样式 */
 +
  #bodyContent h2{
 +
    padding:10px;
 +
  }
 +
  /* css */
 +
  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;
 +
  }
 +
 +
  /* HTML5 display-role reset for older browsers */
 +
  article, aside, details, figcaption, figure,
 +
  footer, header, hgroup, menu, nav, section {
 +
      display: block;
 +
  }
 +
  body{
 +
    line-height: 1.5;
 +
  }
 +
  .middle{
 +
    background: #f4f3ee;
 +
    }
 +
  .middle_img{
 +
    width:100%;
 +
    height:100%;
 +
    background-color:rgba(0,0,0,0);
 +
    background:url("https://static.igem.org/mediawiki/2021/2/2f/T--SCUT-China--description-0.png") ;
 +
    background-size: 100% 100%;
 +
    background-attachment: fixed;
 +
    z-index: -1;
 +
    /* border-radius: 300px; */
 +
    /* background: #154889; */
 +
    overflow: hidden;
 +
  }
 +
 +
  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;
 +
  }
 +
  .left{
 +
    width: 25%;
 +
    height:auto;
 +
    float: left;
 +
    background:#ececea ;
 +
  }
 +
  .right{
 +
    width: 75%;
 +
    float: left;
 +
    z-index: 0;
 +
    background: #ececea;
 +
  }
 +
 +
  .siderBar{
 +
    /* 更改鼠标设置图片-------------------------------------------------------------------- */
 +
    /* cursor:url('img/youzi_jiantou-1.png'),auto; */
 +
    width: 95%;
 +
  }
 +
  #nav{
 +
    background: #ececea ;
 +
    top: 20px;
 +
    /* margin-top: 13%; */
 +
  }
 +
  #nav li{
 +
    margin-top: 10px;
 +
      width: 95%;
 +
      /* height: 50px; */
 +
      line-height: 25px;
 +
      text-align: center;
 +
      line-height:25px;
 +
      color: #2C2C2C;
 +
      margin-bottom: 10px;
 +
      padding-top:8px;
 +
      cursor: pointer;
 +
      font-family: 'H2_text';
 +
      font-weight:200;
 +
      font-size: 19px;
 +
      transition: all 0.2s ease;
 +
      -webkit-transition: all 0.2s ease;
 +
      -moz-transition: all 0.2s ease;
 +
  }
 +
  #nav li a{
 +
    padding-top: 15px;
 +
    color:#2C2C2C;
 +
    text-decoration:none;
 +
  }
 +
  #nav li a_nav{
 +
    margin-left: 20px;
 +
    padding-top: 20px;
 +
  }
 +
 +
  /* #nav li a:hover > img{
 +
    visibility:visible;
 +
  } */
 +
  #nav li.on{
 +
      background:#dad9d5;
 +
  }
 +
 +
 +
  #right-nav li a img{
 +
    width: 30px;
 +
    height: auto;
 +
    float: right;
 +
    margin-right: 10px;
 +
  }
 +
  #right-nav {
 +
    position: fixed;
 +
    right: 0px;
 +
    bottom: 50px;
 +
 +
  }
 +
  #right-nav li {
 +
        width: 167px;
 +
        height: 32px;
 +
        line-height: 32px;
 +
        text-align: center;
 +
        color: #ffffff;
 +
        margin-bottom: 5px;
 +
        background: url("images/side-nav-bg.jpg") no-repeat;
 +
        cursor: pointer;
 +
        transition: all 0.2s ease;
 +
        -webkit-transition: all 0.2s ease;
 +
        -moz-transition: all 0.2s ease;
 +
  }
 +
  #right-nav li.on{
 +
      transform: translate(-34px);
 +
      -webkit-transform: translate(-34px);
 +
      -moz-transform: translate(-34px);
 +
 +
  }
 +
  </style>
 +
 +
  <!-- 0000000000000000000000000000000000000右侧工具栏000000000000000000000000000000000 -->
 +
  <!-- 0000000000000000000000000000000000000右侧工具栏000000000000000000000000000000000 -->
 +
  <style>
 +
  .card-wrapper a:link,
 +
  .card-wrapper a:hover,
 +
  .card-wrapper a:visited,
 +
  .card-wrapper a:active {
 +
  color: #fff;
 +
  text-decoration: none;
 +
  }
 +
 +
  .card-holder {
 +
  position: fixed;
 +
  z-index: 9999;
 +
  width: 0px;
 +
  overflow: visible;
 +
  visibility: hidden;
 +
  }
 +
 +
  .card-wrapper {
 +
  display: inline-block;
 +
  float: left;
 +
  clear: both;
 +
  }
 +
 +
  .card {
 +
  position: relative;
 +
  right: 32px;
 +
  padding: 8px 32px 8px 32px;
 +
  margin: 8px;
 +
  x-box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.5);
 +
  box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.5);
 +
  background: #fff;
 +
  transition: all 0.3s ease-in-out 0.1s;
 +
  }
 +
  .card_img {
 +
  position: relative;
 +
  right: 25px;
 +
  width:40px;
 +
  height:40px;
 +
  magin:10px;
 +
  bottom: -10px;
 +
  x-box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.5);
 +
  box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.5);
 +
  background:rgba(0, 0, 0, 0);
 +
  }
 +
  .card-wrapper img{
 +
  margin-right: 32px;
 +
  width:100%;
 +
  height:auto;
 +
 +
  }
 +
 +
  .card:hover {
 +
  position: relative;
 +
  right: 100%;
 +
  margin-right: -32px;
 +
  box-shadow:
 +
  0 -8px 8px -8px rgba(0, 0, 0, 0.5),
 +
  0 8px 8px -8px rgba(0, 0, 0, 0.5);
 +
  transition: all 0.3s ease-in-out;
 +
  }
 +
 +
  .card-content {
 +
  display: inline-block;
 +
  color: #fff;
 +
  font-family: 'p_text';
 +
  font-size: 16px;
 +
  font-weight:450;
 +
  white-space: nowrap;
 +
  margin-right: 10px;
 +
  }
 +
 +
  .bg-01 { background: #539770; }
 +
  .bg-02 { background: #4B7D74; }
 +
  .bg-03 { background: #8DC2BC; }
 +
  .bg-04 { background: #EDD6B4; }
 +
  .bg-05 { background: #BE7467; }
 +
  .bg-06 { background: #E2AE63; }
 +
 +
  .card-right{
 +
  z-index: 999;
 +
  }
 +
  </style>
 +
  <!-- 0000000000000000000000000000000000000正文内容0000000000000000000000000000000 -->
 +
  <style>
 +
  .main_div{
 +
    background: #ececea;
 +
    display:inline-block;
 +
  }
 +
  #wrap{
 +
      width: 100%;
 +
  }
 +
  #wrap div{
 +
      /* width: 100%; */
 +
      /* height:auto; */
 +
      /* height: 500px; */
 +
  }
 +
  #content_part{
 +
    display:inline-block;
 +
    margin-top:10px;
 +
    margin-bottom: 15px;
 +
    /* background: #f4f3ee; */
 +
  }
 +
  #hrmar{
 +
      background: #f4f3ee;
 +
      height: auto;
 +
      margin-top:30px;
 +
      margin-right: 40px;
 +
      margin-bottom: 10px;
 +
      color:#333;
 +
 +
      filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);
 +
 +
      -moz-box-shadow: 2px 2px 10px #909090;
 +
 +
      -webkit-box-shadow: 2px 2px 10px #909090;
 +
 +
      box-shadow:2px 2px 10px #909090;
 +
  }
 +
  .content_div_img_description{
 +
    margin: 10px;
 +
    text-align: center;
 +
    justify-content: center;
 +
    display: flex;
 +
    /* width: 900px;
 +
    height: 500px; */
 +
 +
  }
 +
  .content_div_img_description img{
 +
    width:85%;
 +
    height:auto;
 +
  }
 +
 +
  .content_text_h2{
 +
    text-align: left;
 +
    margin-left: 70px;
 +
    margin-top: 10px;
 +
    font-size: 25px;
 +
    font-family:"H2_text";
 +
  }
 +
  .content_div_text{
 +
    letter-spacing: 0.4px;
 +
    margin: 20px;
 +
    padding-left:100px;
 +
    padding-right:100px;
 +
    /* text-align:center; */
 +
    float: left;
 +
    line-height: 1.5;
 +
    display: inline-block;
 +
    vertical-align: middle;
 +
    text-align: left;
 +
 +
  }
 +
  .content_div_text span{
 +
 +
  font-weight:bold;
 +
  }
 +
  .content_div_text p{
 +
    line-height: 1.5;
 +
    color: #2C2C2C;
 +
    text-align: justify;
 +
    font-family:"P_text";
 +
    word-wrap: break-word
 +
  }
 +
  hr{
 +
    margin-top: 1rem;
 +
    margin-bottom: 1rem;
 +
    border: 0;
 +
    border-top: 2px solid rgba(0,0,0,.1);
 +
    left: 20px;
 +
  }
 +
  .hrmar{
 +
    margin: 0rem 2rem 0 0;
 +
    width: 95%;
 +
  }
 +
  /* --------------------------------------------------------侧边进度条调整--------------------------------- */
 +
  .divBox_div{
 +
    position: fixed;
 +
    width: 10px;
 +
    height: 100%;
 +
    z-index: 99;
 +
  }
 +
  #divBox {
 +
      position: relative;
 +
      width: 10px;
 +
      background-color: #feb770;
 +
      padding: 1px;
 +
      text-align: center;
 +
      top:5%;}
 +
  #divBox_0 {
 +
          position: relative;
 +
          width:10px;
 +
          height: 100%;
 +
          background-color: #feebc3;
 +
          padding: 1px;
 +
          text-align: center;
 +
          top:5%;
 +
          visibility: hidden;
 +
        }
 +
  #bottom_div{
 +
    float: right;
 +
    width: 100%;
 +
    height: 35%;
 +
    /* background-color: #f4f3ee; */
 +
    background-color: #ececea;
 +
  }
 +
  @media only screen and (min-width: 1500px) and (max-width: 2560px) {
 +
    #bottom_div{
 +
      height: 33%;
 +
      height: 260px;
 +
 +
    }
 +
  }
 +
  @media only screen and (min-width: 1000px) and (max-width: 1500px) {
 +
    #bottom_div{
 +
      height: 30%;
 +
      height: 260px;
 +
    }
 +
  }
 +
  @media only screen and (min-width: 768px) and (max-width: 1199px) {
 +
    #bottom_div{
 +
      height: 220px;
 +
    }
 +
 +
  }
 +
  @media (max-width: 768px) {
 +
    #bottom_div{
 +
      height: 180px;
 +
    }
 +
  }
 +
  #bottom_div_img{
 +
    float: right;
 +
    width: 100%;
 +
    height: 100%;
 +
    margin-left: 30px;
 +
    background: url("https://static.igem.org/mediawiki/2021/6/67/T--SCUT-China--background-home-bottom.png");
 +
    background-size: 100% 100%;
 +
  }
 +
  #bottom_div .a_div{
 +
    display: relative;
 +
    width: 17%;
 +
    height:50px;
 +
    margin-left: 30px;
 +
    opacity: 0;
 +
  }
 +
  #bottom_div a{
 +
    opacity: 1;
 +
  }
 +
 +
  /* ----------------------------------------------------------------------------------轮播图 */
 +
  #parent{
 +
      position: relative;
 +
      margin: 10px auto;
 +
      padding: 0;
 +
      width: 500px;
 +
      height: 309px;
 +
  }
 +
 +
  #uls{
 +
      position: relative;
 +
      margin: 0;
 +
      padding: 0;
 +
      width: 500px;
 +
      height: 309px;
 +
      overflow: hidden;
 +
  }
 +
 +
  #img_ul{
 +
      position: absolute;
 +
      margin: 0;
 +
      padding: 0;
 +
      left: 0;
 +
      top: 0;
 +
      width: 3000px;          /*多留出一张图片的宽度!*/
 +
      list-style: none;
 +
  }
 +
  #img_ul li{
 +
      float: left;
 +
      margin: 0;
 +
      padding: 0;
 +
      width: 500px;
 +
      height: 309px;
 +
  }
 +
  #img_ul li img{
 +
      width: 500px;
 +
      height: 250px;
 +
  }
 +
 +
  #litCir_ul{
 +
      position: absolute;
 +
      margin: 0;
 +
      padding: 0;
 +
      right: 10px;
 +
      bottom: 10px;
 +
      list-style: none;
 +
  }
 +
  #litCir_ul li{
 +
      margin: 0;
 +
      padding: 0;
 +
      float: left;
 +
      width: 20px;
 +
      height: 20px;
 +
      text-align: center;
 +
      line-height: 20px;
 +
      border-radius: 50%;
 +
      margin-left:10px ;
 +
      cursor: pointer;
 +
  }
 +
 +
  #litCir_ul li.active{
 +
      background-color: white;
 +
  }
 +
  #litCir_ul li.quiet{
 +
      background-color: #feb770;
 +
  }
 +
 +
  #buttons{
 +
      margin: 0;
 +
      padding: 0;
 +
      display: none;
 +
  }
 +
  #buttons span{
 +
      position: absolute;
 +
      width: 40px;
 +
      height: 40px;
 +
      top: 50%;
 +
      margin-top: -20px;
 +
      line-height: 40px;
 +
      text-align: center;
 +
      font-weight: bold;
 +
      font-family: Simsun;
 +
      font-size: 30px;
 +
      border: 1px solid #fff;
 +
      opacity: 0.3;
 +
      cursor: pointer;
 +
      color: #fff;
 +
      background: black;
 +
  }
 +
  #left_button{
 +
      left: 5px;
 +
  }
 +
  #right_button{
 +
      left: 100%;
 +
      margin-left: -45px;
 +
  }
 +
  /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */
 +
  </style>
 +
 +
      <title></title>
 +
    </head>
 +
 +
    <body  >
 +
      <!-- 顶部导航栏位置 -->
 +
  <div class="header" >
 +
 +
        <!---Header Start-->
 +
      <div class="header-area">
 +
          <div class="main-header ">
 +
              <div class="header-bottom  header-sticky">
 +
                  <div class="container-fluid">
 +
                      <div class="menu-all">
 +
                          <!-- Logo -->
 +
                          <div class="logo">
 +
                              <a href="https://2021.igem.org/Team:SCUT-China"><img class="logoimg" src="https://static.igem.org/mediawiki/2021/5/5b/T--SCUT-China--logo.png" alt=""></a>
 +
                          </div>
 +
                          <!-- Main-menu -->
 +
                          <div class="main-menu">
 +
                                  <nav>
 +
                                      <ul id="navigation">
 +
                                          <li><a href="https://2021.igem.org/Team:SCUT-China">HOME</a></li>
 +
                                          <li><a href="#">TEAM</a>
 +
                                            <ul class="submenu"  style="margin-left: 0px;">
 +
                                              <li><a href="https://2021.igem.org/Team:SCUT-China/Members">Members</a></li>
 +
                                                <li><a href="https://2021.igem.org/Team:SCUT-China/Attributions">Attributions</a></li>
 +
                                                <li><a href="https://2021.igem.org/Team:SCUT-China/Safety">Safety</a></li>
 +
                                                <li><a href="https://2021.igem.org/Team:SCUT-China/Collaboration">Collaboration</a></li>
 +
                                            </ul>
 +
                                          </li>
 +
                                          <li><a href="">PROJECT</a>
 +
                                            <ul class="submenu"  style="margin-left: 0px;">
 +
                                              <li><a href="https://2021.igem.org/Team:SCUT-China/Description">Description</a></li>
 +
                                              <li><a href="https://2021.igem.org/Team:SCUT-China/Proof-of-concept">Proof of concept</a></li>
 +
                                              <li><a href="https://2021.igem.org/Team:SCUT-China/Contribution">Contributions</a></li>
 +
                                              <li><a href="https://2021.igem.org/Team:SCUT-China/Partnership">Partnership</a></li>
 +
                                              <li><a href="https://2021.igem.org/Team:SCUT-China/Notebook">Notebook</a></li>
 +
                                            </ul>
 +
                                          </li>
 +
                                        <li><a href="#">WET LAB</a>
 +
                                          <ul class="submenu"  style="margin-left: 0px;">
 +
                                            <li><a href="https://2021.igem.org/Team:SCUT-China/Design">Design</a></li>
 +
                                              <li><a href="https://2021.igem.org/Team:SCUT-China/Engineering">Engineering</a></li>
 +
                                              <li><a href="https://2021.igem.org/Team:SCUT-China/Results">Results</a></li>
 +
                                              <li><a href="https://2021.igem.org/Team:SCUT-China/Experiment">Experiment</a></li>
 +
                                              <li><a href="https://2021.igem.org/Team:SCUT-China/Parts">Parts</a></li>
 +
                                          </ul>
 +
                                        </li>
 +
 +
                                          <li><a href="#">DRY LAB</a>
 +
                                              <ul class="submenu" style="margin-left: 0px;">
 +
                                                <li><a href="https://2021.igem.org/Team:SCUT-China/Model">Overview</a></li>
 +
                                                <li><a href="https://2021.igem.org/Team:SCUT-China/Software-NuPGO">Software NuPGO</a></li>
 +
                                                <li><a href="https://2021.igem.org/Team:SCUT-China/Fermentation-simulation">Fermentation simulation</a></li>
 +
                                                <li><a href="https://2021.igem.org/Team:SCUT-China/Machine-learning">Machine learning</a></li>
 +
                                              </ul>
 +
                                          </li>
 +
                                          <li><a href="#">Human PRACTICE</a>
 +
                                            <ul class="submenu"  style="margin-left: 0px;">
 +
                                              <li><a href="https://2021.igem.org/Team:SCUT-China/Integrated">Integrated Human Practices</a></li>
 +
                                              <li><a href="https://2021.igem.org/Team:SCUT-China/Design">Imposed implementation</a></li>
 +
                                              <li><a href="https://2021.igem.org/Team:SCUT-China/Inclusivity">Inclusivity</a></li>
 +
                                                <li><a href="https://2021.igem.org/Team:SCUT-China/Education">Education and Communication</a></li>
 +
                                              <li><a href="https://2021.igem.org/Team:SCUT-China/Entrepreneurship">Entrepreneurship</a></li>
 +
                                            </ul>
 +
                                          </li>
 +
 +
                                          <li><a href="https://2021.igem.org/Team:SCUT-China/Awards">AWARDS</a></li>
 +
                                      </ul>
 +
                                  </nav>
 +
                          </div>
 +
                          <!-- Mobile Menu -->
 +
        <div class="main-menu-min">
 +
          <nav class="nav">
 +
            <ul >
 +
              <li class="current"><div align="center"><img src="https://static.igem.org/mediawiki/2021/b/be/T--SCUT-China--header-min.png"></div></li>
 +
              <li><a href="https://2021.igem.org/Team:SCUT-China">HOME</a></li>
 +
              <li><a href="https://2021.igem.org/Team:SCUT-China/Protocols">PROJECT</a></li>
 +
              <li><a href="https://2021.igem.org/Team:SCUT-China/Description">WET LAB</a></li>
 +
              <li><a href="https://2021.igem.org/Team:SCUT-China/Design">DRY LAB</a></li>
 +
              <li><a href="https://2021.igem.org/Team:SCUT-China/Integrated">Integrated Human Practices</a></li>
 +
              <li><a href="https://2021.igem.org/Team:SCUT-China/Awards">Awards</a>
 +
            </ul>
 +
        </div>
 +
 +
 +
 +
                        <!-- Mobile Menu -->
 +
                      </div>
 +
                  </div>
 +
              </div>
 +
          </div>
 +
      </div>
 +
      <!-- Header End -->
 +
  </div>
 +
    <!-- 11111111111111111111111111111111111111111111111111111111111进度条 -->
 +
    <div class="divBox_div">
 +
      <div id="divBox"></div>
 +
      <div id="divBox_0"></div>
 +
    </div>
 +
 +
    <div class="middle">
 +
      <div class="middle_img">
 +
        <div class="" style="position: relative;float:right;margin-top: 350px;margin-right: -95px;width:100px;height:300px; background-color:rgba(0,0,0,0);">
 +
          <div class="card-holder" id="card-holder" >
 +
            <div class='card-wrapper'>
 +
                <div class='card_img '>
 +
                  <span class='card-content'><img src="https://static.igem.org/mediawiki/2021/f/fd/T--SCUT-China--tool.png"></span>
 +
                </div>
 +
            </div>
 +
            <div class='card-wrapper'>
 +
              <a href='#content_part_h2' id="bg" onclick="bigger();">
 +
                <div class='card bg-03'>
 +
                  <span class='card-content'>Increase the font size</span>
 +
                </div>
 +
              </a>
 +
            </div>
 +
            <div class='card-wrapper'>
 +
              <a href='#content_part_h2' id="lt" onclick="small();">
 +
                <div class='card bg-04'>
 +
                  <span class='card-content'>Reduce the font size</span>
 +
                </div>
 +
              </a>
 +
            </div>
 +
            <div class='card-wrapper'>
 +
              <a href='#content_part_h2' id="cl" οnclick="changeLanguage()">
 +
                <div class='card bg-05'>
 +
                  <span class='card-content'>Translation</span>
 +
                </div>
 +
              </a>
 +
            </div>
 +
            <div class='card-wrapper'>
 +
              <a href='#'>
 +
                <div class='card bg-06'id="toTop">
 +
                  <span class='card-content'>Go back to the top</span>
 +
                </div>
 +
              </a>
 +
            </div>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
<!-- 444444444444444444444444444444444444444444444444444444444444444以下需要替换(直接替换即可)预览时字体效果不会出现44444444444444444444444444444444444444444444444444444444444444 -->
 +
    <!-- 111111111111111111111111111111111111111111111111左侧导航条,标准样式11111111111111111111111111111111111 -->
 +
    <main class="main">
 +
      <div class="main_div" >
 +
      <div class="left" >
 +
          <div class="siderBar">
 +
            <div class="menu">
 +
            <ul id="nav">
 +
              <li style="font-size:26px;"><a class="a_nav">Safety</a></li>
 +
              <hr class="hrmar">
 +
              <!-- 以下复制可增加左侧导航栏数量 -->
 +
                <li ><a>Safe Project Design</a></li>
 +
                <!--以上复制可增加左侧导航栏数量- -->
 +
                <li><a >Safe Lab Work </a></li>
 +
                <li><a >Safe Human Practice</a></li>
 +
            </ul>
 +
            </div>
 +
        </div>
 +
      </div>
 +
 +
      <div class="right" style="width: 75%;float: right;">
 +
          <div class="content-my">
 +
            <div id="wrap">
 +
              <hr class="hrmar" style="visibility:hidden;" id="content_part_h2">
 +
 +
              <!-- 以下为一个标准卡片范围- -->
 +
              <!-- -hr 为隐藏定位 -->
 +
              <hr class="hrmar"style="visibility:hidden;" id="content_part_h2">
 +
              <!-- id=hrmar  为阴影效果div- -->
 +
              <div id="hrmar">
 +
                <!-- 所有图片(img)、文字(p)、标题(h2、h4)必须在id=content_part之中- -->
 +
                <div id="content_part">
 +
                  <!-- h2 为一级标题- -->
 +
                    <h2  class="content_text_h2">Safe Project Design</h2>
 +
                    <!-- h4 为二级标题- -->
 +
                    <!-- <h4 class="content_text_h2" style="font-size:18px;margin-top:20px;">Learn</h4> -->
 +
                        <!-- 所有图片(img)、文字(p)必须在content_div_text之中- -->
 +
                      <div class="content_div_text">
 +
                        <!-- -正文内容记录在p标签之中,如需翻译需要更改id(id不允许相同),若不翻译删除id=”XXX”即可 -->
 +
                      <p  id="p1_1"align="left">    Saccharomyces cerevisiae is not only an ideal chassis for nootkatone production, but also is a eukaryote which is friendly to genes biosafety. Besides, our strains will be used in factories, where they will function in fermentation cylinders. Thus, the possibility of horizontal transfer is substantially reduced and the modified genes in our strains will be unlikely to contaminate the natural strains. Not only S. cerevisiae but also the enzymes and products expressed by Saccharomyces cerevisiae are safe in our project.
 +
                      </p>
 +
                      <p id="p1_2"align="left">    As we hope that the modified strains can achieve high yield in the factory environment, the economic benefit is a very important point to consider. It can be seen from the above that the chassis and parts we use are harmless to the human body and the environment. It is a pity that the kill switches and other incorporated biocontainment strategies will impose a burden on the modified strains, and auxotrophy species will need additional growth factors which will increase the cost. The other reason we did not use the incorporated biocontainment strategies for our strains is that our modified strains may be used in the factory, where the possibility of escape of strains is low. In the laboratory, our members have also received comprehensive experimental training to reduce the possibility of leakage in the laboratory as much as possible.
 +
                      </p>
 +
                    <p id="p1_3"align="left">  If the project goes ahead, our products will be released outside the laboratory as <span>mosquito repellents</span>  after being approved, but it does not include our modified strains. It further ensures that our engineered strains do not lead to uncontrollable risks.
 +
                    </p>
 +
                      </div>
 +
                </div>
 +
              </div>
 +
              <!-- -以上内容为一个标准卡片内容- -->
 +
 +
 +
              <hr class="hrmar"style="visibility:hidden;" id="content_part_h2">
 +
                <div id="hrmar">
 +
                  <div id="content_part">
 +
                    <h2  class="content_text_h2">Safe Lab Work</h2>
 +
                      <div class="content_div_text">
 +
                        <p  id="p1_1"align="left">    Before we enter the laboratory to do the experiment, we will receive the training from the safety staff of our school. Each of us will receive a laboratory safety manual, which contains the proper dress code in the laboratory, the management of chemicals and the instructions for the use of dangerous equipment, etc. After that, the senior students of our laboratory will introduce more detailed safety regulations to us, such as handling of hazardous waste, conventional sterilization methods and so on. Besides, the instruments in our laboratory are all posted with the safety matters that need to pay attention to when using the instrument, so the operation error of the instrument can be substantially reduced.
 +
                      </p>
 +
                        <div class="content_div_img" style="width:80%;float:left;">
 +
                            <img src="https://static.igem.org/mediawiki/2021/1/1c/T--SCUT-China--safety-1.png">
 +
                        </div>
 +
                        <div style="display: inline;width:80%;float:left;">
 +
                          <p style="font-size:12px;text-align:center;"> The laws and regulations that govern biosafety we use in our project. </p>
 +
                          <p style="font-size:12px;text-align:center;"> General biosafety standard for microbiological and biomedical laboratories(WS 233-2002). </p>
 +
                          <p style="font-size:12px;text-align:center;"> http://www.nhc.gov.cn/ewebeditor/uploadfile/2014/12/20141217161248966.pdf. </p>
 +
                          <p style="font-size:12px;text-align:center;"> Biosafety Law of the People's Republic of China </p>
 +
                          <p style="font-size:12px;text-align:center;"> https://www.chinacourt.org/law/detail/2020/10/id/150201.shtml </p>
 +
                          <p style="font-size:12px;text-align:center;"> Laboratory management manual </p>
 +
                          <p style="font-size:12px;text-align:center;"> https://2021.igem.org/File:T--SCUT-China--guideline_for_laboratory_biosafety_and_biosecurity_1.docx </p>
 +
                          <p style="font-size:12px;text-align:center;"> https://2021.igem.org/File:T--SCUT-China--guideline_for_laboratory_biosafety_and_biosecurity_2.docx </p>
 +
                          <p style="font-size:12px;text-align:center;"> https://2021.igem.org/File:T--SCUT-China--guideline_for_laboratory_biosafety_and_biosecurity_3.docx </p>
 +
                          <p style="font-size:12px;text-align:center;"> https://2021.igem.org/File:T--SCUT-China--guideline_for_laboratory_biosafety_and_biosecurity_4.docx </p>
 +
                        </div>
 +
 +
 +
                      </div>
 +
                    </div>
 +
                  </div>
 +
 +
              <hr class="hrmar" id="content_part_h2" style="visibility:hidden;">
 +
              <div id="hrmar">
 +
                <div id="content_part">
 +
                    <h2 class="content_text_h2">Safe Human Practice</h2>
 +
                    <div class="content_div_text">
 +
                      <p  id="p1_1"align="left">    In Human Practice, we hope to hear the real voice of the society. But on the premise of ensuring the feedback is effective, we should also respect the feelings and privacy of interviewees.
 +
                      </p>
 +
                      <p  id="p1_2"align="left">    First, we need to ensure the safety of the interviewees. We believe that face-to-face communication can have a greater chance to get people's real thoughts, so the street interview is a very important part of our project Human Practice. But we also have an obligation to avoid any danger that might occur during the interview in the real world.
 +
                        <br>    In the street interview, we hoped to know the mosquito repellents methods and trends adopted by children or the pregnant. We wanted to find and interview parents among the crowd. So, we found child first, and then we could find the guardians to be our interviewees. Although this method was efficient, it could also have some hidden dangers. Children must be carefully watched by guardians to ensure their safety. However, interview has a high probability to divert parents' attention from their children. We do not want any accident to happen during the interviews, so we have developed a set of procedure for selecting interviewees (Fig.1). In order to ensure safety, parents would only be selected as our interviewees when their children were in a safe state such as resting or there were others to take care of children, and we ensured that the interview would not last for a long time.
 +
                        <br>    In addition, we are also focused on quarantine requirements during novel Coronavirus pandemic. In each interview, we wore masks and kept a safe distance from the interviewees. We also washed our hands after going out, ensuring that we are not threatened by the virus.
 +
                        <br>    We also won't forget to use mosquito repellents to prevent mosquito bites when we go out for Human Practice.
 +
                      </p>
 +
 +
                      <div class="content_div_img">
 +
                          <img src="https://static.igem.org/mediawiki/2021/b/bf/T--SCUT-China--safety-2.png">
 +
                      </div>
 +
                      <p style="font-size:16px;text-align:center;">Fig1. procedure for selecting interviewees</p>
 +
 +
                      <p  id="p1_3"align="left">    Second, we need to respect people's privacy and information security. It is well-known that the interview content should be approved by the interviewee before being shown to the public. After each interview, we asked interviewees if they would allow us to post photos and conversations on the wiki. Most of the applications were granted, but some of the information was not suitable for public disclosure.
 +
                        <br>    In our Human Practice interview, we may talk about some sensitive information when we interview government and so on. But we as college students may not be able to consider what information is inconvenient for public disclosure. Therefore, we will still contact the interviewee after the interview and send the interview documents to the interviewees for inspection. If some content doesn't fit, we'll write it briefly or delete it. Therefore, some of content in the Human Practice page may be ambiguous. Although it is not convenient to show, the interview content and suggestions had been absorbed by our project.
 +
                      </p>
 +
                    </div>
 +
                  </div>
 +
                </div>
 +
            </div>
 +
 +
            <div id="bottom_div">
 +
              <div id="bottom_div_img">
 +
              <!-- <img class="" src="img/bottom.png" alt=""> -->
 +
              <div class="a_div">
 +
                <a href="https://2021.igem.org/Team:SCUT-China"><div class="a_div"></div></a>
 +
              </div>
 +
            </div>
 +
          </div>
 +
          </div>
 +
        </div>
 +
      </main>
 +
  <!-- -0000000000000000000000000000000000000底栏000000000000000000000000000000000000000 -->
 +
  <!-- 444444444444444444444444444444444444444444444444444444444444以上需要替换4444444444444444444444444444444444444444444444444444444444444444 -->
 +
 +
  <script src="https://2021.igem.org/Team:SCUT-China/Javascript/jquery?action=raw&ctype=text/javascript"></script>
 +
  <script type="text/javascript" src="https://2021.igem.org/Team:SCUT-China/Javascript/jquery/waypoints?action=raw&ctype=text/javascript"></script>
  
<div class="column full_size">
+
  <script type="text/javascript" src="https://2021.igem.org/Team:SCUT-China/Javascript/main-4?action=raw&ctype=text/javascript"></script>
  
<h1> Safety </h1>
 
<p>Please visit the <a href="https://2021.igem.org/Safety">Safety Hub</a> to find this year's safety requirements & deadlines, and to learn about safe & responsible research in iGEM.</p>
 
  
<p>On this page of your wiki, you should write about how you are addressing any safety issues in your project. The wiki is a place where you can <strong>go beyond the questions on the safety forms</strong>, and write about whatever safety topics are most interesting in your project. (You do not need to copy your safety forms onto this wiki page.)</p>
+
  </body>
  
</div>
+
  <!-- 加载进度条 -->
 +
  <!-- <script type="text/javascript" src="https://2021.igem.org/Template:SCUT-China/MyJs-right-card?action=raw&ctype=text/javascript"></script> -->
 +
  <!-- 避免JS运行时页面还没有加载出来,所以需要放在body后 -->
  
 +
    <script type="text/javascript">
 +
  var oB=document.getElementById("bg");
 +
  var oL=document.getElementById("lt");
 +
  // var oP=document.getElementsByClassName("content_div_text");
 +
  var oP=document.querySelectorAll(".content_div_text p");
 +
  var sum=15;
 +
  function bigger(){
 +
  sum+=2;
 +
  var i;
 +
      for (i = 0; i < oP.length; i++) {
 +
          oP[i].style.fontSize=sum+"px";//在JS中不能出现“-”符号
 +
      }
 +
  }
 +
  oB.onclick=bigger;
  
<div class="column two_thirds_size">
+
  function small(){
<h3>Safe Project Design</h3>
+
  sum-=2;
 +
  for (i = 0; i < oP.length; i++) {
 +
      oP[i].style.fontSize=sum+"px";;//在JS中不能出现“-”符号
 +
      //alert(oP.length);
 +
  }
  
<p>Does your project include any safety features? Have you made certain decisions about the design to reduce risks? Write about them here! For example:</p>
+
  }
 +
  oL.onclick=small;
 +
  </script>
  
<ul>
+
  <script type="text/javascript" src="https://2021.igem.org/Template:SCUT-China/Myjs-Lunbo?action=raw&ctype=text/javascript"></script>
<li>Choosing a non-pathogenic chassis</li>
+
<li>Choosing parts that will not harm humans / animals / plants</li>
+
<li>Substituting safer materials for dangerous materials in a proof-of-concept experiment</li>
+
<li>Including an "induced lethality" or "kill-switch" device</li>
+
</ul>
+
  
</div>
 
  
<div class="column third_size">
+
<script type="text/javascript" src="https://2021.igem.org/Template:SCUT-China/Myjs-on-33?action=raw&ctype=text/javascript"></script>
<h3>Safe Lab Work</h3>
+
  
<p>What safety procedures do you use every day in the lab? Did you perform any unusual experiments, or face any unusual safety issues? Write about them here!</p>
 
  
  
 +
<!--  以下需要替换144444444444444444444444444444444444444444444441切换语言,不能统一放到网页上444444444444444444444444444444444444444444444444444444444444444444444444444 -->
  
</html>
+
  <!-- 444444444444444444444444444444444444444444444444444444444444444444444以上需要替换444444444444444444444444444444444444444444444444444444444444444 -->
 +
  </html>

Revision as of 01:25, 21 October 2021


Safe Project Design

Saccharomyces cerevisiae is not only an ideal chassis for nootkatone production, but also is a eukaryote which is friendly to genes biosafety. Besides, our strains will be used in factories, where they will function in fermentation cylinders. Thus, the possibility of horizontal transfer is substantially reduced and the modified genes in our strains will be unlikely to contaminate the natural strains. Not only S. cerevisiae but also the enzymes and products expressed by Saccharomyces cerevisiae are safe in our project.

As we hope that the modified strains can achieve high yield in the factory environment, the economic benefit is a very important point to consider. It can be seen from the above that the chassis and parts we use are harmless to the human body and the environment. It is a pity that the kill switches and other incorporated biocontainment strategies will impose a burden on the modified strains, and auxotrophy species will need additional growth factors which will increase the cost. The other reason we did not use the incorporated biocontainment strategies for our strains is that our modified strains may be used in the factory, where the possibility of escape of strains is low. In the laboratory, our members have also received comprehensive experimental training to reduce the possibility of leakage in the laboratory as much as possible.

If the project goes ahead, our products will be released outside the laboratory as mosquito repellents after being approved, but it does not include our modified strains. It further ensures that our engineered strains do not lead to uncontrollable risks.

Safe Lab Work

Before we enter the laboratory to do the experiment, we will receive the training from the safety staff of our school. Each of us will receive a laboratory safety manual, which contains the proper dress code in the laboratory, the management of chemicals and the instructions for the use of dangerous equipment, etc. After that, the senior students of our laboratory will introduce more detailed safety regulations to us, such as handling of hazardous waste, conventional sterilization methods and so on. Besides, the instruments in our laboratory are all posted with the safety matters that need to pay attention to when using the instrument, so the operation error of the instrument can be substantially reduced.

The laws and regulations that govern biosafety we use in our project.

General biosafety standard for microbiological and biomedical laboratories(WS 233-2002).

http://www.nhc.gov.cn/ewebeditor/uploadfile/2014/12/20141217161248966.pdf.

Biosafety Law of the People's Republic of China

https://www.chinacourt.org/law/detail/2020/10/id/150201.shtml

Laboratory management manual

https://2021.igem.org/File:T--SCUT-China--guideline_for_laboratory_biosafety_and_biosecurity_1.docx

https://2021.igem.org/File:T--SCUT-China--guideline_for_laboratory_biosafety_and_biosecurity_2.docx

https://2021.igem.org/File:T--SCUT-China--guideline_for_laboratory_biosafety_and_biosecurity_3.docx

https://2021.igem.org/File:T--SCUT-China--guideline_for_laboratory_biosafety_and_biosecurity_4.docx

Safe Human Practice

In Human Practice, we hope to hear the real voice of the society. But on the premise of ensuring the feedback is effective, we should also respect the feelings and privacy of interviewees.

First, we need to ensure the safety of the interviewees. We believe that face-to-face communication can have a greater chance to get people's real thoughts, so the street interview is a very important part of our project Human Practice. But we also have an obligation to avoid any danger that might occur during the interview in the real world.
In the street interview, we hoped to know the mosquito repellents methods and trends adopted by children or the pregnant. We wanted to find and interview parents among the crowd. So, we found child first, and then we could find the guardians to be our interviewees. Although this method was efficient, it could also have some hidden dangers. Children must be carefully watched by guardians to ensure their safety. However, interview has a high probability to divert parents' attention from their children. We do not want any accident to happen during the interviews, so we have developed a set of procedure for selecting interviewees (Fig.1). In order to ensure safety, parents would only be selected as our interviewees when their children were in a safe state such as resting or there were others to take care of children, and we ensured that the interview would not last for a long time.
In addition, we are also focused on quarantine requirements during novel Coronavirus pandemic. In each interview, we wore masks and kept a safe distance from the interviewees. We also washed our hands after going out, ensuring that we are not threatened by the virus.
We also won't forget to use mosquito repellents to prevent mosquito bites when we go out for Human Practice.

Fig1. procedure for selecting interviewees

Second, we need to respect people's privacy and information security. It is well-known that the interview content should be approved by the interviewee before being shown to the public. After each interview, we asked interviewees if they would allow us to post photos and conversations on the wiki. Most of the applications were granted, but some of the information was not suitable for public disclosure.
In our Human Practice interview, we may talk about some sensitive information when we interview government and so on. But we as college students may not be able to consider what information is inconvenient for public disclosure. Therefore, we will still contact the interviewee after the interview and send the interview documents to the interviewees for inspection. If some content doesn't fit, we'll write it briefly or delete it. Therefore, some of content in the Human Practice page may be ambiguous. Although it is not convenient to show, the interview content and suggestions had been absorbed by our project.