Skip to content

Commit 9ccc8fd

Browse files
liyitang22liyitang22
committed
ada
1 parent 822dc6b commit 9ccc8fd

2 files changed

Lines changed: 43 additions & 66 deletions

File tree

‎index.html‎

Lines changed: 20 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1196,71 +1196,48 @@
11961196
video.setAttribute('fetchpriority', 'high');
11971197
}
11981198

1199-
// Progressive loading: first get metadata, then load video data
1200-
const startProgressiveLoad = () => {
1201-
// Metadata loaded, now switch to auto to load video data
1202-
if (video.preload === 'metadata') {
1203-
video.preload = 'auto';
1204-
video.load(); // Reload with auto preload
1205-
console.log('📹 Hero video metadata loaded, starting progressive data load');
1206-
}
1207-
};
1208-
1209-
// Show video when it can play
1199+
// Show video as soon as we have enough data to start playing
12101200
const showVideo = () => {
12111201
video.style.opacity = '1';
12121202
video.play().catch(err => {
12131203
console.log('Video autoplay prevented:', err);
12141204
});
12151205
};
12161206

1217-
// Mark hero video as loaded when it can play
1207+
// Mark hero video as loaded early - when we have enough data (loadeddata)
1208+
// This allows other videos to start loading sooner
12181209
const markHeroVideoLoaded = () => {
12191210
if (!window.heroVideoLoaded) {
12201211
window.heroVideoLoaded = true;
1221-
console.log('✅ Hero video fully loaded! Other videos can now load.');
1212+
console.log('✅ Hero video ready! Other videos can now load.');
12221213
// Trigger event to notify other scripts
12231214
window.dispatchEvent(new CustomEvent('heroVideoLoaded'));
12241215
}
12251216
};
12261217

1227-
// Wait for metadata first (faster)
1228-
if (video.readyState >= 1) {
1229-
// Metadata already available
1230-
startProgressiveLoad();
1231-
// Mark as loaded early if metadata is ready (allows other videos to start loading)
1218+
// Mark as loaded when we have enough data to play (loadeddata event)
1219+
// This is earlier than canplay, allowing other videos to start loading sooner
1220+
if (video.readyState >= 2) {
1221+
// Already have enough data
12321222
markHeroVideoLoaded();
1223+
showVideo();
12331224
} else {
1234-
video.addEventListener('loadedmetadata', () => {
1235-
startProgressiveLoad();
1236-
// Mark as loaded when metadata is ready (progressive loading)
1225+
// Listen for loadeddata - happens when we have enough data to start playing
1226+
video.addEventListener('loadeddata', () => {
12371227
markHeroVideoLoaded();
1228+
showVideo();
12381229
}, { once: true });
1239-
}
1240-
1241-
// Try to show immediately if already loaded
1242-
if (video.readyState >= 2) {
1243-
showVideo();
1244-
} else {
1245-
// Wait for video to be ready to play
1230+
1231+
// Fallback: also listen for canplay (when it can definitely play)
12461232
video.addEventListener('canplay', showVideo, { once: true });
1247-
// Fallback: show after a delay even if canplay doesn't fire
1233+
1234+
// Fallback: show after a delay even if events don't fire
12481235
setTimeout(() => {
12491236
if (video.readyState >= 2) {
1237+
markHeroVideoLoaded();
12501238
showVideo();
12511239
}
1252-
}, 2000);
1253-
}
1254-
1255-
// Also mark as loaded when video can play (backup)
1256-
if (video.readyState >= 2) {
1257-
markHeroVideoLoaded();
1258-
} else {
1259-
video.addEventListener('canplay', markHeroVideoLoaded, { once: true });
1260-
// Fallback: mark as loaded after playing starts
1261-
video.addEventListener('playing', markHeroVideoLoaded, { once: true });
1262-
// Additional fallback: mark on loadeddata (when enough data is loaded)
1263-
video.addEventListener('loadeddata', markHeroVideoLoaded, { once: true });
1240+
}, 1000);
12641241
}
12651242
}
12661243

