Difference between revisions of "Team:Virginia/Notebook"

(Prototype team page)
 
 
(81 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{Virginia}}
 
{{Virginia}}
 
<html>
 
<html>
 +
<head>
 +
<!-- Bootstrap import -- Latest compiled and minified CSS -->
 +
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" type="text/css">
 +
</head>
 +
<body>
 +
<div id="top-part">
 +
<a href="http://virginia.edu">
 +
<div style="position: fixed;
 +
top:34px;
 +
z-index:20;
 +
margin-left:26.5%;">
 +
<img style="height:32px;
 +
width:32px;" src="/wiki/images/d/df/Virginia_rotunda2.png">
 +
</div>
 +
</a>
 +
<p id="above-nav">University of Virginia iGEM 2015</p>
 +
<div id="icon-box">
 +
<a href="https://twitter.com/Virginia_iGEM"><img id="twitter" src="/wiki/images/2/2c/Virginia_twitter_white.png"></img></a>
 +
<a href="https://www.facebook.com/uvaigem"><img id="facebook" src="/wiki/images/e/ed/Virginia_facebook.png"></img></a>
 +
</div>
 +
</div>
 +
<div class="nav" id="nav1">
 +
<div class="container">
 +
<ul class="pull-left">
 +
<li><a href="/Team:Virginia">Home</a></li>
 +
</ul>
 +
<ul class="pull-right">
 +
<li><a href="/Team:Virginia/Team">Team</a></li>
 +
<li><a href="/Team:Virginia/Project">Project</a></li>
 +
<li><a href="/Team:Virginia/Practices">Policy and Practices</a></li>
 +
<li><a href="/Team:Virginia/Attributions">Attributions</a></li>
 +
<li><a href="/Team:Virginia/Contact_us">Contact Us</a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
<!-- OTHER STRUCTURAL CODE GOES BELOW HERE -->
 +
<div class="textbox">
 +
<h1>Team Notebook</h1>
 +
<p> The pages below are directly from our team notebook, which was kept throughout the whole project development process. Click on the top right corner to move forward a page, and click the top left corner to move back a page.</p>
 +
</div>
 +
<script type="text/javascript" src="http://www.turnjs.com/lib/turn.min.js"></script>
 +
<a href="javascript:void(0);"><img src="/wiki/images/2/2d/Virginia_notebook_left.png" id="left-arrow" class="arrow"></img></a>
 +
<a href="javascript:void(0);"><img src="/wiki/images/2/21/Virginia_notebook_right.png" id="right-arrow" class="arrow"></img></a>
 +
<div class="book-wrapper">
 +
<style type="text/css">
 +
.arrow {
 +
position: absolute;
 +
top: 400px;
 +
z-index:20;
 +
width: 5%;
 +
height: auto;
 +
}
 +
#left-arrow {
 +
left:2.5%;
 +
}
 +
#right-arrow {
 +
right:2.5%;
 +
}
 +
</style>
 +
<!-- PAGE SET-->
 +
<div class="left page cover" id="page-1">
 +
<img src="/wiki/images/b/b5/Virginia_page1.png"></img>
 +
</div>
 +
<div class="right page" id="page-2">
 +
<img src="/wiki/images/d/db/Virginia_page2.png"></img>
 +
</div>
 +
<!-- PAGE SET-->
  
−
<h2>Notebook</h2>
+
<div class="left page inactive" id="page-3">
 +
<img src="/wiki/images/2/22/Virginia_page3.png"></img>
 +
</div>
 +
<div class="right page inactive" id="page-4">
 +
<img src="/wiki/images/6/62/Virginia_page4.png"></img>
 +
</div>
 +
<!-- PAGE SET-->
  
−
<p> Document the dates you worked on your project.</p>
+
<div class="left page inactive" id="page-5">
 +
<img src="/wiki/images/7/78/Virginia_page5.png"></img>
 +
</div>
 +
<div class="right page inactive  " id="page-6">
 +
<img src="/wiki/images/d/d7/Virginia_page6.png"></img>
 +
</div>
 +
<!-- PAGE SET-->
  
