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

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;}
 +
 +
/* 666666666666666666666666666666666666666666666666666666666666以下为加载动画样式66666666666666666666666666666666666666666 */
 +
        #gif
 +
          {
 +
            position: fixed;
 +
            top: 0;
 +
            left: 0;
 +
            width: 100%;
 +
            height: 100%;
 +
            z-index: 99999;
 +
            /* display: -webkit-box; */
 +
            -webkit-box-orient: horizontal;
 +
            -webkit-box-pack: center;
 +
            -webkit-box-align: center;
 +
            background: #fff;
 +
        }
 +
 +
        #gif>img/*设置gif下的img元素样式*/
 +
        {
 +
 +
            /* width:40%; */
 +
        }
 +
          .gif2{
 +
            top: 25%;
 +
            height:auto;
 +
            margin-left:30%;
 +
            width:40%;
 +
          }
 +
          .gif1{
 +
            margin-left:35%;
 +
            top: 70%;
 +
            width:30%;
 +
            margin-top:-25px;
 +
 +
          }
 +
 +
/* 666666666666666666666666666666666666666666666666666666666666以上为加载动画样式66666666666666666666666666666666666666666 */
 +
  /* 左侧导航栏样式 */
 +
  #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;
 +
    width:100%;
 +
  }
 +
  #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{
 +
    margin: 10px;
 +
    text-align: center;
 +
    justify-content: center;
 +
    display: flex;
 +
    /* width: 900px;
 +
    height: 500px; */
 +
 +
  }
 +
  .content_div_img 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>
 +
                                              <li><a href="https://2021.igem.org/Team:SCUT-China/Measurement">Measurement</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>
 +
                                                <li><a href="https://2021.igem.org/Team:SCUT-China/Improvement">Improvement of a part</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/Implementation">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 -->
 +
      <!-- -0000000000000000000000000000000000000加载动图000000000000000000000000000000000000000 -->
 +
    <div id= "gif">
 +
      <p style="font-size:30px;margin-left:43%;margin-top:20px;">Loading...</p>
 +
        <img class="gif2"src = "https://static.igem.org/mediawiki/2021/b/b8/T--SCUT-China--model-gif-bool.gif"/>
 +
        <img class="gif1"src = "https://static.igem.org/mediawiki/2021/1/12/T--SCUT-China--model-gif-bar.gif"/>
 +
    </div>
 +
    <!-- -0000000000000000000000000000000000000以上加载动图000000000000000000000000000000000000000 -->
 +
 +
    <!-- 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">Inclusivity</a></li>
 +
              <hr class="hrmar">
 +
                <!-- 以上复制可增加左侧导航栏数量- -->
 +
                <li><a >Inclusivity content</a></li>
 +
                <!-- <hr class="hrmar"> -->
 +
                <li><a >Reference</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">Inclusivity content</h2>
 +
                    <p  id="p1_1"align="left" style="float:left;">      Basically，all the teams' materials for the current iGEM competition will be presented on the web page in text-based format, supplemented by pictures and videos. That's why text reading is a very important part of the process. Reading involves all the complex mental processes that are activated in the interpretation of the concepts and meanings inspired by the text symbols. Successful reading depends on the reader's ability to extract information from the material at an appropriate speed [1].
 +
                    </p>
 +
                    <p  id="p1_1"align="left" style="float:left;">      However, we found that <span>font size</span>  has an effect on reading speed, reading efficiency, and reading correctness for both people with normal vision and those with visual impairments including myopia, hyperopia, presbyopia, and cataracts. That is, for these people, the possibility of slow reading speed, inefficient reading, and incorrect comprehension may arise when reading web pages of most teams.
 +
                    </p>
 +
                    <p  id="p1_1"align="left" style="float:left;">      For people with normal vision, having a certain reading speed is necessary. According to a study [2], the effects of window size, presentation speed, and font size on guided text reading were examined using the EyeLink 2000 eye-tracking device with 30 college students as subjects in a multifactorial mixed design. The results showed that the main effect of font size was significant. The larger the font size, the better it was for reading, and the faster the subjects read. Speed alone is not enough, but the correct rate of comprehension needs to be taken into account.
 +
                    </p>
 +
                    <p  id="p1_1"align="left" style="float:left;">      According to the study, the main effect of font size on correctness was significant [5]. Moreover, the main effect of font size was significant for both gaze duration and gaze frequency. The results of the experiment showed that for college students, the medium size font of the online courseware improved the subjects' mastery of the courseware content more than the small size font and the large size font of the online courseware, and there were significant differences [4].
 +
                    </p>
 +
                    <p  id="p1_1"align="left" style="float:left;">      In addition, there are people who have different reading habits. Each person has different habits when reading text, some like to enlarge, while others like to reduce the font size so that all content is displayed at once.
 +
                    </p>
 +
                    <p  id="p1_1"align="left" style="float:left;">      In recent years, the incidence of myopia in China has been on a significant rise, and myopia has become a major public health problem affecting the eye health of our nationals, especially adolescents. This most common eye disease is ranked as one of the top three diseases in the world, and the prevalence of myopia in our population is about 33%, which is 1.5 times higher than the world average (22% of the total population) [7].
 +
                    </p>
 +
                    <p  id="p1_1"align="left" style="float:left;">      With the increase in print size, the reading performance of normal-sighted and simulated visually impaired individuals improved. There was no significant difference in reading performance between the two small print sizes, but reading speed increased with increasing font size [1]. For low-vision students, data from the study [3] yielded that under sentence context conditions, font size did not have a significant effect on sentence reading time, but showed a trend that as font size increased, sentence reading time decreased. For the elderly, the newspaper found that several readers wrote and called to reflect that they would like the font size of the newspaper to be adjusted larger again [6]
 +
                    </p>
 +
                    <p  id="p1_1"align="left" style="float:left;">      In order to better accommodate people with visual impairment and other people's habit of reading web pages, so that they can improve their reading speed, reading efficiency and reading accuracy, we have added the function of enlarging/reducing the font size in our wiki to meet the needs of different people for font size. The standard is 16px, large is 18px, small is 14px.
 +
                    </p>
 +
                    <p  id="p1_1"align="left" style="float:left;">      Since the three sections of engineering, model, and description are more specialized, and our native language is Chinese, we designed <span>the Chinese to English conversion</span> function in these three sections in order to prevent the influence of the conversion between languages on the original semantics and increase the accuracy of the next iGEMers' understanding of our content. In addition to the expected help for Chinese iGEMers, we also hope that this feature will provide some convenience to other ordinary people who want to understand our project but have not studied professional English.
 +
                    </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">Reference</h2>
 +
                                  <div class="content_div_text">
 +
                                    <p  id="p1_1"align="left" style="float:left;">1.Alotaibi, A. Z. (2007). The effect of font size and type on reading performance with Arabic words in normally sighted and simulated cataract subjects. Clinical and Experimental Optometry, 90(3), 203–206. doi:10.1111/j.1444-0938.2007.00123.x
 +
                                    </p>
 +
                                    <p  id="p1_1"align="left" style="float:left;">2.李建军,张兰兰,闫国利.字号和词频对低视生阅读效率影响的研究及教育对策[J].中国特殊教育,2012(8):30-34.
 +
                                    </p>
 +
                                    <p  id="p1_1"align="left" style="float:left;">3.白学军,曹玉肖,顾俊娟,郭志英,闫国利.窗口大小、呈现速度和字号对引导式文本阅读的影响[J].心理科学,2011,34(2):278-283.
 +
                                    </p>
 +
                                    <p  id="p1_1"align="left" style="float:left;">4.喻静敏,蔡建东.网络课件字号与文章标记搭配的眼动研究[J].数字教育,2018,4(01):65-70.
 +
                                    </p>
 +
                                    <p  id="p1_1"align="left" style="float:left;">5.田欣卉. 字体大小、类型和标注对中文阅读影响的眼动研究[D].沈阳师范大学,2019.
 +
                                    </p>
 +
                                    <p  id="p1_1"align="left" style="float:left;">6.吴旭. 字号大小征求意见诠释“开门办报”[N]. 中国新闻出版广电报,2021-01-28(003).
 +
                                    </p>
 +
                                    <p  id="p1_1"align="left" style="float:left;">7.中国医学装备协会眼科专业委员会.儿童青少年近视眼检测与防控的应用标准[J].中华眼科医学杂志.2018,8（6）:276-288.
 +
                                    </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>
 +
 +
  <script type="text/javascript" src="https://2021.igem.org/Team:SCUT-China/Javascript/main-4?action=raw&ctype=text/javascript"></script>
 +
 +
 +
  </body>
 +
 +
  <!-- 加载进度条 -->
 +
  <!-- <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;
  
 +
  function small(){
 +
  sum-=2;
 +
  for (i = 0; i < oP.length; i++) {
 +
      oP[i].style.fontSize=sum+"px";;//在JS中不能出现“-”符号
 +
      //alert(oP.length);
 +
  }
  
−
<div class="column two_thirds_size">
+
  }
 +
  oL.onclick=small;
 +
  </script>
  
