Team:Dundee/Template/testpage

From 2014.igem.org

(Difference between revisions)
 
(45 intermediate revisions not shown)
Line 1: Line 1:
 +
{{:Team:Dundee/Template/header}}
-
<header class="navbar navbar-bright navbar-fixed-top" role="banner">
+
<html>
-
  <div class="container">
+
<head>
-
    <div class="navbar-header">
+
-
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
+
-
        <span class="sr-only">Toggle navigation</span>
+
-
        <span class="icon-bar"></span>
+
-
        <span class="icon-bar"></span>
+
-
        <span class="icon-bar"></span>
+
-
      </button>
+
-
      <a href="/" class="navbar-brand">Bootply</a>
+
-
    </div>
+
-
    <nav class="collapse navbar-collapse" role="navigation">
+
-
      <ul class="nav navbar-nav">
+
-
        <li>
+
-
          <a href="#sec">Get Started</a>
+
-
        </li>
+
-
        <li>
+
-
          <a href="#sec">Edit</a>
+
-
        </li>
+
-
        <li>
+
-
          <a href="#sec">Visualize</a>
+
-
        </li>
+
-
        <li>
+
-
          <a href="#sec">Prototype</a>
+
-
        </li>
+
-
      </ul>
+
-
    </nav>
+
-
  </div>
+
-
</header>
+
-
<div id="masthead">
+
<title>Dundee 2014 Team</title>
-
   <div class="container">
+
 
-
      <div class="row">
+
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
         <div class="col-md-7">
+
   
-
          <h1>Bootply
+
 
-
             <p class="lead">The easiest way to apply Bootstrap</p>
+
   <link href="https://2014.igem.org/Team:Dundee/stylesheet/notebook?action=raw&ctype=text/css" rel="stylesheet">
-
          </h1>
+
 
 +
  <link href="https://2014.igem.org/Team:Dundee/stylesheet?action=raw&ctype=text/css" rel="stylesheet">
 +
  <link href="https://2014.igem.org/Team:Dundee/bootstrap?action=raw&ctype=text/css" rel="stylesheet">
 +
 
 +
 
 +
 
 +
<!-- jQuery -->
 +
<script src="https://2014.igem.org/Team:Dundee/js/jquery-js?action=raw&ctype=text/javascript"></script>
 +
   
 +
<!-- Turn js -->
 +
<script src="https://2014.igem.org/Team:Dundee/js/turn-js?action=raw&ctype=text/javascript"></script>
 +
 
 +
<style type="text/css">
 +
 
 +
html, body {
 +
    margin: 0;
 +
    height: 100%;
 +
}
 +
 
 +
body {
 +
    background-color: #333;
 +
}
 +
 
 +
body.hide-overflow {
 +
    overflow: hidden;
 +
}
 +
 
 +
/* helpers */
 +
 
 +
.t {
 +
    display: table;
 +
    width: 100%;
 +
    height: 100%;
 +
}
 +
 
 +
.tc {
 +
    display: table-cell;
 +
    vertical-align: middle;
 +
    text-align: center;
 +
}
 +
 
 +
.rel {
 +
    position: relative;
 +
}
 +
 
 +
/* book */
 +
 
 +
.book {
 +
    margin: 5% auto;
 +
    width: 60%;
 +
    height: 60%;
 +
    -webkit-touch-callout: none;
 +
    -webkit-user-select: none;
 +
    -khtml-user-select: none;
 +
    -moz-user-select: none;
 +
    -ms-user-select: none;
 +
    user-select: none;
 +
}
 +
 
 +
.book .page {
 +
    height: 100%;
 +
}
 +
 
 +
.book .page img {
 +
    max-width: 100%;
 +
    height: 100%;
 +
}
 +
 
 +
</style>
 +
</head>
 +
<body>
 +
 
 +
<div class="t">
 +
    <div class="tc rel">
 +
         <div class="book" id="book">
 +
            <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/01.jpg" alt="" /></div>
 +
             <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/02.jpg" alt="" /></div>
 +
            <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/03.jpg" alt="" /></div>
 +
            <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/04.jpg" alt="" /></div>
 +
            <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/05.jpg" alt="" /></div>
 +
            <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/06.jpg" alt="" /></div>
         </div>
         </div>
-
        <div class="col-md-5">
+
    </div>
-
            <div class="well well-lg">
+
-
              <div class="row">
+
-
                <div class="col-sm-6">
+
-
              <img src="//placehold.it/180x100" class="img-responsive">
+
-
                </div>
+
-
                <div class="col-sm-6">
+
-
              <strong>Important</strong>
+
-
                  <p>Blah blah blah blah bla!</p>
+
-
                </div>
+
-
              </div>
+
-
            </div>
+
-
        </div>
+
-
      </div>
+
-
  </div><!-- /cont -->
+
</div>
</div>
-
<!-- Begin Body -->
 
-
<div class="container">
 
-
<div class="row">
 
-
  <div class="col-md-3" id="leftCol">
 
-
             
 
-
              <ul class="nav nav-stacked" id="sidebar">
 
-
                  <li>
 
-
                    <a href="#sec0">Section 0</a>
 
-
                  <ul class="nav">
 
-
                      <li class=""><a href="#">- Sub 1</a></li>
 
-
                      <li class=""><a href="#">- Sub 2</a></li>
 
-
                    </ul>
 
-
                  </li>
 
-
                  <li>
 
-
                    <a href="#sec1">Section 1</a>
 
-
                    <ul class="nav">
 
-
                      <li class=""><a href="#">- Sub 1</a></li>
 
-
                      <li class=""><a href="#">- Sub 2</a></li>
 
-
                      <li class=""><a href="#">- Sub 3</a></li>
 
