Hugging Face's logo

Spaces:
apamplona2011
/
bookmatch
Running

App Files Community
apamplona2011 commited on
Commit
e055fb3
·
verified ·
1 Parent(s): 26c428b

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +282 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Bookmatch
3
- emoji: 🐢
4
- colorFrom: yellow
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: bookmatch
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,282 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Book Recommendation Tool</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .book-card:hover {
11
+ transform: translateY(-5px);
12
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
13
+ }
14
+ .loading-spinner {
15
+ animation: spin 1s linear infinite;
16
+ }
17
+ @keyframes spin {
18
+ 0% { transform: rotate(0deg); }
19
+ 100% { transform: rotate(360deg); }
20
+ }
21
+ </style>
22
+ </head>
23
+ <body class="bg-gray-50 min-h-screen">
24
+ <div class="container mx-auto px-4 py-8">
25
+ <!-- Header -->
26
+ <header class="text-center mb-12">
27
+ <h1 class="text-4xl md:text-5xl font-bold text-indigo-800 mb-4">BookMatch</h1>
28
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">
29
+ Discover your next favorite book based on your preferences, mood, or reading history.
30
+ </p>
31
+ </header>
32
+
33
+ <!-- Main Content -->
34
+ <main>
35
+ <!-- Search Section -->
36
+ <section class="bg-white rounded-xl shadow-lg p-6 mb-12 max-w-3xl mx-auto">
37
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6">What are you in the mood to read?</h2>
38
+
39
+ <div class="mb-6">
40
+ <label for="userInput" class="block text-sm font-medium text-gray-700 mb-2">
41
+ Tell us about your reading preferences:
42
+ </label>
43
+ <textarea
44
+ id="userInput"
45
+ rows="5"
46
+ class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition"
47
+ placeholder="e.g. 'I love mystery novels with strong female protagonists' or 'Looking for sci-fi books similar to Dune'"></textarea>
48
+ </div>
49
+
50
+ <div class="flex flex-col sm:flex-row gap-4">
51
+ <div class="flex-1">
52
+ <label for="genre" class="block text-sm font-medium text-gray-700 mb-2">Preferred Genre</label>
53
+ <select id="genre" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
54
+ <option value="">Any Genre</option>
55
+ <option value="fiction">Fiction</option>
56
+ <option value="mystery">Mystery</option>
57
+ <option value="sci-fi">Science Fiction</option>
58
+ <option value="fantasy">Fantasy</option>
59
+ <option value="romance">Romance</option>
60
+ <option value="historical">Historical Fiction</option>
61
+ <option value="non-fiction">Non-Fiction</option>
62
+ <option value="biography">Biography</option>
63
+ <option value="self-help">Self-Help</option>
64
+ </select>
65
+ </div>
66
+
67
+ <div class="flex-1">
68
+ <label for="length" class="block text-sm font-medium text-gray-700 mb-2">Book Length</label>
69
+ <select id="length" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
70
+ <option value="">Any Length</option>
71
+ <option value="short">Short (under 200 pages)</option>
72
+ <option value="medium">Medium (200-400 pages)</option>
73
+ <option value="long">Long (400+ pages)</option>
74
+ </select>
75
+ </div>
76
+ </div>
77
+
78
+ <div class="mt-8">
79
+ <button id="recommendBtn" class="w-full sm:w-auto px-8 py-3 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition flex items-center justify-center gap-2">
80
+ <i class="fas fa-book-open"></i>
81
+ Get Recommendations
82
+ </button>
83
+ </div>
84
+ </section>
85
+
86
+ <!-- Results Section -->
87
+ <section id="resultsSection" class="hidden">
88
+ <div class="flex justify-between items-center mb-6">
89
+ <h2 class="text-2xl font-semibold text-gray-800">Recommended Books</h2>
90
+ <button id="newSearchBtn" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center gap-1">
91
+ <i class="fas fa-redo"></i>
92
+ New Search
93
+ </button>
94
+ </div>
95
+
96
+ <div id="loadingIndicator" class="hidden text-center py-12">
97
+ <div class="inline-block loading-spinner text-indigo-600 text-4xl mb-4">
98
+ <i class="fas fa-circle-notch"></i>
99
+ </div>
100
+ <p class="text-gray-600">Finding the perfect books for you...</p>
101
+ </div>
102
+
103
+ <div id="recommendationsContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
104
+ <!-- Book cards will be inserted here by JavaScript -->
105
+ </div>
106
+ </section>
107
+
108
+ <!-- Sample Book Card (hidden template) -->
109
+ <div id="bookCardTemplate" class="hidden">
110
+ <div class="book-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
111
+ <div class="h-48 bg-gray-200 flex items-center justify-center">
112
+ <i class="fas fa-book text-5xl text-gray-400"></i>
113
+ </div>
114
+ <div class="p-5">
115
+ <h3 class="text-xl font-semibold text-gray-800 mb-1">Book Title</h3>
116
+ <p class="text-gray-600 text-sm mb-2">by <span class="author">Author Name</span></p>
117
+ <div class="flex flex-wrap gap-1 mb-3">
118
+ <span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">Genre</span>
119
+ <span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">Length</span>
120
+ </div>
121
+ <p class="text-gray-700 text-sm mb-4 line-clamp-3">Book description goes here with a brief summary of what the book is about...</p>
122
+ <div class="flex justify-between items-center">
123
+ <span class="text-sm text-gray-500">⭐ 4.5</span>
124
+ <a href="#" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium">More details</a>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </main>
130
+
131
+ <!-- Footer -->
132
+ <footer class="mt-16 text-center text-gray-500 text-sm">
133
+ <p>© 2023 BookMatch. All rights reserved.</p>
134
+ </footer>
135
+ </div>
136
+
137
+ <script>
138
+ document.addEventListener('DOMContentLoaded', function() {
139
+ const recommendBtn = document.getElementById('recommendBtn');
140
+ const newSearchBtn = document.getElementById('newSearchBtn');
141
+ const resultsSection = document.getElementById('resultsSection');
142
+ const loadingIndicator = document.getElementById('loadingIndicator');
143
+ const recommendationsContainer = document.getElementById('recommendationsContainer');
144
+ const bookCardTemplate = document.getElementById('bookCardTemplate');
145
+ const userInput = document.getElementById('userInput');
146
+
147
+ // Sample book data (replace with your database query results)
148
+ const sampleBooks = [
149
+ {
150
+ title: "The Silent Patient",
151
+ author: "Alex Michaelides",
152
+ genre: "Psychological Thriller",
153
+ length: "Medium",
154
+ rating: 4.5,
155
+ description: "A woman shoots her husband and then never speaks another word. A criminal psychotherapist tries to unravel the mystery."
156
+ },
157
+ {
158
+ title: "Project Hail Mary",
159
+ author: "Andy Weir",
160
+ genre: "Science Fiction",
161
+ length: "Long",
162
+ rating: 4.8,
163
+ description: "An astronaut wakes up alone on a spaceship with no memory of who he is or how he got there. His mission is to save Earth from disaster."
164
+ },
165
+ {
166
+ title: "Where the Crawdads Sing",
167
+ author: "Delia Owens",
168
+ genre: "Literary Fiction",
169
+ length: "Medium",
170
+ rating: 4.7,
171
+ description: "A murder mystery and coming-of-age story set in the marshes of North Carolina, following a girl who raised herself in the wild."
172
+ },
173
+ {
174
+ title: "Atomic Habits",
175
+ author: "James Clear",
176
+ genre: "Self-Help",
177
+ length: "Medium",
178
+ rating: 4.6,
179
+ description: "A guide to building good habits and breaking bad ones, with practical strategies for making small changes that yield remarkable results."
180
+ },
181
+ {
182
+ title: "The Midnight Library",
183
+ author: "Matt Haig",
184
+ genre: "Fantasy Fiction",
185
+ length: "Medium",
186
+ rating: 4.2,
187
+ description: "Between life and death there is a library. Each book provides a chance to try another life you might have lived."
188
+ },
189
+ {
190
+ title: "Educated",
191
+ author: "Tara Westover",
192
+ genre: "Memoir",
193
+ length: "Medium",
194
+ rating: 4.7,
195
+ description: "A memoir about a woman who grew up in a survivalist family in Idaho and went on to earn a PhD from Cambridge University."
196
+ }
197
+ ];
198
+
199
+ // Show recommendations
200
+ recommendBtn.addEventListener('click', function() {
201
+ const userText = userInput.value.trim();
202
+
203
+ if (!userText) {
204
+ alert("Please describe what kind of books you're looking for.");
205
+ return;
206
+ }
207
+
208
+ // Show loading indicator
209
+ resultsSection.classList.remove('hidden');
210
+ loadingIndicator.classList.remove('hidden');
211
+ recommendationsContainer.innerHTML = '';
212
+
213
+ // Simulate API/database call with timeout
214
+ setTimeout(() => {
215
+ loadingIndicator.classList.add('hidden');
216
+
217
+ // Filter books based on selected genre if any
218
+ const selectedGenre = document.getElementById('genre').value;
219
+ const selectedLength = document.getElementById('length').value;
220
+
221
+ let filteredBooks = sampleBooks;
222
+
223
+ if (selectedGenre) {
224
+ filteredBooks = filteredBooks.filter(book =>
225
+ book.genre.toLowerCase().includes(selectedGenre.toLowerCase()));
226
+ }
227
+
228
+ if (selectedLength) {
229
+ filteredBooks = filteredBooks.filter(book => {
230
+ if (selectedLength === 'short') return book.length === 'Short';
231
+ if (selectedLength === 'medium') return book.length === 'Medium';
232
+ if (selectedLength === 'long') return book.length === 'Long';
233
+ return true;
234
+ });
235
+ }
236
+
237
+ // Display recommendations
238
+ if (filteredBooks.length === 0) {
239
+ recommendationsContainer.innerHTML = `
240
+ <div class="col-span-full text-center py-8">
241
+ <i class="fas fa-book-open text-4xl text-gray-400 mb-4"></i>
242
+ <h3 class="text-xl font-medium text-gray-700 mb-2">No books found matching your criteria</h3>
243
+ <p class="text-gray-500">Try broadening your search or removing some filters.</p>
244
+ </div>
245
+ `;
246
+ } else {
247
+ filteredBooks.forEach(book => {
248
+ const card = bookCardTemplate.cloneNode(true);
249
+ card.classList.remove('hidden');
250
+
251
+ card.querySelector('h3').textContent = book.title;
252
+ card.querySelector('.author').textContent = book.author;
253
+ card.querySelector('.book-card .line-clamp-3').textContent = book.description;
254
+
255
+ // Update genre/length tags
256
+ const tagsContainer = card.querySelector('.flex-wrap');
257
+ tagsContainer.innerHTML = `
258
+ <span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">${book.genre}</span>
259
+ <span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">${book.length}</span>
260
+ `;
261
+
262
+ // Update rating
263
+ card.querySelector('span').textContent = `⭐ ${book.rating}`;
264
+
265
+ recommendationsContainer.appendChild(card);
266
+ });
267
+ }
268
+ }, 1500);
269
+ });
270
+
271
+ // New search button
272
+ newSearchBtn.addEventListener('click', function() {
273
+ resultsSection.classList.add('hidden');
274
+ userInput.value = '';
275
+ document.getElementById('genre').value = '';
276
+ document.getElementById('length').value = '';
277
+ userInput.focus();
278
+ });
279
+ });
280
+ </script>
281
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=apamplona2011/bookmatch" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
282
+ </html>