Skip to content

Commit

Permalink
UI overhaul
Browse files Browse the repository at this point in the history
  • Loading branch information
@VerisimilitudeX
VerisimilitudeX committed Feb 18, 2025
1 parent c33a043 commit c7578a5
Show file tree
Hide file tree
Showing 11 changed files with 405 additions and 105 deletions.
101 changes: 100 additions & 1 deletion web/about/about.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,13 @@ p {
justify-content: center;
align-items: center;
margin: 0;
max-width: 1200px;
margin: 6rem auto 2rem;
padding: 2rem;
}

.content-section {
margin-bottom: 4rem;
}

.text-center {
Expand All @@ -62,7 +69,7 @@ p {

.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
padding: 2rem 0;
}
Expand Down Expand Up @@ -157,8 +164,100 @@ img {

/* About page specific styles */
.glass-card {
background: rgba(255, 255, 255, 0.05);
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;
}

.glass-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
border-color: var(--gradient-end);
}

.card-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}

.card-icon {
width: 32px;
height: 32px;
}

.glass-card h2 {
margin: 0;
font-size: 1.8rem;
background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.glass-card p {
color: rgba(255, 255, 255, 0.9);
line-height: 1.8;
margin-bottom: 1.5rem;
}

.feature-image {
width: 100%;
border-radius: 8px;
margin-top: 1.5rem;
transition: transform 0.3s ease;
}

.feature-image:hover {
transform: scale(1.02);
}

.glass-footer {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
padding: 1.5rem;
text-align: center;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-footer p {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
}

.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: all 0.3s ease;
}

.glass-button:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
.container {
padding: 1rem;
}

.grid {
grid-template-columns: 1fr;
}

.glass-card {
padding: 1.5rem;
}
}

