Team:Aalto-Helsinki/Software

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{:Team:Aalto-Helsinki/header}}
+
/* Yleiset */
-
<html>
+
-
<body>
+
-
<div id=""page-content-wrapper""><div class="splash" id="softwaresplash">
+
-
<div class="textinsplash" id="softwaretextinsplash">
+
-
<h1>Software</h1>
+
-
    </div>
+
-
</div>
+
-
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
+
@font-face {
-
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+
    font-family: Special;
 +
    src: url("http://igem-qsf.github.io/igem-wiki/fonts/HORSEPUKE.TTF") format("truetype");
 +
}
-
<div data-spy="affix" data-offset-top="500" data-offset-bottom="0">
+
a:link, a:visited, a:active, .right-menu li a {
-
    <div class="navbar navbar-default extrabar">
+
  color: #0AA699;
-
        <nav>
+
  text-decoration: none !important;
-
            <a href="#Software">Software</a>
+
}
-
            <a href="#Seekers">Seekers</a>
+
-
            <a href="#Other">Other Projects</a>
+
-
            <a href="#Simulation">Simulation</a>
+
-
        </nav>
+
-
    </div>
+
-
</div>
+
-
<article class="turqu">
+
-
<h1>Software</h1>
+
-
<p>From the start, we planned to develop software tools to make the work of our team easier. We also want to share the tools with the iGEM Community to help everyone. </p>
+
-
<p>All the code is available as open source on GitHub and is free to be reused, modified or expanded. All of the projects can be found through our GitHub organization <a href="http://github.com/iGEM-QSF">Quiet Sushi Force.</a>
+
a:hover {
-
</p>
+
  color: #90F0E8;
-
</article>
+
}
-
<article class="plum">
+
body {
-
<h2>Seekers</h2>
+
  color: black;
 +
  min-height: 85vh;
 +
  background-color: white;
 +
  margin: 0;
 +
  padding: 0;
 +
}
-
<p>We made two different Seekers for making background research for iGEM projects a little easier. They are both written in JavaScript using the Angular.js library. The data in both is a massive JSON file that is easily modifiable and can be changed without doing any modifications to the code, so expanding the tools for the future only requires adding data. </p>
+
article {
 +
  padding-top: 10vh;
 +
  padding-bottom: 5vh;
 +
  padding-left: 15vw;
 +
  padding-right: 15vw;
 +
  min-height: 50vh;
 +
}
-
<p>Both use Yeoman for scaffolding and deployment and they are currently running on GitHub Pages, which is free and handles requests very fast, so they will stay available for the foreseeable future.</p>
+
h1, h2, h3, h4, h5, h6 {
 +
  border-bottom: none;
 +
}
-
<p><img src="https://static.igem.org/mediawiki/2014/5/56/BBSeeker.png" class="img-responsive"></a></p>
+
#bodyContent h1, #bodyContent h2 {
-
<p>The major tools we made are the Seeker-brand tools. First we made <a href="http://igem-qsf.github.io/BioBrick-Seeker/dist/">BioBrick Seeker.</a> to make searching for the needed BioBricks in the 2014 iGEM Distribution a bit easier. It can be used to find Bricks with a certain keyword or list all from a certain type. It even has a search for the part names to see if the Brick you need is in this year's distribution.</p>
+
  margin-bottom: 0;
 +
}
-
<p>All of the code and installation instructions are available at the project's <a href="http://github.com/iGEM-QSF/BioBrick-Seeker">GitHub page.</a></p>
+
.logo {
-
</article>
+
  width: 100%;
-
<article class="green">
+
}
-
<h2>Team Seeker</h2>
+
-
<p><img src="https://static.igem.org/mediawiki/2014/a/a9/Aalto_Helsinki_Team_seeker.png" class="img-responsive"></a></p>
+
-
</p>
+
-
<p>The next one was <a href="http://igem-qsf.github.io/Team-Seeker/dist/">Team Seeker.</a>, a tool to search through the project abstracts of past teams to see if something you've been thinking about has been done before and to find projects that work in a similar field to your own. It has a smart phrase search so writing anything in the search bar should bring up what you need.</p>
+
-
<p>All of the code and installation instructions are available at the project's <a href="http://igem-qsf.github.io/iGEM-Team-Seeker/dist/">GitHub page.</a>
+
blockquote {
-
</article>
+
  font-family: "Helvetica Neue", serif;
-
<article class="">
+
  font-size: 24px;
-
<h2>Other software projects</h2>
+
  font-style: italic;
-
<p>A third one is the <a href="http://github.com/iGEM-QSF/igem-wiki">iGEM Wiki Quickifier.</a>, a tool to upload content to a particular team wiki without using the cumbersome wiki interface. It allows you to write all the pages as proper HTML and add template tags while uploading, so that they don't come in the way of writing actual content. It's work in progress and changing it to upload to other wikis than ours is not implemented, but if you know a bit of Python, it's easily done.</p>
+
  line-height: 2;
 +
  position: relative;
 +
  padding: 0 0 0 80px;
 +
  margin: 60px -20px 60px 0;
 +
  border-left: none;
 +
}
-
<p>All of the code and installation instructions are available at the project's <a href="http://github.com/iGEM-QSF/igem-wiki">GitHub page.</a></p>
+
blockquote:before {
-
</article>
+
  display: block;
 +
  content: "\201C";
 +
  font-size: 200px;
 +
  position: absolute;
 +
  left: -30px;
 +
  top: -115px;
 +
}
-
<article class="black">
+
blockquote cite {
-
<h2>Flappy Coli</h2>
+
  color: #999999;
-
<p><img src="https://static.igem.org/mediawiki/2014/2/2f/Aalto_Helsinki_Flappy_coli.png" class="img-responsive"></a></p>
+
  font-size: 14px;
 +
  display: block;
 +
  margin-top: 5px;
 +
}
-
<p>We didn't only build software tools though. We also made a silly game called <a href="http://aaltohelsinki.com/flappycoli">Flappy Coli</a>, where you are guiding a genetically modified pink bacteria through an iGEM-maze. It grows it's flagellum when you get farther and if you are good enough, it might grow a whole tail of flagella.</p>
+
blockquote cite:before {
 +
  content: "\2014 \2009";
 +
}
-
<p>All of the code is available at the project's <a href="http://github.com/iGEM-QSF/Flappy-coli">GitHub page.</a></p>
+
/* Yleiset päättyy */
-
</article>
+
-
<article class="PCB">
+
/* Header-jutut */
-
<h2>Simulation</h2>
+
-
<p><img src="https://static.igem.org/mediawiki/2014/0/03/Aalto_Helsinki_Simulation.png" class="img-responsive"></a></p>
+
-
<p>To demonstrate our work to the general public in an event called Summer of Startups Demo Day, we made a <a href="http://aaltohelsinki.com/simulation">simulation</a> that shows our system in action. It shows an animated bacteria plate with adjustable light intensity sliders to remotely control the bacteria. The proteins the bacteria produce are colors, so you can see how the changes in light intensity correlate to the color of the colonies on the plate. The simulation also has a nice grap that shows the protein levels in one second intervals so you can see more clearly what's going on in the cell.</p>
+
header {
 +
  color: white;
 +
  font-size: large;
 +
}
-
<p>All of the code (including a more in-detail Python graph simulation) is available at the project's <a href="http://github.com/iGEM-QSF/SimCircus">GitHub page.</a></p>
+
header a {
 +
  padding-right: 1.5vw;
 +
  padding-left: 1.5vw;
 +
}
-
</article></div>
+
header a.active {
-
</body>
+
  color:black;
-
<script>
+
}
-
$(document).ready(function() {
+
-
if(location.pathname != "/Team:Aalto-Helsinki") {
+
header .navbar, .extrabar {
-
$('#navigation a[href^="https://2014.igem.org' + location.pathname + '"]').addClass('active');
+
  background-color:rgba(255,255,255,0.8);
-
} else $('#navigation a.home').addClass('active');
+
  border:0px;
-
});
+
}
-
</script>
+
 
