Hugging Face's logo

Spaces:
vs4vijay
/
autocodetest
Running

App Files Community
autocodetest / index.html
vs4vijay's picture
vs4vijay
Add 1 files
4c5c200 verified
raw
history blame contribute delete
56.9 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CardX - Smart Credit Card Platform for India</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.gradient-bg {
background: linear-gradient(135deg, #6e8efb, #a777e3);
}
.card-shadow {
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2);
}
.chat-container {
height: 400px;
overflow-y: auto;
scrollbar-width: thin;
}
.chat-container::-webkit-scrollbar {
width: 6px;
}
.chat-container::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,0.2);
border-radius: 3px;
}
.fade-in {
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.autocomplete {
position: relative;
display: inline-block;
width: 100%;
}
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
top: 100%;
left: 0;
right: 0;
max-height: 200px;
overflow-y: auto;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
background-color: #e9e9e9;
}
.autocomplete-active {
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">
<!-- Header -->
<header class="gradient-bg text-white">
<div class="container mx-auto px-4 py-6">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fas fa-credit-card text-3xl"></i>
<h1 class="text-2xl font-bold">CardX India</h1>
</div>
<nav>
<ul class="flex space-x-6">
<li><a href="#" class="hover:underline">My Cards</a></li>
<li><a href="#" class="hover:underline">Explore</a></li>
<li><a href="#" class="hover:underline">Card Chat</a></li>
<li><a href="#" class="hover:underline">Profile</a></li>
</ul>
</nav>
</div>
</div>
</header>
<!-- 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">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-6 md:mb-0">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Find the Perfect Indian Credit Card for Your Lifestyle</h2>
<p class="text-gray-600 mb-6">CardX analyzes your spending habits and recommends the best Indian credit cards to maximize rewards and minimize fees.</p>
<div class="flex space-x-4">
<button id="addCardBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300 flex items-center">
<i class="fas fa-plus-circle mr-2"></i> Add Your Card
</button>
<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">
<img src="https://illustrations.popsy.co/amber/credit-card-payment.svg" alt="Credit Card Illustration" class="w-full max-w-md">
</div>
</div>
</div>
</section>
<!-- Add Card Modal -->
<div id="addCardModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-xl p-6 w-full max-w-md fade-in">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold text-gray-800">Add Your Indian Credit Card</h3>
<button id="closeModalBtn" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<form id="cardForm">
<div class="mb-4">
<label for="cardName" class="block text-gray-700 mb-2">Card Name</label>
<div class="autocomplete">
<input type="text" id="cardName" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Start typing card name..." required autocomplete="off">
</div>
</div>
<button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-3 rounded-lg font-medium transition duration-300">
Add Card
</button>
</form>
</div>
</div>
<!-- My Cards Section -->
<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 -->
<div class="bg-white rounded-xl p-6 card-shadow">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="text-xl font-bold text-gray-800">HDFC Regalia</h3>
<span class="inline-block bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full mt-1">Premium</span>
</div>
<div class="bg-blue-500 text-white p-2 rounded-lg">
<i class="fas fa-star"></i>
</div>
</div>
<div class="mb-4">
<div class="flex justify-between mb-2">
<span class="text-gray-600">Annual Fee</span>
<span class="font-medium">₹2,500</span>
</div>
<div class="flex justify-between mb-2">
<span class="text-gray-600">Rewards Rate</span>
<span class="font-medium">4 RP/₹100</span>
</div>
</div>
<div class="mb-4">
<h4 class="text-sm font-semibold text-gray-700 mb-2">Key Benefits</h4>
<ul class="text-sm text-gray-600 space-y-1">
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Airport lounge access</li>
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Complimentary golf games</li>
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Movie ticket discounts</li>
</ul>
</div>
<div class="flex justify-between pt-4 border-t border-gray-200">
<button class="text-purple-600 hover:text-purple-800 flex items-center">
<i class="fas fa-chart-line mr-2"></i> Analyze
</button>
<button class="text-red-500 hover:text-red-700 flex items-center">
<i class="fas fa-trash-alt mr-2"></i> Remove
</button>
</div>
</div>
</div>
</section>
<!-- Card Chat Section -->
<section class="mb-12">
<h2 class="text-2xl font-bold text-gray-800 mb-6">Card Chat Assistant</h2>
<div class="bg-white rounded-xl card-shadow overflow-hidden">
<div class="p-4 border-b border-gray-200 bg-gray-50">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center text-white mr-3">
<i class="fas fa-robot"></i>
</div>
<div>
<h3 class="font-medium">CardX Assistant</h3>
<p class="text-xs text-gray-500">Ask me anything about Indian credit cards</p>
</div>
</div>
</div>
<div id="chatContainer" class="chat-container p-4 bg-white">
<div class="flex mb-4">
<div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center text-white mr-3 flex-shrink-0">
<i class="fas fa-robot"></i>
</div>
<div class="bg-gray-100 rounded-lg p-3 max-w-3/4">
<p class="text-gray-800">Namaste! I'm your CardX assistant for Indian credit cards. I can help you find the best credit card based on your spending habits, or analyze your current cards to maximize rewards. What would you like to know?</p>
</div>
</div>
</div>
<div class="p-4 border-t border-gray-200 bg-gray-50">
<div class="flex">
<input type="text" id="chatInput" placeholder="Type your question here..." class="flex-grow px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
<button id="sendChatBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-r-lg transition duration-300">
<i class="fas fa-paper-plane"></i>
</button>
</div>
<div class="mt-2 flex flex-wrap gap-2">
<button class="quick-question-btn bg-gray-200 hover:bg-gray-300 text-gray-800 px-3 py-1 rounded-full text-sm transition duration-300">
Best travel card?
</button>
<button class="quick-question-btn bg-gray-200 hover:bg-gray-300 text-gray-800 px-3 py-1 rounded-full text-sm transition duration-300">
Maximize cashback
</button>
<button class="quick-question-btn bg-gray-200 hover:bg-gray-300 text-gray-800 px-3 py-1 rounded-full text-sm transition duration-300">
Low annual fee options
</button>
<button class="quick-question-btn bg-gray-200 hover:bg-gray-300 text-gray-800 px-3 py-1 rounded-full text-sm transition duration-300">
Compare my cards
</button>
</div>
</div>
</div>
</section>
<!-- Recommended Cards Section -->
<section>
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800">Recommended For You</h2>
<button class="text-purple-600 hover:text-purple-800 flex items-center">
<i class="fas fa-sliders-h mr-2"></i> Filter
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white rounded-xl p-6 card-shadow pulse">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="text-xl font-bold text-gray-800">Axis Magnus</h3>
<span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full mt-1">Premium Travel</span>
</div>
<div class="bg-yellow-400 text-white p-2 rounded-lg">
<i class="fas fa-crown"></i>
</div>
</div>
<div class="mb-4">
<div class="flex justify-between mb-2">
<span class="text-gray-600">Annual Fee</span>
<span class="font-medium">₹10,000</span>
</div>
<div class="flex justify-between mb-2">
<span class="text-gray-600">Rewards Rate</span>
<span class="font-medium">12 RP/₹200</span>
</div>
</div>
<div class="mb-4">
<h4 class="text-sm font-semibold text-gray-700 mb-2">Key Benefits</h4>
<ul class="text-sm text-gray-600 space-y-1">
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> 5x rewards on travel & dining</li>
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Complimentary Taj Epicure membership</li>
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Unlimited airport lounge access</li>
</ul>
</div>
<div class="flex justify-between pt-4 border-t border-gray-200">
<button class="text-blue-600 hover:text-blue-800 flex items-center">
<i class="fas fa-info-circle mr-2"></i> Details
</button>
<button class="text-green-600 hover:text-green-800 flex items-center">
<i class="fas fa-plus-circle mr-2"></i> Add to My Cards
</button>
</div>
</div>
<div class="bg-white rounded-xl p-6 card-shadow">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="text-xl font-bold text-gray-800">SBI SimplyCLICK</h3>
<span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full mt-1">Online Shopping</span>
</div>
<div class="bg-green-500 text-white p-2 rounded-lg">
<i class="fas fa-shopping-cart"></i>
</div>
</div>
<div class="mb-4">
<div class="flex justify-between mb-2">
<span class="text-gray-600">Annual Fee</span>
<span class="font-medium">₹499</span>
</div>
<div class="flex justify-between mb-2">
<span class="text-gray-600">Rewards Rate</span>
<span class="font-medium">10x rewards</span>
</div>
</div>
<div class="mb-4">
<h4 class="text-sm font-semibold text-gray-700 mb-2">Key Benefits</h4>
<ul class="text-sm text-gray-600 space-y-1">
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> 10x rewards on Amazon, BookMyShow</li>
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> 5x rewards on other online spends</li>
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> E-vouchers worth ₹2,000 annually</li>
</ul>
</div>
<div class="flex justify-between pt-4 border-t border-gray-200">
<button class="text-blue-600 hover:text-blue-800 flex items-center">
<i class="fas fa-info-circle mr-2"></i> Details
</button>
<button class="text-green-600 hover:text-green-800 flex items-center">
<i class="fas fa-plus-circle mr-2"></i> Add to My Cards
</button>
</div>
</div>
<div class="bg-white rounded-xl p-6 card-shadow">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="text-xl font-bold text-gray-800">ICICI Amazon Pay</h3>
<span class="inline-block bg-amber-100 text-amber-800 text-xs px-2 py-1 rounded-full mt-1">Cashback</span>
</div>
<div class="bg-amber-500 text-white p-2 rounded-lg">
<i class="fab fa-amazon"></i>
</div>
</div>
<div class="mb-4">
<div class="flex justify-between mb-2">
<span class="text-gray-600">Annual Fee</span>
<span class="font-medium">₹0</span>
</div>
<div class="flex justify-between mb-2">
<span class="text-gray-600">Rewards Rate</span>
<span class="font-medium">5% cashback</span>
</div>
</div>
<div class="mb-4">
<h4 class="text-sm font-semibold text-gray-700 mb-2">Key Benefits</h4>
<ul class="text-sm text-gray-600 space-y-1">
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> 5% cashback on Amazon</li>
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> 2% cashback on other spends</li>
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> No annual fee</li>
</ul>
</div>
<div class="flex justify-between pt-4 border-t border-gray-200">
<button class="text-blue-600 hover:text-blue-800 flex items-center">
<i class="fas fa-info-circle mr-2"></i> Details
</button>
<button class="text-green-600 hover:text-green-800 flex items-center">
<i class="fas fa-plus-circle mr-2"></i> Add to My Cards
</button>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-8 mt-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-lg font-bold mb-4">CardX India</h3>
<p class="text-gray-400">The smart way to manage and optimize your Indian credit cards for maximum rewards.</p>
</div>
<div>
<h4 class="text-md font-semibold mb-4">Features</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">My Cards</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Card Analysis</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Card Chat</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Recommendations</a></li>
</ul>
</div>
<div>
<h4 class="text-md font-semibold mb-4">Resources</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Credit Card Guide</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Rewards Calculator</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
</ul>
</div>
<div>
<h4 class="text-md font-semibold mb-4">Connect</h4>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter text-xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook text-xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram text-xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin text-xl"></i></a>
</div>
<div class="mt-4">
<p class="text-gray-400">Subscribe to our newsletter</p>
<div class="flex mt-2">
<input type="email" placeholder="Your email" class="px-3 py-2 bg-gray-700 text-white rounded-l focus:outline-none">
<button class="bg-purple-600 hover:bg-purple-700 px-3 py-2 rounded-r">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
<p>&copy; 2023 CardX India. All rights reserved.</p>
</div>
</div>
</footer>
<script>
// Database of Indian credit cards
const indianCreditCards = [
{
name: "HDFC Regalia",
type: "premium",
annualFee: 2500,
rewardsRate: "4 RP/₹100",
benefits: [
"Airport lounge access",
"Complimentary golf games",
"Movie ticket discounts",
"Reward points on spends"
]
},
{
name: "Axis Magnus",
type: "premium travel",
annualFee: 10000,
rewardsRate: "12 RP/₹200",
benefits: [
"5x rewards on travel & dining",
"Complimentary Taj Epicure membership",
"Unlimited airport lounge access",
"Golf benefits"
]
},
{
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",
"Discounts on partner brands"
]
},
{
name: "ICICI Amazon Pay",
type: "cashback",
annualFee: 0,
rewardsRate: "5% cashback",
benefits: [
"5% cashback on Amazon",
"2% cashback on other spends",
"No annual fee",
"Instant discounts on Amazon"
]
},
{
name: "Citibank PremierMiles",
type: "travel",
annualFee: 3000,
rewardsRate: "4 miles/₹150",
benefits: [
"Air miles on all spends",
"Complimentary airport transfers",
"Discounts on hotel bookings",
"Priority pass membership"
]
},
{
name: "Standard Chartered Ultimate",
type: "cashback",
annualFee: 3000,
rewardsRate: "3.3% cashback",
benefits: [
"Flat cashback on all spends",
"Complimentary movie tickets",
"Dining discounts",
"Fuel surcharge waiver"
]
},
{
name: "Kotak League",
type: "lifestyle",
annualFee: 999,
rewardsRate: "5 RP/₹100",
benefits: [
"Discounts on movie tickets",
"Complimentary OTT subscriptions",
"Dining benefits",
"Fuel surcharge waiver"
]
},
{
name: "American Express Platinum Travel",
type: "travel",
annualFee: 5000,
rewardsRate: "1 MR/₹50",
benefits: [
"Complimentary Taj vouchers",
"Airport lounge access",
"Travel vouchers on spends",
"Hotel membership benefits"
]
},
{
name: "IDFC First Wow",
type: "secured",
annualFee: 0,
rewardsRate: "1.5% cashback",
benefits: [
"No credit check required",
"Secured against FD",
"Fuel surcharge waiver",
"Contactless payments"
]
},
{
name: "RBL Bank Edition",
type: "lifestyle",
annualFee: 1499,
rewardsRate: "5 RP/₹100",
benefits: [
"Discounts on dining & movies",
"Complimentary airport lounge access",
"Fuel surcharge waiver",
"Reward points on all spends"
]
}
];
// User's cards
let myCards = [
{
name: "HDFC Regalia",
type: "premium",
annualFee: 2500,
rewardsRate: "4 RP/₹100",
benefits: [
"Airport lounge access",
"Complimentary golf games",
"Movie ticket discounts"
]
}
];
// DOM Elements
const addCardBtn = document.getElementById('addCardBtn');
const closeModalBtn = document.getElementById('closeModalBtn');
const addCardModal = document.getElementById('addCardModal');
const cardForm = document.getElementById('cardForm');
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', () => {
addCardModal.classList.remove('hidden');
cardNameInput.focus();
});
closeModalBtn.addEventListener('click', () => {
addCardModal.classList.add('hidden');
closeAllLists();
});
// Autocomplete functionality
function autocomplete(inp, arr) {
let currentFocus;
inp.addEventListener("input", function(e) {
let val = this.value;
closeAllLists();
if (!val) { return false; }
currentFocus = -1;
const list = document.createElement("div");
list.setAttribute("id", this.id + "autocomplete-list");
list.setAttribute("class", "autocomplete-items");
this.parentNode.appendChild(list);
let count = 0;
for (let i = 0; i < arr.length; i++) {
if (arr[i].name.toLowerCase().includes(val.toLowerCase())) {
count++;
const item = document.createElement("div");
item.innerHTML = "<strong>" + arr[i].name.substring(0, val.length) + "</strong>";
item.innerHTML += arr[i].name.substring(val.length);
item.innerHTML += "<input type='hidden' value='" + arr[i].name + "'>";
item.addEventListener("click", function(e) {
inp.value = this.getElementsByTagName("input")[0].value;
closeAllLists();
});
list.appendChild(item);
if (count >= 5) break; // Limit to 5 suggestions
}
}
});
inp.addEventListener("keydown", function(e) {
let x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) { // Down arrow
currentFocus++;
addActive(x);
} else if (e.keyCode == 38) { // Up arrow
currentFocus--;
addActive(x);
} else if (e.keyCode == 13) { // Enter
e.preventDefault();
if (currentFocus > -1) {
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
if (!x) return false;
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
for (let i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
const x = document.getElementsByClassName("autocomplete-items");
for (let i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != inp) {
x[i].parentNode.removeChild(x[i]);
}
}
}
document.addEventListener("click", function(e) {
closeAllLists(e.target);
});
}
// Initialize autocomplete
autocomplete(cardNameInput, indianCreditCards);
// Add new card
cardForm.addEventListener('submit', (e) => {
e.preventDefault();
const cardName = cardNameInput.value.trim();
const cardData = indianCreditCards.find(card => card.name === cardName);
if (!cardData) {
addChatMessage('assistant', `I couldn't find details for "${cardName}". Please make sure you've entered the correct card name.`);
return;
}
// Check if card already exists
if (myCards.some(card => card.name === cardName)) {
addChatMessage('assistant', `You already have ${cardName} in your wallet! Would you like me to analyze it for you?`);
addCardModal.classList.add('hidden');
return;
}
// Add to user's cards
myCards.push(cardData);
// Render cards
renderCards();
// Close modal and reset form
addCardModal.classList.add('hidden');
cardForm.reset();
// Show success message
addChatMessage('assistant', `Successfully added ${cardName} to your cards! Would you like me to analyze it for you?`);
});
// Render cards
function renderCards() {
myCardsContainer.innerHTML = '';
myCards.forEach(card => {
const cardTypeClass = getCardTypeClass(card.type);
const cardTypeText = getCardTypeText(card.type);
const cardIcon = getCardIcon(card.type);
const cardElement = document.createElement('div');
cardElement.className = 'bg-white rounded-xl p-6 card-shadow fade-in';
cardElement.innerHTML = `
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="text-xl font-bold text-gray-800">${card.name}</h3>
<span class="inline-block ${cardTypeClass} text-xs px-2 py-1 rounded-full mt-1">${cardTypeText}</span>
</div>
<div class="${getCardIconBgClass(card.type)} text-white p-2 rounded-lg">
<i class="${cardIcon}"></i>
</div>
</div>
<div class="mb-4">
<div class="flex justify-between mb-2">
<span class="text-gray-600">Annual Fee</span>
<span class="font-medium">₹${card.annualFee}</span>
</div>
<div class="flex justify-between mb-2">
<span class="text-gray-600">Rewards Rate</span>
<span class="font-medium">${card.rewardsRate}</span>
</div>
</div>
<div class="mb-4">
<h4 class="text-sm font-semibold text-gray-700 mb-2">Key Benefits</h4>
<ul class="text-sm text-gray-600 space-y-1">
${card.benefits.map(benefit => `
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> ${benefit}</li>
`).join('')}
</ul>
</div>
<div class="flex justify-between pt-4 border-t border-gray-200">
<button class="analyze-btn text-purple-600 hover:text-purple-800 flex items-center" data-card="${card.name}">
<i class="fas fa-chart-line mr-2"></i> Analyze
</button>
<button class="remove-btn text-red-500 hover:text-red-700 flex items-center" data-card="${card.name}">
<i class="fas fa-trash-alt mr-2"></i> Remove
</button>
</div>
`;
myCardsContainer.appendChild(cardElement);
});
// Add event listeners to new buttons
document.querySelectorAll('.analyze-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
const cardName = e.target.getAttribute('data-card');
analyzeCard(cardName);
});
});
document.querySelectorAll('.remove-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
const cardName = e.target.getAttribute('data-card');
removeCard(cardName);
});
});
}
// Helper functions for card rendering
function getCardTypeClass(type) {
switch(type) {
case 'premium': return 'bg-purple-100 text-purple-800';
case 'premium travel': return 'bg-blue-100 text-blue-800';
case 'travel': return 'bg-indigo-100 text-indigo-800';
case 'cashback': return 'bg-green-100 text-green-800';
case 'online shopping': return 'bg-amber-100 text-amber-800';
case 'lifestyle': return 'bg-pink-100 text-pink-800';
case 'secured': return 'bg-gray-100 text-gray-800';
default: return 'bg-purple-100 text-purple-800';
}
}
function getCardTypeText(type) {
switch(type) {
case 'premium': return 'Premium';
case 'premium travel': return 'Premium Travel';
case 'travel': return 'Travel';
case 'cashback': return 'Cashback';
case 'online shopping': return 'Online Shopping';
case 'lifestyle': return 'Lifestyle';
case 'secured': return 'Secured';
default: return type.charAt(0).toUpperCase() + type.slice(1);
}
}
function getCardIcon(type) {
switch(type) {
case 'premium': return 'fas fa-star';
case 'premium travel': return 'fas fa-plane';
case 'travel': return 'fas fa-plane';
case 'cashback': return 'fas fa-rupee-sign';
case 'online shopping': return 'fas fa-shopping-cart';
case 'lifestyle': return 'fas fa-film';
case 'secured': return 'fas fa-lock';
default: return 'fas fa-credit-card';
}
}
function getCardIconBgClass(type) {
switch(type) {
case 'premium': return 'bg-purple-500';
case 'premium travel': return 'bg-blue-500';
case 'travel': return 'bg-indigo-500';
case 'cashback': return 'bg-green-500';
case 'online shopping': return 'bg-amber-500';
case 'lifestyle': return 'bg-pink-500';
case 'secured': return 'bg-gray-500';
default: return 'bg-purple-500';
}
}
// Analyze card
function analyzeCard(cardName) {
const card = myCards.find(c => c.name === cardName);
if (!card) return;
let analysis = `Analyzing ${cardName}...\n\n`;
analysis += `Annual Fee: ₹${card.annualFee}\n`;
analysis += `Rewards Rate: ${card.rewardsRate}\n\n`;
if (card.annualFee > 5000) {
analysis += `This is a premium card with a high annual fee. You should be spending at least ₹${Math.round(card.annualFee * 100 / 5)} annually to justify the fee.\n`;
} else if (card.annualFee > 0) {
analysis += `This card has a moderate annual fee. Make sure you're utilizing all the benefits to offset this cost.\n`;
} else {
analysis += `Great! This card has no annual fee, making it easy to keep in your wallet.\n`;
}
if (card.type.includes('travel')) {
analysis += `As a travel card, it's best used for flight bookings, hotel stays, and other travel expenses.\n`;
} else if (card.type.includes('cashback')) {
analysis += `This cashback card gives you direct money back on your spends - great for everyday use.\n`;
} else if (card.type.includes('shopping')) {
analysis += `Maximize this card's benefits by using it for online shopping on partner platforms.\n`;
}
analysis += `\nKey Benefits:\n`;
card.benefits.forEach(benefit => {
analysis += `- ${benefit}\n`;
});
addChatMessage('assistant', analysis);
// Scroll to chat section
document.querySelector('#chatContainer').scrollIntoView({ behavior: 'smooth' });
}
// Remove card
function removeCard(cardName) {
const index = myCards.findIndex(c => c.name === cardName);
if (index !== -1) {
myCards.splice(index, 1);
renderCards();
addChatMessage('assistant', `${cardName} has been removed from your cards.`);
}
}
// Chat functionality
function addChatMessage(sender, message) {
const messageDiv = document.createElement('div');
messageDiv.className = 'flex mb-4 fade-in';
if (sender === 'user') {
messageDiv.className += ' justify-end';
messageDiv.innerHTML = `
<div class="bg-purple-600 text-white rounded-lg p-3 max-w-3/4">
<p>${message}</p>
</div>
<div class="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center text-gray-600 ml-3 flex-shrink-0">
<i class="fas fa-user"></i>
</div>
`;
} else {
messageDiv.innerHTML = `
<div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center text-white mr-3 flex-shrink-0">
<i class="fas fa-robot"></i>
</div>
<div class="bg-gray-100 rounded-lg p-3 max-w-3/4">
<p class="text-gray-800">${message.replace(/\n/g, '<br>')}</p>
</div>
`;
}
chatContainer.appendChild(messageDiv);
chatContainer.scrollTop = chatContainer.scrollHeight;
}
sendChatBtn.addEventListener('click', sendMessage);
chatInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') sendMessage();
});
function sendMessage() {
const message = chatInput.value.trim();
if (message) {
addChatMessage('user', message);
chatInput.value = '';
// Simulate assistant response after a short delay
setTimeout(() => {
let response;
if (message.toLowerCase().includes('best') && message.toLowerCase().includes('card')) {
if (myCards.length === 0) {
response = `You don't have any cards added yet. Would you like me to recommend some?`;
} else {
// Find card with highest rewards
const bestCard = myCards.reduce((prev, current) => {
const prevRate = parseFloat(prev.rewardsRate);
const currentRate = parseFloat(current.rewardsRate);
return (prevRate > currentRate) ? prev : current;
});
response = `Based on rewards rate, your best card is ${bestCard.name} with ${bestCard.rewardsRate} rewards. `;
response += `It's great for ${bestCard.type} spending. Would you like me to analyze it in more detail?`;
}
}
else if (message.toLowerCase().includes('travel') || message.toLowerCase().includes('flight') || message.toLowerCase().includes('hotel')) {
const travelCards = myCards.filter(card => card.type.includes('travel'));
if (travelCards.length > 0) {
response = `For travel spending, consider these cards:\n`;
travelCards.forEach(card => {
response += `- ${card.name}: ${card.rewardsRate} on travel (₹${card.annualFee} annual fee)\n`;
});
response += `\nThe ${travelCards[0].name} would be best for your upcoming trip.`;
} else {
response = `You don't have any travel cards. Would you like me to recommend some?`;
}
}
else if (message.toLowerCase().includes('cashback') || message.toLowerCase().includes('cash back')) {
const cashbackCards = myCards.filter(card => card.type.includes('cashback'));
if (cashbackCards.length > 0) {
response = `For cashback, these are your options:\n`;
cashbackCards.forEach(card => {
response += `- ${card.name}: ${card.rewardsRate} cashback (₹${card.annualFee} annual fee)\n`;
});
response += `\nUse these for everyday spending to maximize your returns.`;
} else {
response = `You don't have any dedicated cashback cards. The ICICI Amazon Pay (5% cashback) is a great option to consider.`;
}
}
else if (message.toLowerCase().includes('fee') || message.toLowerCase().includes('annual')) {
const noFeeCards = myCards.filter(card => card.annualFee === 0);
const feeCards = myCards.filter(card => card.annualFee > 0);
if (noFeeCards.length > 0) {
response = `You have ${noFeeCards.length} cards with no annual fee:\n`;
noFeeCards.forEach(card => {
response += `- ${card.name}\n`;
});
}
if (feeCards.length > 0) {
response += `\nCards with annual fees:\n`;
feeCards.forEach(card => {
response += `- ${card.name}: ₹${card.annualFee}\n`;
});
response += `\nMake sure the rewards from these cards outweigh their annual fees.`;
}
}
else if (message.toLowerCase().includes('compare')) {
if (myCards.length >= 2) {
response = `Comparing your cards:\n\n`;
myCards.forEach(card => {
response += `${card.name} (${card.type}):\n`;
response += `- Annual Fee: ₹${card.annualFee}\n`;
response += `- Rewards Rate: ${card.rewardsRate}\n`;
response += `- Best for: ${card.benefits[0]}\n\n`;
});
response += `To maximize rewards, use each card for its strongest category.`;
} else {
response = `You need at least 2 cards to compare. Would you like to add another card?`;
}
}
else if (message.toLowerCase().includes('recommend')) {
response = `Based on your spending habits, I recommend these Indian credit cards:\n\n`;
response += `1. Axis Magnus (Premium Travel) - Best for frequent travelers\n`;
response += `2. ICICI Amazon Pay - Best for Amazon shoppers\n`;
response += `3. SBI SimplyCLICK - Best for online shopping\n`;
response += `\nWould you like me to add any of these for you?`;
}
else {
response = `I can help you analyze your cards, compare them, or find the best card for specific spending categories. `;
response += `Try asking about "best travel card", "maximize cashback", or "compare my cards".`;
}
addChatMessage('assistant', response);
}, 1000);
}
}
// Quick question buttons
quickQuestionBtns.forEach(btn => {
btn.addEventListener('click', (e) => {
chatInput.value = e.target.textContent;
sendMessage();
});
});
// Refresh cards
refreshCardsBtn.addEventListener('click', () => {
renderCards();
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>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=vs4vijay/autocodetest" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html>