Difference between revisions of "Team:UCL/Bactoman"

 
(25 intermediate revisions by the same user not shown)
Line 4: Line 4:
 
<head>
 
<head>
  
−
<script language="JavaScript">
+
<script type="text/JavaScript">
−
<!--
+
−
 
+
−
/* Here you make an array with all the URL's of the images you would like to have in your slideshow.*/
+
−
 
+
−
var image = new Array("/wiki/images/8/8d/UCLbactoman1.png", "/wiki/images/9/92/UCLbactoman2.png",
+
−
"/wiki/images/a/af/Uclbactoman3.png", "/wiki/images/f/fb/Uclbactoman4.png")
+
  
 +
var image = new Array("https://static.igem.org/mediawiki/2015/8/8d/UCLbactoman1.png", "https://static.igem.org/mediawiki/2015/9/92/UCLbactoman2.png",
 +
"https://static.igem.org/mediawiki/2015/a/af/Uclbactoman3.png", "https://static.igem.org/mediawiki/2015/f/fb/Uclbactoman4.png", "https://static.igem.org/mediawiki/2015/e/ee/Uclabctoman5.png", "https://static.igem.org/mediawiki/2015/2/25/Uclbactoman6.png", "https://static.igem.org/mediawiki/2015/5/5b/Uclbactoman7.png", "https://static.igem.org/mediawiki/2015/0/03/Uclbactoman8.png", "https://static.igem.org/mediawiki/2015/a/aa/Uclbactoman9.png", "https://static.igem.org/mediawiki/2015/0/02/Uclbactoman10.png", "https://static.igem.org/mediawiki/2015/2/23/Uclbactoman11.png", "https://static.igem.org/mediawiki/2015/8/8e/Uclbactoman12.png", "https://static.igem.org/mediawiki/2015/d/dc/Uclbactoman13.png", "https://static.igem.org/mediawiki/2015/8/8c/Uclbactoman14.png", "https://static.igem.org/mediawiki/2015/9/9a/Uclbactoman15.png", "https://static.igem.org/mediawiki/2015/f/f7/Uclbactoman16.png", "https://static.igem.org/mediawiki/2015/f/fc/Uclbactoman17.png", "https://static.igem.org/mediawiki/2015/9/9c/Uclbactoman18.png", "https://static.igem.org/mediawiki/2015/4/4a/Uclbactoman19.png", "https://static.igem.org/mediawiki/2015/8/83/Uclbactoman20.png", "https://static.igem.org/mediawiki/2015/1/1a/Uclbactoman21.png", "https://static.igem.org/mediawiki/2015/d/df/Uclbactoman22.png", "https://static.igem.org/mediawiki/2015/c/cb/Uclbactomanlast.png")
 
var imgNumber=1
 
var imgNumber=1
−
 
−
/* This number is used to refer to a value of the Array and to know what image should be shown next. */
 
−
 
−
 
 
var numberOfImg = image.length
 
var numberOfImg = image.length
  
−
/* This is the total amount of images you use, it is used to determine if the imgNumber can still grow. */
 
−
 
−
 
−
/* Now it's time to make the functions for the next and previous buttons */
 
  
 
function previousImage(){
 
function previousImage(){
Line 28: Line 16:
 
     imgNumber--
 
     imgNumber--
 
     }
 
     }
−
 
−
/* The if statement is used to know if you aren't already at the first image, because if you are, imgNumber may not decrease. */
 
−
 
 
   else{
 
   else{
 
   imgNumber = numberOfImg
 
   imgNumber = numberOfImg
−
}
+
}
−
+
−
/* If you already are at the first image, and you click the previous button, the slideshow must show the last image. */
+
−
 
+
  
 
   document.slideImage.src = image[imgNumber-1]
 
   document.slideImage.src = image[imgNumber-1]
−
 
+
    }
−
/* Load the image into the document. Don't forget to write imgNumber-1, an array always starts from 0! */
+
  
−
 
−
  }
 
 
