63070fd90c
- Added stats cards to display active, completed, overdue, and due-today tasks on the dashboard. - Implemented search functionality to filter tasks in real-time based on user input. - Introduced quick-pick date buttons for easier task date selection. - Updated task rendering logic to handle empty states for task lists. - Improved overall user interface with new CSS styles for stat cards and buttons. chore: Update environment variables and backend error handling - Fixed formatting in the .env file for consistency. - Enhanced error handling in the backend API for better debugging. feat: Revamp frontend pages with new features and pricing sections - Redesigned the index.html page to include a hero section and feature highlights. - Created a new features page with dynamic loading of features from JSON. - Implemented a pricing page that loads plans from JSON and highlights the featured plan. - Added support and FAQ sections with dynamic content loading and contact form functionality. - Introduced JSON files for FAQs, features, and pricing to allow easy updates without code changes.
68 lines
2.2 KiB
JavaScript
68 lines
2.2 KiB
JavaScript
/**
|
|
* pricing.js
|
|
*
|
|
* Powers the Pricing page.
|
|
*
|
|
* Features:
|
|
* - Loads the three plan definitions from `./data/pricing.json`
|
|
* asynchronously via fetch().
|
|
* - Dynamically renders one card per plan, highlighting the
|
|
* "featured" plan with a coloured border and a "Most popular"
|
|
* badge.
|
|
* - Shows a graceful error message if the JSON file cannot be
|
|
* loaded.
|
|
*
|
|
* Keeping plan data in a separate JSON file means marketing copy and
|
|
* prices can be updated without touching the page markup.
|
|
*/
|
|
|
|
const pricingContainer = document.getElementById('pricingContainer');
|
|
|
|
async function loadPricing() {
|
|
try {
|
|
const response = await fetch('./data/pricing.json');
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to load pricing: ${response.status}`);
|
|
}
|
|
const data = await response.json();
|
|
renderPlans(data.plans);
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
pricingContainer.innerHTML = `<p class="text-white text-center">Unable to load pricing. Please try again later.</p>`;
|
|
}
|
|
}
|
|
|
|
function renderPlans(plans) {
|
|
pricingContainer.innerHTML = '';
|
|
plans.forEach(plan => {
|
|
const col = document.createElement('div');
|
|
col.className = 'col-12 col-md-4 mb-4';
|
|
|
|
const featuresHtml = plan.features
|
|
.map(f => `<li class="mb-2"><img src="./images/Tick.svg" alt="" width="18" class="me-2">${f}</li>`)
|
|
.join('');
|
|
|
|
const highlight = plan.featured ? 'pinkBorder' : '';
|
|
const badge = plan.featured
|
|
? '<span class="badge bg-primary mb-2">Most popular</span>'
|
|
: '';
|
|
|
|
col.innerHTML = `
|
|
<div class="rounded shadow bg-translucent p-4 h-100 d-flex flex-column ${highlight}">
|
|
${badge}
|
|
<h3 class="text-white">${plan.name}</h3>
|
|
<p class="text-white-50">${plan.tagline}</p>
|
|
<div class="mb-3">
|
|
<span class="display-4 text-white">$${plan.price}</span>
|
|
<span class="text-white-50 ms-2">${plan.period}</span>
|
|
</div>
|
|
<ul class="list-unstyled text-white flex-grow-1">${featuresHtml}</ul>
|
|
<a href="${plan.href}" class="btn btn-primary mt-3">${plan.cta}</a>
|
|
</div>
|
|
`;
|
|
pricingContainer.appendChild(col);
|
|
});
|
|
}
|
|
|
|
window.addEventListener('DOMContentLoaded', loadPricing);
|