File indexing completed on 2024-12-29 05:24:50

 <?php
 /**
  *  ocs-webserver
  *
  *  Copyright 2016 by pling GmbH.
  *
  *    This file is part of ocs-webserver.
  *
  *    This program is free software: you can redistribute it and/or modify
  *    it under the terms of the GNU Affero General Public License as
  *    published by the Free Software Foundation, either version 3 of the
  *    License, or (at your option) any later version.
  *
  *    This program is distributed in the hope that it will be useful,
  *    but WITHOUT ANY WARRANTY; without even the implied warranty of
  *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  *    GNU Affero General Public License for more details.
  *
  *    You should have received a copy of the GNU Affero General Public License
  *    along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  * Created: 31.05.2017
  */
 
 ?>
 <style>
 
 input[type="radio"] {
     /*display: none;*/
     vertical-align: top;
 }
 /* Support box**/
 
 .donation-widget.tabs {
     position: relative;
     max-width: 425px;
     min-width: 320px;
     margin-bottom: 2.5rem !important;
     margin-top: 25px;
     border: 1px solid #e1e1e1;
 }
 
 form, p, blockquote, th, td {
     margin: 0;
     padding: 0;
 }
 
 .tabs {
     margin-bottom: 0 !important;
     margin-left: 0;
 }
 
 .tabs:before, .tabs:after {
     content: " ";
     display: table;
 }
 
 .donation-widget.tabs .tabs-footer {
     background-color: #fff;
     padding: 0px 0 18px;
     text-align: center;
 }
 
 .donation-widget.tabs .tabs-footer .dw-btn.basic-color-background {
     background-color: #092d63;
     box-shadow: 0 2px 0 0 #061f45;
 }
 
 .donation-widget.tabs .tabs-footer .dw-btn, .donation-widget.tabs .ty-content .dw-btn {
     width: 75.8%;
     height: 54px;
     margin-bottom: 20px;
     text-transform: none;
     background-color: transparent;
     border-radius: 4px;
     box-shadow: 0 2px 0 0 transparent;
     color: #fff;
     line-height: 27px;
 }
 
 .mdl-button {
     background: 0 0;
     border: none;
     border-radius: 2px;
     color: #000;
     position: relative;
     height: 36px;
     margin: 0;
     min-width: 64px;
     padding: 0 16px;
     display: inline-block;
     font-family: "Roboto","Helvetica","Arial",sans-serif;
     font-size: 14px;
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 0;
     overflow: hidden;
     will-change: box-shadow;
     transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
     outline: none;
     cursor: pointer;
     text-decoration: none;
     text-align: center;
     line-height: 36px;
     vertical-align: middle;
 }
 
 .tabs-header.basic-color-background {
     background-color: #092d63;
 }
 
 .tabs-header {
     position: relative;
     height: 66px;
     padding: 8px;
     background-color: #41a2d8;
 }
 
 .tabs-header .header-content .display-amount {
     color: #fff;
     line-height: 15px;
 }
 
 .tabs-content:before, .tabs-content:after {
     content: " ";
     display: table;
 }
 
 .tabs-header .header-content {
     position: relative;
     height: 20px;
     top: calc(50% - 8px);
     padding: 0 15.4% 0 15.4%;
 }
 
 .tabs-header .header-content .display-amount span {
     font-size: 18.2px;
 }
 
 .donation-widget.tabs .tabs-content {
     position: relative;
     width: 100%;
     padding: 0;
     margin: 0;
 }
 
 .donation-widget.tabs .tabs-content .content.step-1 {
     /*padding: 0 10%;*/
 }
 
 .tabs-content>.content.active {
     display: block;
     float: none;
 }
 
 .tabs-content>.content {
     display: none;
     float: left;
     padding: 1.5rem 0;
     width: 100%;
 }
 
 .tabs-content {
     background-color: white;
 }
 
 ul.suggested-amounts.less-margin {
     margin-bottom: 28px !important;
 }
 
 ul.suggested-amounts li.amount-item:hover .item-text .amount, ul.suggested-amounts li.amount-item:hover .item-text #custom_amount, ul.suggested-amounts li.amount-item .mdl-radio.is-checked .item-text .amount, ul.suggested-amounts li.amount-item .mdl-radio.is-checked .item-text #custom_amount {
     opacity: .95;
 }
 ul.suggested-amounts li.amount-item .item-text {
     display: inline-block;
     position: relative;
     margin-left: 23px;
 }
 ul.suggested-amounts li.amount-item .item-text .unit-wrapper {
     position: absolute;
     display: inline-block;
     left: 0;
 }
 ul.suggested-amounts li.amount-item .item-text .unit, ul.suggested-amounts li.amount-item .item-text .desc {
     color: #231f20;
     opacity: .6;
     font-size: 13px;
 }
 
 ul.suggested-amounts li.amount-item .item-text .unit {
     position: absolute;
     top: 0;
     right: 3px;
     line-height: 10px;
 }
 ul.suggested-amounts li.amount-item .item-text .amount, ul.suggested-amounts li.amount-item .item-text #custom_amount {
     /*font-family: SourceSansPro-Semibold;*/
     color: #000;
     font-size: 24px;
     opacity: .65;
 }
 ul.suggested-amounts {
     position: relative;
     margin: 27px 16px 48px 16px;
     list-style-type: none;
 }
 
 .tabs-header {
     position: relative;
     height: 66px;
     padding: 8px;
     background-color: #41a2d8;
 }
 
 ul.suggested-amounts li.amount-item:last-child {
     border-bottom: none;
     padding-bottom: 0;
 }
 
 .donation-widget ul.suggested-amounts li.amount-item .mdl-radio {
     width: 100%;
 }
 ul.suggested-amounts li.amount-item .mdl-radio {
     line-height: 15px;
 }
 .donation-widget .donation-form .header-content div, .donation-widget .donation-form .header-content input, .donation-widget .donation-form .header-content label, .donation-widget .donation-form .header-content a, .donation-widget .donation-form .header-content span, .donation-widget .donation-form .suggested-amounts div, .donation-widget .donation-form .suggested-amounts input, .donation-widget .donation-form .suggested-amounts label, .donation-widget .donation-form .suggested-amounts a, .donation-widget .donation-form .suggested-amounts span, .donation-widget .donation-form .mdl-select-field div, .donation-widget .donation-form .mdl-select-field input, .donation-widget .donation-form .mdl-select-field label, .donation-widget .donation-form .mdl-select-field a, .donation-widget .donation-form .mdl-select-field span, .donation-widget .donation-form .mdl-button div, .donation-widget .donation-form .mdl-button input, .donation-widget .donation-form .mdl-button label, .donation-widget .donation-form .mdl-button a, .donation-widget .donation-form .mdl-button span, .donation-widget #thank_you .header-content div, .donation-widget #thank_you .header-content input, .donation-widget #thank_you .header-content label, .donation-widget #thank_you .header-content a, .donation-widget #thank_you .header-content span, .donation-widget #thank_you .suggested-amounts div, .donation-widget #thank_you .suggested-amounts input, .donation-widget #thank_you .suggested-amounts label, .donation-widget #thank_you .suggested-amounts a, .donation-widget #thank_you .suggested-amounts span, .donation-widget #thank_you .mdl-select-field div, .donation-widget #thank_you .mdl-select-field input, .donation-widget #thank_you .mdl-select-field label, .donation-widget #thank_you .mdl-select-field a, .donation-widget #thank_you .mdl-select-field span, .donation-widget #thank_you .mdl-button div, .donation-widget #thank_you .mdl-button input, .donation-widget #thank_you .mdl-button label, .donation-widget #thank_you .mdl-button a, .donation-widget #thank_you .mdl-button span {
     /*font-family: "SourceSansPro-Regular", "Roboto","Helvetica","Arial";*/
     font-style: normal;
     /*font-size: 12px;*/
     letter-spacing: 0;
 }
 label {
     font-size: 1.4rem;
     color: #4d4d4d;
     cursor: pointer;
     display: block;
     font-weight: normal;
     line-height: 1.5;
     margin-bottom: 0;
 }
 
 ul.suggested-amounts li.amount-item .item-text {
     display: inline-block;
     position: relative;
     margin-left: 23px;
 }
 
 ul.suggested-amounts li.amount-item .item-text .unit-wrapper {
     position: absolute;
     display: inline-block;
     left: 0;
 }
 
 ul.suggested-amounts li.amount-item .item-text #custom_amount {
     margin-top: -8px;
 }
 
 ul.suggested-amounts li.amount-item .item-text .amount input, ul.suggested-amounts li.amount-item .item-text #custom_amount input {
     width: 50%;
     margin: 0;
     border: 0;
     border-bottom: 1px solid #d0d0d0;
     padding: 0;
     box-shadow: none;
     background-color: white;
 }
 
 ul.suggested-amounts li.amount-item:last-child .item-text .desc {
     margin-top: 4px;
 }
 
 ul.suggested-amounts li.amount-item .item-text .desc {
     font-size: 14px;
 }
 
 ul.suggested-amounts li.amount-item .item-text .unit, ul.suggested-amounts li.amount-item .item-text .desc {
     color: #231f20;
     opacity: .6;
     font-size: 13px;
 }
 
 ul.suggested-amounts li.amount-item .item-text .desc {
     display: block;
     margin-top: 3px;
 }
 
 .mdl-radio__outer-circle {
     display: none;
     position: absolute;
     top: 4px;
     left: 0;
     display: inline-block;
     box-sizing: border-box;
     width: 16px;
     height: 16px;
     margin: 0;
     cursor: pointer;
     border: 2px solid rgba(0,0,0,.54);
     border-radius: 50%;
     z-index: 2;
 }
 
 .mdl-radio__inner-circle {
     display: none;
     position: absolute;
     z-index: 1;
     margin: 0;
     top: 8px;
     left: 4px;
     box-sizing: border-box;
     width: 8px;
     height: 8px;
     cursor: pointer;
     transition-duration: .28s;
     transition-timing-function: cubic-bezier(.4,0,.2,1);
     transition-property: transform;
     transition-property: transform,-webkit-transform;
     -webkit-transform: scale3d(0,0,0);
     transform: scale3d(0,0,0);
     border-radius: 50%;
     background: rgb(63,81,181);
 }
 
 ul.suggested-amounts li.amount-item .mdl-radio .mdl-radio__outer-circle {
     display: none;
     top: 0;
     width: 13px;
     height: 13px;
     border-color: #b2b1b1;
     transition-duration: .14s;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 ul.suggested-amounts li.amount-item {
     border-bottom: dotted thin #E7E7E7;
     padding: 16px 0 7px;
 }
 
 .donation-widget ul.suggested-amounts li.amount-item .mdl-radio {
     width: 100%;
 }
 
 ul.suggested-amounts li.amount-item .mdl-radio {
     line-height: 15px;
 }
 
 .mdl-btn-group {
     width: 180px;
     margin: 0 auto;
 }
 
 
 .mdl-btn-group.active-basic-color-background div.active {
     background-color: #092d63;
     color: #ffffff;
 }
 
 .mdl-btn-group.active-basic-color-background div {
     border-color: #092d63;
     color: #092d63;
 }
 
 .mdl-btn-group div.active {
     background-color: #41a2d8;
     color: #fff;
 }
 
 .mdl-btn-group div:first-child {
     border-radius: 3px 0 0 3px;
 }
 
 .mdl-btn-group div {
     display: inline-block;
     float: left;
     line-height: 40px;
     font-size: 12px;
     width: 90px;
     border: 1px solid #41a2d8;
     border-right: 0;
     vertical-align: middle;
     text-align: center;
     color: #41a2d8;
     cursor: pointer;
 }
 
 .mdl-btn-group.active-basic-color-background div:last-child {
     border-color: #092d63;
 }
 
 .mdl-btn-group.active-basic-color-background div {
     border-color: #092d63;
     color: #092d63;
 }
 
 .mdl-btn-group div:last-child {
     border-radius: 0 3px 3px 0;
     border-right: 1px solid #41a2d8;
 }
 
 ul.suggested-amounts li.amount-item .mdl-radio .mdl-radio__outer-circle {
     display: none;
     top: 0;
     width: 13px;
     height: 13px;
     border-color: #b2b1b1;
     transition-duration: .14s;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .mdl-radio.is-upgraded {
     padding-left: 24px;
 }
 
 .mdl-radio, .mdl-radio__button {
     line-height: 24px;
 }
 
 .mdl-radio {
     position: relative;
     font-size: 16px;
     display: inline-block;
     box-sizing: border-box;
     margin: 0;
     padding-left: 0;
 }
 
 .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu, .mdl-icon-toggle, .mdl-item, .mdl-radio, .mdl-slider, .mdl-switch, .mdl-tabs__tab, a {
     -webkit-tap-highlight-color: transparent;
     -webkit-tap-highlight-color: rgba(255,255,255,0);
 }
 </style>
 
 <!--<link href="/theme/flatui/css/support_box.css" rel="stylesheet">-->
 
 <main id="explore-content">
     <section class="wrapper" id="products-wrapper">
         <div class="container-fluid">
             <div class="row">
                 <div class="sidebar-left col-md-2"></div>
                 <div class="content col-md-8">
                     <h2>Become a Supporter</h2>
                     <p>Help us support the creatives on our platform to keep it growing.
                     </p>
                     <p>Your donation supports all creators via a one time donation that lasts a full year.</p>
                     
                     <div class="tabs donation-widget ">
                     
                         <form class="donation-form" id="new_donation" action="/support-old/pay" accept-charset="UTF-8" data-remote="true" method="post">
                       
                                 <input type="hidden" id="currency-symbol" value="$">
                                 <input type="hidden" name="provider" value="paypal" id="provider">
 
                                 <div class="tabs-header non-selectable basic-color-background">
                                   <div class="header-content">
                                     <span class="display-amount">
                                       <span class="step-1 active">Choose amount for a year</span>
                                     </span>
                                   </div>
                                 </div>
 
                                 <div class="tabs-content">
                                   <div class="content step-1 active" id="donor-form-step-1"> 
                                     <ul class="suggested-amounts less-margin">
                                         <li class="amount-item">
                                           <label class="mdl-radio mdl-js-radio is-upgraded" for="sam-15" data-upgraded=",MaterialRadio">
                                               <input class="suggested-amount mdl-radio__button" checked id="sam-15" type="radio" value="15" name="amount_predefined">
                                             <span class="mdl-radio__label">
                                               <span class="item-text">
                                                 <span class="unit-wrapper">
                                                   <span class="unit">$</span>
                                                 </span>
                                                 <span class="amount">15</span>
                                               </span>
                                             </span>
                                           <span class="mdl-radio__outer-circle"></span><span class="mdl-radio__inner-circle"></span></label>
                                         </li>
                                         <li class="amount-item">
                                           <label class="mdl-radio mdl-js-radio is-upgraded" for="sam-25" data-upgraded=",MaterialRadio">
                                               <input class="suggested-amount mdl-radio__button" id="sam-25" type="radio" value="25" name="amount_predefined">
                                             <span class="mdl-radio__label">
                                               <span class="item-text">
                                                 <span class="unit-wrapper">
                                                   <span class="unit">$</span>
                                                 </span>
                                                 <span class="amount">25</span>
                                               </span>
                                             </span>
                                           <span class="mdl-radio__outer-circle"></span><span class="mdl-radio__inner-circle"></span></label>
                                         </li>
                                         <li class="amount-item">
                                           <label class="mdl-radio mdl-js-radio is-upgraded" for="sam-50" data-upgraded=",MaterialRadio">
                                               <input class="suggested-amount mdl-radio__button" id="sam-50" type="radio" value="50 " name="amount_predefined">
                                             <span class="mdl-radio__label">
                                               <span class="item-text">
                                                 <span class="unit-wrapper">
                                                   <span class="unit">$</span>
                                                 </span>
                                                 <span class="amount">50 </span>
                                               </span>
                                             </span>
                                           <span class="mdl-radio__outer-circle"></span><span class="mdl-radio__inner-circle"></span></label>
                                         </li>
                                         <li class="amount-item">
                                           <label class="mdl-radio mdl-js-radio is-upgraded" for="sam-100" data-upgraded=",MaterialRadio">
                                               <input class="suggested-amount mdl-radio__button" id="sam-100" type="radio" value="100 " name="amount_predefined">
                                             <span class="mdl-radio__label">
                                               <span class="item-text">
                                                 <span class="unit-wrapper">
                                                   <span class="unit">$</span>
                                                 </span>
                                                 <span class="amount">100 </span>
                                               </span>
                                             </span>
                                           <span class="mdl-radio__outer-circle"></span><span class="mdl-radio__inner-circle"></span></label>
                                         </li>
                                         <li class="amount-item">
                                           <label class="mdl-radio mdl-js-radio is-upgraded" for="custom_amount_item" data-upgraded=",MaterialRadio">
                                             <input class="suggested-amount mdl-radio__button" id="custom_amount_item" type="radio" value="0" name="amount_predefined">
                                             <span class="mdl-radio__label">
                                               <span class="item-text">
                                                 <span class="unit-wrapper">
                                                   <span class="unit">$</span>
                                                 </span>
                                                 <span class="amount">
                                                   <input id="custom_amount" min="16" step="any" inputmode="numeric" type="number" name="amount_handish">
                                                 </span>
                                                 <span class="desc">Enter a free amount > $15</span>
                                               </span>
                                             </span>
                                           <span class="mdl-radio__outer-circle"></span><span class="mdl-radio__inner-circle"></span></label>
                                         </li>
                                     </ul>
                                     <!--
                                     <div class="mdl-grid ">
                                         <div class="mdl-cell mdl-cell--12-col">
                                             <div class="mdl-btn-group active-basic-color-background">
                                                 <div value="" style="" class="active">One time</div>
                                                 <div value="true" style="">Yearly</div>
                                             </div>
 
                                             <input type="hidden" name="recurring" id="recurring" value="">
                                         </div>
                                     </div>            
                                     -->
                                   </div> 
                                   
                                 <div class="tabs-footer">
                                     <?php if (Zend_Auth::getInstance()->hasIdentity()) {?>
                                   <button type="submit" class="dw-btn mdl-button mdl-js-button mdl-js-ripple-effect step-3 basic-color-background" data-upgraded=",MaterialButton,MaterialRipple">
                                     <span class="donate" id="linkButton">
                                       <span class="amount">
                                         <span isolate="">Donate via PayPal</span>
                                       </span>
                                     </span>
                                     </button>
                                      <?php }else{
                                         echo "Please login to donate";
                                     }?>
                                 </div>
                            
                           </form>
                     </div>
                     
                     
                 </div>
                 <div class="sidebar-right col-md-2"></div>
             </div>
             <section class="explore-footer text-center">
                 
             </section>
         </div>
     </section>
 </main>
 
 <script>
     $(document).ready(function(){
         $("#custom_amount").click(function(){
             $('.mdl-radio__button').removeAttr('checked');
             $('#custom_amount_item').prop("checked", true);            
         });
 
         $('#plingListOpen').click(function(){
             $('#plingList').trigger( "click" );       
         });
 
     });
 </script>