third_party/polymer/components/core-animated-pages/demos/quiz1.html

   1 <!--
   2     @license
   3     Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   4     This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5     The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6     The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7     Code distributed by Google as part of the polymer project is also
   8     subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 -->
  10 <!doctype html>
  11 <html>
  12 <head>
  13   <title>core-animated-pages</title>
  14
  15   <script src="../../webcomponentsjs/webcomponents.js"></script>
  16   <link href="../../core-icons/av-icons.html" rel="import">
  17   <link href="../../paper-fab/paper-fab.html" rel="import">
  18
  19   <link href="../core-animated-pages.html" rel="import">
  20   <link href="../transitions/slide-up.html" rel="import">
  21   <link href="../transitions/list-cascade.html" rel="import">
  22
  23   <style>
  24     body {
  25       font-family: 'Roboto 2', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  26       margin: 0;
  27       background: #f1f1f1;
  28     }
  29
  30     quiz-demo {
  31       display: block;
  32       position: absolute;
  33       top: 0;
  34       left: 0;
  35       bottom: 0;
  36       right: 0;
  37     }
  38   </style>
  39 </head>
  40 <body>
  41
  42   <polymer-element name="quiz-demo">
  43   <template>
  44
  45     <style>
  46       core-animated-pages {
  47         height: 100%;
  48       }
  49
  50       section {
  51         overflow: hidden;
  52       }
  53
  54       .fab {
  55         position: absolute;
  56         fill: #fff;
  57       }
  58
  59       .fab-0 {
  60         bottom: 50px;
  61         right: 24px;
  62       }
  63
  64       .fab-1 {
  65         top: 210px;
  66         right: 24px;
  67       }
  68
  69       paper-fab {
  70         background-color: #ff4081;
  71       }
  72
  73       .top {
  74         background-color: #ffff8d;
  75       }
  76
  77       .top-image {
  78         background: url(quiz1-intro.png);
  79         height: 287px;
  80         width: 202px;
  81       }
  82
  83       .bottom {
  84         box-sizing: border-box;
  85         position: relative;
  86         height: 80px;
  87         background-color: #ffeb3b;
  88         padding: 24px;
  89         color: #fff;
  90         font-size: 32px;
  91       }
  92
  93       .tall-toolbar {
  94         box-sizing: border-box;
  95         height: 240px;
  96         position: relative;
  97         color: #fff;
  98         padding: 48px;
  99         font-size: 48px;
 100       }
 101
 102       .tall-toolbar.categories {
 103         background-color: #00bbd3;
 104         margin-bottom: 2px;
 105       }
 106
 107       .tall-toolbar.questions {
 108         background-color: #ffeb3b;
 109       }
 110
 111       .middle {
 112         background-color: #fafafa;
 113         color: #3f3f3f;
 114         padding: 24px 48px;
 115         font-size: 24px;
 116         line-height: 1.5;
 117       }
 118
 119       .footer {
 120         height: 80px;
 121       }
 122
 123       .avatar {
 124         height: 80px;
 125         width: 80px;
 126         background-color: #ff80ab;
 127       }
 128
 129       .footer-right, .score {
 130         border-top: 1px solid #ccc;
 131         background-color: #fff;
 132         padding: 30px;
 133       }
 134
 135       .tile {
 136         box-sizing: border-box;
 137         float: left;
 138         height: 200px;
 139         width: 49%;
 140         margin: 3px;
 141       }
 142
 143       .tile-bottom {
 144         padding: 8px;
 145         color: #fff;
 146       }
 147     </style>
 148
 149     <core-animated-pages selected="{{page}}" transitions="hero-transition slide-up slide-down cross-fade list-cascade" on-core-animated-pages-transition-end="{{complete}}">
 150
 151       <section layout vertical>
 152
 153         <div class="tall-toolbar categories" slide-down>
 154           <span>Your name here</span>
 155         </div>
 156
 157         <div class="tiles-container">
 158           <div class="tile" style="background-color:#ccc;" layout vertical>
 159             <div class="tile-top" flex></div>
 160             <div class="tile-bottom" style="background-color:#aaa;">
 161               Leaderboard
 162             </div>
 163           </div>
 164           <div class="tile" hero-id="category-image" hero style="background-color:#ffff8d;" layout vertical on-tap="{{transition}}">
 165             <div class="tile-top" flex></div>
 166             <div class="tile-bottom" hero-id="footer" hero style="background-color:#ffeb3b;">
 167               General Knowledge
 168             </div>
 169           </div>
 170           <div class="tile" style="background-color:#b9f6ca;" layout vertical>
 171             <div class="tile-top" flex></div>
 172             <div class="tile-bottom" style="background-color:#0f9d58;">
 173               Category 2
 174             </div>
 175           </div>
 176           <div class="tile" style="background-color:#ff8a80;" layout vertical>
 177             <div class="tile-top" flex></div>
 178             <div class="tile-bottom" style="background-color:#db4437;">
 179               Category 3
 180             </div>
 181           </div>
 182           <div class="tile" style="background-color:#82b1ff;" layout vertical>
 183             <div class="tile-top" flex></div>
 184             <div class="tile-bottom" style="background-color:#4285f4;">
 185               Category 4
 186             </div>
 187           </div>
 188           <div class="tile" style="background-color:#b388ff;" layout vertical>
 189             <div class="tile-top" flex></div>
 190             <div class="tile-bottom" style="background-color:#7e57c2;">
 191               Category 5
 192             </div>
 193           </div>
 194         </div>
 195
 196       </section>
 197
 198       <section layout vertical>
 199
 200         <div class="top" hero-id="category-image" hero flex layout horizontal center center-justified>
 201           <div class="top-image" cross-fade></div>
 202         </div>
 203         <div class="bottom" hero-id="footer" hero cross-fade>
 204           <span cross-fade>General Knowledge</span>
 205         </div>
 206         <div class="fab fab-0" hero-id="fab" hero>
 207           <paper-fab icon="av:play-arrow" on-tap="{{transition}}" hero></paper-fab>
 208         </div>
 209       </section>
 210
 211       <section layout vertical>
 212
 213         <div class="tall-toolbar questions" hero-id="footer" hero>
 214           <span cross-fade>Question here</span>
 215         </div>
 216         <div class="fab fab-1" hero-id="fab" hero>
 217           <paper-fab icon="av:play-arrow" on-tap="{{transition}}" hero></paper-fab>
 218         </div>
 219
 220         <div flex class="middle" slide-up list-cascade>
 221           <p>Option 1</p>
 222           <p>Option 2</p>
 223           <p>Option 3</p>
 224           <p>Option 4</p>
 225           <p>Option 5</p>
 226         </div>
 227
 228         <div class="footer" layout horizontal slide-up>
 229           <div class="avatar"></div>
 230           <div class="footer-right" flex>
 231             some text here
 232           </div>
 233           <div class="score">
 234             32 pts
 235           </div>
 236         </div>
 237
 238       </section>
 239
 240     </core-animated-pages>
 241
 242   </template>
 243   <script>
 244
 245     Polymer('quiz-demo', {
 246
 247       page: 0,
 248
 249       transition: function(e) {
 250         if (this.page === 2) {
 251           this.page = 0;
 252         } else {
 253           this.page += 1;
 254         }
 255       }
 256     });
 257
 258   </script>
 259   </polymer-element>
 260
 261   <quiz-demo></quiz-demo>
 262 </body>
 263 </html>