Improve subscription UI with large tier buttons

- Replace dropdown tier selection with attractive visual buttons
- Add tier-button CSS with hover effects and selection states
- Remove 'or pay by card' divider from subscription form for cleaner UI
- Update JavaScript to handle tier button selection events
- Fix Stripe module import conflict by renaming stripe directory to stripe_config
- Add responsive grid layout for tier buttons on mobile devices

templates/index.html

@@ -59,7 +59,15 @@
   
   <div class="card">
     <h1>Support Us</h1>
-    <form id="donation-form">
+    
+    <!-- Payment Type Selection -->
+    <div class="payment-type-tabs">
+      <button type="button" id="one-time-tab" class="tab-button active">One-time</button>
+      <button type="button" id="recurring-tab" class="tab-button">Monthly</button>
+    </div>
+    
+    <!-- One-time Donation Form -->
+    <form id="donation-form" class="payment-form active">
       <label for="amount">Amount</label>
       <input type="number" id="amount" min="1" step="0.01" placeholder="10.00" required>
       
@@ -88,6 +96,57 @@
       <button type="submit" id="card-submit-button">Support me</button>
       <div id="result"></div>
     </form>
+    
+    <!-- Subscription Form -->
+    <form id="subscription-form" class="payment-form">
+      <label>Choose Your Support Level</label>
+      
+      <!-- Subscription Tier Buttons -->
+      <div class="tier-buttons">
+        <div class="tier-button" data-tier="bronze">
+          <div class="tier-icon">🥉</div>
+          <div class="tier-name">Bronze</div>
+          <div class="tier-price">£2<span class="tier-period">/month</span></div>
+          <div class="tier-description">Essential support that makes a difference</div>
+        </div>
+        
+        <div class="tier-button" data-tier="silver">
+          <div class="tier-icon">🥈</div>
+          <div class="tier-name">Silver</div>
+          <div class="tier-price">£5<span class="tier-period">/month</span></div>
+          <div class="tier-description">Enhanced support with greater impact</div>
+        </div>
+        
+        <div class="tier-button" data-tier="gold">
+          <div class="tier-icon">🥇</div>
+          <div class="tier-name">Gold</div>
+          <div class="tier-price">£10<span class="tier-period">/month</span></div>
+          <div class="tier-description">Premium support for maximum impact</div>
+        </div>
+        
+        <div class="tier-button" data-tier="diamond">
+          <div class="tier-icon">💎</div>
+          <div class="tier-name">Diamond</div>
+          <div class="tier-price">£25<span class="tier-period">/month</span></div>
+          <div class="tier-description">Ultimate support for our biggest champions</div>
+        </div>
+      </div>
+      
+      <!-- Hidden input to store selected tier -->
+      <input type="hidden" id="subscription-tier" required>
+      
+      <label for="subscriber-email">Email Address *</label>
+      <input type="email" id="subscriber-email" placeholder="your@email.com" required>
+      
+      <label for="subscriber-name">Your Name (optional)</label>
+      <input type="text" id="subscriber-name" placeholder="Enter your name" maxlength="30">
+      
+      <label for="subscription-card-element">Card Details</label>
+      <div id="subscription-card-element"></div>
+      
+      <button type="submit" id="subscription-submit-button">Start Monthly Support</button>
+      <div id="subscription-result"></div>
+    </form>
   </div>
 
   <!-- Supporter Wall -->
@@ -103,5 +162,6 @@
   <script src="{{ url_for('static', filename='js/logo.js') }}"></script>
   <script src="{{ url_for('static', filename='js/supporters.js') }}"></script>
   <script src="{{ url_for('static', filename='js/donate.js') }}"></script>
+  <script src="{{ url_for('static', filename='js/subscriptions.js') }}"></script>
 </body>
 </html>