@@ -3076,13 +3053,13 @@
30763053
</nav>
30773054
<section class="hero is-link is-fullheight video" style="overflow: hidden; position:relative; background: linear-gradient(135deg, #004bb3 0%, #1a5fcc 50%, #004bb3 100%);" id="video">
30783055
<div class="hero-video" style="height: 100%; width: 177.77777778vh; min-width: 100%;min-height: 56.25vw;">
3079-
<video id="hero-video-main" autoplay muted loop playsinline preload="metadata" style="width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease-in-out;">
3056+
<video id="hero-video-main" autoplay muted loop playsinline preload="auto" style="width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease-in-out;">
30803057
<source src="./resources/head/head_new_firefox_720p.mp4" type="video/mp4">
30813058
</video>
30823059
</div>
30833060
<div class="hero-video is-hidden-tablet is-inline-block-mobile"
30843061
style="height: 154.28571428vw; width: 100%; min-width:64.81481481vh;min-height:100%;">
3085-
<video id="hero-video-mobile" autoplay muted loop playsinline preload="metadata" style="width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease-in-out;">
3062+
<video id="hero-video-mobile" autoplay muted loop playsinline preload="auto" style="width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease-in-out;">
30863063
<source src="./resources/head/head_new_firefox_720p.mp4" type="video/mp4">
30873064
</video>
30883065
</div>

‎static/css/index.css‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
body {
2-
font-family: 'Open Sans', sans-serif;
2+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
33
font-size: 18px;
44
}
55

@@ -29,7 +29,7 @@ body {
2929
}
3030

3131
.teaser {
32-
font-family: 'Google Sans', sans-serif;
32+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
3333
}
3434

3535

@@ -53,11 +53,11 @@ body {
5353
}
5454

5555
.publication-title {
56-
font-family: 'Google Sans', sans-serif;
56+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
5757
}
5858

5959
.publication-authors {
60-
font-family: 'Google Sans', sans-serif;
60+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
6161
}
6262

