Difference between revisions of "Team:UCL/Playingaround3"

 
(6 intermediate revisions by 2 users not shown)
Line 3: Line 3:
  
  
−
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
 
 
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway"/>
 
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway"/>
  
Line 537: Line 536:
 
a.buttongreen  {text-decoration: none; color: #fff;}
 
a.buttongreen  {text-decoration: none; color: #fff;}
  
 +
.sss {
 +
height: 0;
 +
margin: 0;
 +
padding: 0;
 +
position: relative;
 +
display: block;
 +
overflow: hidden;
 +
}
  
 +
.ssslide {
 +
width: 100%;
 +
margin: 0;
 +
padding: 0;
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
display: none;
 +
overflow: hidden;
 +
}
 +
 +
.ssslide img {
 +
max-width: 100%;
 +
height: auto;
 +
margin: 0;
 +
padding: 0;
 +
position: relative;
 +
display: block;
 +
}
 +
 +
.sssnext, .sssprev {
 +
width: 25px;
 +
height: 100%;
 +
margin: 0;
 +
position: absolute;
 +
top: 0;
 +
background: url('https://static.igem.org/mediawiki/2015/5/56/UCL_Arr.png') no-repeat;
 +
}
 +
 +
.sssprev {
 +
left: 3%;
 +
background-position: 0 50%;
 +
z-index:100;
 +
}
 +
 +
.sssnext {
 +
right: 3%;
 +
background-position: -26px 50%;
 +
}
 +
 +
.sssprev:hover, .sssnext:hover {
 +
cursor: pointer;
 +
 +
}
  
−
#slides {
+
.slider {
 
border: 15px solid #FFF;
 
border: 15px solid #FFF;
 
box-shadow: 1px 1px 5px #CCC;
 
box-shadow: 1px 1px 5px #CCC;
Line 547: Line 598:
 
background: #fff;
 
background: #fff;
 
height: 380px;
 
height: 380px;
−
width: 60%;
 
−
overflow: hidden;
 
−
position: relative;
 
  
 
}
 
}
  
−
 
+
#slideWrap {
−
#slides ul {
+
width: 60%;
−
  list-style: none;
+
margin: 0 auto;
−
  width: 100%;
+
padding-top: 10%; height: 400px;
−
  height: 250px;
+
−
  margin: 0;
+
−
  padding: 0;
+
−
  position: relative;
+
 
}
 
}
  
−
#slides li {
+
.just_text {display: inline; padding-top: 6%;
−
  width: 100%;
+
−
  height: 250px;
+
−
display: inline; padding-top: 6%;
+
 
padding-right: 10%;
 
padding-right: 10%;
 
width: 600px;
 
width: 600px;
Line 578: Line 620:
 
height: 330px;
 
height: 330px;
 
text-align: justify;
 
text-align: justify;
−
position: relative;
 
 
}
 
}
−
 
−
.btn-bar {
 
−
  width: 60%;
 
−
  margin: 0 auto;
 
−
  display: block;
 
−
  position: relative;
 
−
  top: 40px;
 
−
}
 
−
 
−
#buttons {
 
−
  padding: 0 0 5px 0;
 
−
  float: right;
 
−
}
 
−
 
−
#buttons a {
 
−
  text-align: center;
 
−
  display: block;
 
−
  font-size: 50px;
 
−
  float: left;
 
−
  outline: 0;
 
−
  margin: 0 60px;
 
−
  color: #b14943;
 
−
  text-decoration: none;
 
−
  display: block;
 
−
  padding: 9px;
 
−
  width: 35px;
 
−
}
 
−
 
−
a#prev:hover,
 
−
a#next:hover {
 
−
  color: #FFF;
 
−
  text-shadow: .5px 0px #b14943;
 
−
}
 
−
 
  
 
</style>
 
</style>
Line 665: Line 672:
 
<div id="logo">   
 
<div id="logo">   
  
−
<img src="https://static.igem.org/mediawiki/2015/d/d4/UCL_mtg2.png" class="logophoto" style="margin-bottom:40px; margin-top:-35px" />  
+
<img src="https://static.igem.org/mediawiki/2015/d/d4/UCL_mtg2.png" class="logophoto" style="margin-bottom:40px; margin-top:-35px" alt="Mind the Gut" />  
 
       <div class="intro-buttons" id="box-links">
 
       <div class="intro-buttons" id="box-links">
 
         <a data-scroll data-options='{ "easing": "linear" }' href="#intro1" class="buttonblack">Learn more</a>
 
         <a data-scroll data-options='{ "easing": "linear" }' href="#intro1" class="buttonblack">Learn more</a>
Line 683: Line 690:
 
<div id="intro1">
 
<div id="intro1">
  
 +
<div id="slideWrap">
  
 +
<div class="slider">
 +
