Difference between revisions of "Team:ATOMS-Turkiye/Tour"

 
(42 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{ATOMS-Turkiye/Test}}
 
{{ATOMS-Turkiye/Test}}
 
<html>
 
<html>
 +
<div id="page-wrapper">
 +
<script>
 +
  $(document).ready(function(){
 +
    $("#headerWrapper").sticky({topSpacing:34});
 +
      $("nav.scroll-nav").sticky({topSpacing:57});
 +
       
 +
  });
 +
</script>
 
<style>
 
<style>
 +
.img-right{
 +
 
 +
    padding:0px !important;
 +
}
 +
.img-left{
 +
  padding:0px !important;
 +
}
 +
.img-center{
 +
    padding:0px !important;
 +
}
 +
 +
h2.scroll{
 +
    margin-top: 0px !important;
 +
 +
}
 +
@media (max-width: 1185px) {
 +
#footer{
 +
      margin-bottom: -285px;}
 +
}
 
div#content {
 
div#content {
−
     padding-bottom: 150px;
+
     margin-top: -12px;
 +
}
 +
#headerWrapper {
 +
    margin-top:-67px !important;
 
}
 
}
 
h2.scroll{
 
h2.scroll{
 
display:none
 
display:none
 +
}
 +
.scroll-nav{
 +
    margin-top:17px
 
}
 
}
 
#content-div{
 
#content-div{
−
     height:520px;
+
     height:500px;
−
     padding:5px;
+
     padding:15px;
 
     /*padding-right:30px;*/
 
     /*padding-right:30px;*/
 
     width:1065px;
 
     width:1065px;
Line 16: Line 49:
 
.tour-right, .tour-right p{
 
.tour-right, .tour-right p{
 
     font-family:'SegoePrint-Regular';
 
     font-family:'SegoePrint-Regular';
−
     width: 250px;
+
     width: 280px;
 
     float: right;
 
     float: right;
 
     padding-top: 50px;
 
     padding-top: 50px;
Line 45: Line 78:
 
}
 
}
 