−
<h3>Inclusivity Award</h3>
+
<script type="text/javascript" src="https://2021.igem.org/Template:SCUT-China/Myjs-Lunbo?action=raw&ctype=text/javascript"></script>
  
−
<p>The Inclusivity Award recognizes exceptional efforts to include people with diverse identities in scientific research. Who is allowed to have a voice in iGEM, synthetic biology, and science more broadly? How have you developed new opportunities to eliminate barriers and allow more people to contribute to, participate in, and/or be represented by these communities? To compete for this prize, activities do not have to be directly related to your team’s project. Document your approach, how you improved inclusivity, and what was learned.
 
  
−
<br><br>
+
<script type="text/javascript" src="https://2021.igem.org/Template:SCUT-China/Myjs-on-555?action=raw&ctype=text/javascript"></script>
−
To compete for the <a href="https://2021.igem.org/Judging/Awards">Inclusivity Award</a>, please describe your work on this page and also fill out the description on the <a href="https://2021.igem.org/Judging/Judging_Form">judging form</a>.
+
−
</p>
+
−
</p>
+
−
</div>
+
  
−
<div class="column third_size">
 
−
<div class="highlight decoration_A_full">
 
−
<h3>Inspiration</h3>
 
−
<p>You can look at what other teams did to get some inspiration! <br />
 