function nextImage(){
 
function nextImage(){
 
   if(imgNumber < numberOfImg){
 
   if(imgNumber < numberOfImg){
Line 49: Line 28:
 
     }
 
     }
 
 
−
/* The if statement is used to know if you aren't already at the last image, because if you are, imgNumber may not increase. */
 
−
 
 
   else{
 
   else{
 
   imgNumber = 1
 
   imgNumber = 1
 
}
 
}
−
 
−
/* If you already are at the last image, and you click the next button, the slideshow must show the first image. */
 
−
 
−
 
 
   document.slideImage.src = image[imgNumber-1]
 
   document.slideImage.src = image[imgNumber-1]
−
 
 
−
/* Load the image into the document. Don't forget to write imgNumber-1, an array always starts from 0! */
 
−
 
−
 
 
   }
 
   }
 
    
 
    
−
 
 
−
/* Now it is time for the code that preloads the images. */
 
−
 
−
/* Check if your browser supports the Image Object. */
 
−
 
 
if(document.images){
 
if(document.images){
−
 
−
 
−
  /* Create a new Image Object. */
 
−
 
 
 
   var image1 = new Image()
 
   var image1 = new Image()
−
 
+
   image1.src = "https://static.igem.org/mediawiki/2015/8/8d/UCLbactoman1.png"
−
 
+
−
  /* Give the source of the image to the Image Object. */
+
−
 
+
−
   image1.src = "/wiki/images/8/8d/UCLbactoman1.png"
+
−
 
+
−
 
+
−
  /* Repeat this for all the images you would like to preload.
+
−
 
+
−
  Make sure that you do not preload too many images, this will make your document load slow. */
+
 
   var image2 = new Image()
 
   var image2 = new Image()
−
   image2.src = "/learn/javascript/Apple.jpg"
+
   image2.src = "https://static.igem.org/mediawiki/2015/9/92/UCLbactoman2.png"
 
   var image3 = new Image()
 
   var image3 = new Image()
−
   image3.src = "/learn/javascript/Linux.png"
+
   image3.src = "https://static.igem.org/mediawiki/2015/a/af/Uclbactoman3.png"
 
   var image4 = new Image()
 
   var image4 = new Image()
−
   image4.src = "/learn/javascript/Windows.jpg"
+
   image4.src = "https://static.igem.org/mediawiki/2015/f/fb/Uclbactoman4.png"
 +
  var image5 = new Image()
 +
  image5.src = "https://static.igem.org/mediawiki/2015/e/ee/Uclabctoman5.png"
 +
  var image6 = new Image()
 +
  image6.src = "https://static.igem.org/mediawiki/2015/2/25/Uclbactoman6.png"
 +
  var image7 = new Image()
 +
  image7.src = "https://static.igem.org/mediawiki/2015/5/5b/Uclbactoman7.png"
 +
  var image8 = new Image()
 +
  image8.src = "https://static.igem.org/mediawiki/2015/0/03/Uclbactoman8.png"
 +
 
 
   }
 
   }
 
    
 
    
−
//-->
+
 
 +
 
 
</script>
 
</script>
  
Line 188: Line 149:
 
{
 
{
 
content: "";
 
content: "";
−
    background-image: url('https://static.igem.org/mediawiki/2015/e/e7/UCL_MG_6312_2.png');
+
background: #000;
−
    -webkit-filter:blur(2px);
+
−
  -moz-filter: blur(2px);
+
−
  -o-filter: blur(2px);
+
−
  -ms-filter: blur(2px);
+
−
  filter: blur(2px);
+
 
   background-repeat: no-repeat;
 
   background-repeat: no-repeat;
 
   background-attachment: fixed !important;
 
   background-attachment: fixed !important;
Line 203: Line 159:
 
-moz-box-sizing: border-box;
 
-moz-box-sizing: border-box;
 
box-sizing: border-box;
 
box-sizing: border-box;
−
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 1200, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.2)));
 
 
     position: absolute;
 
     position: absolute;
 
     top: 0px;
 
     top: 0px;