.img-left{
 
.img-left{
−
     height:520px;
+
     height:500px;
 +
    width:auto;
 
     float:left;
 
     float:left;
 
         -webkit-border-radius: 2px;
 
         -webkit-border-radius: 2px;
Line 64: Line 98:
 
#footer{/*bottom:-240px*/}
 
#footer{/*bottom:-240px*/}
 
</style>
 
</style>
−
<div id="page-wrapper">
 
 
<div class="main">  
 
<div class="main">  
 
<article class="post__article">
 
<article class="post__article">
  
−
<div id="content-div" style="height:100%;width:1040px;padding:30px;padding-top:90px;padding-bottom:10px">
+
<div id="content-div" style="height:100%;width:1035px;padding:30px;padding-top:90px;padding-bottom:10px">
−
<h1 style="font-family:'SegoePrint-Regular';left:0px; right: 230px; padding-top:0px;color:black;font-size:25px;position:absolute;left:0px;right:0px;margin-right:480px;">Introduction</h1>
+
<h1 style="font-family:'SegoePrint-Regular';left:0px; right: 230px; padding-top:0px;color:black;font-size:25px;position:absolute;left:0px;right:0px;margin-right:480px;">Welcome to Tour Section</h1>
 
<div class="tour-centered" style="width:900px;">
 
<div class="tour-centered" style="width:900px;">
 
   
 
   
 
<p>As there is a resistance developing against H. Pylori, we aimed to eradicate it with synthetic biology. Meet Wile E. Coli! He had some modifications to cure ulcer, the ulcer made by Helico Runner(beep-beep!)</p>  
 
<p>As there is a resistance developing against H. Pylori, we aimed to eradicate it with synthetic biology. Meet Wile E. Coli! He had some modifications to cure ulcer, the ulcer made by Helico Runner(beep-beep!)</p>  
 
<p>Here are our project’s parts in a little fast tour! </p>
 
<p>Here are our project’s parts in a little fast tour! </p>
−
<p>Are you ready to learn the journey of Wile E. Coli and Helico Runner? Then change the pages with mouse or up and down keys!</p>
+
<p>Are you ready to learn the journey of Wile E. Coli and Helico Runner? <b>Then change the frames with mouse or up and down keys!</b></p>
 
</div>
 
</div>
 
</div>
 
</div>
Line 130: Line 163:
  
 
matches the lock, if miRNAs match the switch we can target cancer more specifically now!
 
matches the lock, if miRNAs match the switch we can target cancer more specifically now!
−
<p style="position:absolute;bottom:48px;margin:auto;left:0px;right:0px;background-color:#ECF7FF;box-shadow: black 0px 0px 5px;">-the end-</p>
 
 
</div>
 
</div>
 
</div>
 
</div>
  
 
<h2 class="scroll">...</h2>
 
<h2 class="scroll">...</h2>
 +
<div id="content-div" style="width:140px;height:60px;font-size:24px;">
 +
<p style="padding-top:15px;font-family:'SegoePrint-Regular';margin-left: -15px;
 +
    font-weight: 600;">- The End -</p>
 +
</div>
 
</article>
 
</article>
 
</div>
 
</div>
−
</div>
+
 
 
<script>
 
<script>
−
  $('.post__article').scrollNav({
+
$('.post__article').scrollNav({
 
     sections: 'h2.scroll',
 
     sections: 'h2.scroll',
−
     subSections: false,
+
     subSections: true,
 
     sectionElem: 'div',
 
     sectionElem: 'div',
 
     showHeadline: false,
 
     showHeadline: false,
Line 147: Line 183:
 
     showTopLink: true,
 
     showTopLink: true,
 
     topLinkText: 'Top',
 
     topLinkText: 'Top',
−
     fixedMargin: 100,
+
     fixedMargin: 40,
−
     scrollOffset: 105,
+
     scrollOffset: 110,
 
     animated: true,
 
     animated: true,
 
     speed: 500,
 
     speed: 500,
Line 159: Line 195:
 
     onDestroy: null
 
     onDestroy: null
 
});
 
});
 +
var $;
 +
var observer_target = document.querySelector('.post__article');
 +
var observer = new MutationObserver(function(mutations) {
 +
  mutations.forEach(function() {
 +
    $.fn.scrollNav('resetPos');
 +
  });
 +
});
 +
var observer_config = {
 +
  attributes: true,
 +
  childList: true,
 +
  characterData: true,
 +
  subtree: true
 +
};
 +
observer.observe(observer_target, observer_config);
 +
 +
 +
$('.box').hide();
 +
 +
// Make sure all the elements with a class of "clickme" are visible and bound
 +
// with a click event to toggle the "box" state
 +
$('.clickme').each(function() {
 +
    $(this).show(0).on('click', function(e) {
 +
        // This is only needed if your using an anchor to target the "box" elements
 +
        e.preventDefault();
 +
       
 +
        // Find the next "box" element in the DOM
 +
        $(this).next('.box').slideToggle('fast');
 +
    });
 +
});
 +
 +
  function toggle_visibility(id) {
 +
      var e = document.getElementById(id);
 +
      if(e.style.display == 'none')
 +
          e.style.display = 'inline';
 +
      else
 +
          e.style.display = 'none';
 +
    }
 +
 +
 +
 +
function scrollOpen(id){if($(id)==undefined)return;
 +
$('html, body').animate({
 +
        scrollTop: $(id).offset().top-100
 +
    },0);
 +
$(id).click();}
 +
 +
$(function(){
 +
    scrollOpen(window.location.hash);
 +
});
 +
 
</script>
 
</script>
  
 +
</div>
 
</html>
 
</html>

Latest revision as of 03:52, 5 October 2015


Welcome to Tour Section

As there is a resistance developing against H. Pylori, we aimed to eradicate it with synthetic biology. Meet Wile E. Coli! He had some modifications to cure ulcer, the ulcer made by Helico Runner(beep-beep!)

Here are our project’s parts in a little fast tour!

Are you ready to learn the journey of Wile E. Coli and Helico Runner? Then change the frames with mouse or up and down keys!

1 Resistance

At first, it will be acid resistant, to survive in stomach’s acidic microenvironment!

2 Repellency

Secondly, as Wile E. coli needed to find its way properly, he now has a part for targeting Helico Runner; chemotaxis part!

3 Motility

Thirdly, we had to make sure Wile E. Coli reached to Helico Runner, so now it can penetrate into the mucos layer with its faster flagellas!

4 Sensing

The fourth part And gate, is designed to make Wile E. Coli sensing Helico Runner. Look! It’s not chasing the fake Helico Runner anymore!

5 Killing

Thanks to our fifth part, Wile E. Coli can destroy Helico Runner with the antimicrobial peptide Pexiganan. Revenge time!

Cancer

Oh wait, what if gastric ulcer causes gastric cancer? How will we open this cancer door to reach and cure it?

miRNA Switch

Here is the solution; miRNA switch! Mr. exosome has a key to open the door now. Just like key matches the lock, if miRNAs match the switch we can target cancer more specifically now!

...

- The End -