264 lines
9.8 KiB
HTML
264 lines
9.8 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">
|
|
<link rel="stylesheet" href="/public/css/index.css">
|
|
<link rel="stylesheet" href="/public/css/layout.css">
|
|
<link rel="stylesheet" href="/public/css/base.css">
|
|
<link rel="stylesheet" href="/public/css/download.css">
|
|
<link rel="stylesheet" href="/public/assets/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%;
|
|
}
|
|
|
|
.download-container {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 20px;
|
|
}
|
|
}
|
|
|
|
/* 移动设备 (最大768px) */
|
|
@media (max-width: 768px) {
|
|
.wrapper {
|
|
width: 100%;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.content {
|
|
padding: 15px 0;
|
|
}
|
|
|
|
.download-container {
|
|
grid-template-columns: 1fr;
|
|
gap: 15px;
|
|
}
|
|
|
|
.download-card {
|
|
padding: 20px;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.card-description {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.card-info {
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
|
|
.download-btn {
|
|
width: 100%;
|
|
padding: 12px;
|
|
}
|
|
}
|
|
|
|
/* 小屏幕移动设备 (最大480px) */
|
|
@media (max-width: 480px) {
|
|
.wrapper {
|
|
padding: 0 5px;
|
|
}
|
|
|
|
.content {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.download-card {
|
|
padding: 15px;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.card-description {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.card-info {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.download-btn {
|
|
font-size: 14px;
|
|
padding: 10px;
|
|
}
|
|
}
|
|
|
|
/* 超小屏幕 (最大360px) */
|
|
@media (max-width: 360px) {
|
|
.card-title {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.card-description {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.download-btn {
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<div id="header-placeholder"></div>
|
|
<!-- Main content -->
|
|
<div class="content">
|
|
<div class="wrapper">
|
|
<!-- Download options -->
|
|
<div class="download-container">
|
|
<!-- All Data -->
|
|
<div class="download-card">
|
|
<div class="card-content">
|
|
<h3 class="card-title">All Data (Combined)</h3>
|
|
<p class="card-description">Complete IDMCC dataset including pH, Temperature, Oxygen Type, Culture Medium, and Max Growth Rate.</p>
|
|
<div class="card-info">
|
|
<span class="info-item"><i class="iconfont icon-file"></i><span>CSV</span></span>
|
|
<span class="info-item"><i class="iconfont icon-size"></i><span>All fields</span></span>
|
|
<span class="info-item"><i class="iconfont icon-time"></i><span>Updated regularly</span></span>
|
|
</div>
|
|
</div>
|
|
<div class="card-actions">
|
|
<button class="download-btn" onclick="downloadFile('all_data.csv')">
|
|
<i class="iconfont icon-download"></i>
|
|
Download CSV
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- pH -->
|
|
<div class="download-card">
|
|
<div class="card-content">
|
|
<h3 class="card-title">pH Dataset</h3>
|
|
<p class="card-description">Growth pH values for microorganisms in the database.</p>
|
|
<div class="card-info">
|
|
<span class="info-item"><i class="iconfont icon-file"></i><span>CSV</span></span>
|
|
<span class="info-item"><i class="iconfont icon-format"></i><span>pH only</span></span>
|
|
</div>
|
|
</div>
|
|
<div class="card-actions">
|
|
<button class="download-btn" onclick="downloadFile('ph.csv')">
|
|
<i class="iconfont icon-download"></i>
|
|
Download CSV
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Temperature -->
|
|
<div class="download-card">
|
|
<div class="card-content">
|
|
<h3 class="card-title">Temperature Dataset</h3>
|
|
<p class="card-description">Growth temperature records across microorganisms.</p>
|
|
<div class="card-info">
|
|
<span class="info-item"><i class="iconfont icon-file"></i><span>CSV</span></span>
|
|
<span class="info-item"><i class="iconfont icon-format"></i><span>Temperature only</span></span>
|
|
</div>
|
|
</div>
|
|
<div class="card-actions">
|
|
<button class="download-btn" onclick="downloadFile('temperature.csv')">
|
|
<i class="iconfont icon-download"></i>
|
|
Download CSV
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Oxygen Type -->
|
|
<div class="download-card">
|
|
<div class="card-content">
|
|
<h3 class="card-title">Oxygen Type Dataset</h3>
|
|
<p class="card-description">Aerobic, anaerobic, and facultative types for microorganisms.</p>
|
|
<div class="card-info">
|
|
<span class="info-item"><i class="iconfont icon-file"></i><span>CSV</span></span>
|
|
<span class="info-item"><i class="iconfont icon-format"></i><span>O2 type only</span></span>
|
|
</div>
|
|
</div>
|
|
<div class="card-actions">
|
|
<button class="download-btn" onclick="downloadFile('oxygen.csv')">
|
|
<i class="iconfont icon-download"></i>
|
|
Download CSV
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Culture Medium -->
|
|
<div class="download-card">
|
|
<div class="card-content">
|
|
<h3 class="card-title">Culture Medium Dataset</h3>
|
|
<p class="card-description">Culture medium components and formulations.</p>
|
|
<div class="card-info">
|
|
<span class="info-item"><i class="iconfont icon-file"></i><span>CSV</span></span>
|
|
<span class="info-item"><i class="iconfont icon-format"></i><span>Medium only</span></span>
|
|
</div>
|
|
</div>
|
|
<div class="card-actions">
|
|
<button class="download-btn" onclick="downloadFile('culture_medium.csv')">
|
|
<i class="iconfont icon-download"></i>
|
|
Download CSV
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Maximum Growth Rate -->
|
|
<div class="download-card">
|
|
<div class="card-content">
|
|
<h3 class="card-title">Max Growth Rate Dataset</h3>
|
|
<p class="card-description">Maximum growth rate under optimal conditions.</p>
|
|
<div class="card-info">
|
|
<span class="info-item"><i class="iconfont icon-file"></i><span>CSV</span></span>
|
|
<span class="info-item"><i class="iconfont icon-format"></i><span>Rate only</span></span>
|
|
</div>
|
|
</div>
|
|
<div class="card-actions">
|
|
<button class="download-btn" onclick="downloadFile('max_growth_rate.csv')">
|
|
<i class="iconfont icon-download"></i>
|
|
Download CSV
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Footer -->
|
|
<div id="footer-placeholder"></div>
|
|
<script src="/public/js/module-loader.js"></script>
|
|
<!-- Import external JavaScript file -->
|
|
<script src="download.js" defer></script>
|
|
|
|
</body>
|
|
</html> |