.glass-card h2 {
Expand Down
34 changes: 26 additions & 8 deletions web/about/about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,17 @@
<link rel="stylesheet" href="../style.css">
<link rel="stylesheet" href="about.css">
<link href="https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="../assets/icons/Icon_Dark_BG.svg" type="image/svg+xml">
</head>
<body>
<div class="background-blur"></div>

<header class="floating-header">
<nav class="floating-nav">
<a href="../index.html" class="nav-link">Home</a>
<a href="../index.html" class="nav-link">
<img src="../assets/icons/emblem-light-bg.svg" alt="DNAnalyzer Logo" class="nav-logo">
Home
</a>
<a href="about.html" class="nav-link active">About</a>
<a href="../features/features.html" class="nav-link">Features</a>
<a href="../analyzer/analyzer.html" class="nav-link">Analyzer</a>
Expand All @@ -30,19 +34,33 @@
<h1>About DNAnalyzer</h1>
<div class="grid">
<div class="glass-card">
<h2>Introduction</h2>
<div class="card-header">
<img src="../assets/icons/Icon_Dark_BG.svg" alt="Analysis Icon" class="card-icon">
<h2>Introduction</h2>
</div>
<p>DNAnalyzer identifies proteins, amino acids, start and stop codons, high coverage regions,
regions susceptible to neurodevelopmental disorders, transcription factors, and regulatory
elements. Researchers are working to extract valuable information from such software to better
understand human health and disease.</p>
<img src="https://via.placeholder.com/150" alt="Software Visual Placeholder">
<img src="../assets/mockup/Slide_01.png" alt="DNAnalyzer Interface" class="feature-image">
</div>
<div class="glass-card">
<h2>Background</h2>
<p>The human genome is composed of over 3 billion base pairs, making human analysis nearly
impossible. Consequently, using powerful computational and statistical methods to decode the
functional information hidden in DNA sequences are necessary.</p>
<img src="https://via.placeholder.com/150" alt="Software Visual Placeholder">
<div class="card-header">
<img src="../assets/icons/Icon_Base.svg" alt="Science Icon" class="card-icon">
<h2>Background</h2>
</div>
<p>With DNA sequencing becoming more accessible and affordable, the need for efficient analysis tools
has grown exponentially. DNAnalyzer was developed to meet this need, providing researchers and
clinicians with a powerful yet user-friendly platform for DNA sequence analysis.</p>
</div>
<div class="glass-card">
<div class="card-header">
<img src="../assets/icons/emblem-dark-bg.svg" alt="Technology Icon" class="card-icon">
<h2>Technology</h2>
</div>
<p>Built with cutting-edge technology, DNAnalyzer leverages advanced algorithms and machine learning
to provide accurate and comprehensive DNA analysis. Our platform supports various file formats and
can process large sequences efficiently.</p>
</div>
</div>
</section>
Expand Down
46 changes: 45 additions & 1 deletion web/analyzer/analyzer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
max-width: 900px;
margin: 6rem auto 2rem;
padding: 2.5rem;
background: rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
Expand Down Expand Up @@ -308,6 +308,50 @@ body {
display: block;
}

.loading-indicator {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 2rem;
color: rgba(255, 255, 255, 0.8);
font-size: 0.95rem;
}

.loading-indicator::after {
content: '';
width: 1.2rem;
height: 1.2rem;
border: 2px solid var(--gradient-start);
border-top-color: transparent;
border-radius: 50%;
animation: spin 1s linear infinite;
}

.error-container {
background: rgba(220, 53, 69, 0.1);
border: 1px solid rgba(220, 53, 69, 0.3);
border-radius: 8px;
padding: 1.5rem;
margin-top: 1rem;
}

.error-container h3 {
color: var(--error-color);
margin-bottom: 1rem;
}

.error-container p {
color: rgba(255, 255, 255, 0.8);
margin-bottom: 0.5rem;
}

@keyframes spin {
to {
transform: rotate(360deg);
}
}

@media screen and (max-width: 768px) {
.container {
margin: 5rem 1rem 2rem;
Expand Down
2 changes: 1 addition & 1 deletion web/analyzer/analyzer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ <h1>DNA Sequence Analysis</h1>
</div>

<button type="submit" class="analyze-btn">Analyze DNA Sequence</button>
<img src="https://via.placeholder.com/150" alt="Software Visual Placeholder">
<img src="../assets/mockup/Slide_01.png" alt="DNA Analysis Visualization" class="analysis-visual">
</form>

<form id="geneticForm" class="tab-content" data-tab="genetic" style="display: none;">
Expand Down
64 changes: 22 additions & 42 deletions web/analyzer/analyzer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ document.addEventListener('DOMContentLoaded', () => {
// Input type tabs
const inputTabs = document.querySelectorAll('.input-tab');
const inputContents = document.querySelectorAll('.input-content');
const loadingIndicator = document.createElement('div');
loadingIndicator.className = 'loading-indicator';

inputTabs.forEach(tab => {
tab.addEventListener('click', () => {
Expand Down Expand Up @@ -156,77 +158,55 @@ document.addEventListener('DOMContentLoaded', () => {
return;
}

const analyzeBtn = document.querySelector('#geneticForm .analyze-btn');
const originalText = analyzeBtn.textContent;
const results = document.getElementById('results');
const analysisOutput = document.getElementById('analysisOutput');

try {
// Show loading state
analyzeBtn.textContent = 'Analyzing...';
analyzeBtn.disabled = true;
results.style.display = 'block';
analysisOutput.textContent = 'Processing genetic data... This may take a few moments.';

const formData = new FormData();
formData.append('geneticFile', geneticFile);
formData.append('snpAnalysis', document.getElementById('snpAnalysis').checked);

const response = await fetch('http://localhost:8080/api/analyze-genetic', {
method: 'POST',
body: formData
});

if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}

const data = await response.text();
results.style.display = 'block';
analysisOutput.textContent = data;
results.scrollIntoView({ behavior: 'smooth', block: 'start' });
const formData = new FormData();
formData.append('geneticFile', geneticFile);
formData.append('snpAnalysis', document.getElementById('snpAnalysis').checked);

} catch (error) {
console.error('Error:', error);
results.style.display = 'block';
analysisOutput.textContent = 'Error: Could not process genetic testing data. Please ensure the file format is correct and the server is running.';
} finally {
analyzeBtn.textContent = originalText;
analyzeBtn.disabled = false;
}
await submitAnalysis(formData, '/api/analyze-genetic');
});

// Common analysis submission function
async function submitAnalysis(formData, endpoint = '/api/analyze') {
const analyzeBtn = document.querySelector(`form.tab-content.active .analyze-btn`);
const analyzeBtn = document.querySelector('form.tab-content.active .analyze-btn');
const originalText = analyzeBtn.textContent;

try {
// Show loading state
analyzeBtn.textContent = 'Analyzing...';
analyzeBtn.disabled = true;
results.style.display = 'block';
analysisOutput.textContent = 'Processing... This may take a few moments.';

// Show loading indicator
analysisOutput.innerHTML = '';
analysisOutput.appendChild(loadingIndicator);
loadingIndicator.textContent = 'Processing... This may take a few moments.';

const response = await fetch(`http://localhost:8080${endpoint}`, {
method: 'POST',
body: formData
});

if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
const errorData = await response.text();
throw new Error(errorData || `HTTP error! status: ${response.status}`);
}

const data = await response.text();
results.style.display = 'block';
analysisOutput.textContent = data;
analysisOutput.innerHTML = `<pre>${data}</pre>`;

// Scroll to results
results.scrollIntoView({ behavior: 'smooth', block: 'start' });
} catch (error) {
console.error('Error:', error);
results.style.display = 'block';
analysisOutput.textContent = 'Error: Could not connect to DNAnalyzer server. Please ensure the local server is running.';
analysisOutput.innerHTML = `
<div class="error-container">
<h3>Analysis Error</h3>
<p>${error.message}</p>
<p>Please ensure the local server is running and try again.</p>
</div>
`;
} finally {
// Restore button state
analyzeBtn.textContent = originalText;
Expand Down
Loading

0 comments on commit c7578a5

Please sign in to comment.