Skip to content

Commit

Permalink
update donate page
Browse files Browse the repository at this point in the history
  • Loading branch information
@toddwords
toddwords committed Jul 2, 2024
1 parent 751e4db commit 987ed5b
Showing 1 changed file with 179 additions and 70 deletions.
249 changes: 179 additions & 70 deletions public/templates/donate/storefront.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,29 @@
initShopifyProduct("7864334090391", "addon-inkind-wrapper", "Donate")
</script>
<script async
src="https://js.stripe.com/v3/buy-button.js">
</script>
<style>
.donateForm {
opacity: 0;
position:absolute;
pointer-events: none;
}
#currentDonationForm {
opacity: 1;
pointer-events: auto;
}
#donationSelect {
width: 288px;
border-radius: 6px;
font-size: var(--small-text);
font-family: var(--main-title-font);
padding: 2px;
margin-bottom:2px;
}
</style>
</head>


Expand All @@ -65,8 +88,8 @@



<div class="website-grid grid-hide fundraiser-winter-24">
<div class="grid-inner fundraiser-winter-24">
<div class="website-grid grid-hide ">
<div class="grid-inner ">
<section>
<div class="grid-2">
<div class="chars chars1"></div>
Expand All @@ -90,14 +113,14 @@

<div class="crt-overlay crt-overlay-fullsize"></div>

<div id="shell" class="shell shell-fullsize projects fundraiser-winter-24">
<div id="shell" class="shell shell-fullsize projects">
<div class="loader-content">
<p tabindex="0" class="large">
loading<span>...</span>
</p>
</div>

<div class="selectors">
{{!-- <div class="selectors">
<select id="allSections" onchange="sectionJump(this.value)" class=" hide-content">
<option value="">Ways to support...</option>
<option value="section-donate">1. Make a donation</option>
Expand All @@ -108,7 +131,7 @@
<!-- <option value="section-follow">5. Follow our progress</option> -->
</select>
</div>
</div> --}}


<h4 class="breadcrumb hide-content"><a href="/donate">donate</a></h4>
Expand Down Expand Up @@ -199,27 +222,118 @@


<div class="grid-1 featured session" >
<div class="featured-text half long nested">
<div class="featured-text half long nested" style="cursor:auto">
<div class="top left-disclaimer">
<!-- <h4 class="type"><a href="#"></a></h4> -->
<h2 class="title"><a href="#">Support School for Poetic Computation!</a></h2>

<div class="break-noline-small hide-desk"></div>
<!-- <p class ="small hide-desk">
Only donations over $250 are eligible for tax deductions.
Please <a href="https://docs.google.com/forms/d/e/1FAIpQLScGWU0-NLaQijcjMS4Vi__Mr8sFUFd4LweBCFRIbQmCrB-5Gg/viewform">fill out this form</a> with your contact info and
<a href="https://grayarea.org/initiative/school-for-poetic-computation/" target="_blank">submit a payment</a> via our fiscal sponsor.
<i>SFPC is fiscally sponsored by</i> <span class="sponsorlogo grayarea"></span>
</p> -->
<img style="margin:1vw; max-height:450px; " src="/images/community/IOTBGU_Project.jpg" />



</div>
<div class="right">
<p>

School for Poetic Computation (SFPC) is a nonprofit 501(c)(3) organization for the study of art, code, hardware, and critical theory through lenses of decolonization and transformative justice. Please consider making a tax-deductible donation to support scholarships for people who have been historically excluded from art and technology fields. We need your help to increase access to learn at SFPC to create an inclusive school where no one faces a financial barrier to study.
</p><br><br>
<p></p><p>Make a donation on <a href="https://withfriends.co/school_for_poetic_computation/join">Withfriends</a> or <a href="mailto:celine@sfpc.study">email us</a>.</p>
<p></p><p>Make a donation below or <a href="mailto:giving@sfpc.study">email us</a> to arrange a larger gift.</p>
</p><BR>


