Spaces:
Running
Running
| <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</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); } | |
| } | |
| </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</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"> | |
| <!-- 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 Credit Card for Your Lifestyle</h2> | |
| <p class="text-gray-600 mb-6">CardX analyzes your spending habits and recommends the best 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> | |
| </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 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> | |
| <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="e.g. Chase Sapphire Preferred" required> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="cardType" class="block text-gray-700 mb-2">Card Type</label> | |
| <select id="cardType" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" required> | |
| <option value="">Select a type</option> | |
| <option value="travel">Travel</option> | |
| <option value="cashback">Cash Back</option> | |
| <option value="business">Business</option> | |
| <option value="student">Student</option> | |
| <option value="secured">Secured</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="annualFee" class="block text-gray-700 mb-2">Annual Fee ($)</label> | |
| <input type="number" id="annualFee" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="e.g. 95" required> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="rewardsRate" class="block text-gray-700 mb-2">Rewards Rate (%)</label> | |
| <input type="number" step="0.1" id="rewardsRate" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="e.g. 2.5" required> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="cardBenefits" class="block text-gray-700 mb-2">Key Benefits</label> | |
| <textarea id="cardBenefits" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" rows="3" placeholder="Enter key benefits separated by commas"></textarea> | |
| </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> | |
| <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 --> | |
| <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">Chase Sapphire Preferred</h3> | |
| <span class="inline-block bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full mt-1">Travel</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">$95</span> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-600">Rewards Rate</span> | |
| <span class="font-medium">2.5%</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> 2x points on travel & dining</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> 25% more value when redeeming for travel</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> No foreign transaction fees</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 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">Hi there! I'm your CardX assistant. 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 cash back | |
| </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">Capital One Venture X</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">$395</span> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-600">Rewards Rate</span> | |
| <span class="font-medium">2-10%</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 miles on hotels & rental cars</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> $300 annual travel credit</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> 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">Citi Double Cash</h3> | |
| <span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full mt-1">Cash Back</span> | |
| </div> | |
| <div class="bg-green-500 text-white p-2 rounded-lg"> | |
| <i class="fas fa-dollar-sign"></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">2%</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> 1% when you buy, 1% when you pay</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> No annual fee</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Simple cash back structure</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">American Express Gold</h3> | |
| <span class="inline-block bg-amber-100 text-amber-800 text-xs px-2 py-1 rounded-full mt-1">Dining</span> | |
| </div> | |
| <div class="bg-amber-500 text-white p-2 rounded-lg"> | |
| <i class="fas fa-utensils"></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">$250</span> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-600">Rewards Rate</span> | |
| <span class="font-medium">4%</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> 4x points at restaurants</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> $120 dining credit annually</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> $120 Uber Cash 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> | |
| </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</h3> | |
| <p class="text-gray-400">The smart way to manage and optimize your 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>© 2023 CardX. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Sample data for cards | |
| const sampleCards = [ | |
| { | |
| name: "Chase Sapphire Preferred", | |
| type: "travel", | |
| annualFee: 95, | |
| rewardsRate: 2.5, | |
| benefits: ["2x points on travel & dining", "25% more value when redeeming for travel", "No foreign transaction fees"] | |
| }, | |
| { | |
| name: "Capital One Venture X", | |
| type: "premium travel", | |
| annualFee: 395, | |
| rewardsRate: 5, | |
| benefits: ["10x miles on hotels & rental cars", "$300 annual travel credit", "Airport lounge access"] | |
| }, | |
| { | |
| name: "Citi Double Cash", | |
| type: "cashback", | |
| annualFee: 0, | |
| rewardsRate: 2, | |
| benefits: ["1% when you buy, 1% when you pay", "No annual fee", "Simple cash back structure"] | |
| }, | |
| { | |
| name: "American Express Gold", | |
| type: "dining", | |
| annualFee: 250, | |
| rewardsRate: 4, | |
| benefits: ["4x points at restaurants", "$120 dining credit annually", "$120 Uber Cash annually"] | |
| } | |
| ]; | |
| // DOM Elements | |
| const addCardBtn = document.getElementById('addCardBtn'); | |
| const closeModalBtn = document.getElementById('closeModalBtn'); | |
| const addCardModal = document.getElementById('addCardModal'); | |
| const cardForm = document.getElementById('cardForm'); | |
| 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', () => { | |
| addCardModal.classList.remove('hidden'); | |
| }); | |
| closeModalBtn.addEventListener('click', () => { | |
| addCardModal.classList.add('hidden'); | |
| }); | |
| // Add new card | |
| cardForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| const cardName = document.getElementById('cardName').value; | |
| const cardType = document.getElementById('cardType').value; | |
| const annualFee = document.getElementById('annualFee').value; | |
| const rewardsRate = document.getElementById('rewardsRate').value; | |
| const cardBenefits = document.getElementById('cardBenefits').value.split(',').map(b => b.trim()); | |
| // Create new card object | |
| const newCard = { | |
| name: cardName, | |
| type: cardType, | |
| annualFee: annualFee, | |
| rewardsRate: rewardsRate, | |
| benefits: cardBenefits | |
| }; | |
| // Add to sample cards | |
| sampleCards.push(newCard); | |
| // 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 = ''; | |
| sampleCards.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 'travel': return 'bg-blue-100 text-blue-800'; | |
| case 'premium travel': return 'bg-indigo-100 text-indigo-800'; | |
| case 'cashback': return 'bg-green-100 text-green-800'; | |
| case 'dining': return 'bg-amber-100 text-amber-800'; | |
| case 'business': return 'bg-gray-100 text-gray-800'; | |
| default: return 'bg-purple-100 text-purple-800'; | |
| } | |
| } | |
| function getCardTypeText(type) { | |
| switch(type) { | |
| case 'travel': return 'Travel'; | |
| case 'premium travel': return 'Premium Travel'; | |
| case 'cashback': return 'Cash Back'; | |
| case 'dining': return 'Dining'; | |
| case 'business': return 'Business'; | |
| default: return type.charAt(0).toUpperCase() + type.slice(1); | |
| } | |
| } | |
| function getCardIcon(type) { | |
| switch(type) { | |
| case 'travel': return 'fas fa-plane'; | |
| case 'premium travel': return 'fas fa-crown'; | |
| case 'cashback': return 'fas fa-dollar-sign'; | |
| case 'dining': return 'fas fa-utensils'; | |
| case 'business': return 'fas fa-briefcase'; | |
| default: return 'fas fa-credit-card'; | |
| } | |
| } | |
| function getCardIconBgClass(type) { | |
| switch(type) { | |
| case 'travel': return 'bg-blue-500'; | |
| case 'premium travel': return 'bg-indigo-500'; | |
| case 'cashback': return 'bg-green-500'; | |
| case 'dining': return 'bg-amber-500'; | |
| case 'business': return 'bg-gray-500'; | |
| default: return 'bg-purple-500'; | |
| } | |
| } | |
| // Analyze card | |
| function analyzeCard(cardName) { | |
| const card = sampleCards.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 > 300) { | |
| analysis += `This is a premium card with a high annual fee. Make sure you're utilizing all the benefits to justify the cost.\n`; | |
| } else if (card.annualFee > 0) { | |
| analysis += `This card has a moderate annual fee. The rewards should offset this cost based on your spending.\n`; | |
| } else { | |
| analysis += `Great! This card has no annual fee, making it easy to keep in your wallet.\n`; | |
| } | |
| if (card.rewardsRate >= 3) { | |
| analysis += `The rewards rate is excellent! Focus on using this card for bonus categories.\n`; | |
| } else if (card.rewardsRate >= 1.5) { | |
| analysis += `The rewards rate is good. This could be a solid everyday card.\n`; | |
| } else { | |
| analysis += `The rewards rate is low. Consider using this card only when other cards don't offer better rewards.\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 = sampleCards.findIndex(c => c.name === cardName); | |
| if (index !== -1) { | |
| sampleCards.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}</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')) { | |
| const bestCard = sampleCards.reduce((prev, current) => | |
| (prev.rewardsRate > current.rewardsRate) ? prev : current | |
| ); | |
| response = `Based on rewards rate, your best card is ${bestCard.name} with ${bestCard.rewardsRate}% back. `; | |
| 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 = sampleCards.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}% back on travel ($${card.annualFee} annual fee)\n`; | |
| }); | |
| response += `\nThe Capital One Venture X offers lounge access which is great for frequent travelers.`; | |
| } else { | |
| response = `You don't have any travel cards. Would you like me to recommend some?`; | |
| } | |
| } | |
| else if (message.toLowerCase().includes('cash back') || message.toLowerCase().includes('cashback')) { | |
| const cashbackCards = sampleCards.filter(card => card.type.includes('cashback')); | |
| if (cashbackCards.length > 0) { | |
| response = `For cash back, these are your options:\n`; | |
| cashbackCards.forEach(card => { | |
| response += `- ${card.name}: ${card.rewardsRate}% cash back ($${card.annualFee} annual fee)\n`; | |
| }); | |
| response += `\nThe Citi Double Cash gives you 2% on everything with no annual fee.`; | |
| } else { | |
| response = `You don't have any dedicated cash back cards. The Citi Double Cash (2% back) is a great option to consider.`; | |
| } | |
| } | |
| else if (message.toLowerCase().includes('fee') || message.toLowerCase().includes('annual')) { | |
| const noFeeCards = sampleCards.filter(card => card.annualFee === 0); | |
| const feeCards = sampleCards.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 (sampleCards.length >= 2) { | |
| response = `Comparing your cards:\n\n`; | |
| sampleCards.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 { | |
| 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 cash back", 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!'); | |
| }); | |
| // 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> |