-
                    </ul>
 
-
                  </li>
 
-
                  <li><a href="#sec2">Section 2</a></li>
 
-
                  <li><a href="#sec3">Section 3</a></li>
 
-
                  <li><a href="#sec4">Section 4</a></li>
 
-
              </ul>
 
-
             
 
-
      </div> 
 
-
      <div class="col-md-9">
 
-
              <h2 id="sec0">Content</h2>
 
-
                At Bootply we like to build simple Bootstrap templates that utilize the code Bootstap CSS without a lot of customization. Sure you can
 
-
              find a lot of Bootstrap themes and inspiration, but these templates tend to be heavy on customization.
 
-
             
 
-
           
 
-
         
 
-
              <hr class="col-md-12">
 
-
              Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
 
-
                dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
 
-
                eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
 
-
                sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
 
-
                Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut.             
 
-
              Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
 
-
                dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
 
-
                eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
 
-
                sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
 
-
                Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut!
 
-
             
 
-
             
 
-
             
 
-
              <h2 id="sec1">Content</h2>
 
-
              <p>
 
-
                Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
 
-
                dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut.
 
-
              </p>
 
-
              <div class="row">
 
-
                  <div class="col-md-6">
 
-
                    <div class="panel panel-default">
 
-
                      <div class="panel-heading"><h3>Hello.</h3></div>
 
-
                      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
 
-
                      Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
 
-
                      dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
 
-
                      Aliquam in felis sit amet augue.
 
-
                      </div>
 
-
                    </div>
 
-
                  </div>
 
-
                  <div class="col-md-6">
 
-
                      <div class="panel panel-default">
 
-
                      <div class="panel-heading"><h3>Hello.</h3></div>
 
-
                      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
 
-
                      Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
 
-
                      dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
 
-
                      Aliquam in felis sit amet augue.
 
-
                      </div>
 
-
                    </div>
 
-
                  </div> 
 
-
              </div>
 
-
             
 
-
              <hr>
 
-
             
 
-
              <h2 id="sec2">Section 2</h2>
 
-
              <p>
 
-
                Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
 
-
                dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
 
-
                eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
 
-
                sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
 
-
                Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut!
 
-
              </p>
 
-
              <div class="row">
 
-
              <div class="col-md-4"><img src="//placehold.it/300x300" class="img-responsive"></div>
 
-
                  <div class="col-md-4"><img src="//placehold.it/300x300" class="img-responsive"></div>
 
-
                  <div class="col-md-4"><img src="//placehold.it/300x300" class="img-responsive"></div>
 
-
              </div>
 
-
             
 
-
              <hr>
 
-
             
 
-
              <h2 id="sec3">Section 3</h2>
 
-
      Images are responsive sed @mdo but sum are more fun peratis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
 
-
                totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
 
-
                dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
 
-
                eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
 
-
                sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
 
-
                Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
 
-
             
 
-
              <h2 id="sec4">Section 4</h2>
 
-
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
 
-
                totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
 
-
                dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
 
-
                eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
 
-
                sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
 
-
                Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
 
-
             
 
-
             
 
-
              <hr>
 
-
              <h4><a href="http://bootply.com/75781">Edit on Bootply</a></h4>
 
-
              <hr>
 
-
             
 
-
             
 
-
      </div>
 
-
  </div>
 
-
</div>
 
 +
<script type="text/javascript">
 +
 +
/*
 +
* Turn.js responsive book
 +
*/
 +
 +
/*globals window, document, $*/
 +
 +
(function () {
 +
    'use strict';
 +
 +
    var module = {
 +
        ratio: 1.38,
 +
        init: function (id) {
 +
            var me = this;
 +
 +
            // if older browser then don't run javascript
 +
            if (document.addEventListener) {
 +
                this.el = document.getElementById(id);
 +
                this.resize();
 +
                this.plugins();
 +
                // on window resize, update the plugin size
 +
                window.addEventListener('resize', function (e) {
 +
                    var size = me.resize();
 +
                    $(me.el).turn('size', size.width, size.height);
 +
                });
 +
            }
 +
        },
 +
        resize: function () {
 +
            // reset the width and height to the css defaults
 +
            this.el.style.width = '';
 +
            this.el.style.height = '';
 +
            var width = this.el.clientWidth,
 +
                height = Math.round(width / this.ratio),
 +
                padded = Math.round(document.body.clientHeight * 0.9);
-
<script>
+
            // if the height is too big for the window, constrain it
 +
            if (height > padded) {
 +
                height = padded;
 +
                width = Math.round(height * this.ratio);
 +
            }
 +
            // set the width and height matching the aspect ratio
 +
            this.el.style.width = width + 'px';
 +
            this.el.style.height = height + 'px';
-
$('#sidebar').affix({
+
            return {
-
      offset: {
+
                width: width,
-
        top: 245
+
                height: height
-
      }
+
            };
-
});
+
        },
 +
        plugins: function () {
 +
            // run the plugin
 +
            $(this.el).turn({
 +
                gradients: true,
 +
                acceleration: true
 +
            });
 +
            // hide the body overflow
 +
            document.body.className = 'hide-overflow';
 +
        }
 +
    };
-
var $body  = $(document.body);
+
    module.init('book');
-
var navHeight = $('.navbar').outerHeight(true) + 10;
+
}());
-
$body.scrollspy({
 
-
target: '#leftCol',
 
-
offset: navHeight
 
-
});
 
</script>
</script>
</body>
</body>
</html>
</html>

Latest revision as of 22:49, 14 October 2014

Dundee 2014

Dundee 2014

Dundee 2014 Team

Retrieved from "http://2014.igem.org/Team:Dundee/Template/testpage"