−
Here are a few examples:</p>
 
−
<ul>
 
−
<li><a href="https://2020.igem.org/Team:Fudan/Inclusion">2020 Fudan</a></li>
 
−
<li><a href="https://2020.igem.org/Team:CCU_Taiwan/Inclusion">2020 CCU Taiwan</a></li>
 
−
<li><a href="https://2020.igem.org/Team:Concordia-Montreal/Inclusion">2020 Concordia Montreal</a></li>
 
−
<li><a href="https://2020.igem.org/Team:CLS_CLSG_UK/Inclusion">2020 CLS CLSG UK</a></li>
 
  
  
−
</ul>
+
<!--  以下需要替换144444444444444444444444444444444444444444444441切换语言，不能统一放到网页上444444444444444444444444444444444444444444444444444444444444444444444444444 -->
−
</div>
+
  
−
</div>
+
  <!-- 444444444444444444444444444444444444444444444444444444444444444444444以上需要替换444444444444444444444444444444444444444444444444444444444444444 -->
 +
  <!-- 444444444444444444444444444444444444444444444444444444444444444444444以上需要替换444444444444444444444444444444444444444444444444444444444444444 -->
 +
  <!-- -0000000000000000000000000000000000000加载动图代码000000000000000000000000000000000000000 -->
  
 +
  <!-- -0000000000000000000000000000000000000加载动图代码000000000000000000000000000000000000000 -->
  
−
</html>
+
  </html>

Revision as of 01:55, 22 October 2021


Loading...

Inclusivity content

Basically，all the teams' materials for the current iGEM competition will be presented on the web page in text-based format, supplemented by pictures and videos. That's why text reading is a very important part of the process. Reading involves all the complex mental processes that are activated in the interpretation of the concepts and meanings inspired by the text symbols. Successful reading depends on the reader's ability to extract information from the material at an appropriate speed [1].

However, we found that font size has an effect on reading speed, reading efficiency, and reading correctness for both people with normal vision and those with visual impairments including myopia, hyperopia, presbyopia, and cataracts. That is, for these people, the possibility of slow reading speed, inefficient reading, and incorrect comprehension may arise when reading web pages of most teams.

For people with normal vision, having a certain reading speed is necessary. According to a study [2], the effects of window size, presentation speed, and font size on guided text reading were examined using the EyeLink 2000 eye-tracking device with 30 college students as subjects in a multifactorial mixed design. The results showed that the main effect of font size was significant. The larger the font size, the better it was for reading, and the faster the subjects read. Speed alone is not enough, but the correct rate of comprehension needs to be taken into account.

According to the study, the main effect of font size on correctness was significant [5]. Moreover, the main effect of font size was significant for both gaze duration and gaze frequency. The results of the experiment showed that for college students, the medium size font of the online courseware improved the subjects' mastery of the courseware content more than the small size font and the large size font of the online courseware, and there were significant differences [4].

In addition, there are people who have different reading habits. Each person has different habits when reading text, some like to enlarge, while others like to reduce the font size so that all content is displayed at once.

In recent years, the incidence of myopia in China has been on a significant rise, and myopia has become a major public health problem affecting the eye health of our nationals, especially adolescents. This most common eye disease is ranked as one of the top three diseases in the world, and the prevalence of myopia in our population is about 33%, which is 1.5 times higher than the world average (22% of the total population) [7].

With the increase in print size, the reading performance of normal-sighted and simulated visually impaired individuals improved. There was no significant difference in reading performance between the two small print sizes, but reading speed increased with increasing font size [1]. For low-vision students, data from the study [3] yielded that under sentence context conditions, font size did not have a significant effect on sentence reading time, but showed a trend that as font size increased, sentence reading time decreased. For the elderly, the newspaper found that several readers wrote and called to reflect that they would like the font size of the newspaper to be adjusted larger again [6]

In order to better accommodate people with visual impairment and other people's habit of reading web pages, so that they can improve their reading speed, reading efficiency and reading accuracy, we have added the function of enlarging/reducing the font size in our wiki to meet the needs of different people for font size. The standard is 16px, large is 18px, small is 14px.

Since the three sections of engineering, model, and description are more specialized, and our native language is Chinese, we designed the Chinese to English conversion function in these three sections in order to prevent the influence of the conversion between languages on the original semantics and increase the accuracy of the next iGEMers' understanding of our content. In addition to the expected help for Chinese iGEMers, we also hope that this feature will provide some convenience to other ordinary people who want to understand our project but have not studied professional English.

Reference

1.Alotaibi, A. Z. (2007). The effect of font size and type on reading performance with Arabic words in normally sighted and simulated cataract subjects. Clinical and Experimental Optometry, 90(3), 203–206. doi:10.1111/j.1444-0938.2007.00123.x

2.李建军,张兰兰,闫国利.字号和词频对低视生阅读效率影响的研究及教育对策[J].中国特殊教育,2012(8):30-34.

3.白学军,曹玉肖,顾俊娟,郭志英,闫国利.窗口大小、呈现速度和字号对引导式文本阅读的影响[J].心理科学,2011,34(2):278-283.

4.喻静敏,蔡建东.网络课件字号与文章标记搭配的眼动研究[J].数字教育,2018,4(01):65-70.

5.田欣卉. 字体大小、类型和标注对中文阅读影响的眼动研究[D].沈阳师范大学,2019.

6.吴旭. 字号大小征求意见诠释“开门办报”[N]. 中国新闻出版广电报,2021-01-28(003).

7.中国医学装备协会眼科专业委员会.儿童青少年近视眼检测与防控的应用标准[J].中华眼科医学杂志.2018,8（6）:276-288.