Xaydungtuonglai/navbar_test.html at main · minhe51805/Xaydungtuonglai · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VinTech Navbar Test - Scroll Effects</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <!-- VinTech Enhanced CSS -->
    <link rel="stylesheet" href="assets/css/vintech-enhanced.css">

    <style>
        :root {
            --scroll-progress: 0;
        }

        body {
            padding-top: 90px;
            font-family: 'Inter', sans-serif;
        }

        .test-section {
            min-height: 100vh;
            padding: 60px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            margin-bottom: 2px;
        }

        .test-section:nth-child(odd) {
            background: linear-gradient(135deg, #e8f5e8, #d4edda);
        }

        .test-content {
            text-align: center;
            max-width: 800px;
            padding: 40px;
            background: white;
            border-radius: 20px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
        }

        .test-content h2 {
            color: #2d5a27;
            font-weight: 700;
            margin-bottom: 20px;
            font-size: 2.5rem;
        }

        .test-content p {
            color: #666;
            line-height: 1.8;
            font-size: 1.1rem;
            margin-bottom: 30px;
        }

        .scroll-indicator {
            position: fixed;
            top: 50%;
            right: 30px;
            transform: translateY(-50%);
            background: rgba(255,255,255,0.9);
            backdrop-filter: blur(10px);
            padding: 15px;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            z-index: 999;
        }

        .scroll-info {
            font-size: 0.9rem;
            color: #666;
            margin-bottom: 10px;
        }

        .progress-demo {
            width: 100px;
            height: 8px;
            background: #e9ecef;
            border-radius: 4px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #6fbb6b, #28a745);
            width: var(--scroll-progress-percent, 0%);
            transition: width 0.1s ease;
        }
    </style>
</head>
<body>
    <!-- VinTech Navigation -->
    <nav class="vintech-navbar navbar navbar-expand-lg fixed-top">
        <div class="container">
            <a class="vintech-brand navbar-brand" href="#home">
                <div class="vintech-logo">
                    <i class="fas fa-leaf"></i>
                </div>
                <span class="vintech-brand-text">CONVOI</span>
                <span class="vintech-brand-badge">VinTech</span>
            </a>
            <button class="navbar-toggler vintech-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span></span>
                <span></span>
                <span></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link vintech-nav-link" href="#home">
                            <i class="fas fa-home"></i>
                            <span>Trang chủ</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link vintech-nav-link" href="#about">
                            <i class="fas fa-info-circle"></i>
                            <span>Giới thiệu</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link vintech-nav-link" href="#services">
                            <i class="fas fa-cogs"></i>
                            <span>Dịch vụ</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link vintech-nav-link" href="#contact">
                            <i class="fas fa-envelope"></i>
                            <span>Liên hệ</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="vintech-btn vintech-btn-primary vintech-nav-cta" href="#donate">
                            <i class="fas fa-donate"></i>
                            <span>Quyên góp</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Scroll Progress Indicator -->
    <div class="scroll-indicator">
        <div class="scroll-info">Scroll Progress</div>
        <div class="progress-demo">
            <div class="progress-fill"></div>
        </div>
        <div class="scroll-info" id="scroll-percent">0%</div>
    </div>

    <!-- Test Sections -->
    <section class="test-section" id="home">
        <div class="test-content">
            <h2><i class="fas fa-home text-success me-3"></i>Trang Chủ</h2>
            <p>Chào mừng bạn đến với VinTech! Đây là trang test để kiểm tra navbar scroll effects. Hãy cuộn xuống để xem navbar thay đổi như thế nào với những hiệu ứng mượt mà và đẹp mắt.</p>
            <p>Navbar sẽ thay đổi background, thêm blur effects, và hiển thị progress bar khi bạn scroll xuống.</p>
        </div>
    </section>

    <section class="test-section" id="about">
        <div class="test-content">
            <h2><i class="fas fa-info-circle text-primary me-3"></i>Giới Thiệu</h2>
            <p>Phần này test hiệu ứng glassmorphism của navbar. Bạn có thể thấy navbar trở nên trong suốt hơn với backdrop-filter blur effect.</p>
            <p>Progress bar ở dưới navbar sẽ hiển thị tiến độ scroll của bạn từ đầu trang đến cuối trang.</p>
        </div>
    </section>

    <section class="test-section" id="services">
        <div class="test-content">
            <h2><i class="fas fa-cogs text-warning me-3"></i>Dịch Vụ</h2>
            <p>Test navbar hide/show effects khi scroll nhanh. Navbar sẽ ẩn khi scroll xuống và hiện lại khi scroll lên.</p>
            <p>Các animation transitions được tối ưu với cubic-bezier curves để tạo cảm giác mượt mà và professional.</p>
        </div>
    </section>

    <section class="test-section" id="contact">
        <div class="test-content">
            <h2><i class="fas fa-envelope text-info me-3"></i>Liên Hệ</h2>
            <p>Phần cuối để test đầy đủ scroll progress. Logo và brand text cũng có hover effects đẹp mắt.</p>
            <p>Navbar responsive hoàn toàn trên mobile devices với hamburger menu.</p>
        </div>
    </section>

    <section class="test-section" id="donate">
        <div class="test-content">
            <h2><i class="fas fa-donate text-success me-3"></i>Quyên Góp</h2>
            <p>Cuối cùng - test scroll to top button và tất cả effects. Progress bar sẽ đạt 100% khi đến cuối trang này.</p>
            <p>Tất cả animations đều được optimize cho performance và UX tốt nhất.</p>
        </div>
    </section>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- VinTech Enhanced JS -->
    <script src="assets/js/vintech-enhanced.js"></script>

    <script>
        // Additional scroll progress display
        function updateScrollDisplay() {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
            const progress = Math.min((scrollTop / scrollHeight) * 100, 100);

            document.getElementById('scroll-percent').textContent = Math.round(progress) + '%';
            document.documentElement.style.setProperty('--scroll-progress-percent', progress + '%');
        }

        window.addEventListener('scroll', updateScrollDisplay);
        updateScrollDisplay();

        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });
    </script>
</body>
</html>