Skip to content

Instantly share code, notes, and snippets.

@kelvin-c-web

kelvin-c-web/index.html

Created April 24, 2025 04:39
Show Gist options
  • Save kelvin-c-web/97fe752d96acdadc9480f5fa68c2a578 to your computer and use it in GitHub Desktop.
Save kelvin-c-web/97fe752d96acdadc9480f5fa68c2a578 to your computer and use it in GitHub Desktop.
Download ZIP
Onboarding form
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flowva - Quick Start</title>
<style>
:root {
--primary: #9013FE;
--primary-light: #A29BFE;
--dark: #2D3436;
--light: #F5F6FA;
--border-radius: 12px;
--box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: var(--light);
color: var(--dark);
line-height: 1.6;
}
.container {
max-width: 600px;
margin: 2rem auto;
padding: 2rem;
background: white;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
}
.step {
display: none;
animation: fadeIn 0.5s ease;
min-height: 450px;
flex-direction: column;
}
.step.active {
display: flex;
}
h1, h2, h3 {
color: var(--primary);
margin-bottom: 1rem;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.5rem;
}
p {
margin-bottom: 1.5rem;
}
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
background-color: var(--primary);
color: white;
border: none;
border-radius: var(--border-radius);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
text-decoration: none;
}
.btn:hover {
background-color: var(--primary-light);
transform: translateY(-2px);
}
.btn-secondary {
background-color: white;
color: var(--primary);
border: 1px solid var(--primary);
}
.btn-secondary:hover {
background-color: var(--light);
}
.btn-group {
display: flex;
gap: 1rem;
margin-top: auto;
padding-top: 2rem;
}
.btn-group .btn {
flex: 1;
}
.use-case-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
margin-bottom: 1.5rem;
}
.use-case-item {
display: flex;
flex-direction: column;
padding: 1.5rem;
border: 1px solid #ddd;
border-radius: var(--border-radius);
cursor: pointer;
transition: all 0.3s ease;
}
.use-case-item:hover {
border-color: var(--primary);
transform: translateY(-2px);
}
.use-case-item.selected {
background-color: var(--primary-light);
border-color: var(--primary);
}
.demo-preview {
margin: 2rem 0;
padding: 1rem;
border: 1px dashed #ddd;
border-radius: var(--border-radius);
background-color: #f9f9f9;
}
.demo-item {
padding: 0.5rem;
margin: 0.5rem 0;
background-color: white;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.welcome-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.skip-link {
text-align: center;
margin-top: 1rem;
}
.skip-link a {
color: #666;
text-decoration: none;
font-size: 0.9rem;
}
.skip-link a:hover {
color: var(--primary);
}
/* New styles for category and tool selection */
.category-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-bottom: 1.5rem;
}
.category-item {
padding: 1rem;
border: 1px solid #ddd;
border-radius: var(--border-radius);
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
}
.category-item:hover {
border-color: var(--primary);
}
.category-item.selected {
background-color: var(--primary-light);
border-color: var(--primary);
}
.category-icon {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.tool-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.tool-item {
padding: 0.75rem;
border: 1px solid #ddd;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
font-size: 0.9rem;
}
.tool-item:hover {
border-color: var(--primary);
}
.tool-item.selected {
background-color: var(--primary-light);
border-color: var(--primary);
}
.tool-icon {
width: 24px;
height: 24px;
margin-bottom: 0.5rem;
}
.subtitle {
font-size: 0.9rem;
color: #666;
margin-top: -0.5rem;
margin-bottom: 1rem;
}
</style>
</head>
<body>
<div class="container">
<!-- Step 0: Welcome Screen -->
<div class="step active" id="step0">
<div class="welcome-content">
<h1>Welcome to Flowva</h1>
<p>Let's get you set up in 30 seconds. First, tell us your main goal so we can personalize your experience.</p>
</div>
<div class="btn-group">
<button class="btn" onclick="nextStep()">Get Started</button>
</div>
</div>
<!-- Step 1: Main Use Case -->
<div class="step" id="step1">
<h2>What's your main goal?</h2>
<p>Select one to see a personalized demo workspace</p>
<div class="use-case-grid">
<div class="use-case-item" onclick="selectUseCase('track-tools')">
<h3>Track my tool subscriptions</h3>
<p>See all my subscriptions in one place and reduce costs</p>
</div>
<div class="use-case-item" onclick="selectUseCase('organize-work')">
<h3>Organize my work tools</h3>
<p>Manage all my work apps from a single dashboard</p>
</div>
<div class="use-case-item" onclick="selectUseCase('discover-tools')">
<h3>Discover new tools</h3>
<p>Get recommendations based on my needs</p>
</div>
<div class="use-case-item" onclick="selectUseCase('earn-rewards')">
<h3>Earn Rewards</h3>
<p class="subtitle">Earn rewards for trying new tools and staying productive</p>
</div>
</div>
<div class="skip-link">
<a href="#" onclick="skipToDashboard()">Skip setup and go straight to my dashboard</a>
</div>
</div>
<!-- Step 2: Categories of Interest -->
<div class="step" id="step2">
<h2>What categories of tools are you interested in?</h2>
<p>Select all that apply (you can change these later)</p>
<div class="category-grid">
<div class="category-item" onclick="toggleCategory('design')">
<div class="category-icon">🎨</div>
<h3>Design</h3>
<p>UI/UX, graphics, prototyping</p>
</div>
<div class="category-item" onclick="toggleCategory('development')">
<div class="category-icon">💻</div>
<h3>Development</h3>
<p>Code, hosting, APIs</p>
</div>
<div class="category-item" onclick="toggleCategory('ai-tools')">
<div class="category-icon">🤖</div>
<h3>AI Tools</h3>
<p>AI assistants, automation</p>
</div>
<div class="category-item" onclick="toggleCategory('crm')">
<div class="category-icon">📇</div>
<h3>CRM</h3>
<p>Customer relationship</p>
</div>
<div class="category-item" onclick="toggleCategory('sales-marketing')">
<div class="category-icon">📢</div>
<h3>Sales & Marketing</h3>
<p>Outreach, campaigns</p>
</div>
<div class="category-item" onclick="toggleCategory('collaboration')">
<div class="category-icon">👥</div>
<h3>Collaboration</h3>
<p>Team communication</p>
</div>
<div class="category-item" onclick="toggleCategory('customer-support')">
<div class="category-icon">🛎️</div>
<h3>Customer Support</h3>
<p>Help desks, live chat</p>
</div>
<div class="category-item" onclick="toggleCategory('seo-analytics')">
<div class="category-icon">📈</div>
<h3>SEO & Analytics</h3>
<p>Tracking, optimization</p>
</div>
<div class="category-item" onclick="toggleCategory('product-management')">
<div class="category-icon">📦</div>
<h3>Product Management</h3>
<p>Roadmaps, feedback</p>
</div>
<div class="category-item" onclick="toggleCategory('project-management')">
<div class="category-icon">📋</div>
<h3>Project Management</h3>
<p>Tasks, workflows</p>
</div>
</div>
<div class="btn-group">
<button class="btn" onclick="nextStep()" id="continueFromCategories">Continue</button>
<button class="btn-secondary" onclick="prevStep()">Back</button>
</div>
</div>
<!-- Step 3: Specific Tools Selection -->
<div class="step" id="step3">
<h2>Which tools do you currently use?</h2>
<p>Select the tools you use regularly (we'll help track or find alternatives)</p>
<div id="toolsContainer">
<!-- Dynamic content will be inserted here based on selected categories -->
</div>
<div class="btn-group">
<button class="btn" onclick="nextStep()">Continue</button>
<button class="btn-secondary" onclick="prevStep()">Back</button>
</div>
</div>
<!-- Step 4: Demo Preview -->
<div class="step" id="step4">
<h2>Your Personalized Workspace</h2>
<p>Here's what we've prepared based on your selections:</p>
<div class="demo-preview" id="demoPreview">
<!-- Dynamic content will be inserted here -->
</div>
<div class="btn-group">
<button class="btn" onclick="nextStep()">Looks great! Continue</button>
<button class="btn-secondary" onclick="prevStep()">Make changes</button>
</div>
</div>
<!-- Step 5: Quick Personalization -->
<div class="step" id="step5">
<h2>One Last Thing</h2>
<p>What should we call you? (Optional)</p>
<input type="text" id="userName" placeholder="Your first name" style="width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: var(--border-radius); font-size: 1rem; margin-bottom: 1.5rem;">
<div class="btn-group">
<button class="btn" onclick="completeOnboarding()">Finish and Go to Dashboard</button>
<button class="btn-secondary" onclick="skipToDashboard()">Skip</button>
</div>
</div>
</div>
<script>
let currentStep = 0;
let selectedUseCase = null;
let selectedCategories = [];
let selectedTools = [];
const toolsByCategory = {
'design': ['Figma', 'Adobe XD', 'Sketch', 'Canva', 'Photoshop', 'Illustrator'],
'development': ['VS Code', 'GitHub', 'GitLab', 'Docker', 'Postman', 'AWS'],
'ai-tools': ['ChatGPT', 'Midjourney', 'Bard', 'Claude', 'Stable Diffusion', 'DALL-E'],
'crm': ['Salesforce', 'HubSpot', 'Zoho', 'Pipedrive', 'Freshsales', 'Nimble'],
'sales-marketing': ['Mailchimp', 'ActiveCampaign', 'ConvertKit', 'Klaviyo', 'Brevo', 'Lemlist'],
'collaboration': ['Slack', 'Microsoft Teams', 'Discord', 'Zoom', 'Google Meet', 'Webex'],
'customer-support': ['Zendesk', 'Intercom', 'Freshdesk', 'Help Scout', 'LiveAgent', 'Kayako'],
'seo-analytics': ['Google Analytics', 'SEMrush', 'Ahrefs', 'Moz', 'Hotjar', 'SimilarWeb'],
'product-management': ['Jira', 'Productboard', 'Aha!', 'Pendo', 'Amplitude', 'Roadmunk'],
'project-management': ['Asana', 'Trello', 'ClickUp', 'Monday.com', 'Basecamp', 'Wrike']
};
const demoContents = {
'track-tools': `
<h3>Your Subscription Tracker</h3>
<div class="demo-item">🔹 Notion - $8/month (next bill: May 15)</div>
<div class="demo-item">🔹 Slack - $6.67/month (next bill: May 20)</div>
<div class="demo-item">🔹 Canva - $12.99/month (next bill: June 1)</div>
<p>We'll help you track renewal dates and identify savings opportunities.</p>
`,
'organize-work': `
<h3>Your Work Dashboard</h3>
<div class="demo-item">📌 Pinned: Notion workspace</div>
<div class="demo-item">📌 Pinned: Slack channels</div>
<div class="demo-item">📌 Pinned: Design assets</div>
<p>All your tools organized by project and priority.</p>
`,
'discover-tools': `
<h3>Tool Recommendations</h3>
<div class="demo-item">⭐️ Recommended: Loom for async video</div>
<div class="demo-item">⭐️ Recommended: Miro for collaboration</div>
<div class="demo-item">⭐️ Recommended: Zapier for automation</div>
<p>We'll suggest tools based on your workflow and needs.</p>
`,
'earn-rewards': `
<h3>Rewards Dashboard</h3>
<div class="demo-item">🎁 Earn 100 points for trying Figma</div>
<div class="demo-item">🎁 Earn 50 points for completing daily tasks</div>
<div class="demo-item">🎁 Redeem points for gift cards</div>
<p>Get rewarded for being productive and exploring new tools.</p>
`
};
function selectUseCase(useCase) {
selectedUseCase = useCase;
document.querySelectorAll('.use-case-item').forEach(item => {
item.classList.remove('selected');
});
event.currentTarget.classList.add('selected');
nextStep();
}
function toggleCategory(category) {
const index = selectedCategories.indexOf(category);
const item = event.currentTarget;
if (index === -1) {
selectedCategories.push(category);
item.classList.add('selected');
} else {
selectedCategories.splice(index, 1);
item.classList.remove('selected');
}
// Update continue button state
document.getElementById('continueFromCategories').disabled = selectedCategories.length === 0;
}
function toggleTool(tool) {
const index = selectedTools.indexOf(tool);
const item = event.currentTarget;
if (index === -1) {
selectedTools.push(tool);
item.classList.add('selected');
} else {
selectedTools.splice(index, 1);
item.classList.remove('selected');
}
}
function populateTools() {
const container = document.getElementById('toolsContainer');
container.innerHTML = '';
if (selectedCategories.length === 0) {
container.innerHTML = '<p>Please select at least one category first</p>';
return;
}
// Get all tools from selected categories
const toolsToShow = [];
selectedCategories.forEach(category => {
toolsByCategory[category].forEach(tool => {
if (!toolsToShow.includes(tool)) {
toolsToShow.push(tool);
}
});
});
// Sort alphabetically
toolsToShow.sort();
// Create tool grid
const grid = document.createElement('div');
grid.className = 'tool-grid';
toolsToShow.forEach(tool => {
const toolItem = document.createElement('div');
toolItem.className = 'tool-item';
if (selectedTools.includes(tool)) {
toolItem.classList.add('selected');
}
toolItem.onclick = () => toggleTool(tool);
// In a real app, you might use actual icons here
toolItem.innerHTML = `
<div class="tool-icon">${getToolIcon(tool)}</div>
${tool}
`;
grid.appendChild(toolItem);
});
container.appendChild(grid);
}
function getToolIcon(tool) {
// Simple emoji mapping - in a real app you'd use proper icons
const iconMap = {
'Figma': '✏️', 'Adobe XD': '🎨', 'Sketch': '🖌️', 'Canva': '🖼️',
'VS Code': '💻', 'GitHub': '🐙', 'GitLab': '🦊', 'Docker': '🐳',
'ChatGPT': '🤖', 'Midjourney': '🖼️', 'Bard': '🔮', 'Claude': '🌀',
'Salesforce': '📊', 'HubSpot': '📈', 'Zoho': '📇', 'Pipedrive': '📞',
'Mailchimp': '✉️', 'ActiveCampaign': '📧', 'ConvertKit': '📨',
'Slack': '💬', 'Microsoft Teams': '👥', 'Discord': '🎮', 'Zoom': '📹',
'Zendesk': '🛎️', 'Intercom': '💬', 'Freshdesk': '📞',
'Google Analytics': '📊', 'SEMrush': '🔍', 'Ahrefs': '📈',
'Jira': '📝', 'Productboard': '📋', 'Aha!': '💡',
'Asana': '✔️', 'Trello': '📋', 'ClickUp': '📌', 'Monday.com': '📅'
};
return iconMap[tool] || '🔧';
}
function nextStep() {
if (currentStep === 2) { // Before showing tools, populate them
populateTools();
}
if (currentStep === 3 && selectedUseCase) { // Before showing demo
let demoContent = demoContents[selectedUseCase];
// Add personalized touch if tools are selected
if (selectedTools.length > 0) {
demoContent += `
<h4 style="margin-top: 1.5rem;">Based on your tools:</h4>
<div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem;">
${selectedTools.map(tool => `<span style="background: white; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.8rem;">${tool}</span>`).join('')}
</div>
`;
}
document.getElementById('demoPreview').innerHTML = demoContent;
}
document.getElementById(`step${currentStep}`).classList.remove('active');
currentStep++;
document.getElementById(`step${currentStep}`).classList.add('active');
}
function prevStep() {
document.getElementById(`step${currentStep}`).classList.remove('active');
currentStep--;
document.getElementById(`step${currentStep}`).classList.add('active');
}
function completeOnboarding() {
const userName = document.getElementById('userName').value;
// Prepare data to send (in a real app)
const onboardingData = {
useCase: selectedUseCase,
categories: selectedCategories,
tools: selectedTools,
name: userName
};
console.log('Onboarding complete with:', onboardingData);
// In a real app, this would send data to backend and redirect
alert(`Welcome ${userName || 'there'}! Taking you to your personalized dashboard now.`);
// window.location.href = '/dashboard';
}
function skipToDashboard() {
// In a real app, this would redirect immediately
alert('Taking you to your dashboard with default settings. You can customize later.');
// window.location.href = '/dashboard';
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment