Difference between revisions of "Team:Exeter/BioMechDownload"

 
(16 intermediate revisions by the same user not shown)
Line 6: Line 6:
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
−
    
+
   <script type="text/javascript" async
 +
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
 +
  MathJax.Hub.Config({
 +
  tex2jax: {
 +
    inlineMath: [['$','$'], ['\\(','\\)']],
 +
    processEscapes: true
 +
  }
 +
});
 +
</script>
 
   
 
   
 
</head>
 
</head>
Line 47: Line 55:
 
       display:block !important;
 
       display:block !important;
 
   }
 
   }
−
  #soc{
+
#soc{
 
display:none;
 
display:none;
 
   }
 
   }
−
  .subdiv_banner.left img, .subdiv_banner.right img{
 
−
width:100%;
 
−
position: relative;
 
−
top: 32%;
 
−
-ms-transform: translateY(-50%) /* IE 9 */
 
−
    -webkit-transform: translateY(-50%) /* Chrome, Safari, Opera */
 
−
    transform: translateY(-50%);
 
−
}
 
 
}
 
}
 
#links{
 
#links{
 
color:#47BCC2;
 
color:#47BCC2;
 
/*font-size:20px;*/
 
/*font-size:20px;*/
−
font-size:1.6vw;
+
font-size:1.2vw;
 
margin:0 0.9vw 0.5vh 0.9vw;
 
margin:0 0.9vw 0.5vh 0.9vw;
 
padding:0;
 
padding:0;
Line 279: Line 279:
 
#Section_Link:hover{
 
#Section_Link:hover{
  
 +
}
 +
#sectionGap, #sectionGap:focus, #contentTitle{
 +
min-width:100%;
 +
min-height:10vh;
 +
background:#e8e8e8;
 +
display:block;
 +
font-size:400%;
 +
text-align:center;
 +
color:#47BCC2;
 +
text-decoration:none;
 +
border-style:none none solid none;
 +
border-width:3px;
 +
border-color:#8cd5d9;
 +
}
 +
#sectionGap:hover, #sectionGap:active{
 +
color:#339499;
 
}
 
}
 
#sectionGap, #sectionGap:focus, #contentTitle{
 
#sectionGap, #sectionGap:focus, #contentTitle{
Line 399: Line 415:
 
height:1px;
 
height:1px;
 
top:-15px;
 
top:-15px;
−
}
 
−
.img_banner{
 
−
width:100vw;
 
−
margin:40px 0 30px 0;
 
−
padding:0;
 
−
height:10vh;
 
−
background:#e8e8e8;
 
−
opacity:0.6;
 
 
}
 
}
 
/*Mobile and small screen css*/
 
/*Mobile and small screen css*/
Line 418: Line 426:
 
}
 
}
 
#title{
 
#title{
−
font-size:150%;
+
font-size:260%;
 +
}
 +
.banner_link{
 +
font-size:22px;
 +
}
 +
.div_banner{
 +
margin-top:20px;
 
}
 
}
 
/*Makes side pictures on banner invisible on small screens*/
 
/*Makes side pictures on banner invisible on small screens*/
Line 426: Line 440:
 
}
 
}
 
}
 
}
 +
#dropdownMenu1{
 +
margin-top:-0.15vw;
 +
background:#e8e8e8;
 +
border-style:none;
 +
}
 +
@media (min-width: 767px){
 +
.dropdown-menu{
 +
margin-top:24px;
 +
left:-19px;
 +
border-radius:0px;
 +
padding:4px;
 +
}
 +
}
 +
/*Mobile and small screen css*/
 +
@media (max-width: 767px){
 +
.div_vl.backgroundimage{
 +
height:37vh;
 +
background-size: auto 200%;
 +
}
 +
.div_l{
 +
display:none;
 +
}
 +
#logo_Banner_Desktop{
 +
display:none;
 +
}
 +
#logo_Banner_Mobile{
 +
display:block;
 +
width:100%;
 +
max-width:200px;
 +
margin:auto;
 +
}
 +
#dropdownMenu1{
 +
padding:2.5% 0 2% 0;
 +
margin:-1.6% auto -1.4% 0.9%;
 +
}
 +
#links{
 +
padding:10px 0;
 +
margin-left:0.85vw;
 +
}
 +
}
 +
#links_drop{
 +
color:#47BCC2;
 +
/*font-size:20px;*/
 +
font-size:1.2vw;
 +
margin:8px 0.9vw 0.5vh 0.9vw;
 +
padding:0.06vw 0 0 0;
 +
line-height:0px;
 +
}
 +
@media (max-width: 920px){
 +
#links_drop{
 +
margin-left:0;
 +
padding-top:9px;
 +
margin-top:-4px;
 +
font-size:20px;
 +
}
 +
}
 +
button.dropdown-toggle{
 +
padding-top:21px; !important
 +
}
 +
@media (max-width: 767px){
 +
button.dropdown-toggle{
 +
padding-top:5px;
 +
}
 +
}
 +
#links_drop:hover span{
 +
color:#339499;
 
}
 
}
−
</style>
 
−
<!--BioMech download page styling-->
 
−
<style type="text/css">
 
−
 
 
</style>
 
</style>
 
<div id="top_page" class="link_fix"></div>
 
<div id="top_page" class="link_fix"></div>
Line 449: Line 525:
 
     <div>
 
     <div>
 
         <div class="collapse navbar-collapse" id="myNavbar">
 
         <div class="collapse navbar-collapse" id="myNavbar">
−
<ul class="nav navbar-nav">
+
<ul class="nav navbar-nav">
−
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Project">Project</a></li>
+
<li><div id="links_drop" class="dropdown">
 +
  <button class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
 +
    <span style="margin-bottom:4px;">Lab</span>
 +
    <span class="caret"></span>
 +
  </button>
 +
  <ul class="dropdown-menu" style="background:#e8e8e8;margin-left:25px;" aria-labelledby="dropdownMenu1">
 +
<li><a id="links" style="margin:10px 0 30px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Project">Lab Project</a></li>
 +
    <li><a id="links" style="margin:30px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Labbook">Lab Book</a></li>
 +
<li><a id="links" style="margin:30px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Safety">Safety</a></li>
 +
 
 +
  </ul>
 +
</div></li>
 
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Parts">Parts</a></li>
 
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Parts">Parts</a></li>
 
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Team">Team</a></li>
 
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Team">Team</a></li>
−
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Human_Practices">Human Practices</a></li>
+
<li><a id="links" href="https://2016.igem.org/Team:Exeter/Interlab">InterLab</a></li>
 +
<li><div id="links_drop" class="dropdown">
 +
  <button class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
 +
    <span style="margin-bottom:4px;">Human Practices</span>
 +
    <span class="caret"></span>
 +
  </button>
 +
  <ul class="dropdown-menu" style="background:#e8e8e8;margin-left:25px;" aria-labelledby="dropdownMenu1"> 
 +
    <li><a id="links" style="margin:10px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Integrated_Practices">Integrated</a></li>
 +
<li><a id="links" style="background:none;line-height:0.7vh;margin:30px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Engagement">Public Engagement<br /><br /><br /> & Education</a></li><li><a id="links" style="margin:30px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Log">Log</a></li>
 +
 
 +
  </ul>
 +
</div></li>
 +
 
 
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Attributions">Attributions</a></li>
 
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Attributions">Attributions</a></li>
−
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Awards">Awards</a></li>
+
 
−
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Log">Log</a></li>
+
<li><div id="links_drop" class="dropdown">
−
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Collaborations">Collaborations</a></li>
+
  <button class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
−
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Interlab">InterLab</a></li>
+
    <span style="margin-bottom:4px;">Awards</span>
 +
    <span class="caret"></span>
 +
  </button>
 +
  <ul class="dropdown-menu" style="background:#e8e8e8;margin-left:25px;" aria-labelledby="dropdownMenu1">
 +
 
 +
<li><a id="links" style="margin:10px 0 30px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Awards">Awards</a></li>
 +
<li><span style="margin:10px 0 30px 2px;padding:0;"><u>Special pages</u></span></li>
 +
<li><a id="links" style="margin:30px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/HP/Silver">HP Silver</a></li>
 +
<li><a id="links" style="margin:30px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/HP/Gold">HP Gold</a></li>
 +
 
 +
  </ul>
 +
</div></li>
 +
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Model">Models</a></li>
 +
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Collaborations">Collaborations</a></li>
 +
 
 +
 
 +
 
 
</ul>
 
</ul>
 
<ul class="nav navbar-nav navbar-right">
 
<ul class="nav navbar-nav navbar-right">
Line 514: Line 629:
 
$('#logo_inverse').toggle();
 
$('#logo_inverse').toggle();
 
});
 
});
−
//Smooth scrolling//
 
−
$('a[href^="#"]').on('click',function (e) {
 
−
    e.preventDefault();
 
−
 
−
    var target = this.hash;
 
−
    var $target = $(target);
 
−
 
−
    $('html, body').stop().animate({
 
−
        'scrollTop': $target.offset().top
 
−
    }, 900, 'swing', function () {
 
−
        window.location.hash = target;
 
−
    });
 
−
});
 
 
});
 
});
 
</script>  
 
</script>  
 +
<style>
 +
h1
 +
</style>
 
<!--Counter and topnav ends-->
 
<!--Counter and topnav ends-->
 
<!--Content begins-->
 
<!--Content begins-->
Line 535: Line 640:
 
<h1>BioMech - Download</h1>
 
<h1>BioMech - Download</h1>
 
<p id="pp">
 
<p id="pp">
−
In an effort to make BioMech accessible to everyone, we have allowed the game to be downloaded for free. Below you will find instructions
+
In an effort to make BioMech accessible to everyone, we have allowed the game to be open source and therefore it can be downloaded for free. Below you will find instructions
 
that will aid you in downloading and constructing your own version of the game. The materials required are as follows:
 
that will aid you in downloading and constructing your own version of the game. The materials required are as follows:
 
</p>
 
</p>
Line 551: Line 656:
 
<h6>Game Board</h6>
 
<h6>Game Board</h6>
 
<p id="pp">
 
<p id="pp">
−
Instructions to come
+
BioMech has its own game board allowing players to place their BioBricks
 +
in to a plasmid.
 
</p>
 
</p>
 +
<div style="margin:0;padding:0;" class="col-xs-12 col-sm-6">
 +
<p id="pp">
 +
<ol>
 +
<li>
 +
Open the board game PDF files. If you have access to an A3 printer
 +
click <a target="_blank" href="https://static.igem.org/mediawiki/2016/1/1b/T--Exeter--HumanPractises_BoardGame_A3.pdf">here</a>, otherwise
 +
for an A4 printers click <a target="_blank" href="https://static.igem.org/mediawiki/2016/7/7a/T--Exeter--HumanPractises_BoardGame_A4.pdf">here</a>.
 +
Both links open in a new tab.
 +
</li>
 +
 +
<li>
 +
If printing an A4 version of the game it is reccommended that you tape the two sheets
 +
together. For a better experience the board can then be attatched to a cardboard box
 +
to maintain its shape.
 +
</li>
 +
 +
</ol>
 +
</p>
 +
</div>
 +
<div class="col-xs-12 col-sm-6">
 +
<img src="https://static.igem.org/mediawiki/2016/0/03/T--Exeter--HumanPractises_BoardGame_Cards.png" style="max-width:70%;margin:40px auto;display:block;">
 +
</div>
 
</div>
 
</div>
 
<div class="col-xs-12" style="margin:0;padding:0;">
 
<div class="col-xs-12" style="margin:0;padding:0;">
Line 564: Line 692:
 
may not always be correctly aligned.
 
may not always be correctly aligned.
 
</p>
 
</p>
−
<p id="pp">
+
<div style="margin:0;padding:0;" class="col-xs-12 col-sm-6">
−
Firstly, open the correct BioBrick PDF file. If you have access to a double sided printer
+
<p id="pp">
−
click <a target="_blank" href="https://static.igem.org/mediawiki/2016/b/b7/T--Exeter--HumanPractises_BoardGame_DoubleSide.pdf">here</a>, and  
+
<ol>
−
for single sided printers click <a target="_blank" href="https://static.igem.org/mediawiki/2016/3/37/T--Exeter--HumanPractises_BoardGame_SingleSide.pdf">here</a>.
+
<li>
−
Both links open in a new tab.
+
Open the correct BioBrick PDF file. If you have access to a double sided printer
−
</p>
+
click <a target="_blank" href="https://static.igem.org/mediawiki/2016/b/b7/T--Exeter--HumanPractises_BoardGame_DoubleSide.pdf">here</a>, and  
−
<div class="img_banner" style="background-image:url('https://static.igem.org/mediawiki/2016/0/03/T--Exeter--HumanPractises_BoardGame_Instruc3.png');">
+
for single sided printers click <a target="_blank" href="https://static.igem.org/mediawiki/2016/3/37/T--Exeter--HumanPractises_BoardGame_SingleSide.pdf">here</a>.
−
+
Both links open in a new tab.
 +
</li>
 +
 
 +
<li>
 +
Press "print" and locate the printing properties for your browser and ensure
 +
portrait printing is selected. For single sided
 +
prints, do not change any options. For double sided prints select "flip on short side".
 +
If you wish to save paper and ink here by printing only the fonts of the cards
 +
only print odd pages (1,3,5...19), this is only recommended for single side printing.
 +
</li>
 +
 +
<li>
 +
If printing double sided use scissors or a guillotine to separate the cards.
 +
If printing printing single sided stick pairs of pages back to back (5 and 6 for example)
 +
before cutting.
 +
</li>
 +
</ol>
 +
</p>
 +
<p id="pp">
 +
Cards with can now be downloaded with the option of changing the text (using gimp software).
 +
We hope this will allow people to translate the bulk of the text in to other languages.
 +
Unfortunetely the names and card type titles can not be edited.<br /> The files (.xcf) are the
 +
file type gimp uses to save images, this program was chosen as it is free.
 +
Links will <strong>download on click</strong>:
 +
<ul>
 +
<li><a href="https://static.igem.org/mediawiki/2016/2/2e/T--Exeter--HumanPractises_BoardGame_Promotersedit.zip">Promoter</a></li>
 +
<li><a href="https://static.igem.org/mediawiki/2016/3/3d/T--Exeter--HumanPractises_BoardGame_RBSedit.zip">RBS</a></li>
 +
<li><a href="https://static.igem.org/mediawiki/2016/e/e2/T--Exeter--HumanPractises_BoardGame_PCRedit.zip">PCR</a></li>
 +
<li><a href="https://static.igem.org/mediawiki/2016/9/95/T--Exeter--HumanPractises_BoardGame_Terminatorsedit.zip">Terminator</a></li>
 +
</ul>
 +
</p>
 
</div>
 
</div>
−
<p id="pp">
+
<div class="col-xs-12 col-sm-6">
−
Secondly, press "print" and locate the printing properties for your browser and ensure
+
<img src="https://static.igem.org/mediawiki/2016/d/d7/T--Exeter--HumanPractises_BoardGame_Boardpic.png" style="max-width:70%;margin:40px auto;display:block;">
−
portrait printing is selected. For single sided
+
−
prints, do not change any options. For double sided prints select "flip on short side".
+
−
If you wish to save paper and ink here by printing only the fonts of the cards
+
−
only print odd pages (1,3,5...19), this is only recommended for single side printing.
+
−
</p>
+
−
<div class="img_banner" style="background-image:url('https://static.igem.org/mediawiki/2016/b/bc/T--Exeter--HumanPractises_BoardGame_Instruc4.png');">
+
−
+
−
</div>
+
−
<p id="pp">
+
−
Lastly, if printing double sided use scissors or a guillotine to separate the cards.
+
−
If printing printing single sided stick pairs of pages back to back (5 and 6 for example)
+
−
before cutting.
+
−
</p>
+
−
<div class="img_banner" style="background-image:url('https://static.igem.org/mediawiki/2016/5/53/T--Exeter--HumanPractises_BoardGame_Instruc5.png');">
+
−
+
 
</div>
 
</div>
 
</div>
 
</div>
 
<div class="col-xs-12" style="margin:0;padding:0;">
 
<div class="col-xs-12" style="margin:0;padding:0;">
−
<h6>Rules</h6>
+
<h6>Instructions Pamphlet</h6>
−
<p id="pp">
+
<div style="margin:0;padding:0;" class="col-xs-12 col-sm-6">
−
Instructions to come
+
<p id="pp">
−
</p>
+
BioMech's instructions can be downloaded from this <a target="_blank" href="https://static.igem.org/mediawiki/2016/b/bd/T--Exeter--HumanPractises_BoardGame_Pamphlet.pdf">link</a>. The booklet is
 +
not required to be read online, feel free to download or print it out.
 +
</p>
 +
</div>
 +
<div style="margin:0;padding:0;" class="col-xs-12 col-sm-6">
 +
<img src="https://static.igem.org/mediawiki/2016/4/4f/T--Exeter--HumanPractises_BoardGame_Pamphletpic.png" style="max-width:70%;margin:40px auto;display:block;">
 +
</div>
 
</div>
 
</div>
 +
 +
 +
<nav id="topnav" class="nav-navbar" style="right:2px;">
 +
<div class="container-fluid">
 +
    <div class="navbar-header">
 +
      <a class="navbar-brand" id="Top_link" href="#Top">
 +
<span class="glyphicon glyphicon-menu-up" aria-hidden="true" style="max-width:1%;"></span>
 +
  </a>
 +
    </div>
 +
</div>
 +
 +
 
</div>
 
</div>
  

Latest revision as of 22:07, 10 November 2016