--- /dev/null
+<!DOCTYPE html>
+<html lang="en-CA" dir="ltr">
+
+<head>
+ <meta charset="utf-8">
+ <meta name="author" content="David Fourney">
+ <meta name="viewport" content="width=device-width">
+
+ <link href="http://wikimedia.ca/donner" rel="alternate" hreflang="fr">
+ <link href="http://wikimedia.ca/donate" rel="alternate" hreflang="en">
+ <link href="favicon.ico" rel="icon" type="image/x-icon">
+ <link href="wmca.css" rel="stylesheet" type="text/css">
+
+ <title>Join or Donate to Wikimedia Canada</title>
+</head>
+
+<body>
+ <header>
+ <a href="http://ca.wikimedia.org"><img alt="Wikimedia Canada" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Wikimedia_Canada_logo.svg/200px-Wikimedia_Canada_logo.svg.png" class="logo"></a>
+ <p class="langlink"><a lang="fr" aria-label="Version française" href="donner.html">Français</a></p>
+
+ <h1 class="title">Join or Donate to Wikimedia Canada</h1>
+ </header>
+
+ <div id="main">
+ <leftmargin></leftmargin>
+ <rightmargin></rightmargin>
+
+ <article>
+ <div id="green">
+ <div id="join">
+ <h2>Join Wikimedia Canada</h2>
+
+ <p>To buy a full Wikimedia Canada membership, choose your options below and click "Join". You will then be redirected to PayPal to securely process your transaction.</p>
+
+ <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
+ <input name="cmd" type="hidden" value="_s-xclick">
+ <input name="hosted_button_id" type="hidden" value="EWK58XZUC6V9U">
+ <ul class="flex-outer">
+ <li>
+ <input name="on1" aria-labelledby="mtype" type="hidden" value="New membership or renewal">
+ <label for="mtype">New membership<br/> or renewal:</span></label>
+ <select name="os1" id="mtype">
+ <option value="New membership">New membership</option>
+ <option value="Renewal of membership">Renewal of membership</option>
+ </select>
+ </li>
+ <li><p>Membership year:</p>
+ <ul class="flex-inner">
+ <li><div class="radio-item">
+ <input name="on0" type="hidden" value="Membership for">
+ <input name="os0" id="2017" type="radio" value="2017" checked>
+ <label for="2017">2017 membership <span class="break">($10.00 CAD)</span></label>
+ </div></li>
+ <li><div class="radio-item">
+ <input name="on0" type="hidden" value="Membership for">
+ <input name="os0" id="2018" type="radio" value="2017 and 2018">
+ <label for="2018">2017 and 2018 membership <span class="break"> ($20.00 CAD)</span></label>
+ </div></li>
+ </ul>
+ </li>
+ <li>
+ <input name="on2" type="hidden" value="Real full name">
+ <label for="rfname">Real full name:</label>
+ <input placeholder="Enter real name" name="os2" id="rfname" aria-label="Real full name" type="text">
+ </li>
+ <li>
+ <input name="currency_code" type="hidden" value="CAD">
+ <input name="submit" type="submit" value="Join" class="btn">
+ </li>
+ </ul>
+ </form>
+ </div>
+
+ <div id="donate">
+ <h2>Donate to Wikimedia Canada</h2>
+
+ <p>Click the "Donate" button to make a donation to Wikimedia Canada. You will then be redirected to PayPal to securely process your transaction.</p>
+
+ <p>Please note, Wikimedia Canada cannot issue receipts for tax purposes.</p>
+
+ <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
+ <input name="cmd" type="hidden" value="_s-xclick">
+ <input name="hosted_button_id" type="hidden" value="YWE7WG8JYZU6A">
+ <input name="submit" type="submit" value="Donate" class="btn">
+ </form>
+ </div>
+ </div>
+
+ <div id="why">
+ <h2>What is Wikimedia Canada?</h2>
+
+ <p>Wikimedia Canada is a not-for-profit organization that acts as the Canadian chapter of the <a href="http://wikimediafoundation.org">Wikimedia Foundation</a>. Along with its <a href="https://meta.wikimedia.org/wiki/Wikimedia_chapters/en-ca">sister chapters across the world</a>,
+ Wikimedia Canada aims to create a world in which every single human being is given free and open access to the sum of all knowledge in their own language. For more information, see <a href="http://ca.wikimedia.org/wiki/Wikimedia_Canada:About">our "about us" page</a>.
+ </p>
+
+ <h3>Membership</h3>
+
+ <p>Wikimedia Canada is a membership-based organization. Our work would be impossible without the ideas and labour of our members. Wikimedia Canada membership is open to any person or organization who shares our goals.</p>
+
+ <p>Membership entitles you to attend and vote at official members meetings, where we decide long-term policies and elect the board of directors.</p>
+
+ <h3>Where your donation goes</h3>
+
+ <p>Your donation goes to all of Wikimedia Canada's projects across the country to promote the creation and distribution of free educational material. These projects include lectures to teach people how to write for Wikipedia and photo contests to create
+ photographs of Canadian landmarks under a free licence.</p>
+
+ <p>In the future, we plan to do more projects like these, as well as partnering with museums and galleries to increase access to their collections, encouraging the creation of more free content about Canada, translating Wikipedia articles into Canada's
+ aboriginal and immigrant languages, creating new technologies to help the Wikimedia Foundation's online projects, and supporting the initiatives of local groups of editors.</p>
+
+ <p>For more about our projects, see <a href="http://ca.wikimedia.org/wiki/Projects">our projects page</a>.
+ </p>
+ </div>
+ </article>
+
+ </div>
+ <footer>
+ <p>When you join or donate, Wikimedia Canada asks for your real name and email address to let us stay in contact with you. This information is subject to our <a href="http://ca.wikimedia.org/wiki/Privacy_policy">privacy policy regarding memberships</a>.
+ We do not give your information to anyone except when legally required to do so. You may opt-out of receiving messages from us at any time.</p>
+ </footer>
+
+ </body>
+
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html lang="fr-CA" dir="ltr">
+
+<head>
+ <meta charset="utf-8" />
+ <meta name="author" content="David Fourney">
+ <meta name="viewport" content="width=device-width">
+
+ <link rel="alternate" hreflang="fr" href="http://wikimedia.ca/donner" />
+ <link rel="alternate" hreflang="en" href="http://wikimedia.ca/donate" />
+ <link rel="icon" href="favicon.ico" type="image/x-icon">
+ <link rel="stylesheet" type="text/css" href="wmca.css">
+
+ <title>Rejoignez ou faites un don à Wikimédia Canada</title>
+</head>
+
+<body>
+ <header>
+ <a href="http://ca.wikimedia.org"><img alt="Wikimédia Canada" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Wikimedia_Canada_logo.svg/200px-Wikimedia_Canada_logo.svg.png" class="logo"></a>
+ <p class="langlink"><a lang="en" href="donate.html" aria-label="English version">English</a></p>
+
+ <h1 class="title">Rejoignez ou faites un don à Wikimédia Canada</h1>
+ </header>
+
+ <div id="main">
+ <leftmargin></leftmargin>
+ <rightmargin></rightmargin>
+
+ <article>
+ <div id="green">
+ <div id="join">
+ <h2>Devenir membre de Wikimédia Canada</h2>
+
+ <p>Pour adhérer à Wikimédia Canada, choisissez une option ci-dessous et cliquez sur « Adhérer ». Vous serez ensuite redirigé vers le site de PayPal pour effectuer votre transaction de façon sécurisée.</p>
+
+ <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
+ <input name="cmd" type="hidden" value="_s-xclick">
+ <input name="hosted_button_id" type="hidden" value="QPB9E9D2FKWJU">
+ <ul class="flex-outer">
+ <li>
+ <input name="on1" aria-labelledby="mtype" type="hidden" value="Nouveau membre ou renouvellement">
+ <label for="mtype">Nouveau membre ou renouvellement:</label>
+ <select name="os1" id="mtype">
+ <option value="Nouveau membre">Nouveau membre</option>
+ <option value="Renouvellement">Renouvellement</option>
+ </select>
+ </li>
+ <li><p>Année d'adhésion:</p>
+ <ul class="flex-inner">
+ <li><div class="radio-item">
+ <input name="on0" type="hidden" value="Adhesion pour">
+ <input name="os0" id="2017" type="radio" value="2017" checked>
+ <label for="2017">Adhésion 2017 <span class="break">(10.00$ CAD)</span></label>
+ </div></li>
+ <li><div class="radio-item">
+ <input name="on0" type="hidden" value="Adhesion pour">
+ <input name="os0" id="2018" type="radio" value="2017 et 2018">
+ <label for="2018">Adhésion 2017 et 2018 <span class="break"> (20.00$ CAD)</span></label>
+ </div></li>
+ </ul>
+ </li>
+ <li>
+ <input name="on2" type="hidden" value="Nom reel complet">
+ <label for="rfname">Nom réel complet:</label>
+ <input placeholder="Entrez le nom réel" name="os2" id="rfname" aria-label="Nom réel complet" type="text">
+ </li>
+ <li>
+ <input name="currency_code" type="hidden" value="CAD">
+ <input name="submit" type="submit" value="Adhérer" class="btn">
+ </li>
+ </ul>
+ </form>
+ </div>
+
+ <div id="donate">
+ <h2>Faire un don à Wikimédia Canada</h2>
+
+ <p>Cliquez sur le bouton « Faire un don » ci-dessous pour effectuer un don du montant de votre choix. Vous serez redirigé vers le site de PayPal pour effecuter votre transaction de façon sécurisée.</p>
+
+ <p>Veuillez noter que Wikimédia Canada ne peut pas emettre de reçu pour dons à des fins d'impôt.</p>
+
+ <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
+ <input name="cmd" type="hidden" value="_s-xclick">
+ <input name="hosted_button_id" type="hidden" value="YWE7WG8JYZU6A">
+ <input name="submit" type="submit" value="Faire un don" class="btn">
+ </form>
+ </div>
+ </div>
+
+ <div id="why">
+ <h2>Qu'est-ce que Wikimédia Canada?</h2>
+ <p>Wikimédia Canada est un organisme à but non lucratif qui agit en tant que chapitre canadien de la <a href="http://wikimediafoundation.org/wiki/Accueil">Fondation Wikimédia</a>. De concert avec les <a href="https://meta.wikimedia.org/wiki/Wikimedia_chapters/fr">autres chapitres à travers le monde</a>,
+ Wikimédia Canada a pour but de faire en sorte que tous les êtres humains du monde aient accès librement et gratuitement à l'ensemble des connaissances dans leur propre langue. Pour plus d'informations, consultez la page « <a href="https://ca.wikimedia.org/wiki/Wikimedia_Canada:About/fr">À propos de nous</a> ».</p>
+ <h3>Adhésion</h3>
+ <p>L'adhésion à Wikimédia Canada est ouverte à toute personne ou organisme partageant nos valeurs et objectifs. C'est grâce à l'action de ses membres que Wikimedia Canada existe.</p>
+ <p>Le fait d'être membre vous permet d'assister et de voter aux assemblées officielles des membres où nous décidons des politiques à long terme et élisons le conseil d'administration.</p>
+
+ <h3>À quoi servent vos dons</h3>
+ <p>Vos dons servent à l'ensemble des projets de Wikimédia Canada à travers le pays qui ont pour but d'encourager la création et la distribution de contenu éducatif gratuitement. Ces projets incluent des leçons pour enseigner aux gens comment contribuer
+ à Wikipédia et des concours photographiques afin de créer des photos des monuments canadiens sous licence libre.</p>
+ <p>Dans le futur, nous planifions effectuer davantage de projets similaires en plus d'établir un partenariat avec les musées et les galeries afin d'accroître l'accès à leurs collections, d'encourager la création de plus de contenu libre à propos
+ du Canada, de traduire des articles de Wikipédia dans les langues autochtones et des immigrants canadiens, de développer de nouvelles technologies afin d'aider les projets en ligne de la Fondation Wikimédia et de supporter les initiatives des
+ groupes de contributeurs locaux.</p>
+ <p>Pour en savoir plus sur nos projets, consultez la <a href="https://ca.wikimedia.org/w/index.php?title=Projets&setlang=fr&uselang=fr">page de nos projets</a>. </div>
+ </article>
+
+ </div>
+ <footer>
+ <p>Lorsque vous vous inscrivez ou faites un don, Wikimédia Canada demande votre vrai nom et votre adresse électronique pour nous permettre de rester en contact avec vous. Ces informations sont sujettes à notre <a href="https://ca.wikimedia.org/wiki/Policy/Privacy?uselang=fr">politique de confidentialité envers les adhésions</a>.
+ Nous ne donnons pas vos renseignements à quiconque, sauf lorsque légalement tenus de le faire. Vous pouvez choisir de ne plus recevoir des messages de notre part à tout moment.</p>
+ </footer>
+
+ </body>
+
+ </html>
--- /dev/null
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #F3F3F3;
+ margin: 1em;
+ font-family: sans-serif;
+ font-size: 1.4rem;
+ color: #000;
+}
+
+a {
+ text-decoration: none;
+ padding-bottom: 0px;
+ border-bottom: 1px solid blue;
+}
+
+img.logo {
+ display: flex;
+ float: left;
+ max-width: 25%;
+ height: auto;
+}
+
+.langlink {
+ float: right;
+}
+
+.title {
+ text-align: center;
+ padding-top: 75px;
+}
+
+h1 {
+ font-weight: bold;
+ text-align: center;
+}
+
+h2 {
+ font-weight: bold;
+ font-size: 1.6em;
+}
+
+h3 {
+ font-weight: bold;
+ font-size: 1.4em;
+}
+
+p {
+ margin: 0 0 1em 0;
+}
+
+#main {
+ margin: 0;
+ padding: 0;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-flow: row;
+ flex-flow: row;
+}
+
+header,
+footer,
+#main > article,
+#main > leftmargin,
+#main > rightmargin {
+ margin: 4px;
+ padding: 1em;
+}
+
+#main > article {
+ background: #F3F3F3;
+ -webkit-flex: 4 1 0;
+ flex: 4 1 0;
+ -webkit-order: 2;
+ order: 2;
+}
+
+#green {
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-direction: row;
+ flex-direction: row;
+ padding-bottom: 1em;
+}
+
+#join {
+ background-color: #CCE7CD;
+ border: 1px solid #5EAC58;
+ padding: 1em;
+ width: 60%;
+}
+
+#donate {
+ background-color: #CCE7CD;
+ border: 1px solid #5EAC58;
+ padding: 1em;
+ width: 40%;
+}
+
+#join > h2, #donate > h2 {
+ text-align: center;
+}
+
+#why {
+ background: #F3F3F3;
+}
+
+#main > leftmargin,
+#main > rightmargin {
+ background: #F3F3F3;
+}
+
+#main > leftmargin {
+ -webkit-order: 1;
+ order: 1;
+}
+
+#main > rightmargin {
+ -webkit-order: 3;
+ order: 3;
+}
+
+header, footer {
+ display: block;
+ min-height: 80px;
+}
+
+header {
+ background: #F3F3F3;
+}
+
+footer {
+ background: #DDD;
+ font-size: 75%;
+ font-style: italic;
+ padding: 0.5em;
+}
+
+.flex-outer,
+.flex-inner {
+ list-style-type: none;
+ padding: 0;
+}
+
+.flex-outer {
+ margin: 0 auto;
+}
+
+.flex-outer li {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.flex-inner {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ flex-direction: column;
+}
+
+.flex-outer > li:not(:last-child) {
+ margin-bottom: 20px;
+}
+
+.flex-outer li label {
+ padding: 8px;
+}
+
+.flex-outer li p {
+ padding: 8px;
+ align-items: center;
+}
+
+.flex-outer > li > label,
+.flex-outer li p {
+ flex: 1 0 120px;
+ max-width: 220px;
+}
+
+.flex-outer > li > label + * {
+ flex: 1 0 220px;
+}
+
+.flex-outer li p {
+ margin: 0;
+}
+
+.flex-outer li input:not([type='radio']) {
+ padding: 15px;
+}
+
+span.break:before {
+ content: "\A";
+ white-space: pre;
+}
+
+select {
+ display: inline-block;
+ width: 100%;
+ padding: 10px 15px;
+ font-size: 1.4rem;
+ border: 0;
+ border-radius: 0;
+}
+
+.radio-item {
+ display: flex;
+ align-items: baseline;
+ justify-content: space-between;
+ padding-bottom: 0.5em;
+}
+
+input[type="radio"] {
+ align-self: center;
+}
+
+input[type='text'] {
+ display: inline-block;
+ width: 100%;
+ font-size: 1.4rem;
+}
+
+#donate > form {
+ text-align: center;
+}
+
+.btn {
+ padding: 16px;
+ border: 1px solid #333;
+ background: #333;
+ color: #fff;
+ text-transform: uppercase;
+ letter-spacing: .09em;
+ border-radius: 2px;
+ font-weight: bold;
+ font-size: 1.0rem;
+}
+
+.btn:hover {
+ background: yellow;
+ color: #000;
+ border: 1px solid #333;
+}
+
+.btn:focus {
+ background: yellow;
+ color: #000;
+ border: 1px solid #333;
+}
+
+@-ms-viewport {
+ width: device-width;
+}
+
+@media only screen and (max-width: 768px) {
+
+ body {
+ font-size: 1.2rem;
+ margin: 0em;
+ }
+
+ #main, #page {
+ -webkit-flex-flow: column;
+ flex-flow: column;
+ }
+
+ #main > article, #main > leftmargin, #main > rightmargin {
+ /* Return them to document order */
+ -webkit-order: 0;
+ order: 0;
+ }
+
+ #main > article {
+ padding 0.5em;
+ }
+
+ #main > leftmargin, #main > rightmargin {
+ /* Hide them */
+ visibility: hidden;
+ margin: 0;
+ padding: 0;
+ order: 3;
+ }
+
+ #green {
+ -webkit-flex-flow: column;
+ flex-flow: column;
+ padding-bottom: 1em;
+ -webkit-order: 0;
+ order: 0;
+ }
+
+ #join, #donate {
+ width: 100%;
+ padding: 1em;
+ border: 0px;
+ }
+
+ #join {
+ border-bottom: 1px solid #5EAC58;
+ }
+
+ #donate {
+ border-top: 1px solid #5EAC58;
+ }
+
+ br {
+ content: ' ';
+ }
+
+ br:after {
+ content: ' ';
+ }
+
+ select, input[type='text'] {
+ font-size: 1.0rem;
+ }
+
+ header, footer {
+ min-height: 50px;
+ }
+
+ footer {
+ position: sticky;
+ }
+
+ .btn {
+ display: inline-block;
+ width: 100%;
+ margin-top: 2em;
+ }
+}
projects / paypal.git / commitdiff