Difference between revisions of "Team:Tianjin/Templates/MaterialTheme"

 
(60 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 +
{{:Team:Tianjin/Templates/AddCSS|:Team:Tianjin/css/material/fonts}}
 
{{:Team:Tianjin/Templates/AddCSS|:Team:Tianjin/css/material/bootstrap}}
 
{{:Team:Tianjin/Templates/AddCSS|:Team:Tianjin/css/material/bootstrap}}
 
{{:Team:Tianjin/Templates/AddCSS|:Team:Tianjin/css/material/kit}}
 
{{:Team:Tianjin/Templates/AddCSS|:Team:Tianjin/css/material/kit}}
 
{{:Team:Tianjin/Templates/AddCSS|:Team:Tianjin/css/material/animate}}
 
{{:Team:Tianjin/Templates/AddCSS|:Team:Tianjin/css/material/animate}}
 +
{{:Team:Tianjin/Templates/AddCSS|:Team:Tianjin/css/material/lightbox}}
 +
{{:Team:Tianjin/Templates/AddCSS|:Team:Tianjin/css/material/SideNavbar}}
  
 
<html lang="en">
 
<html lang="en">
Line 10: Line 13:
 
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
 
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
 
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
 
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
−
        <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" />
+
<link href="https://fonts.googleapis.com/css?family=Racing+Sans+One|Roboto" rel="stylesheet">
 
</head>
 
</head>
 +
 +
<!---------------- Team Tianjin WIKI Template Start ---------------->
  
 
<body>
 
<body>
  
−
<!-- Navbar will come here -->
+
<!-- TeamTianjin Navbar start -->
  
−
<nav class="navbar navbar-info" role="navigation" id="TeamTianjinNavbar">
+
<nav class="navbar navbar-TeamTianjin" role="navigation" id="TeamTianjinNavbar">
 
<div class="container-fluid">
 
<div class="container-fluid">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
−
                 <div class="nameTeamTianjin">TEAM TIANJIN</div>
+
                 <div class="nameTeamTianjin">PLASTERMINATOR</div>
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">  
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">  
 
                 <span class="sr-only">Toggle navigation</span>
 
                 <span class="sr-only">Toggle navigation</span>
Line 27: Line 32:
 
                 <span class="icon-bar"></span>
 
                 <span class="icon-bar"></span>
 
     </button>
 
     </button>
−
     <img class="img-responsive logoBG" src="https://static.igem.org/mediawiki/2016/5/51/TestLOGOofTeamTianjin.png" alt="Logo on left" href="http://127.0.0.1">
+
     <a href="https://2016.igem.org/Team:Tianjin"><img class="img-responsive logoBG" src="https://static.igem.org/mediawiki/2016/2/21/T--Tianjin--Team_Tianjin_Logo.png" title="Plasterminator - Team Tianjin" alt="Team Tianjin Logo"></a>
  
 
     </div>
 
     </div>
 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 
     <ul class="nav navbar-nav">
 
     <ul class="nav navbar-nav">
−
<li class="active"><a href="#">OVERVIEW</a></li>
+
<li><a href="https://2016.igem.org/Team:Tianjin" id="Overview">OVERVIEW</a></li>
−
        <li><a href="#">ACHIEVEMENTS</a></li>
+
 
         <li class="dropdown">
 
         <li class="dropdown">
−
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">PROJECTS</a>
+
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="Projects">PROJECTS</a>
 
         <ul class="dropdown-menu">
 
         <ul class="dropdown-menu">
−
  <li><a href="#">VISION</a></li>
+
  <li><a href="https://2016.igem.org/Team:Tianjin/Description" id="Outline">OUTLINE</a></li>
−
  <li><a href="#">EXPERIMENT</a></li>
+
−
  <li><a href="#">MODELING</a></li>
+
−
  <li><a href="#">RESULTS</a></li>
+
 
                       <li class="divider"></li>
 
                       <li class="divider"></li>
−
      <li><a href="#">PARTS</a></li>
+
  <li><a href="https://2016.igem.org/Team:Tianjin/Experiment/Consortium" id="Consortium">CONSORTIUM</a></li>
−
                       <li><a href="#">LABORATORY NOTES</a></li>
+
  <li><a href="https://2016.igem.org/Team:Tianjin/Experiment/Protein_Engineering" id="ProteinEngineering">PROTEIN ENGINEERING</a></li>
 +
  <li><a href="https://2016.igem.org/Team:Tianjin/Experiment/R-R" id="RRSystem">R-R SYSTEM</a></li>
 +
                       <li class="divider"></li>
 +
                                      <li><a href="https://2016.igem.org/Team:Tianjin/Proof" id="Proof">PROOF</a></li>
 +
      <li><a href="https://2016.igem.org/Team:Tianjin/Model" id="Model">MODEL</a></li>
 
         </ul>
 
         </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown">
 
         <li class="dropdown">
−
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">PEOPLE</a>
+
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="Results">RESULTS</a>
 
         <ul class="dropdown-menu">
 
         <ul class="dropdown-menu">
−
  <li><a href="#">TEAM</a></li>
+
  <li><a href="https://2016.igem.org/Team:Tianjin/Achievements" id="Achievements">ACHIEVEMENTS</a></li>
−
  <li><a href="#">COLLABORATION</a></li>
+
  <li><a href="https://2016.igem.org/Team:Tianjin/Demonstrate" id="Demonstrate">DEMONSTRATE</a></li>
−
  <li><a href="#">SOCIAL MEDIA</a></li>
+
                      <li class="divider"></li>
 +
  <li><a href="https://2016.igem.org/Team:Tianjin/Parts" id="Parts">PARTS</a></li>
 +
                      <li><a href="https://2016.igem.org/Team:Tianjin/Future" id="FutureWork">FUTURE WORK</a></li>
 
         </ul>
 
         </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown">
 
         <li class="dropdown">
−
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">PRATICE</a>
+
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="People">PEOPLE</a>
 
         <ul class="dropdown-menu">
 
         <ul class="dropdown-menu">
−
  <li><a href="#">COMUNITY</a></li>
+
  <li><a href="https://2016.igem.org/Team:Tianjin/Team" id="Team">TEAM</a></li>
−
  <li><a href="#">BUSINESS PLAN</a></li>
+
  <li><a href="https://2016.igem.org/Team:Tianjin/Attributions" id="Attribution">ATTRIBUTION</a></li>
 +
        </ul>
 +
        </li>
 +
        <li class="dropdown">
 +
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="Outreach">OUTREACH</a>
 +
        <ul class="dropdown-menu">
 +
  <li><a href="https://2016.igem.org/Team:Tianjin/Community/Overview" id="HumanPractice">HUMAN PRACTICE</a></li>
 +
  <li><a href="https://2016.igem.org/Team:Tianjin/Collaborations" id="Collaborations">COLLABORATIONS</a></li>
 +
                      <li><a href="https://2016.igem.org/Team:Tianjin/Safety" id="Safety">SAFETY</a></li>
 +
        </ul>
 +
        </li>
 +
        <li class="dropdown">
 +
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="Notes">NOTES</a>
 +
        <ul class="dropdown-menu">
 +
  <li><a href="https://2016.igem.org/Team:Tianjin/Notes" id="Notebook">NOTEBOOK</a></li>
 +
  <li><a href="https://2016.igem.org/Team:Tianjin/Protocol" id="Protocol">PROTOCOL</a></li>
 
         </ul>
 
         </ul>
 
         </li>
 
         </li>
Line 65: Line 87:
 
</div>
 
</div>
 
</nav>
 
</nav>
−
<div class="navbarRightPic"><img class="img-responsive" src="https://static.igem.org/mediawiki/2016/5/51/TestLOGOofTeamTianjin.png" alt="LOGO" width="128"></div>
+
<div class="navbarRightPic"><img class="img-responsive" src="https://static.igem.org/mediawiki/2016/2/21/T--Tianjin--Team_Tianjin_Logo.png" alt="LOGO" width="128"></div>
−
<!-- end navbar -->
+
−
        <div class="wrapper">
+
−
            <div class="section section-header">
+
−
                <div class="parallax full-image">
+
−
                    <img class="img-responsive" src="https://static.igem.org/mediawiki/2016/1/1e/TeamTianjin_BG_Test.jpg" alt="TeamTianjin Back Ground">
+
−
                    <div class="container">
+
−
                        <div class="content">
+
−
                            <h1>Team Tianjin</h1>
+
−
                            <div class="separator-container">
+
−
                                <div class="separator line-separator">∎</div>
+
−
                            </div>
+
−
                            <h5>Plastic tastes good  --- <i>E.Coli</i></h5>
+
−
                        </div>
+
−
                    </div>
+
−
                </div>
+
−
                <a href="" data-scroll="true" data-id="#whoWeAre" class="scroll-arrow -xs -sm">
+
−
                <i class="fa fa-angle-down"></i>
+
−
                </a>
+
−
            </div>
+
−
            <div class="section section-we-are-1" id="whoWeAre">
+
−
                <div class="text-area">
+
−
                    <div class="container">
+
−
                        <div class="row">
+
−
                            <div class="title" id="animationTest">
+
−
                                <h2>A brief description</h2>
+
−
                                <div class="separator-container">
+
−
                                    <div class="separator line-separator">∎</div>
+
−
                                </div>
+
−
                                <p class="large">
+
−
                                    This March our team paid much attention to an article ‘A bacterium that degrades and assimilates poly (ethylene terephthalate)’published in Science in the same month. A new kind of bacteria that can decompose PET was found and studied in detail. We plan to express its unique genes in some commonly used mode organisms such as yeasts and E.colis to enhance its activities of decomposition significantly since they are relatively low at present.
+
−
                                </p>
+
−
                            </div>
+
−
                        </div>
+
−
                    </div>
+
−
                </div>
+
−
 
+
−
            </div>
+
−
<div class="wrapper">
+
−
<div class="header">
+
  
−
</div>
+
  <!-- navbar end -->
−
<!-- you can use the class main-raised if you want the main area to be as a page with shadows -->
+
−
<div class="main">
+
−
<div class="container">
+
−
 
+
−
<!-- here you can add your content -->
+
−
+
−
</div>
+
−
</div>
+
−
</div>
+
  
 
</body>
 
</body>
  
−
<script>
+
<!---------------- Team Tianjin WIKI Template End ---------------->
−
var searchVisible = 0;
+
−
var transparent = true;
+
  
−
var transparentDemo = true;
 
−
var fixedTop = false;
 
  
−
var navbar_initialized = false;
+
<style>
 +
/* OVERRIDE IGEM SETTINGS */
  
−
var big_image;
+
#sideMenu, #top_title, #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading, .visualClear {display: none}
−
var scroll;
+
#content {width: 100%;  background: transparent; margin: 0; padding: 0; }
−
var project_content;
+
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5  { margin-bottom: 2px; }
−
var $project;
+
        #top_menu_under {
−
scroll = ( 2500 - $(window).width() ) / $(window).width();
+
                height: 0px;
 +
                border-bottom: 0 none;
 +
                display: none;
 +
      }
  