-
</html>
+
.navbar{
-
{{:Team:Aalto-Helsinki/footer}}
+
  margin-top: 0;
 +
}
 +
 
 +
/* Header päättyy */
 +
 
 +
/* pikkuvalikon tyylit */
 +
.affix {
 +
  top:57px;
 +
  width:100%;
 +
}
 +
 
 +
.extrabar {
 +
  width:100%;
 +
  text-align: center;
 +
}
 +
 
 +
/* Pakolliset pikku valikot */
 +
 
 +
#top-section {
 +
  height: 0px;
 +
  border: none;
 +
  width: 0px;
 +
  margin: 0 auto;
 +
  padding: 0 0 0 0;
 +
  background-color: transparent;
 +
  overflow: hide;
 +
  position: initial;
 +
}
 +
 
 +
#menubar {
 +
  top: 0px;
 +
  font-size: x-small;
 +
}
 +
 
 +
#menubar, #menubar a {
 +
  color: #0AA699;
 +
}
 +
 
 +
#menubar, #menubar a:hover {
 +
  color: #90F0E8;
 +
}
 +
 
 +
#menubar:hover, #menubar li a {
 +
  background-color: transparent;
 +
}
 +
 
 +
/* Pakolliset pikku valikot päättyy */
 +
 
 +
 
 +
