204 lines
5.8 KiB
HTML
Executable File
204 lines
5.8 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>实验室服务导航 - HZAU Lab</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.container {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
border-radius: 24px;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
padding: 3rem;
|
|
max-width: 800px;
|
|
width: 100%;
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 2.5rem;
|
|
color: #2d3748;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.header p {
|
|
color: #718096;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.services {
|
|
display: grid;
|
|
gap: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.service-card {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 1.5rem;
|
|
background: white;
|
|
border-radius: 16px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
|
|
transition: all 0.3s ease;
|
|
text-decoration: none;
|
|
border: 2px solid transparent;
|
|
}
|
|
|
|
.service-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
|
|
border-color: #667eea;
|
|
}
|
|
|
|
.service-icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 2rem;
|
|
margin-right: 1.5rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.icon-minio { background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%); }
|
|
.icon-supabase { background: linear-gradient(135deg, #3ecf8e 0%, #2eb77a 100%); }
|
|
.icon-abm { background: linear-gradient(135deg, #4facfe 0%, #00a8ff 100%); }
|
|
|
|
.service-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.service-info h3 {
|
|
font-size: 1.3rem;
|
|
color: #2d3748;
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
|
|
.service-info p {
|
|
color: #718096;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.service-badge {
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 12px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.badge-internal {
|
|
background: #fef5e7;
|
|
color: #d68910;
|
|
}
|
|
|
|
.badge-public {
|
|
background: #eaf7f0;
|
|
color: #27ae60;
|
|
}
|
|
|
|
.footer {
|
|
text-align: center;
|
|
padding-top: 2rem;
|
|
border-top: 1px solid #e2e8f0;
|
|
color: #a0aec0;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.footer strong {
|
|
color: #667eea;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.container {
|
|
padding: 2rem;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.service-card {
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
.service-icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
font-size: 1.5rem;
|
|
margin-right: 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>🔬 实验室服务导航</h1>
|
|
<p>华中农业大学 · Lab Services Portal</p>
|
|
</div>
|
|
|
|
<div class="services">
|
|
<!-- MinIO 对象存储 -->
|
|
<a href="http://100.64.0.2:9001" class="service-card" target="_blank">
|
|
<div class="service-icon icon-minio">📦</div>
|
|
<div class="service-info">
|
|
<h3>MinIO 对象存储</h3>
|
|
<p>S3 兼容对象存储管理控制台</p>
|
|
</div>
|
|
<span class="service-badge badge-internal">内网访问</span>
|
|
</a>
|
|
|
|
<!-- Supabase Dashboard -->
|
|
<a href="http://100.64.0.2:18000" class="service-card" target="_blank">
|
|
<div class="service-icon icon-supabase">🗄️</div>
|
|
<div class="service-info">
|
|
<h3>Supabase Dashboard</h3>
|
|
<p>数据库管理和 API 配置面板</p>
|
|
</div>
|
|
<span class="service-badge badge-internal">内网访问</span>
|
|
</a>
|
|
|
|
<!-- ABM 数据库 -->
|
|
<a href="https://amiap.hzau.edu.cn/ABM/" class="service-card" target="_blank">
|
|
<div class="service-icon icon-abm">🌐</div>
|
|
<div class="service-info">
|
|
<h3>ABM 数据库</h3>
|
|
<p>WebSocket 实时数据服务</p>
|
|
</div>
|
|
<span class="service-badge badge-public">公网访问</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<p>⚠️ 这是临时导航页面</p>
|
|
<p style="margin-top: 0.5rem;">
|
|
后续将替换为 <strong>Vue 课题组网站</strong>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|