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

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