Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Bookshelf Scanner</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| <script src="javascript.js"></script> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Bookshelf Scanner</h1> | |
| </header> | |
| <main> | |
| <!-- Start/Search Section --> | |
| <section id="search-section" class="section flex-center"> | |
| <button id="snap-option">Scan Bookshelf</button> | |
| <button id="search-option">Manual Search</button> | |
| <button id="recommender-option">Recommendations</button> | |
| </section> | |
| <!-- Scanner Form Section --> | |
| <section id="scanner-form-section" class="section flex-center" style="display:none;"> | |
| <input type="file" id="book-image" accept="image/*"> | |
| <input type="text" id="genre-input" placeholder="Genre (optional)"> | |
| <button id="scan-submit-button">Find Book Details</button> | |
| <button onclick="goBackToStart()">Back</button> | |
| </section> | |
| <!-- Manual Search Section --> | |
| <section id="manual-search-section" class="section flex-center" style="display:none;"> | |
| <p>Manual search coming soon...</p> | |
| <button onclick="goBackToStart()">Back</button> | |
| </section> | |
| <!-- Recommender Section --> | |
| <section id="recommender-section" class="section flex-center" style="display:none;"> | |
| <p>Recommender coming soon...</p> | |
| <button onclick="goBackToStart()">Back</button> | |
| </section> | |
| <!-- Book Details Section --> | |
| <section id="details-section" class="section" style="display:none;"> | |
| <button onclick="goBackToStart()">Back</button> | |
| <div class="book-details"> | |
| <img id="book-cover" src="" alt="Book Cover"> | |
| <div class="book-info"> | |
| <h2 id="book-title"></h2> | |
| <p id="book-author"></p> | |
| <p id="book-genre"></p> | |
| <p id="book-isbn"></p> | |
| <p id="book-synopsis"></p> | |
| <p id="book-stars"></p> | |
| <p id="review-count"></p> | |
| </div> | |
| </div> | |
| <h3>Buy Links</h3> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Store</th> | |
| <th>Price</th> | |
| <th>Discount</th> | |
| <th>Link</th> | |
| </tr> | |
| </thead> | |
| <tbody id="price-table-body"></tbody> | |
| </table> | |
| <h3>Recommendations</h3> | |
| <div id="recommendations-list"></div> | |
| </section> | |
| </main> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> | |