616 lines
22 KiB
HTML
616 lines
22 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>
|
|
|
|
<!-- Load Common Layout Styles -->
|
|
<link rel="stylesheet" href="/public/css/layout.css">
|
|
|
|
<!-- Page Specific Styles -->
|
|
<link rel="stylesheet" href="/public/css/index.css">
|
|
<link rel="stylesheet" href="/public/css/base.css">
|
|
<link rel="stylesheet" href="/public/assets/iconfont/iconfont.css">
|
|
<style>
|
|
/* 统一的基础样式 */
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.header {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
/* 统一的自适应设计 */
|
|
|
|
/* 大屏幕 (1400px+) */
|
|
@media (min-width: 1400px) {
|
|
.wrapper {
|
|
max-width: 1400px;
|
|
}
|
|
}
|
|
|
|
/* 中等屏幕 (992px - 1399px) */
|
|
@media (max-width: 1399px) {
|
|
.wrapper {
|
|
width: 95%;
|
|
}
|
|
|
|
.banner-title {
|
|
font-size: 42px;
|
|
}
|
|
|
|
.banner-content {
|
|
padding-top: 10%;
|
|
}
|
|
}
|
|
|
|
/* 平板 (768px - 991px) */
|
|
@media (max-width: 991px) {
|
|
.wrapper {
|
|
width: 98%;
|
|
}
|
|
|
|
.content .data {
|
|
flex-direction: column;
|
|
margin-top: -20px;
|
|
}
|
|
|
|
.data-cards {
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
gap: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.data-card {
|
|
width: calc(50% - 7.5px);
|
|
min-width: 280px;
|
|
}
|
|
|
|
.introduction {
|
|
width: 100%;
|
|
margin-left: 0;
|
|
padding: 25px 20px;
|
|
}
|
|
|
|
.taxonomy-and-physchem {
|
|
flex-direction: column;
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.taxonomy-container,
|
|
.physchem-container,
|
|
.nutrition-container {
|
|
flex: 1 1 100%;
|
|
max-width: 100%;
|
|
min-width: 100%;
|
|
height: auto;
|
|
min-height: 400px;
|
|
}
|
|
|
|
.tools-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.tool-card {
|
|
border-right: none !important;
|
|
padding: 24px;
|
|
}
|
|
|
|
.tool-card:nth-child(5) {
|
|
grid-column: 1;
|
|
}
|
|
|
|
.banner-title {
|
|
font-size: 36px;
|
|
}
|
|
|
|
.banner-content {
|
|
padding-top: 8%;
|
|
}
|
|
}
|
|
|
|
/* 移动设备 (最大768px) */
|
|
@media (max-width: 768px) {
|
|
.wrapper {
|
|
width: 100%;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.content .banner {
|
|
min-height: 400px;
|
|
padding: 40px 0 60px 0;
|
|
}
|
|
|
|
.banner-title {
|
|
font-size: 28px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.banner-content {
|
|
padding-top: 5%;
|
|
}
|
|
|
|
.search-container {
|
|
max-width: 100%;
|
|
padding: 6px 6px 6px 15px;
|
|
}
|
|
|
|
.search-btn {
|
|
padding: 10px 20px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.content .data {
|
|
margin-top: -30px;
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.data-cards {
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
|
|
.data-card {
|
|
width: 100%;
|
|
min-height: 120px;
|
|
}
|
|
|
|
.data-card a {
|
|
padding: 20px;
|
|
}
|
|
|
|
.card-icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.card-icon i {
|
|
font-size: 300%;
|
|
}
|
|
|
|
.card-number {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.introduction {
|
|
padding: 20px 15px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.introduction p {
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.taxonomy-and-physchem {
|
|
padding: 0 10px;
|
|
gap: 10px;
|
|
}
|
|
|
|
.taxonomy-container,
|
|
.physchem-container,
|
|
.nutrition-container {
|
|
margin: 10px 0;
|
|
padding: 15px;
|
|
height: auto;
|
|
min-height: 350px;
|
|
}
|
|
|
|
.taxonomy-tabs {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.taxonomy-tab-item {
|
|
padding: 10px 16px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.taxonomy-taxa-name,
|
|
.nutrition-taxa-name {
|
|
width: 150px;
|
|
font-size: 90%;
|
|
}
|
|
|
|
.tools-header {
|
|
padding: 12px 16px;
|
|
}
|
|
|
|
.tools-header h2 {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.tool-card {
|
|
padding: 20px;
|
|
}
|
|
|
|
.tool-icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.tool-icon i {
|
|
font-size: 250%;
|
|
}
|
|
|
|
.tool-title {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.tool-description {
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
/* 小屏幕移动设备 (最大480px) */
|
|
@media (max-width: 480px) {
|
|
.wrapper {
|
|
padding: 0 5px;
|
|
}
|
|
|
|
.content .banner {
|
|
min-height: 350px;
|
|
}
|
|
|
|
.banner-title {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.banner-content {
|
|
padding-top: 3%;
|
|
}
|
|
|
|
.search-container {
|
|
padding: 5px 5px 5px 12px;
|
|
}
|
|
|
|
.search-container .icon-search {
|
|
font-size: 18px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.search-container input {
|
|
font-size: 14px;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.search-btn {
|
|
padding: 8px 16px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.data-card a {
|
|
padding: 15px;
|
|
}
|
|
|
|
.card-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.card-icon i {
|
|
font-size: 250%;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.card-number {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.introduction {
|
|
padding: 15px 12px;
|
|
}
|
|
|
|
.introduction p {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.taxonomy-container,
|
|
.physchem-container,
|
|
.nutrition-container {
|
|
padding: 12px;
|
|
min-height: 300px;
|
|
}
|
|
|
|
.taxonomy-title {
|
|
font-size: 16px;
|
|
padding: 12px 15px 6px 15px;
|
|
}
|
|
|
|
.taxonomy-tab-item {
|
|
padding: 8px 12px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.tools-header {
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.tools-header h2 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.tool-card {
|
|
padding: 15px;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.tool-icon {
|
|
width: 64px;
|
|
height: 64px;
|
|
margin-right: 0;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.tool-title {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.tool-description {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
/* 超小屏幕 (最大360px) */
|
|
@media (max-width: 360px) {
|
|
.banner-title {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.search-container input {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.search-btn {
|
|
padding: 6px 12px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.card-number {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.taxonomy-tab-item {
|
|
font-size: 11px;
|
|
padding: 6px 10px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Header Placeholder -->
|
|
<div id="header-placeholder"></div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="content">
|
|
<div class="banner">
|
|
<div class="banner-content">
|
|
<h1 class="banner-title">Intelligent design of microbial culture conditions</h1>
|
|
<div class="banner-search">
|
|
<div class="search-container">
|
|
<i class="iconfont icon-search"></i>
|
|
<input type="text" id="banner-search-input" placeholder="Search by species name">
|
|
<button class="search-btn" id="banner-search-btn">Search</button>
|
|
</div>
|
|
<p class="search-example">e.g., Escherichia coli</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="wrapper">
|
|
<div class="data">
|
|
<div class="data-cards">
|
|
<div class="data-card">
|
|
<a href="#">
|
|
<div class="card-icon">
|
|
<i class="iconfont icon-dachangganjun"></i>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="card-title">Species</div>
|
|
<div class="card-number">53,868</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="data-card">
|
|
<a href="#">
|
|
<div class="card-icon">
|
|
<i class="iconfont icon-pHzhi1"></i>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="card-title">pH range</div>
|
|
<div class="card-number">1~11.5</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="data-card">
|
|
<a href="#">
|
|
<div class="card-icon">
|
|
<i class="iconfont icon-wendu"></i>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="card-title">Temperature range</div>
|
|
<div class="card-number">3~103°C</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="data-card">
|
|
<a href="#">
|
|
<div class="card-icon">
|
|
<i class="iconfont icon-oxygen"></i>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="card-title">O2 tolerance</div>
|
|
<div class="card-number">An/aerobic</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="introduction">
|
|
<p>Intelligent Design of Microbial Culture Conditions Database (IDDMCCD) is a database specifically designed for microbial culture medium conditions. Users only need to input genome data, and they can accomplish the prediction of nutrient components in the culture medium. Simultaneously, it integrates prediction methods from other studies for pH value, culture temperature, respiratory type, and maximum growth rate. This database encompasses 2,000 sets of data on cultured microorganisms and has also made predictions regarding the culture conditions of 40,000 uncultured microorganisms recorded in the GTDB database.</p>
|
|
</div>
|
|
</div>
|
|
<div class="data_info">
|
|
<div class="title">
|
|
<h2>Data statistics</h2>
|
|
</div>
|
|
<!-- Taxonomy and Physical and chemical properties boxes -->
|
|
<div class="taxonomy-and-physchem">
|
|
<!-- Left: Taxonomy -->
|
|
<div class="taxonomy-container">
|
|
<h3 class="taxonomy-title">Taxonomy</h3>
|
|
<div class="taxonomy-tabs-container">
|
|
<ul class="taxonomy-tabs">
|
|
<li class="taxonomy-tab-item active" data-tab="phylum">Phylum</li>
|
|
<li class="taxonomy-tab-item" data-tab="class">Class</li>
|
|
<li class="taxonomy-tab-item" data-tab="order">Order</li>
|
|
<li class="taxonomy-tab-item" data-tab="family">Family</li>
|
|
<li class="taxonomy-tab-item" data-tab="genus">Genus</li>
|
|
<li class="taxonomy-tab-item" data-tab="species">Species</li>
|
|
</ul>
|
|
</div>
|
|
<div class="taxonomy-chart-container">
|
|
<div class="taxonomy-total-badge" id="taxonomyTotalBadge">Loading...</div>
|
|
<div class="taxonomy-grid-lines" id="taxonomyGridLines"></div>
|
|
<div class="taxonomy-chart-content" id="taxonomyChartContent"></div>
|
|
<div class="taxonomy-x-axis">
|
|
<div class="taxonomy-x-axis-labels" id="taxonomyXAxisLabels">
|
|
<span>0</span>
|
|
<span>10,00</span>
|
|
<span>20,00</span>
|
|
<span>30,00</span>
|
|
<span>40,00</span>
|
|
</div>
|
|
<div class="count_x_axis">
|
|
<p>number of species</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Middle: Physical and chemical properties -->
|
|
<div class="physchem-container">
|
|
<h3 class="taxonomy-title">Physical and chemical properties</h3>
|
|
<div class="taxonomy-tabs-container">
|
|
<ul class="taxonomy-tabs" id="physchem-tabs">
|
|
<li class="taxonomy-tab-item active" data-tab="o2">O2</li>
|
|
<li class="taxonomy-tab-item" data-tab="ph">pH</li>
|
|
<li class="taxonomy-tab-item" data-tab="temperature">temperature</li>
|
|
</ul>
|
|
</div>
|
|
<div class="chart-container">
|
|
<div class="physchem-total-badge" id="physchem-total-badge">Total count: 0</div>
|
|
<div class="chart-area active" id="chart-oxygen-pie"></div>
|
|
<div class="chart-area" id="chart-ph-hist"></div>
|
|
<div class="chart-area" id="chart-temp-hist"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Right: Growth conditions -->
|
|
<div class="nutrition-container">
|
|
<h3 class="taxonomy-title">Nutrition utilization</h3>
|
|
<div class="taxonomy-chart-container">
|
|
<div class="taxonomy-total-badge" id="nutrition-total-badge">Total count: 0</div>
|
|
<div class="nutrition-grid-lines" id="nutrition-grid-lines"></div>
|
|
<div class="taxonomy-chart-content" id="nutrition-chart-content"></div>
|
|
<div class="taxonomy-x-axis">
|
|
<div class="nutrition-x-axis-labels" id="nutrition-x-axis-labels">
|
|
<span>0</span>
|
|
<span>500</span>
|
|
<span>1,000</span>
|
|
<span>1,500</span>
|
|
<span>2,000</span>
|
|
<span>2,500</span>
|
|
<span>3,000</span>
|
|
<span>3,500</span>
|
|
<span>4,000</span>
|
|
</div>
|
|
<div class="count_x_axis">
|
|
<p>number of species</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="taxonomy-tooltip" id="taxonomyTooltip"></div>
|
|
<div class="taxonomy-tooltip" id="nutrition-tooltip"></div>
|
|
<div class="taxonomy-tooltip" id="culture-tooltip"></div>
|
|
</div>
|
|
|
|
<div class="tools-section">
|
|
<div class="tools-header">
|
|
<h2>Tools</h2>
|
|
</div>
|
|
<div class="tools-grid">
|
|
<div class="tool-card">
|
|
<div class="tool-icon">
|
|
<i class="iconfont icon-peiyangjipeizhijilu"></i>
|
|
</div>
|
|
<div class="tool-content">
|
|
<h3 class="tool-title">Culture medium predict</h3>
|
|
<p class="tool-description">The microbial culture medium prediction model can predict microbial growth medium by simply inputting genomic data.</p>
|
|
</div>
|
|
</div>
|
|
<div class="tool-card">
|
|
<div class="tool-icon">
|
|
<i class="iconfont icon-PHzhi"></i>
|
|
</div>
|
|
<div class="tool-content">
|
|
<h3 class="tool-title">pH predict</h3>
|
|
<p class="tool-description">Only genomic data needs to be input, and the optimal growth pH of the microorganism can be predicted.</p>
|
|
</div>
|
|
</div>
|
|
<div class="tool-card">
|
|
<div class="tool-icon">
|
|
<i class="iconfont icon-wendu"></i>
|
|
</div>
|
|
<div class="tool-content">
|
|
<h3 class="tool-title">Temperature predict</h3>
|
|
<p class="tool-description">Using genomic information to predict the optimal growth temperature range of microorganisms.</p>
|
|
</div>
|
|
</div>
|
|
<div class="tool-card">
|
|
<div class="tool-icon">
|
|
<i class="iconfont icon-oxygen"></i>
|
|
</div>
|
|
<div class="tool-content">
|
|
<h3 class="tool-title">Oxygen type prediction</h3>
|
|
<p class="tool-description">Analyze the oxygen demand type of microorganisms based on genomic characteristics to determine whether they are aerobic, anaerobic, or facultative anaerobic microorganisms.</p>
|
|
</div>
|
|
</div>
|
|
<div class="tool-card">
|
|
<div class="tool-icon">
|
|
<i class="iconfont icon-tubiao"></i>
|
|
</div>
|
|
<div class="tool-content">
|
|
<h3 class="tool-title">Maximum growth rate prediction</h3>
|
|
<p class="tool-description">The maximum growth rate of microorganisms under optimal conditions is predicted through genomic data analysis, providing theoretical support for culture time planning and process optimization.</p>
|
|
</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/index.js"></script>
|
|
</body>
|
|
</html> |