Mortar_peng/chookoo.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

翻译前

Browse Source
This commit is contained in:
Mortar
2026-04-08 22:42:13 +08:00
parent 9266c83fe5
commit e8ad6696cd
2 changed files with 424 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+424 -45
View File
@@ -840,55 +840,261 @@
}
.hero-media {
position: relative;
min-height: 320px;
width: 580px;
height: 520px;
}
.hero-image {
width: 210px;
height: 280px;
border-radius: 24px;
box-shadow: 0 24px 80px rgba(15, 23, 42, 0.12), 0 8px 24px rgba(15, 23, 42, 0.08);
border: 1px solid rgba(255, 255, 255, 0.8);
background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
object-fit: contain;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
/* Carousel Styles - 3D Flip Transition */
.carousel-container {
position: relative;
width: 100%;
height: 100%;
}
.hero-image:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 32px 100px rgba(15, 23, 42, 0.16), 0 12px 32px rgba(15, 23, 42, 0.1);
.carousel-track {
position: relative;
width: 100%;
height: 100%;
}
.hero-image.cat {
.carousel-slide {
position: absolute;
left: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
transition: opacity 0.8s ease-in-out;
}
.carousel-slide.active {
opacity: 1;
z-index: 3;
transform: scale(1);
}
.carousel-slide.exit {
opacity: 0;
z-index: 2;
transition: opacity 0.8s ease-out;
}
.carousel-slide.exit .slide-content {
box-shadow: none;
}
.slide-content {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
border-radius: 32px;
box-shadow: 0 40px 100px rgba(15, 23, 42, 0.15), 0 15px 40px rgba(15, 23, 42, 0.1);
overflow: hidden;
}
.slide-image.main {
width: 380px;
height: 400px;
object-fit: contain;
filter: drop-shadow(0 30px 60px rgba(15, 23, 42, 0.2));
position: relative;
z-index: 1;
}
.carousel-slide.active .slide-image.main {
animation: breathe 5s ease-in-out infinite;
}
@keyframes breathe {
0%, 100% { transform: scale(1) translateY(0); }
50% { transform: scale(1.02) translateY(-12px); }
}
.slide-badge {
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
border: 5px solid #fff;
box-shadow: 0 12px 40px rgba(47, 107, 255, 0.25);
z-index: 2;
}
.hero-image.dog {
.slide-badge.badge-1 {
top: 20px;
right: 20px;
animation: orbit1 5s ease-in-out infinite;
}
.slide-badge.badge-2 {
bottom: 100px;
left: 20px;
animation: orbit2 5s ease-in-out infinite 1s;
}
@keyframes orbit1 {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(-8px, 8px) rotate(5deg); }
}
@keyframes orbit2 {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(8px, -8px) rotate(-5deg); }
}
/* Navigation Dots - Horizontal Bottom */
.carousel-dots {
position: absolute;
right: 0;
bottom: 0;
z-index: 2;
bottom: 70px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 100;
pointer-events: auto;
}
.carousel-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
border: 2px solid rgba(47, 107, 255, 0.3);
cursor: pointer;
transition: all 0.3s ease;
}
.carousel-dot:hover {
background: rgba(255, 255, 255, 0.8);
transform: scale(1.2);
}
.carousel-dot.active {
background: var(--primary);
border-color: var(--primary);
transform: scale(1.3);
}
/* Navigation Arrows - Inside Frame */
.carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
z-index: 100;
opacity: 1;
pointer-events: auto;
}
.carousel-arrow.prev {
left: 16px;
}
.carousel-arrow.next {
right: 16px;
}
.carousel-arrow:hover {
background: var(--primary);
color: #fff;
transform: translateY(-50%) scale(1.1);
box-shadow: 0 6px 20px rgba(47, 107, 255, 0.4);
}
.carousel-arrow:active {
transform: translateY(-50%) scale(0.95);
}
.carousel-arrow svg {
width: 22px;
height: 22px;
}
/* Activity Slide */
.slide-content.activity-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}
.activity-content {
text-align: center;
color: #fff;
padding: 20px;
}
.activity-badge {
display: inline-block;
padding: 6px 16px;
background: rgba(255, 255, 255, 0.25);
border-radius: 20px;
font-size: 13px;
font-weight: 600;
margin-bottom: 16px;
backdrop-filter: blur(10px);
}
.activity-badge.hot {
background: linear-gradient(135deg, #ff6b6b, #ff8e53);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.activity-title {
font-size: 32px;
font-weight: 800;
margin: 0 0 12px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.activity-desc {
font-size: 18px;
opacity: 0.95;
margin: 0 0 16px;
line-height: 1.5;
}
.activity-date, .activity-code {
display: inline-block;
padding: 8px 20px;
background: rgba(255, 255, 255, 0.2);
border-radius: 25px;
font-size: 14px;
font-weight: 500;
backdrop-filter: blur(10px);
}
/* Notice Slide */
.slide-content.notice-bg {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}
.notice-content {
text-align: center;
color: #fff;
padding: 20px;
}
.notice-icon {
font-size: 48px;
display: block;
margin-bottom: 16px;
animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.notice-title {
font-size: 28px;
font-weight: 700;
margin: 0 0 12px;
background: linear-gradient(135deg, #fff, #a8edea);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.notice-desc {
font-size: 16px;
opacity: 0.85;
margin: 0;
line-height: 1.8;
}
/* Hide old progress bar */
.progress-bar {
display: none;
}
/* Old styles cleanup */
.hero-image {
display: none;
}
.hero-pet-badge {
position: absolute;
width: 72px;
height: 72px;
border-radius: 50%;
background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%);
box-shadow: 0 8px 32px rgba(47, 107, 255, 0.15);
border: 3px solid #ffffff;
object-fit: cover;
z-index: 3;
animation: float 3s ease-in-out infinite;
display: none;
}
.hero-pet-badge.cat-badge {
left: 180px;
top: -10px;
animation-delay: 0s;
}
.hero-pet-badge.dog-badge {
right: 180px;
bottom: -10px;
animation-delay: 1.5s;
.hero-pet-badge {
display: none;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
@@ -2888,13 +3094,86 @@
</div>
</div>
<div class="hero-media">
<img class="hero-pet-badge cat-badge" src="camera(1).jpg" alt="猫咪" onerror="this.style.display='none'" />
<img class="hero-image cat" src="cat.png" alt="智能猫设备" />
<img class="hero-pet-badge dog-badge" src="water(1).png" alt="狗狗" onerror="this.style.display='none'" />
<img class="hero-image dog" src="dog.jpeg" alt="智能狗设备" />
<div class="glass-card">
<span class="glass-line" data-i18n="hero_glass_line1">让每一份宠爱</span>
<span class="glass-line" data-i18n="hero_glass_line2">都有<span class="highlight-word">科学</span>回响</span>
<div class="carousel-container">
<div class="carousel-track" id="carouselTrack">
<!-- Slide 1 - 产品 -->
<div class="carousel-slide active" data-type="product">
<div class="slide-content">
<img class="slide-image main" src="cat.png" alt="智能猫设备" />
<img class="slide-badge badge-1" src="camera(1).jpg" alt="猫咪" onerror="this.style.display='none'" />
</div>
</div>
<!-- Slide 2 - 产品 -->
<div class="carousel-slide" data-type="product">
<div class="slide-content">
<img class="slide-image main" src="dog.jpeg" alt="智能狗设备" />
<img class="slide-badge badge-2" src="water(1).png" alt="狗狗" onerror="this.style.display='none'" />
</div>
</div>
<!-- Slide 3 - 活动 -->
<div class="carousel-slide" data-type="activity">
<div class="slide-content activity-bg">
<div class="activity-content">
<span class="activity-badge">限时活动</span>
<h3 class="activity-title">618年中大促</h3>
<p class="activity-desc">全场产品低至5折起</p>
<span class="activity-date">6月1日 - 6月18日</span>
</div>
</div>
</div>
<!-- Slide 4 - 产品 -->
<div class="carousel-slide" data-type="product">
<div class="slide-content">
<img class="slide-image main" src="feeder.png" alt="智能喂食器" onerror="this.src='cat.png'" />
</div>
</div>
<!-- Slide 5 - 公告 -->
<div class="carousel-slide" data-type="notice">
<div class="slide-content notice-bg">
<div class="notice-content">
<span class="notice-icon">📢</span>
<h3 class="notice-title">系统升级通知</h3>
<p class="notice-desc">App 2.0版本全新上线<br/>新增健康报告、远程控制功能</p>
</div>
</div>
</div>
<!-- Slide 6 - 产品 -->
<div class="carousel-slide" data-type="product">
<div class="slide-content">
<img class="slide-image main" src="water.png" alt="智能饮水机" />
</div>
</div>
<!-- Slide 7 - 活动 -->
<div class="carousel-slide" data-type="activity">
<div class="slide-content activity-bg">
<div class="activity-content">
<span class="activity-badge hot">🔥 HOT</span>
<h3 class="activity-title">新用户专享</h3>
<p class="activity-desc">首单立减100元</p>
<span class="activity-code">优惠码: NEW100</span>
</div>
</div>
</div>
<!-- Slide 8 - 产品 -->
<div class="carousel-slide" data-type="product">
<div class="slide-content">
<img class="slide-image main" src="camera(1).jpg" alt="AI摄像头" onerror="this.src='cat.png'" />
</div>
</div>
</div>
<!-- Navigation Arrows -->
<button class="carousel-arrow prev" id="carouselPrev">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M15 18l-6-6 6-6"/>
</svg>
</button>
<button class="carousel-arrow next" id="carouselNext">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 18l6-6-6-6"/>
</svg>
</button>
<!-- Dots -->
<div class="carousel-dots" id="carouselDots"></div>
</div>
</div>
</div>
@@ -3505,6 +3784,106 @@
window.addEventListener('resize', scale);
})();
</script>
<script>
// Hero Carousel - 3D Flip Transition
document.addEventListener('DOMContentLoaded', function() {
var track = document.getElementById('carouselTrack');
var slides = track.querySelectorAll('.carousel-slide');
var dotsContainer = document.getElementById('carouselDots');
var prevBtn = document.getElementById('carouselPrev');
var nextBtn = document.getElementById('carouselNext');
var currentIndex = 0;
var autoPlayInterval = null;
var slideCount = slides.length;
var autoPlayDelay = 5000;
// Create dots
for (var i = 0; i < slideCount; i++) {
(function(index) {
var dot = document.createElement('button');
dot.className = 'carousel-dot' + (index === 0 ? ' active' : '');
dot.setAttribute('data-index', index);
dot.onclick = function() {
goToSlide(index);
restartAutoPlay();
};
dotsContainer.appendChild(dot);
})(i);
}
var dots = dotsContainer.querySelectorAll('.carousel-dot');
function goToSlide(index) {
var prevIndex = currentIndex;
var nextIndex = (index + slideCount) % slideCount;
// Don't do anything if clicking the same slide
if (prevIndex === nextIndex) return;
// Remove active from current and add exit
slides[prevIndex].classList.remove('active');
slides[prevIndex].classList.add('exit');
dots[prevIndex].classList.remove('active');
// After transition completes, clean up exit class
setTimeout(function() {
slides[prevIndex].classList.remove('exit');
}, 800);
// Update index and show new slide
currentIndex = nextIndex;
slides[currentIndex].classList.add('active');
dots[currentIndex].classList.add('active');
}
function nextSlide() {
goToSlide(currentIndex + 1);
}
function prevSlide() {
goToSlide(currentIndex - 1);
}
function startAutoPlay() {
autoPlayInterval = setInterval(nextSlide, autoPlayDelay);
}
function stopAutoPlay() {
if (autoPlayInterval) {
clearInterval(autoPlayInterval);
autoPlayInterval = null;
}
}
function restartAutoPlay() {
stopAutoPlay();
startAutoPlay();
}
// Arrow button events - direct onclick
prevBtn.onclick = function(e) {
e.preventDefault();
prevSlide();
restartAutoPlay();
return false;
};
nextBtn.onclick = function(e) {
e.preventDefault();
nextSlide();
restartAutoPlay();
return false;
};
// Pause on hover
track.onmouseenter = stopAutoPlay;
track.onmouseleave = startAutoPlay;
// Start
startAutoPlay();
});
</script>
<script>
(() => {
const translations = {