/* Splashien yhteiset tyylit */
 +
 
 +
.splash{
 +
  display: table;
 +
  height: 100vh;
 +
  width: 100%;
 +
  background-image: url('https://static.igem.org/mediawiki/2014/f/fb/Aalto_Helsinki_Lights.png');
 +
  background-size: cover;
 +
  color: white;
 +
  margin-top: -10px;
 +
  padding-top: 10vh;
 +
  padding-bottom: 5vh;
 +
  padding-left: 15vw;
 +
  padding-right: 15vw;
 +
  text-align: center;
 +
}
 +
 
 +
.splash h1 {
 +
  font-size: 100px;
 +
}
 +
 
 +
.textinsplash {
 +
  display: table-cell;
 +
  vertical-align: middle;
 +
}
 +
 
 +
.textinsplash > p {
 +
  font-size: large;
 +
  font-style: italic;
 +
}
 +
 
 +
/* Splash-tyylittelyt loppu */
 +
 
 +
 
 +
/* Erillisten sivujen tyylit*/
 +
 
 +
#mainsplash {
 +
  background-image: url('http://aaltohelsinki.com/img/12.jpg');
 +
}
 +
 
 +
#softwaresplash {
 +
  background-image: url('https://static.igem.org/mediawiki/2014/7/7f/Aalto-Helsinki-Software-placeholder.png');
 +
}
 +
 
 +
#researchsplash {
 +
  background-image: url('https://static.igem.org/mediawiki/2014/1/13/Aalto-Helsinki-Research-Placeholder.png');
 +
}
 +
 
 +
/* Erillisten sivujen tyylit loppu */
 +
 
 +
 
 +
/* Articlejen backgroundit */
 +
 
 +
/*
 +
.turqu {
 +
  background-color: #0AA699;
 +
}
 +
 
 +
.turqu a, .green a {
 +
  color: white;
 +
}
 +
 
 +
.white {
 +
  background-color: white;
 +
}
 +
 
 +
.black {
 +
  background-color: black;
 +
  color:white;
 +
}
 +
 
 +
.green {
 +
  background-color: #399f70;
 +
}
 +
 
 +
.plum {
 +
  background-color:#B00C69;
 +
}
 +
 
 +
.PCB {
 +
  background-color: gray;
 +
}
 +
*/
 +
 
 +
/* Footerin tyylit */
 +
 
 +
footer {
 +
  text-align: center;
 +
  background: white;
 +
}
 +
 
 +
#logorow {
 +
  padding: 100px;
 +
}
 +
 
 +
.footerimg {
 +
  max-height: 100px;
 +
  max-width: 250px;
 +
}
 +
 
 +
.footerlogo {
 +
  display: inline-block;
 +
  vertical-align: middle;
 +
  padding: 20px;
 +
}
 +
 
 +
.footerlogo:hover .on, .footerlogo .off {
 +
  display:none;
 +
}
 +
 
 +
.footerlogo:hover .off {
 +
  display:block;
 +
}
 +
 
 +
/* Footerin tyylit loppu */

Revision as of 10:44, 27 August 2014

/* Yleiset */

@font-face { 

   font-family: Special;
   src: url("http://igem-qsf.github.io/igem-wiki/fonts/HORSEPUKE.TTF") format("truetype");

}

a:link, a:visited, a:active, .right-menu li a { 

 color: #0AA699;
 text-decoration: none !important;

}

a:hover { 

 color: #90F0E8;

}

body { 

 color: black;
 min-height: 85vh;
 background-color: white;
 margin: 0;
 padding: 0;

}

article { 

 padding-top: 10vh;
 padding-bottom: 5vh;
 padding-left: 15vw;
 padding-right: 15vw;
 min-height: 50vh;

}

h1, h2, h3, h4, h5, h6 { 

 border-bottom: none;

}

  1. bodyContent h1, #bodyContent h2 { 
 margin-bottom: 0;

}

.logo { 

 width: 100%;

}

blockquote { 

 font-family: "Helvetica Neue", serif;
 font-size: 24px;
 font-style: italic;
 line-height: 2;
 position: relative;
 padding: 0 0 0 80px;
 margin: 60px -20px 60px 0;
 border-left: none;

}

blockquote:before { 

 display: block;
 content: "\201C";
 font-size: 200px;
 position: absolute;
 left: -30px;
 top: -115px;

}

blockquote cite { 

 color: #999999;
 font-size: 14px;
 display: block;
 margin-top: 5px;

}

blockquote cite:before { 

 content: "\2014 \2009";

}

/* Yleiset päättyy */

/* Header-jutut */

header { 

 color: white;
 font-size: large;

}

header a { 

 padding-right: 1.5vw;
 padding-left: 1.5vw;

}

header a.active { 

 color:black;

}

header .navbar, .extrabar { 

 background-color:rgba(255,255,255,0.8);
 border:0px;

}

.navbar{ 

 margin-top: 0;

}

/* Header päättyy */

/* pikkuvalikon tyylit */ .affix { 

 top:57px;
 width:100%;

}

.extrabar { 

 width:100%;
 text-align: center;

}

/* Pakolliset pikku valikot */

  1. top-section { 
 height: 0px;
 border: none;
 width: 0px;
 margin: 0 auto;
 padding: 0 0 0 0;
 background-color: transparent;
 overflow: hide;
 position: initial;

}

  1. menubar { 
 top: 0px;
 font-size: x-small;

}

  1. menubar, #menubar a { 
 color: #0AA699;

}

  1. menubar, #menubar a:hover { 
 color: #90F0E8;

}

  1. menubar:hover, #menubar li a { 
 background-color: transparent;

}

/* Pakolliset pikku valikot päättyy */


/* Splashien yhteiset tyylit */

.splash{ 

 display: table;
 height: 100vh;
 width: 100%;
 background-image: url('https://static.igem.org/mediawiki/2014/f/fb/Aalto_Helsinki_Lights.png');
 background-size: cover;
 color: white;
 margin-top: -10px;
 padding-top: 10vh;
 padding-bottom: 5vh;
 padding-left: 15vw;
 padding-right: 15vw;
 text-align: center;

}

.splash h1 { 

 font-size: 100px;

}

.textinsplash { 

 display: table-cell;
 vertical-align: middle;

}

.textinsplash > p { 

 font-size: large;
 font-style: italic;

}

/* Splash-tyylittelyt loppu */


/* Erillisten sivujen tyylit*/

  1. mainsplash { 
 background-image: url('http://aaltohelsinki.com/img/12.jpg');

}

  1. softwaresplash { 
 background-image: url('https://static.igem.org/mediawiki/2014/7/7f/Aalto-Helsinki-Software-placeholder.png');

}

  1. researchsplash { 
 background-image: url('https://static.igem.org/mediawiki/2014/1/13/Aalto-Helsinki-Research-Placeholder.png');

}

/* Erillisten sivujen tyylit loppu */


/* Articlejen backgroundit */

/* .turqu { 

 background-color: #0AA699;

}

.turqu a, .green a { 

 color: white;

}

.white { 

 background-color: white;

}

.black { 

 background-color: black;
 color:white;

}

.green { 

 background-color: #399f70;

}

.plum { 

 background-color:#B00C69;

}

.PCB { 

 background-color: gray;

}

  • /

/* Footerin tyylit */

footer { 

 text-align: center;
 background: white;

}

  1. logorow { 
 padding: 100px;

}

.footerimg { 

 max-height: 100px;
 max-width: 250px;

}

.footerlogo { 

 display: inline-block;
 vertical-align: middle;
 padding: 20px;

}

.footerlogo:hover .on, .footerlogo .off { 

 display:none;

}

.footerlogo:hover .off { 

 display:block;

}

/* Footerin tyylit loppu */

Retrieved from "http://2014.igem.org/Team:Aalto-Helsinki/Software"