Hugging Face's logo

Spaces:
Melskay
/
howella
Running

App Files Community
Melskay commited on
Commit
1322e9e
·
verified ·
1 Parent(s): d730497

Первая глава глава круг - Follow Up Deployment

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +371 -19
  3. prompts.txt +3 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Howella
3
- emoji: 🏆
4
  colorFrom: gray
5
- colorTo: indigo
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: howella
3
+ emoji: 🐳
4
  colorFrom: gray
5
+ colorTo: red
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,371 @@
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>Fantasy Stories Selection</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
+ .story-card {
11
+ transition: all 0.3s ease;
12
+ transform-style: preserve-3d;
13
+ perspective: 1000px;
14
+ }
15
+ .story-card:hover {
16
+ transform: scale(1.05) translateY(-5px);
17
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
18
+ }
19
+ .story-card.selected {
20
+ transform: scale(1.1);
21
+ border: 3px solid #8b5cf6;
22
+ box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
23
+ }
24
+ .magic-sparkle {
25
+ position: absolute;
26
+ width: 5px;
27
+ height: 5px;
28
+ border-radius: 50%;
29
+ background: white;
30
+ opacity: 0;
31
+ pointer-events: none;
32
+ }
33
+ .prose-invert {
34
+ color: #e5e7eb;
35
+ }
36
+ .prose-invert a {
37
+ color: #8b5cf6;
38
+ }
39
+ @keyframes fadeIn {
40
+ from { opacity: 0; }
41
+ to { opacity: 1; }
42
+ }
43
+ .fade-in {
44
+ animation: fadeIn 0.5s ease-in;
45
+ }
46
+ </style>
47
+ </head>
48
+ <body class="bg-gray-900 text-white min-h-screen font-sans">
49
+ <div class="container mx-auto px-4 py-12">
50
+ <!-- Header -->
51
+ <header class="text-center mb-16">
52
+ <h1 class="text-4xl md:text-6xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-blue-500 mb-4">Fantasy Tales</h1>
53
+ <p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto">Step into worlds of magic, mystery and adventure. Choose your next epic journey.</p>
54
+ <div class="mt-8 flex justify-center">
55
+ <div class="relative w-12 h-12 animate-bounce">
56
+ <div class="absolute inset-0 bg-purple-500 rounded-full opacity-75 animate-ping"></div>
57
+ <div class="absolute inset-1 bg-purple-600 rounded-full flex items-center justify-center">
58
+ <i class="fas fa-chevron-down text-white"></i>
59
+ </div>
60
+ </div>
61
+ </div>
62
+ </header>
63
+
64
+ <!-- Main Content -->
65
+ <main>
66
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="stories-container">
67
+ <!-- Story 1 -->
68
+ <div class="story-card bg-gray-800 rounded-xl p-6 cursor-pointer relative overflow-hidden shadow-lg group hover:bg-gray-700 transition-colors duration-300" onclick="selectStory(1)">
69
+ <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-500 to-blue-500"></div>
70
+ <div class="flex items-start mb-4">
71
+ <div class="bg-purple-600 text-white rounded-lg p-3 mr-4">
72
+ <i class="fas fa-book-open text-xl"></i>
73
+ </div>
74
+ <div>
75
+ <h3 class="text-xl font-bold text-purple-300">The Circle</h3>
76
+ <p class="text-sm text-gray-400">by Elena Shadowborn</p>
77
+ </div>
78
+ </div>
79
+ <p class="text-gray-300 mb-4">When a young mage discovers an ancient prophecy, they must embark on a quest to reunite the lost fragments of the Circle of Elements before the world falls into eternal darkness.</p>
80
+ <div class="flex flex-wrap gap-2 mb-4">
81
+ <span class="px-2 py-1 bg-gray-700 rounded-full text-xs text-purple-300">Magic</span>
82
+ <span class="px-2 py-1 bg-gray-700 rounded-full text-xs text-blue-300">Quest</span>
83
+ <span class="px-2 py-1 bg-gray-700 rounded-full text-xs text-green-300">Prophecy</span>
84
+ </div>
85
+ <div class="flex justify-between items-center">
86
+ <div class="text-yellow-400">
87
+ <i class="fas fa-star"></i>
88
+ <i class="fas fa-star"></i>
89
+ <i class="fas fa-star"></i>
90
+ <i class="fas fa-star"></i>
91
+ <i class="fas fa-star-half-alt"></i>
92
+ <span class="ml-1 text-sm">4.7</span>
93
+ </div>
94
+ <button class="px-3 py-1 bg-purple-600 hover:bg-purple-700 rounded-full text-sm transition-colors duration-300 flex items-center">
95
+ <i class="fas fa-book-reader mr-1"></i> Read
96
+ </button>
97
+ </div>
98
+ <div class="absolute bottom-0 right-0 opacity-30 group-hover:opacity-60 transition-opacity">
99
+ <i class="fas fa-hat-wizard text-6xl text-purple-500"></i>
100
+ </div>
101
+ </div>
102
+
103
+ <!-- Story 2 -->
104
+ <div class="story-card bg-gray-800 rounded-xl p-6 cursor-pointer relative overflow-hidden shadow-lg group hover:bg-gray-700 transition-colors duration-300" onclick="selectStory(2)">
105
+ <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-green-500 to-teal-500"></div>
106
+ <div class="flex items-start mb-4">
107
+ <div class="bg-green-600 text-white rounded-lg p-3 mr-4">
108
+ <i class="fas fa-dragon text-xl"></i>
109
+ </div>
110
+ <div>
111
+ <h3 class="text-xl font-bold text-green-300">Dragon's Oath</h3>
112
+ <p class="text-sm text-gray-400">by Marcus Fireblade</p>
113
+ </div>
114
+ </div>
115
+ <p class="text-gray-300 mb-4">A dragon rider must choose between loyalty to the royal family or to their bonded dragon when ancient secrets about the origins of their society come to light.</p>
116
+ <div class="flex flex-wrap gap-2 mb-4">
117
+ <span class="px-2 py-1 bg-gray-700 rounded-full text-xs text-green-300">Dragons</span>
118
+ <span class="px-2 py-1 bg-gray-700 rounded-full text-xs text-red-300">Conflict</span>
119
+ <span class="px-2 py-1 bg-gray-700 rounded-full text-xs text-yellow-300">Royalty</span>
120
+ </div>
121
+ <div class="flex justify-between items-center">
122
+ <div class="text-yellow-400">
123
+ <i class="fas fa-star"></i>
124
+ <i class="fas fa-star"></i>
125
+ <i class="fas fa-star"></i>
126
+ <i class="fas fa-star"></i>
127
+ <i class="fas fa-star"></i>
128
+ <span class="ml-1 text-sm">5.0</span>
129
+ </div>
130
+ <button class="px-3 py-1 bg-green-600 hover:bg-green-700 rounded-full text-sm transition-colors duration-300 flex items-center">
131
+ <i class="fas fa-book-reader mr-1"></i> Read
132
+ </button>
133
+ </div>
134
+ <div class="absolute bottom-0 right-0 opacity-30 group-hover:opacity-60 transition-opacity">
135
+ <i class="fas fa-dragon text-6xl text-green-500"></i>
136
+ </div>
137
+ </div>
138
+
139
+ <!-- Story 3 -->
140
+ <div class="story-card bg-gray-800 rounded-xl p-6 cursor-pointer relative overflow-hidden shadow-lg group hover:bg-gray-700 transition-colors duration-300" onclick="selectStory(3)">
141
+ <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 to-indigo-500"></div>
142
+ <div class="flex items-start mb-4">
143
+ <div class="bg-blue-600 text-white rounded-lg p-3 mr-4">
144
+ <i class="fas fa-mountain text-xl"></i>
145
+ </div>
146
+ <div>
147
+ <h3 class="text-xl font-bold text-blue-300">The Lost Realms</h3>
148
+ <p class="text-sm text-gray-400">by Sophia Moonwhisper</p>
149
+ </div>
150
+ </div>
151
+ <p class="text-gray-300 mb-4">An archaeologist in a world where magic permeates history discovers portals to forgotten civilizations that may hold the key to preventing an impending magical apocalypse.</p>
152
+ <div class="flex flex-wrap gap-2 mb-4">
153
+ <span class="px-2 py-1 bg-gray-700 rounded-full text-xs text-blue-300">Exploration</span>
154
+ <span class="px-2 py-1 bg-gray-700 rounded-full text-xs text-indigo-300">Ancient</span>
155
+ <span class="px-2 py-1 bg-gray-700 rounded-full text-xs text-teal-300">Adventure</span>
156
+ </div>
157
+ <div class="flex justify-between items-center">
158
+ <div class="text-yellow-400">
159
+ <i class="fas fa-star"></i>
160
+ <i class="fas fa-star"></i>
161
+ <i class="fas fa-star"></i>
162
+ <i class="fas fa-star"></i>
163
+ <i class="far fa-star"></i>
164
+ <span class="ml-1 text-sm">4.3</span>
165
+ </div>
166
+ <button class="px-3 py-1 bg-blue-600 hover:bg-blue-700 rounded-full text-sm transition-colors duration-300 flex items-center">
167
+ <i class="fas fa-book-reader mr-1"></i> Read
168
+ </button>
169
+ </div>
170
+ <div class="absolute bottom-0 right-0 opacity-30 group-hover:opacity-60 transition-opacity">
171
+ <i class="fas fa-scroll text-6xl text-blue-500"></i>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <!-- Selected Story Display -->
177
+ <div id="selected-story-display" class="mt-16 hidden">
178
+ <div class="bg-gray-800 rounded-xl p-8 shadow-2xl border-l-8 border-purple-600 fade-in">
179
+ <h2 class="text-3xl font-bold mb-2" id="selected-title">The Circle</h2>
180
+ <p class="text-gray-400 mb-4" id="selected-author">by Elena Shadowborn</p>
181
+ <p class="text-lg text-gray-300 mb-6" id="selected-description">When a young mage discovers an ancient prophecy, they must embark on a quest to reunite the lost fragments of the Circle of Elements before the world falls into eternal darkness.</p>
182
+ <div class="flex flex-wrap gap-3 mb-6" id="selected-tags">
183
+ <span class="px-3 py-1 bg-gray-700 rounded-full text-sm text-purple-300">Magic</span>
184
+ <span class="px-3 py-1 bg-gray-700 rounded-full text-sm text-blue-300">Quest</span>
185
+ <span class="px-3 py-1 bg-gray-700 rounded-full text-sm text-green-300">Prophecy</span>
186
+ </div>
187
+ <div class="flex justify-between items-center">
188
+ <div class="text-yellow-400 text-xl" id="selected-rating">
189
+ <i class="fas fa-star"></i>
190
+ <i class="fas fa-star"></i>
191
+ <i class="fas fa-star"></i>
192
+ <i class="fas fa-star"></i>
193
+ <i class="fas fa-star-half-alt"></i>
194
+ <span class="ml-1">4.7/5</span>
195
+ </div>
196
+ <div>
197
+ <button id="begin-reading-btn" class="px-6 py-2 bg-purple-600 hover:bg-purple-700 rounded-full font-medium transition-colors duration-300 flex items-center mr-3">
198
+ <i class="fas fa-book-open mr-2"></i> Begin Reading
199
+ </button>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </main>
205
+
206
+ <!-- Footer -->
207
+ <footer class="mt-24 text-center text-gray-500 text-sm">
208
+ <div class="flex justify-center space-x-6 mb-4">
209
+ <a href="#" class="hover:text-white transition-colors"><i class="fab fa-facebook"></i></a>
210
+ <a href="#" class="hover:text-white transition-colors"><i class="fab fa-twitter"></i></a>
211
+ <a href="#" class="hover:text-white transition-colors"><i class="fab fa-instagram"></i></a>
212
+ <a href="#" class="hover:text-white transition-colors"><i class="fab fa-goodreads"></i></a>
213
+ </div>
214
+ <p>© 2023 Fantasy Tales Library. All rights reserved.</p>
215
+ <p class="mt-2">Created with <i class="fas fa-heart text-purple-500"></i> for fantasy lovers</p>
216
+ </footer>
217
+ </div>
218
+
219
+ <script>
220
+ // Story data
221
+ const stories = [
222
+ {
223
+ id: 1,
224
+ title: "The Circle",
225
+ author: "by Elena Shadowborn",
226
+ description: "When a young mage discovers an ancient prophecy, they must embark on a quest to reunite the lost fragments of the Circle of Elements before the world falls into eternal darkness.",
227
+ tags: ["Magic", "Quest", "Prophecy"],
228
+ rating: 4.7,
229
+ color: "purple"
230
+ },
231
+ {
232
+ id: 2,
233
+ title: "Dragon's Oath",
234
+ author: "by Marcus Fireblade",
235
+ description: "A dragon rider must choose between loyalty to the royal family or to their bonded dragon when ancient secrets about the origins of their society come to light.",
236
+ tags: ["Dragons", "Conflict", "Royalty"],
237
+ rating: 5.0,
238
+ color: "green"
239
+ },
240
+ {
241
+ id: 3,
242
+ title: "The Lost Realms",
243
+ author: "by Sophia Moonwhisper",
244
+ description: "An archaeologist in a world where magic permeates history discovers portals to forgotten civilizations that may hold the key to preventing an impending magical apocalypse.",
245
+ tags: ["Exploration", "Ancient", "Adventure"],
246
+ rating: 4.3,
247
+ color: "blue"
248
+ }
249
+ ];
250
+
251
+ // Select story function
252
+ function selectStory(storyId) {
253
+ // Remove selected class from all cards
254
+ document.querySelectorAll('.story-card').forEach(card => {
255
+ card.classList.remove('selected');
256
+ });
257
+
258
+ // Add selected class to clicked card
259
+ event.currentTarget.classList.add('selected');
260
+
261
+ // Get selected story data
262
+ const selectedStory = stories.find(story => story.id === storyId);
263
+
264
+ // Update selected story display
265
+ document.getElementById('selected-title').textContent = selectedStory.title;
266
+ document.getElementById('selected-author').textContent = selectedStory.author;
267
+ document.getElementById('selected-description').textContent = selectedStory.description;
268
+
269
+ // Update tags
270
+ const tagsContainer = document.getElementById('selected-tags');
271
+ tagsContainer.innerHTML = '';
272
+ selectedStory.tags.forEach(tag => {
273
+ const span = document.createElement('span');
274
+ span.className = `px-3 py-1 bg-gray-700 rounded-full text-sm text-${selectedStory.color}-300`;
275
+ span.textContent = tag;
276
+ tagsContainer.appendChild(span);
277
+ });
278
+
279
+ // Update rating
280
+ const ratingContainer = document.getElementById('selected-rating');
281
+ ratingContainer.innerHTML = '';
282
+
283
+ const fullStars = Math.floor(selectedStory.rating);
284
+ const hasHalfStar = selectedStory.rating % 1 >= 0.5;
285
+ const emptyStars = 5 - fullStars - (hasHalfStar ? 1 : 0);
286
+
287
+ for (let i = 0; i < fullStars; i++) {
288
+ const star = document.createElement('i');
289
+ star.className = 'fas fa-star';
290
+ ratingContainer.appendChild(star);
291
+ }
292
+
293
+ if (hasHalfStar) {
294
+ const halfStar = document.createElement('i');
295
+ halfStar.className = 'fas fa-star-half-alt';
296
+ ratingContainer.appendChild(halfStar);
297
+ }
298
+
299
+ for (let i = 0; i < emptyStars; i++) {
300
+ const emptyStar = document.createElement('i');
301
+ emptyStar.className = 'far fa-star';
302
+ ratingContainer.appendChild(emptyStar);
303
+ }
304
+
305
+ const ratingText = document.createElement('span');
306
+ ratingText.className = 'ml-1';
307
+ ratingText.textContent = `${selectedStory.rating}/5`;
308
+ ratingContainer.appendChild(ratingText);
309
+
310
+ // Update border color
311
+ const display = document.getElementById('selected-story-display');
312
+ display.className = display.className.replace(/border-\w+-600/g, `border-${selectedStory.color}-600`);
313
+
314
+ // Show selected story display
315
+ document.getElementById('selected-story-display').classList.remove('hidden');
316
+
317
+ // Scroll to selected story display
318
+ document.getElementById('selected-story-display').scrollIntoView({ behavior: 'smooth' });
319
+
320
+ // Add magic sparkle effect
321
+ createSparkleEffect(event);
322
+
323
+ // Add click handler for Begin Reading button
324
+ document.getElementById('begin-reading-btn').onclick = function() {
325
+ if (selectedStory.id === 1) { // The Circle
326
+ alert("Opening The Circle - Chapter 1: The Prophecy Awakens");
327
+ // In a real implementation, this would redirect to the reading page
328
+ }
329
+ };
330
+ }
331
+
332
+ // Create magical sparkle effect
333
+ function createSparkleEffect(event) {
334
+ for (let i = 0; i < 10; i++) {
335
+ const sparkle = document.createElement('div');
336
+ sparkle.className = 'magic-sparkle';
337
+
338
+ // Position sparkle around click location
339
+ const x = event.clientX + (Math.random() - 0.5) * 50;
340
+ const y = event.clientY + (Math.random() - 0.5) * 50;
341
+
342
+ sparkle.style.left = `${x}px`;
343
+ sparkle.style.top = `${y}px`;
344
+ sparkle.style.width = `${Math.random() * 4 + 2}px`;
345
+ sparkle.style.height = sparkle.style.width;
346
+
347
+ // Random color between purple, blue, and green
348
+ const colors = ['#8b5cf6', '#3b82f6', '#10b981'];
349
+ sparkle.style.background = colors[Math.floor(Math.random() * colors.length)];
350
+
351
+ document.body.appendChild(sparkle);
352
+
353
+ // Animate sparkle
354
+ const animations = [
355
+ { transform: `translate(0, 0) scale(1)`, opacity: '0.8' },
356
+ { transform: `translate(${(Math.random() - 0.5) * 30}px, ${(Math.random() - 0.5) * 30}px) scale(0.2)`, opacity: '0' }
357
+ ];
358
+
359
+ const timing = {
360
+ duration: Math.random() * 300 + 500,
361
+ iterations: 1
362
+ };
363
+
364
+ sparkle.animate(animations, timing).onfinish = () => {
365
+ sparkle.remove();
366
+ };
367
+ }
368
+ }
369
+ </script>
370
+ <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=Melskay/howella" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
371
+ </html>
prompts.txt ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ Напиши выбор историй в жанре фэнтези. 1 - «the Circle» 2 - ... 3 - ...
2
+ Начать читать книгу круг
3
+ Первая глава глава круг