| Index: bower_components/core-animated-pages/demos/quiz1.html
|
| diff --git a/bower_components/core-animated-pages/demos/quiz1.html b/bower_components/core-animated-pages/demos/quiz1.html
|
| deleted file mode 100644
|
| index e47967dbb9e1503b7cf9ea2b44fb72a4dcdbfa47..0000000000000000000000000000000000000000
|
| --- a/bower_components/core-animated-pages/demos/quiz1.html
|
| +++ /dev/null
|
| @@ -1,263 +0,0 @@
|
| -<!--
|
| - @license
|
| - Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
| - This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
| - The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
| - The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
| - Code distributed by Google as part of the polymer project is also
|
| - subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
| --->
|
| -<!doctype html>
|
| -<html>
|
| -<head>
|
| - <title>core-animated-pages</title>
|
| -
|
| - <script src="../../platform/platform.js"></script>
|
| - <link href="../../core-icons/av-icons.html" rel="import">
|
| - <link href="../../paper-fab/paper-fab.html" rel="import">
|
| -
|
| - <link href="../core-animated-pages.html" rel="import">
|
| - <link href="../transitions/slide-up.html" rel="import">
|
| - <link href="../transitions/list-cascade.html" rel="import">
|
| -
|
| - <style>
|
| - body {
|
| - font-family: 'Roboto 2', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
| - margin: 0;
|
| - background: #f1f1f1;
|
| - }
|
| -
|
| - quiz-demo {
|
| - display: block;
|
| - position: absolute;
|
| - top: 0;
|
| - left: 0;
|
| - bottom: 0;
|
| - right: 0;
|
| - }
|
| - </style>
|
| -</head>
|
| -<body>
|
| -
|
| - <polymer-element name="quiz-demo">
|
| - <template>
|
| -
|
| - <style>
|
| - core-animated-pages {
|
| - height: 100%;
|
| - }
|
| -
|
| - section {
|
| - overflow: hidden;
|
| - }
|
| -
|
| - .fab {
|
| - position: absolute;
|
| - fill: #fff;
|
| - }
|
| -
|
| - .fab-0 {
|
| - bottom: 50px;
|
| - right: 24px;
|
| - }
|
| -
|
| - .fab-1 {
|
| - top: 210px;
|
| - right: 24px;
|
| - }
|
| -
|
| - paper-fab {
|
| - background-color: #ff4081;
|
| - }
|
| -
|
| - .top {
|
| - background-color: #ffff8d;
|
| - }
|
| -
|
| - .top-image {
|
| - background: url(quiz1-intro.png);
|
| - height: 287px;
|
| - width: 202px;
|
| - }
|
| -
|
| - .bottom {
|
| - box-sizing: border-box;
|
| - position: relative;
|
| - height: 80px;
|
| - background-color: #ffeb3b;
|
| - padding: 24px;
|
| - color: #fff;
|
| - font-size: 32px;
|
| - }
|
| -
|
| - .tall-toolbar {
|
| - box-sizing: border-box;
|
| - height: 240px;
|
| - position: relative;
|
| - color: #fff;
|
| - padding: 48px;
|
| - font-size: 48px;
|
| - }
|
| -
|
| - .tall-toolbar.categories {
|
| - background-color: #00bbd3;
|
| - margin-bottom: 2px;
|
| - }
|
| -
|
| - .tall-toolbar.questions {
|
| - background-color: #ffeb3b;
|
| - }
|
| -
|
| - .middle {
|
| - background-color: #fafafa;
|
| - color: #3f3f3f;
|
| - padding: 24px 48px;
|
| - font-size: 24px;
|
| - line-height: 1.5;
|
| - }
|
| -
|
| - .footer {
|
| - height: 80px;
|
| - }
|
| -
|
| - .avatar {
|
| - height: 80px;
|
| - width: 80px;
|
| - background-color: #ff80ab;
|
| - }
|
| -
|
| - .footer-right, .score {
|
| - border-top: 1px solid #ccc;
|
| - background-color: #fff;
|
| - padding: 30px;
|
| - }
|
| -
|
| - .tile {
|
| - box-sizing: border-box;
|
| - float: left;
|
| - height: 200px;
|
| - width: 49%;
|
| - margin: 3px;
|
| - }
|
| -
|
| - .tile-bottom {
|
| - padding: 8px;
|
| - color: #fff;
|
| - }
|
| - </style>
|
| -
|
| - <core-animated-pages selected="{{page}}" transitions="hero-transition slide-up slide-down cross-fade list-cascade" on-core-animated-pages-transition-end="{{complete}}">
|
| -
|
| - <section layout vertical>
|
| -
|
| - <div class="tall-toolbar categories" slide-down>
|
| - <span>Your name here</span>
|
| - </div>
|
| -
|
| - <div class="tiles-container">
|
| - <div class="tile" style="background-color:#ccc;" layout vertical>
|
| - <div class="tile-top" flex></div>
|
| - <div class="tile-bottom" style="background-color:#aaa;">
|
| - Leaderboard
|
| - </div>
|
| - </div>
|
| - <div class="tile" hero-id="category-image" hero style="background-color:#ffff8d;" layout vertical on-tap="{{transition}}">
|
| - <div class="tile-top" flex></div>
|
| - <div class="tile-bottom" hero-id="footer" hero style="background-color:#ffeb3b;">
|
| - General Knowledge
|
| - </div>
|
| - </div>
|
| - <div class="tile" style="background-color:#b9f6ca;" layout vertical>
|
| - <div class="tile-top" flex></div>
|
| - <div class="tile-bottom" style="background-color:#0f9d58;">
|
| - Category 2
|
| - </div>
|
| - </div>
|
| - <div class="tile" style="background-color:#ff8a80;" layout vertical>
|
| - <div class="tile-top" flex></div>
|
| - <div class="tile-bottom" style="background-color:#db4437;">
|
| - Category 3
|
| - </div>
|
| - </div>
|
| - <div class="tile" style="background-color:#82b1ff;" layout vertical>
|
| - <div class="tile-top" flex></div>
|
| - <div class="tile-bottom" style="background-color:#4285f4;">
|
| - Category 4
|
| - </div>
|
| - </div>
|
| - <div class="tile" style="background-color:#b388ff;" layout vertical>
|
| - <div class="tile-top" flex></div>
|
| - <div class="tile-bottom" style="background-color:#7e57c2;">
|
| - Category 5
|
| - </div>
|
| - </div>
|
| - </div>
|
| -
|
| - </section>
|
| -
|
| - <section layout vertical>
|
| -
|
| - <div class="top" hero-id="category-image" hero flex layout horizontal center center-justified>
|
| - <div class="top-image" cross-fade></div>
|
| - </div>
|
| - <div class="bottom" hero-id="footer" hero cross-fade>
|
| - <span cross-fade>General Knowledge</span>
|
| - </div>
|
| - <div class="fab fab-0" hero-id="fab" hero>
|
| - <paper-fab icon="av:play-arrow" on-tap="{{transition}}" hero></paper-fab>
|
| - </div>
|
| - </section>
|
| -
|
| - <section layout vertical>
|
| -
|
| - <div class="tall-toolbar questions" hero-id="footer" hero>
|
| - <span cross-fade>Question here</span>
|
| - </div>
|
| - <div class="fab fab-1" hero-id="fab" hero>
|
| - <paper-fab icon="av:play-arrow" on-tap="{{transition}}" hero></paper-fab>
|
| - </div>
|
| -
|
| - <div flex class="middle" slide-up list-cascade>
|
| - <p>Option 1</p>
|
| - <p>Option 2</p>
|
| - <p>Option 3</p>
|
| - <p>Option 4</p>
|
| - <p>Option 5</p>
|
| - </div>
|
| -
|
| - <div class="footer" layout horizontal slide-up>
|
| - <div class="avatar"></div>
|
| - <div class="footer-right" flex>
|
| - some text here
|
| - </div>
|
| - <div class="score">
|
| - 32 pts
|
| - </div>
|
| - </div>
|
| -
|
| - </section>
|
| -
|
| - </core-animated-pages>
|
| -
|
| - </template>
|
| - <script>
|
| -
|
| - Polymer('quiz-demo', {
|
| -
|
| - page: 0,
|
| -
|
| - transition: function(e) {
|
| - if (this.page === 2) {
|
| - this.page = 0;
|
| - } else {
|
| - this.page += 1;
|
| - }
|
| - }
|
| - });
|
| -
|
| - </script>
|
| - </polymer-element>
|
| -
|
| - <quiz-demo></quiz-demo>
|
| -</body>
|
| -</html>
|
|
|