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> |