snapdrop/app/elements/x-cards/x-card.html

<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../bower_components/neon-animation/neon-shared-element-animatable-behavior.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">
<link rel="import" href="../../bower_components/paper-styles/paper-styles-classes.html">
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
<dom-module id="x-card">
    <template>
        <style>
        :host {
            display: block;
            overflow: hidden;
            color: white;
            z-index: 3
        }
        
        #placeholder {
            opacity: 0;
            background-color: #4285f4;
            @apply(--layout-fit);
        }
        
        paper-icon-button {
            position: absolute;
            top: 16px;
            right: 16px;
            z-index: 2;
        }
        
        #container {
            @apply(--layout-fit);
            @apply(--layout-vertical);
            @apply(--layout-center-center);
            background-color: #4285f4;
            padding: 64px 32px 64px 32px;
            box-sizing: border-box;
        }
     
        
        .logo {
            width: 80px;
            height: 80px;
        }
        
        .slogan{
            text-align: center;
        }

        .paper-font-headline {
            margin-bottom: 8px;
            font-size: 32px;
        }
        
        a {
            text-decoration: none;
            color: white;
        }
        
        .center {
            @apply(--layout-vertical);
            @apply(--layout-center-center);
        }
        
        #footer {
            position: absolute;
            left: 50%;
            margin-left: -160px;
            width: 320px;
            bottom: 24px;
            text-align: center;
        }
        
        a {
            display: inline-block;
            text-align: center;
        }
        
        .donate-icon {
            padding-top: 32px;
            width: 32px;
            height: 32px;
        }
        
        .paper-font-subhead {
            font-size: 20px;
        }
        
        a.paper-font-subhead {
            padding-top: 32px;
        }
        </style>
        <paper-icon-button id="btn" icon="chat:close" on-tap="_switch"></paper-icon-button>
        <div id="placeholder"></div>
        <div id="container">
            <div class="center">
                <iron-icon icon="chat:wifi-tethering" class="logo"></iron-icon>
                <div class="paper-font-headline">Snapdrop</div>
                <div class="slogan">The easiest way to transfer files accross devices.</div>
                <a class="paper-font-subhead" href="https://github.com/capira12/snapdrop/blob/master/faq.md" target="_blank">Frequently Asked Questions</a>
            </div>
            <span id="footer">Built with &#9829; by <a href="https://twitter.com/capira42" target="_blank">Robin Linus</a></span>
        </div>
    </template>
</dom-module>
<script>
(function() {
    Polymer({
        is: 'x-card',
        behaviors: [
            Polymer.NeonSharedElementAnimatableBehavior
        ],
        properties: {
            animationConfig: {
                value: function() {
                    return {
                        'entry': [{
                            name: 'ripple-animation',
                            id: 'ripple',
                            toPage: this
                        }, {
                            name: 'fade-out-animation',
                            node: this.$.placeholder,
                            timing: {
                                delay: 250
                            }
                        }, {
                            name: 'fade-in-animation',
                            node: this.$.container,
                            timing: {
                                delay: 50
                            }
                        }],
                        'exit': [{
                            name: 'opaque-animation',
                            node: this.$.placeholder
                        }, {
                            name: 'fade-out-animation',
                            node: this.$.container,
                            timing: {
                                duration: 0
                            }
                        }, {
                            name: 'reverse-ripple-animation',
                            id: 'reverse-ripple',
                            fromPage: this
                        }]
                    };
                }
            },
            sharedElements: {
                value: function() {
                    return {
                        'ripple': this.$.placeholder,
                        'reverse-ripple': this.$.placeholder
                    };
                }
            }
        },
        _switch: function() {
            document.querySelector('#pages').select(0);
        }
    });
})();
</script>