Skip to content

Commit b772de5

Browse files
lucthienphong1120lucthienphong1120
committed
feat: adjust manifesto text size and spacing, add link/hash click reveal fallback, and integrate CRF community metrics card
1 parent 1087960 commit b772de5

3 files changed

Lines changed: 83 additions & 37 deletions

File tree

‎app.js‎

Lines changed: 38 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,20 @@ document.addEventListener('DOMContentLoaded', () => {
6262
}
6363

6464
// 3. Scroll Reveal Animations (Intersection Observer)
65+
const revealTargetSection = (hash) => {
66+
if (!hash || !hash.startsWith('#') || hash === '#') return;
67+
try {
68+
const targetSection = document.querySelector(hash);
69+
if (targetSection) {
70+
targetSection.querySelectorAll('.reveal').forEach(el => {
71+
el.classList.add('active');
72+
});
73+
}
74+
} catch (e) {
75+
console.error("Error revealing target section:", e);
76+
}
77+
};
78+
6579
const revealElements = document.querySelectorAll('.reveal');
6680
const revealObserver = new IntersectionObserver((entries, observer) => {
6781
entries.forEach(entry => {
@@ -71,32 +85,47 @@ document.addEventListener('DOMContentLoaded', () => {
7185
}
7286
});
7387
}, {
74-
threshold: 0.15,
75-
rootMargin: '0px 0px -50px 0px'
88+
threshold: 0.05,
89+
rootMargin: '0px 0px -20px 0px'
7690
});
7791

7892
revealElements.forEach(element => {
7993
revealObserver.observe(element);
8094
});
8195

96+
// Immediately reveal elements if arriving via hash link or hash changes
97+
revealTargetSection(window.location.hash);
98+
window.addEventListener('hashchange', () => {
99+
revealTargetSection(window.location.hash);
100+
});
101+
102+
// Also trigger on local hash link clicks
103+
document.querySelectorAll('a[href^="#"]').forEach(link => {
104+
link.addEventListener('click', () => {
105+
revealTargetSection(link.getAttribute('href'));
106+
});
107+
});
108+
82109
// 4. Statistics Counter Animation
83110
const statNumbers = document.querySelectorAll('.stat-counter');
84111
const animateCounters = (element) => {
85112
const target = parseInt(element.getAttribute('data-target'), 10);
86113
const prefix = element.getAttribute('data-prefix') || '';
87114
const suffix = element.getAttribute('data-suffix') || '';
88-
let current = 0;
89115
const duration = 1500; // 1.5 seconds
90-
const stepTime = Math.max(Math.floor(duration / target), 15);
116+
const startTime = performance.now();
91117

92-
const timer = setInterval(() => {
93-
current += 1;
118+
const updateCounter = (now) => {
119+
const progress = Math.min((now - startTime) / duration, 1);
120+
const current = Math.floor(progress * target);
94121
element.textContent = prefix + current + suffix;
95-
if (current >= target) {
122+
if (progress < 1) {
123+
requestAnimationFrame(updateCounter);
124+
} else {
96125
element.textContent = prefix + target + suffix;
97-
clearInterval(timer);
98126
}
99-
}, stepTime);
127+
};
128+
requestAnimationFrame(updateCounter);
100129
};
101130

102131
const manifestoSection = document.getElementById('manifesto');

‎index.html‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -327,21 +327,29 @@ <h4 class="manifesto-section-title"><span class="text-gradient">4.</span> Lời
327327
</div>
328328

329329
<div class="manifesto-side">
330-
<!-- Case Study Card -->
330+
<!-- Community Metrics Card -->
331331
<div class="info-card glass-card reveal" style="border-left: 3px solid var(--primary);">
332-
<span style="font-size: 0.7rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 0.05em; display: inline-block; margin-bottom: 0.5rem;">CASE STUDY THỰC TẾ</span>
333-
<h4 class="info-card-title" style="font-size: 1.1rem; margin-bottom: 0.75rem;"><i class="fa-solid fa-bullhorn"></i> Chiến Dịch Schannel</h4>
332+
<span style="font-size: 0.7rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 0.05em; display: inline-block; margin-bottom: 0.5rem;">SỨC MẠNH CỘNG ĐỒNG</span>
333+
<h4 class="info-card-title" style="font-size: 1.1rem; margin-bottom: 0.75rem;"><i class="fa-solid fa-users"></i> Hiệu Quả Truyền Thông CRF</h4>
334334
<p style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1rem; line-height: 1.4;">
335-
Hợp tác quảng bá Bảo tàng Lịch sử Quân sự Việt Nam cùng Cục Thông tin đối ngoại đạt cột mốc ấn tượng:
335+
Các chỉ số lan tỏa và kết nối thực tế trong mạng lưới hệ sinh thái CRF:
336336
</p>
337-
<div style="display: flex; gap: 1rem; align-items: center; margin-top: 1rem;">
338-
<div style="flex: 1; background: rgba(255, 255, 255, 0.02); padding: 0.75rem; border-radius: 8px; border: 1px solid var(--border-color); text-align: center;">
337+
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1rem;">
338+
<div style="background: rgba(255, 255, 255, 0.02); padding: 0.75rem; border-radius: 8px; border: 1px solid var(--border-color); text-align: center;">
339339
<div style="font-size: 1.5rem; font-weight: 800; color: var(--primary);" class="stat-counter" data-target="10" data-suffix="M+">10M+</div>
340-
<div style="font-size: 0.65rem; color: var(--text-muted); font-weight: 600;">LƯỢT XEM</div>
340+
<div style="font-size: 0.65rem; color: var(--text-muted); font-weight: 600;">LƯỢT TIẾP CẬN</div>
341341
</div>
342-
<div style="flex: 1; background: rgba(255, 255, 255, 0.02); padding: 0.75rem; border-radius: 8px; border: 1px solid var(--border-color); text-align: center;">
343-
<div style="font-size: 1.5rem; font-weight: 800; color: var(--secondary);" class="stat-counter" data-target="15">15</div>
344-
<div style="font-size: 0.65rem; color: var(--text-muted); font-weight: 600;">NỘI DUNG</div>
342+
<div style="background: rgba(255, 255, 255, 0.02); padding: 0.75rem; border-radius: 8px; border: 1px solid var(--border-color); text-align: center;">
343+
<div style="font-size: 1.5rem; font-weight: 800; color: var(--secondary);" class="stat-counter" data-target="280" data-suffix="k+">280k+</div>
344+
<div style="font-size: 0.65rem; color: var(--text-muted); font-weight: 600;">MEMBERS & FOLLOWERS</div>
345+
</div>
346+
<div style="background: rgba(255, 255, 255, 0.02); padding: 0.75rem; border-radius: 8px; border: 1px solid var(--border-color); text-align: center;">
347+
<div style="font-size: 1.5rem; font-weight: 800; color: var(--secondary);" class="stat-counter" data-target="50" data-suffix="k+">50k+</div>
348+
<div style="font-size: 0.65rem; color: var(--text-muted); font-weight: 600;">HỌC VIÊN HOẠT ĐỘNG</div>
349+
</div>
350+
<div style="background: rgba(255, 255, 255, 0.02); padding: 0.75rem; border-radius: 8px; border: 1px solid var(--border-color); text-align: center;">
351+
<div style="font-size: 1.5rem; font-weight: 800; color: var(--primary);" class="stat-counter" data-target="30" data-suffix="+">30+</div>
352+
<div style="font-size: 0.65rem; color: var(--text-muted); font-weight: 600;">DỰ ÁN MIỄN PHÍ</div>
345353
</div>
346354
</div>
347355
</div>

‎style.css‎

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -455,23 +455,23 @@ header {
455455
}
456456

457457
.manifesto-header-block {
458-
margin-bottom: 2.5rem;
458+
margin-bottom: 1.5rem;
459459
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
460-
padding-bottom: 1.5rem;
460+
padding-bottom: 1rem;
461461
}
462462

463463
.manifesto-title {
464-
font-size: 1.8rem;
464+
font-size: 1.5rem;
465465
font-weight: 800;
466466
line-height: 1.3;
467467
margin-bottom: 0.5rem;
468468
}
469469

470470
.manifesto-meta {
471-
font-size: 0.85rem;
471+
font-size: 0.8rem;
472472
color: var(--text-muted);
473473
display: flex;
474-
gap: 1.5rem;
474+
gap: 1.25rem;
475475
}
476476

477477
.manifesto-meta span i {
@@ -480,11 +480,11 @@ header {
480480
}
481481

482482
.manifesto-body {
483-
font-size: 1.05rem;
483+
font-size: 0.95rem;
484484
color: var(--text-secondary);
485485
display: flex;
486486
flex-direction: column;
487-
gap: 1.5rem;
487+
gap: 1rem;
488488
}
489489

490490
.manifesto-body p strong {
@@ -493,42 +493,51 @@ header {
493493

494494
.manifesto-highlight-quote {
495495
border-left: 3px solid var(--primary);
496-
padding-left: 1.5rem;
497-
margin: 1.5rem 0;
496+
padding-left: 1.25rem;
497+
margin: 1.25rem 0;
498498
font-style: italic;
499-
font-size: 1.1rem;
499+
font-size: 1rem;
500500
color: var(--text-primary);
501501
}
502502

503503
.manifesto-signature {
504-
margin-top: 3rem;
504+
margin-top: 2rem;
505505
display: flex;
506506
flex-direction: column;
507-
gap: 0.5rem;
507+
gap: 0.4rem;
508508
}
509509

510510
.signature-name {
511511
font-family: 'Plus Jakarta Sans', sans-serif;
512512
font-weight: 700;
513-
font-size: 1.15rem;
513+
font-size: 1.1rem;
514514
color: var(--primary);
515515
}
516516

517517
.signature-title {
518-
font-size: 0.85rem;
518+
font-size: 0.8rem;
519519
color: var(--text-muted);
520520
}
521521

522522
.manifesto-section {
523-
margin-top: 2.2rem;
523+
margin-top: 1.25rem;
524524
border-top: 1px solid rgba(255, 255, 255, 0.05);
525-
padding-top: 2rem;
525+
padding-top: 1.1rem;
526+
}
527+
528+
.manifesto-section p {
529+
margin-bottom: 0.85rem;
530+
line-height: 1.6;
531+
}
532+
533+
.manifesto-section p:last-child {
534+
margin-bottom: 0;
526535
}
527536

528537
.manifesto-section-title {
529-
font-size: 1.35rem;
538+
font-size: 1.15rem;
530539
font-weight: 800;
531-
margin-bottom: 1.25rem;
540+
margin-bottom: 0.75rem;
532541
color: var(--text-primary);
533542
}
534543

0 commit comments

Comments
 (0)