Difference between revisions of "Team:USTC-Software/index.html"

Line 1: Line 1:
−
{{USTC-Software}}
+
<html>
−
<html lang="zh-CN">
+
    <head>
−
<head>
+
        <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
−
<meta charset="UTF-8">
+
    </head>
−
<title>Home</title>
+
    <style>
−
<meta name="description" content="Free bootstrap template Atlas">
+
    body {
−
<script src="https://2018.igem.org/wiki/index.php?title=Team:USTC-Software/js/aos&action=raw&ctype=text/javascript" type="text/javascript"></script>
+
  opacity: 1;
−
 
+
  display: flex;
−
<!-- custom.css -->
+
  flex-direction: column;
−
<link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Team:USTC-Software/css/custom&action=raw&ctype=text/css">
+
  justify-content: center;
−
<!-- bootstrap.min.css -->
+
}
−
<link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Team:USTC-Software/css/aos&action=raw&ctype=text/css">
+
body.ready {
−
<!-- AOS -->
+
  opacity: 1;
−
<link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Team:USTC-Software/css/bootstrap&action=raw&ctype=text/css">
+
}
−
</head>
+
.logo-animation {
−
 
+
  display: flex;
−
<body>
+
  align-items: center;
−
<!-- banner -->
+
  justify-content: center;
−
<div class="jumbotron jumbotron-fluid" id="banner" style="background-image: url(https://static.igem.org/mediawiki/2018/5/56/T--USTC-Software--bgpicture.jpeg);">
+
  width: 100%;
−
<div class="container text-center text-md-left">
+
  margin-top: -40px;
−
<header>
+
}
−
<div class="row justify-content-between">
+
.letters {
−
<div class="col-2">
+
  position: relative;
−
<img src="https://static.igem.org/mediawiki/2018/1/11/T--USTC-Software--logo.png" alt="logo">
+
  display: flex;
−
</div>
+
  width: 682px;
−
<div class="col-6 align-self-center text-right">
+
  height: 162px;
−
<p class="text-white lead">USTC-Software</p>
+
}
−
</div>
+
.letter {
−
</div>
+
  position: relative;
−
</header>
+
  width: 162px;
−
<h1 data-aos="fade" data-aos-easing="linear" data-aos-duration="1000" data-aos-once="true" class="display-3 text-white font-weight-bold my-5">
+
  height: 162px;
−
What’s our production?<br>
+
}
−
+
.letter:not(:first-child) {
−
</h1>
+
  margin-left: -42px;
−
<p data-aos="fade" data-aos-easing="linear" data-aos-duration="1000" data-aos-once="true" class="lead text-white my-4">
+
}
−
+
.letter-i {
−
<br>  
+
  z-index: 1;
−
</p>
+
  width: 82px;
−
<a href="#top" data-aos="fade" data-aos-easing="linear" data-aos-duration="1000" data-aos-once="true" class="btn my-4 font-weight-bold atlas-cta cta-green">Get Started</a>
+
  transform-origin: 100% 50%;
−
</div>
+
}
 +
.letter-u {
 +
  z-index: 1;
 +
  width: 142px;
 +
  transform-origin: 100% 50%;
 +
}
 +
.dot {
 +
  position: absolute;
 +
  width: 42px;
 +
  height: 42px;
 +
  transform: scale(0);
 +
}
 +
.dot-i {
 +
  top: 0;
 +
  left: 240px;
 +
}
 +
.dot-e {
 +
  bottom: 0;
 +
  right: 0;
 +
}
 +
.logo-icon {
 +
  display: flex;
 +
  position: absolute;
 +
  left: 230px;
 +
  top: -10px;
 +
  width: 222px;
 +
  height: 62px;
 +
}
 +
.icon {
 +
  width: 62px;
 +
  height: 62px;
 +
  opacity: 0;
 +
}
 +
.icon-text {
 +
  position: absolute;
 +
  top: 60px;
 +
  left: 60px;
 +
  width: 160px;
 +
  height: 62px;
 +
}
 +