Line 217: Line 172:
  
 
#mobilebackground {
 
#mobilebackground {
−
  background-image: url('https://static.igem.org/mediawiki/2015/e/e7/UCL_MG_6312_2.png');
+
background: #000;
−
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 300, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.2)));
+
−
 
+
 
     top: 0;
 
     top: 0;
 
     right: 0;
 
     right: 0;
Line 233: Line 186:
 
-moz-box-sizing: border-box;
 
-moz-box-sizing: border-box;
 
box-sizing: border-box;
 
box-sizing: border-box;
−
display: none;
+
display: block;
 
width: 100%;
 
width: 100%;
 
  height: 100%;
 
  height: 100%;
Line 328: Line 281:
  
  
−
@media(max-width:1152px){
 
−
 
−
.bigtitle {font-size: 14px;}
 
−
.bigtitle {width: 52%;}
 
−
.titlecircle {width: 80%;}
 
−
a.buttonblack {font-size: 11px; letter-spacing: 1.8px;}
 
−
.buttonblack {padding: 5px 8px;}
 
−
}
 
  
  
Line 465: Line 410:
 
padding: 50px;
 
padding: 50px;
 
margin-top: 50px;
 
margin-top: 50px;
−
font-size: 18px;
+
font-size: 14px;
 
letter-spacing: 2px;
 
letter-spacing: 2px;
 +
border-radius: 10px;
 
}
 
}
  
 +
#wrapperbacto img {width: 95%;}
  
 
</style>
 
</style>
Line 481: Line 428:
  
  
 +
<center>
 +
<span class="title2">Bactoman</span></center><br/>
 +
<p>
 +
Bactoman is a comic aimed to introduce our project to a younger audience. Set in a dystopian future where the mentally ill are excommunicated and abandoned by the society, Nathan Navaro takes the mantle of Bactoman to challenge the broken society. Bactoman utilises synthetic biology to help people with mental disorders!<br/><br/><br/>
  
 +
</p>
 +
<p></p>
 +
<p style="text-align: center; font-weight: bold;"><a href="JavaScript:previousImage()">Previous</a> &nbsp;  &nbsp;  &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <a href="JavaScript:nextImage()">Next</a></p>
 +
</p>
 
<p>
 
<p>
−
Bactoman is a comic aimed to introduce our project to a younger audience. Set in a dystopian future where the mentally ill are excommunicated and abandoned by the society, Nathan Navaro takes the mantle of Bactoman to challenge the broken society. Bactoman utilises synthetic biology to help people with mental disorders!
+
<img src="https://static.igem.org/mediawiki/2015/8/8d/UCLbactoman1.png" name="slideImage"></p>
−
</p>
+
  
−
 
+
<p style="text-align: center; font-weight: bold;"><a href="JavaScript:previousImage()">Previous</a> &nbsp;  &nbsp;  &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <a href="JavaScript:nextImage()">Next</a></p>
−
 
+
−
<table>
+
−
<tr>
+
−
<td> <img name="https://static.igem.org/mediawiki/2015/8/8d/UCLbactoman1.png" name="slideImage"></td>
+
−
</tr>
+
−
<tr>
+
−
<td><a href="JavaScript:previousImage()">Previous</a></td><td><a href="JavaScript:nextImage()">Next</a></td>
+
−
</tr>
+
−
</table>
+
  
  
  
  
 +
<br/>
  
  
 +
</div>
  
 +
<br/><br/>
 
</div>
 
</div>
  
Line 508: Line 456:
 
</div>
 
</div>
  
−
 
−
</div>
 
  
 
</div> </div>
 
</div> </div>

Latest revision as of 21:13, 31 October 2015

'

Bactoman

Bactoman is a comic aimed to introduce our project to a younger audience. Set in a dystopian future where the mentally ill are excommunicated and abandoned by the society, Nathan Navaro takes the mantle of Bactoman to challenge the broken society. Bactoman utilises synthetic biology to help people with mental disorders!


Previous                 Next

Previous                 Next