|
<!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> |