Difference between revisions of "Team:BGU Israel"

Line 1: Line 1:
 
{{BGU_Israel}}
 
{{BGU_Israel}}
−
<html lang="en">
+
 
−
<head>
+
 
    
 
    
 
   <title>OriginALS</title>
 
   <title>OriginALS</title>

Revision as of 08:42, 29 July 2018

OriginALS 


 <title>OriginALS</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
   <link type="text/css" rel="stylesheet" href="style.css">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
 <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <style>
   body {
     font: 400 15px Segoe UI, sans-serif;
     line-height: 1.8;
     color: #818181;
 }
 h1 {
     font-size: 32px;
     font-family: Segoe UI Light;
     text-transform: uppercase;
     color: #303030;
     font-weight: 600;
     margin-bottom: 30px;
 }
 h4 {
     font-size: 19px;
     line-height: 1.375em;
     color: #303030;
     font-weight: 400;
     margin-bottom: 30px;
 }  
     p, ol {
         font-size: 16px;
         
         color:#010101;
     }
 .jumbotron {
     background-color: #f4511e;
     color: #fff;
     padding: 100px 25px;
     font-family: Montserrat, sans-serif;
 }
 .container-fluid {
     padding: 60px 50px;
 }
 .bg-grey {
     background-color: #f6f6f6;
 }
 .logo-small {
     color: #f4511e;
     font-size: 50px;
 }
 .logo {
     color: #f4511e;
     font-size: 200px;
 }
 .thumbnail {
     padding: 0 0 15px 0;
     border: none;
     border-radius: 0;
 }
 .thumbnail img {
     width: 100%;
     height: 100%;
     margin-bottom: 10px;
 }
 .carousel-control.right, .carousel-control.left {
     background-image: none;
     color: #f4511e;
 }
 .carousel-indicators li {
     border-color: #f4511e;
 }
 .carousel-indicators li.active {
     background-color: #f4511e;
 }
 .item h4 {
     font-size: 19px;
     line-height: 1.375em;
     font-weight: 400;
     font-style: italic;
     margin: 70px 0;
 }
 .item span {
     font-style: normal;
 }
 .panel {
     border: 1px solid #f4511e; 
     border-radius:0 !important;
     transition: box-shadow 0.5s;
 }
 .panel:hover {
     box-shadow: 5px 0px 40px rgba(0,0,0, .2);
 }
 .panel-footer .btn:hover {
     border: 1px solid #f4511e;
     background-color: #fff !important;
     color: #f4511e;
 }
 .panel-heading {
     color: #fff !important;
     background-color: #f4511e !important;
     padding: 25px;
     border-bottom: 1px solid transparent;
     border-top-left-radius: 0px;
     border-top-right-radius: 0px;
     border-bottom-left-radius: 0px;
     border-bottom-right-radius: 0px;
 }
 .panel-footer {
     background-color: white !important;
 }
 .panel-footer h3 {
     font-size: 32px;
 }
 .panel-footer h4 {
     color: #aaa;
     font-size: 14px;
 }
 .panel-footer .btn {
     margin: 15px 0;
     background-color: #f4511e;
     color: #fff;
 }
 .navbar {
     margin-bottom: 0;
     background-color: #fff;
     z-index: 9999;
     border: 0;
    text-transform:uppercase;
     border-radius: 0;
     font-family: 'Segoe UI Light';
     font-weight: 600;
     color:#000;
 }
 .navbar li a, .navbar .navbar-brand {
     color: #000 !important;
 }
 .navbar-nav li a:hover, .navbar-nav li.active a {
     color: #0186ac !important;
     background-color: #fff !important;
 }
 .navbar-default .navbar-toggle {
     border-color: transparent;
     color: #fff !important;
 }

 .slideanim {visibility:hidden;}
 .slide {
     animation-name: slide;
     -webkit-animation-name: slide;
     animation-duration: 1s;
     -webkit-animation-duration: 1s;
     visibility: visible;
 }
 @keyframes slide {
   0% {
     opacity: 0;
     transform: translateY(70%);
   } 
   100% {
     opacity: 1;
     transform: translateY(0%);
   }
 }
 @-webkit-keyframes slide {
   0% {
     opacity: 0;
     -webkit-transform: translateY(70%);
   } 
   100% {
     opacity: 1;
     -webkit-transform: translateY(0%);
   }
 }
 @media screen and (max-width: 768px) {
   .col-sm-4 {
     text-align: center;
     margin: 25px 0;
   }
   .btn-lg {
       width: 100%;
       margin-bottom: 35px;
   }
 }
 @media screen and (max-width: 480px) {
   .logo {
       font-size: 150px;
   }
 }
     header.masthead {
 padding-top: 10rem;
 padding-bottom: calc(10rem - 56px);
 
 background-position: center center;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;

} 

     .parallax-window {
   min-height: 700px;
   background: transparent;

} 

     #abstract p, #abstract ol {
         text-align: justify;
     }
     #myBtn {
 display: none;
         
 position: fixed;
 bottom: 20px;
 right: 20px;
 z-index: 99;
 font-size: 16px;
 border: none;
 outline: none;
 background-color: #0186ac;
 color: white;
 cursor: pointer;
 padding: 8px 15px 8px 15px;
 border-radius: 100px;

}

  1. myBtn:hover {
 background-color: #555;

} 

     footer {
         background-color:#262626;
         color:#fff !important;
     }
   </style>

