Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>List of Authors</title>
- <link rel="stylesheet" href="styles.css" />
- </head>
- <body>
- <h1>Information About Authors</h1>
- <!-- Filters -->
- <div class="filters">
- <div>
- <label for="filterName">Name:</label>
- <input type="text" id="filterName" placeholder="Enter author name" />
- </div>
- <div>
- <label for="filterNationality">Nationality:</label>
- <select id="filterNationality">
- <option value="">All</option>
- </select>
- </div>
- <div>
- <label for="filterAlive">Alive:</label>
- <input type="checkbox" id="filterAlive" />
- </div>
- <div>
- <label for="filterActiveYear">Years Active:</label>
- <input type="number" id="filterActiveYear" placeholder="Enter year" />
- </div>
- <div class="clearFilters">
- <button id="clearFilters" class="btn">Clear Filters</button>
- </div>
- </div>
- <!-- Authors Table -->
- <table id="authorsTable" class="table">
- <thead>
- <tr>
- <th data-sort="id">ID</th>
- <th data-sort="name">Name</th>
- <th data-sort="birth_date">Birth Date</th>
- <th data-sort="alive">Alive</th>
- <th data-sort="age">Age</th>
- <th data-sort="nationality">Nationality</th>
- <th data-sort="bibliographyCount"># Books</th>
- <th data-sort="bibliographySummary">Bibliography</th>
- <th data-sort="yearsActive">Years Active</th>
- </tr>
- </thead>
- <tbody></tbody>
- </table>
- <!-- Books Modal -->
- <div class="modal" id="booksModal" hidden="true">
- <div class="modal-content">
- <span class="close-btn" id="closeModal">×</span>
- <h2 id="booksModalTitle">Bibliography</h2>
- <table id="booksTable">
- <thead>
- <tr><th>Name</th><th>Year</th><th>Type</th></tr>
- </thead>
- <tbody></tbody>
- </table>
- </div>
- </div>
- <!-- JS -->
- <script src="script.js"></script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment