mirror of
https://github.com/schlagmichdoch/PairDrop.git
synced 2025-04-27 18:26:16 -04:00
Squashed commit of the following:
commit 5b7ac6f0f56f3888c01049f08b6b47dbeb3bcfb0 Author: Robin Linus <robin_woll@capira.de> Date: Wed Dec 30 18:06:48 2015 +0100 Clean up about and social links commit 9c7da37d1e8f58f1c45626289fbab336fc982a0f Author: Robin Linus <robin_woll@capira.de> Date: Wed Dec 30 18:06:35 2015 +0100 Change Slogan commit fcea5cfb5c6928acabce44caacc1d75fafdab447 Author: Robin Linus <robin_woll@capira.de> Date: Wed Dec 30 18:06:22 2015 +0100 Add shorturl commit f09e9e42c30aa7b26df2a5fb00bec653f3ad68e1 Author: Robin Linus <robin_woll@capira.de> Date: Wed Dec 30 16:56:55 2015 +0100 initial
This commit is contained in:
parent
1bce467a7c
commit
e756a3fd0c
11 changed files with 278 additions and 128 deletions
211
app/elements/x-cards/about-page.html
Normal file
211
app/elements/x-cards/about-page.html
Normal file
|
@ -0,0 +1,211 @@
|
|||
<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="about-page">
|
||||
<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;
|
||||
}
|
||||
|
||||
.share {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#btn,
|
||||
.share a {
|
||||
color: #52524F;
|
||||
}
|
||||
|
||||
.share a {
|
||||
text-decoration: none;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.share a:hover,
|
||||
#btn:hover {
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
<div id="placeholder"></div>
|
||||
<div id="container">
|
||||
<div class="share">
|
||||
<a href="https://twitter.com/snapdrop42" target="_blank">
|
||||
<iron-icon icon="chat:twitter"></iron-icon>
|
||||
<paper-tooltip for="" position="bottom" offset="14">
|
||||
Contact us on Twitter!
|
||||
</paper-tooltip>
|
||||
</a>
|
||||
<a href="https://www.facebook.com/snapdrop.net/" target="_blank">
|
||||
<iron-icon icon="chat:facebook"></iron-icon>
|
||||
<paper-tooltip for="" position="bottom" offset="14">
|
||||
Contact us on Facebook!
|
||||
</paper-tooltip>
|
||||
</a>
|
||||
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=FDAHZJH3228D6" target="_blank">
|
||||
<iron-icon icon="chat:local-cafe"></iron-icon>
|
||||
<paper-tooltip for="" position="bottom" offset="14">
|
||||
You like Snapdrop?
|
||||
<br> Buy me a cup of coffee!
|
||||
</paper-tooltip>
|
||||
</a>
|
||||
<a href="https://github.com/capira12/snapdrop" target="_blank" class="github">
|
||||
<iron-icon icon="chat:github"></iron-icon>
|
||||
<paper-tooltip for="" position="bottom" offset="14">
|
||||
Get involved!
|
||||
</paper-tooltip>
|
||||
</a>
|
||||
<paper-icon-button id="btn" icon="chat:close" on-tap="_switch"></paper-icon-button>
|
||||
</div>
|
||||
<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 across 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 ♥ by <a href="https://twitter.com/capira42" target="_blank">Robin Linus</a></span>
|
||||
</div>
|
||||
</template>
|
||||
</dom-module>
|
||||
<script>
|
||||
(function() {
|
||||
Polymer({
|
||||
is: 'about-page',
|
||||
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>
|
Loading…
Add table
Add a link
Reference in a new issue