.icon-text path,
 +
.icon-text polygon {
 +
  opacity: 0;
 +
}
 +
    </style>
 +
    <body>
 +
        <div class="logo-animation">
 +
  <div class="letters">
 +
    <div class="letter letter-b">
 +
      <svg viewBox="0 0 162 262">
 +
        <g fill="none" fill-rule="evenodd" stroke="#5E89FB">
 +
          <path class="fill in" stroke-width="40" d="M21 1V185M101 241H81a60 60 0 1 1 0-120c33.14 0 59 26.86 60 60v80"/>
 +
          <path class="fill out" stroke-width="40" d="M141 261V181c-1-33.14-26.86-60-60-60a60 60 0 1 0 0 120h20M21 185V1"/>
 +
          <path class="line out" stroke-width="2" d="M121 261V181.33C120.18 158.59 102.7 141 81 141a40 40 0 1 0 0 80h20v40H81A80 80 1 0 1 2 181V1h40V121c13.8 -15 89.66 -50 118.5 59V261Z"/>
 +
        </g>
 +
      </svg>
 +
    </div>
 +
    <div class="letter letter-i">
 +
      <svg viewBox="0 0 82 262">
 +
        <g fill="none" fill-rule="evenodd" stroke="#18FF92">
 +
          <path class="fill in" stroke-width="40" d="M21 161v20a60 60 0 0 0 60 60"/>
 +
          <path class="fill out" stroke-width="40" d="M81 241a60 60 0 0 1-60-60V161"/>
 +
          <path class="line out" stroke-width="2" d="M81 221a40 40 0 0 1-40-40V161H1V181a80 80 0 0 0 80 80v-40z"/>
 +
        </g>
 +
      </svg>
 +
    </div>
 +
    <div class="letter letter-o">
 +
      <svg viewBox="0 0 162 262">
 +
        <g fill="none" fill-rule="evenodd" stroke="#FB155A">
 +
          <path class="fill in" stroke-width="40" d="M81 121a60 60 0 1 0 0 120a60 60 0 1 0 0 -120"/>
 +
          <path class="fill out" stroke-width="40" d="M81 121a60 60 0 1 1 0 120a60 60 0 1 1 0 -120"/>
 +
          <path class="line out" stroke-width="2" d="M81 141a40 40 0 0 0 0 80a40 40 0 1 0 0 -80v-40a80 80 0 0 0 0 160a80 80 0 1 0 0 -160Z"/>
 +
        </g>
 +
      </svg>
 +
    </div>
 +
    <div class="letter letter-h">
 +
      <svg viewBox="0 0 162 262">
 +
        <g fill="none" fill-rule="evenodd" stroke="#5E89FB">
 +
          <path class="fill in" stroke-width="40" d="M21 261V1"/>
 +
          <path class="fill out" stroke-width="40" d="M21 1v260"/>
 +
          <path class="fill in" stroke-width="40" d="M21 261V181c1-33.14 26.86-60 60-60a60 60 0 0 1 60 60v80"/>
 +
          <path class="fill out" stroke-width="40" d="M141 261V181a60 60 0 0 0-60-60c-33.14 0-59 26.86-60 60v80"/>
 +
          <path class="line out" stroke-width="2" d="M41 261V1H1v260h40z"/>
 +
          <path class="line out" stroke-width="2" d="M1 261V180.4C2.35 136.27 37.2 101 81 101a80 80 0 0 1 80 80v80h-40V181a40 40 0 0 0-40-40c-21.7 0-39.18 17.59-40 40.33V161H1z"/>
 +
        </g>
 +
      </svg>
 +
    </div>
 +
    <div class="letter letter-u">
 +
      <svg viewBox="0 0 142 262">
 +
        <g fill="none" fill-rule="evenodd" stroke="#18FF92">
 +
          <path class="fill in" stroke-width="40" d="M21 121v70a50 50 0 0 0 100 0v-70"/>
 +
          <path class="fill out" stroke-width="40" d="M121 121v70a50 50 0 0 1 -100 0v-70"/>
 +
          <path class="line out" stroke-width="2" d="M1 121v70a70 70 0 0 0 140 0v-70h-40v70a30 30 0 0 1 -60 0v-70z"/>
 +
        </g>
 +
      </svg>
 +
    </div>
 +
    <div class="letter letter-b">
 +
      <svg viewBox="0 0 162 262">
 +
        <g fill="none" fill-rule="evenodd" stroke="#FB155A">
 +
          <path class="fill in" stroke-width="40" d="M21 1V185M81 241a60 60 0 1 1 0-120a60 60 0 1 1 0 120"/>
 +
          <path class="fill out" stroke-width="40" d="M81 241a60 60 0 1 0 0 -120a60 60 0 1 0 0 120M21 185V1"/>
 +
          <path class="line out" stroke-width="2" d="M1 1v181a80 80 0 1 0 160 0a80 80 0 0 0 -160 0h40a40 40 0 1 0 80 0a40 40 0 0 0 -80 0v-181z"/>
 +
        </g>
 +
      </svg>
 +
    </div>
 +
    <!--div class="logo-icon">
 +
      <div class="icon">
 +
        <svg viewBox="0 0 62 62">
 +
          <g fill="none" fill-rule="evenodd" stroke-width="2" transform="translate(1 1)">
 +
            <path class="icon-curve" stroke="#FF1554" d="M0 16a80.88 80.88 0 0 1 44 44"/>
 +
            <path class="icon-line" stroke="#5E89FB" d="M4 0h54a2 2 0 0 1 2 2.01V58A2 2 0 0 1 58 60H2a2 2 0 0 1-2-2.01V2A2 2 0 0 1 2 0h2z"/>
 +
            <rect width="40" height="40" x="10" y="10" stroke="#18FF92" rx="20"/>
 +
          </g>
 +
        </svg>
 +
      </div>
 +
      <div class="icon-text">
 +
        <svg viewBox="0 0 160 62">
 +
          <g fill="#FBF3FB" fill-rule="evenodd">
 +
            <path d="M27.33 18h1.73l10.15 25.7h-1.69l-3.24-8.24H21.97l-3.28 8.24H17L27.33 18zm6.45 16.1l-5.51-14.55h-.07l-5.73 14.54h11.3z"/>
 +
            <polygon points="51.334 18 53.314 18 69.55 41.58 69.622 41.58 69.622 18 71.206 18 71.206 43.704 69.334 43.704 52.99 19.944 52.918 19.944 52.918 43.704 51.334 43.704"/>
 +
            <polygon points="86.027 18 87.611 18 87.611 43.704 86.027 43.704"/>
 +
            <polygon points="102.433 18 104.701 18 114.745 41.94 114.817 41.94 124.753 18 127.021 18 127.021 43.704 125.437 43.704 125.437 19.944 125.365 19.944 115.573 43.704 113.989 43.704 104.089 19.944 104.017 19.944 104.017 43.704 102.433 43.704"/>
 +
            <polygon points="141.843 18 159.123 18 159.123 19.368 143.427 19.368 143.427 29.664 158.187 29.664 158.187 31.032 143.427 31.032 143.427 42.336 159.303 42.336 159.303 43.704 141.843 43.704"/>
 +
          </g>
 +
        </svg>
 +
      </div>
 +
    </div>
 +
    <div class="dot dot-i">
 +
      <svg viewBox="0 0 42 42">
 +
        <g fill="none" fill-rule="evenodd">
 +
          <rect width="40" height="40" x="1" y="1" fill="#17F28C" rx="20"/>
 +
        </g>
 +
      </svg>
 +
    </div>
 +
    <div class="dot dot-e">
 +
      <svg viewBox="0 0 42 42">
 +
        <g fill="none" fill-rule="evenodd">
 +
          <rect width="40" height="40" x="1" y="1" fill="#FFFFFF" rx="20"/>
 +
        </g>
 +
      </svg>
 +
    </div-->
 +
  </div>
 
