|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI Conversion Automator - Project Overview</title> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script> |
|
|
<style> |
|
|
:root { |
|
|
--primary: #4a6cf7; |
|
|
--secondary: #6a11cb; |
|
|
--dark: #1e293b; |
|
|
--light: #f8fafc; |
|
|
--gray: #94a3b8; |
|
|
--accent: #0ea5e9; |
|
|
} |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; |
|
|
} |
|
|
|
|
|
body { |
|
|
background: linear-gradient(135deg, #f0f4ff, #e6f0ff); |
|
|
color: var(--dark); |
|
|
min-height: 100vh; |
|
|
padding: 20px; |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
.container { |
|
|
max-width: 1000px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
header { |
|
|
text-align: center; |
|
|
margin-bottom: 30px; |
|
|
padding: 30px 0; |
|
|
background: linear-gradient(135deg, var(--primary), var(--secondary)); |
|
|
border-radius: 15px; |
|
|
color: white; |
|
|
box-shadow: 0 10px 20px rgba(74, 108, 247, 0.2); |
|
|
} |
|
|
|
|
|
h1 { |
|
|
font-size: 2.8rem; |
|
|
margin-bottom: 10px; |
|
|
font-weight: 800; |
|
|
} |
|
|
|
|
|
.subtitle { |
|
|
font-size: 1.4rem; |
|
|
opacity: 0.9; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.card { |
|
|
background: white; |
|
|
border-radius: 15px; |
|
|
padding: 30px; |
|
|
margin-bottom: 30px; |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); |
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|
|
} |
|
|
|
|
|
.card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
h2 { |
|
|
font-size: 1.8rem; |
|
|
margin-bottom: 20px; |
|
|
color: var(--primary); |
|
|
position: relative; |
|
|
padding-bottom: 10px; |
|
|
} |
|
|
|
|
|
h2::after { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
width: 60px; |
|
|
height: 4px; |
|
|
background: linear-gradient(to right, var(--primary), var(--secondary)); |
|
|
border-radius: 2px; |
|
|
} |
|
|
|
|
|
p { |
|
|
margin-bottom: 15px; |
|
|
font-size: 1.1rem; |
|
|
} |
|
|
|
|
|
.highlight { |
|
|
background: linear-gradient(120deg, rgba(74, 108, 247, 0.1), rgba(106, 17, 203, 0.1)); |
|
|
border-left: 4px solid var(--primary); |
|
|
padding: 15px; |
|
|
border-radius: 0 8px 8px 0; |
|
|
margin: 20px 0; |
|
|
} |
|
|
|
|
|
ul { |
|
|
padding-left: 30px; |
|
|
margin: 15px 0; |
|
|
} |
|
|
|
|
|
li { |
|
|
margin-bottom: 10px; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
li::before { |
|
|
content: "•"; |
|
|
color: var(--primary); |
|
|
font-weight: bold; |
|
|
position: absolute; |
|
|
left: -20px; |
|
|
} |
|
|
|
|
|
.features-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
|
gap: 20px; |
|
|
margin: 20px 0; |
|
|
} |
|
|
|
|
|
.feature-card { |
|
|
background: var(--light); |
|
|
border-radius: 10px; |
|
|
padding: 20px; |
|
|
border: 1px solid #e2e8f0; |
|
|
} |
|
|
|
|
|
.feature-card h3 { |
|
|
font-size: 1.3rem; |
|
|
margin-bottom: 10px; |
|
|
color: var(--secondary); |
|
|
} |
|
|
|
|
|
.screenshot-placeholder { |
|
|
background: linear-gradient(135deg, #f0f4ff, #e0e7ff); |
|
|
height: 200px; |
|
|
border-radius: 10px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
margin: 20px 0; |
|
|
border: 2px dashed var(--gray); |
|
|
color: var(--gray); |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.enhancements { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
|
gap: 20px; |
|
|
margin-top: 20px; |
|
|
} |
|
|
|
|
|
.enhancement { |
|
|
background: linear-gradient(135deg, #f8fafc, #f1f5f9); |
|
|
padding: 20px; |
|
|
border-radius: 10px; |
|
|
border-left: 4px solid var(--accent); |
|
|
} |
|
|
|
|
|
.enhancement h4 { |
|
|
font-size: 1.2rem; |
|
|
margin-bottom: 10px; |
|
|
color: var(--dark); |
|
|
} |
|
|
|
|
|
.controls { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
gap: 20px; |
|
|
margin: 40px 0; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
padding: 15px 35px; |
|
|
border-radius: 50px; |
|
|
font-size: 1.1rem; |
|
|
font-weight: 600; |
|
|
cursor: pointer; |
|
|
border: none; |
|
|
transition: all 0.3s ease; |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.btn-download { |
|
|
background: linear-gradient(135deg, var(--primary), var(--secondary)); |
|
|
color: white; |
|
|
box-shadow: 0 5px 15px rgba(74, 108, 247, 0.3); |
|
|
} |
|
|
|
|
|
.btn-download:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 8px 20px rgba(74, 108, 247, 0.4); |
|
|
} |
|
|
|
|
|
.btn-preview { |
|
|
background: white; |
|
|
color: var(--primary); |
|
|
border: 2px solid var(--primary); |
|
|
} |
|
|
|
|
|
.btn-preview:hover { |
|
|
background: #f0f4ff; |
|
|
} |
|
|
|
|
|
footer { |
|
|
text-align: center; |
|
|
padding: 20px; |
|
|
color: var(--gray); |
|
|
font-size: 0.9rem; |
|
|
margin-top: 20px; |
|
|
} |
|
|
|
|
|
|
|
|
@media print { |
|
|
body { |
|
|
background: white; |
|
|
padding: 0; |
|
|
} |
|
|
|
|
|
.container { |
|
|
max-width: 100%; |
|
|
} |
|
|
|
|
|
.controls { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.card { |
|
|
box-shadow: none; |
|
|
border: 1px solid #e2e8f0; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container" id="content"> |
|
|
<header> |
|
|
<h1>AI Conversion Automator</h1> |
|
|
<div class="subtitle">Project Overview</div> |
|
|
</header> |
|
|
|
|
|
<section class="card"> |
|
|
<h2>1. The Challenge & What the Funnel Does</h2> |
|
|
<p>One common issue with free live classes or webinars is that many people who sign up never actually show up. This lowers engagement and means the effort and money spent attracting them often go to waste.</p> |
|
|
|
|
|
<div class="highlight"> |
|
|
<p>The goal here is simple but powerful: get more of those registered users to actually join the session by sending them personalized reminders and estimating who's most likely to attend.</p> |
|
|
</div> |
|
|
|
|
|
<h3>Here's how the funnel works, step-by-step:</h3> |
|
|
<ul> |
|
|
<li><strong>Collect Leads:</strong> We start by gathering basic details about people who register — like their name, email, interests, and how they heard about the event.</li> |
|
|
<li><strong>Estimate Attendance:</strong> Using straightforward rules, the system guesses how likely each person is to attend based on factors such as how close the event is and their interest area.</li> |
|
|
<li><strong>Craft Personalized Messages:</strong> Each lead gets a custom reminder message that feels relevant and friendly, either generated by AI or using predefined templates.</li> |
|
|
<li><strong>Simulate Campaign:</strong> Before sending anything out for real, the system runs a mock campaign to see how many people might open and click on these messages.</li> |
|
|
<li><strong>Export & Use:</strong> Finally, the enriched lead list—with attendance scores and messages—is ready to be exported and plugged into real email or SMS tools.</li> |
|
|
</ul> |
|
|
</section> |
|
|
|
|
|
<section class="card"> |
|
|
<h2>2. What I Built — The Core Features</h2> |
|
|
<p>Here's a quick rundown of the MVP:</p> |
|
|
|
|
|
<div class="features-grid"> |
|
|
<div class="feature-card"> |
|
|
<h3>Sample Leads Generator</h3> |
|
|
<p>Easily create fake but realistic lead data to test the system without needing real users.</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card"> |
|
|
<h3>Upload & Preview Leads</h3> |
|
|
<p>Upload your own CSV files and instantly see the data inside the app.</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card"> |
|
|
<h3>Simple Attendance Prediction</h3> |
|
|
<p>Instead of heavy machine learning, this uses smart heuristics to estimate who's likely to attend.</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card"> |
|
|
<h3>Personalized Message Creator</h3> |
|
|
<p>Generates reminder messages that can use AI for a more natural touch or fall back to friendly templates.</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card"> |
|
|
<h3>Campaign Simulator</h3> |
|
|
<p>A safe way to "send" messages and track opens and clicks without actually sending emails.</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card"> |
|
|
<h3>CSV Export</h3> |
|
|
<p>Download your enhanced leads with all the new data to use wherever you want next.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3>Screenshots</h3> |
|
|
<div class="screenshot-placeholder"> |
|
|
(Add your own screenshots here showing each step — for example, the sample CSV generator, the upload screen, message preview, simulation stats, and export button.) |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="card"> |
|
|
<h2>3. If I Had Two More Weeks…</h2> |
|
|
<p>There's a lot more this app could do. Here's what I'd focus on next:</p> |
|
|
|
|
|
<div class="enhancements"> |
|
|
<div class="enhancement"> |
|
|
<h4>Better Attendance Prediction</h4> |
|
|
<p>Swap out the simple heuristic model for a data-driven machine learning model trained on real event attendance data. That would improve accuracy a lot.</p> |
|
|
</div> |
|
|
|
|
|
<div class="enhancement"> |
|
|
<h4>Real Campaign Integration</h4> |
|
|
<p>Connect with actual email and SMS services like SendGrid or Twilio so users can run real campaigns directly from the app.</p> |
|
|
</div> |
|
|
|
|
|
<div class="enhancement"> |
|
|
<h4>UI Improvements</h4> |
|
|
<p>Make the interface more intuitive, add bulk edit options, and provide better visual feedback on how campaigns are performing.</p> |
|
|
</div> |
|
|
|
|
|
<div class="enhancement"> |
|
|
<h4>Multi-Event Support</h4> |
|
|
<p>Allow users to manage several different live classes or webinars at once, with scheduling and tailored messaging for each.</p> |
|
|
</div> |
|
|
|
|
|
<div class="enhancement"> |
|
|
<h4>Deeper Personalization</h4> |
|
|
<p>Use more detailed user data and behavior insights to make reminder messages even more engaging.</p> |
|
|
</div> |
|
|
|
|
|
<div class="enhancement"> |
|
|
<h4>Analytics Dashboard</h4> |
|
|
<p>Build a comprehensive dashboard showing funnel conversion rates, attendance trends, and message effectiveness.</p> |
|
|
</div> |
|
|
|
|
|
<div class="enhancement"> |
|
|
<h4>User Accounts & Security</h4> |
|
|
<p>Add login and role-based access so teams can securely collaborate on campaigns.</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</div> |
|
|
|
|
|
<div class="controls"> |
|
|
<button class="btn btn-download" id="downloadPdf"> |
|
|
<i class="fas fa-download"></i> Download as PDF |
|
|
</button> |
|
|
<button class="btn btn-preview" id="printPreview"> |
|
|
<i class="fas fa-print"></i> Print Preview |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<footer> |
|
|
AI Conversion Automator Project Overview | Created with HTML, CSS & JavaScript |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
document.getElementById('downloadPdf').addEventListener('click', function() { |
|
|
const element = document.getElementById('content'); |
|
|
const opt = { |
|
|
margin: 15, |
|
|
filename: 'AI_Conversion_Automator_Project_Overview.pdf', |
|
|
image: { type: 'jpeg', quality: 0.98 }, |
|
|
html2canvas: { scale: 2 }, |
|
|
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' } |
|
|
}; |
|
|
|
|
|
|
|
|
const originalText = this.innerHTML; |
|
|
this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Generating PDF...'; |
|
|
this.disabled = true; |
|
|
|
|
|
|
|
|
html2pdf().set(opt).from(element).save().then(() => { |
|
|
|
|
|
this.innerHTML = originalText; |
|
|
this.disabled = false; |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.getElementById('printPreview').addEventListener('click', function() { |
|
|
window.print(); |
|
|
}); |
|
|
</script> |
|
|
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script> |
|
|
</body> |
|
|
</html> |
