Skip to content

Commit

Permalink
visual revamp
Browse files Browse the repository at this point in the history
  • Loading branch information
@VerisimilitudeX
VerisimilitudeX authored Feb 21, 2025
1 parent a0a36bd commit b71f428
Show file tree
Hide file tree
Showing 2 changed files with 179 additions and 85 deletions.
183 changes: 146 additions & 37 deletions web/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
</head>
<body>
<div class="background-blur"></div>
<div class="gradient-sphere"></div>
<div class="gradient-sphere secondary"></div>

<header class="floating-header">
<nav class="floating-nav">
Expand All @@ -30,64 +32,171 @@

<main>
<section id="hero">
<h1>DNAnalyzer</h1>
<p class="hero-subtitle">Revolutionizing DNA analysis using ML-powered on-device computation for everyone.</p>
<div class="cta-buttons">
<button class="primary-btn" onclick="window.location.href='analyzer/analyzer.html'">Try DNA Analysis</button>
<button class="secondary-btn" onclick="window.location.href='https://github.com/VerisimilitudeX/DNAnalyzer'">View on GitHub</button>
<div class="hero-content">
<div class="hero-text">
<h1>DNAnalyzer</h1>
<p class="hero-subtitle">Revolutionizing DNA analysis using ML-powered on-device computation for everyone.</p>
<div class="cta-buttons">
<button class="primary-btn" onclick="window.location.href='analyzer/analyzer.html'">Try DNA Analysis</button>
<button class="secondary-btn" onclick="window.location.href='https://github.com/VerisimilitudeX/DNAnalyzer'">View on GitHub</button>
</div>
</div>
<div class="hero-visual">
<div class="dna-helix">
<div class="strand"></div>
<div class="strand"></div>
</div>
</div>
</div>
<div class="scroll-indicator">
<div class="mouse"></div>
<span>Scroll to explore</span>
</div>
</section>

<section id="stats" class="scroll-section">
<div class="stats-grid">
<div class="stat-item">
<div class="stat-number">99.9%</div>
<div class="stat-label">Accuracy Rate</div>
</div>
<div class="stat-item">
<div class="stat-number">50M+</div>
<div class="stat-label">Sequences Analyzed</div>
</div>
<div class="stat-item">
<div class="stat-number">10K+</div>
<div class="stat-label">Active Users</div>
</div>
<div class="stat-item">
<div class="stat-number">24/7</div>
<div class="stat-label">Support</div>
</div>
</div>
</section>

<section id="features-overview" class="scroll-section">
<div class="content-wrapper">
<h2>Why Choose DNAnalyzer?</h2>
<div class="features-showcase">
<div class="feature-highlight">
<div class="feature-visual">
<video autoplay loop muted playsinline>
<source src="assets/videos/dna_spiral.mp4" type="video/mp4">
</video>
</div>
<div class="feature-content">
<h3>Advanced Analysis</h3>
<p>Our cutting-edge ML algorithms provide unparalleled accuracy in DNA sequence analysis, identifying crucial patterns and markers with precision.</p>
<ul class="feature-list">
<li>Start and Stop Codon Detection</li>
<li>High Coverage Region Analysis</li>
<li>Protein Sequence Identification</li>
<li>Transcription Factor Binding Sites</li>
</ul>
</div>
</div>
</div>
</div>
</section>

<section id="mission" class="scroll-section">
<section id="workflow" class="scroll-section">
<div class="content-wrapper">
<h2>Our Mission</h2>
<div class="mission-grid">
<div class="mission-card">
<img src="assets/icons/Icon_Dark_BG.svg" alt="Accessibility Icon" class="mission-icon">
<h3>Accessible</h3>
<p>Making state-of-the-art DNA analysis available to everyone through efficient on-device computation.</p>
<h2>How It Works</h2>
<div class="workflow-steps">
<div class="step">
<div class="step-number">01</div>
<h3>Upload</h3>
<p>Upload your DNA sequence file in FASTA or FASTQ format</p>
<div class="step-visual upload-animation"></div>
</div>
<div class="mission-card">
<img src="assets/icons/Icon_Dark_BG_Base.svg" alt="Security Icon" class="mission-icon">
<h3>Secure</h3>
<p>All computations occur on your device, ensuring your genetic data remains private and under your control.</p>
<div class="step">
<div class="step-number">02</div>
<h3>Analyze</h3>
<p>Our ML algorithms process and analyze your sequence</p>
<div class="step-visual analyze-animation"></div>
</div>
<div class="mission-card">
<img src="assets/icons/emblem-dark-bg.svg" alt="Innovation Icon" class="mission-icon">
<h3>Advanced</h3>
<p>Leveraging cutting-edge machine learning techniques for accurate and comprehensive DNA analysis.</p>
<div class="step">
<div class="step-number">03</div>
<h3>Results</h3>
<p>Get comprehensive analysis results and insights</p>
<div class="step-visual results-animation"></div>
</div>
</div>
</div>
</section>