</div>
 
</div>
−
<!-- three-block -->
+
    </body>
−
<div id="top" class="container my-5 py-2">
+
    <script>
−
<h2 class="text-center font-weight-bold my-5">Introduction</h2>
+
        var logoEl = document.querySelector('.logo-animation');
−
<div class="row">
+
var pathEls = document.querySelectorAll('.logo-animation path:not(.icon-curve)');
−
<div data-aos="fade-up" data-aos-delay="0" data-aos-duration="1000" data-aos-once="true" class="col-md-4 text-center">
+
var innerWidth = window.innerWidth;
−
<img src="https://static.igem.org/mediawiki/2018/b/bd/T--USTC-Software--overview.jpeg" alt="overview" class="mx-auto">
+
var maxWidth = 740;
−
<h4>Overview</h4>
+
var logoScale = innerWidth <= maxWidth ? innerWidth / maxWidth : 1;
−
<p>Our product is a universal experiment description language and related platform that focuses on simplifying some unnecessary quantifiers during the completion of the experiment report and unifying the description of the experimental process. At the same time, the platform we set up can realize the management of the experimental process, and the intelligent management of experimental consumables, so as to avoid the stagnation of progress due to the shortage of consumables in the experimental process.</p>
+
var logoTimeline = anime.timeline();
−
</div>
+
−
<div data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000" data-aos-once="true" class="col-md-4 text-center">
+
−
<img src="https://static.igem.org/mediawiki/2018/5/5c/T--USTC-Software--advantages.jpeg" alt="advantages" class="mx-auto">
+
−
<h4>Advantages</h4>
+
−
<p> On the one hand, we can reduce the burden on researchers in the completion of the experimental report. On the other hand, we can reduce unnecessary misunderstandings during the exchange of experiments by constructing a unified standard.</p>
+
−
</div>
+
−
<div data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000" data-aos-once="true" class="col-md-4 text-center">
+
−
<img src="https://static.igem.org/mediawiki/2018/e/e1/T--USTC-Software--platform.jpeg" alt="platform" class="mx-auto">
+
−
<h4>Platform</h4>
+
−
<p>At the same time, this platform can also realize user-to-user communication like the community. Users can post and discuss issues related to experiments on them. Under the unified standard, experimental reports will be accepted more quickly, and information exchange will be realized. At the next experiment, the problem of browsing in the community can be avoided, thereby improving efficiency and success rate.</p>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<!-- feature (skew background) -->
+
−
<div class="jumbotron jumbotron-fluid feature" id="feature-first">
+
−
<div class="container my-5">
+
−
<div class="row justify-content-between text-center text-md-left">
+
−
<div data-aos="fade-right" data-aos-duration="1000" data-aos-once="true" class="col-md-6">
+
−
<h2 class="font-weight-bold">Motivation</h2>
+
−
<p class="my-4">
+
−
After consulting with many synthetic biology workers, we found that they would inevitably suffer from the need to spend a lot of time to complete the experimental report during the experiment. At the same time, they will be prone to problems when communicating with each other for the sake of difficulty in harmonizing standards. Therefore, there is an urgent need for a unified language to accurately describe the experimental process, and to provide a number of practical tools such as drawing, tabulation, writing articles, etc., thereby reducing these problems.
+
−
<br>
+
−
On the other hand, synthetic biology experiments may be suspended due to the shortage of raw materials, resulting in delays. This problem will seriously slow down the project. We want to prevent similar incidents from happening, so we have designed a module that can accomplish intelligent management of project consumables in related platforms.
+
−
<br>
+
−
But at the same time, for most synthetic biology workers, it is difficult for them to conduct effective exchanges on experimental content. So we launched a construction for a synthetic biology community. In this community, bio workers can use this to record their experimental process and communicate on it for more information, thereby reducing the blindness of the experiment.
+
−
</p>
+
−
</div>
+
−
<div data-aos="fade-left" data-aos-duration="1000" data-aos-once="true" class="col-md-6 align-self-center">
+
−
<img src="https://static.igem.org/mediawiki/2018/e/e3/T--USTC-Software--motivation.png" alt="Why we do this" class="mx-auto d-block">
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<!-- feature (green background) -->
+
−
<div class="jumbotron jumbotron-fluid feature" id="feature-last">
+
−
<div class="container">
+
−
<div class="row justify-content-between text-center text-md-left">
+
−
<div data-aos="fade-left" data-aos-duration="1000" data-aos-once="true" class="col-md-6 flex-md-last">
+
−
<h2 class="font-weight-bold">Implement</h2>
+
−
<p class="my-4">
+
−
We have embedded in the editor the ability to quickly perform mathematical calculations, draw tables, and draw pictures, thereby reducing user barriers. At the same time, we use a structured language to describe the process. Its advantages lie in its ability to clearly and quantitatively describe the experimental process, and it also facilitates the generation of flow charts for communication and display. In order to more clearly demonstrate the entire biological experiment, we adopted a nested approach and constructed a structure similar to the HTML tree description.
+
  
