502 lines
24 KiB
HTML
502 lines
24 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 Help Documentation - Intelligent Design of Microbial Culture Conditions</title>
|
|
<link rel="icon" href="/public/assets/images/logo.png" type="image/png">
|
|
<link rel="stylesheet" href="/public/css/layout.css">
|
|
<link rel="stylesheet" href="/public/css/base.css">
|
|
<link rel="stylesheet" href="/public/css/help.css">
|
|
<link rel="stylesheet" href="/public/iconfont/iconfont.css">
|
|
<style>
|
|
/* 统一的基础样式 */
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.header .logo .title p {
|
|
color: #B3B3B3;
|
|
}
|
|
|
|
/* 统一的自适应设计 */
|
|
|
|
/* 大屏幕 (1400px+) */
|
|
@media (min-width: 1400px) {
|
|
.wrapper {
|
|
max-width: 1400px;
|
|
}
|
|
}
|
|
|
|
/* 中等屏幕 (992px - 1399px) */
|
|
@media (max-width: 1399px) {
|
|
.wrapper {
|
|
width: 95%;
|
|
}
|
|
}
|
|
|
|
/* 平板 (768px - 991px) */
|
|
@media (max-width: 991px) {
|
|
.wrapper {
|
|
width: 98%;
|
|
}
|
|
|
|
.help-container {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sidebar-nav {
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.main-content {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* 移动设备 (最大768px) */
|
|
@media (max-width: 768px) {
|
|
.wrapper {
|
|
width: 100%;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.help-container {
|
|
padding: 15px 0;
|
|
}
|
|
|
|
.sidebar-nav {
|
|
width: 100%;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.sidebar-header h3 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.nav-section-title {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.nav-section-list a {
|
|
font-size: 13px;
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.main-content {
|
|
width: 100%;
|
|
}
|
|
|
|
.content-header h1 {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.content-header p {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.section h2 {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.section h3 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.section p {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.feature-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 15px;
|
|
}
|
|
|
|
.demo-image img {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
/* 小屏幕移动设备 (最大480px) */
|
|
@media (max-width: 480px) {
|
|
.wrapper {
|
|
padding: 0 5px;
|
|
}
|
|
|
|
.help-container {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.sidebar-nav {
|
|
padding: 10px;
|
|
}
|
|
|
|
.sidebar-header h3 {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.nav-section-title {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.nav-section-list a {
|
|
font-size: 12px;
|
|
padding: 6px 10px;
|
|
}
|
|
|
|
.content-header {
|
|
padding: 15px;
|
|
}
|
|
|
|
.content-header h1 {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.content-header p {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.content-body {
|
|
padding: 15px;
|
|
}
|
|
|
|
.section {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.section h2 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.section h3 {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.section h4 {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.section p {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.step-list li {
|
|
font-size: 13px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.highlight-box {
|
|
padding: 12px;
|
|
}
|
|
|
|
.highlight-box h4 {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.highlight-box p {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
/* 超小屏幕 (最大360px) */
|
|
@media (max-width: 360px) {
|
|
.content-header h1 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.section h2 {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.section h3 {
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Header Placeholder -->
|
|
<div id="header-placeholder"></div>
|
|
|
|
<div class="help-container">
|
|
<div class="wrapper">
|
|
<!-- 左侧边栏导航 -->
|
|
<nav class="sidebar-nav">
|
|
<div class="sidebar-header">
|
|
<h3>IDMCC</h3>
|
|
</div>
|
|
<div class="nav-section">
|
|
<h4 class="nav-section-title">Welcome</h4>
|
|
<ul class="nav-section-list">
|
|
<li><a href="#introduction" class="active">Introduction</a></li>
|
|
<li><a href="#getting-started">Quick Start</a></li>
|
|
<!-- <li><a href="#features">Features</a></li> -->
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<h4 class="nav-section-title">Tutorial</h4>
|
|
<ul class="nav-section-list">
|
|
<li><a href="#home-tutorial">Home</a></li>
|
|
<li><a href="#browse-tutorial">Browse</a></li>
|
|
<li><a href="#search-tutorial">Search</a></li>
|
|
<li><a href="#tools-tutorial">Tools</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<h4 class="nav-section-title">Support</h4>
|
|
<ul class="nav-section-list">
|
|
<li><a href="#faq">FAQ</a></li>
|
|
<li><a href="#contact">Contact Us</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 主内容区域 -->
|
|
<main class="main-content">
|
|
|
|
<header class="content-header">
|
|
<h1>IDMCC Help Documentation</h1>
|
|
<p>Intelligent Design of Microbial Culture Conditions Platform - Providing comprehensive microbial culture condition prediction and analysis tools for researchers</p>
|
|
</header>
|
|
|
|
<div class="content-body">
|
|
<!-- Introduction -->
|
|
<section id="introduction" class="section">
|
|
<h2>Platform Introduction</h2>
|
|
<p>IDMCC (Intelligent Design of Microbial Culture Conditions) is a comprehensive platform focused on intelligent design of microbial culture conditions. We are committed to providing researchers with accurate and efficient microbial culture condition prediction tools.</p>
|
|
|
|
<div class="highlight-box">
|
|
<h4>Core Value</h4>
|
|
<p>By integrating genomic data analysis and machine learning technologies, IDMCC helps researchers quickly determine optimal culture conditions for microorganisms, significantly improving experimental efficiency and success rates.</p>
|
|
</div>
|
|
|
|
<!-- <h3>Key Features</h3>
|
|
<div class="feature-grid">
|
|
<div class="feature-card">
|
|
<h4>Intelligent Prediction</h4>
|
|
<p>Based on genomic data, intelligently predict microbial nutritional requirements, pH range, temperature conditions, and oxygen type</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h4>User-Friendly</h4>
|
|
<p>Intuitive interface design, supporting multiple search and browsing methods, simple and convenient operation</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h4>Real-time Analysis</h4>
|
|
<p>Provides real-time analysis progress display, supports large file uploads and batch processing</p>
|
|
</div>
|
|
</div> -->
|
|
</section>
|
|
|
|
<!-- Quick start -->
|
|
<section id="getting-started" class="section">
|
|
<h2>Quick Start</h2>
|
|
<p>Welcome to the IDMCC platform! The following steps will help you get started quickly:</p>
|
|
|
|
<ol class="step-list">
|
|
<li>
|
|
<strong>Visit Homepage</strong><br>
|
|
Open the IDMCC homepage where you can view platform overview and latest data statistics
|
|
</li>
|
|
<li>
|
|
<strong>Browse Data</strong><br>
|
|
Use the "Browse" function to browse existing microbial culture condition data with support for multiple filtering criteria
|
|
</li>
|
|
<li>
|
|
<strong>Search Microorganisms</strong><br>
|
|
Use the "Search" function to enter microorganism names or upload genome files for searching
|
|
</li>
|
|
<li>
|
|
<strong>Use Prediction Tools</strong><br>
|
|
On the "Tools" page, upload genome files to obtain culture condition prediction results
|
|
</li>
|
|
<li>
|
|
<strong>Download Results</strong><br>
|
|
After analysis is complete, you can download detailed prediction result reports
|
|
</li>
|
|
</ol>
|
|
</section>
|
|
|
|
<!-- Home tutorial -->
|
|
<section id="home-tutorial" class="section">
|
|
<h2>Home Tutorial</h2>
|
|
<p>IDMCC (Intelligent Design of Microbial Culture Conditions) is a comprehensive platform focused on intelligent design of microbial culture conditions. We are committed to providing researchers with accurate and efficient microbial culture condition prediction tools.</p>
|
|
<div class="interface-demo">
|
|
<div class="demo-image">
|
|
<img src="/public/assets/images/home_tutorial-01.svg" alt="Home Interface Demo">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Browse tutorial -->
|
|
<section id="browse-tutorial" class="section">
|
|
<h2>Browse Tutorial</h2>
|
|
<p>The Browse function provides comprehensive access to the microbial culture condition database with advanced filtering and search capabilities. This tutorial will guide you through all the features and help you make the most of this powerful tool.</p>
|
|
<ul class="demo">
|
|
<li><h4 class="demo_title">Set data filter conditions</h4></li>
|
|
<li><p>By clicking on the <a href="/public/assets/Browse.html" style="font-weight: 700;">Browse</a> navigation bar, you can access statistical information and detailed data for all entries in the database. Additionally, you can filter and browse species information under specific cultivation conditions by setting criteria such as taxonomic rank, pH value, temperature, and respiratory type.
|
|
</p></li>
|
|
<li class="demo-image"><img src="/public/assets/images/Browse_filter_画板 1.svg" alt="Search Interface Demo" class="demo-img"></li>
|
|
</ul>
|
|
<ul class="demo">
|
|
<li><h4 class="demo_title">Species data statistics</h4></li>
|
|
<li><p>Species abundance is visualized through a Sankey diagram, with hierarchical counting of species numbers based on the GTDB taxonomic classification system. By default, the Sankey diagram displays only the top 10 sub-rank categories with the highest species counts at each taxonomic level.</p></li>
|
|
<li class="demo-image"><img src="/public/assets/images/Browse_taxonomy.svg" alt="Search Interface Demo" class="demo-img"></li>
|
|
</ul>
|
|
<ul class="demo">
|
|
<li><h4 class="demo_title">Species table</h4></li>
|
|
<li><p>On this page, you can browse the cultivation condition information for all microorganisms that meet the filtering criteria. Click on a species name to view its detailed information.</p></li>
|
|
<li class="demo-image"><img src="/public/assets/images/Browse_data_table.svg" alt="Search Interface Demo" class="demo-img"></li>
|
|
</ul>
|
|
|
|
</section>
|
|
|
|
<!-- Search tutorial -->
|
|
<section id="search-tutorial" class="section">
|
|
<h2>Search Tutorial</h2>
|
|
<p>The Search function provides two powerful ways to find microorganism information and obtain detailed culture condition predictions. This tutorial will guide you through both search methods and help you get the most accurate results.</p>
|
|
<ul class="demo">
|
|
<li><h4 class="demo_title">input search information</h4></li>
|
|
<li><p>By clicking on the <a href="/public/assets/Search_merged.html" style="font-weight: 700;">Search</a> navigation bar, you can choose to search based on species name or upload genome.
|
|
If you choose to search by genome, please click the "Select File" button to upload your genome file. Supported file formats include .fna, .fasta, and .fa.
|
|
This genome file should be species annotation by GTDB-Tk, and then search this species name in our database.
|
|
</p></li>
|
|
<li class="demo-image"><img src="/public/assets/images/search_input_information_画板 1_画板 1.svg" alt="Search Interface Demo" class="demo-img"></li>
|
|
</ul>
|
|
<ul class="demo">
|
|
<li><h4 class="demo_title">Target species search results</h4></li>
|
|
<li><p>This page displays the search content regarding the cultivation conditions for the target microorganisms.
|
|
<a href="#" style="font-style: italic;">example: Escherichia coli</a>
|
|
</p></li>
|
|
<li class="demo-image"><img src="/public/assets/images/search_target_result_画板 1.svg" alt="" class="demo-img"> </li>
|
|
</ul>
|
|
<ul class="demo">
|
|
<li><h4 class="demo_title">Related species search results</h4></li>
|
|
<li><p>Search for statistical data and detailed information on the cultivation conditions of closely related species to the target species. This includes pH levels, respiratory types, temperature ranges, and nutrient utilization. The pH levels are categorized as acidophilic (pH: 1-6), neutrophilic (pH: 6-8), and alkaliphilic (pH: 8-12). Respiratory types are classified into anaerobic, aerobic, and facultative anaerobic. Temperature ranges are divided into psychrophiles (1°C-45°C) and thermophiles (46°C-103°C). Detailed information on the closely related species can be found in the table below.</p></li>
|
|
<li class="demo-image"><img src="/public/assets/images/search_related_information.svg" alt="" class="demo-img"> </li>
|
|
</ul>
|
|
|
|
</section>
|
|
|
|
<!-- Tools tutorial -->
|
|
<section id="tools-tutorial" class="section">
|
|
<h2>Tools Tutorial</h2>
|
|
<ul class="demo">
|
|
<li><h4 class="demo_title">Select tools and upload genome</h4></li>
|
|
<li><p>Completing the cultivation condition prediction only requires three steps.
|
|
First, select the prediction type, such as <a href="/public/html/Tools.html">"Nutrient Prediction"</a>;
|
|
second, upload the genome file;
|
|
third, click the submit button.
|
|
Just wait a few minutes, and the prediction task will be completed.</p></li>
|
|
<li class="demo-image"><img src="/public/assets/images/Tools_predict_tools_画板 1.svg" alt="" class="demo-img"> </li>
|
|
</ul>
|
|
<ul class="demo">
|
|
<li><h4 class="demo_title">Predict result</h4></li>
|
|
<li><p>The prediction results will be displayed in the "Results" table. The result file includes data such as species annotation information <a href="#" style="font-style: italic;">example: Escherichia coli</a>, pH value, temperature, respiratory type, culture medium composition, and maximum growth rate.
|
|
<br>Note: When the "pH Predict" option is selected, only the pH value will be predicted, and other cultivation condition fields will remain empty by default and not be displayed.</p></li>
|
|
<li class="demo-image"><img src="/public/assets/images/Tools_result_画板 1.svg" alt="" class="demo-img"> </li>
|
|
</ul>
|
|
</section>
|
|
<!-- Frequently Asked Questions -->
|
|
<section id="faq" class="section">
|
|
<h2>Frequently Asked Questions</h2>
|
|
|
|
<h3>Q: How to get the most accurate prediction results?</h3>
|
|
<p>A: It is recommended to use complete, high-quality genome data. The higher the genome completeness, the more accurate the prediction results. Also, ensure the genome file format is correct and avoid containing too many N bases.</p>
|
|
|
|
<h3>Q: How long does the analysis take?</h3>
|
|
<p>A: Analysis time depends on genome size and server load. Usually, small genomes (<5MB) take 2-5 minutes, while large genomes may take 10-30 minutes. You can view the analysis status in real-time through the progress bar.</p>
|
|
|
|
<h3>Q: What types of microorganisms are supported?</h3>
|
|
<p>A: IDMCC mainly supports predictions for bacteria and archaea. For eukaryotic microorganisms (such as fungi, yeast), prediction accuracy may be limited.</p>
|
|
|
|
<h3>Q: How reliable are the prediction results?</h3>
|
|
<p>A: Our models are trained on large amounts of experimentally validated data and show good accuracy on test sets. However, prediction results are for reference only, and experimental validation is recommended.</p>
|
|
|
|
<h3>Q: How to handle analysis failure situations?</h3>
|
|
<p>A: If analysis fails, please check: 1) Whether the file format is correct; 2) Whether the file size exceeds the limit; 3) Whether the network connection is stable. If the problem persists, please contact technical support.</p>
|
|
</section>
|
|
|
|
<!-- Contact us -->
|
|
<section id="contact" class="section">
|
|
<h2>Contact Us</h2>
|
|
<p>If you encounter any problems during use or have suggestions for improvement, please feel free to contact us:</p>
|
|
|
|
<div class="feature-grid">
|
|
<div class="feature-card">
|
|
<h4>Technical Support</h4>
|
|
<p>Email: support@idmcc.org<br>Phone: 27-xxxxxxxx</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h4>Collaboration Consultation</h4>
|
|
<p>Email: collaboration@idmcc.org<br>Phone: 27-xxxxxxxx</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h4>Data Feedback</h4>
|
|
<p>Email: data@idmcc.org<br>Phone: 27-xxxxxxxx</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="highlight-box">
|
|
<h4>Working Hours</h4>
|
|
<p>Monday to Friday: 9:00-18:00 (Beijing Time)<br>We will reply to your emails within 24 hours.</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<!-- Footer Placeholder -->
|
|
<div id="footer-placeholder"></div>
|
|
|
|
<script src="/public/js/module-loader.js"></script>
|
|
<script src="/public/js/search_merged.js"></script>
|
|
<!-- <script>
|
|
// 平滑滚动到锚点
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// 更新页面内导航活动状态
|
|
function updateActiveNav() {
|
|
const sections = document.querySelectorAll('.section');
|
|
const navLinks = document.querySelectorAll('.nav-section-list a');
|
|
|
|
let current = '';
|
|
sections.forEach(section => {
|
|
const sectionTop = section.offsetTop - 150;
|
|
if (window.pageYOffset >= sectionTop) {
|
|
current = section.getAttribute('id');
|
|
}
|
|
});
|
|
|
|
navLinks.forEach(link => {
|
|
link.classList.remove('active');
|
|
if (link.getAttribute('href') === '#' + current) {
|
|
link.classList.add('active');
|
|
}
|
|
});
|
|
}
|
|
|
|
// 监听滚动事件
|
|
window.addEventListener('scroll', updateActiveNav);
|
|
|
|
// 页面加载完成后初始化
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
updateActiveNav();
|
|
});
|
|
</script> -->
|
|
</body>
|
|
</html>
|