−
var $ScrollTop;
+
        #top_menu_14 {
−
var $ScrollBot;
+
                height: 24px;
 +
                border-bottom: 0 none;
 +
      }
  
−
var pixels;
+
#globalWrapper, #content  {
 +
width: 100%;
 +
height: 100%;
 +
                margin:  0;
 +
float:  none;
 +
font-size: 100%;
 +
                z-index: 0;
 +
}
  
−
var modal;
+
div[id=mw-content-text] > p {
−
var $project_content;
+
display: none;
 +
}
  
−
var test = true;      
+
#sideMenu {
 +
width: 200px;
 +
}
  
−
var timerStart = Date.now();
+
#sideMenu .mainMenu_Title, #sideMenu .mainMenu_toggle, #sideMenu #MainPage_menu ul li li {
−
var delay;
+
border: none;
 +
}
  
−
var no_of_elements = 0;
+
#sideMenu .sideMenuTitle {
−
var window_height;
+
height: 35px;
−
var window_width;
+
}
  
−
var content_opacity = 0;
+
#top_menu_inside .submenu {
−
var content_transition = 0;
+
width: auto;
−
var no_touch_screen = false;
+
}
  
−
var burger_menu;
 
  
−
       
+
−
$(document).ready(function(){
+
−
    BrowserDetect.init();
+
−
   
+
−
    if(BrowserDetect.browser == 'Explorer' && BrowserDetect.version <= 9){
+
−
        $('body').html(better_browser); 
+
−
    }
+
  
−
    window_width = $(window).width();
+
</style>
−
    window_height = $(window).height();
+
  
−
   
 
−
    rubik.initAnimationsCheck();
 
−
   
 
−
    // Init navigation toggle for small screens 
 
−
    if(window_width < 979 || burger_menu){
 
−
        rubik.initRightMenu(); 
 
−
    }
 
  
−
    if(window_width < 979){
 
−
        $('.over-area').each(function(){
 
−
            var click = $(this).attr("onClick");
 
−
            if(click == ''){
 
−
                src = "rubik.showModal(this)";
 
−
                $(this).attr("onClick", src);
 
−
            }
 
−
        });
 
−
       
 
−
        rubik.checkResponsiveImage();
 
−
    }
 
−
   
 
−
   
 
−
   
 
−
    if($('#contactUsMap').length != 0){
 
−
        rubik.initGoogleMaps(); 
 
−
    }
 
−
   
 
−
    if($('.content-with-opacity').length != 0){
 
−
        content_opacity = 1;
 
−
    }
 
  
−
});
 
