apptax / index.html
nattywar's picture
Add 2 files
b491bf8 verified
<!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 styles */
.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);
}
/* Responsive styles */
@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>
<!-- Add Client Modal -->
<div class="modal" id="addClientModal">
<div class="modal-content">
<span class="close-modal" onclick="closeModal('addClientModal')">&times;</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>
<!-- Client Manager Modal -->
<div class="modal" id="clientModal">
<div class="modal-content">
<span class="close-modal" onclick="closeModal('clientModal')">&times;</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>
<!-- Deduction Finder Modal -->
<div class="modal" id="deductionModal">
<div class="modal-content">
<span class="close-modal" onclick="closeModal('deductionModal')">&times;</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>
<!-- Calculator Modal -->
<div class="modal" id="calculatorModal">
<div class="modal-content">
<span class="close-modal" onclick="closeModal('calculatorModal')">&times;</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">
&copy; 2023 TaxPro Maximizer. All rights reserved.
</div>
</div>
</footer>
<script>
// Mobile menu toggle
document.querySelector('.mobile-menu').addEventListener('click', function() {
const nav = document.querySelector('nav ul');
nav.style.display = nav.style.display === 'flex' ? 'none' : 'flex';
});
// Modal functions
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';
}
// Close modals when clicking outside
window.addEventListener('click', function(event) {
if (event.target.classList.contains('modal')) {
event.target.style.display = 'none';
}
});
// Simple tax calculator functionality
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';
// This would be replaced with actual calculation logic
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>