−
<h5>What should this page have?</h5>
+
<div class="left page inactive" id="page-7">
−
<ul>
+
<img src="/wiki/images/2/20/Virginia_page7.png"></img>
−
<li>Chronological notes of what your team is doing.</li>
+
</div>
−
<li> Brief descriptions of daily important events.</li>
+
<div class="right page inactive  " id="page-8">
−
<li>Pictures of your progress. </li>
+
<img src="/wiki/images/6/67/Virginia_page8.png"></img>
−
<li>Mention who participated in what task.</li>
+
</div>
−
</ul>
+
<!-- PAGE SET-->
  
 +
<div class="left page inactive" id="page-9">
 +
<img src="/wiki/images/2/20/Virginia_page9.png"></img>
 +
</div>
 +
<div class="right page inactive  " id="page-10">
 +
<img src="/wiki/images/6/67/Virginia_page8.png"></img>
 +
</div>
  
−
<h4>Inspiration</h4>
+
<!-- PAGE SET-->
−
<p>You can see what others teams have done to organize their notes:</p>
+
<div class="left page inactive" id="page-11">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-12">
 +
<img src=""></img>
 +
</div>
  
−
<ul>  
+
<!-- PAGE SET-->
−
<li><a href="https://2014.igem.org/Team:ATOMS-Turkiye/Notebook">2014 ATOMS-Turkiye</a></li>
+
<div class="left page inactive" id="page-13">
−
<li><a href="https://2014.igem.org/Team:Tec-Monterrey/ITESM14_project.html#tab_notebook">2014 Tec Monterrey</a></li>
+
<img src=""></img>
−
<li><a href="https://2014.igem.org/Team:Kyoto/Notebook/Magnetosome_Formation#title">2014 Kyoto</a></li>
+
</div>
−
<li><a href="https://2014.igem.org/Team:Cornell/notebook">2014 Cornell</a></li>
+
<div class="right page inactive  " id="page-14">
−
</ul>
+
<img src=""></img>
 +
</div>
  
−
</div>
+
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-15">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-16">
 +
<img src=""></img>
 +
</div>
 +
 
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-15">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-16">
 +
<img src=""></img>
 +
</div>
 +
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-17">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-18">
 +
<img src=""></img>
 +
</div>
 +
 
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-19">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-20">
 +
<img src=""></img>
 +
</div>
 +
 
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-21">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-22">
 +
<img src=""></img>
 +
</div>
 +
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-23">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-24">
 +
<img src=""></img>
 +
</div>
 +
 
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-25">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-26">
 +
<img src=""></img>
 +
</div>
 +
 
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-27">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-28">
 +
<img src=""></img>
 +
</div>
 +
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-29">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-30">
 +
<img src=""></img>
 +
</div>
 +
 
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-31">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-32">
 +
<img src=""></img>
 +
</div>
 +
 
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-33">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-34">
 +
<img src=""></img>
 +
</div>
 +
 
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-35">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-36">
 +
<img src=""></img>
 +
</div>
 +
 
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-37">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-38">
 +
<img src=""></img>
 +
</div>
 +
 
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-39">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-40">
 +
<img src=""></img>
 +
</div>
 +
</div>
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-41">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-42">
 +
<img src=""></img>
 +
</div>
 +
</div>
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-43">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-44">
 +
<img src=""></img>
 +
</div>
 +
</div>
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-45">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-46">
 +
<img src=""></img>
 +
</div>
 +
</div>
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-45">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-46">
 +
<img src=""></img>
 +
</div>
 +
</div>
 +
 
 +
<
 +
<script type="text/javascript">
 +
var left_page_counter = 1;
 +
var right_page_counter = 2;
 +
var left_page = "#page-" + left_page_counter.toString();
 +
var right_page = "#page-" + right_page_counter.toString();
 +
var $left = $(left_page);
 +
var $right = $(right_page);
 +
 +
 +
 +