</head> <body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60"> 

   <a id="myBtn" href="#top" title="To Top">
   
 </a>

<nav class="navbar navbar-default navbar-fixed-top"> 

     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
       
       
                               
     </button>
     <a class="navbar-brand" href="#myPage">Logo</a>

</nav> 

 <header class="masthead text-center parallax-window text-white d-flex" data-parallax="scroll" data-image-src="T--BGU_Israel--home_banner.jpg">

   </header>

Abstract

Recent research studies of Amyotrophic Lateral Sclerosis (ALS) suggest that brain cells that have become toxic, directly contribute to the progression of the disease. These cells change their gene expression pattern and possess distinguishing genetic markers. In addition, they drive the death of other cells in the brain among them the motor neurons.

Our objective, as the BGU-IGEM team OriginALS, is to prolong survival of ALS patients via a novel genetic engineering approach. In order to reach this objective, we combine two separate strategies as our therapeutic approach:

  1. We identify and selectively eliminate only the toxic cells. In order to identify and target the toxic-cells only, we use distinguishing markers that are unique only to them.
  2. We prevent the generation of new toxic cells by genetically targeting specific molecules that generate the toxic cells.

In conclusion, our approach combines an apoptotic destruction of toxic cells with the prevention of the formation of new toxic cells, thus aiming to significantly reduce the occurrence of toxic cells in the central neuronal system (CNS), which is aimed at a significant deceleration of the progression rate of ALS.


<footer class="container-fluid text-center">

</footer>

<script> $(document).ready(function(){ 

 // Add smooth scrolling to all links in navbar + footer link
 $(".navbar a, #myBtn[href='#top']").on('click', function(event) {
   // Make sure this.hash has a value before overriding default behavior
   if (this.hash !== "") {
     // Prevent default anchor click behavior
     event.preventDefault();

     // Store hash
     var hash = this.hash;

     // Using jQuery's animate() method to add smooth page scroll
     // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
     $('html, body').animate({
       scrollTop: $(hash).offset().top
     }, 500, function(){
  
       // Add hash (#) to URL when done scrolling (default click behavior)
       window.location.hash = hash;
     });
   } // End if
 });
 
 $(window).scroll(function() {
   $(".slideanim").each(function(){
     var pos = $(this).offset().top;

     var winTop = $(window).scrollTop();
       if (pos < winTop + 600) {
         $(this).addClass("slide");
       }
   });
 });

}) </script> 

