| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Elite Tax Analysis Workspace | TurboTax Titanium</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <style> |
| .glass-morphism { |
| background: rgba(255, 255, 255, 0.1); |
| backdrop-filter: blur(10px); |
| border-radius: 12px; |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| } |
| .warning-banner { |
| background: linear-gradient(90deg, rgba(239,68,68,0.2) 0%, rgba(239,68,68,0.5) 100%); |
| border-left: 4px solid #EF4444; |
| } |
| .entity-node { |
| transition: all 0.3s ease; |
| } |
| .entity-node:hover { |
| transform: scale(1.05); |
| box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); |
| } |
| </style> |
| </head> |
| <body class="min-h-screen bg-gradient-to-br from-gray-900 to-gray-800 text-white"> |
| |
| <nav class="glass-morphism mx-4 mt-4 rounded-full px-6 py-3 flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i data-feather="dollar-sign" class="text-green-400"></i> |
| <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-green-400 to-blue-500">TurboTax Titanium</span> |
| </div> |
| <div class="hidden md:flex space-x-6"> |
| <a href="index.html" class="hover:text-green-400 transition">Dashboard</a> |
| <a href="#" class="hover:text-green-400 transition">Tax Forms</a> |
| <a href="#" class="hover:text-green-400 transition">Documents</a> |
| <a href="#" class="hover:text-green-400 transition">Analytics</a> |
| <a href="enterprise.html" class="hover:text-green-400 transition">Enterprise</a> |
| <a href="taxworkspace.html" class="text-green-400 font-medium">Tax Workspace</a> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <button class="bg-gradient-to-r from-green-500 to-blue-500 px-4 py-2 rounded-full hover:opacity-90 transition"> |
| <i data-feather="user" class="inline mr-1"></i> Account |
| </button> |
| <button class="md:hidden"> |
| <i data-feather="menu"></i> |
| </button> |
| </div> |
| </nav> |
|
|
| |
| <div class="warning-banner mx-4 mt-6 p-4 rounded-lg flex items-start"> |
| <i data-feather="alert-triangle" class="text-red-500 mr-3 mt-1"></i> |
| <div> |
| <h3 class="font-bold">FOR CPA/ATTORNEY REVIEW ONLY</h3> |
| <p class="text-sm">This workspace generates advisory outputs only. All recommendations must be reviewed by licensed professionals before any filing action.</p> |
| </div> |
| </div> |
|
|
| |
| <main class="container mx-auto px-4 py-8"> |
| <div class="grid grid-cols-1 lg:grid-cols-12 gap-6"> |
| |
| <div class="lg:col-span-2 glass-morphism p-4 rounded-xl"> |
| <h3 class="font-bold mb-4 flex items-center"> |
| <i data-feather="layers" class="mr-2"></i> Modules |
| </h3> |
| <ul class="space-y-2"> |
| <li><a href="#upload" class="flex items-center px-3 py-2 rounded-lg hover:bg-gray-700"><i data-feather="upload" class="w-4 h-4 mr-2"></i> Document Upload</a></li> |
| <li><a href="#entities" class="flex items-center px-3 py-2 rounded-lg hover:bg-gray-700"><i data-feather="users" class="w-4 h-4 mr-2"></i> Entity Mapping</a></li> |
| <li><a href="#reconciliation" class="flex items-center px-3 py-2 rounded-lg hover:bg-gray-700"><i data-feather="refresh-cw" class="w-4 h-4 mr-2"></i> Ledger Reconciliation</a></li> |
| <li><a href="#fractionalization" class="flex items-center px-3 py-2 rounded-lg hover:bg-gray-700"><i data-feather="divide" class="w-4 h-4 mr-2"></i> Fractionalization</a></li> |
| <li><a href="#insurance" class="flex items-center px-3 py-2 rounded-lg hover:bg-gray-700"><i data-feather="shield" class="w-4 h-4 mr-2"></i> Insurance Analysis</a></li> |
| <li><a href="#tax" class="flex items-center px-3 py-2 rounded-lg hover:bg-gray-700"><i data-feather="file-text" class="w-4 h-4 mr-2"></i> Tax Advisory</a></li> |
| </ul> |
| </div> |
|
|
| |
| <div class="lg:col-span-8 space-y-6"> |
| |
| <section id="upload" class="glass-morphism p-6 rounded-xl"> |
| <h2 class="text-2xl font-bold mb-4 flex items-center"> |
| <i data-feather="upload" class="mr-2"></i> Document Upload |
| </h2> |
| <div class="border-2 border-dashed border-gray-600 rounded-lg p-8 text-center"> |
| <div class="max-w-md mx-auto"> |
| <i data-feather="file" class="w-12 h-12 mx-auto text-gray-400"></i> |
| <h4 class="mt-4 font-medium">Drag & drop files here</h4> |
| <p class="text-sm text-gray-400 mt-1">Supported formats: PDF, DOCX, XLSX, CSV, OFX/QFX, MT940</p> |
| <button class="mt-4 bg-gradient-to-r from-green-500 to-blue-500 px-6 py-2 rounded-full text-sm font-medium hover:opacity-90 transition"> |
| Select Files |
| </button> |
| </div> |
| </div> |
| <div class="mt-6"> |
| <h4 class="font-medium mb-2">Uploaded Documents</h4> |
| <div class="space-y-2"> |
| <div class="flex items-center justify-between p-3 rounded-lg bg-gray-800"> |
| <div class="flex items-center"> |
| <i data-feather="file-text" class="text-blue-400 mr-3"></i> |
| <span>Bank_Statement_Q2_2023.pdf</span> |
| </div> |
| <span class="text-xs text-gray-400">Processing</span> |
| </div> |
| <div class="flex items-center justify-between p-3 rounded-lg bg-gray-800"> |
| <div class="flex items-center"> |
| <i data-feather="file-text" class="text-green-400 mr-3"></i> |
| <span>Loan_Agreement.docx</span> |
| </div> |
| <span class="text-xs text-green-400">Complete</span> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="entities" class="glass-morphism p-6 rounded-xl"> |
| <h2 class="text-2xl font-bold mb-4 flex items-center"> |
| <i data-feather="users" class="mr-2"></i> Entity Mapping |
| </h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> |
| <div class="entity-node bg-gray-800 p-4 rounded-lg"> |
| <div class="flex items-center mb-3"> |
| <div class="bg-blue-500 rounded-full w-8 h-8 flex items-center justify-center mr-3"> |
| <i data-feather="user" class="text-white w-4 h-4"></i> |
| </div> |
| <div> |
| <h4 class="font-medium">John Smith</h4> |
| <p class="text-xs text-gray-400">Borrower</p> |
| </div> |
| </div> |
| <div class="text-xs text-gray-300"> |
| <p class="flex items-center mb-1"><i data-feather="file" class="w-3 h-3 mr-1"></i> Loan_Agreement.docx</p> |
| <p class="flex items-center"><i data-feather="clock" class="w-3 h-3 mr-1"></i> Added 2 days ago</p> |
| </div> |
| </div> |
| <div class="entity-node bg-gray-800 p-4 rounded-lg"> |
| <div class="flex items-center mb-3"> |
| <div class="bg-purple-500 rounded-full w-8 h-8 flex items-center justify-center mr-3"> |
| <i data-feather="briefcase" class="text-white w-4 h-4"></i> |
| </div> |
| <div> |
| <h4 class="font-medium">First National Bank</h4> |
| <p class="text-xs text-gray-400">Lender</p> |
| </div> |
| </div> |
| <div class="text-xs text-gray-300"> |
| <p class="flex items-center mb-1"><i data-feather="file" class="w-3 h-3 mr-1"></i> Loan_Agreement.docx</p> |
| <p class="flex items-center"><i data-feather="clock" class="w-3 h-3 mr-1"></i> Added 2 days ago</p> |
| </div> |
| </div> |
| <div class="entity-node bg-gray-800 p-4 rounded-lg"> |
| <div class="flex items-center mb-3"> |
| <div class="bg-green-500 rounded-full w-8 h-8 flex items-center justify-center mr-3"> |
| <i data-feather="home" class="text-white w-4 h-4"></i> |
| </div> |
| <div> |
| <h4 class="font-medium">123 Main St</h4> |
| <p class="text-xs text-gray-400">Property</p> |
| </div> |
| </div> |
| <div class="text-xs text-gray-300"> |
| <p class="flex items-center mb-1"><i data-feather="file" class="w-3 h-3 mr-1"></i> Loan_Agreement.docx</p> |
| <p class="flex items-center"><i data-feather="clock" class="w-3 h-3 mr-1"></i> Added 2 days ago</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="reconciliation" class="glass-morphism p-6 rounded-xl"> |
| <h2 class="text-2xl font-bold mb-4 flex items-center"> |
| <i data-feather="refresh-cw" class="mr-2"></i> Ledger Reconciliation |
| </h2> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-700"> |
| <thead> |
| <tr> |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Date</th> |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Description</th> |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Amount</th> |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Match</th> |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Status</th> |
| </tr> |
| </thead> |
| <tbody class="divide-y divide-gray-700"> |
| <tr> |
| <td class="px-4 py-3 whitespace-nowrap">03/15/2023</td> |
| <td class="px-4 py-3">Loan Payment - First National</td> |
| <td class="px-4 py-3">$1,200.00</td> |
| <td class="px-4 py-3"> |
| <span class="px-2 py-1 text-xs rounded-full bg-green-900 text-green-100">Exact</span> |
| </td> |
| <td class="px-4 py-3"> |
| <div class="flex items-center"> |
| <div class="h-2 w-2 rounded-full bg-green-500 mr-2"></div> |
| <span>Reconciled</span> |
| </div> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-4 py-3 whitespace-nowrap">04/15/2023</td> |
| <td class="px-4 py-3">Loan Payment - First National</td> |
| <td class="px-4 py-3">$1,200.00</td> |
| <td class="px-4 py-3"> |
| <span class="px-2 py-1 text-xs rounded-full bg-green-900 text-green-100">Exact</span> |
| </td> |
| <td class="px-4 py-3"> |
| <div class="flex items-center"> |
| <div class="h-2 w-2 rounded-full bg-green-500 mr-2"></div> |
| <span>Reconciled</span> |
| </div> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-4 py-3 whitespace-nowrap">05/15/2023</td> |
| <td class="px-4 py-3">Loan Payment - First National</td> |
| <td class="px-4 py-3">$1,200.00</td> |
| <td class="px-4 py-3"> |
| <span class="px-2 py-1 text-xs rounded-full bg-yellow-900 text-yellow-100">Partial</span> |
| </td> |
| <td class="px-4 py-3"> |
| <div class="flex items-center"> |
| <div class="h-2 w-2 rounded-full bg-yellow-500 mr-2"></div> |
| <span>Needs Review</span> |
| </div> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </section> |
|
|
| |
| <section id="fractionalization" class="glass-morphism p-6 rounded-xl"> |
| <h2 class="text-2xl font-bold mb-4 flex items-center"> |
| <i data-feather="divide" class="mr-2"></i> Fractionalization Analysis |
| </h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <h3 class="font-medium mb-3">Pattern Analysis</h3> |
| <div class="bg-gray-800 rounded-lg p-4"> |
| <canvas id="fractionChart" height="200"></canvas> |
| </div> |
| </div> |
| <div> |
| <h3 class="font-medium mb-3">Estimated Range</h3> |
| <div class="bg-gray-800 rounded-lg p-4"> |
| <div class="space-y-4"> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium">Minimum Estimate</span> |
| <span class="text-sm">9x</span> |
| </div> |
| <div class="w-full bg-gray-700 rounded-full h-2"> |
| <div class="bg-red-500 h-2 rounded-full" style="width: 30%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium">Most Likely</span> |
| <span class="text-sm">12x</span> |
| </div> |
| <div class="w-full bg-gray-700 rounded-full h-2"> |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 60%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium">Maximum Estimate</span> |
| <span class="text-sm">33x</span> |
| </div> |
| <div class="w-full bg-gray-700 rounded-full h-2"> |
| <div class="bg-green-500 h-2 rounded-full" style="width: 100%"></div> |
| </div> |
| </div> |
| </div> |
| <div class="mt-4 p-3 bg-gray-700 rounded-lg"> |
| <p class="text-xs text-gray-300">Confidence Score: 72% (based on 3 matching transactions)</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="insurance" class="glass-morphism p-6 rounded-xl"> |
| <h2 class="text-2xl font-bold mb-4 flex items-center"> |
| <i data-feather="shield" class="mr-2"></i> Insurance Analysis |
| </h2> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
| <div class="bg-gray-800 p-4 rounded-lg"> |
| <h3 class="font-medium mb-2">Policy Coverage</h3> |
| <div class="flex items-end mb-2"> |
| <span class="text-3xl font-bold mr-2">$250,000</span> |
| <span class="text-sm text-gray-400 mb-1">estimated</span> |
| </div> |
| <p class="text-xs text-gray-400">Based on property valuation and similar policies</p> |
| </div> |
| <div class="bg-gray-800 p-4 rounded-lg"> |
| <h3 class="font-medium mb-2">Claim Frequency</h3> |
| <div class="flex items-end mb-2"> |
| <span class="text-3xl font-bold mr-2">12%</span> |
| <span class="text-sm text-gray-400 mb-1">probability</span> |
| </div> |
| <p class="text-xs text-gray-400">Based on regional claim history</p> |
| </div> |
| <div class="bg-gray-800 p-4 rounded-lg"> |
| <h3 class="font-medium mb-2">Insurer Rating</h3> |
| <div class="flex items-center mb-2"> |
| <div class="flex"> |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
| <i data-feather="star" class="w-4 h-4 text-gray-400 fill-current"></i> |
| </div> |
| <span class="text-sm ml-2">4.0/5.0</span> |
| </div> |
| <p class="text-xs text-gray-400">Based on industry ratings</p> |
| </div> |
| </div> |
| <div class="mt-4 p-4 bg-gray-800 rounded-lg"> |
| <h3 class="font-medium mb-2">Advisory Notice</h3> |
| <p class="text-sm text-gray-300 mb-3">This analysis is for informational purposes only and does not constitute a claim or guarantee of coverage.</p> |
| <button class="bg-gradient-to-r from-blue-500 to-purple-500 px-4 py-2 rounded-full text-sm font-medium hover:opacity-90 transition"> |
| Generate Claim Checklist |
| </button> |
| </div> |
| </section> |
|
|
| |
| <section id="tax" class="glass-morphism p-6 rounded-xl"> |
| <h2 class="text-2xl font-bold mb-4 flex items-center"> |
| <i data-feather="file-text" class="mr-2"></i> Tax Advisory |
| </h2> |
| <div class="space-y-4"> |
| <div class="bg-gray-800 p-4 rounded-lg"> |
| <h3 class="font-medium mb-2">Interest Deduction Analysis</h3> |
| <p class="text-sm text-gray-300 mb-3">Potential mortgage interest deduction of $4,320 based on 3 payments of $1,200 with $120 interest component each.</p> |
| <div class="flex flex-wrap gap-2"> |
| <span class="px-2 py-1 text-xs rounded-full bg-blue-900 text-blue-100">Form 1098</span> |
| <span class="px-2 py-1 text-xs rounded-full bg-blue-900 text-blue-100">Schedule A</span> |
| </div> |
| </div> |
| <div class="bg-gray-800 p-4 rounded-lg"> |
| <h3 class="font-medium mb-2">Potential Audit Flags</h3> |
| <p class="text-sm text-gray-300 mb-3">Repeated identical payments may trigger IRS scrutiny. Consider documenting loan terms and payment history.</p> |
| <div class="flex flex-wrap gap-2"> |
| <span class="px-2 py-1 text-xs rounded-full bg-red-900 text-red-100">Form 8275</span> |
| <span class="px-2 py-1 text-xs rounded-full bg-red-900 text-red-100">Disclosure</span> |
| </div> |
| </div> |
| </div> |
| <div class="mt-6 bg-gray-800 p-4 rounded-lg"> |
| <h3 class="font-medium mb-4">CPA Bundle Options</h3> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
| <div class="bg-gray-700 p-4 rounded-lg"> |
| <h4 class="font-medium text-center mb-2">Conservative</h4> |
| <ul class="text-xs space-y-1 mb-4"> |
| <li class="flex items-center"><i data-feather="check" class="w-3 h-3 mr-1 text-green-400"></i> Claim only documented deductions</li> |
| <li class="flex items-center"><i data-feather="check" class="w-3 h-3 mr-1 text-green-400"></i> Full documentation</li> |
| <li class="flex items-center"><i data-feather="check" class="w-3 h-3 mr-1 text-green-400"></i> IRS-safe positions</li> |
| </ul> |
| <button class="w-full bg-gray-600 hover:bg-gray-500 px-3 py-2 rounded-full text-sm font-medium transition"> |
| Select |
| </button> |
| </div> |
| <div class="bg-gray-700 p-4 rounded-lg border-2 border-blue-500"> |
| <div class="absolute -top-2 -right-2 bg-blue-500 text-white text-xs px-2 py-1 rounded-full">Recommended</div> |
| <h4 class="font-medium text-center mb-2">Balanced</h4> |
| <ul class="text-xs space-y-1 mb-4"> |
| <li class="flex items-center"><i data-feather="check" class="w-3 h-3 mr-1 text-blue-400"></i> Claim likely valid deductions</li> |
| <li class="flex items-center"><i data-feather="check" class="w-3 h-3 mr-1 text-blue-400"></i> Partial documentation</li> |
| <li class="flex items-center"><i data-feather="check" class="w-3 h-3 mr-1 text-blue-400"></i> Reasonable interpretations</li> |
| </ul> |
| <button class="w-full bg-gradient-to-r from-blue-500 to-purple-500 px-3 py-2 rounded-full text-sm font-medium hover:opacity-90 transition"> |
| Select |
| </button> |
| </div> |
| <div class="bg-gray-700 p-4 rounded-lg"> |
| <h4 class="font-medium text-center mb-2">Aggressive</h4> |
| <ul class="text-xs space-y-1 mb-4"> |
| <li class="flex items-center"><i data-feather="check" class="w-3 h-3 mr-1 text-yellow-400"></i> Claim all possible deductions</li> |
| <li class="flex items-center"><i data-feather="check" class="w-3 h-3 mr-1 text-yellow-400"></i> Minimal documentation</li> |
| <li class="flex items-center"><i data-feather="check" class="w-3 h-3 mr-1 text-yellow-400"></i> Novel interpretations</li> |
| </ul> |
| <button class="w-full bg-gray-600 hover:bg-gray-500 px-3 py-2 rounded-full text-sm font-medium transition"> |
| Select |
| </button> |
| </div> |
| </div> |
| </div> |
| <div class="mt-6"> |
| <div class="flex items-start"> |
| <input type="checkbox" id="cpaReview" class="mt-1 mr-2"> |
| <label for="cpaReview" class="text-sm">I confirm that I will have all recommendations reviewed by a licensed CPA or tax attorney before filing</label> |
| </div> |
| <div class="flex flex-wrap gap-3 mt-4"> |
| <button class="bg-gradient-to-r from-green-500 to-blue-500 px-6 py-3 rounded-full font-medium hover:opacity-90 transition"> |
| Generate CPA Bundle |
| </button> |
| <button class="glass-morphism px-6 py-3 rounded-full font-medium hover:bg-gray-700 transition"> |
| Export to CSV |
| </button> |
| <button class="glass-morphism px-6 py-3 rounded-full font-medium hover:bg-gray-700 transition"> |
| Print Summary |
| </button> |
| </div> |
| </div> |
| </section> |
| </div> |
|
|
| |
| <div class="lg:col-span-2 space-y-6"> |
| <div class="glass-morphism p-4 rounded-xl"> |
| <h3 class="font-bold mb-3 flex items-center"> |
| <i data-feather="info" class="mr-2"></i> Case Overview |
| </h3> |
| <div class="space-y-3"> |
| <div> |
| <p class="text-xs text-gray-400 mb-1">Documents Processed</p> |
| <p class="font-medium">2 of 2</p> |
| </div> |
| <div> |
| <p class="text-xs text-gray-400 mb-1">Entities Identified</p> |
| <p class="font-medium">3</p> |
| </div> |
| <div> |
| <p class="text-xs text-gray-400 mb-1">Transactions</p> |
| <p class="font-medium">3 matched</p> |
| </div> |
| <div> |
| <p class="text-xs text-gray-400 mb-1">Last Updated</p> |
| <p class="font-medium">Today, 10:42 AM</p> |
| </div> |
| </div> |
| </div> |
| <div class="glass-morphism p-4 rounded-xl"> |
| <h3 class="font-bold mb-3 flex items-center"> |
| <i data-feather="alert-circle" class="mr-2"></i> Potential Issues |
| </h3> |
| <div class="space-y-3"> |
| <div class="flex items-start"> |
| <i data-feather="alert-triangle" class="text-yellow-400 mr-2 mt-1 flex-shrink-0"></i> |
| <div> |
| <p class="font-medium text-sm">Partial Transaction Match</p> |
| <p class="text-xs text-gray-400">May 15 payment doesn't exactly match loan terms</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <i data-feather="alert-triangle" class="text-yellow-400 mr-2 mt-1 flex-shrink-0"></i> |
| <div> |
| <p class="font-medium text-sm">Fractionalization Pattern</p> |
| <p class="text-xs text-gray-400">Potential 12x multiplier detected</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="glass-morphism p-4 rounded-xl"> |
| <h3 class="font-bold mb-3 flex items-center"> |
| <i data-feather="clipboard" class="mr-2"></i> Recommended Forms |
| </h3> |
| <div class="space-y-2"> |
| <div class="flex items-center justify-between p-2 hover:bg-gray-700 rounded"> |
| <span class="text-sm">Form 1098</span> |
| <i data-feather="download" class="w-4 h-4 text-gray-400"></i> |
| </div> |
| <div class="flex items-center justify-between p-2 hover:bg-gray-700 rounded"> |
| <span class="text-sm">Schedule A</span> |
| <i data-feather="download" class="w-4 h-4 text-gray-400"></i> |
| </div> |
| <div class="flex items-center justify-between p-2 hover:bg-gray-700 rounded"> |
| <span class="text-sm">Form 8275</span> |
| <i data-feather="download" class="w-4 h-4 text-gray-400"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <footer class="glass-morphism mt-16 py-8"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="flex items-center space-x-2 mb-4 md:mb-0"> |
| <i data-feather="dollar-sign" class="text-green-400"></i> |
| <span class="text-lg font-bold">TurboTax Titanium</span> |
| </div> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white transition">Terms</a> |
| <a href="#" class="text-gray-400 hover:text-white transition">Privacy</a> |
| <a href="#" class="text-gray-400 hover:text-white transition">Security</a> |
| <a href="#" class="text-gray-400 hover:text-white transition">Contact</a> |
| </div> |
| </div> |
| <div class="border-t border-gray-700 mt-8 pt-8"> |
| <p class="text-sm text-gray-400 text-center"> |
| © 2023 TurboTax Titanium. All tax recommendations must be reviewed by licensed professionals. |
| This software does not constitute tax, legal, or financial advice. |
| </p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| feather.replace(); |
| |
| |
| const fractionCtx = document.getElementById('fractionChart').getContext('2d'); |
| new Chart(fractionCtx, { |
| type: 'line', |
| data: { |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], |
| datasets: [{ |
| label: 'Payment Amount', |
| data: [1200, 1200, 1200, 1200, 1200, 1200], |
| borderColor: '#3B82F6', |
| backgroundColor: 'rgba(59, 130, 246, 0.1)', |
| tension: 0.1, |
| fill: true |
| }] |
| }, |
| options: { |
| responsive: true, |
| plugins: { |
| legend: { |
| display: false |
| } |
| }, |
| scales: { |
| y: { |
| beginAtZero: false, |
| ticks: { |
| color: '#9CA3AF' |
| }, |
| grid: { |
| color: 'rgba(255, 255, 255, 0.1)' |
| } |
| }, |
| x: { |
| ticks: { |
| color: '#9CA3AF' |
| }, |
| grid: { |
| color: 'rgba(255, 255, 255, 0.1)' |
| } |
| } |
| } |
| } |
| }); |
| |
| |
| const uploadArea = document.querySelector('.border-dashed'); |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
| uploadArea.addEventListener(eventName, preventDefaults, false); |
| }); |
| |
| function preventDefaults(e) { |
| e.preventDefault(); |
| e.stopPropagation(); |
| } |
| |
| ['dragenter', 'dragover'].forEach(eventName => { |
| uploadArea.addEventListener(eventName, highlight, false); |
| }); |
| |
| ['dragleave', 'drop'].forEach(eventName => { |
| uploadArea.addEventListener(eventName, unhighlight, false); |
| }); |
| |
| function highlight() { |
| uploadArea.classList.add('border-blue-400'); |
| } |
| |
| function unhighlight() { |
| uploadArea.classList.remove('border-blue-400'); |
| } |
| |
| uploadArea.addEventListener('drop', handleDrop, false); |
| |
| function handleDrop(e) { |
| const dt = e.dataTransfer; |
| const files = dt.files; |
| console.log('Files dropped:', files); |
| |
| } |
| }); |
| </script> |
| </body> |
| </html> |
