Created
November 22, 2014 07:21
-
-
Save OSUblake/69a45a9b97f614f5755d to your computer and use it in GitHub Desktop.
designer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link rel="import" href="../core-animated-pages/core-animated-pages.html"> | |
<link rel="import" href="../core-animated-pages/transitions/hero-transition.html"> | |
<link rel="import" href="../core-animated-pages/transitions/cross-fade.html"> | |
<link rel="import" href="../core-animated-pages/transitions/slide-down.html"> | |
<link rel="import" href="../core-animated-pages/transitions/slide-up.html"> | |
<link rel="import" href="../core-animated-pages/transitions/tile-cascade.html"> | |
<link rel="import" href="../core-icons/core-icons.html"> | |
<link rel="import" href="../core-icons/av-icons.html"> | |
<link rel="import" href="../paper-fab/paper-fab.html"> | |
<polymer-element name="my-element"> | |
<template> | |
<style> | |
:host { | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
box-sizing: border-box; | |
} | |
section { | |
overflow: hidden; | |
} | |
#core_animated_pages { | |
width: 100%; | |
height: 100%; | |
overflow: hidden; | |
left: 0px; | |
top: 0px; | |
position: absolute; | |
background-color: rgb(238, 238, 238); | |
} | |
#section1 { | |
left: 0px; | |
top: 0px; | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
opacity: 1; | |
background-color: rgb(255, 128, 64); | |
} | |
#section2 { | |
position: absolute; | |
top: 0px; | |
left: 0px; | |
width: 100%; | |
height: 100%; | |
background-color: rgb(128, 255, 0); | |
} | |
#section3 { | |
background-color: rgb(128, 128, 255); | |
} | |
#section4 { | |
background-color: rgb(128, 128, 0); | |
} | |
#section5 { | |
background-color: rgb(64, 128, 128); | |
} | |
#section6 { | |
background-color: rgb(0, 128, 192); | |
} | |
#section { | |
box-sizing: border-box; | |
width: 100%; | |
height: 100%; | |
left: 0px; | |
top: 0px; | |
position: absolute; | |
} | |
#toolbar { | |
box-sizing: border-box; | |
height: 15%; | |
position: relative; | |
color: rgb(255, 255, 255); | |
font-size: 48px; | |
background-color: rgb(0, 187, 211); | |
} | |
.tiles-container { | |
padding-left: 3px; | |
height: 85%; | |
} | |
#tile-profile { | |
box-sizing: border-box; | |
float: left; | |
height: 30%; | |
width: 48%; | |
margin: 3px; | |
background-color: rgb(204, 204, 204); | |
} | |
#core_icon { | |
height: 128px; | |
width: 128px; | |
} | |
#div { | |
padding: 8px; | |
color: rgb(255, 255, 255); | |
background-color: rgb(170, 170, 170); | |
} | |
#tile-general { | |
box-sizing: border-box; | |
float: left; | |
height: 30%; | |
width: 48%; | |
margin: 3px; | |
} | |
#section8 { | |
background-color: rgb(255, 255, 141); | |
} | |
#core_icon1 { | |
height: 128px; | |
width: 128px; | |
} | |
#div1 { | |
padding: 8px; | |
color: rgb(255, 255, 255); | |
background-color: rgb(255, 235, 59); | |
} | |
#div7 { | |
box-sizing: border-box; | |
float: left; | |
height: 30%; | |
width: 48%; | |
margin: 3px; | |
background-color: rgb(185, 246, 202); | |
} | |
#core_icon2 { | |
height: 128px; | |
width: 128px; | |
} | |
#div8 { | |
padding: 8px; | |
color: rgb(255, 255, 255); | |
background-color: rgb(15, 157, 88); | |
} | |
#div9 { | |
box-sizing: border-box; | |
float: left; | |
height: 30%; | |
width: 48%; | |
margin: 3px; | |
background-color: rgb(255, 138, 128); | |
} | |
#core_icon3 { | |
height: 128px; | |
width: 128px; | |
} | |
#div10 { | |
padding: 8px; | |
color: rgb(255, 255, 255); | |
background-color: rgb(219, 68, 55); | |
} | |
#div11 { | |
box-sizing: border-box; | |
float: left; | |
height: 30%; | |
width: 48%; | |
margin: 3px; | |
background-color: rgb(130, 177, 255); | |
} | |
#core_icon4 { | |
height: 128px; | |
width: 128px; | |
} | |
#div12 { | |
padding: 8px; | |
color: rgb(255, 255, 255); | |
background-color: rgb(66, 133, 244); | |
} | |
#div13 { | |
box-sizing: border-box; | |
float: left; | |
height: 30%; | |
width: 48%; | |
margin: 3px; | |
background-color: rgb(179, 136, 255); | |
} | |
#core_icon5 { | |
height: 128px; | |
width: 128px; | |
} | |
#div14 { | |
padding: 8px; | |
color: rgb(255, 255, 255); | |
background-color: rgb(126, 87, 194); | |
} | |
.tile { | |
box-sizing: border-box; | |
float: left; | |
height: 200px; | |
width: 49%; | |
margin: 3px; | |
} | |
.tile-bottom { | |
padding: 8px; | |
color: rgb(255, 255, 255); | |
} | |
.t1 { | |
background-color: rgb(255, 255, 141); | |
} | |
.t1-bottom { | |
background-color: rgb(255, 235, 59); | |
} | |
.t2 { | |
background-color: rgb(185, 246, 202); | |
} | |
.t2-bottom { | |
background-color: rgb(15, 157, 88); | |
} | |
.t3 { | |
background-color: rgb(255, 138, 128); | |
} | |
.t3-bottom { | |
background-color: rgb(219, 68, 55); | |
} | |
.t4 { | |
background-color: rgb(130, 177, 255); | |
} | |
.t4-bottom { | |
background-color: rgb(66, 133, 244); | |
} | |
.top { | |
background-color: rgb(255, 255, 141); | |
} | |
.bottom { | |
box-sizing: border-box; | |
position: relative; | |
height: 80px; | |
padding: 24px; | |
color: rgb(255, 255, 255); | |
font-size: 32px; | |
background-color: rgb(255, 235, 59); | |
} | |
.tall-toolbar { | |
box-sizing: border-box; | |
height: 240px; | |
position: relative; | |
color: rgb(255, 255, 255); | |
padding: 48px; | |
font-size: 48px; | |
} | |
.tall-toolbar.categories { | |
margin-bottom: 2px; | |
background-color: rgb(0, 187, 211); | |
} | |
.tall-toolbar.questions { | |
background-color: rgb(255, 235, 59); | |
} | |
.middle { | |
color: rgb(63, 63, 63); | |
padding: 24px 48px; | |
font-size: 24px; | |
line-height: 1.5; | |
background-color: rgb(250, 250, 250); | |
} | |
.footer { | |
height: 80px; | |
} | |
.avatar { | |
height: 80px; | |
width: 80px; | |
background-color: rgb(255, 128, 171); | |
} | |
.footer-right, .score { | |
border-top-width: 1px; | |
border-top-style: solid; | |
border-top-color: rgb(204, 204, 204); | |
padding: 30px; | |
background-color: rgb(255, 255, 255); | |
} | |
.fab { | |
position: absolute; | |
fill: rgb(255, 255, 255); | |
} | |
.fab-0 { | |
bottom: 50px; | |
right: 24px; | |
} | |
.fab-1 { | |
top: 210px; | |
right: 24px; | |
} | |
paper-fab { | |
background-color: rgb(255, 64, 129); | |
} | |
#core_icon_button { | |
left: 1690px; | |
top: 660px; | |
} | |
</style> | |
<core-animated-pages transitions="hero-transition slide-up slide-down cross-fade list-cascade" selected="{{ page }}" selectedindex="0" notap id="core_animated_pages" on-core-animated-pages-transition-end="{{ complete }}"> | |
<section id="section" layout vertical active> | |
<div id="div" class="tall-toolbar categories" slide-down> | |
<span>Your name here</span> | |
</div> | |
<div id="div1" class="tiles-container"> | |
<div class="tile t1" layout vertical> | |
<div class="tile-top" flex>Top</div> | |
<div class="tile-bottom t1-bottom">Tile 1</div> | |
</div> | |
<div class="tile t2" hero-id="category-image" hero layout vertical on-tap="{{ transition }}"> | |
<div class="tile-top" flex>Click Me</div> | |
<div class="tile-bottom t2-bottom" hero-id="footer" hero>Tile 2</div> | |
</div> | |
<div class="tile t3" layout vertical> | |
<div id="div2" class="tile-top" flex></div> | |
<div class="tile-bottom t3-bottom">Tile 3</div> | |
</div> | |
<div class="tile t4" layout vertical> | |
<div class="tile-top" flex></div> | |
<div class="tile-bottom t4-bottom">Tile 4</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({ | |
page: 0, | |
max: 5, | |
si: 0, | |
transition: function (e) { | |
if(this.page === 2) { | |
this.page = 0; | |
} else { | |
this.page += 1; | |
} | |
}, | |
foo: function () { | |
if(this.si === this.max){ | |
//this.si = 0; | |
} else { | |
//this.si++; | |
} | |
} | |
}); | |
</script> | |
</polymer-element> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment