MusareMeteor/app/client/templates/donate.html

<template name="donate">
    {{> header}}
    <div class="container">
        <div class="row">
            <h1 class="center-align
            ">Why to donate?</h1>
            <div class="col s12 m4">
                <div class="icon-block">
                    <h2 class="center light-blue-text text-accent-4"><i class="material-icons">grade</i></h2>
                    <h5 class="center">Curabitur vitae malesuada quam</h5>

                    <p class="light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim ex orci, at viverra justo volutpat non. Nunc eu sapien fermentum, ullamcorper est at, porta enim. Vivamus vehicula dolor sodales purus volutpat, sed suscipit libero condimentum. Suspendisse potenti. Maecenas vestibulum diam ex, vel semper ante varius sit amet. Integer sit amet imperdiet dolor. Quisque sed sagittis dolor. Morbi bibendum hendrerit velit, a ultrices mauris volutpat in. Nam porta, risus ut molestie cursus, neque ipsum hendrerit sapien, id rutrum odio ex molestie mauris. Nullam eleifend tempor dictum. Donec et commodo nisl, non tincidunt odio. Nunc aliquam sollicitudin urna, non dignissim felis interdum id. Pellentesque facilisis sagittis diam, in convallis lectus euismod at.</p>
                </div>
            </div>

            <div class="col s12 m4">
                <div class="icon-block">
                    <h2 class="center light-blue-text text-accent-4"><i class="material-icons">grade</i></h2>
                    <h5 class="center">Curabitur vitae malesuada quam</h5>

                    <p class="light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim ex orci, at viverra justo volutpat non. Nunc eu sapien fermentum, ullamcorper est at, porta enim. Vivamus vehicula dolor sodales purus volutpat, sed suscipit libero condimentum. Suspendisse potenti. Maecenas vestibulum diam ex, vel semper ante varius sit amet. Integer sit amet imperdiet dolor. Quisque sed sagittis dolor. Morbi bibendum hendrerit velit, a ultrices mauris volutpat in. Nam porta, risus ut molestie cursus, neque ipsum hendrerit sapien, id rutrum odio ex molestie mauris. Nullam eleifend tempor dictum. Donec et commodo nisl, non tincidunt odio. Nunc aliquam sollicitudin urna, non dignissim felis interdum id. Pellentesque facilisis sagittis diam, in convallis lectus euismod at.</p>
                </div>
            </div>

            <div class="col s12 m4">
                <div class="icon-block">
                    <h2 class="center light-blue-text text-accent-4"><i class="material-icons">grade</i></h2>
                    <h5 class="center">Curabitur vitae malesuada quam</h5>

                    <p class="light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim ex orci, at viverra justo volutpat non. Nunc eu sapien fermentum, ullamcorper est at, porta enim. Vivamus vehicula dolor sodales purus volutpat, sed suscipit libero condimentum. Suspendisse potenti. Maecenas vestibulum diam ex, vel semper ante varius sit amet. Integer sit amet imperdiet dolor. Quisque sed sagittis dolor. Morbi bibendum hendrerit velit, a ultrices mauris volutpat in. Nam porta, risus ut molestie cursus, neque ipsum hendrerit sapien, id rutrum odio ex molestie mauris. Nullam eleifend tempor dictum. Donec et commodo nisl, non tincidunt odio. Nunc aliquam sollicitudin urna, non dignissim felis interdum id. Pellentesque facilisis sagittis diam, in convallis lectus euismod at.</p>
                </div>
            </div>
        </div>
        <br />
        <div class="row center">
            <a class="waves-effect waves-light btn modal-trigger waves-light light-blue accent-4" href="#stipeModal">I want to Donate!</a>
            <p>By donating to musare.com you agree to the <a href="/terms">TERMS OF SERVICE</a> and <a href="/privacy">PRIVACY POLICY!</a> (Make sure you read it!)</p>
        </div>
    </div>
    {{> footer}}

    <div id="stipeModal" class="modal">
        <div class="modal-content">
            <h4>Donate with stripe!</h4>
            <form action="" method="POST" id="payment-form">
                <span class="payment-errors"></span>

                <div class="form-row">
                    <label>
                        <span>Card Number</span>
                        <input type="text" size="20" data-stripe="number"/>
                    </label>
                </div>

                <div class="form-row">
                    <label>
                        <span>CVC</span>
                        <input type="text" size="4" data-stripe="cvc"/>
                    </label>
                </div>

                <div class="form-row">
                    <label>
                        <span>Expiration (MM/YYYY)</span>
                        <input type="text" size="2" data-stripe="exp-month"/>
                    </label>
                    <span> / </span>
                    <input type="text" size="4" data-stripe="exp-year"/>
                </div>

                <button type="submit">Submit Payment</button>
            </form>
        </div>
        <div class="modal-footer">
            <a href="#!" class=" modal-action modal-close waves-effect waves-red btn-flat">Cancel</a>
        </div>
    </div>

    <script>
        $(document).ready(function(){
            $('.modal-trigger').leanModal({
                        dismissible: true, // Modal can be dismissed by clicking outside of the modal
                        opacity: .5, // Opacity of modal background
                        in_duration: 300, // Transition in duration
                        out_duration: 200, // Transition out duration
                    }
            );
    });
    </script>
</template>