| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>News Portal - Article</title> |
| <style> |
| body { font-family: 'Segoe UI', sans-serif; line-height: 1.6; margin: 0; background: #f4f4f4; color: #333; } |
| .container { max-width: 800px; margin: 40px auto; background: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); } |
| header { border-bottom: 2px solid #eee; margin-bottom: 20px; padding-bottom: 10px; } |
| h1 { margin: 0; color: #222; } |
| |
| |
| .nav-buttons { display: flex; justify-content: space-between; margin-top: 40px; padding-top: 20px; border-top: 2px solid #eee; } |
| .btn { padding: 12px 24px; background: #007bff; color: white; text-decoration: none; border-radius: 5px; font-weight: bold; transition: 0.3s; border: none; cursor: pointer; } |
| .btn:hover { background: #0056b3; } |
| .btn:disabled { background: #ccc; cursor: not-allowed; } |
| </style> |
| </head> |
| <body> |
|
|
| <div class="container"> |
| <header> |
| <small>News Article</small> |
| <h1>Article Title Here</h1> |
| </header> |
|
|
| <div class="nav-buttons"> |
| <button id="prevBtn" class="btn" onclick="navigate(-1)">← Previous</button> |
| <button id="nextBtn" class="btn" onclick="navigate(1)">Next →</button> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const totalArticles = 20; |
| |
| |
| const currentPath = window.location.pathname; |
| const filename = currentPath.substring(currentPath.lastIndexOf('/') + 1); |
| const currentNum = parseInt(filename.split('.')[0]) || 1; |
| |
| |
| if (currentNum <= 1) document.getElementById('prevBtn').disabled = true; |
| if (currentNum >= totalArticles) document.getElementById('nextBtn').disabled = true; |
| |
| function navigate(direction) { |
| const targetNum = currentNum + direction; |
| if (targetNum >= 1 && targetNum <= totalArticles) { |
| |
| window.location.href = targetNum + ".html"; |
| } |
| } |
| </script> |
|
|
| </body> |
| </html> |