<div class="just_text">The number of <span style="color: #FE6C68;">microorganisms</span> in human gut is higher than the number of human cells in our body. Their <span style="color: #FE6C68;">metabolic activity</span>  equals that of liver and plays crucial role in many key processes such as <span style="color: #FE6C68;">digestion</span>, <span style="color: #FE6C68;">drug metabolism</span>, or functioning of the <span style="color: #FE6C68;">immune system</span>...</div>
  
−
<div class="btn-bar">
 
−
  <div id="buttons">
 
−
    <a id="prev" href="#">&lt;</a>
 
−
    <a id="next" href="#">&gt;</a>
 
−
  </div>
 
−
</div>
 
  
−
<div id="slides">
 
  
−
  <ul>
+
<div class="just_text">
−
    <li class="slide">
+
Studies in mice have shown that the <span style="color: #1E6073;">gut microbiome</span> is also capable of  influencing the chemistry of our brain, thus regulating our <span style="color: #1E6073;">behaviour</span> , <span style="color: #1E6073;">anxiety</span> , <span style="color: #1E6073;">mood</span> , <span style="color: #1E6073;">cognition</span> and <span style="color: #1E6073;">pain</span> ...  
−
      The number of <span style="color: #FE6C68;">microorganisms</span> in human gut is higher than the number of human cells in our body. Their <span style="color: #FE6C68;">metabolic activity</span> equals that of liver and plays crucial role in many key processes such as <span style="color: #FE6C68;">digestion</span>, <span style="color: #FE6C68;">drug metabolism</span>, or functioning of the <span style="color: #FE6C68;">immune system</span>...
+
−
    </li>
+
−
    <li class="slide">
+
−
      ...
+
−
    </li>
+
−
    <li class="slide">
+
−
      ...
+
−
    </li>
+
−
  </ul>
+
 
</div>
 
</div>
 +
 +
 +
<div class="just_text">Being inspired by this emerging research area, <span style="color: #019966;">UCL <img src="http://goo.gl/Bt86ec?gdriveurl" style="width: 40px; height: 32px; display: inline;"> 2015</span> team wants to explore the modulation of the gut bacteria as a strategy for developing <span style="color: #019966;">novel treatments</span> for <span style="color: #019966;">mental health</span> disorders. Ultimately, our goal is to harness <span style="color: #019966;">synthetic biology</span> to make people <span style="color: #019966;">happy</span>! </div>
  
 
</div>
 
</div>
Line 807: Line 804:
  
 
<script>
 
<script>
−
$(document).ready(function () {
+
/** Super Simple Slider by @intllgnt **/
−
  //rotation speed and timer
+
 
−
  var speed = 5000;
+
;(function($, window, document, undefined ) {
−
 
+
 
−
  var run = setInterval(rotate, speed);
+
$.fn.sss = function(options) {
−
  var slides = $('.slide');
+
 
−
  var container = $('#slides ul');
+
// Options
−
  var elm = container.find(':first-child').prop("tagName");
+
 
−
  var item_width = container.width();
+
var settings = $.extend({
−
  var previous = 'prev'; //id of previous button
+
slideShow : true,
−
  var next = 'next'; //id of next button
+
startOn : 0,
−
  slides.width(item_width); //set the slides to the correct pixel width
+
speed : 7500,
−
  container.parent().width(item_width);
+
transition : 400,
−
  container.width(slides.length * item_width); //set the slides container to the correct total width
+
arrows : true
−
  container.find(elm + ':first').before(container.find(elm + ':last'));
+
}, options);
−
  resetSlides();
+
 
−
 
+
return this.each(function() {
−
 
+
 
−
  //if user clicked on prev button
+
// Variables
−
 
+
 
−
  $('#buttons a').click(function (e) {
+
var
−
    //slide the item
+
wrapper = $(this),
−
   
+
slides = wrapper.children().wrapAll('<div class="sss"/>').addClass('ssslide'),
−
    if (container.is(':animated')) {
+
slider = wrapper.find('.sss'),
−
      return false;
+
slide_count = slides.length,
−
    }
+
transition = settings.transition,
−
    if (e.target.id == previous) {
+
starting_slide = settings.startOn,
−
      container.stop().animate({
+
target = starting_slide > slide_count - 1 ? 0 : starting_slide,
−
        'left': 0
+
animating = false,
−
      }, 1500, function () {
+
clicked,
−
        container.find(elm + ':first').before(container.find(elm + ':last'));
+
timer,
−
        resetSlides();
+
key,
−
      });
+
prev,
−
    }
+
next,
−
   
+
 
−
    if (e.target.id == next) {
+
// Reset Slideshow
−
      container.stop().animate({
+
 
−
        'left': item_width * -2
+
reset_timer = settings.slideShow ? function() {
−
      }, 1500, function () {
+
clearTimeout(timer);
−
        container.find(elm + ':last').after(container.find(elm + ':first'));
+
timer = setTimeout(next_slide, settings.speed);
−
        resetSlides();
+
} : $.noop;
−
      });
+
 
−
    }
+
// Animate Slider
−
   
+
 
−
    //cancel the link behavior     
+
function get_height(target) {
−
    return false;
+
return ((slides.eq(target).height() / slider.width()) * 100) + '%';
−
   
+
}
−
  });
+
 
−
 
+
function animate_slide(target) {
−
  //if mouse hover, pause the auto rotation, otherwise rotate it 
+
if (!animating) {
−
  container.parent().mouseenter(function () {
+
animating = true;
−
    clearInterval(run);
+
var target_slide = slides.eq(target);
−
  }).mouseleave(function () {
+
 
−
    run = setInterval(rotate, speed);
+
target_slide.fadeIn(transition);
−
  });
+
slides.not(target_slide).fadeOut(transition);
−
 
+
 
−
 
+
slider.animate({paddingBottom: get_height(target)}, transition, function() {
−
  function resetSlides() {
+
animating = false;
−
    //and adjust the container so current is in the frame
+
});
−
    container.css({
+
 
−
      'left': -1 * item_width
+
reset_timer();
−
    });
+
 
−
  }
+
}};
−
 
+
 
 +
// Next Slide
 +
 
 +
function next_slide() {
 +
target = target === slide_count - 1 ? 0 : target + 1;
 +
animate_slide(target);
 +
}
 +
 
 +
// Prev Slide
 +
 
 +
function prev_slide() {
 +
target = target === 0 ? slide_count - 1 : target - 1;
 +
animate_slide(target);
 +
}
 +
 
 +
if (settings.arrows) {
 +
slider.append('<div class="sssprev"/>', '<div class="sssnext"/>');
 +
}
 +
 
 +
next = slider.find('.sssnext'),
 +
prev = slider.find('.sssprev');
 +
 
 +
$(window).load(function() {
 +
 
 +
slider.css({paddingBottom: get_height(target)}).click(function(e) {
 +
clicked = $(e.target);
 +
if (clicked.is(next)) { next_slide() }
 +
else if (clicked.is(prev)) { prev_slide() }
 +
});
 +
 
 +
animate_slide(target);
 +
 
 +
$(document).keydown(function(e) {
 +
key = e.keyCode;
 +
if (key === 39) { next_slide() }
 +
else if (key === 37) { prev_slide() }
 +
});
 +
 
 +
});
 +
// End
 +
 
 
});
 
});
−
//a simple function to click next link
 
−
//a timer will call this function, and the rotation will begin
 
  
−
function rotate() {
+
};
−
  $('#next').click();
+
})(jQuery, window, document);</script>
−
}
+
 
 +
<script>
 +
jQuery(function($) {
 +
$('.slider').sss();
 +
 
 +
$('.section').click(function(e) {
 +
e.preventDefault();
 +
 
 +
var loc = $(this).attr('href').substring(1);
 +
var lock = $('#' + loc).offset().top;
 +
$('body,html').animate({scrollTop:lock});
 +
});
 +
});
 
</script>
 
</script>
 +
  
  

Latest revision as of 15:52, 22 July 2015

The number of microorganisms in human gut is higher than the number of human cells in our body. Their metabolic activity equals that of liver and plays crucial role in many key processes such as digestion, drug metabolism, or functioning of the immune system...
Studies in mice have shown that the gut microbiome is also capable of influencing the chemistry of our brain, thus regulating our behaviour , anxiety , mood , cognition and pain ...
Being inspired by this emerging research area, UCL 2015 team wants to explore the modulation of the gut bacteria as a strategy for developing novel treatments for mental health disorders. Ultimately, our goal is to harness synthetic biology to make people happy!

Mind the Gut: Abstract

The gut–brain axis refers to the biochemical signalling taking place between the gastrointestinal tract and the nervous system, often involving intestinal microbiota, which have been shown to play an important role in healthy brain function. The current research suggests that gut microbes secrete neuroactive compounds – including neurotransmitters – that interact with the brain via two main mechanisms: the vagus nerve, connecting brain and digestive tract, and the immune system, which maintains its own means of communication with the brain.

In line with the ongoing research, UCL iGEM 2015 aims to develop synthetic probiotic strains that mimic the neuromodulatory strategies identified in gut microbes, with a focus on regulation of tryptophan pathway and signalling via serotonin. Additionally, in order to incorporate our neuromodulators into precise and safe therapeutic devices, we are developing a set of sensors capable of detecting mood-related physiological changes in the gut environment.

Available small molecule treatments are associated with both stigma and side effects. We believe that, besides aiding in better understanding of the communication between the gut microbiome and nervous system, our work will also lay a foundation for novel user-friendly treatments targeting a range of mental health disorders.

Back to top