203 lines
7.9 KiB
HTML
203 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Search</title>
|
|
<link rel="stylesheet" href="/public/css/Search.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;
|
|
}
|
|
|
|
/* 统一的自适应设计 */
|
|
|
|
/* 大屏幕 (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>
|
|
<!-- 头部 -->
|
|
<div class="header">
|
|
<!-- logo -->
|
|
<div class="logo">
|
|
<a href="#"><img src="/public/assets/images/logo.png" alt=""></a>
|
|
<div class="title">
|
|
<h3>Intelligent Design of Microbial Culture Conditions</h3>
|
|
<p>A database aimed at predicting culture conditions through machine learning.
|
|
</div>
|
|
</div>
|
|
<!-- nev -->
|
|
<div class="nev">
|
|
<ul class="nev-child-1">
|
|
<li><a href="/index.html">Home</a></li>
|
|
<li><a href="/Browse.html">Browse</a></li>
|
|
<li><a href="/Search_merged.html" style="color: black;">Search</a></li>
|
|
<li class="nav-tools"><a href="/Tools.html">Tools
|
|
<i class="iconfont icon-jiantou_xia"></i>
|
|
<i class="iconfont icon-jiantou_shang"></i>
|
|
</a>
|
|
<ul class="nev-child-2 tools-dropdown">
|
|
<li><a href="/Tools.html?tab=nutrition">Nutrition Prediction</a></li>
|
|
<li><a href="/Tools.html?tab=ph">pH Prediction</a></li>
|
|
<li><a href="/Tools.html?tab=temperature">Temperature Prediction</a></li>
|
|
<li><a href="/Tools.html?tab=oxygen">Oxygen Type Prediction</a></li>
|
|
<li><a href="/Tools.html?tab=growth">Growth Rate Prediction</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="/download.html">Download</a></li>
|
|
<li class="nav-help"><a href="/help.html">Help
|
|
<i class="iconfont icon-jiantou_xia"></i>
|
|
<i class="iconfont icon-jiantou_shang"></i>
|
|
</a>
|
|
<ul class="nev-child-2 help-dropdown">
|
|
<li><a href="/help.html">Contact us</a></li>
|
|
<li><a href="/help.html">Feedback</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- 内容 -->
|
|
<div class="contant">
|
|
<div class="wrapper">
|
|
<!-- 搜索标签导航 -->
|
|
<h3>Input information</h3>
|
|
<div class="search-tabs">
|
|
<div class="tab-buttons">
|
|
<button class="tab-btn active" data-tab="microbial-genome">Search by microbial name</button>
|
|
<button class="tab-btn" data-tab="search-genome">search by genome</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 标签内容 -->
|
|
<div class="tab-content">
|
|
<!-- Search by microbial genome 标签内容 -->
|
|
<div id="microbial-genome" class="tab-panel active">
|
|
<div class="species">
|
|
<div class="search_mic">
|
|
<input type="text" placeholder="input microbial name" id="microbial-name-input">
|
|
</div>
|
|
<div class="search_mic_eg">
|
|
<p>e.g., E.coli or Mycobacterium gilvum, Bacillus subtilis</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- search by whole genome 标签内容 -->
|
|
<div id="search-genome" class="tab-panel">
|
|
<div class="genome">
|
|
<div class="search_gen">
|
|
<input type="file" name="file" accept=".fna, .fasta, .fa" id="genome-file-input">
|
|
</div>
|
|
<div class="file-info" id="file-info"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="butt">
|
|
<button id="search-btn"><a href="/Search_result.html">Search</a></button>
|
|
<button id="reset-btn">Reset</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 底部 -->
|
|
<div class="copyright">
|
|
<div class="bottom">
|
|
<p>Copyright © 2020-2030 All rights reserved</p>
|
|
<p>Contact us : 27-xxxxxxxx</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 标签切换功能
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const tabButtons = document.querySelectorAll('.tab-btn');
|
|
const tabPanels = document.querySelectorAll('.tab-panel');
|
|
const resetBtn = document.getElementById('reset-btn');
|
|
const fileInput = document.getElementById('genome-file-input');
|
|
const fileInfo = document.getElementById('file-info');
|
|
const microbialInput = document.getElementById('microbial-name-input');
|
|
|
|
// 标签切换事件
|
|
tabButtons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const targetTab = this.getAttribute('data-tab');
|
|
|
|
// 移除所有active类
|
|
tabButtons.forEach(btn => btn.classList.remove('active'));
|
|
tabPanels.forEach(panel => panel.classList.remove('active'));
|
|
|
|
// 添加active类到当前标签和面板
|
|
this.classList.add('active');
|
|
document.getElementById(targetTab).classList.add('active');
|
|
});
|
|
});
|
|
|
|
// 文件上传处理
|
|
fileInput.addEventListener('change', function() {
|
|
const file = this.files[0];
|
|
if (file) {
|
|
const fileName = file.name;
|
|
const fileSize = (file.size / 1024 / 1024).toFixed(2); // MB
|
|
fileInfo.innerHTML = `
|
|
<div class="file-selected">
|
|
<p><strong>已选择文件:</strong> ${fileName}</p>
|
|
<p><strong>文件大小:</strong> ${fileSize} MB</p>
|
|
</div>
|
|
`;
|
|
} else {
|
|
fileInfo.innerHTML = '';
|
|
}
|
|
});
|
|
|
|
// 重置按钮功能
|
|
resetBtn.addEventListener('click', function() {
|
|
microbialInput.value = '';
|
|
fileInput.value = '';
|
|
fileInfo.innerHTML = '';
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |