Index: third_party/polymer/components-chromium/core-animated-pages/demos/quiz1.html |
diff --git a/third_party/polymer/components-chromium/core-animated-pages/demos/quiz1.html b/third_party/polymer/components-chromium/core-animated-pages/demos/quiz1.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..358c7a260dd988cfd77504690229cc6167b851a6 |
--- /dev/null |
+++ b/third_party/polymer/components-chromium/core-animated-pages/demos/quiz1.html |
@@ -0,0 +1,254 @@ |
+<!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> |