[tor-commits] [donate/master] Made the cryptocurrency page work with no javascript

commit dc20801bc0eac433b627a5dcd4958e5a91d7ec5e Author: Peter Haight peterh@giantrabbit.com Date: Wed Mar 13 22:26:49 2019 -0700

Made the cryptocurrency page work with no javascript

I think we'll still need to work on the validation some because I couldn't do the regions as a dropdown because we can't use javascript to update it based on the country. Because I made region a text field, people can put in invalid states which will cause CiviCRM to throw exceptions.

Also we should probably generate the countries from a list somewhere instead of having them hardcoded.

Issue #39984 --- public/dist/index.css | 2 +- sass/components/_cryptocurrency.scss | 7 + sass/components/_thank-you.scss | 4 + src/CryptocurrencyController.php | 3 +- templates/cryptocurrency-no-js.twig | 303 +++++++++++++++++++++++++++++++++++ templates/cryptocurrency.twig | 15 +- 6 files changed, 326 insertions(+), 8 deletions(-)

diff --git a/public/dist/index.css b/public/dist/index.css index 16ebc8a1..d30024eb 100644 --- a/public/dist/index.css +++ b/public/dist/index.css @@ -1 +1 @@ -/*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,in put,optgroup,select,textarea{margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-but ton{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}[hidden],template{display:none}hr{border-top:1px solid #68b030;margin:40px auto;max-width:106px}body,html,input,textarea{color:#484848;font-family:Source Sans Pro,sans-serif;font-size:16px;line-height:20px;font-weight:400}p{font-size:1.3rem;color:#212529;line-height:2rem}.preamble p{color:#777;font-family:Source Sans Pro;font-size:2em;line-height:1.3em;font-weight:300}h1{font-size:47px;letter-spacing:2px;line-height:50px;margin-bottom:1%;margin-top:0;text-transform:capitalize}@media (min-width:767px){h1{font-size:50px;line-height:60px}}@media (min-width:991px){h1{font-size:55px}}h2{font-size:25px;font-weight:700;line-height:1;margin-bottom:1%;margin-top:0}@media (min-width:767px){h2{font-size:34px}}h3{font-weight:700}h3,h4{font-size:27px;text-transform:uppercase;margin-bottom:1%;margin-top:0}h4{font-weight:400;letter-spacing:0;line-height:normal}h5{font-size:21 px;font-weight:300;line-height:28px;margin-bottom:1%;margin-top:0;letter-spacing:.09px}@media (min-width:991px){h5{font-size:22px}}a{color:#7d4698;font-weight:700;text-decoration:none}a:hover{color:#68b030}.bold,b{font-weight:700}.green{color:#68b030}.light{font-weight:200}.email{font-weight:700}.small{font-size:14px}.strong{color:#7d4698;font-weight:700}.tiny{font-size:12px}.background-grey{color:#f1f1f3;font-size:80px;font-weight:700}input[type=checkbox]{margin-top:auto;margin-bottom:auto;margin-right:4px}input[type=date],input[type=text],textarea{border:1px solid #848282;color:#484848;font-size:16px;height:27px;margin:9px;padding:8px 12px}input[type=date].required,input[type=text].required,textarea.required{border-color:#68b030}input[type=date].error,input[type=text].error,textarea.error{border-color:red}input[type=date]::placeholder,input[type=text]::placeholder,textarea::placeholder{color:#aeaeae}input[type=date]:focus,input[type=text]:focus,textarea:focus{border-color:#59316b; color:#7d4698;outline:none}textarea{box-sizing:border-box;width:60%;height:3em;display:block}select,textarea{padding:8px 12px}select{background:#fff;border:1px solid #848282;color:#484848;font-size:16px;height:45px;margin:9px}select.required{border-color:#68b030;color:#484848}select.error{border-color:red}select:focus{border-color:#59316b;color:#7d4698;outline:none}.field-row{align-items:center;box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:wrap;width:100%}@media (min-width:767px){.field-row{flex-wrap:nowrap}}.required{color:#68b030}.button{background-color:#fff;border:1px solid #848282;border-radius:5px;color:#484848;display:inline-block;font-size:20px;font-weight:400;margin:7px;padding:14px 10px;text-transform:uppercase;width:90%}.button.purple{background-color:#7d4698;color:#fff}.button.purple:hover{background-color:#59316b}.button:hover{cursor:pointer}.button.selected,.button:hover{background-color:#68b030;color:#fff}.button.selected{cursor:default}@media (min-w idth:479px){.button{width:auto}}a.button{font-size:16px;font-weight:400;padding:14px 10px;text-decoration:none}@media (min-width:767px){a.button{font-size:20px;width:auto}}body{margin:0}div{box-sizing:border-box}.header{background-color:#59316b;color:#fff;width:100%;padding:50px 50px 50px 10%}@media (min-width:767px){.header{padding-right:0;padding-bottom:0}}.header h1{margin-bottom:30px;font-size:36px;font-weight:300;line-height:40px}@media (min-width:767px){.header h1{font-size:40px;line-height:40px}}@media (min-width:991px){.header h1{font-size:60px;line-height:60px}}.header h4{text-transform:none;font-size:14px;line-height:14px;font-weight:400}@media (min-width:767px){.header h4{font-size:16px;line-height:18px}}@media (min-width:991px){.header h4{font-size:20px;line-height:25px}}.header .content-wrapper{width:100%}.header .content-wrapper .header-content{display:flex;align-items:flex-end}.header .content-wrapper .header-content .left-column{display:block}@media (min-width:767px) {.header .content-wrapper .header-content .left-column{flex:1 1 40%;margin-bottom:60px;margin-right:45%}}.header .tor-campaign-logo{flex:1 1 58%;max-width:750px;display:none;position:relative}@media (min-width:991px){.header .tor-campaign-logo{display:block}}.header .tor-campaign-logo img{width:100%;height:auto;position:absolute;bottom:0;right:0}.header .logo{width:81px}.header .nav-bar{margin-bottom:30px}@media (min-width:767px){.header .nav-bar{margin-bottom:80px}}@media (min-width:767px){.title-header-image .header{background-image:url(tor-header-campaign-2018.ab4c974a.svg);background-position:100% 100%;background-repeat:no-repeat;background-size:40%}.title-header-image .header h4{padding-right:10%}}.content{margin:0;padding:0}.content .fixed-width{margin-left:auto;margin-right:auto}@media (min-width:767px){.content .fixed-width{max-width:728px}}@media (min-width:991px){.content .fixed-width{max-width:940px}}.footer-container{display:flex;flex-direction:column;flex-wrap:wrap;just ify-content:space-around;background-color:#59316b;color:#fff;padding:70px 30px 30px}.footer-container a{color:#fff}@media (min-width:767px){.footer-container{padding-top:100px}}.footer-container .footer-content{display:flex;width:100%;max-width:900px;margin:0 auto 30px;flex-wrap:wrap}@media (min-width:767px){.footer-container .footer-content{flex-wrap:nowrap}}.footer-container .footer-content-left{flex:1 1 100%;margin-bottom:70px}@media (min-width:767px){.footer-container .footer-content-left{flex:1 1 60%;margin-right:150px;margin-bottom:0}}.footer-container .footer-content-right{display:flex;flex:1 1 100%;align-items:center;flex-direction:column}@media (min-width:767px){.footer-container .footer-content-right{align-items:inherit;flex:1 1 auto}}.footer-container .footer-description{margin-bottom:70px;font-size:20px;line-height:24px}@media (min-width:767px){.footer-container .footer-description{margin-bottom:100px}}.footer-container .footer-subscribe{font-size:17px;line-height:20px}. footer-container .footer-subscribe .footer-subscribe-header{margin-bottom:5px;font-weight:600;text-transform:uppercase;color:hsla(0,0%,100%,.4)}.footer-container .footer-subscribe .footer-sign-up{display:inline-block;padding:15px 30px;border-radius:4px;border:1px solid #fff;font-weight:700;text-transform:uppercase;margin-top:15px}.footer-container .footer-subscribe .footer-sign-up:hover{background-color:#7d4698}.footer-container .footer-menu{display:flex;flex-direction:row;width:100%;margin-bottom:70px;justify-content:space-evenly}.footer-container .footer-menu a{display:block;font-weight:300;line-height:30px}.footer-container .footer-menu a:hover{color:#aeaeae}@media (min-width:767px){.footer-container .footer-menu{margin-bottom:200px;flex-direction:column}}.footer-container .footer-social{display:flex;flex-wrap:wrap;width:100%;justify-content:center}@media (min-width:767px){.footer-container .footer-social{width:155px;justify-content:inherit}}.footer-container .footer-social a{dis play:block;text-indent:-999em;background-size:cover;background-repeat:no-repeat;width:20px;height:20px;margin-right:30px}.footer-container .footer-social a.facebook,.footer-container .footer-social a.mastodon,.footer-container .footer-social a.twitter{margin-bottom:20px}.footer-container .footer-social a.facebook{background-image:url(facebook.9acbe573.svg)}.footer-container .footer-social a.mastodon{background-image:url(mastodon.4c126d2f.svg)}.footer-container .footer-social a.twitter{width:24px;background-image:url(twitter.1d48ba8e.svg)}@media (min-width:767px){.footer-container .footer-social a.twitter{margin-right:0}}.footer-container .footer-social a.instagram{background-image:url(instagram.be316699.svg)}.footer-container .footer-social a.linkedin{background-image:url(linkedin.ce947134.svg)}.footer-container .footer-social a.github{background-image:url(github.61372f20.svg)}@media (min-width:767px){.footer-container .footer-social a.github{margin-right:0}}.gr-stamp-container{disp lay:block;text-align:center}.gr-stamp-container a:hover{color:#68b030}.container{width:100%}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}.cryptocurrency .content{display:flex;flex:0 0 100%;flex-wrap:wrap;justify-content:center}.cryptocurrency .content h4{text-align:center;width:100%}.cryptocurrency .intro-text-section{margin:0 15px}.cryptocurrency #cryptocurrency-form{margin:auto;max-width:1024px}.cryptocurrency .donate.button{background-color:#68b030;color:#fff;width:300px}.cryptocurrency .form-column{margin-bottom:20px;padding-left:15px;padding-right:15px}@media (min-width:767px){.cryptocurrency .form-column{width:50%}}.cryptocurrency .form-fields{display:grid;grid-column-gap:10px;grid-row-gap:10px;grid-template-columns:[first] 1fr [second] 1fr [end];margin-top:20px}@media (min-width:479px){.cryptocurrency .form-fi elds{grid-template-columns:[first] 1fr [second] 1fr [third] 1fr [fourth] 1fr [end]}}.cryptocurrency input{box-sizing:border-box;height:43px;margin:0;width:100%}.cryptocurrency input[type=checkbox]{width:auto}.cryptocurrency input[required]{border-color:#68b030}.cryptocurrency input[name=firstName]{grid-column:first/span 2}.cryptocurrency input[name=lastName]{grid-column:first/end}@media (min-width:479px){.cryptocurrency input[name=lastName]{grid-column-start:third}}.cryptocurrency input[name=streetAddress]{grid-column:first/end}@media (min-width:479px){.cryptocurrency input[name=streetAddress]{grid-column:first/fourth}}.cryptocurrency input[name=extendedAddress]{grid-column-start:first}@media (min-width:479px){.cryptocurrency input[name=extendedAddress]{grid-column-start:fourth}}.cryptocurrency input[name=locality],.cryptocurrency input[name=postalCode]{grid-column:first/span 2}.cryptocurrency input[name=email]{grid-column:first/end}@media (min-width:479px){.cryptocurrency input[nam e=estimatedDonationDate]{grid-column:3/span 2}}.cryptocurrency input[name=currencyAmount]{grid-column:first/span 2}@media (min-width:479px){.cryptocurrency input[name=currencyAmount]{grid-column:third/span 2}}.cryptocurrency label[for=estimatedDonationDate]{align-self:center;grid-column:first;text-align:right}@media (min-width:479px){.cryptocurrency label[for=estimatedDonationDate]{grid-column:first/span 2}}.cryptocurrency .checkbox-row{display:flex;grid-column:first/end;align-items:center}.cryptocurrency .checkbox-row input{margin-right:5px}.cryptocurrency select{box-sizing:border-box;height:43px;margin:0}.cryptocurrency select[name=country]{grid-column:first/end}.cryptocurrency select[name=region]{grid-column:first/span 2}@media (min-width:479px){.cryptocurrency select[name=region]{grid-column:third/span 2}}.cryptocurrency select[name=cryptocurrencyType]{grid-column:first/span 2}.cryptocurrency .wallet-column{padding-left:15px;padding-right:15px;width:100%}@media (min-width:767px) {.cryptocurrency .wallet-column{width:50%}}.cryptocurrency .wallet-column ul{list-style-type:none;margin-top:20px;padding-inline-start:0;width:100%}.cryptocurrency .wallet-column li{align-items:center;display:flex;margin-bottom:10px;width:100%}.cryptocurrency .wallet-column li:first-child div{padding-top:0}.cryptocurrency .wallet-column li:first-child .wallet-id{border-top:1px solid}.cryptocurrency .wallet-column .currency-name{padding:5px;width:30%}.cryptocurrency .wallet-column .wallet-id{font-family:Source Code Pro,monospace;padding:5px;margin-right:10px;width:60%}.cryptocurrency .button{height:50px}.cryptocurrency .section{display:flex;flex-wrap:wrap;justify-content:center;padding:10px}.cryptocurrency .button-section{justify-content:center;margin-bottom:20px;padding:0;width:100%}.campaign-totals-area{display:flex;flex-wrap:wrap;justify-content:center}.campaign-totals-area .characters{display:flex;justify-content:center;line-height:normal;margin:10px 30px}.campaign-totals-area .c haracters .character{position:relative}.campaign-totals-area .characters .character .cover{background:#68b030;bottom:0;left:0;position:absolute;visibility:hidden;right:0;top:0;z-index:1}.campaign-totals-area .characters .character.covered .cover{visibility:visible}.campaign-totals-area .characters .character.resolved{color:#68b030}.campaign-totals-area .label{font-size:27px;text-align:center}.donate-options{display:flex;justify-content:center;margin:30px auto 2%;width:92vw}.donate-options a{background-color:#fff;border:2px solid #aeaeae;color:#aeaeae;font-weight:400;display:block;text-align:center;text-decoration:none;text-transform:uppercase}.donate-options a.once-button{border-radius:5px 0 0 5px;margin-right:0;padding-left:15px;padding-right:15px;width:150px}.donate-options a.monthly-button{border-left:0;border-radius:0 5px 5px 0;margin-left:0;padding-left:15px;padding-right:15px;width:160px}.donate-options a.selected,.donate-options a:hover{background-color:#68b030;color:#fff}.pa yment-other-div{text-align:center;margin-bottom:20px}.perk-intro{display:flex;flex-wrap:wrap;margin:2% 5%;justify-content:center;text-align:center}.perk-intro .perk-title{font-size:22px;margin-bottom:0}.price-change-warning{color:red}#donationForm{margin:0 auto 40px;max-width:1024px}.donation-selection-area{display:flex;flex-direction:row;flex-wrap:wrap;margin:auto 2%;max-width:1024px;justify-content:center}@media (min-width:767px){.donation-selection-area{flex-direction:row}}.donation-selection-area .donate-buttons{align-items:center;align-self:center;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;margin:5px}@media (min-width:767px){.donation-selection-area .donate-buttons{flex-direction:row;margin-right:5px}}.donation-selection-area .donate-buttons a.price-btn{background-color:#59316b;border-radius:5px;color:#fff;display:block;font-size:23px;font-weight:400;margin:5px;padding:20px 0;text-align:center;text-decoration:none;width:120px}@media (min-width:767px){ .donation-selection-area .donate-buttons a.price-btn{font-size:29px}}.donation-selection-area .donate-buttons a.price-btn.promo{position:relative}.donation-selection-area .donate-buttons a.price-btn.promo:before{position:absolute;display:block;background-color:#68b030;color:#fff;content:"LIMITED OFFER";width:80px;height:20px;font-size:12px;top:-9px;left:13px;padding:0 8px;border-radius:16px;font-weight:300}.donation-selection-area .donate-buttons a.selected{background-color:#68b030}.donation-selection-area .donate-buttons .other-amount-field{align-items:center;display:flex;flex-direction:column;justify-content:center}.donation-selection-area .donate-buttons .other-amount-field .error{color:red;display:block;text-align:center}.donation-selection-area .donate-buttons .other-amount-field .perk-amt{background-color:#f1f1f3;font-size:23px;font-weight:700;height:42px;margin:5px;min-width:80px;text-transform:capitalize;text-align:center;width:94px}.donation-selection-area .no-perk-area{mar gin:1% 1% 20px;width:100%;text-align:center}.donation-selection-area label[for=no-perk-checkbox]{font-size:20px;line-height:24px}.donation-selection-area .perks{align-self:center;display:flex;flex-direction:column;width:100%;margin-top:20px;position:relative;z-index:2;justify-content:space-evenly}@media (min-width:767px){.donation-selection-area .perks{border:none;flex-direction:row}}.donation-selection-area .perks .perk{border:1px solid #aeaeae;border-top:0 solid #aeaeae;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.donation-selection-area .perks .perk:first-child{border-top-width:1px}@media (min-width:767px){.donation-selection-area .perks .perk{border:1px solid #aeaeae;flex-direction:column;justify-content:flex-start;margin:0 5px 20px;position:relative;width:30%;top:0;flex-wrap:nowrap}}.donation-selection-area .perks .perk.disabled{border-color:#f8f9fa;color:#aeaeae;font-style:italic}.donation-selection-area .perks .perk.disabled img{opacity:.2}.do nation-selection-area .perks .perk.disabled select{color:#aeaeae;font-style:italic}.donation-selection-area .perks .perk.disabled .promo-red-dot{background-color:#aeaeae}.donation-selection-area .perks .perk.disabled .promo-price{color:#aeaeae}.donation-selection-area .perks .perk .slides{position:relative;align-self:center;display:none;height:175px;overflow:hidden;width:100%}@media (min-width:767px){.donation-selection-area .perks .perk .slides{display:block;order:2}}.donation-selection-area .perks .perk img{display:block;margin:0 auto;max-width:50%;height:auto}@media (min-width:767px){.donation-selection-area .perks .perk img{width:85%;max-width:none}}.donation-selection-area .perks .perk .promo-red-dot{position:absolute;background:red;top:45px;right:15px;color:#fff;padding:10px 20px;font-size:28px;line-height:31px;font-weight:700;border-radius:40px}.donation-selection-area .perks .perk .price-tag-group{margin:20px 0 20px 20px;font-size:21px;font-weight:600;width:40%}@media (min-w idth:767px){.donation-selection-area .perks .perk .price-tag-group{font-size:16px;order:1;width:100%}}.donation-selection-area .perks .perk .promo-strike-through{text-decoration:line-through}.donation-selection-area .perks .perk .promo-price{color:#59316b;font-weight:700}.donation-selection-area .perks .perk .promo-price.large{font-size:22px;font-weight:600}.donation-selection-area .perks .perk .perk-label{font-size:21px;font-weight:700;margin:20px 20px 20px 0;text-align:right;text-transform:uppercase;width:40%;box-sizing:border-box}@media (min-width:767px){.donation-selection-area .perks .perk .perk-label{margin:0;padding:20px 20px 0;font-size:27px;width:100%;order:3;text-align:center}}.donation-selection-area .perks .perk .perk-desc{font-size:16px;font-weight:300;display:none;padding:20px;width:100%;box-sizing:border-box}@media (min-width:767px){.donation-selection-area .perks .perk .perk-desc{display:block;margin:0 11px;order:4;padding-left:4px;padding-right:4px;width:auto}}.dona tion-selection-area .perks .perk .perk-sub-select{display:none;border-color:#aeaeae;margin:10px;width:100%}@media (min-width:767px){.donation-selection-area .perks .perk .perk-sub-select{display:block;order:5;width:92%}}.donation-selection-area .perks .selected{background-color:#68b030;transition:all .5s}.donation-selection-area .perks .selected .perk-desc,.donation-selection-area .perks .selected .perk-sub-select,.donation-selection-area .perks .selected .slides{display:block}@media (min-width:767px){.donation-selection-area .perks .selected{background-color:#fff;box-shadow:8px 8px #68b030;position:relative;top:-4px}}.donation-selection-area .totals-area{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;margin-bottom:4%;position:relative}.donation-selection-area .totals-area,.donation-selection-area .totals-area div,.donation-selection-area .totals-area input{position:relative;z-index:1}.donation-selection-area .totals-area .fist-bg{position:absolute;top:0;right :0;z-index:0;height:auto}@media (min-width:767px){.donation-selection-area .totals-area{order:4;width:100%}}.donation-selection-area .totals-area .matching-message{color:#59316b;font-size:35px;line-height:normal;padding-top:10px;text-align:center;width:100%}.donation-selection-area .totals-area .matched-amount{color:#59316b;font-size:100px;font-weight:700;line-height:normal;text-align:center;width:100%}.info-area,.payment-method-area{position:relative;z-index:2}.payment-method-area{border-bottom:2px solid #aeaeae;border-top:2px solid #aeaeae;display:flex;flex-direction:column;justify-content:center;margin-top:20px;padding:4% 21px;text-align:center}.payment-method-area .button{width:160px;vertical-align:top}.payment-method-area .button.paypal{padding-top:8px;padding-bottom:5px}.payment-method-area .paypal-png{height:32px}.payment-method-area .payment-method-question{margin-bottom:3%}.payment-method-area .payment-option{margin-bottom:2%}.info-area{padding-top:4%;margin-left:auto;margi n-right:auto;max-width:600px;text-align:center}.info-area #firstName{width:100%}@media (min-width:767px){.info-area #firstName{width:50%}}.info-area #lastName{width:100%}@media (min-width:767px){.info-area #lastName{width:50%}}.info-area #streetAddress{width:100%}@media (min-width:767px){.info-area #streetAddress{width:80%}}.info-area #extendedAddress{width:20%}.info-area #country{width:100%}.info-area #locality{width:38%}@media (min-width:767px){.info-area #locality{width:33%}}.info-area #region{width:45%}@media (min-width:767px){.info-area #region{width:34%}}.info-area #postalCode{width:100%}@media (min-width:767px){.info-area #postalCode{width:33%}}.info-area #email{width:100%}@media (min-width:767px){.info-area #email{width:56%}}.info-area .receipt{display:none}@media (min-width:767px){.info-area .receipt{display:block}}.info-area #mailingListOptIn{margin:10px 4px 10px 10px}.info-area #cardNumber{width:100%}@media (min-width:767px){.info-area #cardNumber{width:56%}}.info-area im g.credit-cards{display:none}@media (min-width:767px){.info-area img.credit-cards{display:block;height:29px;vertical-align:middle}}.info-area #expMonth{width:38%}@media (min-width:767px){.info-area #expMonth{width:33%}}.info-area #expYear{width:38.5%}@media (min-width:767px){.info-area #expYear{width:33%}}.info-area #cvc{width:38%}@media (min-width:767px){.info-area #cvc{width:33%}}.info-area #perk-fields{display:block;margin:10px;text-align:left}.info-area #perk-fields #selected-perk-fields-label{margin-top:10px}.info-area #perk-fields #perk-fit{margin-left:0}.info-area .donate-submit-area{color:#848282;font-size:22px;font-weight:700;padding:20px 0;line-height:26px}.info-area .donate.button{background-color:#68b030;color:#fff;text-transform:uppercase;width:300px}#donate-comments-wrapper{text-align:left}#donate-comments-wrapper textarea{width:95%}@media (min-width:767px){#donate-comments-wrapper textarea{width:97%}}.no-close .ui-dialog-titlebar-close{display:none}#loading-dialog .ove rlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#484848;z-index:99}#loading-dialog .dialog-area{display:flex;justify-content:center;position:fixed;top:20vh;width:100%;z-index:100}#loading-dialog .dialog{background-color:#fff;min-height:150px;text-align:center;width:300px}#loading-dialog .message{margin:20px}#loading-dialog .dots{display:flex;margin:20px 20px 0;justify-content:center}#loading-dialog .dot{display:block;width:15px;height:15px;margin-right:.5%;margin-left:.5%;border-radius:20px;background-color:#8cd621;opacity:.3}#loading-dialog .dot:nth-child(0n+1){animation-name:moving-dot;animation-duration:2.5s;animation-iteration-count:infinite;animation-delay:0}#loading-dialog .dot:nth-child(0n+2){animation-name:moving-dot;animation-duration:2.5s;animation-iteration-count:infinite;animation-delay:.5s}#loading-dialog .dot:nth-child(0n+3){animation-name:moving-dot;animation-duration:2.5s;animation-iteration-count:infinite;animation-delay:1s}#loading-dialog .dot:nt h-child(0n+4){animation-name:moving-dot;animation-duration:2.5s;animation-iteration-count:infinite;animation-delay:1.5s}#loading-dialog .dot:nth-child(0n+5){animation-name:moving-dot;animation-duration:2.5s;animation-iteration-count:infinite;animation-delay:2s}@keyframes moving-dot{0%{opacity:.3}20%{opacity:1}to{opacity:.3}}.donor-faq{margin:40px auto;width:90%}@media (min-width:991px){.donor-faq{width:80%}}.donor-faq .questions{list-style-position:inside;padding-left:0}.donor-faq .questions li{color:#59316b;font-size:20px;font-weight:700;line-height:29px}@media (min-width:991px){.donor-faq .questions li{font-size:25px;line-height:34px}}.donor-faq .questions .question{color:#59316b;display:inline;font-size:20px;margin-bottom:10px;margin-top:10px}@media (min-width:991px){.donor-faq .questions .question{font-size:25px}}.donor-faq .questions .answer{color:#484848;font-family:Source Sans Pro,sans-serif;font-size:16px;line-height:20px;font-weight:400}.donor-faq .button-line{width:100%}.b utton-line{text-align:center}.error-container{display:block;width:50%;min-height:100px;margin-right:auto;margin-bottom:5%;margin-left:auto;padding:2% 5%;border:1px solid #aeaeae;box-shadow:11px 11px 0 0 #e70000}.error-container .title{margin-bottom:3%;color:#e70000;font-size:34px;line-height:40px;text-align:center}#company-profile-container,#hepdata-no-results-message,.donate-match-container{text-align:center;margin-bottom:60px}.donate-match-container .input-and-loader,.donate-match-container datalist,.donate-match-container input{width:300px}.donate-match-container .input-and-loader{margin:auto;position:relative}.donate-match-container .input-and-loader input{height:30px;padding:3px;border-style:solid;text-align:center;font-weight:600}.donate-match-container .input-and-loader .load-container{display:none;height:30px;width:30px;overflow:hidden;position:absolute;top:4px;right:-6px}.donate-match-container .input-and-loader .load-container .loader,.donate-match-container .input-and-loa der .load-container .loader:after,.donate-match-container .input-and-loader .load-container .loader:before{background:#59316b;animation:load1 1s ease-in-out infinite;width:1em;height:4em}.donate-match-container .input-and-loader .load-container .loader{color:#59316b;text-indent:-9999em;margin:10px auto;position:relative;font-size:4px;transform:translateZ(0);animation-delay:-.16s}.donate-match-container .input-and-loader .load-container .loader:after,.donate-match-container .input-and-loader .load-container .loader:before{position:absolute;top:0;content:""}.donate-match-container .input-and-loader .load-container .loader:before{left:-1.5em;animation-delay:-.32s}.donate-match-container .input-and-loader .load-container .loader:after{left:1.5em}@-webkit-keyframes load1{0%,80%,to{box-shadow:0 0;height:4em}40%{box-shadow:0 -2em;height:5em}}@keyframes load1{0%,80%,to{box-shadow:0 0;height:4em}40%{box-shadow:0 -2em;height:5em}}.donate-match-container #company-option-list{width:300px;margin :0 auto;max-height:300px;overflow-x:hidden;overflow-y:auto;background-color:#f8f9fa;border:1px solid #7d4698;display:none}.donate-match-container #company-option-list .company-option{word-wrap:break-word;padding:5px 2px}.donate-match-container #company-option-list .company-option:hover{background-color:#68b030;color:#fff}.donate-error-message{color:#aeaeae;padding:0 10%;word-break:break-all;text-align:center}#company-profile-container .profile{display:none;width:75%;margin:auto}#company-profile-container .profile .row{margin:20px 0}#company-profile-container .profile .row .company-property-label{width:30%;text-align:right;font-weight:700}#company-profile-container .profile .row .company-property-value{text-align:left;width:60%}#company-profile-container .profile .row .company-property-value#summary-value{width:auto;font-size:25px;line-height:34px;text-align:center}#company-profile-container .profile .row .company-property-value#summary-value .company{font-weight:700;color:#7d4698}#c ompany-profile-container .profile .row .company-property-value#summary-value .percent{font-weight:700;color:#68b030}#company-profile-container .profile .row .company-property-value#summary-value .match-amount{font-weight:700;color:#59316b}#company-profile-container .profile .row .company-property-value#matchingGiftForm-value{width:auto}#company-profile-container .profile .row .company-property-value#lastUpdated-value{font-weight:700;color:#aeaeae}#company-profile-container .profile .row .company-property-value#matchingConditions-value .ratio{font-weight:700;color:#59316b}#company-profile-container .profile .row .company-property-value#resources-value{width:auto}#company-profile-container ul{margin-top:0}#company-profile-container li{margin-bottom:10px}.privacy-policy{margin-left:auto;margin-right:auto;width:70%;margin-bottom:40px}.subscribe .fixed-width{max-width:600px;text-align:center}.subscribe .fixed-width #email,.subscribe .fixed-width #firstName{width:100%}@media (min-width:76 7px){.subscribe .fixed-width #firstName{width:50%}}.subscribe .fixed-width #lastName{width:100%}@media (min-width:767px){.subscribe .fixed-width #lastName{width:50%}}.subscribe .fixed-width .join{width:200px}.subscribe .fixed-width .messages{color:red;text-align:left}.header-content .thank-you{width:80%}.header-content .thank-you h1{text-align:center;text-transform:none}.header-content .thank-you h5{text-align:center}.header-content .thank-you img{width:50px}.header-content .thank-you .share-icons{margin:20px 10px 0;text-align:center}@media (min-width:767px){.header-content .thank-you{margin-top:-120px;margin-bottom:30px}}.content{margin-top:20px}.content .thank-you{margin-bottom:40px}.content .thank-you h4{text-align:center}.content .thank-you .volunteer-desc{margin-left:auto;margin-right:auto;max-width:490px;text-align:center}.content .thank-you .volunteer-desc .skills-text{margin-bottom:20px} \ No newline at end of file +/*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,in put,optgroup,select,textarea{margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-but ton{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}[hidden],template{display:none}hr{border-top:1px solid #68b030;margin:40px auto;max-width:106px}body,html,input,textarea{color:#484848;font-family:Source Sans Pro,sans-serif;font-size:16px;line-height:20px;font-weight:400}p{font-size:1.3rem;color:#212529;line-height:2rem}.preamble p{color:#777;font-family:Source Sans Pro;font-size:2em;line-height:1.3em;font-weight:300}h1{font-size:47px;letter-spacing:2px;line-height:50px;margin-bottom:1%;margin-top:0;text-transform:capitalize}@media (min-width:767px){h1{font-size:50px;line-height:60px}}@media (min-width:991px){h1{font-size:55px}}h2{font-size:25px;font-weight:700;line-height:1;margin-bottom:1%;margin-top:0}@media (min-width:767px){h2{font-size:34px}}h3{font-weight:700}h3,h4{font-size:27px;text-transform:uppercase;margin-bottom:1%;margin-top:0}h4{font-weight:400;letter-spacing:0;line-height:normal}h5{font-size:21 px;font-weight:300;line-height:28px;margin-bottom:1%;margin-top:0;letter-spacing:.09px}@media (min-width:991px){h5{font-size:22px}}a{color:#7d4698;font-weight:700;text-decoration:none}a:hover{color:#68b030}.bold,b{font-weight:700}.green{color:#68b030}.light{font-weight:200}.email{font-weight:700}.small{font-size:14px}.strong{color:#7d4698;font-weight:700}.tiny{font-size:12px}.background-grey{color:#f1f1f3;font-size:80px;font-weight:700}input[type=checkbox]{margin-top:auto;margin-bottom:auto;margin-right:4px}input[type=date],input[type=text],textarea{border:1px solid #848282;color:#484848;font-size:16px;height:27px;margin:9px;padding:8px 12px}input[type=date].required,input[type=text].required,textarea.required{border-color:#68b030}input[type=date].error,input[type=text].error,textarea.error{border-color:red}input[type=date]::placeholder,input[type=text]::placeholder,textarea::placeholder{color:#aeaeae}input[type=date]:focus,input[type=text]:focus,textarea:focus{border-color:#59316b; color:#7d4698;outline:none}textarea{box-sizing:border-box;width:60%;height:3em;display:block}select,textarea{padding:8px 12px}select{background:#fff;border:1px solid #848282;color:#484848;font-size:16px;height:45px;margin:9px}select.required{border-color:#68b030;color:#484848}select.error{border-color:red}select:focus{border-color:#59316b;color:#7d4698;outline:none}.field-row{align-items:center;box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:wrap;width:100%}@media (min-width:767px){.field-row{flex-wrap:nowrap}}.required{color:#68b030}.button{background-color:#fff;border:1px solid #848282;border-radius:5px;color:#484848;display:inline-block;font-size:20px;font-weight:400;margin:7px;padding:14px 10px;text-transform:uppercase;width:90%}.button.purple{background-color:#7d4698;color:#fff}.button.purple:hover{background-color:#59316b}.button:hover{cursor:pointer}.button.selected,.button:hover{background-color:#68b030;color:#fff}.button.selected{cursor:default}@media (min-w idth:479px){.button{width:auto}}a.button{font-size:16px;font-weight:400;padding:14px 10px;text-decoration:none}@media (min-width:767px){a.button{font-size:20px;width:auto}}body{margin:0}div{box-sizing:border-box}.header{background-color:#59316b;color:#fff;width:100%;padding:50px 50px 50px 10%}@media (min-width:767px){.header{padding-right:0;padding-bottom:0}}.header h1{margin-bottom:30px;font-size:36px;font-weight:300;line-height:40px}@media (min-width:767px){.header h1{font-size:40px;line-height:40px}}@media (min-width:991px){.header h1{font-size:60px;line-height:60px}}.header h4{text-transform:none;font-size:14px;line-height:14px;font-weight:400}@media (min-width:767px){.header h4{font-size:16px;line-height:18px}}@media (min-width:991px){.header h4{font-size:20px;line-height:25px}}.header .content-wrapper{width:100%}.header .content-wrapper .header-content{display:flex;align-items:flex-end}.header .content-wrapper .header-content .left-column{display:block}@media (min-width:767px) {.header .content-wrapper .header-content .left-column{flex:1 1 40%;margin-bottom:60px;margin-right:45%}}.header .tor-campaign-logo{flex:1 1 58%;max-width:750px;display:none;position:relative}@media (min-width:991px){.header .tor-campaign-logo{display:block}}.header .tor-campaign-logo img{width:100%;height:auto;position:absolute;bottom:0;right:0}.header .logo{width:81px}.header .nav-bar{margin-bottom:30px}@media (min-width:767px){.header .nav-bar{margin-bottom:80px}}@media (min-width:767px){.title-header-image .header{background-image:url(tor-header-campaign-2018.ab4c974a.svg);background-position:100% 100%;background-repeat:no-repeat;background-size:40%}.title-header-image .header h4{padding-right:10%}}.content{margin:0;padding:0}.content .fixed-width{margin-left:auto;margin-right:auto}@media (min-width:767px){.content .fixed-width{max-width:728px}}@media (min-width:991px){.content .fixed-width{max-width:940px}}.footer-container{display:flex;flex-direction:column;flex-wrap:wrap;just ify-content:space-around;background-color:#59316b;color:#fff;padding:70px 30px 30px}.footer-container a{color:#fff}@media (min-width:767px){.footer-container{padding-top:100px}}.footer-container .footer-content{display:flex;width:100%;max-width:900px;margin:0 auto 30px;flex-wrap:wrap}@media (min-width:767px){.footer-container .footer-content{flex-wrap:nowrap}}.footer-container .footer-content-left{flex:1 1 100%;margin-bottom:70px}@media (min-width:767px){.footer-container .footer-content-left{flex:1 1 60%;margin-right:150px;margin-bottom:0}}.footer-container .footer-content-right{display:flex;flex:1 1 100%;align-items:center;flex-direction:column}@media (min-width:767px){.footer-container .footer-content-right{align-items:inherit;flex:1 1 auto}}.footer-container .footer-description{margin-bottom:70px;font-size:20px;line-height:24px}@media (min-width:767px){.footer-container .footer-description{margin-bottom:100px}}.footer-container .footer-subscribe{font-size:17px;line-height:20px}. footer-container .footer-subscribe .footer-subscribe-header{margin-bottom:5px;font-weight:600;text-transform:uppercase;color:hsla(0,0%,100%,.4)}.footer-container .footer-subscribe .footer-sign-up{display:inline-block;padding:15px 30px;border-radius:4px;border:1px solid #fff;font-weight:700;text-transform:uppercase;margin-top:15px}.footer-container .footer-subscribe .footer-sign-up:hover{background-color:#7d4698}.footer-container .footer-menu{display:flex;flex-direction:row;width:100%;margin-bottom:70px;justify-content:space-evenly}.footer-container .footer-menu a{display:block;font-weight:300;line-height:30px}.footer-container .footer-menu a:hover{color:#aeaeae}@media (min-width:767px){.footer-container .footer-menu{margin-bottom:200px;flex-direction:column}}.footer-container .footer-social{display:flex;flex-wrap:wrap;width:100%;justify-content:center}@media (min-width:767px){.footer-container .footer-social{width:155px;justify-content:inherit}}.footer-container .footer-social a{dis play:block;text-indent:-999em;background-size:cover;background-repeat:no-repeat;width:20px;height:20px;margin-right:30px}.footer-container .footer-social a.facebook,.footer-container .footer-social a.mastodon,.footer-container .footer-social a.twitter{margin-bottom:20px}.footer-container .footer-social a.facebook{background-image:url(facebook.9acbe573.svg)}.footer-container .footer-social a.mastodon{background-image:url(mastodon.4c126d2f.svg)}.footer-container .footer-social a.twitter{width:24px;background-image:url(twitter.1d48ba8e.svg)}@media (min-width:767px){.footer-container .footer-social a.twitter{margin-right:0}}.footer-container .footer-social a.instagram{background-image:url(instagram.be316699.svg)}.footer-container .footer-social a.linkedin{background-image:url(linkedin.ce947134.svg)}.footer-container .footer-social a.github{background-image:url(github.61372f20.svg)}@media (min-width:767px){.footer-container .footer-social a.github{margin-right:0}}.gr-stamp-container{disp lay:block;text-align:center}.gr-stamp-container a:hover{color:#68b030}.container{width:100%}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}.cryptocurrency .content{display:flex;flex:0 0 100%;flex-wrap:wrap;justify-content:center}.cryptocurrency .content h4{text-align:center;width:100%}.cryptocurrency .intro-text-section{margin:0 15px}.cryptocurrency #cryptocurrency-form{margin:auto;max-width:1024px}.cryptocurrency .donate.button{background-color:#68b030;color:#fff;width:300px}.cryptocurrency .form-column{margin-bottom:20px;padding-left:15px;padding-right:15px}@media (min-width:767px){.cryptocurrency .form-column{width:50%}}.cryptocurrency .form-fields{display:grid;grid-column-gap:10px;grid-row-gap:10px;grid-template-columns:[first] 1fr [second] 1fr [end];margin-top:20px}@media (min-width:479px){.cryptocurrency .form-fi elds{grid-template-columns:[first] 1fr [second] 1fr [third] 1fr [fourth] 1fr [end]}}.cryptocurrency input{box-sizing:border-box;height:43px;margin:0;width:100%}.cryptocurrency input[type=checkbox]{width:auto}.cryptocurrency input[required]{border-color:#68b030}.cryptocurrency input[name=firstName]{grid-column:first/span 2}.cryptocurrency input[name=lastName]{grid-column:first/end}@media (min-width:479px){.cryptocurrency input[name=lastName]{grid-column-start:third}}.cryptocurrency input[name=streetAddress]{grid-column:first/end}@media (min-width:479px){.cryptocurrency input[name=streetAddress]{grid-column:first/fourth}}.cryptocurrency input[name=extendedAddress]{grid-column-start:first}@media (min-width:479px){.cryptocurrency input[name=extendedAddress]{grid-column-start:fourth}}.cryptocurrency input[name=locality],.cryptocurrency input[name=postalCode]{grid-column:first/span 2}.cryptocurrency input[name=email]{grid-column:first/end}@media (min-width:479px){.cryptocurrency input[nam e=estimatedDonationDate]{grid-column:3/span 2}}.cryptocurrency input[name=currencyAmount]{grid-column:first/span 2}@media (min-width:479px){.cryptocurrency input[name=currencyAmount]{grid-column:third/span 2}}.cryptocurrency input[name=region]{grid-column:first/span 2}@media (min-width:479px){.cryptocurrency input[name=region]{grid-column:third/span 2}}.cryptocurrency label[for=estimatedDonationDate]{align-self:center;grid-column:first;text-align:right}@media (min-width:479px){.cryptocurrency label[for=estimatedDonationDate]{grid-column:first/span 2}}.cryptocurrency .checkbox-row{display:flex;grid-column:first/end;align-items:center}.cryptocurrency .checkbox-row input{margin-right:5px}.cryptocurrency select{box-sizing:border-box;height:43px;margin:0}.cryptocurrency select[name=country]{grid-column:first/end}.cryptocurrency select[name=region]{grid-column:first/span 2}@media (min-width:479px){.cryptocurrency select[name=region]{grid-column:third/span 2}}.cryptocurrency select[name=cr yptocurrencyType]{grid-column:first/span 2}.cryptocurrency .wallet-column{padding-left:15px;padding-right:15px;width:100%}@media (min-width:767px){.cryptocurrency .wallet-column{width:50%}}.cryptocurrency .wallet-column ul{list-style-type:none;margin-top:20px;padding-inline-start:0;width:100%}.cryptocurrency .wallet-column li{align-items:center;display:flex;margin-bottom:10px;width:100%}.cryptocurrency .wallet-column li:first-child div{padding-top:0}.cryptocurrency .wallet-column li:first-child .wallet-id{border-top:1px solid}.cryptocurrency .wallet-column .currency-name{padding:5px;width:30%}.cryptocurrency .wallet-column .wallet-id{font-family:Source Code Pro,monospace;padding:5px;margin-right:10px;width:60%}.cryptocurrency .button{height:50px}.cryptocurrency .section{display:flex;flex-wrap:wrap;justify-content:center;padding:10px}.cryptocurrency .button-section{justify-content:center;margin-bottom:20px;padding:0;width:100%}.campaign-totals-area{display:flex;flex-wrap:wrap;justify -content:center}.campaign-totals-area .characters{display:flex;justify-content:center;line-height:normal;margin:10px 30px}.campaign-totals-area .characters .character{position:relative}.campaign-totals-area .characters .character .cover{background:#68b030;bottom:0;left:0;position:absolute;visibility:hidden;right:0;top:0;z-index:1}.campaign-totals-area .characters .character.covered .cover{visibility:visible}.campaign-totals-area .characters .character.resolved{color:#68b030}.campaign-totals-area .label{font-size:27px;text-align:center}.donate-options{display:flex;justify-content:center;margin:30px auto 2%;width:92vw}.donate-options a{background-color:#fff;border:2px solid #aeaeae;color:#aeaeae;font-weight:400;display:block;text-align:center;text-decoration:none;text-transform:uppercase}.donate-options a.once-button{border-radius:5px 0 0 5px;margin-right:0;padding-left:15px;padding-right:15px;width:150px}.donate-options a.monthly-button{border-left:0;border-radius:0 5px 5px 0;margin- left:0;padding-left:15px;padding-right:15px;width:160px}.donate-options a.selected,.donate-options a:hover{background-color:#68b030;color:#fff}.payment-other-div{text-align:center;margin-bottom:20px}.perk-intro{display:flex;flex-wrap:wrap;margin:2% 5%;justify-content:center;text-align:center}.perk-intro .perk-title{font-size:22px;margin-bottom:0}.price-change-warning{color:red}#donationForm{margin:0 auto 40px;max-width:1024px}.donation-selection-area{display:flex;flex-direction:row;flex-wrap:wrap;margin:auto 2%;max-width:1024px;justify-content:center}@media (min-width:767px){.donation-selection-area{flex-direction:row}}.donation-selection-area .donate-buttons{align-items:center;align-self:center;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;margin:5px}@media (min-width:767px){.donation-selection-area .donate-buttons{flex-direction:row;margin-right:5px}}.donation-selection-area .donate-buttons a.price-btn{background-color:#59316b;border-radius:5px;color:#fff;d isplay:block;font-size:23px;font-weight:400;margin:5px;padding:20px 0;text-align:center;text-decoration:none;width:120px}@media (min-width:767px){.donation-selection-area .donate-buttons a.price-btn{font-size:29px}}.donation-selection-area .donate-buttons a.price-btn.promo{position:relative}.donation-selection-area .donate-buttons a.price-btn.promo:before{position:absolute;display:block;background-color:#68b030;color:#fff;content:"LIMITED OFFER";width:80px;height:20px;font-size:12px;top:-9px;left:13px;padding:0 8px;border-radius:16px;font-weight:300}.donation-selection-area .donate-buttons a.selected{background-color:#68b030}.donation-selection-area .donate-buttons .other-amount-field{align-items:center;display:flex;flex-direction:column;justify-content:center}.donation-selection-area .donate-buttons .other-amount-field .error{color:red;display:block;text-align:center}.donation-selection-area .donate-buttons .other-amount-field .perk-amt{background-color:#f1f1f3;font-size:23px;font- weight:700;height:42px;margin:5px;min-width:80px;text-transform:capitalize;text-align:center;width:94px}.donation-selection-area .no-perk-area{margin:1% 1% 20px;width:100%;text-align:center}.donation-selection-area label[for=no-perk-checkbox]{font-size:20px;line-height:24px}.donation-selection-area .perks{align-self:center;display:flex;flex-direction:column;width:100%;margin-top:20px;position:relative;z-index:2;justify-content:space-evenly}@media (min-width:767px){.donation-selection-area .perks{border:none;flex-direction:row}}.donation-selection-area .perks .perk{border:1px solid #aeaeae;border-top:0 solid #aeaeae;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.donation-selection-area .perks .perk:first-child{border-top-width:1px}@media (min-width:767px){.donation-selection-area .perks .perk{border:1px solid #aeaeae;flex-direction:column;justify-content:flex-start;margin:0 5px 20px;position:relative;width:30%;top:0;flex-wrap:nowrap}}.donation-selection -area .perks .perk.disabled{border-color:#f8f9fa;color:#aeaeae;font-style:italic}.donation-selection-area .perks .perk.disabled img{opacity:.2}.donation-selection-area .perks .perk.disabled select{color:#aeaeae;font-style:italic}.donation-selection-area .perks .perk.disabled .promo-red-dot{background-color:#aeaeae}.donation-selection-area .perks .perk.disabled .promo-price{color:#aeaeae}.donation-selection-area .perks .perk .slides{position:relative;align-self:center;display:none;height:175px;overflow:hidden;width:100%}@media (min-width:767px){.donation-selection-area .perks .perk .slides{display:block;order:2}}.donation-selection-area .perks .perk img{display:block;margin:0 auto;max-width:50%;height:auto}@media (min-width:767px){.donation-selection-area .perks .perk img{width:85%;max-width:none}}.donation-selection-area .perks .perk .promo-red-dot{position:absolute;background:red;top:45px;right:15px;color:#fff;padding:10px 20px;font-size:28px;line-height:31px;font-weight:700;border -radius:40px}.donation-selection-area .perks .perk .price-tag-group{margin:20px 0 20px 20px;font-size:21px;font-weight:600;width:40%}@media (min-width:767px){.donation-selection-area .perks .perk .price-tag-group{font-size:16px;order:1;width:100%}}.donation-selection-area .perks .perk .promo-strike-through{text-decoration:line-through}.donation-selection-area .perks .perk .promo-price{color:#59316b;font-weight:700}.donation-selection-area .perks .perk .promo-price.large{font-size:22px;font-weight:600}.donation-selection-area .perks .perk .perk-label{font-size:21px;font-weight:700;margin:20px 20px 20px 0;text-align:right;text-transform:uppercase;width:40%;box-sizing:border-box}@media (min-width:767px){.donation-selection-area .perks .perk .perk-label{margin:0;padding:20px 20px 0;font-size:27px;width:100%;order:3;text-align:center}}.donation-selection-area .perks .perk .perk-desc{font-size:16px;font-weight:300;display:none;padding:20px;width:100%;box-sizing:border-box}@media (min-widt h:767px){.donation-selection-area .perks .perk .perk-desc{display:block;margin:0 11px;order:4;padding-left:4px;padding-right:4px;width:auto}}.donation-selection-area .perks .perk .perk-sub-select{display:none;border-color:#aeaeae;margin:10px;width:100%}@media (min-width:767px){.donation-selection-area .perks .perk .perk-sub-select{display:block;order:5;width:92%}}.donation-selection-area .perks .selected{background-color:#68b030;transition:all .5s}.donation-selection-area .perks .selected .perk-desc,.donation-selection-area .perks .selected .perk-sub-select,.donation-selection-area .perks .selected .slides{display:block}@media (min-width:767px){.donation-selection-area .perks .selected{background-color:#fff;box-shadow:8px 8px #68b030;position:relative;top:-4px}}.donation-selection-area .totals-area{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;margin-bottom:4%;position:relative}.donation-selection-area .totals-area,.donation-selection-area .totals-area div,.d onation-selection-area .totals-area input{position:relative;z-index:1}.donation-selection-area .totals-area .fist-bg{position:absolute;top:0;right:0;z-index:0;height:auto}@media (min-width:767px){.donation-selection-area .totals-area{order:4;width:100%}}.donation-selection-area .totals-area .matching-message{color:#59316b;font-size:35px;line-height:normal;padding-top:10px;text-align:center;width:100%}.donation-selection-area .totals-area .matched-amount{color:#59316b;font-size:100px;font-weight:700;line-height:normal;text-align:center;width:100%}.info-area,.payment-method-area{position:relative;z-index:2}.payment-method-area{border-bottom:2px solid #aeaeae;border-top:2px solid #aeaeae;display:flex;flex-direction:column;justify-content:center;margin-top:20px;padding:4% 21px;text-align:center}.payment-method-area .button{width:160px;vertical-align:top}.payment-method-area .button.paypal{padding-top:8px;padding-bottom:5px}.payment-method-area .paypal-png{height:32px}.payment-method-are a .payment-method-question{margin-bottom:3%}.payment-method-area .payment-option{margin-bottom:2%}.info-area{padding-top:4%;margin-left:auto;margin-right:auto;max-width:600px;text-align:center}.info-area #firstName{width:100%}@media (min-width:767px){.info-area #firstName{width:50%}}.info-area #lastName{width:100%}@media (min-width:767px){.info-area #lastName{width:50%}}.info-area #streetAddress{width:100%}@media (min-width:767px){.info-area #streetAddress{width:80%}}.info-area #extendedAddress{width:20%}.info-area #country{width:100%}.info-area #locality{width:38%}@media (min-width:767px){.info-area #locality{width:33%}}.info-area #region{width:45%}@media (min-width:767px){.info-area #region{width:34%}}.info-area #postalCode{width:100%}@media (min-width:767px){.info-area #postalCode{width:33%}}.info-area #email{width:100%}@media (min-width:767px){.info-area #email{width:56%}}.info-area .receipt{display:none}@media (min-width:767px){.info-area .receipt{display:block}}.info-area #mai lingListOptIn{margin:10px 4px 10px 10px}.info-area #cardNumber{width:100%}@media (min-width:767px){.info-area #cardNumber{width:56%}}.info-area img.credit-cards{display:none}@media (min-width:767px){.info-area img.credit-cards{display:block;height:29px;vertical-align:middle}}.info-area #expMonth{width:38%}@media (min-width:767px){.info-area #expMonth{width:33%}}.info-area #expYear{width:38.5%}@media (min-width:767px){.info-area #expYear{width:33%}}.info-area #cvc{width:38%}@media (min-width:767px){.info-area #cvc{width:33%}}.info-area #perk-fields{display:block;margin:10px;text-align:left}.info-area #perk-fields #selected-perk-fields-label{margin-top:10px}.info-area #perk-fields #perk-fit{margin-left:0}.info-area .donate-submit-area{color:#848282;font-size:22px;font-weight:700;padding:20px 0;line-height:26px}.info-area .donate.button{background-color:#68b030;color:#fff;text-transform:uppercase;width:300px}#donate-comments-wrapper{text-align:left}#donate-comments-wrapper textarea{wid th:95%}@media (min-width:767px){#donate-comments-wrapper textarea{width:97%}}.no-close .ui-dialog-titlebar-close{display:none}#loading-dialog .overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#484848;z-index:99}#loading-dialog .dialog-area{display:flex;justify-content:center;position:fixed;top:20vh;width:100%;z-index:100}#loading-dialog .dialog{background-color:#fff;min-height:150px;text-align:center;width:300px}#loading-dialog .message{margin:20px}#loading-dialog .dots{display:flex;margin:20px 20px 0;justify-content:center}#loading-dialog .dot{display:block;width:15px;height:15px;margin-right:.5%;margin-left:.5%;border-radius:20px;background-color:#8cd621;opacity:.3}#loading-dialog .dot:nth-child(0n+1){animation-name:moving-dot;animation-duration:2.5s;animation-iteration-count:infinite;animation-delay:0}#loading-dialog .dot:nth-child(0n+2){animation-name:moving-dot;animation-duration:2.5s;animation-iteration-count:infinite;animation-delay:.5s}#loading-dialog .d ot:nth-child(0n+3){animation-name:moving-dot;animation-duration:2.5s;animation-iteration-count:infinite;animation-delay:1s}#loading-dialog .dot:nth-child(0n+4){animation-name:moving-dot;animation-duration:2.5s;animation-iteration-count:infinite;animation-delay:1.5s}#loading-dialog .dot:nth-child(0n+5){animation-name:moving-dot;animation-duration:2.5s;animation-iteration-count:infinite;animation-delay:2s}@keyframes moving-dot{0%{opacity:.3}20%{opacity:1}to{opacity:.3}}.donor-faq{margin:40px auto;width:90%}@media (min-width:991px){.donor-faq{width:80%}}.donor-faq .questions{list-style-position:inside;padding-left:0}.donor-faq .questions li{color:#59316b;font-size:20px;font-weight:700;line-height:29px}@media (min-width:991px){.donor-faq .questions li{font-size:25px;line-height:34px}}.donor-faq .questions .question{color:#59316b;display:inline;font-size:20px;margin-bottom:10px;margin-top:10px}@media (min-width:991px){.donor-faq .questions .question{font-size:25px}}.donor-faq .questions .answer{color:#484848;font-family:Source Sans Pro,sans-serif;font-size:16px;line-height:20px;font-weight:400}.donor-faq .button-line{width:100%}.button-line{text-align:center}.error-container{display:block;width:50%;min-height:100px;margin-right:auto;margin-bottom:5%;margin-left:auto;padding:2% 5%;border:1px solid #aeaeae;box-shadow:11px 11px 0 0 #e70000}.error-container .title{margin-bottom:3%;color:#e70000;font-size:34px;line-height:40px;text-align:center}#company-profile-container,#hepdata-no-results-message,.donate-match-container{text-align:center;margin-bottom:60px}.donate-match-container .input-and-loader,.donate-match-container datalist,.donate-match-container input{width:300px}.donate-match-container .input-and-loader{margin:auto;position:relative}.donate-match-container .input-and-loader input{height:30px;padding:3px;border-style:solid;text-align:center;font-weight:600}.donate-match-container .input-and-loader .load-container{display:none;height:30px;width:30px;overflow:hi dden;position:absolute;top:4px;right:-6px}.donate-match-container .input-and-loader .load-container .loader,.donate-match-container .input-and-loader .load-container .loader:after,.donate-match-container .input-and-loader .load-container .loader:before{background:#59316b;animation:load1 1s ease-in-out infinite;width:1em;height:4em}.donate-match-container .input-and-loader .load-container .loader{color:#59316b;text-indent:-9999em;margin:10px auto;position:relative;font-size:4px;transform:translateZ(0);animation-delay:-.16s}.donate-match-container .input-and-loader .load-container .loader:after,.donate-match-container .input-and-loader .load-container .loader:before{position:absolute;top:0;content:""}.donate-match-container .input-and-loader .load-container .loader:before{left:-1.5em;animation-delay:-.32s}.donate-match-container .input-and-loader .load-container .loader:after{left:1.5em}@-webkit-keyframes load1{0%,80%,to{box-shadow:0 0;height:4em}40%{box-shadow:0 -2em;height:5em}}@key frames load1{0%,80%,to{box-shadow:0 0;height:4em}40%{box-shadow:0 -2em;height:5em}}.donate-match-container #company-option-list{width:300px;margin:0 auto;max-height:300px;overflow-x:hidden;overflow-y:auto;background-color:#f8f9fa;border:1px solid #7d4698;display:none}.donate-match-container #company-option-list .company-option{word-wrap:break-word;padding:5px 2px}.donate-match-container #company-option-list .company-option:hover{background-color:#68b030;color:#fff}.donate-error-message{color:#aeaeae;padding:0 10%;word-break:break-all;text-align:center}#company-profile-container .profile{display:none;width:75%;margin:auto}#company-profile-container .profile .row{margin:20px 0}#company-profile-container .profile .row .company-property-label{width:30%;text-align:right;font-weight:700}#company-profile-container .profile .row .company-property-value{text-align:left;width:60%}#company-profile-container .profile .row .company-property-value#summary-value{width:auto;font-size:25px;line-heig ht:34px;text-align:center}#company-profile-container .profile .row .company-property-value#summary-value .company{font-weight:700;color:#7d4698}#company-profile-container .profile .row .company-property-value#summary-value .percent{font-weight:700;color:#68b030}#company-profile-container .profile .row .company-property-value#summary-value .match-amount{font-weight:700;color:#59316b}#company-profile-container .profile .row .company-property-value#matchingGiftForm-value{width:auto}#company-profile-container .profile .row .company-property-value#lastUpdated-value{font-weight:700;color:#aeaeae}#company-profile-container .profile .row .company-property-value#matchingConditions-value .ratio{font-weight:700;color:#59316b}#company-profile-container .profile .row .company-property-value#resources-value{width:auto}#company-profile-container ul{margin-top:0}#company-profile-container li{margin-bottom:10px}.privacy-policy{margin-left:auto;margin-right:auto;width:70%;margin-bottom:40px}.subscrib e .fixed-width{max-width:600px;text-align:center}.subscribe .fixed-width #email,.subscribe .fixed-width #firstName{width:100%}@media (min-width:767px){.subscribe .fixed-width #firstName{width:50%}}.subscribe .fixed-width #lastName{width:100%}@media (min-width:767px){.subscribe .fixed-width #lastName{width:50%}}.subscribe .fixed-width .join{width:200px}.subscribe .fixed-width .messages{color:red;text-align:left}.header-content .thank-you{width:80%}.header-content .thank-you h1{text-align:center;text-transform:none}.header-content .thank-you h5{text-align:center}.header-content .thank-you img{width:50px}.header-content .thank-you p{color:#fff}.header-content .thank-you .share-icons{margin:20px 10px 0;text-align:center}@media (min-width:767px){.header-content .thank-you{margin-top:-120px;margin-bottom:30px}}.content{margin-top:20px}.content .thank-you{margin-bottom:40px}.content .thank-you h4{text-align:center}.content .thank-you .volunteer-desc{margin-left:auto;margin-right:auto;max-w idth:490px;text-align:center}.content .thank-you .volunteer-desc .skills-text{margin-bottom:20px} \ No newline at end of file diff --git a/sass/components/_cryptocurrency.scss b/sass/components/_cryptocurrency.scss index 41014d58..6ac56143 100644 --- a/sass/components/_cryptocurrency.scss +++ b/sass/components/_cryptocurrency.scss @@ -113,6 +113,13 @@ grid-column: third / span 2; } } + + &[name=region] { + grid-column: first / span 2; + @include breakpoint($screen-s) { + grid-column: third / span 2; + } + } }

label[for=estimatedDonationDate] { diff --git a/sass/components/_thank-you.scss b/sass/components/_thank-you.scss index 70acb626..e4da1f12 100644 --- a/sass/components/_thank-you.scss +++ b/sass/components/_thank-you.scss @@ -15,6 +15,10 @@ width: 50px; }

+ p { + color: $color-white; + } + .share-icons { margin: 20px 10px 0px 10px; text-align: center; diff --git a/src/CryptocurrencyController.php b/src/CryptocurrencyController.php index 7916f550..8ac76878 100644 --- a/src/CryptocurrencyController.php +++ b/src/CryptocurrencyController.php @@ -52,7 +52,8 @@ class CryptocurrencyController extends BaseController { public function index($request, $response, $args) { $vars = array( 'bodyClasses' => ['cryptocurrency', 'title-header-image'], - 'wallets' => json_encode(static::$WALLETS), + 'wallets' => static::$WALLETS, + 'wallets_json' => json_encode(static::$WALLETS), ); return $this->renderer->render($response, 'cryptocurrency.twig', $vars); } diff --git a/templates/cryptocurrency-no-js.twig b/templates/cryptocurrency-no-js.twig new file mode 100644 index 00000000..7923df6c --- /dev/null +++ b/templates/cryptocurrency-no-js.twig @@ -0,0 +1,303 @@ +<form action="/cryptocurrency/donate" method="POST"> + <div class="section"> + <div class="form-column"> + <h4>Your Info</h4> + <div class="form-fields"> + <input class="field" name="firstName" placeholder="First Name" maxlength="256" type="text"> + <input class="field" name="lastName" placeholder="Last Name" maxlength="256" type="text"> + <input class="field" name="streetAddress" placeholder="Street Address" maxlength="256" type="text"> + <input class="field" name="extendedAddress" placeholder="Apt." maxlength="256" type="text"> + <select name="country" class="field"> + <option value="AF">Afghanistan</option> + <option value="AX">Åland Islands</option> + <option value="AL">Albania</option> + <option value="DZ">Algeria</option> + <option value="AS">American Samoa</option> + <option value="AD">Andorra</option> + <option value="AO">Angola</option> + <option value="AI">Anguilla</option> + <option value="AQ">Antarctica</option> + <option value="AG">Antigua and Barbuda</option> + <option value="AR">Argentina</option> + <option value="AM">Armenia</option> + <option value="AW">Aruba</option> + <option value="AU">Australia</option> + <option value="AT">Austria</option> + <option value="AZ">Azerbaijan</option> + <option value="BS">Bahamas</option> + <option value="BH">Bahrain</option> + <option value="BD">Bangladesh</option> + <option value="BB">Barbados</option> + <option value="BY">Belarus</option> + <option value="BE">Belgium</option> + <option value="BZ">Belize</option> + <option value="BJ">Benin</option> + <option value="BM">Bermuda</option> + <option value="BT">Bhutan</option> + <option value="BO">Bolivia</option> + <option value="BQ">Bonaire, Saint Eustatius and Saba</option> + <option value="BA">Bosnia and Herzegovina</option> + <option value="BW">Botswana</option> + <option value="BV">Bouvet Island</option> + <option value="BR">Brazil</option> + <option value="IO">British Indian Ocean Territory</option> + <option value="BN">Brunei Darussalam</option> + <option value="BG">Bulgaria</option> + <option value="BF">Burkina Faso</option> + <option value="BI">Burundi</option> + <option value="KH">Cambodia</option> + <option value="CM">Cameroon</option> + <option value="CA">Canada</option> + <option value="CV">Cape Verde</option> + <option value="KY">Cayman Islands</option> + <option value="CF">Central African Republic</option> + <option value="TD">Chad</option> + <option value="CL">Chile</option> + <option value="CN">China</option> + <option value="CX">Christmas Island</option> + <option value="CC">Cocos (Keeling) Islands</option> + <option value="CO">Colombia</option> + <option value="KM">Comoros</option> + <option value="CG">Congo, Republic of the</option> + <option value="CD">Congo, The Democratic Republic of the</option> + <option value="CK">Cook Islands</option> + <option value="CR">Costa Rica</option> + <option value="CI">Côte d’Ivoire</option> + <option value="HR">Croatia</option> + <option value="CU">Cuba</option> + <option value="CW">Curaçao</option> + <option value="CY">Cyprus</option> + <option value="CZ">Czech Republic</option> + <option value="DK">Denmark</option> + <option value="DJ">Djibouti</option> + <option value="DM">Dominica</option> + <option value="DO">Dominican Republic</option> + <option value="EC">Ecuador</option> + <option value="EG">Egypt</option> + <option value="SV">El Salvador</option> + <option value="GQ">Equatorial Guinea</option> + <option value="ER">Eritrea</option> + <option value="EE">Estonia</option> + <option value="ET">Ethiopia</option> + <option value="FK">Falkland Islands (Malvinas)</option> + <option value="FO">Faroe Islands</option> + <option value="FJ">Fiji</option> + <option value="FI">Finland</option> + <option value="FR">France</option> + <option value="GF">French Guiana</option> + <option value="PF">French Polynesia</option> + <option value="TF">French Southern Territories</option> + <option value="GA">Gabon</option> + <option value="GM">Gambia</option> + <option value="GE">Georgia</option> + <option value="DE">Germany</option> + <option value="GH">Ghana</option> + <option value="GI">Gibraltar</option> + <option value="GR">Greece</option> + <option value="GL">Greenland</option> + <option value="GD">Grenada</option> + <option value="GP">Guadeloupe</option> + <option value="GU">Guam</option> + <option value="GT">Guatemala</option> + <option value="GG">Guernsey</option> + <option value="GN">Guinea</option> + <option value="GW">Guinea-Bissau</option> + <option value="GY">Guyana</option> + <option value="HT">Haiti</option> + <option value="HM">Heard Island and McDonald Islands</option> + <option value="VA">Holy See (Vatican City State)</option> + <option value="HN">Honduras</option> + <option value="HK">Hong Kong</option> + <option value="HU">Hungary</option> + <option value="IS">Iceland</option> + <option value="IN">India</option> + <option value="ID">Indonesia</option> + <option value="IR">Iran, Islamic Republic Of</option> + <option value="IQ">Iraq</option> + <option value="IE">Ireland</option> + <option value="IM">Isle of Man</option> + <option value="IL">Israel</option> + <option value="IT">Italy</option> + <option value="JM">Jamaica</option> + <option value="JP">Japan</option> + <option value="JE">Jersey</option> + <option value="JO">Jordan</option> + <option value="KZ">Kazakhstan</option> + <option value="KE">Kenya</option> + <option value="KI">Kiribati</option> + <option value="KP">Korea, Democratic People's Republic of</option> + <option value="KR">Korea, Republic of</option> + <option value="XK">Kosovo</option> + <option value="KW">Kuwait</option> + <option value="KG">Kyrgyzstan</option> + <option value="LA">Lao People's Democratic Republic</option> + <option value="LV">Latvia</option> + <option value="LB">Lebanon</option> + <option value="LS">Lesotho</option> + <option value="LR">Liberia</option> + <option value="LY">Libya</option> + <option value="LI">Liechtenstein</option> + <option value="LT">Lithuania</option> + <option value="LU">Luxembourg</option> + <option value="MO">Macao</option> + <option value="MK">Macedonia, Republic Of</option> + <option value="MG">Madagascar</option> + <option value="MW">Malawi</option> + <option value="MY">Malaysia</option> + <option value="MV">Maldives</option> + <option value="ML">Mali</option> + <option value="MT">Malta</option> + <option value="MH">Marshall Islands</option> + <option value="MQ">Martinique</option> + <option value="MR">Mauritania</option> + <option value="MU">Mauritius</option> + <option value="YT">Mayotte</option> + <option value="MX">Mexico</option> + <option value="FM">Micronesia, Federated States of</option> + <option value="MD">Moldova</option> + <option value="MC">Monaco</option> + <option value="MN">Mongolia</option> + <option value="ME">Montenegro</option> + <option value="MS">Montserrat</option> + <option value="MA">Morocco</option> + <option value="MZ">Mozambique</option> + <option value="MM">Myanmar</option> + <option value="NA">Namibia</option> + <option value="NR">Nauru</option> + <option value="NP">Nepal</option> + <option value="NL">Netherlands</option> + <option value="NC">New Caledonia</option> + <option value="NZ">New Zealand</option> + <option value="NI">Nicaragua</option> + <option value="NE">Niger</option> + <option value="NG">Nigeria</option> + <option value="NU">Niue</option> + <option value="NF">Norfolk Island</option> + <option value="MP">Northern Mariana Islands</option> + <option value="NO">Norway</option> + <option value="OM">Oman</option> + <option value="PK">Pakistan</option> + <option value="PW">Palau</option> + <option value="PS">Palestine, State of</option> + <option value="PA">Panama</option> + <option value="PG">Papua New Guinea</option> + <option value="PY">Paraguay</option> + <option value="PE">Peru</option> + <option value="PH">Philippines</option> + <option value="PN">Pitcairn</option> + <option value="PL">Poland</option> + <option value="PT">Portugal</option> + <option value="PR">Puerto Rico</option> + <option value="QA">Qatar</option> + <option value="RE">Reunion</option> + <option value="RO">Romania</option> + <option value="RU">Russian Federation</option> + <option value="RW">Rwanda</option> + <option value="BL">Saint Barthélemy</option> + <option value="SH">Saint Helena</option> + <option value="KN">Saint Kitts and Nevis</option> + <option value="LC">Saint Lucia</option> + <option value="MF">Saint Martin (French part)</option> + <option value="PM">Saint Pierre and Miquelon</option> + <option value="VC">Saint Vincent and the Grenadines</option> + <option value="WS">Samoa</option> + <option value="SM">San Marino</option> + <option value="ST">Sao Tome and Principe</option> + <option value="SA">Saudi Arabia</option> + <option value="SN">Senegal</option> + <option value="RS">Serbia</option> + <option value="CS">Serbia and Montenegro</option> + <option value="SC">Seychelles</option> + <option value="SL">Sierra Leone</option> + <option value="SG">Singapore</option> + <option value="SX">Sint Maarten (Dutch Part)</option> + <option value="SK">Slovakia</option> + <option value="SI">Slovenia</option> + <option value="SB">Solomon Islands</option> + <option value="SO">Somalia</option> + <option value="ZA">South Africa</option> + <option value="GS">South Georgia and the South Sandwich Islands</option> + <option value="SS">South Sudan</option> + <option value="ES">Spain</option> + <option value="LK">Sri Lanka</option> + <option value="SD">Sudan</option> + <option value="SR">Suriname</option> + <option value="SJ">Svalbard and Jan Mayen</option> + <option value="SZ">Swaziland</option> + <option value="SE">Sweden</option> + <option value="CH">Switzerland</option> + <option value="SY">Syrian Arab Republic</option> + <option value="TW">Taiwan</option> + <option value="TJ">Tajikistan</option> + <option value="TZ">Tanzania, United Republic of</option> + <option value="TH">Thailand</option> + <option value="TL">Timor-Leste</option> + <option value="TG">Togo</option> + <option value="TK">Tokelau</option> + <option value="TO">Tonga</option> + <option value="TT">Trinidad and Tobago</option> + <option value="TN">Tunisia</option> + <option value="TR">Turkey</option> + <option value="TM">Turkmenistan</option> + <option value="TC">Turks and Caicos Islands</option> + <option value="TV">Tuvalu</option> + <option value="UG">Uganda</option> + <option value="UA">Ukraine</option> + <option value="AE">United Arab Emirates</option> + <option value="GB">United Kingdom</option> + <option value="US">United States</option> + <option value="UM">United States Minor Outlying Islands</option> + <option value="UY">Uruguay</option> + <option value="UZ">Uzbekistan</option> + <option value="VU">Vanuatu</option> + <option value="VE">Venezuela</option> + <option value="VN">Viet Nam</option> + <option value="VG">Virgin Islands, British</option> + <option value="VI">Virgin Islands, U.S.</option> + <option value="WF">Wallis and Futuna</option> + <option value="EH">Western Sahara</option> + <option value="YE">Yemen</option> + <option value="ZM">Zambia</option> + <option value="ZW">Zimbabwe</option> + </select> + <input class="field" name="locality" placeholder="City" maxlength="256" type="text"> + <input class="field" name="region" placeholder="State" maxlength="256" type="text"> + <input class="field" name="postalCode" placeholder="Zip" maxlength="256" type="text"> + <div class="mailing-list-opt-in checkbox-row"> + <input name="mailingListOptIn" id="mailingListOptIn" type="checkbox"> + <label class="light" for="mailingListOptIn">Start sending me email updates about the Tor Project!</label> + </div> + <input class="field" name="email" placeholder="Email" maxlength="256" type="text" required=""> + <label for="estimatedDonationDate">Estimated Donation Date:</label> + <input name="estimatedDonationDate" id="estimatedDonationDate" placeholder="Estimated Donation Date" type="date" required=""> + <select class="field required" name="cryptocurrencyType" required=""> + <option value="">Choose a Currency</option> + <option value="REP">Augur (REP)</option> + <option value="XBT">Bitcoin (XBT)</option> + <option value="BCH">Bitcoin Cash (BCH)</option> + <option value="DASH">Dash (DASH)</option> + <option value="ETH">Ether (ETH)</option> + <option value="LTC">Litecoin (LTC)</option> + <option value="XMR">Monero (XMR)</option> + <option value="XLM">Stellar Lumen (XLM)</option> + <option value="ZEC">Zcash (ZEC)</option> + </select> + <input class="field" name="currencyAmount" placeholder="Currency Amount" maxlength="256" type="text" required=""> + </div> + </div> + <div class="wallet-column"> + <h4>Wallet Addresses</h4> + <ul> + {% for wallet in wallets %} + <li> + <div class="currency-name">{{ wallet.name }} ({{ wallet.symbol }})</div> + <input class="wallet-id" type="text" readonly="" value="{{ wallet.id }}"> + </li> + {% endfor %} + </ul> + </div> + </div> + <div class="section button-section"> + <input class="donate button" type="submit" value="Donate"> + </div> +</form> diff --git a/templates/cryptocurrency.twig b/templates/cryptocurrency.twig index 1e150db2..cfd0967d 100644 --- a/templates/cryptocurrency.twig +++ b/templates/cryptocurrency.twig @@ -30,30 +30,33 @@ <div class="intro-text"> <div class="preamble"> <p> - Thanks for your interest in donating cryptocurrency to the Tor Project! + {% trans %}Thanks for your interest in donating cryptocurrency to the Tor Project!{% endtrans %} </p> </div> <p> - Please fill out the form below and then send your coins to the appropriate wallet listed below. Filling out the form is not necessary, but doing so will allow us to quickly be notified of the donation, send you an acknowledgement, and know your communication preferences. + {% trans %}Please fill out the form below and then send your coins to the appropriate wallet listed below.{% endtrans %} {% trans %}Filling out the form is not necessary, but doing so will allow us to quickly be notified of the donation, send you an acknowledgement, and know your communication preferences.{% endtrans %} </p> <p> - We currently accept donations of the cryptocurrencies listed below. Our wallet addresses are listed below and will also be displayed after you complete the form. Please make sure to copy the wallet addresses exactly when making your donation, as we are unable to recover funds sent to the wrong wallet. + {% trans %}We currently accept donations of the cryptocurrencies listed below.{% endtrans %} {% trans %}Our wallet addresses are listed below and will also be displayed after you complete the form.{% endtrans %} {% trans %}Please make sure to copy the wallet addresses exactly when making your donation, as we are unable to recover funds sent to the wrong wallet.{% endtrans %} </p> <p> - If you have any questions, or would like to donate a cryptocurrency not listed above, please email us at giving@torproject.org. + {% trans %}If you have any questions, or would like to donate a cryptocurrency not listed above, please email us at giving@torproject.org.{% endtrans %} </p> <p> - Once we have received your donation, we will send you a receipt if you chose to provide us with your contact details. + {% trans %}Once we have received your donation, we will send you a receipt if you chose to provide us with your contact details.{% endtrans %} </p> </div> </div> + <noscript> + {% include 'cryptocurrency-no-js.twig' %} + </noscript> <div id="cryptocurrency-form" class="container"></div> <script> window.reactComponents = [{ id: 'cryptocurrency-form', name: 'CryptocurrencyForm', props: { - wallets: {{ wallets | raw }}, + wallets: {{ wallets_json | raw }}, }, }]; </script>