Lisbook/explore.html at main · YakeDev/Lisbook · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Explore Books</title>
    <link rel="stylesheet" href="style.css" />
    <!-- Favicon -->
    <link rel="icon" href="Images/favicon.jpg" type="image/png" />
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
    <link rel="stylesheet" href="explore_style.css"> <!-- Include your CSS -->
    <script type="text/javascript" data-cmp-ab="1" src="https://cdn.consentmanager.net/delivery/autoblocking/1dae96c2c2031.js" data-cmp-host="a.delivery.consentmanager.net" data-cmp-cdn="cdn.consentmanager.net" data-cmp-codesrc="16"></script>
</head>

<body class="bg-gray-900 text-gray-300 d-flex flex-column min-vh-100">
    <script>
        (function() {
            try {
                const saved = localStorage.getItem('theme');
                const theme = saved === 'light' ? 'light' : 'dark';
                document.documentElement.setAttribute('data-theme', theme);
                if (document.body) {
                    document.body.classList.remove('light-theme', 'dark-theme');
                    document.body.classList.add(theme + '-theme');
                }
            } catch (e) { console.warn('Theme init error', e); }
        })();
    </script>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>

    <!-- Dynamic Navbar Placeholder -->
    <div id="navbar-placeholder"></div>

    <!-- Search and Filter Section -->
    <section class="search-filter-section">
        <div class="container mx-auto px-4 py-8">
            <!-- Search and Filter Container -->
            <div class="search-filter-wrapper max-w-7xl mx-auto">
                <!-- Search Bar -->
                <div class="search-container">
                    <label class="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wide">Search</label>
                    <div class="search-wrapper flex items-center gap-4">
                        <!-- Search Icon -->
                        <div class="search-icon-container">
                            <i class="bi bi-search text-gray-400 text-xl"></i>
                        </div>
                        <!-- Search Input -->
                        <div class="search-input-container flex-1 relative">
                            <input type="text"
                                   id="searchInput"
                                   placeholder="Search by title, author, or genre..."
                                   class="w-full px-4 py-2 pl-4 pr-12 bg-gray-800/50 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500/20 transition-all text-base backdrop-blur-sm">
                            <button id="clearSearch" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white hidden p-1 rounded-full hover:bg-gray-700 transition-all">
                                <i class="bi bi-x-lg text-sm"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Filter Controls -->
                <div class="filter-container">
                    <div class="filter-wrapper flex flex-wrap gap-4">
                        <!-- Genre Filter -->
                        <div class="filter-group">
                            <label class="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wide">Genre</label>
                            <select id="genreFilter" class="bg-gray-800/50 border border-gray-600 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500/20 transition-all min-w-[140px] text-sm backdrop-blur-sm">
                                <option value="">All Genres</option>
                            </select>
                        </div>

                        <!-- Duration Filter -->
                        <div class="filter-group">
                            <label class="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wide">Duration</label>
                            <select id="durationFilter" class="bg-gray-800/50 border border-gray-600 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500/20 transition-all min-w-[150px] text-sm backdrop-blur-sm">
                                <option value="">Any Duration</option>
                                <option value="short">Short (< 4h)</option>
                                <option value="medium">Medium (4-8h)</option>
                                <option value="long">Long (> 8h)</option>
                            </select>
                        </div>

                        <!-- Sort Options -->
                        <div class="filter-group">
                            <label class="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wide">Sort By</label>
                            <select id="sortFilter" class="bg-gray-800/50 border border-gray-600 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500/20 transition-all min-w-[140px] text-sm backdrop-blur-sm">
                                <option value="title">Title A-Z</option>
                                <option value="author">Author A-Z</option>
                                <option value="genre">Genre</option>
                                <option value="popularity">Popularity</option>
                                <option value="newest">Newest First</option>
                            </select>
                        </div>

                        <!-- Clear Filters -->
                        <div class="filter-group">
                            <button id="clearFilters" class="px-4 py-2 bg-gray-800/50 hover:bg-gray-600/50 text-white rounded-lg transition-all font-medium text-sm backdrop-blur-sm border border-gray-600 hover:border-green-500">
                                <i class="bi bi-arrow-clockwise me-1" style="font-size: 0.9rem;"></i>Clear
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <main id="book-container" class="book-container">
    </main>

    <!-- Results Count -->
    <div class="results-info">
        <p id="resultsCount" class="text-gray-400 text-center text-sm"></p>
    </div>

    <!-- Recommendations Section -->
    <section id="recommendationsSection" class="recommendations-section hidden">
        <div class="container mx-auto px-4 py-12">
            <div class="text-center mb-8">
                <h2 class="text-3xl font-bold text-white mb-3">
                    <i class="bi bi-lightbulb me-3 text-green-500"></i>
                    You May Also Like
                </h2>
                <p class="text-gray-400 text-lg">Discover more audiobooks based on your interests</p>
            </div>
            <div id="recommendationsContainer" class="recommendations-grid">
                <!-- Recommendations will be populated here -->
            </div>
        </div>
    </section>

    <div id="footer-placeholder" class="mt-auto"></div>

    <!-- Share Modal -->
    <div id="shareModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
      <div class="bg-gray-800 rounded-xl p-6 w-full max-w-md mx-4">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-semibold text-white">Share Audiobook</h3>
          <button id="closeShareModal" class="text-gray-400 hover:text-white">
            <i class="bi bi-x-lg"></i>
          </button>
        </div>
        <!-- Book Cover -->
      <div class="flex justify-center mb-4">
        <img id="shareBookCover"
             src=""
             alt="Audiobook Cover"
             class="w-32 h-48 object-cover rounded-lg shadow-lg">
      </div>

      <!-- Book Details -->
      <div class="text-center mb-6">
        <h3 class="text-white font-semibold text-2xl mb-1" id="shareBookTitle">Audiobook Title</h3>
        <p class="text-gray-300 text-base mb-3" id="shareBookAuthor">by Author Name</p>

        <!-- Tagline -->
        <div class="bg-gray-700 rounded-lg p-3 mb-4">
          <p class="text-gray-300 text-sm italic" id="shareBookTagline">
            <!-- Backend Integration Note:
              This will be populated with a short, engaging tagline
              from the book's metadata or AI-generated summary
            -->
            A captivating journey through [genre] that will keep you listening for hours.
          </p>
        </div>

        <!-- Metadata Placeholder (Hidden by default, can be enabled later) -->
        <div class="hidden" id="bookMetadata">
          <!-- Backend Integration Placeholder:
            Future metadata like length, narrator, release date can go here
          -->
          <div class="flex justify-center space-x-4 text-xs text-gray-400">
            <span>⏱️ 8h 45m</span>
            <span>🎙️ Narrator Name</span>
            <span>📅 2023</span>
          </div>
        </div>
      </div>
        <div class="flex">
          <input type="text" id="shareLink" value="" readonly
            class="flex-1 bg-gray-700 text-white p-3 rounded-l-lg focus:outline-none text-sm">
          <button id="copyLinkBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 rounded-r-lg transition-colors">
            Copy Link
          </button>
        </div>
      </div>
    </div>

    <!-- Toast Notification -->
    <div id="toast" class="fixed bottom-6 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-6 py-3 rounded-lg shadow-lg hidden z-50">
      📋 Link copied to clipboard!
    </div>

    <script src="./script.js"></script>
    <script src="./translation.js"></script>
    <script src="explore.js"></script> <!-- Include your JS file -->
    <script src="dynamic-components.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</body>

</html>