Skip to content

Commit

Permalink
remove broken visuals
Browse files Browse the repository at this point in the history
  • Loading branch information
VerisimilitudeX committed Feb 17, 2025
1 parent 6e0f981 commit 1090ef0
Show file tree
Hide file tree
Showing 5 changed files with 278 additions and 248 deletions.
96 changes: 96 additions & 0 deletions web/docs/docs.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
.docs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin: 2rem 0;
}

.doc-section {
background: #f5f5f5;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.doc-section h2 {
margin-top: 0;
color: #333;
font-size: 1.5rem;
margin-bottom: 1rem;
}

.doc-section ul {
list-style: none;
padding: 0;
margin: 0;
}

.doc-section li {
margin: 0.5rem 0;
}

.doc-section a {
color: #007bff;
text-decoration: none;
display: block;
padding: 0.5rem;
border-radius: 4px;
transition: background-color 0.2s;
}

.doc-section a:hover {
background-color: #e9ecef;
}

.doc-content {
margin: 2rem 0;
padding: 2rem;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.doc-content h1 {
margin-top: 0;
color: #333;
}

.doc-content h2 {
margin-top: 2rem;
color: #444;
}

.doc-content p {
line-height: 1.6;
color: #666;
}

.doc-content code {
background: #f8f9fa;
padding: 0.2rem 0.4rem;
border-radius: 4px;
font-family: 'IBM Plex Mono', monospace;
}

.doc-content pre {
background: #f8f9fa;
padding: 1rem;
border-radius: 4px;
overflow-x: auto;
}

#documentation {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}

@media (max-width: 768px) {
.docs-grid {
grid-template-columns: 1fr;
}

#documentation {
padding: 1rem;
}
}
57 changes: 57 additions & 0 deletions web/docs/docs.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DNAnalyzer Documentation</title>
<link rel="stylesheet" href="../style.css">
<link rel="stylesheet" href="docs.css">
</head>
<body>
<nav>
<a href="../index.html">Home</a>
<a href="../about/about.html">About</a>
<a href="../index.html#features">Features</a>
<a href="#" class="active">Docs</a>
<div class="right-links">
<a href="https://github.com/yourusername/DNAnalyzer" target="_blank" class="button">GitHub Repository</a>
<a href="https://discord.gg/yourdiscord" target="_blank" class="button">Discord Server</a>
</div>
</nav>

<main>
<section id="documentation">
<h1>Documentation</h1>
<div class="docs-grid">
<div class="doc-section">
<h2>Getting Started</h2>
<ul>
<li><a href="#getting-started">Quick Start Guide</a></li>
<li><a href="#local-setup">Local Analyzer Setup</a></li>
</ul>
</div>
<div class="doc-section">
<h2>Usage Guides</h2>
<ul>
<li><a href="#cli">Command Line Interface</a></li>
<li><a href="#samples">Sample Usage</a></li>
</ul>
</div>
<div class="doc-section">
<h2>Research & Analysis</h2>
<ul>
<li><a href="#parameters">Analysis Parameters</a></li>
<li><a href="#genes">Gene Analysis</a></li>
</ul>
</div>
</div>

<div class="doc-content">
<!-- Content will be loaded dynamically via JavaScript -->
</div>
</section>
</main>

<script src="docs.js"></script>
</body>
</html>
109 changes: 109 additions & 0 deletions web/docs/docs.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
document.addEventListener('DOMContentLoaded', () => {
// Map of documentation sections to their markdown file paths
const docPaths = {
'getting-started': '../docs/getting-started.md',
'local-setup': '../docs/Local_Analyzer_Setup.md',
'cli': '../docs/usage/MetCLI.md',
'samples': '../docs/samples/cli-arguments-examples.md',
'parameters': '../docs/research/analysis-parameters.md',
'genes': '../docs/research/genes.md'
};

// Function to fetch and render markdown content
async function loadDocContent(docId) {
const docContent = document.querySelector('.doc-content');
if (!docContent) {
console.error('Documentation content container not found');
return;
}

try {
const response = await fetch(docPaths[docId]);
if (!response.ok) {
throw new Error(`Failed to load documentation: ${response.statusText}`);
}

const markdown = await response.text();

// Basic markdown to HTML conversion
const html = markdown
.replace(/^# (.*$)/gm, '<h1>$1</h1>')
.replace(/^## (.*$)/gm, '<h2>$1</h2>')
.replace(/^### (.*$)/gm, '<h3>$1</h3>')
.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
.replace(/\*(.*?)\*/g, '<em>$1</em>')
.replace(/`(.*?)`/g, '<code>$1</code>')
.replace(/```([^`]+)```/g, '<pre><code>$1</code></pre>')
.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2">$1</a>')
.replace(/^- (.*$)/gm, '<li>$1</li>')
.split('\n\n')
.map(block => {
if (block.startsWith('<li>')) {
return `<ul>${block}</ul>`;
}
if (!block.startsWith('<')) {
return `<p>${block}</p>`;
}
return block;
})
.join('\n');

docContent.innerHTML = html;

// Update URL hash without scrolling
const currentURL = new URL(window.location);
currentURL.hash = docId;
window.history.pushState({}, '', currentURL);

} catch (error) {
console.error('Error loading documentation:', error);
docContent.innerHTML = `
<div class="error">
<h2>Error Loading Documentation</h2>
<p>Sorry, we couldn't load the requested documentation. Please try again later.</p>
<p class="error-details">${error.message}</p>
</div>
`;
}
}

// Add click handlers to documentation links
const links = document.querySelectorAll('.doc-section a');
if (links.length > 0) {
links.forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
const docId = link.getAttribute('href').substring(1);

// Update active state
links.forEach(l => l.classList.remove('active'));
link.classList.add('active');

loadDocContent(docId);

// Smooth scroll to content on mobile
if (window.innerWidth < 768) {
document.querySelector('.doc-content')?.scrollIntoView({ behavior: 'smooth' });
}
});
});

// Load initial documentation based on URL hash or default to getting-started
const initialDoc = window.location.hash.substring(1) || 'getting-started';
loadDocContent(initialDoc);

// Highlight the active link
const activeLink = document.querySelector(`.doc-section a[href="#${initialDoc}"]`);
if (activeLink) {
activeLink.classList.add('active');
}
} else {
console.error('No documentation links found');
document.querySelector('.doc-content').innerHTML = `
<div class="error">
<h2>Documentation Navigation Error</h2>
<p>The documentation navigation links could not be found. Please try refreshing the page.</p>
</div>
`;
}
});
107 changes: 3 additions & 104 deletions web/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,7 @@
<a href="#" class="active">Home</a>
<a href="about/about.html">About</a>
<a href="#features">Features</a>
<a href="#analyzer">Analyzer</a>
<a href="#server">Server</a>
<a href="docs/docs.html">Docs</a>
<div class="right-links">
<a href="https://github.com/yourusername/DNAnalyzer" target="_blank" class="button">GitHub Repository</a>
<a href="https://discord.gg/yourdiscord" target="_blank" class="button">Discord Server</a>
Expand All @@ -23,112 +22,12 @@
<section id="hero">
<h1>DNAnalyzer</h1>
<p>A highly efficient, powerful, and feature-rich algorithm for analyzing DNA sequences</p>
<img src="https://via.placeholder.com/300" alt="Software Visual Placeholder">
<div class="cta-buttons">
<button id="try-dna" onclick="location.href='#analyzer'">Try DNA Analysis</button>
<button id="view-github" onclick="window.open('https://github.com/yourusername/DNAnalyzer', '_blank')">View on GitHub</button>
<button id="try-dna">Get Started</button>
<button id="view-github">View on GitHub</button>
</div>
</section>

<section id="analyzer">
<h2>DNA Sequence Analysis</h2>
<div class="analysis-container">
<form id="analysis-form">
<div class="input-section">
<h3>DNA Input</h3>
<div class="file-input-container">
<input type="file" id="dna-file" accept=".fa,.fasta,.fastq" hidden>
<button type="button" onclick="document.getElementById('dna-file').click()">Choose File</button>
<span id="file-name">No file chosen</span>
</div>
<p class="help-text">Upload a DNA sequence file in FASTA or FASTQ format</p>
<div class="example-files">
<h4>Example Files:</h4>
<ul>
<li><a href="assets/dna/example/test.fa" download>Sample DNA Sequence (test.fa)</a></li>
<li><a href="assets/dna/real/brca1.fa" download>BRCA1 Gene (brca1.fa)</a></li>
</ul>
</div>
</div>

<div class="input-section">
<h3>Start Amino Acid</h3>
<select id="start-codon">
<option value="M">Methionine (Met) - Most common start codon</option>
<option value="V">Valine (Val)</option>
<option value="L">Leucine (Leu)</option>
<option value="I">Isoleucine (Ile)</option>
</select>
<p class="help-text">Select the amino acid to start the analysis from</p>
</div>

<div class="input-section">
<h3>Analysis Parameters</h3>
<div class="parameters-grid">
<div class="parameter">
<label for="min-count">Minimum Count:</label>
<input type="number" id="min-count" value="1" min="1">
<p class="param-help">Minimum count threshold for codon analysis</p>
</div>
<div class="parameter">
<label for="max-count">Maximum Count:</label>
<input type="number" id="max-count" value="100" min="1">
<p class="param-help">Maximum count threshold for codon analysis</p>
</div>
<div class="parameter">
<label>
<input type="checkbox" id="reverse">
Reverse DNA
</label>
<p class="param-help">Analyze the DNA sequence in reverse order</p>
</div>
<div class="parameter">
<label>
<input type="checkbox" id="rcomplement">
Reverse Complement
</label>
<p class="param-help">Analyze the reverse complement of the DNA sequence</p>
</div>
<div class="parameter">
<label>
<input type="checkbox" id="codons">
Codon Analysis
</label>
<p class="param-help">Analyze codon frequencies and patterns</p>
</div>
<div class="parameter">
<label>
<input type="checkbox" id="coverage">
Coverage Analysis
</label>
<p class="param-help">Analyze sequence coverage and depth</p>
</div>
<div class="parameter">
<label>
<input type="checkbox" id="longest">
Find Longest
</label>
<p class="param-help">Find the longest potential gene sequence</p>
</div>
<div class="parameter">
<label for="format">Output Format:</label>
<select id="format">
<option value="text">Text</option>
<option value="json">JSON</option>
<option value="csv">CSV</option>
</select>
<p class="param-help">Choose the format for analysis results</p>
</div>
</div>
</div>

<button type="submit" class="analyze-button">Analyze DNA</button>
<img src="https://via.placeholder.com/300" alt="Software Visual Placeholder">
</form>
</div>
<div id="results"></div>
</section>

<section id="features">
<h2>Features</h2>
<div class="features-grid">
Expand Down
Loading

0 comments on commit 1090ef0

Please sign in to comment.