shelfmark/templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Calibre Web Book Downloader Application">
    <meta name="theme-color" content="#333333">
    <title>Calibre Web Book Downloader</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
    <!-- Add favicon -->
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
</head>
<body>
    <header>
        <h1>Book Search & Download</h1>
    </header>

    <main>
        <!-- Search Section -->
        <section class="search-section">
            <div class="search-container">
                <input 
                    type="text" 
                    id="search-input" 
                    placeholder="Search by ISBN, title, author..."
                    aria-label="Search books"
                >
                <button id="search-button" aria-label="Search">
                    <span>Search</span>
                </button>
            </div>
        </section>

        <!-- Results Section -->
        <section class="results-section collapsed" id="results-section">
            <h2 id="results-heading">
                Search Results
                <span class="toggle-icon">▼</span>
            </h2>
            <div class="loading-indicator" id="search-loading" role="status">
                <span class="spinner"></span>
                <span>Loading...</span>
            </div>
            <div class="results-content">
                <div class="table-responsive">
                    <table id="results-table" role="grid">
                        <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Preview</th>
                                <th scope="col">Title</th>
                                <th scope="col">Author</th>
                                <th scope="col">Publisher</th>
                                <th scope="col">Year</th>
                                <th scope="col">Language</th>
                                <th scope="col">Format</th>
                                <th scope="col">Size</th>
                                <th scope="col">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Search results will be injected here -->
                        </tbody>
                    </table>
                </div>
            </div>
        </section>

        <!-- Book Details Modal -->
        <div class="modal-overlay" id="modal-overlay" role="dialog" aria-modal="true">
            <div class="details-container" id="details-container">
                <!-- Details will be dynamically injected here -->
            </div>
        </div>

        <!-- Status Section -->
        <section class="status-section">
            <h2>Download Status</h2>
            <div class="loading-indicator" id="status-loading" role="status">
                <span class="spinner"></span>
                <span>Loading...</span>
            </div>
            <div class="table-responsive">
                <table id="status-table" role="grid">
                    <thead>
                        <tr>
                            <th scope="col">Status</th>
                            <th scope="col">Book ID</th>
                            <th scope="col">Title</th>
                            <th scope="col">Preview</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Status information will be injected here -->
                    </tbody>
                </table>
            </div>
        </section>
    </main>

    <footer>
        <p>Calibre Web Book Downloader.</p>
    </footer>

    <!-- Scripts -->
    <script src="{{ url_for('static', filename='js/main.js') }}" defer></script>
</body>
</html>