<div style="display:block; margin:auto;">
<select id="donationSelect" onchange="changeDonationAmount()" style="width:288px">
<option value="10">$10</option>
<option value="25">$25</option>
<option value="50" selected>$50</option>
<option value="100">$100</option>
<option value="250">$250</option>
<option value="500">$500</option>
<option value="1000">$1000</option>
<option value="2500">$2500</option>
<option value="5000">$5000</option>
<option value="Custom">Custom Amount</option>
</select>

<div class="donateForm donate10">

<stripe-buy-button
buy-button-id="buy_btn_1PYE0KKDA8CFvfBqNty4eSuz"
publishable-key="pk_live_51PXoRwKDA8CFvfBqRoSBbxHTy7rYVmJjQ8BGM0FfjCw2qcGaMoVFkHMdflYzLxMk2inml8IzaQouAWCP01Ny25Sb0060CTnDon"
>
</stripe-buy-button>
</div>

<div class="donateForm donate25">

<stripe-buy-button
buy-button-id="buy_btn_1PYE0rKDA8CFvfBq4LxcJtxw"
publishable-key="pk_live_51PXoRwKDA8CFvfBqRoSBbxHTy7rYVmJjQ8BGM0FfjCw2qcGaMoVFkHMdflYzLxMk2inml8IzaQouAWCP01Ny25Sb0060CTnDon"
>
</stripe-buy-button>
</div>
<div id="currentDonationForm" class="donateForm donate50">
<stripe-buy-button
buy-button-id="buy_btn_1PYBfIKDA8CFvfBqJ2FMS9kG"
publishable-key="pk_live_51PXoRwKDA8CFvfBqRoSBbxHTy7rYVmJjQ8BGM0FfjCw2qcGaMoVFkHMdflYzLxMk2inml8IzaQouAWCP01Ny25Sb0060CTnDon"
>
</stripe-buy-button>
</div>
<div class="donateForm donate100">
<stripe-buy-button
buy-button-id="buy_btn_1PYE5IKDA8CFvfBqzLTJwNGg"
publishable-key="pk_live_51PXoRwKDA8CFvfBqRoSBbxHTy7rYVmJjQ8BGM0FfjCw2qcGaMoVFkHMdflYzLxMk2inml8IzaQouAWCP01Ny25Sb0060CTnDon"
>
</stripe-buy-button>
</div>
<div class="donateForm donate250">

<stripe-buy-button
buy-button-id="buy_btn_1PYE6zKDA8CFvfBqCbVKggxn"
publishable-key="pk_live_51PXoRwKDA8CFvfBqRoSBbxHTy7rYVmJjQ8BGM0FfjCw2qcGaMoVFkHMdflYzLxMk2inml8IzaQouAWCP01Ny25Sb0060CTnDon"
>
</stripe-buy-button>
</div>
<div class="donateForm donate500">


<stripe-buy-button
buy-button-id="buy_btn_1PYE7VKDA8CFvfBqXFpL6d4d"
publishable-key="pk_live_51PXoRwKDA8CFvfBqRoSBbxHTy7rYVmJjQ8BGM0FfjCw2qcGaMoVFkHMdflYzLxMk2inml8IzaQouAWCP01Ny25Sb0060CTnDon"
>
</stripe-buy-button>
</div>
<div class="donateForm donate1000">

<stripe-buy-button
buy-button-id="buy_btn_1PYE8nKDA8CFvfBqs1Q6z2Po"
publishable-key="pk_live_51PXoRwKDA8CFvfBqRoSBbxHTy7rYVmJjQ8BGM0FfjCw2qcGaMoVFkHMdflYzLxMk2inml8IzaQouAWCP01Ny25Sb0060CTnDon"
>
</stripe-buy-button>
</div>
<div class="donateForm donate2500">

