Dewey_Orcale
/
dewey-oracle


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Audiobookshelf Recommendations</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>Audiobookshelf Recommendations</h1>
            <p class="subtitle">AI-powered book recommendations based on your listening history</p>
        </header>

        <div class="actions">
            <button onclick="syncLibrary()" class="btn btn-primary">Sync with Audiobookshelf</button>
            <button onclick="generateRecommendations()" class="btn btn-secondary">Generate New Recommendations</button>
        </div>

        <div id="message" class="message hidden"></div>

        <section class="section">
            <h2>Your Recommendations</h2>
            <div id="recommendations-container">
                {% if recommendations %}
                    <div class="recommendations-grid">
                        {% for rec in recommendations %}
                        <div class="recommendation-card">
                            <h3>{{ rec.title }}</h3>
                            <p class="author">by {{ rec.author }}</p>
                            <p class="description">{{ rec.description }}</p>
                            <div class="reason">
                                <strong>Why this book:</strong>
                                <p>{{ rec.reason }}</p>
                            </div>
                            {% if rec.genres %}
                                <div class="genres">
                                    {% for genre in rec.genres.split(',') if rec.genres else [] %}
                                    <span class="genre-tag">{{ genre.strip() }}</span>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <p class="empty-state">No recommendations yet. Sync your library and generate recommendations!</p>
                {% endif %}
            </div>
        </section>

        <section class="section">
            <h2>Recent Listening History</h2>
            <div id="history-container">
                {% if books %}
                    <div class="history-list">
                        {% for item in books %}
                        <div class="history-item">
                            <div class="book-info">
                                <h3>{{ item.book.title }}</h3>
                                <p class="author">by {{ item.book.author }}</p>
                            </div>
                            <div class="progress-info">
                                {% if item.session.is_finished %}
                                    <span class="status finished">Finished</span>
                                {% else %}
                                    <span class="status in-progress">In Progress ({{ (item.session.progress * 100) | round | int }}%)</span>
                                {% endif %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <p class="empty-state">No listening history found. Click "Sync with Audiobookshelf" to load your data.</p>
                {% endif %}
            </div>
        </section>
    </div>

    <script src="/static/js/app.js"></script>
</body>
</html>