| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>TaxPro Maximizer | Boost Your Tax Side Business</title> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| :root { |
| --primary: #4361ee; |
| --secondary: #3f37c9; |
| --accent: #4895ef; |
| --light: #f8f9fa; |
| --dark: #212529; |
| --success: #4cc9f0; |
| --warning: #f72585; |
| --gray: #6c757d; |
| --light-gray: #e9ecef; |
| } |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| } |
| |
| body { |
| background-color: #f5f7fb; |
| color: var(--dark); |
| } |
| |
| .container { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 0 20px; |
| } |
| |
| header { |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); |
| color: white; |
| padding: 20px 0; |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
| position: sticky; |
| top: 0; |
| z-index: 100; |
| } |
| |
| .header-inner { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
| |
| .logo { |
| font-size: 24px; |
| font-weight: bold; |
| display: flex; |
| align-items: center; |
| } |
| |
| .logo i { |
| margin-right: 10px; |
| font-size: 28px; |
| } |
| |
| nav ul { |
| display: flex; |
| list-style: none; |
| } |
| |
| nav ul li { |
| margin-left: 25px; |
| } |
| |
| nav ul li a { |
| color: white; |
| text-decoration: none; |
| font-weight: 500; |
| transition: all 0.3s ease; |
| display: flex; |
| align-items: center; |
| } |
| |
| nav ul li a:hover { |
| opacity: 0.8; |
| } |
| |
| nav ul li a i { |
| margin-right: 8px; |
| } |
| |
| .mobile-menu { |
| display: none; |
| font-size: 24px; |
| cursor: pointer; |
| } |
| |
| .dashboard { |
| padding: 40px 0; |
| } |
| |
| .dashboard-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 30px; |
| } |
| |
| .dashboard-title { |
| font-size: 28px; |
| color: var(--dark); |
| } |
| |
| .quick-stats { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
| gap: 20px; |
| margin-bottom: 40px; |
| } |
| |
| .stat-card { |
| background: white; |
| border-radius: 10px; |
| padding: 25px; |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); |
| transition: transform 0.3s ease, box-shadow 0.3s ease; |
| } |
| |
| .stat-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); |
| } |
| |
| .stat-card.primary { |
| border-top: 4px solid var(--primary); |
| } |
| |
| .stat-card.warning { |
| border-top: 4px solid var(--warning); |
| } |
| |
| .stat-card.success { |
| border-top: 4px solid var(--success); |
| } |
| |
| .stat-card.accent { |
| border-top: 4px solid var(--accent); |
| } |
| |
| .stat-title { |
| font-size: 14px; |
| color: var(--gray); |
| margin-bottom: 10px; |
| display: flex; |
| align-items: center; |
| } |
| |
| .stat-title i { |
| margin-right: 8px; |
| } |
| |
| .stat-value { |
| font-size: 28px; |
| font-weight: bold; |
| margin-bottom: 5px; |
| } |
| |
| .stat-change { |
| font-size: 14px; |
| display: flex; |
| align-items: center; |
| } |
| |
| .stat-change.positive { |
| color: #28a745; |
| } |
| |
| .stat-change.negative { |
| color: #dc3545; |
| } |
| |
| .features-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
| gap: 25px; |
| margin-bottom: 40px; |
| } |
| |
| .feature-card { |
| background: white; |
| border-radius: 10px; |
| padding: 25px; |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); |
| transition: all 0.3s ease; |
| cursor: pointer; |
| } |
| |
| .feature-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); |
| } |
| |
| .feature-header { |
| display: flex; |
| align-items: center; |
| margin-bottom: 15px; |
| } |
| |
| .feature-icon { |
| width: 50px; |
| height: 50px; |
| border-radius: 12px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 20px; |
| color: white; |
| margin-right: 15px; |
| } |
| |
| .feature-icon.client-manager { |
| background: linear-gradient(135deg, #ff6b6b, #ff8787); |
| } |
| |
| .feature-icon.deduction-finder { |
| background: linear-gradient(135deg, #4cc9f0, #4895ef); |
| } |
| |
| .feature-icon.tax-calculator { |
| background: linear-gradient(135deg, #f72585, #b5179e); |
| } |
| |
| .feature-icon.document-organizer { |
| background: linear-gradient(135deg, #4361ee, #3a0ca3); |
| } |
| |
| .feature-icon.marketing-tools { |
| background: linear-gradient(135deg, #38b000, #70e000); |
| } |
| |
| .feature-icon.expense-tracker { |
| background: linear-gradient(135deg, #ff9e00, #ffaa00); |
| } |
| |
| .feature-title { |
| font-size: 18px; |
| font-weight: 600; |
| margin-bottom: 5px; |
| } |
| |
| .feature-desc { |
| color: var(--gray); |
| font-size: 14px; |
| line-height: 1.5; |
| margin-bottom: 15px; |
| } |
| |
| .feature-link { |
| color: var(--primary); |
| font-weight: 500; |
| text-decoration: none; |
| display: flex; |
| align-items: center; |
| font-size: 14px; |
| } |
| |
| .feature-link i { |
| margin-left: 5px; |
| transition: transform 0.3s ease; |
| } |
| |
| .feature-card:hover .feature-link i { |
| transform: translateX(3px); |
| } |
| |
| .recent-clients { |
| background: white; |
| border-radius: 10px; |
| padding: 25px; |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); |
| margin-bottom: 40px; |
| } |
| |
| .section-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 20px; |
| } |
| |
| .section-title { |
| font-size: 20px; |
| font-weight: 600; |
| } |
| |
| .view-all { |
| color: var(--primary); |
| text-decoration: none; |
| font-weight: 500; |
| font-size: 14px; |
| display: flex; |
| align-items: center; |
| } |
| |
| .view-all i { |
| margin-left: 5px; |
| } |
| |
| table { |
| width: 100%; |
| border-collapse: collapse; |
| } |
| |
| th, td { |
| padding: 12px 15px; |
| text-align: left; |
| border-bottom: 1px solid var(--light-gray); |
| } |
| |
| th { |
| font-weight: 600; |
| color: var(--gray); |
| font-size: 14px; |
| } |
| |
| td { |
| font-size: 15px; |
| } |
| |
| .status { |
| padding: 6px 12px; |
| border-radius: 20px; |
| font-size: 12px; |
| font-weight: 500; |
| } |
| |
| .status.pending { |
| background-color: #fff3cd; |
| color: #856404; |
| } |
| |
| .status.completed { |
| background-color: #d4edda; |
| color: #155724; |
| } |
| |
| .status.review { |
| background-color: #cce5ff; |
| color: #004085; |
| } |
| |
| .client-avatar { |
| width: 36px; |
| height: 36px; |
| border-radius: 50%; |
| margin-right: 10px; |
| object-fit: cover; |
| } |
| |
| .client-cell { |
| display: flex; |
| align-items: center; |
| } |
| |
| .client-name { |
| font-weight: 500; |
| } |
| |
| .action-btn { |
| background: none; |
| border: none; |
| cursor: pointer; |
| color: var(--gray); |
| transition: color 0.3s ease; |
| } |
| |
| .action-btn:hover { |
| color: var(--primary); |
| } |
| |
| .tax-tips { |
| background: white; |
| border-radius: 10px; |
| padding: 25px; |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); |
| } |
| |
| .tips-header { |
| display: flex; |
| align-items: center; |
| margin-bottom: 20px; |
| } |
| |
| .tips-icon { |
| width: 40px; |
| height: 40px; |
| border-radius: 10px; |
| background: linear-gradient(135deg, var(--warning), #b5179e); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: white; |
| font-size: 18px; |
| margin-right: 15px; |
| } |
| |
| .tip-card { |
| padding: 15px; |
| border-radius: 8px; |
| background-color: #f8f9fa; |
| margin-bottom: 15px; |
| border-left: 4px solid var(--accent); |
| } |
| |
| .tip-title { |
| font-weight: 600; |
| margin-bottom: 8px; |
| } |
| |
| .tip-desc { |
| font-size: 14px; |
| color: var(--gray); |
| line-height: 1.5; |
| } |
| |
| footer { |
| background-color: var(--dark); |
| color: white; |
| padding: 30px 0; |
| margin-top: 50px; |
| } |
| |
| .footer-content { |
| display: flex; |
| justify-content: space-between; |
| } |
| |
| .footer-logo { |
| font-size: 20px; |
| font-weight: bold; |
| margin-bottom: 15px; |
| } |
| |
| .footer-links h4 { |
| margin-bottom: 15px; |
| font-size: 16px; |
| } |
| |
| .footer-links ul { |
| list-style: none; |
| } |
| |
| .footer-links ul li { |
| margin-bottom: 8px; |
| } |
| |
| .footer-links ul li a { |
| color: #adb5bd; |
| text-decoration: none; |
| font-size: 14px; |
| transition: color 0.3s ease; |
| } |
| |
| .footer-links ul li a:hover { |
| color: white; |
| } |
| |
| .footer-social { |
| margin-top: 20px; |
| } |
| |
| .footer-social a { |
| color: white; |
| margin-right: 15px; |
| font-size: 18px; |
| transition: color 0.3s ease; |
| } |
| |
| .footer-social a:hover { |
| color: var(--accent); |
| } |
| |
| .copyright { |
| text-align: center; |
| margin-top: 30px; |
| padding-top: 20px; |
| border-top: 1px solid #495057; |
| color: #adb5bd; |
| font-size: 14px; |
| } |
| |
| |
| .modal { |
| display: none; |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background-color: rgba(0, 0, 0, 0.5); |
| z-index: 200; |
| justify-content: center; |
| align-items: center; |
| } |
| |
| .modal-content { |
| background: white; |
| border-radius: 10px; |
| width: 90%; |
| max-width: 600px; |
| max-height: 80vh; |
| overflow-y: auto; |
| padding: 30px; |
| position: relative; |
| } |
| |
| .close-modal { |
| position: absolute; |
| top: 20px; |
| right: 20px; |
| font-size: 24px; |
| cursor: pointer; |
| color: var(--gray); |
| } |
| |
| .modal-title { |
| font-size: 22px; |
| margin-bottom: 20px; |
| color: var(--primary); |
| } |
| |
| .form-group { |
| margin-bottom: 20px; |
| } |
| |
| .form-group label { |
| display: block; |
| margin-bottom: 8px; |
| font-weight: 500; |
| } |
| |
| .form-group input, |
| .form-group select, |
| .form-group textarea { |
| width: 100%; |
| padding: 12px 15px; |
| border: 1px solid var(--light-gray); |
| border-radius: 6px; |
| font-size: 15px; |
| } |
| |
| .form-actions { |
| display: flex; |
| justify-content: flex-end; |
| gap: 15px; |
| } |
| |
| .btn { |
| padding: 10px 20px; |
| border-radius: 6px; |
| font-weight: 500; |
| cursor: pointer; |
| border: none; |
| transition: all 0.3s ease; |
| } |
| |
| .btn-primary { |
| background-color: var(--primary); |
| color: white; |
| } |
| |
| .btn-primary:hover { |
| background-color: var(--secondary); |
| } |
| |
| .btn-outline { |
| background-color: transparent; |
| border: 1px solid var(--gray); |
| color: var(--dark); |
| } |
| |
| .btn-outline:hover { |
| background-color: var(--light-gray); |
| } |
| |
| |
| @media (max-width: 992px) { |
| .quick-stats { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| } |
| |
| @media (max-width: 768px) { |
| nav ul { |
| display: none; |
| } |
| |
| .mobile-menu { |
| display: block; |
| } |
| |
| .quick-stats { |
| grid-template-columns: 1fr; |
| } |
| |
| .features-grid { |
| grid-template-columns: 1fr; |
| } |
| |
| .footer-content { |
| flex-direction: column; |
| } |
| |
| .footer-links { |
| margin-bottom: 30px; |
| } |
| |
| table { |
| display: block; |
| overflow-x: auto; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <header> |
| <div class="container header-inner"> |
| <div class="logo"> |
| <i class="fas fa-calculator"></i> |
| <span>TaxPro Maximizer</span> |
| </div> |
| <nav> |
| <ul> |
| <li><a href="#"><i class="fas fa-home"></i> Dashboard</a></li> |
| <li><a href="#"><i class="fas fa-users"></i> Clients</a></li> |
| <li><a href="#"><i class="fas fa-file-invoice-dollar"></i> Filings</a></li> |
| <li><a href="#"><i class="fas fa-chart-line"></i> Reports</a></li> |
| <li><a href="#"><i class="fas fa-cog"></i> Settings</a></li> |
| <li><a href="#" class="user-profile"><i class="fas fa-user-circle"></i></a></li> |
| </ul> |
| </nav> |
| <div class="mobile-menu"> |
| <i class="fas fa-bars"></i> |
| </div> |
| </div> |
| </header> |
| |
| <main class="dashboard"> |
| <div class="container"> |
| <div class="dashboard-header"> |
| <h1 class="dashboard-title">Dashboard Overview</h1> |
| <button class="btn btn-primary" id="addClientBtn"> |
| <i class="fas fa-plus"></i> Add New Client |
| </button> |
| </div> |
| |
| <div class="quick-stats"> |
| <div class="stat-card primary"> |
| <div class="stat-title"> |
| <i class="fas fa-users"></i> Total Clients |
| </div> |
| <div class="stat-value">142</div> |
| <div class="stat-change positive"> |
| <i class="fas fa-arrow-up"></i> 12% from last month |
| </div> |
| </div> |
| |
| <div class="stat-card warning"> |
| <div class="stat-title"> |
| <i class="fas fa-file-invoice"></i> Active Filings |
| </div> |
| <div class="stat-value">24</div> |
| <div class="stat-change positive"> |
| <i class="fas fa-arrow-up"></i> 3 more than yesterday |
| </div> |
| </div> |
| |
| <div class="stat-card success"> |
| <div class="stat-title"> |
| <i class="fas fa-check-circle"></i> Completed Returns |
| </div> |
| <div class="stat-value">78</div> |
| <div class="stat-change positive"> |
| <i class="fas fa-arrow-up"></i> 20% from last season |
| </div> |
| </div> |
| |
| <div class="stat-card accent"> |
| <div class="stat-title"> |
| <i class="fas fa-dollar-sign"></i> Revenue YTD |
| </div> |
| <div class="stat-value">$14,820</div> |
| <div class="stat-change positive"> |
| <i class="fas fa-arrow-up"></i> 35% increase |
| </div> |
| </div> |
| </div> |
| |
| <div class="features-grid"> |
| <div class="feature-card" onclick="openFeatureModal('clientModal')"> |
| <div class="feature-header"> |
| <div class="feature-icon client-manager"> |
| <i class="fas fa-users"></i> |
| </div> |
| <div> |
| <h3 class="feature-title">Client Manager</h3> |
| <p class="feature-desc">Track all client information, deadlines, and documents in one place.</p> |
| </div> |
| </div> |
| <a href="#" class="feature-link">Open Client Manager <i class="fas fa-chevron-right"></i></a> |
| </div> |
| |
| <div class="feature-card" onclick="openFeatureModal('deductionModal')"> |
| <div class="feature-header"> |
| <div class="feature-icon deduction-finder"> |
| <i class="fas fa-search-dollar"></i> |
| </div> |
| <div> |
| <h3 class="feature-title">Deduction Finder</h3> |
| <p class="feature-desc">Discover every possible deduction and credit for your clients.</p> |
| </div> |
| </div> |
| <a href="#" class="feature-link">Find Deductions <i class="fas fa-chevron-right"></i></a> |
| </div> |
| |
| <div class="feature-card" onclick="openFeatureModal('calculatorModal')"> |
| <div class="feature-header"> |
| <div class="feature-icon tax-calculator"> |
| <i class="fas fa-calculator"></i> |
| </div> |
| <div> |
| <h3 class="feature-title">Tax Calculator</h3> |
| <p class="feature-desc">Estimate tax liability quickly with real-time calculations.</p> |
| </div> |
| </div> |
| <a href="#" class="feature-link">Calculate Now <i class="fas fa-chevron-right"></i></a> |
| </div> |
| |
| <div class="feature-card" onclick="openFeatureModal('documentsModal')"> |
| <div class="feature-header"> |
| <div class="feature-icon document-organizer"> |
| <i class="fas fa-folder-open"></i> |
| </div> |
| <div> |
| <h3 class="feature-title">Document Organizer</h3> |
| <p class="feature-desc">Securely store and categorize all tax documents.</p> |
| </div> |
| </div> |
| <a href="#" class="feature-link">Manage Documents <i class="fas fa-chevron-right"></i></a> |
| </div> |
| |
| <div class="feature-card" onclick="openFeatureModal('marketingModal')"> |
| <div class="feature-header"> |
| <div class="feature-icon marketing-tools"> |
| <i class="fas fa-bullhorn"></i> |
| </div> |
| <div> |
| <h3 class="feature-title">Marketing Tools</h3> |
| <p class="feature-desc">Templates and tools to grow your client base.</p> |
| </div> |
| </div> |
| <a href="#" class="feature-link">Boost Your Business <i class="fas fa-chevron-right"></i></a> |
| </div> |
| |
| <div class="feature-card" onclick="openFeatureModal('expenseModal')"> |
| <div class="feature-header"> |
| <div class="feature-icon expense-tracker"> |
| <i class="fas fa-receipt"></i> |
| </div> |
| <div> |
| <h3 class="feature-title">Expense Tracker</h3> |
| <p class="feature-desc">Track your business expenses and deductions.</p> |
| </div> |
| </div> |
| <a href="#" class="feature-link">Track Expenses <i class="fas fa-chevron-right"></i></a> |
| </div> |
| </div> |
| |
| <div class="recent-clients"> |
| <div class="section-header"> |
| <h2 class="section-title">Recent Client Activity</h2> |
| <a href="#" class="view-all">View All <i class="fas fa-chevron-right"></i></a> |
| </div> |
| |
| <table> |
| <thead> |
| <tr> |
| <th>Client</th> |
| <th>Filing Type</th> |
| <th>Due Date</th> |
| <th>Status</th> |
| <th>Action</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td> |
| <div class="client-cell"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Johnson" class="client-avatar"> |
| <span class="client-name">Sarah Johnson</span> |
| </div> |
| </td> |
| <td>1040 + Schedule C</td> |
| <td>Apr 15, 2023</td> |
| <td><span class="status completed">Completed</span></td> |
| <td><button class="action-btn"><i class="fas fa-ellipsis-h"></i></button></td> |
| </tr> |
| <tr> |
| <td> |
| <div class="client-cell"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen" class="client-avatar"> |
| <span class="client-name">Michael Chen</span> |
| </div> |
| </td> |
| <td>1040 + Schedule E</td> |
| <td>Apr 15, 2023</td> |
| <td><span class="status pending">Pending Docs</span></td> |
| <td><button class="action-btn"><i class="fas fa-ellipsis-h"></i></button></td> |
| </tr> |
| <tr> |
| <td> |
| <div class="client-cell"> |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emily Rodriguez" class="client-avatar"> |
| <span class="client-name">Emily Rodriguez</span> |
| </div> |
| </td> |
| <td>1120-S</td> |
| <td>Mar 15, 2023</td> |
| <td><span class="status completed">Completed</span></td> |
| <td><button class="action-btn"><i class="fas fa-ellipsis-h"></i></button></td> |
| </tr> |
| <tr> |
| <td> |
| <div class="client-cell"> |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="David Kim" class="client-avatar"> |
| <span class="client-name">David Kim</span> |
| </div> |
| </td> |
| <td>1040 + Schedule D</td> |
| <td>Apr 15, 2023</td> |
| <td><span class="status review">Review Needed</span></td> |
| <td><button class="action-btn"><i class="fas fa-ellipsis-h"></i></button></td> |
| </tr> |
| <tr> |
| <td> |
| <div class="client-cell"> |
| <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="Lisa Wong" class="client-avatar"> |
| <span class="client-name">Lisa Wong</span> |
| </div> |
| </td> |
| <td>1065 (Partnership)</td> |
| <td>Mar 15, 2023</td> |
| <td><span class="status completed">Completed</span></td> |
| <td><button class="action-btn"><i class="fas fa-ellipsis-h"></i></button></td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <div class="tax-tips"> |
| <div class="tips-header"> |
| <div class="tips-icon"> |
| <i class="fas fa-lightbulb"></i> |
| </div> |
| <h2 class="section-title">Maximization Tips & Reminders</h2> |
| </div> |
| |
| <div class="tip-card"> |
| <h3 class="tip-title">Quarterly Estimated Payments Due Soon (Sep 15)</h3> |
| <p class="tip-desc">Remind your self-employed clients about their upcoming estimated tax payment deadline. Consider helping them calculate the exact amount to avoid underpayment penalties.</p> |
| </div> |
| |
| <div class="tip-card"> |
| <h3 class="tip-title">Education Credits Often Overlooked</h3> |
| <p class="tip-desc">Review if clients with college expenses qualify for American Opportunity Credit or Lifetime Learning Credit. Even small expenses can lead to significant savings.</p> |
| </div> |
| |
| <div class="tip-card"> |
| <h3 class="tip-title">Home Office Deduction Multiplier</h3> |
| <p class="tip-desc">For clients working from home, you can now deduct $5/sq ft (max 300 sq ft) under the simplified method, or calculate actual expenses for potentially larger deductions.</p> |
| </div> |
| </div> |
| </div> |
| </main> |
| |
| |
| <div class="modal" id="addClientModal"> |
| <div class="modal-content"> |
| <span class="close-modal" onclick="closeModal('addClientModal')">×</span> |
| <h2 class="modal-title"><i class="fas fa-user-plus"></i> Add New Client</h2> |
| |
| <div class="form-group"> |
| <label for="clientName">Full Name</label> |
| <input type="text" id="clientName" placeholder="John Doe"> |
| </div> |
| |
| <div class="form-group"> |
| <label for="clientEmail">Email Address</label> |
| <input type="email" id="clientEmail" placeholder="john@example.com"> |
| </div> |
| |
| <div class="form-group"> |
| <label for="clientPhone">Phone Number</label> |
| <input type="tel" id="clientPhone" placeholder="(555) 123-4567"> |
| </div> |
| |
| <div class="form-group"> |
| <label for="clientType">Client Type</label> |
| <select id="clientType"> |
| <option value="individual">Individual</option> |
| <option value="business">Business</option> |
| <option value="family">Family Package</option> |
| <option value="estate">Estate/Trust</option> |
| </select> |
| </div> |
| |
| <div class="form-group"> |
| <label for="taxForms">Expected Tax Forms</label> |
| <select id="taxForms" multiple> |
| <option value="1040">1040 (Individual)</option> |
| <option value="schedule-c">Schedule C (Business)</option> |
| <option value="schedule-e">Schedule E (Rental)</option> |
| <option value="schedule-d">Schedule D (Capital Gains)</option> |
| <option value="1120">1120 (Corporation)</option> |
| <option value="1065">1065 (Partnership)</option> |
| </select> |
| </div> |
| |
| <div class="form-group"> |
| <label for="clientNotes">Notes</label> |
| <textarea id="clientNotes" rows="3" placeholder="Any special considerations or notes about this client..."></textarea> |
| </div> |
| |
| <div class="form-actions"> |
| <button class="btn btn-outline" onclick="closeModal('addClientModal')">Cancel</button> |
| <button class="btn btn-primary">Add Client</button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="modal" id="clientModal"> |
| <div class="modal-content"> |
| <span class="close-modal" onclick="closeModal('clientModal')">×</span> |
| <h2 class="modal-title"><i class="fas fa-users"></i> Client Manager</h2> |
| |
| <div class="feature-desc" style="margin-bottom: 20px;"> |
| Manage all your clients efficiently with our comprehensive client management tools. |
| Track deadlines, documents, communications, and more in one centralized location. |
| </div> |
| |
| <div class="form-group"> |
| <label>Search Clients</label> |
| <input type="text" placeholder="Search by name, email, or tax ID"> |
| </div> |
| |
| <div style="background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 20px;"> |
| <h4 style="margin-bottom: 10px;">Client Management Features:</h4> |
| <ul style="padding-left: 20px; line-height: 1.8;"> |
| <li>Client profile with all details and tax history</li> |
| <li>Document tracking and secure uploads</li> |
| <li>Deadline reminders and calendar integration</li> |
| <li>Client communication log</li> |
| <li>Custom questionnaire for tax preparation</li> |
| <li>Secure client portal for document exchange</li> |
| </ul> |
| </div> |
| |
| <div class="form-actions"> |
| <button class="btn btn-outline" onclick="closeModal('clientModal')">Close</button> |
| <button class="btn btn-primary">Open Client Manager</button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="modal" id="deductionModal"> |
| <div class="modal-content"> |
| <span class="close-modal" onclick="closeModal('deductionModal')">×</span> |
| <h2 class="modal-title"><i class="fas fa-search-dollar"></i> Deduction Finder</h2> |
| |
| <div class="feature-desc" style="margin-bottom: 20px;"> |
| Never miss a deduction again! Our smart deduction finder analyzes client profiles to identify every possible |
| tax break they may qualify for, even ones they might not know about. |
| </div> |
| |
| <div class="form-group"> |
| <label>Select Client</label> |
| <select> |
| <option value="">Select a client to analyze</option> |
| <option value="1">Sarah Johnson</option> |
| <option value="2">Michael Chen</option> |
| <option value="3">Emily Rodriguez</option> |
| <option value="4">David Kim</option> |
| </select> |
| </div> |
| |
| <div style="display: flex; gap: 15px; margin-bottom: 20px;"> |
| <div style="flex: 1; background: #e6f7ff; padding: 15px; border-radius: 8px;"> |
| <h4 style="margin-bottom: 10px; color: #0066cc;">Standard Detection</h4> |
| <ul style="padding-left: 20px; line-height: 1.8;"> |
| <li>Common deductions (mortgage, charity, etc.)</li> |
| <li>Basic credits and adjustments</li> |
| <li>Quick overview of potential savings</li> |
| </ul> |
| </div> |
| <div style="flex: 1; background: #f0fff0; padding: 15px; border-radius: 8px;"> |
| <h4 style="margin-bottom: 10px; color: #008000;">Advanced Detection</h4> |
| <ul style="padding-left: 20px; line-height: 1.8;"> |
| <li>Industry-specific deductions</li> |
| <li>Overlooked niche credits</li> |
| <li>State-specific tax breaks</li> |
| <li>Retirement account strategies</li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="form-actions"> |
| <button class="btn btn-outline" onclick="closeModal('deductionModal')">Close</button> |
| <button class="btn btn-primary">Find Deductions</button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="modal" id="calculatorModal"> |
| <div class="modal-content"> |
| <span class="close-modal" onclick="closeModal('calculatorModal')">×</span> |
| <h2 class="modal-title"><i class="fas fa-calculator"></i> Tax Calculator</h2> |
| |
| <div class="feature-desc" style="margin-bottom: 20px;"> |
| Quickly estimate tax liability for yourself or your clients with our real-time tax calculator. |
| Adjust variables to see how different decisions affect the bottom line. |
| </div> |
| |
| <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;"> |
| <div class="form-group"> |
| <label>Filing Status</label> |
| <select> |
| <option>Single</option> |
| <option>Married Filing Jointly</option> |
| <option>Married Filing Separately</option> |
| <option>Head of Household</option> |
| <option>Qualifying Widow(er)</option> |
| </select> |
| </div> |
| |
| <div class="form-group"> |
| <label>Income</label> |
| <input type="number" placeholder="$"> |
| </div> |
| </div> |
| |
| <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;"> |
| <div class="form-group"> |
| <label>Deductions</label> |
| <input type="number" placeholder="$"> |
| </div> |
| |
| <div class="form-group"> |
| <label>Credits</label> |
| <input type="number" placeholder="$"> |
| </div> |
| </div> |
| |
| <div style="background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 20px; text-align: center;"> |
| <h4 style="margin-bottom: 5px;">Estimated Tax Liability</h4> |
| <div style="font-size: 24px; font-weight: bold;">$0.00</div> |
| <div style="font-size: 14px; color: #666;">Based on standard assumptions</div> |
| </div> |
| |
| <div class="form-actions"> |
| <button class="btn btn-outline" onclick="closeModal('calculatorModal')">Close</button> |
| <button class="btn btn-primary">Calculate</button> |
| </div> |
| </div> |
| </div> |
| |
| <footer> |
| <div class="container"> |
| <div class="footer-content"> |
| <div> |
| <div class="footer-logo">TaxPro Maximizer</div> |
| <p style="color: #adb5bd; margin-bottom: 20px; font-size: 14px; max-width: 300px;"> |
| Empowering tax professionals to maximize their side business with smart tools and insights. |
| </p> |
| <div class="footer-social"> |
| <a href="#"><i class="fab fa-twitter"></i></a> |
| <a href="#"><i class="fab fa-facebook-f"></i></a> |
| <a href="#"><i class="fab fa-linkedin-in"></i></a> |
| <a href="#"><i class="fab fa-instagram"></i></a> |
| </div> |
| </div> |
| |
| <div class="footer-links"> |
| <h4>Features</h4> |
| <ul> |
| <li><a href="#">Client Manager</a></li> |
| <li><a href="#">Deduction Finder</a></li> |
| <li><a href="#">Tax Calculator</a></li> |
| <li><a href="#">Document Organizer</a></li> |
| </ul> |
| </div> |
| |
| <div class="footer-links"> |
| <h4>Resources</h4> |
| <ul> |
| <li><a href="#">Tax Law Updates</a></li> |
| <li><a href="#">Document Templates</a></li> |
| <li><a href="#">Marketing Tools</a></li> |
| <li><a href="#">Training Videos</a></li> |
| </ul> |
| </div> |
| |
| <div class="footer-links"> |
| <h4>Support</h4> |
| <ul> |
| <li><a href="#">Help Center</a></li> |
| <li><a href="#">Live Chat</a></li> |
| <li><a href="#">Contact Us</a></li> |
| <li><a href="#">Feedback</a></li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="copyright"> |
| © 2023 TaxPro Maximizer. All rights reserved. |
| </div> |
| </div> |
| </footer> |
| |
| <script> |
| |
| document.querySelector('.mobile-menu').addEventListener('click', function() { |
| const nav = document.querySelector('nav ul'); |
| nav.style.display = nav.style.display === 'flex' ? 'none' : 'flex'; |
| }); |
| |
| |
| document.getElementById('addClientBtn').addEventListener('click', function() { |
| document.getElementById('addClientModal').style.display = 'flex'; |
| }); |
| |
| function openFeatureModal(modalId) { |
| document.getElementById(modalId).style.display = 'flex'; |
| } |
| |
| function closeModal(modalId) { |
| document.getElementById(modalId).style.display = 'none'; |
| } |
| |
| |
| window.addEventListener('click', function(event) { |
| if (event.target.classList.contains('modal')) { |
| event.target.style.display = 'none'; |
| } |
| }); |
| |
| |
| const calculatorModal = document.getElementById('calculatorModal'); |
| calculatorModal.addEventListener('click', function(e) { |
| if (e.target.innerHTML === 'Calculate') { |
| const calculatorResult = calculatorModal.querySelector('h4'); |
| calculatorResult.textContent = 'Estimated Tax Liability'; |
| |
| |
| const randomTax = (Math.random() * 5000 + 500).toFixed(2); |
| calculatorModal.querySelector('div > div:nth-child(2)').textContent = '$' + randomTax; |
| |
| alert('Full calculation would be performed here based on inputs'); |
| } |
| }); |
| </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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> |
| </html> |