<stripe-buy-button
buy-button-id="buy_btn_1PYEGUKDA8CFvfBq0iegbhSB"
publishable-key="pk_live_51PXoRwKDA8CFvfBqRoSBbxHTy7rYVmJjQ8BGM0FfjCw2qcGaMoVFkHMdflYzLxMk2inml8IzaQouAWCP01Ny25Sb0060CTnDon"
>
</stripe-buy-button>
</div>
<div class="donateForm donate5000">

<stripe-buy-button
buy-button-id="buy_btn_1PYEAGKDA8CFvfBqRPpnpcGU"
publishable-key="pk_live_51PXoRwKDA8CFvfBqRoSBbxHTy7rYVmJjQ8BGM0FfjCw2qcGaMoVFkHMdflYzLxMk2inml8IzaQouAWCP01Ny25Sb0060CTnDon"
>
</stripe-buy-button>
</div>
<div class="donateForm donateCustom"><stripe-buy-button
buy-button-id="buy_btn_1PXon2KDA8CFvfBqyF9SIVbL"
publishable-key="pk_live_51PXoRwKDA8CFvfBqRoSBbxHTy7rYVmJjQ8BGM0FfjCw2qcGaMoVFkHMdflYzLxMk2inml8IzaQouAWCP01Ny25Sb0060CTnDon"
>
</stripe-buy-button></div>

</div>




Expand Down Expand Up @@ -292,98 +406,81 @@
</section>



<!-- <div class="break-noline-small"></div> -->
<div class="grid-1 participate"><h1>Memberships</h1></div>
<br>
<br>

<section id="section-member" class="stacked stacked-4">
<div class="grid-1 participate">
<section id="section-member" class="">
<div class="grid-1 participate" style="justify-content:space-around">

<div id="/tuition-gift"
class="grid-4 featured tuition-gift product" data-location="
">

<div id="/tuition-gift"
class="grid-4 featured tuition-gift product" data-location=""
>
<div class="featured-text">
<img src="https://sfpc.study/images/market/fruit-bearer.jpg">
<img src="/images/fundraiser/winter-23/seed-planter.jpg">
<div class="top">
<h4 class="type type-list-comma"><a href="/donate/fruit-bearer">fruit bearer</a></h4>
<h6 class=" Purchase">Help a teacher teach 1 session!</h6>
<h4 class="type type-list-comma"><a href="https://withfriends.co/school_for_poetic_computation/join/:membership_id=11349962">seed planter</a></h4>
<!-- <h2 class="title Purchase">Circiut Bender</h2> -->
<h6 class="">Help a participant attend 1 hour of class!</h6>
<!-- <h6>donated by you! </h6> -->
<BR>
<h3><span id=”cost”>$1500 - $6000</span>
<i>or</i><BR><span id=”cost”>$150/month</span></h3>
<!-- <BR> <h4>or $150/month membership</h4> -->
<!-- <p class="item inkind" id="teaching-full"/> -->
<h3>
<BR><span id=”cost”>$5/month</span><i> or </i><span id=”cost”>$60/year</span></h3>
<!-- <p class="item inkind" id="tuition-daily"/> -->
</div>

</div>
</div>




<div id="/tuition-gift"
class="grid-4 featured tuition-gift product" data-location="
">
" >
<div class="featured-text">
<img src="https://sfpc.study/images/market/space-maker.jpg">
<img src="/images/fundraiser/winter-23/circuit-bender.jpg">
<div class="top">
<h4 class="type type-list-comma"><a href="/donate/space-maker">space maker</a></h4>
<h6 class="Purchase">Help a participant attend 1 session!</h6>
<h4 class="type type-list-comma"><a href="https://withfriends.co/school_for_poetic_computation/join/:membership_id=11365459r">circuit bender</a></h4>
<!-- <h2 class="title Purchase">Circiut Bender</h2> -->
<h6 class="">Help a participant attend 1 class day!</h6>
<!-- <h6>donated by you! </h6> -->
<BR>
<h3><span id=”cost”>$750 - $1200</span>
<i>or</i><BR><span id=”cost”>$65/month</span></h3>
<!-- <p class="item inkind" id="tuition-full"/> -->
<h3>
<BR><span id=”cost”>$15/month</span><i> or </i><span id=”cost”>$180/year</span></h3>
<!-- <p class="item inkind" id="tuition-daily"/> -->
</div>

