284 lines
11 KiB
HTML
284 lines
11 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 Microbial 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>
|
|
|
|
<!-- CSS Imports -->
|
|
<link rel="stylesheet" href="/public/css/layout.css">
|
|
<link rel="stylesheet" href="/public/css/Search_merged.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;
|
|
}
|
|
|
|
/* 营养图表原生滚动条样式 - 与Search_merged.css保持一致 */
|
|
.chart-nutrition {
|
|
width: 100% !important;
|
|
height: 200px !important; /* 与CSS中定义的高度一致 */
|
|
}
|
|
|
|
/* 滚动容器样式 */
|
|
.chart-nutrition div[style*="overflow-y: auto"] {
|
|
overflow-y: auto !important;
|
|
overflow-x: hidden !important;
|
|
}
|
|
|
|
.chart-nutrition div[style*="overflow-y: auto"]::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.chart-nutrition div[style*="overflow-y: auto"]::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.chart-nutrition div[style*="overflow-y: auto"]::-webkit-scrollbar-thumb {
|
|
background: #c1c1c1;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.chart-nutrition div[style*="overflow-y: auto"]::-webkit-scrollbar-thumb:hover {
|
|
background: #a8a8a8;
|
|
}
|
|
|
|
/* 统一的自适应设计 */
|
|
|
|
/* 大屏幕 (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%;
|
|
}
|
|
}
|
|
|
|
/* 移动设备 (最大768px) */
|
|
@media (max-width: 768px) {
|
|
.wrapper {
|
|
width: 100%;
|
|
padding: 0 10px;
|
|
}
|
|
}
|
|
|
|
/* 小屏幕移动设备 (最大480px) */
|
|
@media (max-width: 480px) {
|
|
.wrapper {
|
|
padding: 0 5px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Header Placeholder -->
|
|
<div id="header-placeholder"></div>
|
|
|
|
<!-- 搜索部分内容 -->
|
|
<div class="search-section">
|
|
<div class="contant">
|
|
<div class="wrapper">
|
|
<!-- 搜索标签导航 -->
|
|
<h3>Input information</h3>
|
|
<!-- 标签内容 -->
|
|
<div class="tab-content">
|
|
<!-- Search by microbial genome 标签内容 -->
|
|
<div id="microbial-genome" class="tab-panel active">
|
|
|
|
<div class="searchMic">
|
|
<p>Find a microbial cultured condition search by species name(e.g. Escherichia coli)</p>
|
|
<div class="micName">
|
|
<input type="text" placeholder="input microbial name" id="microbial-name-input">
|
|
<i class="iconfont icon-search"></i>
|
|
</div>
|
|
</div>
|
|
<div class="selectDatabase">
|
|
<p>Target Database</p>
|
|
<select name="database" id="database" class="selDatabse">
|
|
<option value="Merge data" selected>Merge data</option>
|
|
<option value="cultured">Cultured Microbial</option>
|
|
<option value="uncultured">Uncultured Microbial</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="butt">
|
|
<button id="search-btn">Search</button>
|
|
<button id="reset-btn">Reset</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 结果部分内容 -->
|
|
<div class="results-section" id="results-section">
|
|
<div class="contant">
|
|
<div class="wrapper">
|
|
<div class="target_species">
|
|
<h3>Result</h3>
|
|
<div class="mic_info">
|
|
<div class="citation-card">
|
|
<div class="citation-banner">
|
|
<span>Culture conditions</span>
|
|
</div>
|
|
</div>
|
|
<div class="info1" id="specie-name">
|
|
<span>Specie name</span>
|
|
<p></p>
|
|
</div>
|
|
<div class="info1" id="Taxonomy">
|
|
<span>Taxonomy</span>
|
|
<p></p>
|
|
</div>
|
|
<div class="info1" id="pH">
|
|
<span>pH</span>
|
|
<p></p>
|
|
</div>
|
|
<div class="info1" id="Temperature">
|
|
<span>Temperature</span>
|
|
<p></p>
|
|
</div>
|
|
<div class="info1" id="Oxygen-resistance">
|
|
<span>Oxygen resistance</span>
|
|
<p></p>
|
|
</div>
|
|
<div class="info1" id="culture-medium">
|
|
<span>Meida</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 培养基信息卡片 -->
|
|
<div class="related_info">
|
|
<div class="citation-card">
|
|
<div class="citation-banner">
|
|
<span>Related species cultured data statistics</span>
|
|
</div>
|
|
</div>
|
|
<div class="statistics">
|
|
<!-- Chart pH - 第一个 -->
|
|
<div class="term">
|
|
<div class="type">
|
|
<span>pH</span>
|
|
</div>
|
|
<div class="chart-pH"></div>
|
|
</div>
|
|
|
|
<!-- Chart O2 - 第二个 -->
|
|
<div class="term">
|
|
<div class="type">
|
|
<span>O2 requirement</span>
|
|
</div>
|
|
<div class="chart-O2"></div>
|
|
</div>
|
|
|
|
<!-- Chart Temperature - 第三个 -->
|
|
<div class="term">
|
|
<div class="type">
|
|
<span>temperature</span>
|
|
</div>
|
|
<div class="chart-temp"></div>
|
|
</div>
|
|
|
|
<!-- Chart Nutrition - 第四个 -->
|
|
<div class="term">
|
|
<div class="type">
|
|
<span>nutrition</span>
|
|
</div>
|
|
<div class="chart-nutrition">
|
|
<!-- 营养物质图表内容 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="related_info">
|
|
<div class="citation-card">
|
|
<div class="citation-banner">
|
|
<span>Related species data</span>
|
|
</div>
|
|
</div>
|
|
<div class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr style="font-weight: 700; font-size: 100%;">
|
|
<th>Number</th>
|
|
<th>Microbial</th>
|
|
<th>Nutritional combination</th>
|
|
<th>Taxo</th>
|
|
<th>pH</th>
|
|
<th>Temperature</th>
|
|
<th>O2</th>
|
|
<th>Type</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
|
|
<!-- 表格底部控制区 -->
|
|
<div class="table-footer">
|
|
<div class="left-controls">
|
|
<span id="showing-text">Showing 1 to 20 of 0 entries.</span>
|
|
<div class="rows-control">
|
|
<label>Rows per page</label>
|
|
<select name="per_page" id="per_page">
|
|
<option value="10">10</option>
|
|
<option value="20" selected>20</option>
|
|
<option value="50">50</option>
|
|
<option value="100">100</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pagination">
|
|
<button id="prev-btn" class="page-btn">Previous</button>
|
|
<div class="page-numbers" id="page-numbers"></div>
|
|
<button id="next-btn" class="page-btn">Next</button>
|
|
</div>
|
|
|
|
<div class="download-section">
|
|
<button type="button" id="download-btn" class="download-btn">
|
|
<i class="iconfont icon-download"></i>
|
|
Download CSV
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer Placeholder -->
|
|
<div id="footer-placeholder"></div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="/public/js/module-loader.js"></script>
|
|
<script src="/public/js/search_merged.js"></script>
|
|
</body>
|
|
</html>
|