−
 
−
$(window).on('scroll',function(){
 
−
  if(window_width > 980){
 
−
        rubik.checkScrollForParallax();
 
−
  }
 
−
       
 
−
});
 
−
 
−
$(window).load(function(){
 
−
   
 
−
    //after the content is loaded we reinitialize all the waypoints for the animations
 
−
    rubik.initAnimationsCheck();
 
−
   
 
−
}); 
 
−
 
−
$('a[data-scroll="true"]').click(function(e){       
 
−
    var scroll_target = $(this).data('id');
 
−
    var scroll_trigger = $(this).data('scroll');
 
−
   
 
−
    if(scroll_trigger == true && scroll_target !== undefined){
 
−
        e.preventDefault();
 
−
       
 
−
        $('html, body').animate({
 
−
            scrollTop: $(scroll_target).offset().top - 50
 
−
        }, 1000);
 
−
    }
 
−
               
 
−
});
 
−
 
−
   
 
−
rubik = {
 
−
 
−
    initAnimationsCheck: function(){
 
−
       
 
−
        $('[class*="add-animation"]').each(function(){
 
−
          offset_diff = 30;
 
−
          if($(this).hasClass('title')){
 
−
              offset_diff = 110;
 
−
          }
 
−
         
 
−
 
−
        });
 
−
 
 
−
    },
 
−
 
−
 
−
    checkResponsiveImage: function(){
 
−
        $('.section-header > div > img, .section-header video').each(function(){
 
−
            var $image = $(this);
 
−
            var src = $image.attr("responsive-src");
 
−
   
 
−
            if(!src){
 
−
              src = $image.attr('src');
 
−
            }
 
−
   
 
−
            div = '<div class="responsive-background" style="background-image:url(' + src + ')"/>';
 
−
            $image.after(div);
 
−
            $image.addClass('-xs');
 
−
        });
 
−
    }, 
 
−
 
−
   
 
−
    checkScrollForParallax: debounce(function() {
 
−
 
−
        no_of_elements = 0;
 
−
        $('.parallax').each(function() {
 
−
            var $elem = $(this);
 
−
           
 
−
            if(isElementInViewport($elem)){
 
−
                  var parent_top = $elem.offset().top;         
 
−
                  var window_bottom = $(window).scrollTop();
 
−
                  var $image = $elem.find('img')
 
−
                               
 
−
              oVal = ((window_bottom - parent_top) / 3);
 
−
                  $image.css('transform','translate3d(0px, ' + oVal + 'px, 0px)');   
 
−
            }
 
−
            });
 
−
   
 
−
    }, 6),
 
−
   
 
−
    checkScrollForContentTransitions: debounce(function() {
 
−
        $('.content-with-opacity').each(function() {
 
−
            var $content = $(this);
 
−
           
 
−
            if(isElementInViewport($content)){         
 
−
                  var window_top = $(window).scrollTop();
 
−
              opacityVal = 1 - (window_top / 230);
 
−
                 
 
−
                  if(opacityVal < 0){
 
−
                      opacityVal = 0;
 
−
                      return;
 
−
                  } else {
 
−
                    $content.css('opacity',opacityVal);   
 
−
                  }
 
−
                     
 
−
            }           
 
−
        });
 
−
    }, 6),
 
−
     
 
−
}
 