6363
.publication-venue {
@@ -283,7 +283,7 @@ body {
283283
}
284284

285285
.formula-text {
286-
font-family: 'Google Sans', sans-serif;
286+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
287287
font-size: 1em;
288288
font-weight: 400;
289289
color: #495057;
@@ -392,7 +392,7 @@ body {
392392
}
393393

394394
.inference-control h4 {
395-
font-family: 'Google Sans', sans-serif;
395+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
396396
font-size: 1.2em;
397397
font-weight: bold;
398398
color: #495057;
@@ -424,7 +424,7 @@ body {
424424
}
425425

426426
.wrist-label {
427-
font-family: 'Google Sans', sans-serif;
427+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
428428
font-size: 1em;
429429
font-weight: bold;
430430
color: #495057;
@@ -439,7 +439,7 @@ body {
439439

440440
.reward-button {
441441
padding: 12px 24px;
442-
font-family: 'Google Sans', sans-serif;
442+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
443443
font-size: 1em;
444444
font-weight: bold;
445445
color: white;
@@ -475,7 +475,7 @@ body {
475475
.continuous-play-btn {
476476
margin-top: 15px;
477477
padding: 10px 20px;
478-
font-family: 'Google Sans', sans-serif;
478+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
479479
font-size: 1em;
480480
font-weight: bold;
481481
color: white;
@@ -624,7 +624,7 @@ body {
624624
color: white;
625625
padding: 4px 8px;
626626
border-radius: 4px;
627-
font-family: 'Google Sans', sans-serif;
627+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
628628
font-size: 0.8em;
629629
font-weight: bold;
630630
z-index: 10;
@@ -669,7 +669,7 @@ body {
669669
border: none;
670670
padding: 8px 16px;
671671
border-radius: 5px;
672-
font-family: 'Google Sans', sans-serif;
672+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
673673
font-size: 0.9em;
674674
cursor: pointer;
675675
transition: background-color 0.3s;
@@ -725,7 +725,7 @@ body {
725725
background-color: #ffffff;
726726
transform: rotateY(180deg);
727727
padding: 20px;
728-
font-family: 'Google Sans', sans-serif;
728+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
729729
font-size: 0.9em;
730730
line-height: 1.6;
731731
}
@@ -855,7 +855,7 @@ body {
855855
background-color: #ffffff;
856856
transform: rotateY(180deg);
857857
padding: 20px;
858-
font-family: 'Google Sans', sans-serif;
858+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
859859
font-size: 0.9em;
860860
line-height: 1.6;
861861
font-size: clamp(0.8em, 1vw, 1em);
@@ -1005,7 +1005,7 @@ input[type="range"].slider.slider-vertical::-moz-range-thumb {
10051005
.timeline-current-time {
10061006
text-align: center;
10071007
margin-top: 30px;
1008-
font-family: 'Google Sans', sans-serif;
1008+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
10091009
color: #333;
10101010
}
10111011

@@ -1092,7 +1092,7 @@ input[type="range"].slider.slider-vertical::-moz-range-thumb {
10921092
font-size: 1.2rem;
10931093
font-weight: bold;
10941094
text-align: center;
1095-
font-family: 'Google Sans', sans-serif;
1095+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
10961096
transition: opacity 0.3s ease;
10971097
}
10981098

@@ -1155,7 +1155,7 @@ input[type="range"].slider.slider-vertical::-moz-range-thumb {
11551155

11561156
.inference-card-content p {
11571157
margin: 5px 0;
1158-
font-family: 'Google Sans', sans-serif;
1158+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
11591159
}
11601160

11611161
.inference-card-content .formula {
@@ -1207,7 +1207,7 @@ input[type="range"].slider.slider-vertical::-moz-range-thumb {
12071207
font-weight: bold;
12081208
cursor: pointer;
12091209
transition: all 0.3s ease;
1210-
font-family: 'Google Sans', sans-serif;
1210+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
12111211
text-align: center;
12121212
}
12131213

@@ -1237,7 +1237,7 @@ input[type="range"].slider.slider-vertical::-moz-range-thumb {
12371237
}
12381238

12391239
.tab-content p {
1240-
font-family: 'Google Sans', sans-serif;
1240+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
12411241
line-height: 1.6;
12421242
margin-bottom: 15px;
12431243
font-size: 0.95em;
@@ -1275,7 +1275,7 @@ input[type="range"].slider.slider-vertical::-moz-range-thumb {
12751275
font-weight: bold;
12761276
cursor: pointer;
12771277
transition: all 0.3s ease;
1278-
font-family: 'Google Sans', sans-serif;
1278+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
12791279
text-align: left;
12801280
border-bottom: 1px solid rgba(255,255,255,0.1);
12811281
}
@@ -1317,13 +1317,13 @@ input[type="range"].slider.slider-vertical::-moz-range-thumb {
13171317
.sub-tab-content h4 {
13181318
color: #004bb3;
13191319
margin-bottom: 10px;
1320-
font-family: 'Google Sans', sans-serif;
1320+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
13211321
font-size: 1.1em;
13221322
}
13231323

13241324
.sub-tab-content p {
13251325
margin-bottom: 15px;
1326-
font-family: 'Google Sans', sans-serif;
1326+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
13271327
line-height: 1.5;
13281328
font-size: 0.9em;
13291329
}
@@ -1333,7 +1333,7 @@ input[type="range"].slider.slider-vertical::-moz-range-thumb {
13331333
padding: 15px;
13341334
border-radius: 8px;
13351335
margin: 15px 0;
1336-
font-family: 'Google Sans', sans-serif;
1336+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
13371337
border-left: 4px solid #004bb3;
13381338
max-width: 100%;
13391339
overflow-x: auto;
@@ -1595,7 +1595,7 @@ input[type="range"].slider.slider-vertical::-moz-range-thumb {
15951595
}
15961596

15971597
.placeholder-text {
1598-
font-family: 'Google Sans', sans-serif;
1598+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
15991599
font-size: 1em;
16001600
color: #6c757d;
16011601
text-align: center;

0 commit comments

Comments
 (0)