jQuery(document).ready(function(){
 +
if ( (left_page_counter == 1) || (right_page_counter == 2) ) {
 +
$("#left-arrow").fadeOut("fast");
 +
}
 +
 +
$("#right-arrow").click(function(){
 +
console.log("Right Arrow: I’ve been clicked");
 +
console.log("var left_page_counter is " + left_page_counter);
 +
if ( (left_page_counter == 1) || (right_page_counter == 2) ) {
 +
$("#left-arrow").fadeOut("fast");
 +
}
 +
$("#left-arrow").fadeIn("fast");
 +
//removes current pages
 +
$left.addClass("inactive");
 +
$right.addClass("inactive");
 +
 +
//changes variables
 +
left_page_counter = left_page_counter + 2;
 +
right_page_counter = right_page_counter + 2;
 +
left_page = "#page-" + left_page_counter.toString();
 +
right_page = "#page-" + right_page_counter.toString();
 +
$left = $(left_page);
 +
$right = $(right_page);
 +
 +
//displays new pages
 +
$left.removeClass("inactive");
 +
$right.removeClass("inactive");
 +
 +
if( $left.hasClass("cover") || $right.hasClass("cover") ) {
 +
$("#right-arrow").fadeOut("fast");
 +
}
 +
if( !($left.hasClass("cover")) ) {
 +
$("#left-arrow").fadeIn("fast");
 +
}
 +
 +
 +
});
 +
$("#left-arrow").click(function(){
 +
//removes current pages
 +
if ( (left_page_counter == 1) || (right_page_counter == 2) ) {
 +
$("#left-arrow").fadeOut("fast");
 +
}
 +
$left.addClass("inactive");
 +
$right.addClass("inactive");
 +
 +
left_page_counter = left_page_counter - 2;
 +
right_page_counter = right_page_counter - 2;
 +
console.log("Left Arrow: I’ve been clicked");
 +
console.log("var left_page_counter is " + left_page_counter);
 +
left_page = "#page-" + left_page_counter.toString();
 +
right_page = "#page-" + right_page_counter.toString();
 +
$left = $(left_page);
 +
$right = $(right_page);
 +
 +
//displays new pages
 +
$left.removeClass("inactive");
 +
$right.removeClass("inactive");
 +
if( !($left.hasClass("cover") || $right.hasClass("cover")) ) {
 +
$("#right-arrow").fadeIn("fast");
 +
}
 +
if( $left.hasClass("cover") ) {
 +
$("#left-arrow").fadeOut("fast");
 +
}
 +
});
 +
});
 +
</script>
 +
<style type="text/css">
 +
.book-wrapper {
 +
width: 100%;
 +
margin-top: 40px;
 +
margin-bottom: 40px;
 +
}
 +
.page {
 +
width:40%;
 +
display:inline;
 +
height:auto;
 +
background: #fff;
 +
}
 +
.page img {
 +
width:100%;
 +
height:auto;
 +
}
 +
.right {
 +
float:right;
 +
margin-right:9%;
 +
}
 +
.left {
 +
float:left;
 +
margin-left:9%;
 +
}
 +
.default-active {
 +
display:inline;
 +
}
 +
.inactive {
 +
display:none;
 +
}
 +
</style>
 +
<!-- SPECIFIC STRUCTURAL CODE ENDS HERE -->
 +
<footer>
 +
<div id="foot-img">
 +
<img src="https://static.igem.org/mediawiki/2015/d/d1/Virginia_logo4.png"></img>
 +
</div>
 +
<div id="foot-text">
 +
<p>University of Virginia iGEM</p>
 +
<p>148 Gilmer Hall</p>
 +
<p>485 McCormick Road</p>
 +
<p>Charlottesville, Virginia 22904</p>
 +
<p>United States of America</p>
 +
<p><a href="mailto:virginia.igem@gmail.com">
 +
virginia.igem@gmail.com</a>
 +
</p>
 +
</div>
 +
</footer>
 +
<style type="text/css">
 +
footer div img {
 +
width:auto;
 +
height:200px;
 +
}
 +
footer div {
 +
overflow:hidden;
 +
display:inline-block;
 +
float:none;
 +
}
 +
footer div:first-child {
 +
background-image:url(‘https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQUA5CF2C_kOVnWjyl62TA17VNs6RSsPIkrCejlLbtZ7rAVgzQxOQ’);
 +
float:right;
 +
top:10px;
 +
height:90%;
 +
width:25%
 +
margin: 1%;
 +
display:inline;
 +
overflow:hidden;
 +
}
 +
#nav1 {
 +
background-color: #003F87;
 +
width:100%;
 +
float:top; 
 +
position:fixed;
 +
top:70px;
 +
z-index:10;
 +
//opacity:0.85;
 +
border-bottom:5px;
 +
border-top:0px;
 +
