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

(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="column full_size">
+
<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>
  
−
<h1>Notebook</h1>
+
<div class="progress-indicator" id="prog4">
−
<p> Document the dates you worked on your project. This should be a detailed account of the work done each day for your project.</p>
+
<svg>
 +
<g>
 +
<circle cx="0" cy="0" r="10" stroke="transparent" class="animated-circle-vier" transform="translate(50,50) rotate(-90)"  />
 +
</g>
 +
<g>
 +
<circle cx="0" cy="0" r="28" transform="translate(50,50) rotate(-90)"  />
 +
</g>
 +
</svg>
 +
</div>
  
−
</div>
+
<!-- <main>-->
−
<div class="clear"></div>
+
<!-- <article>-->
 +
  
  
 +
<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">
 +
Notebook
 +
</div>
 +
</div>
  
−
<div class="column two_thirds_size">
+
<!-- <div class="contentBlock">
−
<h3>What should this page have?</h3>
+
<h1>This is a headline </h1>
−
<ul>
+
<hr>
−
<li>Chronological notes of what your team is doing.</li>
+
−
<li> Brief descriptions of daily important events.</li>
+
−
<li>Pictures of your progress. </li>
+
−
<li>Mention who participated in what task.</li>
+
−
</ul>
+
  
−
</div>
 
  
−
<div class="column third_size">
+
</div> -->
−
<div class="highlight decoration_A_full">
+
−
<h3>Inspiration</h3>
+
−
<p>You can see what others teams have done to organize their notes:</p>
+
  
−
<ul>
 
−
<li><a href="http://2018.igem.org/Team:Munich/Notebook">2018 Munich</a></li>
 
−
<li><a href="http://2014.igem.org/Team:ATOMS-Turkiye/Notebook">2014 ATOMS-Turkiye</a></li>
 
−
<li><a href="http://2014.igem.org/Team:Tec-Monterrey/ITESM14_project.html#tab_notebook">2014 Tec Monterrey</a></li>
 
−
<li><a href="http://2014.igem.org/Team:Kyoto/Notebook/Magnetosome_Formation#title">2014 Kyoto</a></li>
 
−
<li><a href="http://2014.igem.org/Team:Cornell/notebook">2014 Cornell</a></li>
 
−
</ul>
 
−
</div>
 
−
</div>
 
  
 +
<div class="contentBlock">
 +
 +
<div class="sum summaryBlock">
 +
<b style="color:#39F"> Summary </b><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.
 +
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.
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
 +
<!-- SideMenu -->
 +
<!--<div class="fixedBox">-->
 +
 +
 +
<!--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:39, 30 July 2019

Progress Indicator Animation
Notebook
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