</div>
</div>


<div id="/tuition-gift"
class="grid-4 featured tuition-gift product" data-location="
">
" >
<div class="featured-text">
<img src="https://sfpc.study/images/market/thread-weaver.jpg">
<img src="/images/fundraiser/winter-23/thread-weaver.jpg">
<div class="top">
<h4 class="type type-list-comma"><a href="/donate/thread-weaver">thread weaver</a></h4>
<h6 class=" Purchase">Help a teacher teach 1 class day!</h6>
<h4 class="type type-list-comma"><a href="https://withfriends.co/school_for_poetic_computation/join/:membership_id=11436554">thread weaver</a></h4>
<h6 class="">Help a teacher teach 1 class day!</h6>
<!-- <h6>donated by you! </h6> -->
<BR>
<h3><span id=”cost”>$300 - $600</span>
<i>or</i><BR><span id=”cost”>$25/month</span></h3>
<h3>
<BR><span id=”cost”>$25/month</span><i> or </i><span id=”cost”>$300/year</span></h3>
<!-- <p class="item inkind" id="teaching-daily"/> -->
</div>

</div>
</div>

<div id="/tuition-gift"
class="grid-4 featured tuition-gift product" data-location="
">
<div class="featured-text">
<img src="https://sfpc.study/images/market/circuit-bender.jpg">
<div class="top">
<h4 class="type type-list-comma"><a href="/donate/circuit-bender">circuit bender</a></h4>
<!-- <h2 class="title Purchase">Circiut Bender</h2> -->
<h6 class="">Help a participant attend 1 class day!</h6>
<!-- <h6>donated by you! </h6> -->
<BR>
<h3><span id=”cost”>$120 - $150</span>
<i>or</i><BR><span id=”cost”>$15/month</span></h3>
<!-- <p class="item inkind" id="tuition-daily"/> -->
</div>

</div>
</div>


</div>
</section>



<div class="break"></div>


<section class="stacked stacked-4">
{{!-- <section class="stacked stacked-4">
Expand Down Expand Up @@ -445,15 +542,15 @@
</div>
</section>
</section> --}}







<div class="break"></div>
{{!-- <div class="break"></div>
<section id="section-testimonials">
<div class="grid-2">
<h1>Testimonials</h1>
Expand All @@ -464,9 +561,9 @@
<a href="https://forms.gle/PvuvBQd4cmo8YL4j6" class="" target="_blank">share a testimonial...</a>
</p>
</div>
</section>
</section> --}}

<div class="grid-container" id="participate-archive">
{{!-- <div class="grid-container" id="participate-archive">
<main class="grid-item main">
<main class="grid-item main">
Expand All @@ -489,11 +586,15 @@
</div>
</main>
</main>
</div>
</div> --}}


<div class="break-noline"></div>

<section>
<h1>Thank you for your support!</h1>
</section>

{{!-- <section id="section-share" class="stacked stacked-4">
<div class="grid-1 featured fundraiser-winter-24 session">
<div class="featured-text half thin">
Expand Down Expand Up @@ -567,6 +668,14 @@

<script src="/outside.js"></script>
<script src="/carousel.js"></script>
<script>
function changeDonationAmount() {
var select = document.querySelector('select');
var amount = select.options[select.selectedIndex].value;
document.querySelector('#currentDonationForm').removeAttribute('id');
document.querySelector('.donate'+amount).setAttribute('id', 'currentDonationForm')
}
</script>
</p>

</body>
Expand Down

0 comments on commit 987ed5b

Please sign in to comment.