Key Features
diff --git a/web/index.js b/web/index.js
index f0460341..7b1f9a59 100644
--- a/web/index.js
+++ b/web/index.js
@@ -1,17 +1,45 @@
-// Update button click handlers if needed
-document.addEventListener('DOMContentLoaded', () => {
- // Add any necessary event listeners for the homepage
- const getStartedBtn = document.getElementById('try-dna');
- if (getStartedBtn) {
- getStartedBtn.addEventListener('click', () => {
- window.location.href = 'docs/docs.html';
+document.addEventListener('DOMContentLoaded', function() {
+ // Intersection Observer for scroll animations
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.classList.add('visible');
+ }
});
- }
+ }, {
+ threshold: 0.1
+ });
- const viewGithubBtn = document.getElementById('view-github');
- if (viewGithubBtn) {
- viewGithubBtn.addEventListener('click', () => {
- window.open('https://github.com/yourusername/DNAnalyzer', '_blank');
+ // Observe all scroll sections
+ document.querySelectorAll('.scroll-section').forEach(section => {
+ observer.observe(section);
+ });
+
+ // Smooth scroll for navigation
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function(e) {
+ e.preventDefault();
+ const targetId = this.getAttribute('href').substring(1);
+ const targetElement = document.getElementById(targetId);
+
+ if (targetElement) {
+ const headerOffset = 80;
+ const elementPosition = targetElement.getBoundingClientRect().top;
+ const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
+
+ window.scrollTo({
+ top: offsetPosition,
+ behavior: 'smooth'
+ });
+ }
});
- }
+ });
+
+ // Initial check for visible sections
+ document.querySelectorAll('.scroll-section').forEach(section => {
+ const rect = section.getBoundingClientRect();
+ if (rect.top < window.innerHeight) {
+ section.classList.add('visible');
+ }
+ });
});
\ No newline at end of file
diff --git a/web/style.css b/web/style.css
index 49beb07f..c3697527 100644
--- a/web/style.css
+++ b/web/style.css
@@ -1,4 +1,3 @@
-/* Base styles from before... */
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
@@ -133,7 +132,7 @@ body {
/* Hero Section */
#hero {
- min-height: 80vh;
+ min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
@@ -141,6 +140,7 @@ body {
text-align: center;
padding: 2rem;
background: radial-gradient(circle at center, var(--surface-color), var(--background-color));
+ position: relative;
}
.hero-subtitle {
@@ -155,9 +155,23 @@ body {
gap: 1rem;
}
+/* Scroll Sections */
+.scroll-section {
+ min-height: 100vh;
+ padding: 6rem 2rem;
+ opacity: 0;
+ transform: translateY(20px);
+ transition: opacity 0.6s ease, transform 0.6s ease;
+}
+
+.scroll-section.visible {
+ opacity: 1;
+ transform: translateY(0);
+}
+
/* Mission Section */
#mission {
- padding: 6rem 2rem;
+ background: rgba(0, 0, 0, 0.2);
}
.content-wrapper {
@@ -195,8 +209,7 @@ body {
/* Features Section */
#key-features {
- padding: 6rem 2rem;
- background: rgba(0, 0, 0, 0.2);
+ background: var(--surface-color);
}
.features-grid {