<script>
   /*!
* parallax.js v1.5.0 (http://pixelcog.github.io/parallax.js/)
* @copyright 2016 PixelCog, Inc.
* @license MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE)
*/
(function ( $, window, document, undefined ) {
 // Polyfill for requestAnimationFrame
 // via: https://gist.github.com/paulirish/1579671

 (function() {
   var lastTime = 0;
   var vendors = ['ms', 'moz', 'webkit', 'o'];
   for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
     window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
     window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
   }

   if (!window.requestAnimationFrame)
     window.requestAnimationFrame = function(callback) {
       var currTime = new Date().getTime();
       var timeToCall = Math.max(0, 16 - (currTime - lastTime));
       var id = window.setTimeout(function() { callback(currTime + timeToCall); },
         timeToCall);
       lastTime = currTime + timeToCall;
       return id;
     };

   if (!window.cancelAnimationFrame)
     window.cancelAnimationFrame = function(id) {
       clearTimeout(id);
     };
 }());



 // Parallax Constructor

 function Parallax(element, options) {
   var self = this;

   if (typeof options == 'object') {
     delete options.refresh;
     delete options.render;
     $.extend(this, options);
   }

   this.$element = $(element);

   if (!this.imageSrc && this.$element.is('img')) {
     this.imageSrc = this.$element.attr('src');
   }

   var positions = (this.position + ).toLowerCase().match(/\S+/g) || [];

   if (positions.length < 1) {
     positions.push('center');
   }
   if (positions.length == 1) {
     positions.push(positions[0]);
   }

   if (positions[0] == 'top' || positions[0] == 'bottom' || positions[1] == 'left' || positions[1] == 'right') {
     positions = [positions[1], positions[0]];
   }

   if (this.positionX !== undefined) positions[0] = this.positionX.toLowerCase();
   if (this.positionY !== undefined) positions[1] = this.positionY.toLowerCase();

   self.positionX = positions[0];
   self.positionY = positions[1];

   if (this.positionX != 'left' && this.positionX != 'right') {
     if (isNaN(parseInt(this.positionX))) {
       this.positionX = 'center';
     } else {
       this.positionX = parseInt(this.positionX);
     }
   }

   if (this.positionY != 'top' && this.positionY != 'bottom') {
     if (isNaN(parseInt(this.positionY))) {
       this.positionY = 'center';
     } else {
       this.positionY = parseInt(this.positionY);
     }
   }

   this.position =
     this.positionX + (isNaN(this.positionX)?  : 'px') + ' ' +
     this.positionY + (isNaN(this.positionY)?  : 'px');

   if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
     if (this.imageSrc && this.iosFix && !this.$element.is('img')) {
       this.$element.css({
         backgroundImage: 'url(' + this.imageSrc + ')',
         backgroundSize: 'cover',
         backgroundPosition: this.position
       });
     }
     return this;
   }

   if (navigator.userAgent.match(/(Android)/)) {
     if (this.imageSrc && this.androidFix && !this.$element.is('img')) {
       this.$element.css({
         backgroundImage: 'url(' + this.imageSrc + ')',
         backgroundSize: 'cover',
         backgroundPosition: this.position
       });
     }
     return this;
   }

   this.$mirror = $('<div />').prependTo(this.mirrorContainer);

   var slider = this.$element.find('>.parallax-slider');
   var sliderExisted = false;

   if (slider.length == 0)
     this.$slider = $('<img />').prependTo(this.$mirror);
   else {
     this.$slider = slider.prependTo(this.$mirror)
     sliderExisted = true;
   }

   this.$mirror.addClass('parallax-mirror').css({
     visibility: 'hidden',
     zIndex: this.zIndex,
     position: 'fixed',
     top: 0,
     left: 0,
     overflow: 'hidden'
   });

   this.$slider.addClass('parallax-slider').one('load', function() {
     if (!self.naturalHeight || !self.naturalWidth) {
       self.naturalHeight = this.naturalHeight || this.height || 1;
       self.naturalWidth  = this.naturalWidth  || this.width  || 1;
     }
     self.aspectRatio = self.naturalWidth / self.naturalHeight;

     Parallax.isSetup || Parallax.setup();
     Parallax.sliders.push(self);
     Parallax.isFresh = false;
     Parallax.requestRender();
   });

   if (!sliderExisted)
     this.$slider[0].src = this.imageSrc;

   if (this.naturalHeight && this.naturalWidth || this.$slider[0].complete || slider.length > 0) {
     this.$slider.trigger('load');
   }

 }



 // Parallax Instance Methods

 $.extend(Parallax.prototype, {
   speed:    0.2,
   bleed:    0,
   zIndex:   -100,
   iosFix:   true,
   androidFix: true,
   position: 'center',
   overScrollFix: false,
   mirrorContainer: 'body',

   refresh: function() {
     this.boxWidth        = this.$element.outerWidth();
     this.boxHeight       = this.$element.outerHeight() + this.bleed * 2;
     this.boxOffsetTop    = this.$element.offset().top - this.bleed;
     this.boxOffsetLeft   = this.$element.offset().left;
     this.boxOffsetBottom = this.boxOffsetTop + this.boxHeight;

     var winHeight = Parallax.winHeight;
     var docHeight = Parallax.docHeight;
     var maxOffset = Math.min(this.boxOffsetTop, docHeight - winHeight);
     var minOffset = Math.max(this.boxOffsetTop + this.boxHeight - winHeight, 0);
     var imageHeightMin = this.boxHeight + (maxOffset - minOffset) * (1 - this.speed) | 0;
     var imageOffsetMin = (this.boxOffsetTop - maxOffset) * (1 - this.speed) | 0;
     var margin;

     if (imageHeightMin * this.aspectRatio >= this.boxWidth) {
       this.imageWidth    = imageHeightMin * this.aspectRatio | 0;
       this.imageHeight   = imageHeightMin;
       this.offsetBaseTop = imageOffsetMin;

       margin = this.imageWidth - this.boxWidth;

       if (this.positionX == 'left') {
         this.offsetLeft = 0;
       } else if (this.positionX == 'right') {
         this.offsetLeft = - margin;
       } else if (!isNaN(this.positionX)) {
         this.offsetLeft = Math.max(this.positionX, - margin);
       } else {
         this.offsetLeft = - margin / 2 | 0;
       }
     } else {
       this.imageWidth    = this.boxWidth;
       this.imageHeight   = this.boxWidth / this.aspectRatio | 0;
       this.offsetLeft    = 0;

       margin = this.imageHeight - imageHeightMin;

       if (this.positionY == 'top') {
         this.offsetBaseTop = imageOffsetMin;
       } else if (this.positionY == 'bottom') {
         this.offsetBaseTop = imageOffsetMin - margin;
       } else if (!isNaN(this.positionY)) {
         this.offsetBaseTop = imageOffsetMin + Math.max(this.positionY, - margin);
       } else {
         this.offsetBaseTop = imageOffsetMin - margin / 2 | 0;
       }
     }
   },

   render: function() {
     var scrollTop    = Parallax.scrollTop;
     var scrollLeft   = Parallax.scrollLeft;
     var overScroll   = this.overScrollFix ? Parallax.overScroll : 0;
     var scrollBottom = scrollTop + Parallax.winHeight;

     if (this.boxOffsetBottom > scrollTop && this.boxOffsetTop <= scrollBottom) {
       this.visibility = 'visible';
       this.mirrorTop = this.boxOffsetTop  - scrollTop;
       this.mirrorLeft = this.boxOffsetLeft - scrollLeft;
       this.offsetTop = this.offsetBaseTop - this.mirrorTop * (1 - this.speed);
     } else {
       this.visibility = 'hidden';
     }

     this.$mirror.css({
       transform: 'translate3d('+this.mirrorLeft+'px, '+(this.mirrorTop - overScroll)+'px, 0px)',
       visibility: this.visibility,
       height: this.boxHeight,
       width: this.boxWidth
     });

     this.$slider.css({
       transform: 'translate3d('+this.offsetLeft+'px, '+this.offsetTop+'px, 0px)',
       position: 'absolute',
       height: this.imageHeight,
       width: this.imageWidth,
       maxWidth: 'none'
     });
   }
 });



 // Parallax Static Methods

 $.extend(Parallax, {
   scrollTop:    0,
   scrollLeft:   0,
   winHeight:    0,
   winWidth:     0,
   docHeight:    1 << 30,
   docWidth:     1 << 30,
   sliders:      [],
   isReady:      false,
   isFresh:      false,
   isBusy:       false,

   setup: function() {
     if (this.isReady) return;

     var self = this;

     var $doc = $(document), $win = $(window);

     var loadDimensions = function() {
       Parallax.winHeight = $win.height();
       Parallax.winWidth  = $win.width();
       Parallax.docHeight = $doc.height();
       Parallax.docWidth  = $doc.width();
     };

     var loadScrollPosition = function() {
       var winScrollTop  = $win.scrollTop();
       var scrollTopMax  = Parallax.docHeight - Parallax.winHeight;
       var scrollLeftMax = Parallax.docWidth  - Parallax.winWidth;
       Parallax.scrollTop  = Math.max(0, Math.min(scrollTopMax,  winScrollTop));
       Parallax.scrollLeft = Math.max(0, Math.min(scrollLeftMax, $win.scrollLeft()));
       Parallax.overScroll = Math.max(winScrollTop - scrollTopMax, Math.min(winScrollTop, 0));
     };

     $win.on('resize.px.parallax load.px.parallax', function() {
         loadDimensions();
         self.refresh();
         Parallax.isFresh = false;
         Parallax.requestRender();
       })
       .on('scroll.px.parallax load.px.parallax', function() {
         loadScrollPosition();
         Parallax.requestRender();
       });

     loadDimensions();
     loadScrollPosition();

     this.isReady = true;

     var lastPosition = -1;

     function frameLoop() {
       if (lastPosition == window.pageYOffset) {   // Avoid overcalculations
         window.requestAnimationFrame(frameLoop);
         return false;
       } else lastPosition = window.pageYOffset;

       self.render();
       window.requestAnimationFrame(frameLoop);
     }

     frameLoop();
   },

   configure: function(options) {
     if (typeof options == 'object') {
       delete options.refresh;
       delete options.render;
       $.extend(this.prototype, options);
     }
   },

   refresh: function() {
     $.each(this.sliders, function(){ this.refresh(); });
     this.isFresh = true;
   },

   render: function() {
     this.isFresh || this.refresh();
     $.each(this.sliders, function(){ this.render(); });
   },

   requestRender: function() {
     var self = this;
     self.render();
     self.isBusy = false;
   },
   destroy: function(el){
     var i,
         parallaxElement = $(el).data('px.parallax');
     parallaxElement.$mirror.remove();
     for(i=0; i < this.sliders.length; i+=1){
       if(this.sliders[i] == parallaxElement){
         this.sliders.splice(i, 1);
       }
     }
     $(el).data('px.parallax', false);
     if(this.sliders.length === 0){
       $(window).off('scroll.px.parallax resize.px.parallax load.px.parallax');
       this.isReady = false;
       Parallax.isSetup = false;
     }
   }
 });



 // Parallax Plugin Definition

 function Plugin(option) {
   return this.each(function () {
     var $this = $(this);
     var options = typeof option == 'object' && option;

     if (this == window || this == document || $this.is('body')) {
       Parallax.configure(options);
     }
     else if (!$this.data('px.parallax')) {
       options = $.extend({}, $this.data(), options);
       $this.data('px.parallax', new Parallax(this, options));
     }
     else if (typeof option == 'object')
     {
       $.extend($this.data('px.parallax'), options);
     }
     if (typeof option == 'string') {
       if(option == 'destroy'){
           Parallax.destroy(this);
       }else{
         Parallax[option]();
       }
     }
   });
 }

 var old = $.fn.parallax;

 $.fn.parallax             = Plugin;
 $.fn.parallax.Constructor = Parallax;



 // Parallax No Conflict

 $.fn.parallax.noConflict = function () {
   $.fn.parallax = old;
   return this;
 };



 // Parallax Data-API

 $( function () { 
   $('[data-parallax="scroll"]').parallax(); 
 });

}(jQuery, window, document)); 

   </script>
   <script>

// When the user scrolls down 20px from the top of the document, show the button window.onscroll = function() {scrollFunction()};

function scrollFunction() { 

   if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
       document.getElementById("myBtn").style.display = "block";
   } else {
       document.getElementById("myBtn").style.display = "none";
   }

}


</script> </body> </html>