−
<br>
+
logoEl.style.transform = 'translateY(50px) scale('+logoScale+')';
−
We not only provide a new markup language, but also provide a related editing environment. We have set up a toolbar, an editing area, a real-time preview area, and a smart prompt area to improve the efficiency of writing reports and eliminate them. The pain of writing code, using the GUI to complete the report is also conducive to the author to more convenient rendering, and see the results obtained in real time. And we also provide a variety of forms of output that can be converted to PDF, etc. for saving.
+
−
</p>
+
−
</div>
+
−
<div data-aos="fade-right" data-aos-duration="1000" data-aos-once="true" class="col-md-6 align-self-center flex-md-first">
+
−
<img src="https://static.igem.org/mediawiki/2018/b/b6/T--USTC-Software--implement.png" alt="Accessible and powerful" class="mx-auto d-block">
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
 
+
−
<!-- price table -->
+
−
<div class="container my-5 py-2" id="price-table">
+
−
<h2 class="text-center font-weight-bold d-block mb-3">To be improved</h2>
+
−
<div class="row">
+
−
<div data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000" data-aos-once="true" class="col-md-12 text-center py-4 mt-5">
+
−
<p class="my-4">
+
−
The interface design of the editor is not yet fully finalized. We also need to further refine the design and implementation based on the features we want to implement. At the same time, we will add and debug more new features. The communication platform we will build will also begin testing.
+
−
</p>
+
−
</div>
+
−
<div data-aos="fade-right" data-aos-delay="200" data-aos-duration="1000" data-aos-once="true" class="col-md-12 text-center py-4 mt-5">
+
−
<p class="font-weight-bold">And more</p>
+
−
</div>
+
−
</div>
+
−
</div>
+
  
 +
