-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
executable file
·98 lines (88 loc) · 15.7 KB
/
index.html
File metadata and controls
executable file
·98 lines (88 loc) · 15.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>CommonsLab - Android Application</title>
<meta name="description" content="Make it easier to contribute on Wikimedia">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link href="https://fonts.googleapis.com/css?family=Droid+Serif" rel="preload">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="preload">
<style>
.description a.button{color: #F7F8F9}hr,img{border:0}article,aside,details,figcaption,figure,footer,header,hgroup,hr,main,menu,nav,section,summary{display:block}pre,textarea{overflow:auto}fieldset,hr,legend,td,th{padding:0}.hidden,.invisible{visibility:hidden}header .background,header .description,header .overlay,header video{left:0;top:0;position:absolute}.clearfix,.clearfix:after{clear:both}footer,h1,h2,h3{text-align:center}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:1px;border-top:1px solid #ccc;margin:1em 0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}body,h1,h2,h3{font-weight:400}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{border:0}textarea{resize:vertical}table{border-collapse:collapse;border-spacing:0}html{color:#222;font-size:1em;line-height:1.4}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{border:0;margin:0}.browserupgrade{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}.hidden{display:none!important}.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.clearfix:after,.clearfix:before{content:" ";display:table}@media print{blockquote,img,pre,tr{page-break-inside:avoid}*,:after,:before{background:0 0!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}blockquote,pre{border:1px solid #999}thead{display:table-header-group}img{max-width:100%!important}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}}.button{text-decoration:none;font-family:'Droid Serif',serif;font-size:20px;padding:10px 30px;border-radius:4px}.button-green{border:5px solid #78C9AD;transition:.15s ease-in-out;color:#F7F8F9}body,h2{color:#61666B}.button-green:hover{background-color:#78C9AD}.container{background-color:#F7F8F9;padding:130px 0;margin:0 auto}.container .content-wrapper{width:100%;max-width:950px;margin:0 auto}p:first-child{margin-top:0}p:last-child{margin-bottom:0}body{padding:10px 10px 0;background-color:#61666B;font-family:Raleway,sans-serif;max-width:1440px;margin:0 auto}h1,h2,h3,ul{font-family:'Droid Serif',serif}h1,h2,h3{margin:0}h1{font-size:44px;color:#F7F8F9}h2{font-size:32px}header{position:relative}header .background{height:550px;right:0;bottom:0;overflow:hidden;z-index:-100}header .description{width:100%;height:550px}header .overlay,header video{min-width:100vw;min-height:100%}header .description div{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}header .description ul{float:right;margin:60px 80px 0 0;padding:0;list-style:none;font-size:20px}header .description ul li{float:left;margin-left:20px}header .description ul li a{color:#F7F8F9;text-decoration:none}header .description ul li a:hover{text-decoration:underline}header .description h1{color:#F7F8F9;max-width:410px}header .description .button{margin:30px auto 0;display:table}header .overlay{background-color:rgba(58,151,200,.4);height:550px}.capture-moments{margin-top:540px;position:relative;clear:both}.capture-moments .phone-1{position:absolute;top:-320px;left:80px}.capture-moments .description{float:left;width:500px;margin-top:80px}.capture-moments .photo{float:right}.capture-moments div img{position:initial}.capture-moments h2{margin-bottom:80px}.capture-moments .content-wrapper{margin:0 auto}.capture-moments .description div{margin-top:50px;display:flex;flex-direction:row}.capture-moments .description div img{flex-grow:1}.capture-moments .description div img:nth-child(2){margin-top:8px}.capture-moments .description div img:first-child{margin-top:3px}.important-message{background:url(/img/background_section.png) no-repeat;background-size:cover;position:relative;height:380px}#contribute .content-wrapper{margin-top:80px}#contribute .description{width:500px;float:right}#contribute .photo img{float:right;margin-right:180px;margin-top:70px}.important-message .overlay{top:0;left:0;width:100%;height:100%;position:absolute;background-color:rgba(120,201,173,.75)}.important-message h1{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#download{background-color:#78C9AD;padding-top:80px}#download h2{color:#F7F8F9;margin-bottom:77px}#download div{display:table;margin:0 auto}#download a{margin:0 23px}footer{background-color:#61666B;padding:60px 0;color:#F7F8F9}@media only screen and (max-width:1024px){h1{font-size:32px}h2{font-size:28px}.button,header .description ul{font-size:18px}.capture-moments{padding-top:260px}#contribute .description p,.capture-moments .description p{padding:0 40px}.capture-moments h2{margin-bottom:35px}.capture-moments .description{margin:0 auto;float:none;width:100%;max-width:580px}.capture-moments .phone-1{width:142px;height:279px;top:-100px;left:50%;transform:translateX(-50%)}.capture-moments .photo{float:none;margin-top:90px}.capture-moments .photo img{display:table;margin:0 auto}#contribute .description{width:100%;max-width:500px;float:none;margin:0 auto}#contribute .photo img{float:none;margin:70px auto 0;display:table}}@media only screen and (max-width:360px){header .description ul{float:none;display:table;margin:50px auto}#download a{margin:0 auto}}.description a{color: #E55555;}
</style>
</head>
<body>
<header>
<div class="background">
<video autoplay="autoplay" poster="/img/background.png" loop="loop">
<source src="/videos/background.mp4" type="video/mp4">
</video>
<div class="overlay"></div>
</div>
<div class="description">
<ul>
<li><a href="#contribute">Contribute</a></li>
<li><a href="#download">Download</a></li>
</ul>
<div>
<h1>Share more with the world</h1>
<a class="button button-green" href="#download">Download</a>
</div>
</div>
</header>
<section class="container capture-moments">
<h2>Capture moments</h2>
<div class="content-wrapper">
<div class="description">
<p>Upload photos, videos, and audios directly from your phone to Wikimedia Commons. No need to transfer your files to your desktop to upload on Wikimedia anymore.</p>
<p>Wikimedia is one of the biggest communities to share knowledge and multimedia with the world.</p>
<div>
<img src="/img/camera.svg" width="62.45" height="48.03">
<img src="/img/video_camera.svg" width="56.58" height="35.51">
<img src="/img/microphone.svg" width="25.52" height="52.57">
</div>
</div>
<div class="photo">
<!-- Set retina photos -->
<img src="/img/phone_2.png" width="224" height="441">
</div>
<div class="clearfix"></div>
</div>
<img class="phone-1" src="/img/phone_1.png" width="224" height="441">
</section>
<section class="important-message">
<div class="overlay"></div>
<h1>Be part of the biggest community</h1>
</section>
<section class="container" id="contribute">
<h2>How do I contribute?</h2>
<div class="content-wrapper">
<div class="description">
<p>There are many ways you can contribute. Sharing the word about this application, getting new people on this community, giving feedback and feature proposals for new functionality. There are many ways to contribute.</p>
<p>This project itself is a non-profit one. We like to give back to the community for its energy, and for being the biggest and most amazing.</p>
<p>If you are a developer and want to contribute, we can use your help. Solving problems, is always easier when looking at it from different perspectives. You can check our <a href="https://github.com/CommonsLab/CommonsLab">repository on Github</a>.</p>
<p>From design to code is well organized on repositories under this <a href="https://github.com/CommonsLab">organization</a> on Github.</p>
</div>
<div class="photo">
<img src="/img/megaphone.svg" width="200.51" height="114.33">
</div>
<div class="clearfix"></div>
</div>
</section>
<section class="container" id="download">
<h2>Download</h2>
<div>
<a href="#"><img src="/img/get-it-on-f-droid.png" width="138" height="41"></a><a href="#"><img src="/img/google-play-badge.png" width="135" height="40"></a>
</div>
</section>
<footer>
Made with <span style="color: #E55555;">♥</span> in Tirana
</footer>
<script>
!(function(e,t){"function"==typeof define&&define.amd?define([],t(e)):"object"==typeof exports?module.exports=t(e):e.smoothScroll=t(e)})("undefined"!=typeof global?global:this.window||this.global,(function(e){"use strict";var t,n,o,r,a,c,l,i={},u="querySelector"in document&&"addEventListener"in e,s={selector:"[data-scroll]",selectorHeader:null,speed:500,easing:"easeInOutCubic",offset:0,callback:function(){}},d=function(){var e={},t=!1,n=0,o=arguments.length;"[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(t=arguments[0],n++);for(var r=function(n){for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t&&"[object Object]"===Object.prototype.toString.call(n[o])?e[o]=d(!0,e[o],n[o]):e[o]=n[o])};n<o;n++){var a=arguments[n];r(a)}return e},f=function(e){return Math.max(e.scrollHeight,e.offsetHeight,e.clientHeight)},h=function(e,t){for(Element.prototype.matches||(Element.prototype.matches=Element.prototype.matchesSelector||Element.prototype.mozMatchesSelector||Element.prototype.msMatchesSelector||Element.prototype.oMatchesSelector||Element.prototype.webkitMatchesSelector||function(e){for(var t=(this.document||this.ownerDocument).querySelectorAll(e),n=t.length;--n>=0&&t.item(n)!==this;);return n>-1});e&&e!==document;e=e.parentNode)if(e.matches(t))return e;return null},m=function(e){"#"===e.charAt(0)&&(e=e.substr(1));for(var t,n=String(e),o=n.length,r=-1,a="",c=n.charCodeAt(0);++r<o;){if(t=n.charCodeAt(r),0===t)throw new InvalidCharacterError("Invalid character: the input contains U+0000.");a+=t>=1&&t<=31||127==t||0===r&&t>=48&&t<=57||1===r&&t>=48&&t<=57&&45===c?"\\"+t.toString(16)+" ":t>=128||45===t||95===t||t>=48&&t<=57||t>=65&&t<=90||t>=97&&t<=122?n.charAt(r):"\\"+n.charAt(r)}return"#"+a},p=function(e,t){var n;return"easeInQuad"===e&&(n=t*t),"easeOutQuad"===e&&(n=t*(2-t)),"easeInOutQuad"===e&&(n=t<.5?2*t*t:-1+(4-2*t)*t),"easeInCubic"===e&&(n=t*t*t),"easeOutCubic"===e&&(n=--t*t*t+1),"easeInOutCubic"===e&&(n=t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1),"easeInQuart"===e&&(n=t*t*t*t),"easeOutQuart"===e&&(n=1- --t*t*t*t),"easeInOutQuart"===e&&(n=t<.5?8*t*t*t*t:1-8*--t*t*t*t),"easeInQuint"===e&&(n=t*t*t*t*t),"easeOutQuint"===e&&(n=1+--t*t*t*t*t),"easeInOutQuint"===e&&(n=t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t),n||t},g=function(e,t,n){var o=0;if(e.offsetParent)do o+=e.offsetTop,e=e.offsetParent;while(e);return o=Math.max(o-t-n,0),Math.min(o,v()-b())},b=function(){return Math.max(document.documentElement.clientHeight,e.innerHeight||0)},v=function(){return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.body.clientHeight,document.documentElement.clientHeight)},y=function(e){return e&&"object"==typeof JSON&&"function"==typeof JSON.parse?JSON.parse(e):{}},O=function(e){return e?f(e)+e.offsetTop:0},S=function(t,n,o){o||(t.focus(),document.activeElement.id!==t.id&&(t.setAttribute("tabindex","-1"),t.focus(),t.style.outline="none"),e.scrollTo(0,n))};i.animateScroll=function(n,o,c){var i=y(o?o.getAttribute("data-options"):null),u=d(t||s,c||{},i),f="[object Number]"===Object.prototype.toString.call(n),h=f||!n.tagName?null:n;if(f||h){var m=e.pageYOffset;u.selectorHeader&&!r&&(r=document.querySelector(u.selectorHeader)),a||(a=O(r));var b,E,I=f?n:g(h,a,parseInt(u.offset,10)),H=I-m,A=v(),j=0,C=function(t,r,a){var c=e.pageYOffset;(t==r||c==r||e.innerHeight+c>=A)&&(clearInterval(a),S(n,r,f),u.callback(n,o))},M=function(){j+=16,b=j/parseInt(u.speed,10),b=b>1?1:b,E=m+H*p(u.easing,b),e.scrollTo(0,Math.floor(E)),C(E,I,l)},w=function(){clearInterval(l),l=setInterval(M,16)};0===e.pageYOffset&&e.scrollTo(0,0),w()}};var E=function(t){var r;try{r=m(decodeURIComponent(e.location.hash))}catch(t){r=m(e.location.hash)}n&&(n.id=n.getAttribute("data-scroll-id"),i.animateScroll(n,o),n=null,o=null)},I=function(r){if(0===r.button&&!r.metaKey&&!r.ctrlKey&&(o=h(r.target,t.selector),o&&"a"===o.tagName.toLowerCase()&&o.hostname===e.location.hostname&&o.pathname===e.location.pathname&&/#/.test(o.href))){var a;try{a=m(decodeURIComponent(o.hash))}catch(e){a=m(o.hash)}if("#"===a){r.preventDefault(),n=document.body;var c=n.id?n.id:"smooth-scroll-top";return n.setAttribute("data-scroll-id",c),n.id="",void(e.location.hash.substring(1)===c?E():e.location.hash=c)}n=document.querySelector(a),n&&(n.setAttribute("data-scroll-id",n.id),n.id="",o.hash===e.location.hash&&(r.preventDefault(),E()))}},H=function(e){c||(c=setTimeout((function(){c=null,a=O(r)}),66))};return i.destroy=function(){t&&(document.removeEventListener("click",I,!1),e.removeEventListener("resize",H,!1),t=null,n=null,o=null,r=null,a=null,c=null,l=null)},i.init=function(n){u&&(i.destroy(),t=d(s,n||{}),r=t.selectorHeader?document.querySelector(t.selectorHeader):null,a=O(r),document.addEventListener("click",I,!1),e.addEventListener("hashchange",E,!1),r&&e.addEventListener("resize",H,!1))},i}));
smoothScroll.init({ selector: 'a[href^="#"]' });
</script>
</body>
</html>