Difference between revisions of "Team:Bielefeld-CeBiTec/Hardware"

(Prototype team page)
 
Line 1: Line 1:
−
{{Bielefeld-CeBiTec}}
+
{{Template:Bielefeld-CeBiTec/Menu}}
 +
<!-- Achtung immer erst bild Links dann rechts sonst passt die nummerierung nicht!-->
 
<html>
 
<html>
 +
<head>
 +
<title>Progress Indicator Animation</title>
 +
<!--<link rel="stylesheet" href="css/normalize.css">-->
 +
<link rel="stylesheet" type="text/css" href="https://2019.igem.org/Team:Bielefeld-CeBiTec/CSS?action=raw&ctype=text/css">
 +
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 +
<link rel="stylesheet" href="https://2019.igem.org/Team:Bielefeld-CeBiTec/CircleStyle?action=raw&ctype=text/css">
 +
<link rel="stylesheet" type="text/css" href="https://2019.igem.org/Team:Bielefeld-CeBiTec/MenuCSS?action=raw&ctype=text/css">
 +
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
 +
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
 +
<!--[if IE lte 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 +
      <script src="https://2019.igem.org/Team:Bielefeld-CeBiTec/jquery.min?debug=false&lang=en&modules=startup&only=scripts&skin=igem&*"></script>
 +
<script src="https://2019.igem.org/Team:Bielefeld-CeBiTec/script.js?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=igem&version=20161104T193904Z"></script>
 +
</head>
 +
<body>
 +
<div class="Wrapper">
 +
<!-- <div class="progress-indicator">
 +
<svg>
 +
<g>
 +
<circle cx="0" cy="0" r="20" stroke="transparent" class="animated-circle" transform="translate(50,50) rotate(-90)"  />
 +
</g>
 +
<g>
 +
<circle cx="0" cy="0" r="38" transform="translate(50,50) rotate(-90)"  />
 +
</g>
 +
</svg>
 +
<div class="progress-count"></div>
 +
</div> -->
  
 +
<div class="progress-indicator" id="prog2">
 +
<svg>
 +
<g>
 +
<circle cx="0" cy="0" r="10" stroke="transparent" class="animated-circle-zwei" transform="translate(50,50) rotate(-90)"  />
 +
</g>
 +
<g>
 +
<circle cx="0" cy="0" r="28" transform="translate(50,50) rotate(-90)"  />
 +
</g>
 +
</svg>
 +
<!-- <div class="progress-count-zwei"></div>-->
 +
</div>
  
 +
<div class="progress-indicator" id="prog3">
 +
<svg>
 +
<g>
 +
<circle cx="0" cy="0" r="10" stroke="transparent" class="animated-circle-drei" transform="translate(50,50) rotate(-90)"  />
 +
</g>
 +
<g>
 +
<circle cx="0" cy="0" r="28" transform="translate(50,50) rotate(-90)"  />
 +
</g>
 +
</svg>
 +
<!-- <div class="progress-count-drei"></div>-->
 +
</div>
  
−
<div class="column full_size judges-will-not-evaluate">
+
<div class="progress-indicator" id="prog4">
−
<h3>★  ALERT! </h3>
+
<svg>
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2019.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2019.igem.org/Judging/Awards"> award listed below</a>. </p>
+
<g>
−
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2019.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
+
<circle cx="0" cy="0" r="10" stroke="transparent" class="animated-circle-vier" transform="translate(50,50) rotate(-90)"  />
−
</div>
+
</g>
 +
<g>
 +
<circle cx="0" cy="0" r="28" transform="translate(50,50) rotate(-90)"  />
 +
</g>
 +
</svg>
 +
</div>
  
 +
<!-- <main>-->
 +
<!-- <article>-->
 +
  
−
<div class="clear"></div>
 
  
 +
<div class="dark">
 +
<div class="headerfoto">
 +
<img src="https://2019.igem.org/wiki/images/3/3b/T--Bielefeld-CeBiTec--TestGraph.png" width="100%" height="300px">
 +
<div id="titleText">
 +
Hardware
 +
</div>
 +
</div>
  
 +
<!-- <div class="contentBlock">
 +
<h1>This is a headline </h1>
 +
<hr>
  
−
<div class="column full_size">
 
  
−
<h1>Hardware</h1>
+
</div> -->
  
−
</div>
 
  
−
<div class="column two_thirds_size">
+
<div class="contentBlock">
−
<h3>Best Hardware Special Prize</h3>
+
−
<p>In addition to encouraging teams to work with DNA parts and build biological devices in the lab, iGEM also encourages other types of technical solutions for synthetic biology. This can include physical devices (hardware) related to robotic assembly, microfluidics, low-cost measurement devices, to name a few examples. There are many exciting opportunities for hardware innovation in synthetic biology.
+
−
</p>
+
  
−
<p>
+
<div class="sum summaryBlock">
−
Teams who are interested in working with hardware in their project, or as a side project, are encouraged to apply for the Best Hardware award.
+
<b style="color:#39F"> Summary </b><br>
−
<br><br>
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
−
To compete for the <a href="https://2019.igem.org/Judging/Awards">Best Hardware prize</a>, please describe your work on this page and also fill out the description on the <a href="https://2019.igem.org/Judging/Judging_Form">judging form</a>.
+
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
−
<br><br>
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
−
You must also delete the message box on the top of this page to be eligible for this prize.
+
</div>
−
</p>
+
</div>
−
</p>
+
</div>
−
</div>
+
</div>
  
−
<div class="column third_size">
+
<!-- SideMenu -->
−
<div class="highlight decoration_A_full">
+
<!--<div class="fixedBox">-->
−
<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="http://2018.igem.org/Team:Valencia_UPV/Hardware">2018 Valencia UPV</a></li>
+
−
<li><a href="http://2018.igem.org/Team:Unesp_Brazil/Hardware">2018 Unesp Brazil</a></li>
+
−
<li><a href="http://2016.igem.org/Team:Valencia_UPV">2016 Valencia UPV</a></li>
+
−
<li><a href="http://2016.igem.org/Team:Aachen">2016 Aachen </a></li>
+
−
<li><a href="http://2015.igem.org/Team:TU_Delft">2015 TU Delft  </a></li>
+
−
<li><a href="http://2015.igem.org/Team:TU_Darmstadt">2015 TU Darmstadt</a></li>
+
−
</ul>
+
−
</div>
+
  
−
</div>
 
  
 +
<!--Ende SubMenuBox-->
 +
<!--<div class="fixedBox">-->
  
  
 +
 +
<div class="sidemenu" id="sidenav">
 +
<ul style="list-style:none">
 +
<li class="space"> <a href="#aa1">Headline 1 </a> </li>
 +
<li class="space"> <a href="#aa2"> Headline 2 </a> </li>
 +
<li class="space"> <a href="#aa3"> Headline 3 </a> </li>
 +
</ul>
 +
</div>
 +
 +
<script> //macht das seiten menü Sticky//
 +
window.onscroll = function() {StickyFunction()};
 +
 +
// Get the navbar
 +
var navbar = document.getElementById("sidenav");
 +
 +
// Get the offset position of the navbar
 +
var sticky = sidenav.offsetTop;
 +
 +
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
 +
function StickyFunction() {
 +
if (window.pageYOffset >= (sticky-160)) {
 +
sidenav.classList.add("sticky")
 +
} else {
 +
sidenav.classList.remove("sticky");
 +
}
 +
}
 +
</script>
 +
<!--</div>-->
 +
 +
<div class="contentBlock">
 +
 +
<div id="Ende"> </div> <!--For the processbar please do not delete-->
 +
 +
<details>
 +
<summary> References </summary>
 +
<p> Quelle 1 </p>
 +
<p> Quelle 2 </p>
 +
<p> Quelle 3 </p>
 +
<p> Quelle 4 </p>
 +
<p> Quelle 5 </p>
 +
 +
</details>
 +
</div>
 +
</div>
 +
</div> <!-- End Wrapper-->
 +
<script> <!--Script for processbar please do not change anything-->
 +
(function(){
 +
  var $w = $(window);
 +
var $circ = $('.animated-circle');
 +
  var $circZwei= $('.animated-circle-zwei');
 +
  var $circDrei= $('.animated-circle-drei');
 +
  var $circVier= $('.animated-circle-vier');
 +
//var $progCount = $('.progress-count');
 +
//var $prog2 = $('.progress-indicator-2');
 +
//  var $progCountZwei = $('.progress-count-zwei');
 +
//  var $progCountDrei = $('.progress-count-drei');
 +
//  var $prog3= $('.progress-indicator-3');
 +
 +
var wh, h, sHeight, partOne, partTwo, partThree, partFour;
 +
 +
  function setSizes1(){
 +
wh = $w.height()+150;
 +
    s=$("#a1").offset().top+$(window).innerHeight(); //ist der Abstand vom Anfang der Seite bis nach der Summary
 +
    s2=$("#a2").offset().top+$(window).innerHeight();//+140; //Erster Abschnitt h1- H2
 +
    s3=$("#a3").offset().top+$(window).innerHeight()-50;
 +
    s4=($("#Ende").offset().top)+250; //zweiter Abschnitt h2-h3
 +
h = $('body').height()-$(window).innerHeight();
 +
partOne =s-wh;
 +
    partTwo= s2-(wh+partOne);//wh;
 +
    partThree=s3-(wh+partTwo+partOne);
 +
    partFour=s4-(wh+partThree+partTwo+partOne);
 +
}
 +
 +
setSizes1();
 +
 +
$w.on('scroll', function(){
 +
var percOne = Math.max(0, Math.min(1, $w.scrollTop()/partOne));
 +
    var percTwo = Math.max(0, Math.min(1, ($w.scrollTop()-partOne)/partTwo));
 +
    var percThree = Math.max(0, Math.min(1, ($w.scrollTop()-partTwo-partOne)/partThree));
 +
    var percFour = Math.max(0, Math.min(1, ($w.scrollTop()-partThree-partTwo-partOne)/partFour));
 +
 +
    updateProgress1(percTwo,percThree,percFour);
 +
  }).on('resize', function(){
 +
    setSizes1();
 +
    $w.trigger('scroll');
 +
  });
 +
 +
 +
function updateProgress1(percTwo,percThree,percFour){
 +
 +
var circle_offset = 63 * percTwo;
 +
    //var circle_offset_eins = 126 * percOne;
 +
    var circle_offset_zwei = 63 * percThree;
 +
    var circle_offset_drei = 63 * percFour;
 +
$circZwei.css({
 +
"stroke-dashoffset" : 63 - circle_offset
 +
});
 +
    //$circ.css({
 +
    //  "stroke-dashoffset" : 126 - circle_offset_eins
 +
    //});
 +
    $circDrei.css({
 +
      "stroke-dashoffset" : 63 - circle_offset_zwei
 +
    });
 +
    $circVier.css({
 +
      "stroke-dashoffset" : 63 - circle_offset_drei
 +
    });
 +
  //  $progCountZwei.html(Math.round(percTwo * 100) + "%");
 +
  //  $progCount.html(Math.round(percOne * 100) + "%");
 +
  //  $progCountDrei.html(Math.round(percThree * 100) + "%");
 +
// $prog2.css({width : perc*100 + '%'});
 +
  //  $prog2.css({width : perc*100 + '%'});
 +
  //  $prog2.css({width : perc*100 + '%'});
 +
 +
}
 +
 +
}());
 +
 +
</script>
 +
 +
 +
</body>
 
</html>
 
</html>
 +
{{Template:Bielefeld-CeBiTec/Footer}}

Revision as of 18:28, 30 July 2019

Progress Indicator Animation
Hardware
Summary
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
References

Quelle 1

Quelle 2

Quelle 3

Quelle 4

Quelle 5