for (var i = 0; i < pathEls.length; i++) {
 +
  var el = pathEls[i];
 +
  el.setAttribute('stroke-dashoffset', anime.setDashoffset(el));
 +
}
  
−
<script src="https://static.igem.org/mediawiki/2018/8/81/T--USTC-Software--aos&ctype=txt/javascript"></script>
+
logoTimeline
−
<script>
+
  .add({
−
   AOS.init({
+
  targets: '.dot-e',
−
   });
+
  translateX: [
−
</script>
+
    { value: -600, duration: 520, delay: 200, easing: 'easeInQuart' },
−
</body>
+
    { value: [-100, 0], duration: 500, delay: 1000, easing: 'easeOutQuart' }
 +
  ],
 +
  scale: [
 +
    { value: [0, 1], duration: 200, easing: 'easeOutBack' },
 +
    { value: 0, duration: 20, delay: 500, easing: 'easeInQuart' },
 +
    { value: 1, duration: 200, delay: 1000, easing: 'easeOutQuart' },
 +
    { value: 0, duration: 400, delay: 500, easing: 'easeInBack' }
 +
  ],
 +
  offset: 0
 +
})
 +
  .add({
 +
  targets: '.dot-i',
 +
  translateY: { value: [-200, 0], duration: 500, elasticity: 400 },
 +
  scale: [
 +
    { value: [0, 1], duration: 100, easing: 'easeOutQuart' },
 +
    { value: 0, duration: 400, delay: 1400, easing: 'easeInBack' }
 +
  ],
 +
  delay: 1200,
 +
  offset: 0
 +
})
 +
   .add({
 +
   targets: '.fill.in',
 +
  strokeDashoffset: {
 +
    value: [anime.setDashoffset, 0],
 +
    duration: 600,
 +
    delay: function(el, i, t) { return 700 + ( i * 100 ); },
 +
    easing: 'easeOutQuart'
 +
  },
 +
  stroke: {
 +
    value: ['#FFF', function(el) { return anime.getValue(el.parentNode, 'stroke') } ],
 +
    duration: 500,
 +
    delay: 500,
 +
    easing: 'easeInQuad'
 +
  },
 +
  opacity: {
 +
    value: 0,
 +
    duration: 1,
 +
    delay: function(el, i, t) { return 1900 + ( i * 80 ); },
 +
  },
 +
  offset: 0
 +
})
 +
  .add({
 +
  targets: '.fill.out',
 +
  strokeDashoffset: [
 +
    { value: [anime.setDashoffset, anime.setDashoffset], duration: 1890 },
 +
    {
 +
      value: [0, anime.setDashoffset],
 +
      duration: 800,
 +
      delay: function(el, i) { return (i * 80); },
 +
      easing: 'easeInQuart'
 +
    }
 +
  ],
 +
  offset: 0
 +
})
 +
  .add({
 +
  targets: '.line.out',
 +
  strokeDashoffset: {
 +
    value: [0, anime.setDashoffset],
 +
    duration: 1200,
 +
    delay: function(el, i, t) { return 2500 + ( i * 100 ); },
 +
    easing: 'easeInQuart'
 +
  },
 +
  strokeWidth: {
 +
    value: [0, 2],
 +
    delay: function(el, i, t) { return 2000 + ( i * 100 ); },
 +
    duration: 200,
 +
    easing: 'linear'
 +
  },
 +
  offset: 0
 +
})
 +
  .add({
 +
  targets: '.icon',
 +
  opacity: { value: 1, duration: 10, delay: 2800, easing: 'linear' },
 +
  translateY: { value: 60, duration: 800 },
 +
  delay: 4200,
 +
  offset: 0
 +
})
 +
  .add({
 +
  targets: '.icon-line',
 +
  strokeDashoffset: [
 +
    { value: [anime.setDashoffset, anime.setDashoffset], duration: 3000 },
 +
    { value: 0, duration: 1200, easing: 'easeInOutQuart' }
 +
  ],
 +
  strokeWidth: {
 +
    value: [8, 2],
 +
    delay: 3000,
 +
    duration: 800,
 +
    easing: 'easeInQuad'
 +
  },
 +
  stroke: {
 +
    value: ['#FFF', function(el) { return anime.getValue(el, 'stroke') } ],
 +
    duration: 800,
 +
    delay: 3400,
 +
    easing: 'easeInQuad'
 +
  },
 +
  offset: 0
 +
})
 +
  .add({
 +
  targets: ['.icon-text path', '.icon-text polygon'],
 +
  translateY: [50, 0],
 +
  opacity: { value: [0, 1], duration: 100, easing: 'linear' },
 +
  delay: function(el, i, t) { return 4200 + ( i * 20 ); },
 +
  offset: 0
 +
});</script>
 +
</html>

Revision as of 09:58, 11 October 2018