From e2682cc1f87b240145de1df5ac78651f6b31fdd9 Mon Sep 17 00:00:00 2001
From: Hippo <badrihippo@gmail.com>
Date: Tue, 28 Dec 2021 17:58:37 +0530
Subject: [PATCH] Add tier selection tiles

---
 src/index.htm | 47 ++++++++++++++++++++++++++++++++++++++++++++++-
 src/style.css | 28 ++++++++++++++++++++++++++++
 2 files changed, 74 insertions(+), 1 deletion(-)

diff --git a/src/index.htm b/src/index.htm
index ddc6cc1..fb929ed 100644
--- a/src/index.htm
+++ b/src/index.htm
@@ -114,7 +114,52 @@
 
     <div class="text-green-900 w-full md:w-3/5 lg:w-3/40">
       <div class="max-w-4xl mx-auto p-10">
-        <p class="p-5 text-xl">[TK donation deets]</p>
+        <h1 class="text-center text-2xl font-sans">Donation options</h1>
+
+        <ul class="my-10 grid grid-cols-3 gap-3">
+          <label class="donate-option">
+            <input type="radio" name="amount" value="250">
+            <li>
+              <h2 class="text-5xl">₹250</h2>
+              <p class="font-sans">You get: Snipette stickers</p>
+            </li>
+          </label>
+          <label class="donate-option">
+            <input type="radio" name="amount" value="500">
+            <li class="row-auto text-center inline-block p-10 bg-white rounded-md text-black border-2 border-white hover:border-green-500 hover:cursor-pointer h-auto">
+              <h2 class="text-5xl">₹500</h2>
+              <p class="font-sans">You get: 4 colour issues + social media mention</p>
+            </li>
+          </label>
+          <label class="donate-option">
+            <input type="radio" name="amount" value="750">
+            <li>
+              <h2 class="text-5xl">₹750</h2>
+              <p class="font-sans">You get: 4 colour issues social media shoutout + desktop/mobile wallpapers</p>
+            </li>
+          </label>
+          <label class="donate-option">
+            <input type="radio" name="amount" value="1000">
+            <li>
+              <h2 class="text-5xl">₹1,000</h2>
+              <p class="font-sans">You get: 4 colour issues + social media shoutout + desktop/mobile wallpapers + bookmarks</p>
+            </li>
+          </label>
+          <label class="donate-option">
+            <input type="radio" name="amount" value="1500">
+            <li>
+              <h2 class="text-5xl">₹1,500</h2>
+              <p class="font-sans">You get: 4 colour issues + social media shoutout + desktop/mobile wallpapers + pack of postcards</p>
+            </li>
+          </label>
+          <label class="donate-option">
+            <input type="radio" name="amount" value="custom">
+            <li>
+              <h2 class="text-5xl text-center">₹<input type="number" min="0" max="100000" size="5" name="amount-custom" class="input-custom" placeholder="amount"/><span class="underline">custom</span></h2>
+              <p class="font-sans">You get: all the perks from the next lowest level</p>
+            </li>
+          </label>
+        </ul>
       </div>
     </div>
 
diff --git a/src/style.css b/src/style.css
index b5c61c9..286cd3f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,3 +1,31 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.donate-option > input {
+  @apply hidden;
+}
+
+.donate-option > li {
+  @apply row-auto text-center inline-block p-10 bg-white rounded-md text-black border-2 border-white hover:border-green-500 hover:cursor-pointer h-full;
+}
+
+.donate-option > input:checked + li {
+  @apply border-green-500 bg-green-400;
+}
+
+.input-custom {
+  @apply bg-inherit border-inherit inline-block text-center overflow-visible p-3;
+}
+
+.donate-option > input:checked + li:hover .input-custom {
+  @apply bg-white;
+}
+
+.donate-option > input:not(:checked) + li .input-custom {
+  @apply hidden;
+}
+
+.donate-option > input:checked + li .input-custom + span {
+  @apply hidden;
+}