−
 
−
 
−
 
−
 
−
function isElementInViewport(elem) {
 
−
    var $elem = $(elem);
 
−
 
−
    // Get the scroll position of the page.
 
−
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
 
−
    var viewportTop = $(scrollElem).scrollTop();
 
−
    var viewportBottom = viewportTop + $(window).height();
 
−
 
−
    // Get the position of the element on the page.
 
−
    var elemTop = Math.round( $elem.offset().top );
 
−
    var elemBottom = elemTop + $elem.height();
 
−
 
−
    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
 
−
}
 
−
 
−
 
−
var BrowserDetect = {
 
−
    init: function () {
 
−
        this.browser = this.searchString(this.dataBrowser) || "Other";
 
−
        this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
 
−
    },
 
−
    searchString: function (data) {
 
−
        for (var i = 0; i < data.length; i++) {
 
−
            var dataString = data[i].string;
 
−
            this.versionSearchString = data[i].subString;
 
−
 
−
            if (dataString.indexOf(data[i].subString) !== -1) {
 
−
                return data[i].identity;
 
−
            }
 
−
        }
 
−
    },
 
−
    searchVersion: function (dataString) {
 
−
        var index = dataString.indexOf(this.versionSearchString);
 
−
        if (index === -1) {
 
−
            return;
 
−
        }
 
−
 
−
        var rv = dataString.indexOf("rv:");
 
−
        if (this.versionSearchString === "Trident" && rv !== -1) {
 
−
            return parseFloat(dataString.substring(rv + 3));
 
−
        } else {
 
−
            return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
 
−
        }
 
−
    },
 
−
 
−
    dataBrowser: [
 
−
        {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"},
 
−
        {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
 
−
        {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
 
−
        {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
 
−
        {string: navigator.userAgent, subString: "Safari", identity: "Safari"},
 
−
        {string: navigator.userAgent, subString: "Opera", identity: "Opera"}
 
−
    ]
 
−
 
−
};
 
−
 
−
var better_browser = '<div class="container"><div class="better-browser row"><div class="col-md-2"></div><div class="col-md-8"><h3>We are sorry but it looks like your Browser doesn\'t support our website Features. In order to get the full experience please download a new version of your favourite browser.</h3></div><div class="col-md-2"></div><br><div class="col-md-4"><a href="https://www.mozilla.org/ro/firefox/new/" class="btn btn-warning">Mozilla</a><br></div><div class="col-md-4"><a href="https://www.google.com/chrome/browser/desktop/index.html" class="btn ">Chrome</a><br></div><div class="col-md-4"><a href="http://windows.microsoft.com/en-us/internet-explorer/ie-11-worldwide-languages" class="btn">Internet Explorer</a><br></div><br><br><h4>Thank you!</h4></div></div>';
 
−
 
−
$(function(){
 
−
 
−
if(window.location.hash){
 
−
var targetScroll = $(window.location.hash).offset().top - 80;
 
−
}
 
−
$(window).scroll(function(){
 
−
var $this = $(this);
 
−
var targetTop = $(this).scrollTop();
 
−
 
−
if (targetTop >= 100){
 
−
$("#TeamTianjinNavbar").addClass("navbar-TeamTianjin-fixed");
 
−
$("#TeamTianjinNavbar").addClass("animated");
 
−
$("#TeamTianjinNavbar").addClass("fadeInDown");
 
−
}else{
 
−
$("#TeamTianjinNavbar").removeClass("navbar-TeamTianjin-fixed");
 
−
$("#TeamTianjinNavbar").removeClass("animated");
 
−
$("#TeamTianjinNavbar").removeClass("fadeInDown");
 
−
}
 
−
 
−
})
 
−
}());
 
−
</script>
 
−
 
−
<style>
 
−
/* OVERRIDE IGEM SETTINGS */
 
−
 
−
#sideMenu, #top_title, #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading, .visualClear{display: none;}
 
−
#content {width: 100%;  background: transparent;}
 
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
−
        #top_menu_under{
 
−
                height: 0px;
 
−
                border-bottom: 0 none;
 
−
                display: none;
 
−
      }
 
−
 
−
#top-section {
 
−
border: 0 none;
 
−
height: 14px;
 
−
z-index: 100;
 
−
top: 0;
 
−
position: fixed;
 
−
width: 975px;
 
−
left: 50%;
 
−
margin-left: -487px;
 
−
}
 
−
 
−
#globalWrapper, #content {
 
−
width: 100%;
 
−
height: 100%;
 
−
                margin: auto;
 
−
float: none;
 
−
font-size: 100%;
 
−
                z-index:0;
 
−
}
 
−
</style>
 
  
 
</html>
 
</html>
Line 427: Line 160:
 
{{:Team:Tianjin/Templates/AddJS|:Team:Tianjin/js/material/datapicker}}
 
{{:Team:Tianjin/Templates/AddJS|:Team:Tianjin/js/material/datapicker}}
 
{{:Team:Tianjin/Templates/AddJS|:Team:Tianjin/js/material/kit}}
 
{{:Team:Tianjin/Templates/AddJS|:Team:Tianjin/js/material/kit}}
 +
{{:Team:Tianjin/Templates/AddJS|:Team:Tianjin/js/material/lightbox}}
 +
{{:Team:Tianjin/Templates/AddJS|:Team:Tianjin/js/material/SideNavbar}}

Latest revision as of 16:24, 19 October 2016

TEAM TIANJIN

LOGO