Difference between revisions of "Team:York/TestBed"

 
(248 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
{{:Team:York/Templates/NavigationBar}}
 +
 
<html>
 
<html>
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 +
<script type="text/javascript">
 +
  var images = new Array();
 +
  images[0] = "//2017.igem.org/wiki/images/d/d4/TeamYork-Headshots-Sam1.jpg";
 +
  images[1] = "https://static.igem.org/mediawiki/2017/f/f9/TeamYork-Headshots-Sam2.jpg";
 +
  images[2] = "https://static.igem.org/mediawiki/2017/d/d0/TeamYork-Headshots-Helen.jpg";
 +
  images[3] = "https://static.igem.org/mediawiki/2017/0/0b/TeamYork-Headshots-Marta.jpg";
 +
  images[4] = "https://static.igem.org/mediawiki/2017/b/b3/TeamYork-Headshots-Joel.jpg";
 +
  images[5] = "https://static.igem.org/mediawiki/2017/8/8a/TeamYork-Headshots-Igors.jpg";
 +
  images[6] = "https://static.igem.org/mediawiki/2017/0/09/TeamYork-Headshots-Nathan.jpg";
 +
  images[7] = "https://static.igem.org/mediawiki/2017/0/08/TeamYork-Headshots-Aeri.jpg";
 +
  images[8] = "https://static.igem.org/mediawiki/2017/1/1c/TeamYork-Headshots-Joe.jpg";
 +
  images[9] = "DOMIMAGE";
 +
  images[10] = "//2017.igem.org/wiki/images/d/d4/TeamYork-Headshots-Sam1.jpg";
 +
  images[11] = "https://static.igem.org/mediawiki/2017/f/f9/TeamYork-Headshots-Sam2.jpg";
 +
  images[12] = "https://static.igem.org/mediawiki/2017/d/d0/TeamYork-Headshots-Helen.jpg";
 +
  images[13] = "https://static.igem.org/mediawiki/2017/0/0b/TeamYork-Headshots-Marta.jpg";
 +
  images[14] = "https://static.igem.org/mediawiki/2017/b/b3/TeamYork-Headshots-Joel.jpg";
 +
  images[15] = "https://static.igem.org/mediawiki/2017/8/8a/TeamYork-Headshots-Igors.jpg";
 +
  images[16] = "https://static.igem.org/mediawiki/2017/0/09/TeamYork-Headshots-Nathan.jpg";
 +
  images[17] = "https://static.igem.org/mediawiki/2017/0/08/TeamYork-Headshots-Aeri.jpg";
 +
  images[18] = "https://static.igem.org/mediawiki/2017/1/1c/TeamYork-Headshots-Joe.jpg";
 +
  images[19] = "DOMIMAGE";
 +
 +
  var imagetext = new Array();
 +
  imagetext[0] = "Sam F: a proud member of Homo cynicus.";
 +
  imagetext[1] = "Sam A: likes to pretend he's only half German... but look at him.";
 +
  imagetext[2] = "Helen: loud and proud. Mostly loud.";
 +
  imagetext[3] = "Marta: TBC. TBC. TBC. TBC. TBC. TBC. TBC. TBC. TBC. TBC. TBC.";
 +
  imagetext[4] = "Joel: can see the matrix... if it's written in MATLAB.";
 +
  imagetext[5] = "Igors: he's ALIVE!";
 +
  imagetext[6] = "Nathan: lean, mean, meme machine.";
 +
  imagetext[7] = "Malin Imo Kristina Olsson Sundstrom: Aeri, for short.";
 +
  imagetext[8] = "Joe: TBC. TBC. TBC. TBC. TBC. TBC. TBC. TBC. TBC. TBC. TBC.";
 +
  imagetext[9] = "Dom: TBC. TBC. TBC. TBC. TBC. TBC. TBC. TBC. TBC. TBC. TBC.";
 +
  imagetext[10] = "Sam F: a proud member of Homo cynicus.";
 +
  imagetext[11] = "Sam A: likes to pretend he's only half German... but look at him.";
 +
  imagetext[12] = "Helen: loud and proud. Mostly loud.";
 +
  imagetext[13] = "Marta: half person, half Jaffa Cake.";
 +
  imagetext[14] = "Joel: can see the matrix... if it's written in MATLAB.";
 +
  imagetext[15] = "Igors: he's ALIVE!";
 +
  imagetext[16] = "Nathan: lean, mean, meme machine.";
 +
  imagetext[17] = "Malin Imo Kristina Olsson Sundstrom: Aeri, for short.";
 +
  imagetext[18] = "Joe: TBC. TBC. TBC. TBC. TBC. TBC. TBC. TBC. TBC. TBC. TBC.";
 +
  imagetext[19] = "Dom: TBC. TBC. TBC. TBC. TBC. TBC. TBC. TBC. TBC. TBC. TBC.";
 +
 +
  function changeImage1() {
 +
    document.getElementById('TeamImg1').src = images[x];
 +
    if (x<16) {
 +
      x+=4;
 +
    }
 +
 +
    else if (x>=16) {
 +
      x=0;
 +
    }
 +
    setTimeout(function () {
 +
      document.getElementById('TeamImg1Text').textContent = imagetext[a];
 +
      if (a<16) {
 +
        a+=4;
 +
      }
 +
 +
      else if (a>=16) {
 +
        a=0;
 +
      }
 +
    }, 100);
 +
  }
  
−
<!--<meta name="viewport" content="user-scalable=1, width=400">-->
+
  function changeImage2() {
−
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
+
    document.getElementById('TeamImg2').src = images[y];
 +
    if (y<17) {
 +
      y+=4;
 +
    }
  
−
<link href="//2017.igem.org/Team:York/Assets/Bootstrap_part0_css?action=raw&ctype=text/css" rel="stylesheet">
+
    else if (y>=17) {
−
<link href="//2017.igem.org/Team:York/Assets/Bootstrap_part1_css?action=raw&ctype=text/css" rel="stylesheet">
+
      y=1;
−
<link href="//2017.igem.org/Team:York/Assets/Bootstrap_part2_css?action=raw&ctype=text/css" rel="stylesheet">
+
    }
−
<link href="//2017.igem.org/Team:York/Assets/Bootstrap_part3_css?action=raw&ctype=text/css" rel="stylesheet">
+
    setTimeout(function () {
−
<link href="//2017.igem.org/Team:York/Assets/Bootstrap_part4_css?action=raw&ctype=text/css" rel="stylesheet">
+
      document.getElementById('TeamImg2Text').textContent = imagetext[b];
−
<link href="//2017.igem.org/Team:York/Assets/Bootstrap_part5_css?action=raw&ctype=text/css" rel="stylesheet">
+
      if (b<17) {
 +
        b+=4;
 +
      }
  
−
<div style="padding:20px;margin-top:30px;background-color:#ffffff;height:1500px;">
+
      else if (b>=17) {
−
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quae qui non vident, nihil umquam magnum ac cognitione dignum amaverunt. Ita enim vivunt quidam, ut eorum vita refellatur oratio. Itaque ad tempus ad Pisonem omnes. Sit hoc ultimum bonorum, quod nunc a me defenditur; Tria genera bonorum; Quae autem natura suae primae institutionis oblita est?
+
        b=1;
 +
      }
 +
    }, 100);
 +
  }
  
−
Ut id aliis narrare gestiant? Ergo illi intellegunt quid Epicurus dicat, ego non intellego? Teneo, inquit, finem illi videri nihil dolere. Quod autem principium officii quaerunt, melius quam Pyrrho; In eo enim positum est id, quod dicimus esse expetendum. Quis non odit sordidos, vanos, leves, futtiles? Ita fit cum gravior, tum etiam splendidior oratio.
+
  function changeImage3() {
 +
    document.getElementById('TeamImg3').src = images[z];
 +
    if (z<18) {
 +
      z+=4;
 +
    }
  
−
Praeteritis, inquit, gaudeo. Duo Reges: constructio interrete. Ubi ut eam caperet aut quando? Sed haec omittamus; Eorum enim est haec querela, qui sibi cari sunt seseque diligunt. Beatus sibi videtur esse moriens. Ego vero volo in virtute vim esse quam maximam; Non enim iam stirpis bonum quaeret, sed animalis. Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius. Quod autem ratione actum est, id officium appellamus.
+
    else if (z>=18) {
 +
      z=2;
 +
    }
 +
    setTimeout(function () {
 +
      document.getElementById('TeamImg3Text').textContent = imagetext[c];
 +
      if (c<18) {
 +
        c+=4;
 +
      }
  
−
Nulla profecto est, quin suam vim retineat a primo ad extremum. Theophrasti igitur, inquit, tibi liber ille placet de beata vita? Res enim se praeclare habebat, et quidem in utraque parte. Equidem e Cn. Quia, si mala sunt, is, qui erit in iis, beatus non erit. Ea, quae dialectici nunc tradunt et docent, nonne ab illis instituta sunt aut inventa sunt?
+
      else if (c>=18) {
 +
        c=2;
 +
      }
 +
    }, 100);
 +
  }
  
−
Nam quid possumus facere melius? Quasi vero, inquit, perpetua oratio rhetorum solum, non etiam philosophorum sit. Et quod est munus, quod opus sapientiae?
+
    var x = 0; a = 0; y = 1; b = 1; z = 2; c = 2;
 +
    setInterval(function() {
 +
      changeImage1(); changeImage2(); changeImage3();
 +
    },5000);
 +
</script>
 +
 
 +
<style>
 +
.TeamImg {
 +
  object-fit: cover;
 +
}
 +
</style>
 +
<body style="background-color: #fff;">
 +
<div>
 +
    <!-- Header -->
 +
  <div class="cam-container">
 +
    <header class="intro-header" style="background: url(//2017.igem.org/wiki/images/2/27/TeamYork-TemporaryBackground.png); background-size: 100%; background-position:0px 20px;">
 +
        <div class="container">
 +
            <div class="intro-message text-center container">
 +
                <br style = “line-height:20px;”><br>
 +
                <h1 style="-webkit-text-stroke: 2px black; color:#fff;">Test Bed</h1>
 +
                <h1 style="-webkit-text-stroke: 2px black; color:#fff;">Testing HTML, CSS & JS</h1>
 +
            </div>
 +
        </div>
 +
    </header>
 +
  </div>
 +
</div>
 +
<!--<section id="sidebar" class="navbar-fixed navbar-left">
 +
  <ul style="list-style: none;">
 +
    <span style="color: #999;">
 +
    <li><a style="color: #444;" href="#week1">Week 1</a></li>
 +
    <li><a style="color: #444;" href="#week2">Week 2</a></li>
 +
    <li><a style="color: #444;" href="#week3">Week 3</a></li>
 +
    <li><a style="color: #444;" href="#week4">Week 4</a></li>
 +
    <li><a style="color: #444;" href="#week5">Week 5</a></li>
 +
    <li><a style="color: #444;" href="#week6">Week 6</a></li>
 +
    <li><a style="color: #444;" href="#week7">Week 7</a></li>
 +
    <li><a style="color: #444;" href="#week8">Week 8</a></li>
 +
    <li><a style="color: #444;" href="#week9">Week 9</a></li>
 +
    <li><a style="color: #444;" href="#week10">Week 10</a></li>
 +
    <li><a style="color: #444;" href="#week11">Week 11</a></li>
 +
    <li><a style="color: #444;" href="#week12">Week 12</a></li>
 +
    <li><a style="color: #444;" href="#week13">Week 13</a></li>
 +
    <li><a style="color: #444;" href="#week14">Week 14</a></li>
 +
    <li><a style="color: #444;" href="#week15">Week 15</a></li>
 +
    </span>
 +
  </ul>
 +
</section>-->
 +
<!--Page Content-->
 +
<div class="container">
 +
  <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum arcu ultricies nulla volutpat interdum. Donec quis eros ut felis elementum facilisis eu sed leo. Nam faucibus volutpat mauris at ultrices. Aliquam iaculis est ut ante finibus convallis. Phasellus ac risus ac neque vulputate imperdiet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas semper eget lacus eu vehicula. Mauris a lacinia risus. Mauris faucibus mi ligula, sit amet interdum urna tempor ut. Aliquam in venenatis nisi, ac feugiat sem. Sed accumsan ultricies leo, quis dictum dolor eleifend in.
 +
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus tempor, enim quis rutrum scelerisque, tortor tortor scelerisque ipsum, at ornare metus elit non ipsum. Duis et justo metus. Vivamus fermentum, augue id fringilla viverra, odio mauris scelerisque mauris, vel molestie dolor eros eget lectus. Aliquam accumsan ornare eros, in rhoncus mauris rhoncus in. Pellentesque eleifend sem ut nibh interdum, vitae euismod dolor dictum. Nunc non metus elementum, imperdiet justo at, molestie odio. Aliquam auctor vel risus sed efficitur. Quisque sagittis ac diam id malesuada. Sed sit amet interdum leo.  
 +
Proin molestie hendrerit ex, vel vulputate sapien semper in. Vestibulum blandit turpis justo, eget faucibus arcu vehicula ac. Curabitur sit amet purus pretium, dignissim risus a, pharetra lorem. Pellentesque metus tellus, consectetur vel tincidunt ut, varius vel dolor. Morbi at turpis suscipit, viverra diam sit amet, scelerisque odio. Duis laoreet sem posuere, rhoncus tellus quis, gravida leo. In imperdiet venenatis massa nec semper. Vestibulum sit amet scelerisque neque. Duis convallis ultricies justo, id faucibus lacus porttitor nec. Ut ornare nisi vel nunc vestibulum, et maximus dolor porttitor.
 +
Aliquam gravida velit quis turpis hendrerit, eu fermentum enim cursus. Vivamus sed fermentum arcu. In nec erat in turpis lacinia lacinia. Quisque a erat in metus aliquam tristique. Quisque venenatis quis purus vel accumsan. Etiam sit amet molestie nulla, nec pulvinar tortor. Suspendisse potenti. Nullam pulvinar ullamcorper lorem at scelerisque. Fusce commodo purus non pulvinar hendrerit. Pellentesque rhoncus ac felis nec tempus. Fusce sit amet congue massa.
 +
Sed dolor quam, venenatis eget orci in, interdum vulputate sem. Morbi tortor arcu, placerat eu rhoncus viverra, rhoncus et risus. Nam non consequat urna, vitae mattis nibh. Donec a ornare diam, vel tincidunt lacus. Morbi in egestas felis, vel venenatis magna. Nulla dolor sapien, consequat et malesuada eget, porta et nibh. Pellentesque volutpat arcu eu ex venenatis, id gravida lectus sodales. Quisque in posuere quam. Proin porttitor gravida ex, ut ultricies eros consequat id. Praesent eget mi eros. </h5>
 +
</div>
 +
<section>
 +
  <div class="container">
 +
    <div class="row text-center"> 
 +
      <div class="col-md-4">
 +
        <center class="TeamImg1">
 +
          <img id="TeamImg1" class="TeamImg" style="height: 475px; width: 375px; position: center; object-fit: cover;" src="https://static.igem.org/mediawiki/2017/d/d4/TeamYork-Headshots-Sam1.jpg" width="100%" height="100%">
 +
          <span id="TeamImg1Text">Sam F: a proud member of Homo cynicus.</span>
 +
        </center>
 +
      </div>
 +
      <div class="col-md-4">
 +
        <center class="TeamImg2">
 +
          <img id="TeamImg2" class="TeamImg" style="height: 475px; width: 375px; position: center; object-fit: cover;"
 +
src="https://static.igem.org/mediawiki/2017/f/f9/TeamYork-Headshots-Sam2.jpg" width="100%" height="100%">
 +
          <span id="TeamImg2Text">Sam A: likes to pretend he's only half German... but look at him.</span>
 +
        </center>
 +
      </div>
 +
      <div class="col-md-4">
 +
        <center class="TeamImg3">
 +
          <img id="TeamImg3" class="TeamImg" style="height: 475px; width: 375px; position: center; object-fit: cover;" src="https://static.igem.org/mediawiki/2017/d/d0/TeamYork-Headshots-Helen.jpg" width="100%" height="100%">
 +
          <span id="TeamImg3Text">Helen: loud and proud. Mostly loud.</span>
 +
        </center>
 +
      </div>
 +
    </div>
 +
  </div>
 +
</section>
  
 
</html>
 
</html>
 +
{{:Team:York/Templates/Footer}}

Latest revision as of 13:04, 12 September 2017

YORK



Test Bed

Testing HTML, CSS & JS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum arcu ultricies nulla volutpat interdum. Donec quis eros ut felis elementum facilisis eu sed leo. Nam faucibus volutpat mauris at ultrices. Aliquam iaculis est ut ante finibus convallis. Phasellus ac risus ac neque vulputate imperdiet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas semper eget lacus eu vehicula. Mauris a lacinia risus. Mauris faucibus mi ligula, sit amet interdum urna tempor ut. Aliquam in venenatis nisi, ac feugiat sem. Sed accumsan ultricies leo, quis dictum dolor eleifend in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus tempor, enim quis rutrum scelerisque, tortor tortor scelerisque ipsum, at ornare metus elit non ipsum. Duis et justo metus. Vivamus fermentum, augue id fringilla viverra, odio mauris scelerisque mauris, vel molestie dolor eros eget lectus. Aliquam accumsan ornare eros, in rhoncus mauris rhoncus in. Pellentesque eleifend sem ut nibh interdum, vitae euismod dolor dictum. Nunc non metus elementum, imperdiet justo at, molestie odio. Aliquam auctor vel risus sed efficitur. Quisque sagittis ac diam id malesuada. Sed sit amet interdum leo. Proin molestie hendrerit ex, vel vulputate sapien semper in. Vestibulum blandit turpis justo, eget faucibus arcu vehicula ac. Curabitur sit amet purus pretium, dignissim risus a, pharetra lorem. Pellentesque metus tellus, consectetur vel tincidunt ut, varius vel dolor. Morbi at turpis suscipit, viverra diam sit amet, scelerisque odio. Duis laoreet sem posuere, rhoncus tellus quis, gravida leo. In imperdiet venenatis massa nec semper. Vestibulum sit amet scelerisque neque. Duis convallis ultricies justo, id faucibus lacus porttitor nec. Ut ornare nisi vel nunc vestibulum, et maximus dolor porttitor. Aliquam gravida velit quis turpis hendrerit, eu fermentum enim cursus. Vivamus sed fermentum arcu. In nec erat in turpis lacinia lacinia. Quisque a erat in metus aliquam tristique. Quisque venenatis quis purus vel accumsan. Etiam sit amet molestie nulla, nec pulvinar tortor. Suspendisse potenti. Nullam pulvinar ullamcorper lorem at scelerisque. Fusce commodo purus non pulvinar hendrerit. Pellentesque rhoncus ac felis nec tempus. Fusce sit amet congue massa. Sed dolor quam, venenatis eget orci in, interdum vulputate sem. Morbi tortor arcu, placerat eu rhoncus viverra, rhoncus et risus. Nam non consequat urna, vitae mattis nibh. Donec a ornare diam, vel tincidunt lacus. Morbi in egestas felis, vel venenatis magna. Nulla dolor sapien, consequat et malesuada eget, porta et nibh. Pellentesque volutpat arcu eu ex venenatis, id gravida lectus sodales. Quisque in posuere quam. Proin porttitor gravida ex, ut ultricies eros consequat id. Praesent eget mi eros.
Sam F: a proud member of Homo cynicus.
Sam A: likes to pretend he's only half German... but look at him.
Helen: loud and proud. Mostly loud.
  • ABOUT US
  • We are an overgraduate team representing the University of York.
  • Our Quicker Way to Analyse Co-Cultures (QWACC) is our entry into the Hardware track for iGEM 2017.
    •