<section id="key-features" class="scroll-section">
<section id="security" class="scroll-section">
<div class="content-wrapper">
<h2>Key Features</h2>
<div class="features-grid">
<div class="feature-card">
<h3>DNA Analysis</h3>
<p>Identify proteins, amino acids, start and stop codons, and high coverage regions with precision.</p>
<div class="security-grid">
<div class="security-content">
<h2>Privacy & Security</h2>
<p>Your genetic data never leaves your device. All computations are performed locally using our advanced on-device ML models.</p>
<ul class="security-features">
<li>
<div class="security-icon local"></div>
<span>Local Processing</span>
</li>
<li>
<div class="security-icon encrypted"></div>
<span>End-to-End Encryption</span>
</li>
<li>
<div class="security-icon private"></div>
<span>Data Privacy</span>
</li>
</ul>
</div>
<div class="feature-card">
<h3>Multiple Formats</h3>
<p>Support for FASTA and FASTQ file formats, with efficient processing of large sequences.</p>
<div class="security-visual">
<div class="security-animation"></div>
</div>
<div class="feature-card">
<h3>Local Processing</h3>
<p>Process DNA sequences locally for enhanced privacy and speed, with no data leaving your device.</p>
</div>
<div class="feature-card">
<h3>ML-Powered</h3>
<p>Advanced machine learning algorithms ensure accurate detection and analysis of genetic markers.</p>
</div>
</div>
</section>

<section id="cta" class="scroll-section">
<div class="content-wrapper">
<div class="cta-container">
<h2>Ready to Start?</h2>
<p>Join thousands of researchers and scientists using DNAnalyzer for their genetic analysis needs.</p>
<div class="cta-buttons">
<button class="primary-btn" onclick="window.location.href='analyzer/analyzer.html'">Start Analyzing</button>
<button class="secondary-btn" onclick="window.location.href='docs/docs.html'">Read Documentation</button>
</div>
</div>
</div>
</section>
</main>

<footer class="glass-footer">
<p>Copyright © Piyush Acharya 2025. DNAnalyzer is a fiscally sponsored 501(c)(3) nonprofit (EIN: 81-2908499). MIT License.</p>
<div class="footer-content">
<div class="footer-section">
<img src="assets/icons/Icon_Base.svg" alt="DNAnalyzer Logo" class="footer-logo">
<p>DNAnalyzer is a fiscally sponsored 501(c)(3) nonprofit.</p>
<p>EIN: 81-2908499</p>
</div>
<div class="footer-section">
<h4>Quick Links</h4>
<a href="about/about.html">About</a>
<a href="features/features.html">Features</a>
<a href="docs/docs.html">Documentation</a>
</div>
<div class="footer-section">
<h4>Resources</h4>
<a href="https://github.com/VerisimilitudeX/DNAnalyzer">GitHub</a>
<a href="https://discord.gg/xNpujz49gj">Discord</a>
<a href="docs/docs.html#api">API Reference</a>
</div>
<div class="footer-section">
<h4>Legal</h4>
<a href="#">Privacy Policy</a>
<a href="#">Terms of Service</a>
<a href="#">MIT License</a>
</div>
</div>
<div class="footer-bottom">
<p>Copyright © Piyush Acharya 2025. All rights reserved.</p>
</div>
</footer>

<script src="index.js"></script>
Expand Down
81 changes: 33 additions & 48 deletions web/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,65 +28,50 @@ body {
min-height: 100vh;
display: flex;
flex-direction: column;
overflow-x: hidden;
}

/* Navbar */
.floating-header {
/* Background Effects */
.background-blur {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(26, 28, 42, 0.95);
backdrop-filter: blur(10px);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

.floating-nav {
max-width: 1200px;
margin: 0 auto;
padding: 1rem 2rem;
display: flex;
align-items: center;
gap: 1rem;
}

.nav-link {
color: var(--text-color);
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 8px;
transition: background-color 0.3s ease, color 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
height: 100%;
background: radial-gradient(circle at top right, rgba(0, 122, 255, 0.1), transparent 70%),
radial-gradient(circle at bottom left, rgba(0, 191, 255, 0.1), transparent 70%);
z-index: -1;
opacity: 0.8;
pointer-events: none;
}

.nav-link:hover, .nav-link.active {
color: var(--gradient-end);
background: rgba(255, 255, 255, 0.05);
.gradient-sphere {
position: fixed;
width: 600px;
height: 600px;
border-radius: 50%;
background: radial-gradient(circle at center, rgba(0, 122, 255, 0.2), transparent 70%);
filter: blur(60px);
z-index: -1;
animation: float 20s ease-in-out infinite;
}

.gradient-sphere.secondary {
width: 400px;
height: 400px;
background: radial-gradient(circle at center, rgba(0, 191, 255, 0.15), transparent 70%);
animation: float 15s ease-in-out infinite reverse;
right: 0;
}

.nav-logo {
height: 24px;
@keyframes float {
0%, 100% { transform: translate(0, 0); }
25% { transform: translate(50px, 50px); }
50% { transform: translate(0, 100px); }
75% { transform: translate(-50px, 50px); }
}

.right-links {
margin-left: auto;
display: flex;
gap: 1rem;
}

/* Buttons */
.glass-button {
background: rgba(255, 255, 255, 0.1);
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-size: 0.95rem;
cursor: pointer;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
/* Navbar */
}

.glass-button:hover {
Expand Down

0 comments on commit b71f428

Please sign in to comment.