Spaces:
Running
Running
| <html lang="vi"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="Công cụ trích xuất tin tức - Lấy ý chính và hình ảnh từ bài báo"> | |
| <title>Tin Tức Tự Động - Trích Xuất Nội Dung</title> | |
| <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"> | |
| <div class="logo"> | |
| <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2"/> | |
| <path d="M18 14h-8"/> | |
| <path d="M15 18h-5"/> | |
| <path d="M10 6h8"/> | |
| </svg> | |
| <span>News Extractor</span> | |
| </div> | |
| <div class="header-actions"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with"> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="main"> | |
| <section class="hero"> | |
| <div class="container"> | |
| <h1 class="hero-title">Trích Xuất Tin Tức Tự Động</h1> | |
| <p class="hero-subtitle">Nhập URL bài viết để lấy ý chính và tất cả hình ảnh</p> | |
| </div> | |
| </section> | |
| <section class="input-section"> | |
| <div class="container"> | |
| <div class="url-input-container"> | |
| <form id="urlForm" class="url-form"> | |
| <div class="input-group"> | |
| <svg class="input-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/> | |
| <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/> | |
| </svg> | |
| <input | |
| type="url" | |
| id="urlInput" | |
| placeholder="Nhập URL bài viết tin tức..." | |
| required | |
| pattern="https?://.+" | |
| > | |
| <button type="submit" id="extractBtn" class="extract-btn"> | |
| <span class="btn-text">Trích Xuất</span> | |
| <svg class="btn-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M22 12h-4l-3 9L9 3l-3 9H2"/> | |
| </svg> | |
| </button> | |
| </div> | |
| </form> | |
| <div id="errorMessage" class="error-message"></div> | |
| </div> | |
| <div class="sample-urls"> | |
| <p class="sample-label">URL mẫu:</p> | |
| <div class="sample-buttons"> | |
| <button class="sample-btn" data-url="https://vietnamnews.vn/politics/1000001.htm"> | |
| Vietnam News | |
| </button> | |
| <button class="sample-btn" data-url="https://vnexpress.net/sample-article"> | |
| VnExpress | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="resultsSection" class="results-section hidden"> | |
| <div class="container"> | |
| <div class="results-grid"> | |
| <div class="key-points-panel"> | |
| <div class="panel-header"> | |
| <h2 class="panel-title"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M9 11H3v2h6v-2zm0-4H3v2h6V7zm0 8H3v2h6v-2zm12-8h-6v2h6V7zm0 4h-6v2h6v-2zm0 4h-6v2h6v-2z"/> | |
| </svg> | |
| Ý Chính | |
| </h2> | |
| <button id="copyKeyPoints" class="copy-btn"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/> | |
| <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/> | |
| </svg> | |
| Sao chép | |
| </button> | |
| </div> | |
| <div id="keyPoints" class="key-points-content"> | |
| <!-- Key points will be inserted here --> | |
| </div> | |
| </div> | |
| <div class="images-panel"> | |
| <div class="panel-header"> | |
| <h2 class="panel-title"> | |
| <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 | |
| <span id="imageCount" class="image-count">0</span> | |
| </h2> | |
| <button id="downloadAll" class="download-btn"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/> | |
| <polyline points="7 10 12 15 17 10"/> | |
| <line x1="12" y1="15" x2="12" y2="3"/> | |
| </svg> | |
| Tải tất cả | |
| </button> | |
| </div> | |
| <div id="imagesGrid" class="images-grid"> | |
| <!-- Images will be inserted here --> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="metadata-panel"> | |
| <div class="panel-header"> | |
| <h2 class="panel-title"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <circle cx="12" cy="12" r="10"/> | |
| <path d="M12 6v6l4 2"/> | |
| </svg> | |
| Thông tin bài viết | |
| </h2> | |
| </div> | |
| <div id="articleMetadata" class="metadata-content"> | |
| <!-- Metadata will be inserted here --> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="loadingSection" class="loading-section hidden"> | |
| <div class="loading-spinner"> | |
| <div class="spinner"></div> | |
| <p>Đang trích xuất nội dung...</p> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="footer"> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <p>© 2024 News Extractor. Công cụ trích xuất tin tức thông minh.</p> | |
| <div class="footer-links"> | |
| <a href="#">Hướng dẫn</a> | |
| <a href="#">Về chúng tôi</a> | |
| <a href="#">Liên hệ</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <div id="imageModal" class="image-modal"> | |
| <div class="modal-content"> | |
| <button class="modal-close">×</button> | |
| <img id="modalImage" src="" alt=""> | |
| <div class="modal-info"> | |
| <p id="modalImageInfo"></p> | |
| <a id="modalDownloadLink" download class="modal-download-btn">Tải xuống</a> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="assets/js/script.js"></script> | |
| </body> | |
| </html> |