andertsdb/subscriptionsense-pro
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>SubscriptionSense Pro</title>7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">8 <link rel="stylesheet" href="style.css">9 <script src="https://cdn.tailwindcss.com"></script>10</head>11<body class="bg-gray-100 dark:bg-gray-900">12 <custom-navbar></custom-navbar>13 14 <main class="container mx-auto px-4 py-8">15 <div class="flex justify-between items-center mb-8">16 <h1 class="text-3xl font-bold text-gray-800 dark:text-white">My Subscriptions</h1>17 <div class="total-card bg-white dark:bg-gray-800 p-4 rounded-lg shadow">18 <p class="text-gray-500 dark:text-gray-300">Monthly Total</p>19 <p class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">$0.00</p>20 </div>21 </div>22 23 <button id="addSubscription" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg mb-6 flex items-center">24 <i class="fas fa-plus mr-2"></i> Add Subscription25 </button>26 27 <div class="subscription-list grid gap-4">28 <!-- Subscription cards will be added here dynamically -->29 </div>30 </main>31 32 <!-- Add Subscription Modal -->33 <div id="subscriptionModal" class="modal hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">34 <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 w-full max-w-md">35 <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Add New Subscription</h2>36 <form id="subscriptionForm" class="space-y-4">37 <div>38 <label class="block text-gray-700 dark:text-gray-300 mb-1">Service Name</label>39 <input type="text" class="w-full px-3 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600" required>40 </div>41 <div class="grid grid-cols-2 gap-4">42 <div>43 <label class="block text-gray-700 dark:text-gray-300 mb-1">Cost</label>44 <input type="number" step="0.01" class="w-full px-3 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600" required>45 </div>46 <div>47 <label class="block text-gray-700 dark:text-gray-300 mb-1">Billing Cycle</label>48 <select class="w-full px-3 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600">49 <option value="monthly">Monthly</option>50 <option value="annual">Annual</option>51 </select>52 </div>53 </div>54 <div>55 <label class="block text-gray-700 dark:text-gray-300 mb-1">Next Billing Date</label>56 <input type="date" class="w-full px-3 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600" required>57 </div>58 <div>59 <label class="block text-gray-700 dark:text-gray-300 mb-1">Payment Method</label>60 <input type="text" class="w-full px-3 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600" required>61 </div>62 <div class="flex items-center">63 <input type="checkbox" id="autoRenewal" class="mr-2">64 <label for="autoRenewal" class="text-gray-700 dark:text-gray-300">Auto-renewal</label>65 </div>66 <div class="flex justify-end space-x-2">67 <button type="button" id="cancelModal" class="px-4 py-2 border rounded-lg text-gray-700 dark:text-gray-300">Cancel</button>68 <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-lg">Save</button>69 </div>70 </form>71 </div>72 </div>73 74 <script src="components/navbar.js"></script>75 <script src="script.js"></script>76<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>77</body>78</html>