index.html 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. {% if user %}
  2. {% extends "base.html" %}
  3. {% block title %}Dashboard - Audiobookshelf Recommendations{% endblock %}
  4. {% block content %}
  5. <header>
  6. <h1>Your Dashboard</h1>
  7. <p class="subtitle">AI-powered book recommendations based on your listening history</p>
  8. </header>
  9. <div class="actions">
  10. <button onclick="syncLibrary()" class="btn btn-primary">Sync with Audiobookshelf</button>
  11. <button onclick="generateRecommendations()" class="btn btn-secondary">Generate New Recommendations</button>
  12. </div>
  13. <div id="message" class="message hidden"></div>
  14. <section class="section">
  15. <h2>Your Recommendations</h2>
  16. <div id="recommendations-container">
  17. {% if recommendations %}
  18. <div class="recommendations-grid">
  19. {% for rec in recommendations %}
  20. <div class="recommendation-card">
  21. <h3>{{ rec.title }}</h3>
  22. <p class="author">by {{ rec.author }}</p>
  23. <p class="description">{{ rec.description }}</p>
  24. <div class="reason">
  25. <strong>Why this book:</strong>
  26. <p>{{ rec.reason }}</p>
  27. </div>
  28. {% if rec.genres %}
  29. <div class="genres">
  30. {% for genre in rec.genres %}
  31. <span class="genre-tag">{{ genre }}</span>
  32. {% endfor %}
  33. </div>
  34. {% endif %}
  35. </div>
  36. {% endfor %}
  37. </div>
  38. {% else %}
  39. <p class="empty-state">No recommendations yet. Sync your library and generate recommendations!</p>
  40. {% endif %}
  41. </div>
  42. </section>
  43. <section class="section">
  44. <h2>Recent Listening History</h2>
  45. <div id="history-container">
  46. {% if books %}
  47. <div class="history-list">
  48. {% for item in books %}
  49. <div class="history-item">
  50. <div class="book-info">
  51. <h3>{{ item.book.title }}</h3>
  52. <p class="author">by {{ item.book.author }}</p>
  53. </div>
  54. <div class="progress-info">
  55. {% if item.session.is_finished %}
  56. <span class="status finished">Finished</span>
  57. {% else %}
  58. <span class="status in-progress">In Progress ({{ (item.session.progress * 100) | round | int }}%)</span>
  59. {% endif %}
  60. </div>
  61. </div>
  62. {% endfor %}
  63. </div>
  64. {% else %}
  65. <p class="empty-state">No listening history found. Click "Sync with Audiobookshelf" to load your data.</p>
  66. {% endif %}
  67. </div>
  68. </section>
  69. {% endblock %}
  70. {% else %}
  71. {# Landing page for logged-out users #}
  72. <!DOCTYPE html>
  73. <html lang="en">
  74. <head>
  75. <meta charset="UTF-8">
  76. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  77. <title>Audiobookshelf Recommendations</title>
  78. <link rel="stylesheet" href="/static/css/style.css">
  79. </head>
  80. <body>
  81. <div class="landing-container">
  82. <div class="landing-hero">
  83. <h1>Audiobookshelf Recommendations</h1>
  84. <p class="landing-subtitle">
  85. AI-powered book recommendations based on your Audiobookshelf listening history
  86. </p>
  87. <div class="landing-actions">
  88. <a href="/register" class="btn btn-primary btn-large">Get Started</a>
  89. <a href="/login" class="btn btn-secondary btn-large">Sign In</a>
  90. </div>
  91. </div>
  92. <div class="landing-features">
  93. <h2>Features</h2>
  94. <div class="features-grid">
  95. <div class="feature-card">
  96. <h3>Smart Recommendations</h3>
  97. <p>Get personalized book recommendations powered by AI based on your listening history</p>
  98. </div>
  99. <div class="feature-card">
  100. <h3>Reading Statistics</h3>
  101. <p>Track your listening progress with detailed stats and insights</p>
  102. </div>
  103. <div class="feature-card">
  104. <h3>Audiobookshelf Integration</h3>
  105. <p>Seamlessly sync with your Audiobookshelf server</p>
  106. </div>
  107. </div>
  108. </div>
  109. </div>
  110. <script src="/static/js/app.js"></script>
  111. </body>
  112. </html>
  113. {% endif %}