806 lines
35 KiB
HTML
806 lines
35 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>IDMCC : Intelligent Design of Microbialbial Culture Conditions</title>
|
|
<link rel="icon" href="/public/assets/images/logo.png" type="image/png">
|
|
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
|
|
<link rel="stylesheet" href="/public/css/layout.css">
|
|
<link rel="stylesheet" href="/public/css/Tools.css">
|
|
<link rel="stylesheet" href="/public/css/base.css">
|
|
<link rel="stylesheet" href="/public/assets/iconfont/iconfont.css">
|
|
<style>
|
|
/* 统一的基础样式 */
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.header .logo .title p {
|
|
color: #B3B3B3;
|
|
}
|
|
|
|
/* Email input and progress section styles */
|
|
.email-progress-section {
|
|
margin-top: 20px;
|
|
padding: 20px;
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
border: 1px solid #dee2e6;
|
|
width: 100%;
|
|
}
|
|
|
|
.email-input-container {
|
|
margin-bottom: 20px;
|
|
width: 100%;
|
|
}
|
|
|
|
.email-input-container label {
|
|
display: block;
|
|
margin-bottom: 4px;
|
|
font-weight: 600;
|
|
color: #2E5A61;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.email-input {
|
|
width: 100%;
|
|
max-width: 400px;
|
|
padding: 10px 15px;
|
|
border: 1px solid #ced4da;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
transition: border-color 0.3s ease;
|
|
}
|
|
|
|
.email-input:focus {
|
|
outline: none;
|
|
border-color: #4A90A4;
|
|
box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.1);
|
|
}
|
|
|
|
.email-input:invalid {
|
|
border-color: #dc3545;
|
|
}
|
|
|
|
.email-error {
|
|
display: block;
|
|
margin-top: 5px;
|
|
font-size: 12px;
|
|
color: #dc3545;
|
|
}
|
|
|
|
.progress-section-tab {
|
|
margin-top: 15px;
|
|
width: 100%;
|
|
}
|
|
|
|
.progress-container {
|
|
width: 100%;
|
|
}
|
|
|
|
.submit-btn:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
background-color: #ccc;
|
|
}
|
|
|
|
.submit-btn:disabled:hover {
|
|
background-color: #ccc;
|
|
}
|
|
|
|
/* Analysis All checkbox styles */
|
|
.analysis-all-checkbox {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-right: 15px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.analysis-all-checkbox input[type="checkbox"] {
|
|
width: 18px;
|
|
height: 18px;
|
|
cursor: pointer;
|
|
accent-color: #4A90A4;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.analysis-all-checkbox span {
|
|
font-size: 14px;
|
|
color: #2E5A61;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.submit-section {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
}
|
|
|
|
/* 统一的自适应设计 */
|
|
|
|
/* 大屏幕 (1400px+) */
|
|
@media (min-width: 1400px) {
|
|
.wrapper {
|
|
max-width: 1400px;
|
|
}
|
|
}
|
|
|
|
/* 中等屏幕 (992px - 1399px) */
|
|
@media (max-width: 1399px) {
|
|
.wrapper {
|
|
width: 95%;
|
|
}
|
|
|
|
.content .upload .upload_container {
|
|
width: 70%;
|
|
}
|
|
}
|
|
|
|
/* 平板 (768px - 991px) */
|
|
@media (max-width: 991px) {
|
|
.wrapper {
|
|
width: 98%;
|
|
}
|
|
|
|
.content {
|
|
padding: 15px 0;
|
|
}
|
|
|
|
.content .upload .upload_container {
|
|
width: 80%;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
}
|
|
|
|
.email-input {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.submit-section {
|
|
padding: 15px 30px 25px 30px;
|
|
}
|
|
|
|
.analysis-all-checkbox {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.tab-description {
|
|
padding: 20px 25px;
|
|
}
|
|
|
|
.tab-description h3 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.tab-description p {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
/* 移动设备 (最大768px) */
|
|
@media (max-width: 768px) {
|
|
.wrapper {
|
|
width: 100%;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.content {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.content .upload {
|
|
padding: 10px 15px;
|
|
}
|
|
|
|
.content .upload .load {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
}
|
|
|
|
.content .upload .upload_container {
|
|
width: 100%;
|
|
margin: 15px 0;
|
|
padding: 15px;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.file-select-btn {
|
|
width: 100%;
|
|
padding: 10px;
|
|
}
|
|
|
|
.file-status {
|
|
width: 100%;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.submit-section {
|
|
padding: 15px 15px 20px 15px;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 12px;
|
|
}
|
|
|
|
.analysis-all-checkbox {
|
|
margin-right: 0;
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.submit-btn, .reset-btn {
|
|
width: 100%;
|
|
padding: 12px 20px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.email-progress-section {
|
|
padding: 15px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.email-input-container {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.email-input {
|
|
max-width: 100%;
|
|
padding: 12px 15px;
|
|
}
|
|
|
|
.progress-section-tab {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.progress-content-wrapper {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.progress-text-group {
|
|
padding: 0;
|
|
margin-bottom: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.progress-controls {
|
|
position: static;
|
|
transform: none;
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.stop-btn {
|
|
width: 100%;
|
|
padding: 10px;
|
|
}
|
|
|
|
.tab-description {
|
|
padding: 15px 20px;
|
|
}
|
|
|
|
.tab-description h3 {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.tab-description p {
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.content .result {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.content .result .download button {
|
|
position: static;
|
|
width: 100%;
|
|
margin: 15px 0 0 0;
|
|
padding: 12px;
|
|
}
|
|
|
|
.content .result ul {
|
|
padding: 15px;
|
|
}
|
|
|
|
.content .result ul li {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
padding: 15px;
|
|
gap: 10px;
|
|
}
|
|
|
|
.content .result .field-name {
|
|
min-width: auto;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.content .result .field-value {
|
|
padding: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.result-content ul li {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
padding: 15px;
|
|
gap: 10px;
|
|
}
|
|
|
|
.result-content .field-name {
|
|
min-width: auto;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.result-content .field-value {
|
|
padding: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* 小屏幕移动设备 (最大480px) */
|
|
@media (max-width: 480px) {
|
|
.wrapper {
|
|
padding: 0 5px;
|
|
}
|
|
|
|
.content {
|
|
padding: 5px 0;
|
|
}
|
|
|
|
.content .upload {
|
|
padding: 10px;
|
|
}
|
|
|
|
.content .upload .upload_container {
|
|
padding: 10px;
|
|
}
|
|
|
|
.submit-section {
|
|
padding: 10px;
|
|
}
|
|
|
|
.email-progress-section {
|
|
padding: 10px;
|
|
}
|
|
|
|
.tab-description {
|
|
padding: 12px 15px;
|
|
}
|
|
|
|
.tab-description h3 {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.tab-description p {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.analysis-all-checkbox span {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.submit-btn, .reset-btn {
|
|
font-size: 14px;
|
|
padding: 10px 15px;
|
|
}
|
|
|
|
.content .result ul {
|
|
padding: 10px;
|
|
}
|
|
|
|
.content .result ul li {
|
|
padding: 12px;
|
|
}
|
|
|
|
.progress-text {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.progress-details {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
/* 超小屏幕 (最大360px) */
|
|
@media (max-width: 360px) {
|
|
.tab-item span {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.tab-description h3 {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.tab-description p {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.submit-btn, .reset-btn {
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<div id="header-placeholder"></div>
|
|
<div class="content">
|
|
<div class="wrapper">
|
|
<div class="predict">
|
|
<div class="title">
|
|
<p>Predict tools</p>
|
|
</div>
|
|
<!-- Tab Navigation -->
|
|
<div class="tab-nav">
|
|
<div class="tab-item active" data-tab="nutrition">
|
|
<span>Nutrition Prediction</span>
|
|
</div>
|
|
<div class="tab-item" data-tab="ph">
|
|
<span>pH Prediction</span>
|
|
</div>
|
|
<div class="tab-item" data-tab="temperature">
|
|
<span>Temperature Prediction</span>
|
|
</div>
|
|
<div class="tab-item" data-tab="oxygen">
|
|
<span>Oxygen Type Prediction</span>
|
|
</div>
|
|
<div class="tab-item" data-tab="growth">
|
|
<span>Growth Rate Prediction</span>
|
|
</div>
|
|
</div>
|
|
<!-- Tab Content Area -->
|
|
<div class="tab-content">
|
|
<!-- Nutrition Prediction Tab -->
|
|
<div class="tab-panel active" id="nutrition-panel">
|
|
<div class="tab-description">
|
|
<h3>Nutrition Prediction</h3>
|
|
<p>Based on the analysis of genomic data and the KEGG ortholog information obtained through annotation, a culture medium generation model is employed to precisely formulate the essential nutrient combinations required for microbial growth. This tool can clarify the microbial requirements for various nutrients by analyzing genomic characteristics, thereby providing scientific support for culture medium design.</p>
|
|
<p>To use this tool: users only need to upload the microbial genome.</p>
|
|
</div>
|
|
<div class="upload">
|
|
<div class="load">
|
|
<p>Upload genome</p>
|
|
<div class="upload_container">
|
|
<button class="file-select-btn" onclick="document.getElementById('nutrition-file-input').click()">Select File(s)</button>
|
|
<span class="file-status" id="nutrition-file-status">No file selected</span>
|
|
<input type="file" id="nutrition-file-input" name="file" accept=".fna, .fasta, .fa" multiple style="display: none;" onchange="updateFileStatus(this, 'nutrition-file-status')">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="submit-section">
|
|
<label class="analysis-all-checkbox">
|
|
<input type="checkbox" id="nutrition-analysis-all" name="analysis-all">
|
|
<span>Analysis All</span>
|
|
</label>
|
|
<button class="submit-btn" id="nutrition-submit-btn" onclick="handleSubmit('nutrition')">Submit</button>
|
|
<button class="reset-btn" onclick="handleReset()">Reset</button>
|
|
</div>
|
|
</div>
|
|
<!-- Email input and progress section -->
|
|
<div class="email-progress-section" id="nutrition-email-progress" style="display: none;">
|
|
<div class="email-input-container" id="nutrition-email-container" style="display: none;">
|
|
<label for="nutrition-email-input">Email:</label>
|
|
<span class="email-note">Optional for single file, required for 2+ files.</span>
|
|
<input type="email" id="nutrition-email-input" class="email-input" placeholder="your.email@example.com">
|
|
<span class="email-error" id="nutrition-email-error" style="display: none; color: red; font-size: 12px;"></span>
|
|
</div>
|
|
<div class="progress-section-tab" id="nutrition-progress-tab" style="display: none;">
|
|
<div class="progress-container">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="nutrition-progress-fill"></div>
|
|
</div>
|
|
<div class="progress-content-wrapper">
|
|
<div class="progress-text-group">
|
|
<div class="progress-text" id="nutrition-progress-text">Preparing...</div>
|
|
<div class="progress-details" id="nutrition-progress-details"></div>
|
|
</div>
|
|
<div class="progress-controls">
|
|
<button class="stop-btn" id="nutrition-stop-btn">Stop Analysis</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- pH Prediction Tab -->
|
|
<div class="tab-panel" id="ph-panel">
|
|
<div class="tab-description">
|
|
<h3>pH Prediction</h3>
|
|
<p>Predict the optimal pH range for microbial growth based on genomic information. This tool helps determine the optimal pH conditions for microbial cultivation by analyzing genes associated with pH tolerance.</p>
|
|
<p>To use this tool: users only need to upload the microbial genome.</p>
|
|
</div>
|
|
<div class="upload">
|
|
<div class="load">
|
|
<p>Upload genome</p>
|
|
<div class="upload_container">
|
|
<button class="file-select-btn" onclick="document.getElementById('ph-file-input').click()">Select File(s)</button>
|
|
<span class="file-status" id="ph-file-status">No file selected</span>
|
|
<input type="file" id="ph-file-input" name="file" accept=".fna, .fasta, .fa" multiple style="display: none;" onchange="updateFileStatus(this, 'ph-file-status')">
|
|
</div>
|
|
</div>
|
|
<div class="submit-section">
|
|
<label class="analysis-all-checkbox">
|
|
<input type="checkbox" id="ph-analysis-all" name="analysis-all">
|
|
<span>Analysis All</span>
|
|
</label>
|
|
<button class="submit-btn" id="ph-submit-btn" onclick="handleSubmit('ph')">Submit</button>
|
|
<button class="reset-btn" onclick="handleReset()">Reset</button>
|
|
</div>
|
|
</div>
|
|
<!-- Email input and progress section -->
|
|
<div class="email-progress-section" id="ph-email-progress" style="display: none;">
|
|
<div class="email-input-container" id="ph-email-container" style="display: none;">
|
|
<label for="ph-email-input">Email:</label>
|
|
<span class="email-note">Optional for single file, required for 2+ files.</span>
|
|
<input type="email" id="ph-email-input" class="email-input" placeholder="your.email@example.com">
|
|
<span class="email-error" id="ph-email-error" style="display: none; color: red; font-size: 12px;"></span>
|
|
</div>
|
|
<div class="progress-section-tab" id="ph-progress-tab" style="display: none;">
|
|
<div class="progress-container">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="ph-progress-fill"></div>
|
|
</div>
|
|
<div class="progress-content-wrapper">
|
|
<div class="progress-text-group">
|
|
<div class="progress-text" id="ph-progress-text">Preparing...</div>
|
|
<div class="progress-details" id="ph-progress-details"></div>
|
|
</div>
|
|
<div class="progress-controls">
|
|
<button class="stop-btn" id="ph-stop-btn">Stop Analysis</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Temperature Prediction Tab -->
|
|
<div class="tab-panel" id="temperature-panel">
|
|
<div class="tab-description">
|
|
<h3>Temperature Prediction</h3>
|
|
<p>Use genomic data to predict the optimal growth temperature range for microorganisms. Analyze temperature-related genes such as heat shock proteins and membrane proteins to provide a basis for optimizing temperature conditions.</p>
|
|
<p>To use this tool: users only need to upload the microbial genome.</p>
|
|
</div>
|
|
<div class="upload">
|
|
<div class="load">
|
|
<p>Upload genome</p>
|
|
<div class="upload_container">
|
|
<button class="file-select-btn" onclick="document.getElementById('temp-file-input').click()">Select File(s)</button>
|
|
<span class="file-status" id="temp-file-status">No file selected</span>
|
|
<input type="file" id="temp-file-input" name="file" accept=".fna, .fasta, .fa" multiple style="display: none;" onchange="updateFileStatus(this, 'temp-file-status')">
|
|
</div>
|
|
</div>
|
|
<div class="submit-section">
|
|
<label class="analysis-all-checkbox">
|
|
<input type="checkbox" id="temperature-analysis-all" name="analysis-all">
|
|
<span>Analysis All</span>
|
|
</label>
|
|
<button class="submit-btn" id="temperature-submit-btn" onclick="handleSubmit('temperature')">Submit</button>
|
|
<button class="reset-btn" onclick="handleReset()">Reset</button>
|
|
</div>
|
|
</div>
|
|
<!-- Email input and progress section -->
|
|
<div class="email-progress-section" id="temperature-email-progress" style="display: none;">
|
|
<div class="email-input-container" id="temperature-email-container" style="display: none;">
|
|
<label for="temperature-email-input">Email:</label>
|
|
<span class="email-note">Optional for single file, required for 2+ files.</span>
|
|
<input type="email" id="temperature-email-input" class="email-input" placeholder="your.email@example.com">
|
|
<span class="email-error" id="temperature-email-error" style="display: none; color: red; font-size: 12px;"></span>
|
|
</div>
|
|
<div class="progress-section-tab" id="temperature-progress-tab" style="display: none;">
|
|
<div class="progress-container">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="temperature-progress-fill"></div>
|
|
</div>
|
|
<div class="progress-content-wrapper">
|
|
<div class="progress-text-group">
|
|
<div class="progress-text" id="temperature-progress-text">Preparing...</div>
|
|
<div class="progress-details" id="temperature-progress-details"></div>
|
|
</div>
|
|
<div class="progress-controls">
|
|
<button class="stop-btn" id="temperature-stop-btn">Stop Analysis</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Oxygen Type Prediction Tab -->
|
|
<div class="tab-panel" id="oxygen-panel">
|
|
<div class="tab-description">
|
|
<h3>Oxygen Type Prediction</h3>
|
|
<p>Analyze genomic features to determine the type of oxygen requirement of a microorganism, determining whether it is aerobic, anaerobic, or facultative anaerobic.</p>
|
|
<p>To use this tool: users only need to upload the microbial genome.</p>
|
|
</div>
|
|
<div class="upload">
|
|
<div class="load">
|
|
<p>Upload genome</p>
|
|
<div class="upload_container">
|
|
<button class="file-select-btn" onclick="document.getElementById('oxygen-file-input').click()">Select File(s)</button>
|
|
<span class="file-status" id="oxygen-file-status">No file selected</span>
|
|
<input type="file" id="oxygen-file-input" name="file" accept=".fna, .fasta, .fa" multiple style="display: none;" onchange="updateFileStatus(this, 'oxygen-file-status')">
|
|
</div>
|
|
</div>
|
|
<div class="submit-section">
|
|
<label class="analysis-all-checkbox">
|
|
<input type="checkbox" id="oxygen-analysis-all" name="analysis-all">
|
|
<span>Analysis All</span>
|
|
</label>
|
|
<button class="submit-btn" id="oxygen-submit-btn" onclick="handleSubmit('oxygen')">Submit</button>
|
|
<button class="reset-btn" onclick="handleReset()">Reset</button>
|
|
</div>
|
|
</div>
|
|
<!-- Email input and progress section -->
|
|
<div class="email-progress-section" id="oxygen-email-progress" style="display: none;">
|
|
<div class="email-input-container" id="oxygen-email-container" style="display: none;">
|
|
<label for="oxygen-email-input">Email:</label>
|
|
<span class="email-note">Optional for single file, required for 2+ files.</span>
|
|
<input type="email" id="oxygen-email-input" class="email-input" placeholder="your.email@example.com">
|
|
<span class="email-error" id="oxygen-email-error" style="display: none; color: red; font-size: 12px;"></span>
|
|
</div>
|
|
<div class="progress-section-tab" id="oxygen-progress-tab" style="display: none;">
|
|
<div class="progress-container">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="oxygen-progress-fill"></div>
|
|
</div>
|
|
<div class="progress-content-wrapper">
|
|
<div class="progress-text-group">
|
|
<div class="progress-text" id="oxygen-progress-text">Preparing...</div>
|
|
<div class="progress-details" id="oxygen-progress-details"></div>
|
|
</div>
|
|
<div class="progress-controls">
|
|
<button class="stop-btn" id="oxygen-stop-btn">Stop Analysis</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Growth Rate Prediction Tab -->
|
|
<div class="tab-panel" id="growth-panel">
|
|
<div class="tab-description">
|
|
<h3>Growth Rate Prediction</h3>
|
|
<p>The phylogenetic information and codon preference information obtained from genomic data can be used to predict the maximum growth rate of microorganisms under optimal conditions.</p>
|
|
<p>To use this tool: users only need to upload the microbial genome.</p>
|
|
</div>
|
|
<div class="upload">
|
|
<div class="load">
|
|
<p>Upload genome</p>
|
|
<div class="upload_container">
|
|
<button class="file-select-btn" onclick="document.getElementById('growth-file-input').click()">Select File(s)</button>
|
|
<span class="file-status" id="growth-file-status">No file selected</span>
|
|
<input type="file" id="growth-file-input" name="file" accept=".fna, .fasta, .fa" multiple style="display: none;" onchange="updateFileStatus(this, 'growth-file-status')">
|
|
</div>
|
|
</div>
|
|
<div class="submit-section">
|
|
<label class="analysis-all-checkbox">
|
|
<input type="checkbox" id="growth-analysis-all" name="analysis-all">
|
|
<span>Analysis All</span>
|
|
</label>
|
|
<button class="submit-btn" id="growth-submit-btn" onclick="handleSubmit('growth')">Submit</button>
|
|
<button class="reset-btn" onclick="handleReset()">Reset</button>
|
|
</div>
|
|
</div>
|
|
<!-- Email input and progress section -->
|
|
<div class="email-progress-section" id="growth-email-progress" style="display: none;">
|
|
<div class="email-input-container" id="growth-email-container" style="display: none;">
|
|
<label for="growth-email-input">Email:</label>
|
|
<span class="email-note">Optional for single file, required for 2+ files.</span>
|
|
<input type="email" id="growth-email-input" class="email-input" placeholder="your.email@example.com">
|
|
<span class="email-error" id="growth-email-error" style="display: none; color: red; font-size: 12px;"></span>
|
|
</div>
|
|
<div class="progress-section-tab" id="growth-progress-tab" style="display: none;">
|
|
<div class="progress-container">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="growth-progress-fill"></div>
|
|
</div>
|
|
<div class="progress-content-wrapper">
|
|
<div class="progress-text-group">
|
|
<div class="progress-text" id="growth-progress-text">Preparing...</div>
|
|
<div class="progress-details" id="growth-progress-details"></div>
|
|
</div>
|
|
<div class="progress-controls">
|
|
<button class="stop-btn" id="growth-stop-btn">Stop Analysis</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Progress Display Area -->
|
|
<div class="progress-section" id="progress-section" style="display: none;">
|
|
<div class="title">
|
|
<p>Analysis Progress</p>
|
|
</div>
|
|
<div class="progress-container">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="progress-fill"></div>
|
|
</div>
|
|
<div class="progress-text" id="progress-text">Preparing...</div>
|
|
<div class="progress-details" id="progress-details"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Result Area -->
|
|
<div class="result" id="result-section">
|
|
<div class="title">
|
|
<p>Result</p>
|
|
</div>
|
|
<div class="download">
|
|
<button id="download-btn" onclick="downloadResult()" style="display: none;"><p>download CSV</p></button>
|
|
</div>
|
|
<div class="result-content" id="result-content">
|
|
<!-- Default display original result content -->
|
|
<ul>
|
|
<li>
|
|
<p class="field-name">
|
|
species name
|
|
</p>
|
|
<p class="field-value" id="result-species">Escherichia coli</p>
|
|
</li>
|
|
<li>
|
|
<p class="field-name">
|
|
taxonomy
|
|
</p>
|
|
<p class="field-value" id="result-taxonomy">domain: Bacteria; phylum: Pseudomonadota; Class: Gammaproteobacteria; Order: Enterobacterales; Family: Enterobacteriaceae; Genus: Escherichia</p>
|
|
</li>
|
|
<li>
|
|
<p class="field-name">
|
|
pH
|
|
</p>
|
|
<p class="field-value" id="result-ph">7.0</p>
|
|
</li>
|
|
<li>
|
|
<p class="field-name">
|
|
temperature
|
|
</p>
|
|
<p class="field-value" id="result-temperature">37</p>
|
|
</li>
|
|
<li>
|
|
<p class="field-name">
|
|
respiratory type
|
|
</p>
|
|
<p class="field-value" id="result-respiratory">facultative</p>
|
|
</li>
|
|
<li>
|
|
<p class="field-name">
|
|
culture medium
|
|
</p>
|
|
<p class="field-value" id="result-medium">glucose, lactose</p>
|
|
</li>
|
|
<li>
|
|
<p class="field-name">
|
|
Max growth rate
|
|
</p>
|
|
<p class="field-value" id="result-growth">1.0</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Footer -->
|
|
<div id="footer-placeholder"></div>
|
|
<script src="/public/js/module-loader.js"></script>
|
|
<script src="/public/js/Tools.js"></script>
|
|
</body>
|
|
</html> |