Skip to content

Commit 9f15f16

Browse files
TranHuuDat2004TranHuuDat2004
committed
add demo resize
1 parent 9540e10 commit 9f15f16

3 files changed

Lines changed: 58 additions & 18 deletions

File tree

‎img/demo_resize.png‎

856 KB
Loading

‎index.html‎

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -290,17 +290,19 @@ <h2 class="display-5 fw-bold mb-3">Thử Thách Trí Tuệ với Game Xếp Hìn
290290
</section>
291291
<!-- ===== PHẦN GIỚI THIỆU GAME KẾT THÚC ===== -->
292292

293+
<!-- ===== PHẦN CÔNG CỤ ẢNH BẮT ĐẦU ===== -->
293294
<!-- ===== PHẦN CÔNG CỤ ẢNH BẮT ĐẦU ===== -->
294295
<section id="image-tools-section-vi" class="image-tools-section py-5">
295296
<div class="container">
296297
<div class="text-center mb-5">
297298
<h2 class="display-5 fw-bold">Bộ Công Cụ Xử Lý Ảnh Đa Năng</h2>
298299
<p class="lead text-muted col-lg-8 mx-auto">
299-
Hoàn thiện bức ảnh của bạn với các công cụ cắt và tùy chỉnh ảnh chuyên nghiệp, dễ sử dụng.
300+
Hoàn thiện bức ảnh của bạn với các công cụ cắt, chia và thay đổi kích thước ảnh chuyên nghiệp, dễ sử dụng.
300301
</p>
301302
</div>
302303
<div class="row g-4 justify-content-center">
303-
<div class="col-lg-5 col-md-6">
304+
<!-- Card Cắt Ảnh Vuông -->
305+
<div class="col-lg-4 col-md-6">
304306
<div class="feature-card h-100 d-flex flex-column">
305307
<div class="text-center mb-3">
306308
<img src="img/demo_scale.png" alt="Demo Cắt Ảnh Vuông"
@@ -311,39 +313,59 @@ <h3 class="h4 fw-semibold text-center mb-3">Cắt Ảnh Thành Hình Vuông (1:1
311313
Nhanh chóng tạo ảnh đại diện, ảnh thu nhỏ hoặc bất kỳ ảnh nào yêu cầu tỷ lệ vuông. Tải lên, kéo và điều chỉnh vùng chọn trực quan.
312314
</p>
313315
<div class="mt-auto text-center">
314-
<a href="scale.html" class="btn btn-outline-warning mt-3"> <!-- Giả sử tên file là scale.html -->
315-
<i class="fas fa-vector-square me-2"></i>Thử Cắt Ảnh Vuông
316+
<a href="scale.html" class="btn btn-outline-warning mt-3">
317+
<i class="fas fa-vector-square me-2"></i>Thử Cắt Vuông
316318
</a>
317319
</div>
318320
</div>
319321
</div>
320-
<div class="col-lg-5 col-md-6">
322+
<!-- Card Chia Ảnh Lưới -->
323+
<div class="col-lg-4 col-md-6">
321324
<div class="feature-card h-100 d-flex flex-column">
322325
<div class="text-center mb-3">
323-
<img src="img/demo_split.png" alt="Demo Cắt Ảnh Lưới"
326+
<img src="img/demo_split.png" alt="Demo Chia Ảnh Lưới"
324327
class="img-fluid tool-demo-img rounded">
325328
</div>
326329
<h3 class="h4 fw-semibold text-center mb-3">Chia Ảnh Thành Lưới (VD: 3x3)</h3>
327330
<p class="text-muted small">
328331
Chia một ảnh lớn thành nhiều mảnh bằng nhau theo lưới tùy chỉnh (số hàng x số cột). Lý tưởng để tạo mảnh ghép game hoặc hiệu ứng ảnh độc đáo.
329332
</p>
330333
<div class="mt-auto text-center">
331-
<a href="split.html" class="btn btn-outline-warning mt-3"> <!-- Giả sử tên file là split.html -->
332-
<i class="fas fa-th-large me-2"></i>Thử Cắt Ảnh Lưới
334+
<a href="split.html" class="btn btn-outline-warning mt-3">
335+
<i class="fas fa-th-large me-2"></i>Thử Chia Lưới
336+
</a>
337+
</div>
338+
</div>
339+
</div>
340+
<!-- Card Thay Đổi Kích Thước Ảnh -->
341+
<div class="col-lg-4 col-md-6">
342+
<div class="feature-card h-100 d-flex flex-column">
343+
<div class="text-center mb-3">
344+
<img src="img/demo_resize.png" alt="Demo Thay Đổi Kích Thước Ảnh" class="img-fluid tool-demo-img rounded">
345+
<!-- Bạn cần có ảnh demo_resize.png trong thư mục img/ -->
346+
</div>
347+
<h3 class="h4 fw-semibold text-center mb-3">Thay Đổi Kích Thước Ảnh</h3>
348+
<p class="text-muted small">
349+
Dễ dàng điều chỉnh chiều rộng và chiều cao của ảnh theo ý muốn. Hỗ trợ giữ nguyên tỷ lệ khung hình hoặc tùy chỉnh tự do.
350+
</p>
351+
<div class="mt-auto text-center">
352+
<a href="resize.html" class="btn btn-outline-warning mt-3">
353+
<i class="fas fa-expand-arrows-alt me-2"></i>Thử Resize Ảnh
333354
</a>
334355
</div>
335356
</div>
336357
</div>
337358
</div>
338359
<div class="text-center mt-5">
339360
<a href="about.html#image-tools-section" class="btn btn-secondary">
340-
<i class="fas fa-info-circle me-2"></i>Xem Chi Tiết Công Cụ
361+
<i class="fas fa-info-circle me-2"></i>Xem Chi Tiết Các Công Cụ
341362
</a>
342363
</div>
343364
</div>
344365
</section>
345366
<!-- ===== PHẦN CÔNG CỤ ẢNH KẾT THÚC ===== -->
346367

368+
347369
<!-- ===== TẠI SAO CHỌN CHÚNG TÔI / ĐIỂM NỔI BẬT (Tùy chọn) ===== -->
348370
<section class="highlights-section py-5 bg-light">
349371
<div class="container">

‎index_en.html‎

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -316,20 +316,20 @@ <h2 class="display-5 fw-bold mb-3">Challenge Your Mind with Jigsaw Puzzles</h2>
316316
<div class="text-center mb-5">
317317
<h2 class="display-5 fw-bold">Versatile Image Processing Tools</h2>
318318
<p class="lead text-muted col-lg-8 mx-auto">
319-
Make your photos perfect with professional, easy-to-use image cropping and customization tools.
319+
Perfect your photos with professional, easy-to-use image cropping, splitting, and resizing tools.
320320
</p>
321321
</div>
322322
<div class="row g-4 justify-content-center">
323-
<div class="col-lg-5 col-md-6">
323+
<!-- Square Crop Card -->
324+
<div class="col-lg-4 col-md-6">
324325
<div class="feature-card h-100 d-flex flex-column">
325326
<div class="text-center mb-3">
326327
<img src="img/demo_scale.png" alt="Square Crop Demo"
327328
class="img-fluid tool-demo-img rounded">
328329
</div>
329330
<h3 class="h4 fw-semibold text-center mb-3">Crop Image to Square (1:1)</h3>
330331
<p class="text-muted small">
331-
Quickly create avatars, thumbnails, or any image requiring a square ratio. Upload, drag,
332-
and visually adjust the selection.
332+
Quickly create avatars, thumbnails, or any image requiring a square ratio. Upload, drag, and visually adjust the selection.
333333
</p>
334334
<div class="mt-auto text-center">
335335
<a href="scale_en.html" class="btn btn-outline-warning mt-3">
@@ -338,16 +338,16 @@ <h3 class="h4 fw-semibold text-center mb-3">Crop Image to Square (1:1)</h3>
338338
</div>
339339
</div>
340340
</div>
341-
<div class="col-lg-5 col-md-6">
341+
<!-- Grid Split Card -->
342+
<div class="col-lg-4 col-md-6">
342343
<div class="feature-card h-100 d-flex flex-column">
343344
<div class="text-center mb-3">
344345
<img src="img/demo_split.png" alt="Grid Split Demo"
345346
class="img-fluid tool-demo-img rounded">
346347
</div>
347-
<h3 class="h4 fw-semibold text-center mb-3">Image Tools into Grid (e.g., 3x3)</h3>
348+
<h3 class="h4 fw-semibold text-center mb-3">Split Image into Grid (e.g., 3x3)</h3>
348349
<p class="text-muted small">
349-
Divide a large image into multiple equal pieces in a customizable grid (rows x columns).
350-
Ideal for creating puzzle pieces or unique photo effects.
350+
Divide a large image into multiple equal pieces in a customizable grid (rows x columns). Ideal for creating puzzle pieces or unique photo effects.
351351
</p>
352352
<div class="mt-auto text-center">
353353
<a href="split_en.html" class="btn btn-outline-warning mt-3">
@@ -356,9 +356,27 @@ <h3 class="h4 fw-semibold text-center mb-3">Image Tools into Grid (e.g., 3x3)</h
356356
</div>
357357
</div>
358358
</div>
359+
<!-- Image Resizer Card -->
360+
<div class="col-lg-4 col-md-6">
361+
<div class="feature-card h-100 d-flex flex-column">
362+
<div class="text-center mb-3">
363+
<img src="img/demo_resize.png" alt="Image Resizer Demo" class="img-fluid tool-demo-img rounded">
364+
<!-- Ensure you have demo_resize.png in your img/ folder -->
365+
</div>
366+
<h3 class="h4 fw-semibold text-center mb-3">Resize Image Dimensions</h3>
367+
<p class="text-muted small">
368+
Easily adjust the width and height of your images. Supports maintaining aspect ratio or free-form customization.
369+
</p>
370+
<div class="mt-auto text-center">
371+
<a href="resize_en.html" class="btn btn-outline-warning mt-3">
372+
<i class="fas fa-expand-arrows-alt me-2"></i>Try Image Resize
373+
</a>
374+
</div>
375+
</div>
376+
</div>
359377
</div>
360378
<div class="text-center mt-5">
361-
<a href="about.html#image-tools-section" class="btn btn-secondary">
379+
<a href="about.html#image-tools-section" class="btn btn-secondary"> <!-- Assuming about.html is universal or has an _en version -->
362380
<i class="fas fa-info-circle me-2"></i>View Tool Details
363381
</a>
364382
</div>

0 commit comments

Comments
 (0)