Difference between revisions of "Team:CHINA CD UESTC/homeDemo"

(Blanked the page)
 
(62 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<!DOCTYPE html>
 
<!-- saved from url=(0028)http://www.whitefrontier.ch/ -->
 
<html lang="en" class="js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths wf-brandongrotesque-i4-active wf-brandongrotesque-i7-active wf-brandongrotesque-n4-active wf-brandongrotesque-n7-active wf-dincondensedweb-n4-active wf-freightbigpro-i4-active wf-freightbigpro-i7-active wf-freightbigpro-n4-active wf-freightbigpro-n7-active wf-active"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
  
    <!-- CSS
 
    <link rel="stylesheet" type="text/css" href="./css/jquery.fancybox.css">-->
 
    <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:CHINA_CD_UESTC/Template:home.css">
 
 
 
</head>
 
<body id="homeIndexBody">
 
    <aside>
 
        <div id="mobileMenuButton">
 
            <span></span>
 
            <span></span>
 
            <span></span>
 
        </div>
 
                <h1 id="logo">
 
            <img alt="White Frontier Brewery" src="./pic/whitefrontier.png">
 
        </h1>
 
        <div class="separator"></div>
 
        <nav >
 
    <!-- Contenedor -->
 
    <ul id="accordion" class="accordion">
 
        <li>
 
            <div class="link"><a id="menuHome" href="./home.html">HOME</a></div>
 
        </li>
 
        <li>
 
            <div class="link">PROJECT</div>
 
            <ul class="submenu">
 
                <li><a href="#">Problem</a></li>
 
                <li><a href="#">Design</a></li>
 
                <li><a href="#">Parts</a></li>
 
 
            </ul>
 
        </li>
 
        <li><div class="link">RESULTS</div>
 
            <ul class="submenu">
 
                <li><a href="#">Results</a></li>
 
                <li><a href="#">Future</a></li>
 
 
            </ul>
 
        </li>
 
 
        <li><div class="link">MODELING</div>
 
            <ul class="submenu">
 
                <li><a href="#">Modeling</a></li>
 
 
            </ul>
 
        </li>   
 
 
        <li>
 
            <div class="link">TEAM</div>
 
            <ul class="submenu">
 
                <li><a href="./teamMembers.html">Members</a></li>
 
                <li><a href="#">Instructors</a></li>
 
                <li><a href="#">Attributions</a></li>
 
 
            </ul>
 
        </li>
 
 
        <li><div class="link">HUMAN PRACTICES</div>
 
            <ul class="submenu">
 
                <li><a href="#">Google</a></li>
 
                <li><a href="#">Bing</a></li>
 
 
            </ul>
 
        </li>
 
        <li><div class="link">NOTEBOOK</div>
 
            <ul class="submenu">
 
                <li><a href="#">Journal</a></li>
 
                <li><a href="#">Safety</a></li>
 
                <li><a href="#">Protocol</a></li>
 
 
            </ul>
 
        </li>
 
                                               
 
    </ul>
 
        </nav>
 
        <div class="separator"></div>
 
<!-- 
 
        <div class="bottom">
 
            <div class="social">
 
                <a href="    " ><img></a>
 
                <a href="    " ><img></a>
 
                <a href="    " ><img></a>
 
            </div>
 
        </div>
 
-->
 
    </aside>
 
 
 
    <div id="content">
 
        <div id="homeIndex">
 
    <div class="contentInner">
 
        <a href="/our-beers" class="beer middleParent">
 
            <div class="layoutHide"></div>
 
            <span class="overlay"></span>
 
        <span class="middle">
 
            <h1 class="title">Beer</h1>
 
            <span class="swipe" id="swipeBeer">
 
                <span class="swipe-wrap">
 
                                            <div>
 
                            <img alt="Backside Montfort" src="./pic/backside-montfort-wide-setup.png" />
 
                        </div>
 
                                            <div>
 
                            <img alt="La Bruson" src="./pic/la-bruson-wide-setup.png" />
 
                        </div>
 
                                            <div>
 
                            <img alt="Les Faverges" src="./pic/les-faverges-wide-setup.png" />
 
                        </div>
 
                                            <div>
 
                            <img alt="La Bise" src="./pic/la-bise.png" />
 
                        </div>
 
                                    </span>
 
            </span>
 
        </span>
 
        </a>
 
        <a href="/experience" class="experience">
 
            <div class="layoutHide"></div>
 
            <img class="fullBg"  onmouseover="experienceGalleryNext()"/>
 
            <span class="overlay"></span>
 
            <h2 class="title">Let's discover our experience White Frontier Brewery</h2>
 
            <div class="gallery">
 
                                    <img src="./pic/resto-ambiance-bw.jpg" class="fullBg display active" />
 
                                    <img src="./pic/white-frontier-bear2.jpg" class="fullBg display " />
 
                                    <img src="./pic/white-frontier-faverge-bw.jpg" class="fullBg display " />
 
                                    <img src="./pic/white-frontier-beers-bw.jpg" class="fullBg display " />
 
                            </div>
 
        </a>
 
        <a href="/ambassadors/ambassadors-xav-de-le-rue" class="ambassador">
 
            <div class="layoutHide"></div>
 
            <img class="fullBg"  />
 
            <span class="overlay"></span>
 
            <h2 class="title">Ambassador</h2>
 
        </a>
 
        <a href="/social" class="social" >
 
            <div class="layoutHide"></div>
 
            <img class="fullBg"  />
 
            <span class="overlay"></span>
 
            <h2 class="title">Social #WhiteFrontier</h2>
 
        </a>
 
    </div>
 
</div>   
 
</div>
 
 
<!--
 
    <script src="./js/modernizr.js"></script>
 
<script type="text/javascript" src="./js/saved.js"></script>
 
 
-->
 
<script type="text/javascript" src="./js/test.js" ></script>
 
 
  <script type="text/javascript">
 
  //slide menu
 
  $(function() {
 
    var Accordion = function(el, multiple) {
 
        this.el = el || {};
 
        this.multiple = multiple || false;
 
 
        // Variables privadas
 
        var links = this.el.find('.link');
 
        // Evento
 
        links.on('mouseenter', {el: this.el, multiple: this.multiple}, this.dropdown)
 
    }
 
 
 
    Accordion.prototype.dropdown = function(e) {
 
        var $el = e.data.el;
 
            $this = $(this),
 
            $next = $this.next();
 
 
        $next.slideToggle();
 
        $this.parent().toggleClass('open');
 
 
        if (!e.data.multiple) {
 
            $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
 
        };
 
    } 
 
 
    var accordion = new Accordion($('#accordion'), false);
 
});</script>
 
  <script type="text/javascript">//<![CDATA[
 
var controllerName="home";
 
var actionName="index";
 
var base="";
 
var baseLang="/en";
 
var lang="en";
 
data=[];//]]>
 
</script>
 
 
 
<script type="text/javascript">
 
//experienceIntercal change
 
        var experienceInterval;
 
        function experienceGalleryNext() {
 
            var $active = $('#content #homeIndex a.experience .gallery img.active');
 
            if ( $active.length == 0 ) $active = $('#content #homeIndex a.experience .gallery img:last');
 
            var $next =  $active.next().length ? $active.next() : $('#content #homeIndex a.experience .gallery img:first');
 
            $active.addClass('lastActive');
 
            $next.css({opacity: 0.0})
 
                .addClass('active')
 
                .animate({opacity: 1.0}, 700, function() {
 
                    $active.removeClass('active lastActive');
 
                });
 
        }
 
        $('.no-touch #content #homeIndex a.experience').hover(function(){
 
            var $gallery = $(this).find('.gallery');
 
            $gallery.stop().animate({
 
                scale:1,
 
                opacity:1
 
            },500, 'easeOutCubic');
 
            experienceInterval = window.setInterval(experienceGalleryNext, 1000);
 
        }, function(){
 
            window.clearInterval(experienceInterval);
 
            var $gallery = $(this).find('.gallery');
 
            $gallery.stop().animate({
 
                scale:1.5,
 
                opacity:0
 
            },500, 'easeOutCubic', function(){
 
                window.clearInterval(experienceInterval);
 
            });
 
        });
 
 
 
 
        // swipe beer
 
        var swipeBeer = new Swipe(document.getElementById('swipeBeer'), {
 
            speed: 400,
 
            auto: false,
 
            continuous: true,
 
            disableScroll: false,
 
            stopPropagation: false,
 
            callback: function(index, elem) {},
 
            transitionEnd: function(index, elem) {}
 
        });
 
 
        var timeout;
 
        function again()
 
        {
 
            window.clearTimeout(timeout);
 
            timeout = window.setTimeout(function(){
 
                swipeBeer.next();
 
                again();
 
            }, 1400);
 
        }
 
        $('.no-touch #content #homeIndex a.beer').hover(function(){
 
            swipeBeer.next();
 
            again();
 
        }, function(){
 
            window.clearTimeout(timeout);
 
        });
 
 
    </script>
 
 
</body></html>
 

Latest revision as of 02:29, 11 September 2015