Spaces:

vs4vijay
/

autocodetest

Running

App Files Files Community

vs4vijay commited on Apr 3

Commit

4c5c200

verified ·

1 Parent(s): f3888ac

Add 1 files

Browse files

Files changed (1) hide show

index.html +110 -3

index.html CHANGED Viewed

@@ -70,6 +70,13 @@
             background-color: #6e8efb !important;
             color: #ffffff;
         }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
@@ -95,6 +102,16 @@
     <!-- Main Content -->
     <main class="container mx-auto px-4 py-8">
         <!-- Hero Section -->
         <section class="mb-12">
             <div class="bg-white rounded-xl p-8 card-shadow">
@@ -109,6 +126,9 @@
                             <button id="exploreBtn" class="border border-purple-600 text-purple-600 hover:bg-purple-50 px-6 py-3 rounded-lg font-medium transition duration-300 flex items-center">
                                 <i class="fas fa-search mr-2"></i> Explore Cards
                             </button>
                         </div>
                     </div>
                     <div class="md:w-1/2 flex justify-center">
@@ -145,9 +165,14 @@
         <section class="mb-12">
             <div class="flex justify-between items-center mb-6">
                 <h2 class="text-2xl font-bold text-gray-800">My Credit Cards</h2>
-                <button id="refreshCardsBtn" class="text-purple-600 hover:text-purple-800 flex items-center">
-                    <i class="fas fa-sync-alt mr-2"></i> Refresh
-                </button>
             </div>
             <div id="myCardsContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                 <!-- Cards will be added here dynamically -->
@@ -566,10 +591,15 @@
         const cardNameInput = document.getElementById('cardName');
         const myCardsContainer = document.getElementById('myCardsContainer');
         const refreshCardsBtn = document.getElementById('refreshCardsBtn');
         const chatContainer = document.getElementById('chatContainer');
         const chatInput = document.getElementById('chatInput');
         const sendChatBtn = document.getElementById('sendChatBtn');
         const quickQuestionBtns = document.querySelectorAll('.quick-question-btn');
         // Modal toggle
         addCardBtn.addEventListener('click', () => {
@@ -1012,6 +1042,83 @@
             addChatMessage('assistant', 'Your cards have been refreshed!');
         });
         // Initial render
         renderCards();
     </script>

             background-color: #6e8efb !important;
             color: #ffffff;
         }
