fix homepage!

VerisimilitudeX · Feb 21, 2025 · 913bb83 · 913bb83
1 parent fc9a8ec
commit 913bb83
Show file tree

Hide file tree

Showing 9 changed files with 498 additions and 261 deletions.
diff --git a/web/about/about.js b/web/about/about.js
@@ -9,12 +9,6 @@
  * For further inquiries, please reach out to [email protected]
  */
 
-const toggle = document.getElementById("mode");
-
-toggle.addEventListener("click", () => {
-    document.body.classList.toggle("dark");
-});
-
 // About page specific functionality
 document.addEventListener('DOMContentLoaded', function() {
     // Add smooth scrolling for any anchor links
@@ -26,4 +20,19 @@ document.addEventListener('DOMContentLoaded', function() {
             });
         });
     });
+
+    // Add hover effects for glass cards
+    document.querySelectorAll('.glass-card').forEach(card => {
+        card.addEventListener('mouseenter', function() {
+            this.style.transform = 'translateY(-5px)';
+            this.style.boxShadow = '0 8px 32px rgba(0, 0, 0, 0.2)';
+            this.style.borderColor = 'var(--gradient-end)';
+        });
+
+        card.addEventListener('mouseleave', function() {
+            this.style.transform = 'translateY(0)';
+            this.style.boxShadow = 'none';
+            this.style.borderColor = 'rgba(255, 255, 255, 0.1)';
+        });
+    });
 });
diff --git a/web/analyzer/analyzer.html b/web/analyzer/analyzer.html
@@ -15,7 +15,7 @@
     <header class="floating-header">
         <nav class="floating-nav">
             <a href="../index.html" class="nav-link">
-                <img src="../assets/icons/Icon_Light_BG.svg" alt="DNAnalyzer Logo" class="nav-logo">
+                <img src="../assets/icons/Icon_Base.svg" alt="DNAnalyzer Logo" class="nav-logo">
             </a>
             <a href="../about/about.html" class="nav-link">About</a>
             <a href="../features/features.html" class="nav-link">Features</a>

diff --git a/web/docs/docs.css b/web/docs/docs.css
@@ -1,130 +1,187 @@
-.docs-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 2rem;
-    margin: 2rem 0;
+.container {
+    max-width: 1200px;
+    margin: 6rem auto 2rem;
+    padding: 2rem;
 }
 
-.doc-section {
+.docs-nav {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 2rem;
+    flex-wrap: wrap;
+}
+
+.docs-nav-item {
+    padding: 0.75rem 1.5rem;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 8px;
+    color: white;
+    text-decoration: none;
+    transition: all 0.3s ease;
+}
+
+.docs-nav-item:hover {
+    background: rgba(255, 255, 255, 0.15);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.glass-card {
     background: rgba(255, 255, 255, 0.05);
-    padding: 1.5rem;
+    padding: 2rem;
+    margin-bottom: 2rem;
     border-radius: 12px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
-    transition: all 0.3s ease;
 }
 
-.doc-section:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-    border-color: var(--gradient-end);
+.section-content {
+    margin-top: 1.5rem;
 }
 
-.doc-section h2 {
-    margin-top: 0;
+.section-content h3 {
+    margin: 2rem 0 1rem;
     color: var(--gradient-end);
-    font-size: 1.5rem;
-    margin-bottom: 1rem;
-    background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
 }
 
-.doc-section ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
+.section-content h3:first-child {
+    margin-top: 0;
 }
 
-.doc-section li {
-    margin: 0.5rem 0;
+.section-content ul, .section-content ol {
+    margin: 1rem 0;
+    padding-left: 1.5rem;
 }
 
-.doc-section a {
-    color: var(--text-color);
-    text-decoration: none;
-    display: block;
-    padding: 0.75rem;
-    border-radius: 8px;
-    transition: all 0.3s ease;
-    background: rgba(255, 255, 255, 0.05);
+.section-content li {
+    margin: 0.5rem 0;
+    color: rgba(255, 255, 255, 0.9);
 }
 
-.doc-section a:hover {
-    background: rgba(255, 255, 255, 0.1);
-    transform: translateY(-2px);
+.code-block {
+    background: rgba(0, 0, 0, 0.3);
+    padding: 1rem 1.2rem;
+    border-radius: 8px;
+    margin: 1rem 0;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    overflow-x: auto;
 }
 
-.doc-section a.active {
-    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
-    color: white;
+.code-block code {
+    font-family: 'IBM Plex Mono', monospace;
+    color: #10B981;
+    font-size: 0.9rem;
 }
 
-.doc-content {
-    margin: 2rem 0;
-    padding: 2rem;
-    background: rgba(26, 28, 42, 0.95);
-    border-radius: 12px;
+.feature-item {
+    margin-bottom: 2rem;
+    padding: 1.5rem;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 8px;
     border: 1px solid rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
 }
 
-.doc-content h1 {
-    margin-top: 0;
-    color: var(--gradient-end);
-    background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+.feature-item:last-child {
+    margin-bottom: 0;
 }
 
-.doc-content h2 {
-    margin-top: 2rem;
-    color: var(--gradient-end);
+.feature-item p {
+    color: rgba(255, 255, 255, 0.9);
+    line-height: 1.8;
+    margin-top: 0.5rem;
 }
 
-.doc-content p {
-    line-height: 1.6;
-    color: rgba(255, 255, 255, 0.9);
+.options-list {
+    list-style: none !important;
+    padding-left: 0 !important;
 }
 
-.doc-content code {
+.options-list li {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.75rem;
     background: rgba(0, 0, 0, 0.2);
-    padding: 0.2rem 0.4rem;
-    border-radius: 4px;
+    border-radius: 6px;
+    margin: 0.5rem 0;
+}
+
+.options-list code {
     font-family: 'IBM Plex Mono', monospace;
     color: #10B981;
+    font-size: 0.9rem;
+    padding: 0.25rem 0.5rem;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 4px;
 }
 
-.doc-content pre {
-    background: rgba(0, 0, 0, 0.2);
+.api-list {
+    list-style: none !important;
+    padding-left: 0 !important;
+}
+
+.api-list li {
+    margin: 1rem 0;
     padding: 1rem;
+    background: rgba(0, 0, 0, 0.2);
     border-radius: 8px;
-    overflow-x: auto;
     border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-#documentation {
-    max-width: 1200px;
-    margin: 6rem auto 2rem;
-    padding: 0 2rem;
+.api-list code {
+    display: block;
+    font-family: 'IBM Plex Mono', monospace;
+    color: #10B981;
+    font-size: 1rem;
+    margin-bottom: 0.5rem;
+}
+
+.api-list p {
+    color: rgba(255, 255, 255, 0.9);
+    margin: 0;
+    font-size: 0.95rem;
+}
+
+a {
+    color: var(--gradient-end);
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+a:hover {
+    color: var(--gradient-start);
 }
 
 @media (max-width: 768px) {
-    .docs-grid {
-        grid-template-columns: 1fr;
+    .container {
+        padding: 1rem;
+        margin-top: 5rem;
     }
 
-    .doc-section {
-        padding: 1rem;
+    .docs-nav {
+        flex-direction: column;
+    }
+
+    .docs-nav-item {
+        width: 100%;
+        text-align: center;
     }
 
-    .doc-content {
+    .glass-card {
         padding: 1.5rem;
-        margin: 1rem 0;
     }
 
-    #documentation {
-        padding: 0 1rem;
+    .feature-item {
+        padding: 1rem;
+    }
+
+    .code-block {
+        padding: 0.75rem;
+    }
+
+    .options-list li {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
     }
 }