border-left:0px;
 +
border-right:0px;
 +
border-color:#007bb6;
 +
border-style:solid;
 +
}
 +
#nav1 a {
 +
color: rgb(256, 256, 256);
 +
font-size: 16px;
 +
font-weight: bold;
 +
padding: 14px 10px;
 +
text-transform: uppercase;
 +
border-radius:5px;
 +
}
 +
#nav1 a:hover{
 +
color:#fff;
 +
background-color:#007bb6;
 +
text-decoration:none;
 +
}
 +
#nav1 li {
 +
display: inline;
 +
font-family: Arial;
 +
}
 +
#nav1 .container {
 +
padding-top:5px;
 +
padding-bottom:5px;
 +
}
 +
a:hover {
 +
text-decoration:none;
 +
}
 +
a{
 +
text-decoration:none;
 +
}
 +
.active-tab{
 +
text-decoration:none;
 +
}
 +
.active-content{
 +
text-decoration:none;
 +
}
 +
.row {
 +
width:100%;
 +
}
 +
#content h1.firstHeading {
 +
visibility:hidden;
 +
}
 +
#content {
 +
margin: 0px 0px 0px 0px;
 +
padding:0px 0px 0px 0px;
 +
width:100%;
 +
height:auto;
 +
background-color: rgb(0,0,0);
 +
}
 +
html {
 +
background-color:#191919;
 +
color: #fff
 +
font-family: Century Gothic, sans-serif;
 +
}
 +
footer {
 +
width:100%
 +
height:300px;
 +
padding:25px 25px 25px 25px;
 +
background:#000000;
 +
clear:both;
 +
}
 +
footer p:first-child {
 +
font-weight:bold;
 +
font-family:Arial;
 +
font-size:18px;
 +
text-decoration:underline;
 +
}
 +
footer a {
 +
color:#fff;
 +
}
 +
footer p {
 +
width:auto;
 +
}
 +
p {
 +
color:white;
 +
font-family: serif;
 +
float:center;
 +
clear:both;
 +
}
 +
#bolded {
 +
font-weight:bold;
 +
}
 +
#above-nav {
 +
margin-bottom:10px;
 +
float:left;
 +
font-size:30px;
 +
text-align:center;
 +
font-family:Helvetica;
 +
text-shadow: 2px 2px #007bb6;
 +
padding-left:30%;
 +
}
 +
#top-part a {
 +
width:auto;
 +
height:auto;
 +
margin-right:20px;
 +
}
 +
#facebook {
 +
height:30px;
 +
width:30px;
 +
}
 +
#twitter {
 +
height:40px;
 +
width:40px;
 +
}
 +
#facebook:hover {
 +
opacity:0.5;
 +
}
 +
#twitter:hover {
 +
opacity:0.5;
 +
}
 +
#icon-box {
 +
display:inline;
 +
float:right;
 +
}
 +
#top-part {
 +
display:inline;
 +
height:56px;
 +
position:fixed;
 +
top:14px;
 +
float:center;
 +
background:#003F87;
 +
width:100%;
 +
z-index:10;
 +
font-weight:bold;
 +
padding-top:15px;
 +
}
 +
/* OTHER STYLE CODE GOES BELOW HERE */
 +
#book-wrapper {
 +
width:100%;
 +
height: 1500px;
 +
background:#dddddd;
 +
}
 +
#flipbook {
 +
position:fixed;
 +
top: 200px;
 +
overflow:hidden;
 +
right:75%;
 +
}
 +
#flipbook div {
 +
}
 +
#book-wrapper.container {
 +
margin-left:35%;
 +
margin-top: 100px;
 +
}
 +
.textbox > h1 {
 +
text-align:center;
 +
color:#fff;
 +
}
 +
.textbox > p {
 +
font-size: 15px;
 +
font-family:Arial;
 +
margin-left:20%;
 +
width:60%;
 +
padding:10px;
 +
}
 +
/* SPECIFIC STYLE CODE ENDS HERE */
 +
</style>
 +
</body>
 
</html>
 
</html>

Latest revision as of 01:26, 17 September 2015

University of Virginia iGEM 2015

Team Notebook

The pages below are directly from our team notebook, which was kept throughout the whole project development process. Click on the top right corner to move forward a page, and click the top left corner to move back a page.