Spaces:
Running
Running
| <html lang="vi"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Tin tức Tự động - Trích xuất & Phân tích</title> | |
| <meta name="description" content="Công cụ tự động trích xuất nội dung và hình ảnh từ bài báo"> | |
| <link rel="stylesheet" href="assets/css/styles.css"> | |
| <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&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <div class="container"> | |
| <div class="header-content"> | |
| <h1 class="logo"> | |
| <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M12 2L2 7l10 5 10-5-10-5z"/> | |
| <path d="M2 17l10 5 10-5M2 12l10 5 10-5"/> | |
| </svg> | |
| News Extractor | |
| </h1> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">Built with anycoder</a> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="main"> | |
| <div class="container"> | |
| <section class="url-input-section"> | |
| <div class="input-card"> | |
| <h2>Nhập URL tin tức</h2> | |
| <p class="subtitle">Dán đường dẫn bài báo vào ô bên dưới để trích xuất nội dung</p> | |
| <form id="urlForm" class="url-form"> | |
| <div class="input-group"> | |
| <input | |
| type="url" | |
| id="urlInput" | |
| placeholder="https://vnexpress.net/bai-viet-tin-tuc..." | |
| required | |
| pattern="https?://.+" | |
| > | |
| <button type="submit" id="extractBtn" class="extract-btn"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <polyline points="9 11 12 14 22 4"/> | |
| <path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/> | |
| </svg> | |
| Trích xuất | |
| </button> | |
| </div> | |
| </form> | |
| <div id="errorMessage" class="error-message hidden"></div> | |
| </div> | |
| </section> | |
| <section id="loadingSection" class="loading-section hidden"> | |
| <div class="loading-card"> | |
| <div class="spinner"></div> | |
| <p>Đang tải và phân tích nội dung...</p> | |
| </div> | |
| </section> | |
| <section id="resultsSection" class="results-section hidden"> | |
| <div class="results-header"> | |
| <h2>Kết quả phân tích</h2> | |
| <button id="newSearchBtn" class="new-search-btn"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M23 4v6h-6M1 20v-6h6"/> | |
| <path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/> | |
| </svg> | |
| Tìm kiếm mới | |
| </button> | |
| </div> | |
| <div class="results-grid"> | |
| <div class="content-card"> | |
| <h3> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/> | |
| <polyline points="14 2 14 8 20 8"/> | |
| <line x1="16" y1="13" x2="8" y2="13"/> | |
| <line x1="16" y1="17" x2="8" y2="17"/> | |
| <polyline points="10 9 9 9 8 9"/> | |
| </svg> | |
| Thông tin bài viết | |
| </h3> | |
| <div id="articleInfo" class="article-info"></div> | |
| <h3 class="mt-4"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/> | |
| </svg> | |
| Các ý chính | |
| </h3> | |
| <div id="keyPoints" class="key-points"></div> | |
| </div> | |
| <div class="images-card"> | |
| <h3> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/> | |
| <circle cx="8.5" cy="8.5" r="1.5"/> | |
| <polyline points="21 15 16 10 5 21"/> | |
| </svg> | |
| Hình ảnh trong bài | |
| </h3> | |
| <div id="imagesGallery" class="images-gallery"></div> | |
| </div> | |
| </div> | |
| <div class="full-content-card"> | |
| <h3> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"/> | |
| <path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"/> | |
| </svg> | |
| Nội dung đầy đủ | |
| </h3> | |
| <div id="fullContent" class="full-content"></div> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| <footer class="footer"> | |
| <div class="container"> | |
| <p>© 2024 News Extractor. Công cụ trích xuất tin tức tự động.</p> | |
| </div> | |
| </footer> | |
| <div id="imageModal" class="image-modal hidden"> | |
| <div class="modal-content"> | |
| <span class="close-modal">×</span> | |
| <img id="modalImage" src="" alt="Hình ảnh lớn"> | |
| </div> | |
| </div> | |
| <script src="assets/js/main.js"></script> | |
| </body> | |
| </html> |