701 lines
24 KiB
HTML
701 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Tin tức chi tiết - Worker App</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
|
|
<style>
|
|
:root {
|
|
--primary-color: #2563eb;
|
|
--primary-dark: #1d4ed8;
|
|
--secondary-color: #64748b;
|
|
--success-color: #10b981;
|
|
--warning-color: #f59e0b;
|
|
--danger-color: #ef4444;
|
|
--background-color: #f8fafc;
|
|
--card-background: #ffffff;
|
|
--text-primary: #1e293b;
|
|
--text-secondary: #64748b;
|
|
--border-color: #e2e8f0;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background-color: var(--background-color);
|
|
color: var(--text-primary);
|
|
line-height: 1.6;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.header {
|
|
background: var(--card-background);
|
|
border-bottom: 1px solid var(--border-color);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.header-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1rem;
|
|
max-width: 480px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.back-button {
|
|
background: none;
|
|
border: none;
|
|
color: var(--primary-color);
|
|
font-size: 1.25rem;
|
|
cursor: pointer;
|
|
padding: 0.5rem;
|
|
border-radius: 0.5rem;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.back-button:hover {
|
|
background-color: #f1f5f9;
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.action-button {
|
|
background: none;
|
|
border: none;
|
|
color: var(--secondary-color);
|
|
font-size: 1.25rem;
|
|
cursor: pointer;
|
|
padding: 0.5rem;
|
|
border-radius: 0.5rem;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.action-button:hover {
|
|
background-color: #f1f5f9;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.container {
|
|
max-width: 480px;
|
|
margin: 0 auto;
|
|
background: var(--card-background);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.hero-image {
|
|
width: 100%;
|
|
height: 250px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.article-content {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.article-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.category-badge {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 1rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
font-size: 0.75rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.article-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
line-height: 1.3;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.article-excerpt {
|
|
font-size: 1rem;
|
|
color: var(--text-secondary);
|
|
font-style: italic;
|
|
margin-bottom: 1.5rem;
|
|
padding: 1rem;
|
|
background: #f8fafc;
|
|
border-left: 4px solid var(--primary-color);
|
|
border-radius: 0 0.5rem 0.5rem 0;
|
|
}
|
|
|
|
.article-body {
|
|
font-size: 1rem;
|
|
line-height: 1.7;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.article-body h2 {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin: 2rem 0 1rem 0;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 2px solid var(--primary-color);
|
|
}
|
|
|
|
.article-body h3 {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin: 1.5rem 0 0.75rem 0;
|
|
}
|
|
|
|
.article-body p {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.article-body ul, .article-body ol {
|
|
margin: 1rem 0;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
.article-body li {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.article-body blockquote {
|
|
background: #f0f9ff;
|
|
border-left: 4px solid var(--primary-color);
|
|
padding: 1rem;
|
|
margin: 1.5rem 0;
|
|
font-style: italic;
|
|
border-radius: 0 0.5rem 0.5rem 0;
|
|
}
|
|
|
|
.article-body img {
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 0.5rem;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.highlight-box {
|
|
background: linear-gradient(135deg, #fef3c7, #fed7aa);
|
|
border: 1px solid var(--warning-color);
|
|
border-radius: 0.75rem;
|
|
padding: 1rem;
|
|
margin: 1.5rem 0;
|
|
}
|
|
|
|
.highlight-title {
|
|
font-weight: 600;
|
|
color: #92400e;
|
|
margin-bottom: 0.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.highlight-text {
|
|
color: #92400e;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.tags-section {
|
|
margin: 2rem 0;
|
|
padding: 1rem;
|
|
background: #f8fafc;
|
|
border-radius: 0.75rem;
|
|
}
|
|
|
|
.tags-title {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.tags-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.tag {
|
|
background: white;
|
|
color: var(--text-secondary);
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 1rem;
|
|
font-size: 0.75rem;
|
|
border: 1px solid var(--border-color);
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.tag:hover {
|
|
border-color: var(--primary-color);
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.social-actions {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 1rem;
|
|
border-top: 1px solid var(--border-color);
|
|
border-bottom: 1px solid var(--border-color);
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
.engagement-stats {
|
|
display: flex;
|
|
gap: 1rem;
|
|
font-size: 0.875rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.stat-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.social-buttons {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.social-btn {
|
|
background: none;
|
|
border: 2px solid var(--border-color);
|
|
color: var(--text-secondary);
|
|
padding: 0.5rem;
|
|
border-radius: 0.5rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.social-btn:hover {
|
|
border-color: var(--primary-color);
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.social-btn.liked {
|
|
border-color: #ef4444;
|
|
color: #ef4444;
|
|
}
|
|
|
|
.social-btn.bookmarked {
|
|
border-color: var(--warning-color);
|
|
color: var(--warning-color);
|
|
}
|
|
|
|
.related-section {
|
|
margin: 2rem 0;
|
|
padding: 1rem;
|
|
background: #f8fafc;
|
|
border-radius: 0.75rem;
|
|
}
|
|
|
|
.related-title {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.related-card {
|
|
display: flex;
|
|
gap: 1rem;
|
|
background: white;
|
|
padding: 1rem;
|
|
border-radius: 0.75rem;
|
|
margin-bottom: 1rem;
|
|
border: 1px solid var(--border-color);
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.related-card:hover {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
|
|
}
|
|
|
|
.related-card:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.related-thumbnail {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 0.5rem;
|
|
object-fit: cover;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.related-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.related-news-title {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin-bottom: 0.25rem;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.related-meta {
|
|
font-size: 0.75rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.article-content {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.article-title {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.article-meta {
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.engagement-stats {
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.social-actions {
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.social-buttons {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="header-content">
|
|
<button class="back-button" onclick="goBack()">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</button>
|
|
<div class="header-actions">
|
|
<button class="action-button" onclick="shareArticle()">
|
|
<i class="fas fa-share-alt"></i>
|
|
</button>
|
|
<button class="action-button" onclick="toggleBookmark()">
|
|
<i class="fas fa-bookmark"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Hero Image -->
|
|
<img src="https://images.unsplash.com/photo-1503387762-592deb58ef4e?w=800&h=400&fit=crop"
|
|
alt="Hình ảnh bài viết"
|
|
class="hero-image">
|
|
|
|
<!-- Article Content -->
|
|
<div class="article-content">
|
|
<!-- Meta Information -->
|
|
<div class="article-meta">
|
|
<span class="category-badge">Xu hướng</span>
|
|
<div class="meta-item">
|
|
<i class="fas fa-calendar"></i>
|
|
<span>15/11/2024</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<i class="fas fa-clock"></i>
|
|
<span>5 phút đọc</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<i class="fas fa-eye"></i>
|
|
<span>2.3K lượt xem</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Title -->
|
|
<h1 class="article-title">5 xu hướng gạch men phòng tắm được ưa chuộng năm 2024</h1>
|
|
|
|
<!-- Excerpt -->
|
|
<div class="article-excerpt">
|
|
Khám phá những mẫu gạch men hiện đại, sang trọng cho không gian phòng tắm.
|
|
Từ những tone màu trung tính đến các họa tiết độc đáo, cùng tìm hiểu các xu hướng đang được yêu thích nhất.
|
|
</div>
|
|
|
|
<!-- Article Body -->
|
|
<div class="article-body">
|
|
<p>Năm 2024 đánh dấu sự trở lại mạnh mẽ của các thiết kế phòng tắm hiện đại với những xu hướng gạch men đột phá. Không chỉ đơn thuần là vật liệu ốp lát, gạch men ngày nay đã trở thành yếu tố quyết định phong cách và cảm xúc của không gian.</p>
|
|
|
|
<h2>1. Gạch men họa tiết đá tự nhiên</h2>
|
|
<p>Xu hướng bắt chước kết cấu và màu sắc của đá tự nhiên đang trở nên cực kỳ phổ biến. Các sản phẩm gạch men mô phỏng đá marble, granite hay travertine mang đến vẻ đẹp sang trọng mà vẫn đảm bảo tính thực tiễn cao.</p>
|
|
|
|
<div class="highlight-box">
|
|
<div class="highlight-title">
|
|
<i class="fas fa-lightbulb"></i>
|
|
Mẹo từ chuyên gia
|
|
</div>
|
|
<div class="highlight-text">
|
|
Chọn gạch men vân đá với kích thước lớn (60x120cm trở lên) để tạo cảm giác không gian rộng rãi và giảm số đường nối.
|
|
</div>
|
|
</div>
|
|
|
|
<h2>2. Tone màu trung tính và earth tone</h2>
|
|
<p>Các gam màu trung tính như be, xám nhạt, và các tone đất đang thống trị xu hướng thiết kế. Những màu sắc này không chỉ tạo cảm giác thư giãn mà còn dễ dàng kết hợp với nhiều phong cách nội thất khác nhau.</p>
|
|
|
|
<ul>
|
|
<li>Beige và cream: Tạo cảm giác ấm áp, thân thiện</li>
|
|
<li>Xám nhạt: Hiện đại, tinh tế và sang trọng</li>
|
|
<li>Nâu đất: Gần gũi với thiên nhiên, tạo cảm giác thư thái</li>
|
|
</ul>
|
|
|
|
<h2>3. Kích thước lớn và định dạng dài</h2>
|
|
<p>Gạch men kích thước lớn (60x120cm, 75x150cm) và định dạng dài đang được ưa chuộng vì khả năng tạo ra không gian liền mạch, giảm đường nối và dễ vệ sinh.</p>
|
|
|
|
<blockquote>
|
|
"Việc sử dụng gạch men kích thước lớn không chỉ tạo vẻ hiện đại mà còn giúp phòng tắm nhỏ trông rộng rãi hơn đáng kể" - KTS Nguyễn Minh Tuấn
|
|
</blockquote>
|
|
|
|
<h2>4. Bề mặt texture và 3D</h2>
|
|
<p>Các loại gạch men với bề mặt có texture hoặc hiệu ứng 3D đang tạo nên điểm nhấn thú vị cho không gian phòng tắm. Từ các họa tiết geometric đến surface sần sùi tự nhiên.</p>
|
|
|
|
<h3>Các loại texture phổ biến:</h3>
|
|
<ol>
|
|
<li>Matt finish: Bề mặt nhám, chống trượt tốt</li>
|
|
<li>Structured surface: Có kết cấu sần sùi như đá tự nhiên</li>
|
|
<li>3D geometric: Họa tiết nổi tạo hiệu ứng thị giác</li>
|
|
</ol>
|
|
|
|
<h2>5. Gạch men màu đen và tương phản cao</h2>
|
|
<p>Xu hướng sử dụng gạch men màu đen hoặc tạo tương phản mạnh đang được nhiều gia chủ lựa chọn để tạo điểm nhấn đặc biệt cho phòng tắm.</p>
|
|
|
|
<div class="highlight-box">
|
|
<div class="highlight-title">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
Lưu ý khi sử dụng
|
|
</div>
|
|
<div class="highlight-text">
|
|
Gạch men màu tối dễ để lại vết ố từ nước cứng và xà phòng. Cần vệ sinh thường xuyên và sử dụng sản phẩm chống thấm phù hợp.
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Kết luận</h2>
|
|
<p>Xu hướng gạch men phòng tắm năm 2024 hướng tới sự kết hợp hoàn hảo giữa thẩm mỹ và tính năng. Việc lựa chọn đúng loại gạch men không chỉ tăng giá trị thẩm mỹ mà còn đảm bảo độ bền và dễ bảo trì trong thời gian dài.</p>
|
|
|
|
<p>Hãy tham khảo ý kiến của chuyên gia và cân nhắc kỹ về điều kiện sử dụng thực tế để đưa ra lựa chọn phù hợp nhất cho không gian của bạn.</p>
|
|
</div>
|
|
|
|
<!-- Tags -->
|
|
<div class="tags-section">
|
|
<div class="tags-title">Thẻ liên quan</div>
|
|
<div class="tags-list">
|
|
<span class="tag">#gạch-men</span>
|
|
<span class="tag">#phòng-tắm</span>
|
|
<span class="tag">#xu-hướng-2024</span>
|
|
<span class="tag">#thiết-kế-nội-thất</span>
|
|
<span class="tag">#đá-tự-nhiên</span>
|
|
<span class="tag">#tone-trung-tính</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Social Actions -->
|
|
<div class="social-actions">
|
|
<div class="engagement-stats">
|
|
<div class="stat-item">
|
|
<i class="fas fa-heart"></i>
|
|
<span>156 lượt thích</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<i class="fas fa-comment"></i>
|
|
<span>23 bình luận</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<i class="fas fa-share"></i>
|
|
<span>45 lượt chia sẻ</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="social-buttons">
|
|
<button class="social-btn" onclick="toggleLike()" id="likeBtn">
|
|
<i class="fas fa-heart"></i>
|
|
</button>
|
|
<button class="social-btn" onclick="toggleBookmark()" id="bookmarkBtn">
|
|
<i class="fas fa-bookmark"></i>
|
|
</button>
|
|
<button class="social-btn" onclick="shareArticle()">
|
|
<i class="fas fa-share-alt"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Related Articles -->
|
|
<div class="related-section">
|
|
<h3 class="related-title">Bài viết liên quan</h3>
|
|
|
|
<div class="related-card" onclick="openRelatedNews('news-1')">
|
|
<img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=60&h=60&fit=crop"
|
|
alt="Bài viết liên quan"
|
|
class="related-thumbnail">
|
|
<div class="related-info">
|
|
<h4 class="related-news-title">Hướng dẫn thi công gạch granite 60x60 chuyên nghiệp</h4>
|
|
<div class="related-meta">12/11/2024 • 1.8K lượt xem</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="related-card" onclick="openRelatedNews('news-2')">
|
|
<img src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=60&h=60&fit=crop"
|
|
alt="Bài viết liên quan"
|
|
class="related-thumbnail">
|
|
<div class="related-info">
|
|
<h4 class="related-news-title">Bảng giá gạch men cao cấp mới nhất tháng 11/2024</h4>
|
|
<div class="related-meta">10/11/2024 • 3.1K lượt xem</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="related-card" onclick="openRelatedNews('news-3')">
|
|
<img src="https://images.unsplash.com/photo-1545558014-8692077e9b5c?w=60&h=60&fit=crop"
|
|
alt="Bài viết liên quan"
|
|
class="related-thumbnail">
|
|
<div class="related-info">
|
|
<h4 class="related-news-title">Mẹo chọn gạch ốp tường phòng bếp đẹp và bền</h4>
|
|
<div class="related-meta">08/11/2024 • 1.5K lượt xem</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function goBack() {
|
|
window.history.back();
|
|
}
|
|
|
|
function shareArticle() {
|
|
if (navigator.share) {
|
|
navigator.share({
|
|
title: '5 xu hướng gạch men phòng tắm được ưa chuộng năm 2024',
|
|
text: 'Khám phá những mẫu gạch men hiện đại, sang trọng cho không gian phòng tắm.',
|
|
url: window.location.href
|
|
}).catch(console.error);
|
|
} else {
|
|
const url = window.location.href;
|
|
navigator.clipboard.writeText(url).then(() => {
|
|
showToast('Đã sao chép link bài viết!');
|
|
});
|
|
}
|
|
}
|
|
|
|
function toggleLike() {
|
|
const btn = document.getElementById('likeBtn');
|
|
btn.classList.toggle('liked');
|
|
|
|
const isLiked = btn.classList.contains('liked');
|
|
showToast(isLiked ? 'Đã thích bài viết!' : 'Đã bỏ thích bài viết!');
|
|
}
|
|
|
|
function toggleBookmark() {
|
|
const btn = document.getElementById('bookmarkBtn');
|
|
btn.classList.toggle('bookmarked');
|
|
|
|
const isBookmarked = btn.classList.contains('bookmarked');
|
|
showToast(isBookmarked ? 'Đã lưu bài viết!' : 'Đã bỏ lưu bài viết!');
|
|
}
|
|
|
|
function openRelatedNews(newsId) {
|
|
window.location.href = `news-detail.html?id=${newsId}`;
|
|
}
|
|
|
|
function showToast(message) {
|
|
const toast = document.createElement('div');
|
|
toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-4 py-2 rounded-lg z-50 transition-all duration-300';
|
|
toast.textContent = message;
|
|
document.body.appendChild(toast);
|
|
|
|
setTimeout(() => {
|
|
toast.style.opacity = '0';
|
|
setTimeout(() => {
|
|
document.body.removeChild(toast);
|
|
}, 300);
|
|
}, 2000);
|
|
}
|
|
|
|
// Smooth scroll for internal links
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Add reading progress indicator
|
|
const progressBar = document.createElement('div');
|
|
progressBar.className = 'fixed top-0 left-0 h-1 bg-blue-500 transition-all duration-300 z-50';
|
|
progressBar.style.width = '0%';
|
|
document.body.appendChild(progressBar);
|
|
|
|
window.addEventListener('scroll', () => {
|
|
const scrollTop = window.pageYOffset;
|
|
const docHeight = document.body.scrollHeight - window.innerHeight;
|
|
const scrollPercent = (scrollTop / docHeight) * 100;
|
|
progressBar.style.width = scrollPercent + '%';
|
|
});
|
|
|
|
// Animate elements on scroll
|
|
const observerOptions = {
|
|
root: null,
|
|
rootMargin: '0px',
|
|
threshold: 0.1
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.style.opacity = '1';
|
|
entry.target.style.transform = 'translateY(0)';
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
// Observe elements for animation
|
|
const elements = document.querySelectorAll('.highlight-box, .related-card, blockquote');
|
|
elements.forEach(el => {
|
|
el.style.opacity = '0';
|
|
el.style.transform = 'translateY(20px)';
|
|
el.style.transition = 'all 0.6s ease';
|
|
observer.observe(el);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |