lingyuzeng/labweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
gzy
2025-12-16 11:39:15 +08:00
commit a3bdbee7c2
118 changed files with 34631 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
public/html/Search.html Normal file
View File

@@ -0,0 +1,203 @@
<!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>