Skip to content

Commit 91a4b82

Browse files
FeiSong123FeiSong123
committed
add Kontext-Style website
1 parent 1ff18fa commit 91a4b82

3 files changed

Lines changed: 266 additions & 128 deletions

File tree

‎assets/css/main.css‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
body {
2+
font-family: 'Montserrat', sans-serif;
3+
margin: 0;
4+
padding: 0;
5+
background-color: #f4f4f4;
6+
color: #333;
7+
line-height: 1.6;
8+
}
9+
10+
.container {
11+
max-width: 1200px;
12+
margin: 0 auto;
13+
padding: 20px;
14+
}
15+
16+
.header {
17+
text-align: center;
18+
margin-bottom: 40px;
19+
background: white;
20+
padding: 40px;
21+
border-radius: 10px;
22+
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
23+
}
24+
25+
.header h1 {
26+
font-size: 2.5em;
27+
color: #667eea;
28+
margin-bottom: 10px;
29+
}
30+
31+
.header p {
32+
font-size: 1.2em;
33+
color: #666;
34+
}
35+
36+
.section {
37+
background: white;
38+
margin-bottom: 30px;
39+
padding: 30px;
40+
border-radius: 10px;
41+
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
42+
}
43+
44+
.section h2 {
45+
color: #667eea;
46+
font-size: 1.8em;
47+
margin-bottom: 20px;
48+
border-bottom: 2px solid #667eea;
49+
padding-bottom: 10px;
50+
}
51+
52+
.research-areas {
53+
display: grid;
54+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
55+
gap: 20px;
56+
margin-top: 20px;
57+
}
58+
59+
.research-item {
60+
background: #f8f9fa;
61+
padding: 20px;
62+
border-radius: 8px;
63+
border-left: 4px solid #667eea;
64+
}
65+
66+
.research-item h3 {
67+
color: #667eea;
68+
margin-top: 0;
69+
}
70+
71+
.projects {
72+
display: grid;
73+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
74+
gap: 20px;
75+
margin-top: 20px;
76+
}
77+
78+
.project-card {
79+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
80+
color: white;
81+
padding: 25px;
82+
border-radius: 10px;
83+
text-decoration: none;
84+
transition: transform 0.3s ease;
85+
}
86+
87+
.project-card:hover {
88+
transform: translateY(-5px);
89+
text-decoration: none;
90+
color: white;
91+
}
92+
93+
.project-card h3 {
94+
margin-top: 0;
95+
font-size: 1.3em;
96+
}
97+
98+
.contact-info {
99+
display: grid;
100+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
101+
gap: 20px;
102+
margin-top: 20px;
103+
}
104+
105+
.contact-item {
106+
background: #f8f9fa;
107+
padding: 20px;
108+
border-radius: 8px;
109+
text-align: center;
110+
}
111+
112+
.contact-item a {
113+
color: #667eea;
114+
text-decoration: none;
115+
font-weight: 500;
116+
}
117+
118+
.contact-item a:hover {
119+
text-decoration: underline;
120+
}
121+
122+
.footer {
123+
text-align: center;
124+
margin-top: 40px;
125+
padding: 20px;
126+
background: #333;
127+
color: white;
128+
border-radius: 10px;
129+
}
130+
131+
.logo-placeholder {
132+
width: 150px;
133+
height: 150px;
134+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
135+
border-radius: 50%;
136+
display: flex;
137+
align-items: center;
138+
justify-content: center;
139+
margin: 0 auto 20px;
140+
color: white;
141+
font-size: 1.2em;
142+
font-weight: bold;
143+
}

‎assets/js/main.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
// Main JavaScript for W2GenAI Lab homepage
2+
document.addEventListener('DOMContentLoaded', function() {
3+
// Smooth scrolling for navigation links
4+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
5+
anchor.addEventListener('click', function (e) {
6+
e.preventDefault();
7+
const target = document.querySelector(this.getAttribute('href'));
8+
if (target) {
9+
target.scrollIntoView({
10+
behavior: 'smooth',
11+
block: 'start'
12+
});
13+
}
14+
});
15+
});
16+
17+
// Add animation to project cards on scroll
18+
const observerOptions = {
19+
threshold: 0.1,
20+
rootMargin: '0px 0px -50px 0px'
21+
};
22+
23+
const observer = new IntersectionObserver(function(entries) {
24+
entries.forEach(entry => {
25+
if (entry.isIntersecting) {
26+
entry.target.style.opacity = '1';
27+
entry.target.style.transform = 'translateY(0)';
28+
}
29+
});
30+
}, observerOptions);
31+
32+
// Observe all project cards and research items
33+
document.querySelectorAll('.project-card, .research-item').forEach(item => {
34+
item.style.opacity = '0';
35+
item.style.transform = 'translateY(20px)';
36+
item.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
37+
observer.observe(item);
38+
});
39+
40+
// Add hover effect to logo
41+
const logo = document.querySelector('.logo-placeholder');
42+
if (logo) {
43+
logo.addEventListener('mouseenter', function() {
44+
this.style.transform = 'scale(1.05)';
45+
this.style.transition = 'transform 0.3s ease';
46+
});
47+
48+
logo.addEventListener('mouseleave', function() {
49+
this.style.transform = 'scale(1)';
50+
});
51+
}
52+
53+
// Email validation for contact links
54+
document.querySelectorAll('a[href^="mailto:"]').forEach(emailLink => {
55+
emailLink.addEventListener('click', function(e) {
56+
const email = this.getAttribute('href').replace('mailto:', '');
57+
if (!email || !email.includes('@')) {
58+
e.preventDefault();
59+
console.error('Invalid email address');
60+
}
61+
});
62+
});
63+
64+
// Dynamic year update for footer
65+
const footerYear = document.querySelector('.footer p');
66+
if (footerYear && footerYear.textContent.includes('©')) {
67+
const currentYear = new Date().getFullYear();
68+
footerYear.textContent = footerYear.textContent.replace(/\d{4}/, currentYear);
69+
}
70+
});

0 commit comments

Comments
 (0)