OLD | NEW |
(Empty) | |
| 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-colo
r:#ffff8d;" layout vertical on-tap="{{transition}}"> |
| 156 <div class="tile-top" flex></div> |
| 157 <div class="tile-bottom" hero-id="footer" hero style="background-col
or:#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 ce
nter 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-f
ab> |
| 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-f
ab> |
| 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> |
OLD | NEW |