+        .rotate {
+            animation: rotate 1s linear infinite;
+        }
+        @keyframes rotate {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
     <!-- Main Content -->
     <main class="container mx-auto px-4 py-8">
+        <!-- Sync Status Bar -->
+        <div id="syncStatus" class="hidden bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 mb-6 rounded">
+            <div class="flex items-center">
+                <div id="syncSpinner" class="mr-3 rotate">
+                    <i class="fas fa-sync-alt text-blue-500"></i>
+                </div>
+                <p id="syncMessage">Syncing your cards from connected banks...</p>
+            </div>
+        </div>
         <!-- Hero Section -->
         <section class="mb-12">
             <div class="bg-white rounded-xl p-8 card-shadow">
                             <button id="exploreBtn" class="border border-purple-600 text-purple-600 hover:bg-purple-50 px-6 py-3 rounded-lg font-medium transition duration-300 flex items-center">
                                 <i class="fas fa-search mr-2"></i> Explore Cards
                             </button>
+                            <button id="syncCardsBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300 flex items-center">
+                                <i class="fas fa-sync-alt mr-2"></i> Sync Cards
+                            </button>
                         </div>
                     </div>
                     <div class="md:w-1/2 flex justify-center">
         <section class="mb-12">
             <div class="flex justify-between items-center mb-6">
                 <h2 class="text-2xl font-bold text-gray-800">My Credit Cards</h2>
+                <div class="flex space-x-4">
+                    <button id="refreshCardsBtn" class="text-purple-600 hover:text-purple-800 flex items-center">
+                        <i class="fas fa-sync-alt mr-2"></i> Refresh
+                    </button>
+                    <button id="bankSyncBtn" class="text-blue-600 hover:text-blue-800 flex items-center">
+                        <i class="fas fa-university mr-2"></i> Sync with Banks
+                    </button>
+                </div>
             </div>
             <div id="myCardsContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                 <!-- Cards will be added here dynamically -->
         const cardNameInput = document.getElementById('cardName');
         const myCardsContainer = document.getElementById('myCardsContainer');
         const refreshCardsBtn = document.getElementById('refreshCardsBtn');
+        const bankSyncBtn = document.getElementById('bankSyncBtn');
+        const syncCardsBtn = document.getElementById('syncCardsBtn');
         const chatContainer = document.getElementById('chatContainer');
         const chatInput = document.getElementById('chatInput');
         const sendChatBtn = document.getElementById('sendChatBtn');
         const quickQuestionBtns = document.querySelectorAll('.quick-question-btn');
+        const syncStatus = document.getElementById('syncStatus');
+        const syncMessage = document.getElementById('syncMessage');
+        const syncSpinner = document.getElementById('syncSpinner');
         // Modal toggle
         addCardBtn.addEventListener('click', () => {
             addChatMessage('assistant', 'Your cards have been refreshed!');
         });
+        // Simulate syncing with banks
+        function syncWithBanks() {
+            syncStatus.classList.remove('hidden');
+            syncMessage.textContent = "Connecting to your bank accounts...";
+            // Simulate API calls to different banks
+            setTimeout(() => {
+                syncMessage.textContent = "Fetching cards from HDFC Bank...";
+                setTimeout(() => {
+                    syncMessage.textContent = "Fetching cards from ICICI Bank...";
+                    setTimeout(() => {
+                        syncMessage.textContent = "Fetching cards from SBI...";
+                        setTimeout(() => {
+                            // Simulate finding new cards
+                            const newCards = [
+                                {
+                                    name: "ICICI Amazon Pay",
+                                    type: "cashback",
+                                    annualFee: 0,
+                                    rewardsRate: "5% cashback",
+                                    benefits: [
+                                        "5% cashback on Amazon",
+                                        "2% cashback on other spends",
+                                        "No annual fee"
+                                    ]
+                                },
+                                {
+                                    name: "SBI SimplyCLICK",
+                                    type: "online shopping",
+                                    annualFee: 499,
+                                    rewardsRate: "10x rewards",
+                                    benefits: [
+                                        "10x rewards on Amazon, BookMyShow",
+                                        "5x rewards on other online spends",
+                                        "E-vouchers worth ₹2,000 annually"
+                                    ]
+                                }
+                            ];
+                            // Only add cards that don't already exist
+                            newCards.forEach(newCard => {
+                                if (!myCards.some(card => card.name === newCard.name)) {
+                                    myCards.push(newCard);
+                                }
+                            });
+                            renderCards();
+                            syncMessage.textContent = "Sync complete! Found 2 new cards.";
+                            syncSpinner.classList.remove('rotate');
+                            syncSpinner.innerHTML = '<i class="fas fa-check-circle text-green-500"></i>';
+                            setTimeout(() => {
+                                syncStatus.classList.add('hidden');
+                                syncSpinner.innerHTML = '<i class="fas fa-sync-alt text-blue-500"></i>';
+                                syncSpinner.classList.add('rotate');
+                                if (newCards.length > 0) {
+                                    addChatMessage('assistant', `I've found ${newCards.length} new cards in your bank accounts! They've been added to your wallet.`);
+                                } else {
+                                    addChatMessage('assistant', "Your cards are up to date. No new cards found in your bank accounts.");
+                                }
+                            }, 2000);
+                        }, 1500);
+                    }, 1500);
+                }, 1500);
+            }, 1000);
+        }
+        // Sync buttons
+        bankSyncBtn.addEventListener('click', syncWithBanks);
+        syncCardsBtn.addEventListener('click', syncWithBanks);
         // Initial render
         renderCards();
     </script>