Skip to content

Commit d220591

Browse files
shenwanxiangshenwanxiang
committed
website home pages
1 parent 4ae429a commit d220591

File tree

1 file changed

+255
-0
lines changed

1 file changed

+255
-0
lines changed

‎website/index.html‎

Lines changed: 255 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,255 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="description" content="Immuno-Compass: A research tool for ICI response prediction from transcriptomic data." />
6+
<meta name="keywords" content="Immunotherapy, ICI Response, Transcriptomics, Prediction Tool, Compass" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>COMPASS</title>
9+
<link rel="icon" href="https://www.immuno-compass.com/image/compass_logo.png" type="image/x-icon" />
10+
11+
<style>
12+
/* 背景容器 */
13+
#bg-container {
14+
position: fixed;
15+
top: 0;
16+
left: 0;
17+
width: 100%;
18+
height: 100%;
19+
overflow: hidden;
20+
z-index: -1; /* 确保背景在内容后面 */
21+
}
22+
/* 背景图片 div */
23+
.bg-image {
24+
position: absolute;
25+
top: 0;
26+
left: 0;
27+
width: 100%;
28+
height: 100%;
29+
background-size: cover;
30+
background-position: center center;
31+
transition: transform 1s ease-in-out;
32+
}
33+
34+
body {
35+
margin: 0;
36+
font-family: Arial, sans-serif;
37+
color: #fff;
38+
display: flex;
39+
flex-direction: column;
40+
min-height: 100vh;
41+
}
42+
43+
/* Navigation bar */
44+
header {
45+
background: #2c3e50;
46+
color: #fff;
47+
}
48+
.navbar {
49+
display: flex;
50+
justify-content: center;
51+
align-items: center;
52+
padding: 0;
53+
}
54+
.navbar ul {
55+
list-style: none;
56+
margin: 0;
57+
padding: 0;
58+
display: flex;
59+
}
60+
.navbar li {
61+
margin: 0;
62+
}
63+
.navbar a {
64+
display: block;
65+
padding: 15px 20px;
66+
text-decoration: none;
67+
color: #fff;
68+
font-weight: 500;
69+
}
70+
.navbar a:hover {
71+
background: #1a252f;
72+
}
73+
.navbar a.active {
74+
background: #3498db;
75+
color: #fff;
76+
font-weight: 600;
77+
}
78+
79+
/* Hero Section */
80+
.hero-content-wrapper {
81+
background: rgba(0, 0, 0, 0.4);
82+
padding: 60px 20px;
83+
border-radius: 10px;
84+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
85+
position: relative;
86+
flex: 1;
87+
width: 100%;
88+
text-align: center;
89+
justify-content: center; /* 垂直居中 */
90+
}
91+
92+
93+
94+
95+
.hero-content-wrapper h1,
96+
.hero-content-wrapper p,
97+
.hero-content-wrapper h2 {
98+
color: #fff;
99+
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
100+
margin: 20px 0;
101+
margin-top: 100px;
102+
}
103+
.hero-content-wrapper p {
104+
font-size: 1rem;
105+
line-height: 1.6;
106+
max-width: 800px;
107+
margin: 0 auto;
108+
}
109+
.hero-content-wrapper h1 {
110+
font-size: 2.5rem;
111+
}
112+
.hero-content-wrapper h2 {
113+
font-size: 2rem;
114+
margin-top: 40px;
115+
}
116+
117+
/* Disclaimer */
118+
.disclaimer {
119+
font-size: 0.9rem;
120+
color: #ff6b6b;
121+
margin-top: 20px;
122+
font-weight: bold;
123+
}
124+
125+
/* Footer */
126+
footer {
127+
text-align: center;
128+
padding: 20px;
129+
font-size: 0.9rem;
130+
color: #fff;
131+
background: rgba(0, 0, 0, 0.8);
132+
}
133+
footer a {
134+
color: #fff;
135+
text-decoration: none;
136+
}
137+
footer a:hover {
138+
text-decoration: underline;
139+
}
140+
141+
.spin {
142+
animation: spin 10s linear infinite;
143+
}
144+
@keyframes spin {
145+
from { transform: rotate(0deg); }
146+
to { transform: rotate(360deg); }
147+
}
148+
</style>
149+
</head>
150+
<body>
151+
<!-- 背景容器 -->
152+
<div id="bg-container"></div>
153+
154+
<header>
155+
<nav class="navbar">
156+
<ul>
157+
<li><a href="https://www.immuno-compass.com/index.html" class="active">Home</a></li>
158+
<li><a href="https://www.immuno-compass.com/predict/index.html">Predict</a></li>
159+
<li><a href="https://www.immuno-compass.com/extract/index.html">Extract</a></li>
160+
<li><a href="https://www.immuno-compass.com/explore/index.html">Explore</a></li>
161+
<li><a href="https://www.immuno-compass.com/help/index.html">Help</a></li>
162+
<li><a href="https://www.immuno-compass.com/download/index.html">Download</a></li>
163+
<li><a href="https://www.immuno-compass.com/about/index.html">About</a></li>
164+
</ul>
165+
</nav>
166+
</header>
167+
168+
<section class="hero-content-wrapper">
169+
170+
<h1>Welcome to COMPASS</h1>
171+
172+
<h2>
173+
<!-- Immuno-Compass is a research tool for exploring transcriptomic features and predicting ICI (Immune Checkpoint Inhibitor) response, aiding immunotherapy-related studies. By leveraging advanced machine learning models and curated datasets, it enhances understanding of immunotherapy responses. -->
174+
Generalizable AI predicts immunotherapy outcomes across cancers and treatments.
175+
</h2>
176+
177+
</section>
178+
179+
<!-- External Resources -->
180+
<section style="text-align: center; margin-top: 10px;">
181+
<div style="display: flex; justify-content: center; gap: 30px; flex-wrap: wrap;">
182+
<a href="https://github.com/mims-harvard/COMPASS" target="_blank">
183+
<img src="https://img.shields.io/badge/Codebase-Github-green" alt="Codebase" style="width: 120px; height: 25px;">
184+
</a>
185+
<a href="https://github.com/mims-harvard/COMPASS-web" target="_blank">
186+
<img src="https://img.shields.io/badge/Document-Github-yellow" alt="Document" style="width: 120px;height: 25px;">
187+
</a>
188+
<a href=medRxiv" target="_blank">
189+
<img src="https://img.shields.io/badge/Paper-medRxiv-orange" alt="medRxiv" style="width: 120px;height: 25px;">
190+
</a>
191+
<!-- <a href="https://www.overleaf.com/project/65675762ab879fbbe676398d" target="_blank">
192+
<img src="https://img.shields.io/badge/Paper-Overleaf-blue" alt="Paper" style="width: 120px; height: 25px;">
193+
</a> -->
194+
</div>
195+
</section>
196+
197+
<footer>
198+
<p>© 2025 COMPASS. All Rights Reserved.</p>
199+
<p><a href="mailto:[email protected]">Contact Us</a> | <a href="#">Privacy Policy</a></p>
200+
</footer>
201+
202+
<!-- JavaScript 部分 -->
203+
<script>
204+
// 定义需要循环切换的背景图片数组
205+
const images = [
206+
'./image/compass_background_remove.png',
207+
'./image/compass_background1.png',
208+
// './image/compass_background2.png',
209+
// './image/compass_background3.png',
210+
'./image/compass_background5.png',
211+
// './image/compass_background6.png',
212+
'./image/compass_background7.png'
213+
];
214+
215+
let currentIndex = 0;
216+
const bgContainer = document.getElementById('bg-container');
217+
218+
// 初始化时使用第一张图片
219+
let currentBgDiv = document.createElement('div');
220+
currentBgDiv.classList.add('bg-image');
221+
currentBgDiv.style.backgroundImage = `url(${images[currentIndex]})`;
222+
bgContainer.appendChild(currentBgDiv);
223+
224+
// 更新索引为下一张图片
225+
currentIndex = (currentIndex + 1) % images.length;
226+
227+
// 每隔5秒切换一次背景，采用从左到右渐进的过渡效果
228+
setInterval(() => {
229+
// 创建新的背景 div，初始位置设置在屏幕左侧（-100%）
230+
const nextBgDiv = document.createElement('div');
231+
nextBgDiv.classList.add('bg-image');
232+
nextBgDiv.style.backgroundImage = `url(${images[currentIndex]})`;
233+
nextBgDiv.style.transform = 'translateX(-100%)';
234+
bgContainer.appendChild(nextBgDiv);
235+
236+
// 延时触发过渡（确保浏览器已应用初始状态）
237+
setTimeout(() => {
238+
// 新的背景滑入到正确位置
239+
nextBgDiv.style.transform = 'translateX(0)';
240+
// 当前背景同时向右滑出
241+
currentBgDiv.style.transform = 'translateX(100%)';
242+
}, 50);
243+
244+
// 过渡结束后（1秒后）移除旧背景，更新当前背景引用
245+
setTimeout(() => {
246+
bgContainer.removeChild(currentBgDiv);
247+
currentBgDiv = nextBgDiv;
248+
}, 1050);
249+
250+
// 更新索引
251+
currentIndex = (currentIndex + 1) % images.length;
252+
}, 10000);
253+
</script>
254+
</body>
255+
</html>

0 commit comments

Comments
 (0)