Kobe/docupulse
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Better public pages style

Browse Source
This commit is contained in:
Kobe
2025-06-23 22:35:12 +02:00
parent f5168c27bf
commit 56e7f1be53
8 changed files with 1003 additions and 344 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
templates/components/pricing_section.html
View File

@@ -24,7 +24,7 @@
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Email support</li>
</ul>
</div>
<a href="{{ contact_url }}" class="btn btn-outline-primary w-100 mt-auto">Get Started</a>
<a href="{{ contact_url }}" class="btn btn-outline-primary btn-lg w-100 mt-auto px-4 py-3">Get Started</a>
</div>
</div>
</div>
@@ -51,7 +51,7 @@
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Priority support</li>
</ul>
</div>
<a href="{{ contact_url }}" class="btn btn-primary w-100 mt-auto">Get Started</a>
<a href="{{ contact_url }}" class="btn btn-primary btn-lg w-100 mt-auto px-4 py-3">Get Started</a>
</div>
</div>
</div>
@@ -73,7 +73,7 @@
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>24/7 dedicated support</li>
</ul>
</div>
<a href="{{ contact_url }}" class="btn btn-outline-primary w-100 mt-auto">Get Started</a>
<a href="{{ contact_url }}" class="btn btn-outline-primary btn-lg w-100 mt-auto px-4 py-3">Get Started</a>
</div>
</div>
</div>
@@ -92,7 +92,7 @@
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Dedicated account manager</li>
</ul>
</div>
<a href="{{ contact_url }}" class="btn btn-outline-primary w-100 mt-auto">Contact Sales</a>
<a href="{{ contact_url }}" class="btn btn-outline-primary btn-lg w-100 mt-auto px-4 py-3">Contact Sales</a>
</div>
</div>
</div>
@@ -126,18 +126,62 @@ document.addEventListener('DOMContentLoaded', function() {
.form-check-input:focus {
box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.25) !important;
}
.price-number {
display: inline-block;
transition: all 0.3s ease;
}
`;
document.head.appendChild(style);
// Function to animate number counting
function animateNumber(element, startValue, endValue, duration = 500) {
const start = performance.now();
const difference = endValue - startValue;
function updateNumber(currentTime) {
const elapsed = currentTime - start;
const progress = Math.min(elapsed / duration, 1);
// Easing function for smooth animation
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
const currentValue = startValue + (difference * easeOutQuart);
element.textContent = '€' + Math.round(currentValue);
if (progress < 1) {
requestAnimationFrame(updateNumber);
} else {
// Ensure the final value is correct
element.textContent = '€' + endValue;
}
}
requestAnimationFrame(updateNumber);
}
billingToggle.addEventListener('change', function() {
if (this.checked) {
// Show annual prices
monthlyPrices.forEach(price => price.style.display = 'none');
annualPrices.forEach(price => price.style.display = 'inline');
// Switch to annual prices with animation
monthlyPrices.forEach((price, index) => {
const monthlyValue = parseInt(price.textContent.replace('€', ''));
const annualValue = parseInt(annualPrices[index].textContent.replace('€', ''));
// Store the original monthly value for later use
price.setAttribute('data-original-monthly', monthlyValue);
// Simply animate the number change
animateNumber(price, monthlyValue, annualValue);
});
} else {
// Show monthly prices
monthlyPrices.forEach(price => price.style.display = 'inline');
annualPrices.forEach(price => price.style.display = 'none');
// Switch to monthly prices with animation
monthlyPrices.forEach((price, index) => {
const currentValue = parseInt(price.textContent.replace('€', ''));
const originalMonthlyValue = parseInt(price.getAttribute('data-original-monthly'));
// Simply animate the number change back to monthly
animateNumber(price, currentValue, originalMonthlyValue);
});
}
});
});