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

public pages content

Browse Source
This commit is contained in:
Kobe
2025-06-24 09:32:50 +02:00
parent 10560a01fb
commit fed00ff2a0
21 changed files with 2897 additions and 1010 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
templates/public/features.html
View File

@@ -565,36 +565,14 @@
</section>
<!-- Stats Section -->
<section class="stats-section">
<div class="container">
<div class="row text-center">
<div class="col-md-3">
<div class="stat-item">
<span class="stat-number">99.9%</span>
<div class="stat-label">Uptime</div>
</div>
</div>
<div class="col-md-3">
<div class="stat-item">
<span class="stat-number">256-bit</span>
<div class="stat-label">Encryption</div>
</div>
</div>
<div class="col-md-3">
<div class="stat-item">
<span class="stat-number">24/7</span>
<div class="stat-label">Support</div>
</div>
</div>
<div class="col-md-3">
<div class="stat-item">
<span class="stat-number">1000+</span>
<div class="stat-label">Organizations</div>
</div>
</div>
</div>
</div>
</section>
{% with stats=[
{'value': 99.9, 'suffix': '%', 'display': '99.9%', 'label': 'Uptime'},
{'value': 256, 'suffix': '-bit', 'display': '256-bit', 'label': 'Encryption'},
{'value': 24, 'suffix': '/7', 'display': '24/7', 'label': 'Support'},
{'value': 1000, 'suffix': '+', 'display': '1000+', 'label': 'Organizations'}
] %}
{% include 'components/animated_numbers.html' %}
{% endwith %}
<!-- CTA Section -->
<section class="py-5">
@@ -644,97 +622,12 @@
});
}, observerOptions);
// Function to animate number counting
function animateNumber(element, endValue, duration = 2000) {
const start = performance.now();
const startValue = 0;
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);
// Format the number based on the end value
let displayValue;
if (endValue === 99.9) {
displayValue = currentValue.toFixed(1) + '%';
} else if (endValue === 256) {
displayValue = Math.round(currentValue) + '-bit';
} else if (endValue === 24) {
displayValue = Math.round(currentValue) + '/7';
} else {
displayValue = Math.round(currentValue) + '+';
}
element.textContent = displayValue;
if (progress < 1) {
requestAnimationFrame(updateNumber);
} else {
// Ensure the final value is correct
if (endValue === 99.9) {
element.textContent = '99.9%';
} else if (endValue === 256) {
element.textContent = '256-bit';
} else if (endValue === 24) {
element.textContent = '24/7';
} else {
element.textContent = '1000+';
}
}
}
requestAnimationFrame(updateNumber);
}
// Observe elements for fade-in animation
document.addEventListener('DOMContentLoaded', function() {
const fadeElements = document.querySelectorAll('.fade-in-up');
fadeElements.forEach(el => {
observer.observe(el);
});
// Stats animation observer
const statsObserver = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
const statNumbers = entry.target.querySelectorAll('.stat-number');
statNumbers.forEach((stat, index) => {
setTimeout(() => {
const text = stat.textContent;
let endValue;
if (text.includes('99.9%')) {
endValue = 99.9;
} else if (text.includes('256-bit')) {
endValue = 256;
} else if (text.includes('24/7')) {
endValue = 24;
} else if (text.includes('1000+')) {
endValue = 1000;
}
if (endValue) {
animateNumber(stat, endValue, 2000);
}
}, index * 300); // Stagger the animations
});
// Only trigger once
statsObserver.unobserve(entry.target);
}
});
}, { threshold: 0.5 });
// Observe the stats section
const statsSection = document.querySelector('.stats-section');
if (statsSection) {
statsObserver.observe(statsSection);
}
});
</script>
</body>