GMA2 commited on
Commit
f3f8507
·
verified ·
1 Parent(s): fffe61a

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +403 -320
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,71 +3,174 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>The Pomegranate Cafe - Ancient Jerusalem</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
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
10
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
11
  <style>
12
- @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=EB+Garamond:wght@400;500&display=swap');
13
 
14
  body {
15
- font-family: 'EB Garamond', serif;
16
- background-color: #f5f1e6;
17
- color: #3a3226;
18
  overflow-x: hidden;
 
19
  }
20
 
21
  .header-font {
22
- font-family: 'Cinzel', serif;
23
  }
24
 
25
- .ancient-bg {
26
- background-image: url('https://images.unsplash.com/photo-1605106702734-205df224ecce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
 
 
 
 
 
 
 
 
 
27
  background-size: cover;
28
  background-position: center;
29
- background-blend-mode: overlay;
30
- background-color: rgba(90, 60, 30, 0.7);
31
  }
32
 
33
- .pomegranate-icon {
34
- color: #a8323a;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
35
  }
36
 
37
- .roman-border {
38
- border: 2px solid #a8323a;
39
- border-radius: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
40
  position: relative;
 
 
41
  }
42
 
43
- .roman-border:before, .roman-border:after {
44
  content: '';
45
  position: absolute;
 
 
46
  width: 20px;
47
  height: 20px;
48
- border: 2px solid #a8323a;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
49
  }
50
 
51
- .roman-border:before {
52
- top: -10px;
53
- left: -10px;
54
- border-right: none;
55
- border-bottom: none;
56
  }
57
 
58
- .roman-border:after {
59
- bottom: -10px;
60
- right: -10px;
61
- border-left: none;
62
- border-top: none;
 
 
 
 
 
 
 
 
 
 
 
 
 
63
  }
64
 
 
65
  .scroll-down {
66
  position: absolute;
67
- bottom: 20px;
68
  left: 50%;
69
  transform: translateX(-50%);
70
  animation: bounce 2s infinite;
 
71
  }
72
 
73
  @keyframes bounce {
@@ -75,218 +178,184 @@
75
  transform: translateY(0) translateX(-50%);
76
  }
77
  40% {
78
- transform: translateY(-20px) translateX(-50%);
79
  }
80
  60% {
81
- transform: translateY(-10px) translateX(-50%);
82
  }
83
  }
84
 
85
- .product-card {
86
- transition: all 0.3s ease;
87
- background: rgba(255, 255, 255, 0.8);
88
- }
89
-
90
- .product-card:hover {
91
- transform: translateY(-10px);
92
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
93
- }
94
-
95
- .papyrus-bg {
96
- background-image: url('https://images.unsplash.com/photo-1605106702734-205df224ecce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
97
- background-size: cover;
98
- background-position: center;
99
- background-color: #f5f1e6;
100
- background-blend-mode: overlay;
101
- }
102
-
103
- /* Scroll snap sections */
104
- .scroll-section {
105
- height: 100vh;
106
- width: 100%;
107
- position: relative;
108
- overflow: hidden;
109
- }
110
-
111
- /* Parallax elements */
112
- .parallax-bg {
113
- position: absolute;
114
- width: 100%;
115
- height: 100%;
116
- will-change: transform;
117
- }
118
-
119
- /* Fade-in animation */
120
- .fade-in {
121
- opacity: 0;
122
- transform: translateY(20px);
123
- transition: all 0.8s ease;
124
- }
125
-
126
- .fade-in.visible {
127
- opacity: 1;
128
- transform: translateY(0);
129
- }
130
-
131
- /* Section content wrapper */
132
- .section-content {
133
- position: relative;
134
- z-index: 2;
135
- height: 100%;
136
- display: flex;
137
- flex-direction: column;
138
- justify-content: center;
139
- }
140
-
141
- /* Scroll progress indicator */
142
- .scroll-progress {
143
- position: fixed;
144
- top: 0;
145
- left: 0;
146
- width: 0%;
147
- height: 4px;
148
- background-color: #a8323a;
149
- z-index: 1000;
150
- transition: width 0.1s;
151
  }
152
  </style>
153
  </head>
154
  <body>
 
155
  <div class="scroll-progress"></div>
156
 
157
- <!-- Hero Section -->
158
- <section class="scroll-section ancient-bg">
159
- <div class="parallax-bg"></div>
160
- <div class="absolute inset-0 bg-black bg-opacity-40"></div>
161
- <div class="section-content px-4 max-w-4xl mx-auto text-center">
162
- <h1 class="header-font text-5xl md:text-7xl mb-6 fade-in">THE POMEGRANATE CAFE</h1>
163
- <p class="text-xl md:text-2xl mb-8 italic fade-in" style="transition-delay: 0.2s">"A taste of ancient Jerusalem in every sip and word"</p>
164
- <div class="flex flex-col md:flex-row justify-center gap-4 fade-in" style="transition-delay: 0.4s">
165
- <a href="#products" class="bg-[#a8323a] hover:bg-[#8a292f] text-white px-8 py-3 text-lg font-semibold transition duration-300 roman-border scroll-link">
166
- Explore Our Offerings
167
- </a>
168
- <a href="#about" class="bg-transparent hover:bg-white hover:text-[#3a3226] text-white border-2 border-white px-8 py-3 text-lg font-semibold transition duration-300 scroll-link">
169
- Our Story
170
- </a>
171
- </div>
 
 
 
 
 
 
 
 
 
 
172
  </div>
173
- <div class="scroll-down">
174
- <i class="fas fa-chevron-down text-white text-2xl"></i>
175
  </div>
 
176
  </section>
177
-
178
- <!-- Products Section -->
179
- <section id="products" class="scroll-section bg-[#f5f1e6]">
180
- <div class="section-content py-20 px-4">
181
- <div class="max-w-6xl mx-auto">
182
- <h2 class="header-font text-4xl md:text-5xl text-center mb-16 text-[#3a3226] fade-in">Our Sacred Offerings</h2>
183
-
184
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
185
- <!-- Audiobook -->
186
- <div class="product-card roman-border p-6 text-center fade-in" style="transition-delay: 0.2s">
187
- <div class="pomegranate-icon mb-4">
188
- <i class="fas fa-headphones text-5xl"></i>
189
- </div>
190
- <h3 class="header-font text-2xl mb-3">The Ancient Scrolls (Audiobook)</h3>
191
- <p class="mb-4">Immerse yourself in the wisdom of Jerusalem 33 AD, narrated by our finest storytellers.</p>
192
- <button class="bg-[#a8323a] hover:bg-[#8a292f] text-white px-6 py-2 w-full transition duration-300">
193
- Purchase - 29 Silver Denarii
194
- </button>
195
- </div>
196
-
197
- <!-- Digital Book -->
198
- <div class="product-card roman-border p-6 text-center fade-in" style="transition-delay: 0.4s">
199
- <div class="pomegranate-icon mb-4">
200
- <i class="fas fa-scroll text-5xl"></i>
201
- </div>
202
- <h3 class="header-font text-2xl mb-3">The Sacred Texts (Digital)</h3>
203
- <p class="mb-4">Read the ancient wisdom on your modern tablet, as if the parchment was in your hands.</p>
204
- <button class="bg-[#a8323a] hover:bg-[#8a292f] text-white px-6 py-2 w-full transition duration-300">
205
- Purchase - 19 Silver Denarii
206
- </button>
207
- </div>
208
-
209
- <!-- Coffee -->
210
- <div class="product-card roman-border p-6 text-center fade-in" style="transition-delay: 0.6s">
211
- <div class="pomegranate-icon mb-4">
212
- <i class="fas fa-mug-hot text-5xl"></i>
213
- </div>
214
- <h3 class="header-font text-2xl mb-3">Jerusalem Blend Coffee</h3>
215
- <p class="mb-4">A rich blend of spices and coffee beans, prepared as it was in the Roman Empire.</p>
216
- <button class="bg-[#a8323a] hover:bg-[#8a292f] text-white px-6 py-2 w-full transition duration-300">
217
- Purchase - 7 Silver Denarii
218
- </button>
219
- </div>
220
- </div>
221
-
222
- <div class="mt-16 text-center fade-in" style="transition-delay: 0.8s">
223
- <a href="#" class="inline-block border-2 border-[#3a3226] hover:bg-[#3a3226] hover:text-white px-8 py-3 text-lg font-semibold transition duration-300">
224
- View All Offerings
225
- </a>
226
- </div>
227
  </div>
228
  </div>
229
  </section>
230
-
231
- <!-- About Section -->
232
- <section id="about" class="scroll-section papyrus-bg">
233
- <div class="parallax-bg"></div>
234
- <div class="absolute inset-0 bg-[#f5f1e6] bg-opacity-80"></div>
235
- <div class="section-content py-20 px-4">
236
- <div class="max-w-4xl mx-auto">
237
- <h2 class="header-font text-4xl md:text-5xl text-center mb-12 text-[#3a3226] fade-in">Our Story</h2>
 
 
 
 
 
 
 
 
 
 
 
238
 
239
- <div class="roman-border p-8 bg-white bg-opacity-90 mb-8 fade-in" style="transition-delay: 0.2s">
240
- <p class="text-lg mb-4">In the heart of ancient Jerusalem, during the time of the Roman Empire, The Pomegranate Cafe was a haven for scholars, travelers, and seekers of wisdom.</p>
241
- <p class="text-lg mb-4">Today, we recreate that experience - blending the rich traditions of 33 AD with modern comforts. Our cafe is more than a place to drink coffee; it's a portal to another time.</p>
242
- <p class="text-lg">Each product we offer is carefully crafted to transport you to the streets of Jerusalem, where Roman soldiers walked alongside Jewish scholars, and where ideas flowed as freely as our spiced coffee.</p>
243
  </div>
244
 
245
- <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
246
- <div class="roman-border p-6 bg-white bg-opacity-90 fade-in" style="transition-delay: 0.4s">
247
- <h3 class="header-font text-2xl mb-4 text-[#a8323a]">Our Mission</h3>
248
- <p>To preserve and share the wisdom of the ancient world through exceptional coffee and literature, creating a bridge between past and present.</p>
249
- </div>
250
- <div class="roman-border p-6 bg-white bg-opacity-90 fade-in" style="transition-delay: 0.6s">
251
- <h3 class="header-font text-2xl mb-4 text-[#a8323a]">Our Vision</h3>
252
- <p>A world where modern people can experience the depth and richness of ancient Jerusalem's intellectual and culinary traditions.</p>
253
- </div>
254
  </div>
255
  </div>
 
 
256
  </div>
257
  </section>
258
-
259
- <!-- Contact Section -->
260
- <section class="scroll-section ancient-bg">
261
- <div class="parallax-bg"></div>
262
- <div class="absolute inset-0 bg-black bg-opacity-60"></div>
263
- <div class="section-content py-20 px-4 text-center">
264
- <div class="max-w-4xl mx-auto">
265
- <h2 class="header-font text-4xl md:text-5xl mb-8 fade-in">Visit Our Oasis</h2>
266
- <p class="text-xl mb-8 fade-in" style="transition-delay: 0.2s">Send a messenger pigeon or visit us in the Upper City of Jerusalem</p>
267
-
268
- <div class="roman-border p-8 inline-block text-left bg-black bg-opacity-40 fade-in" style="transition-delay: 0.4s">
269
- <div class="mb-6">
270
- <h3 class="header-font text-2xl mb-2 text-[#a8323a]">The Pomegranate Cafe</h3>
271
- <p>Near the Roman Antonia Fortress</p>
272
- <p>Jerusalem, Judea 33 AD</p>
273
  </div>
274
-
275
- <div class="mb-6">
276
- <h3 class="header-font text-2xl mb-2 text-[#a8323a]">Send a Message</h3>
277
- <p>pomegranate@jerusalem.cafe</p>
 
 
 
 
 
 
278
  </div>
279
-
280
- <div>
281
- <h3 class="header-font text-2xl mb-4 text-[#a8323a]">Follow Our Scrolls</h3>
282
- <div class="flex justify-center gap-4">
283
- <a href="#" class="text-white hover:text-[#a8323a] text-2xl"><i class="fab fa-facebook"></i></a>
284
- <a href="#" class="text-white hover:text-[#a8323a] text-2xl"><i class="fab fa-twitter"></i></a>
285
- <a href="#" class="text-white hover:text-[#a8323a] text-2xl"><i class="fab fa-instagram"></i></a>
 
 
286
  </div>
287
  </div>
288
  </div>
289
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
290
  </div>
291
  </section>
292
 
@@ -294,127 +363,141 @@
294
  // Initialize GSAP and ScrollTrigger
295
  gsap.registerPlugin(ScrollTrigger);
296
 
297
- // Set up smooth scrolling for the entire page
298
- function setupSmoothScrolling() {
299
- const lenis = new Lenis({
300
- duration: 1.2,
301
- easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
302
- smoothWheel: true
 
 
 
 
 
 
 
 
303
  });
304
-
305
- function raf(time) {
306
- lenis.raf(time);
307
- requestAnimationFrame(raf);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
308
  }
309
-
310
- requestAnimationFrame(raf);
311
-
312
- // Update scroll progress indicator
313
- lenis.on('scroll', ({ progress }) => {
314
- document.querySelector('.scroll-progress').style.width = `${progress * 100}%`;
315
- });
316
- }
317
 
318
- // Set up scroll animations
319
- function setupScrollAnimations() {
320
- // Parallax effect for background images
321
- gsap.utils.toArray('.parallax-bg').forEach(bg => {
322
- gsap.to(bg, {
323
- yPercent: 20,
324
- ease: "none",
325
- scrollTrigger: {
326
- trigger: bg.parentElement,
327
- start: "top bottom",
328
- end: "bottom top",
329
- scrub: true
330
- }
331
- });
332
- });
333
-
334
- // Fade-in elements as they come into view
335
- gsap.utils.toArray('.fade-in').forEach(el => {
336
- gsap.from(el, {
337
- opacity: 0,
338
- y: 50,
339
- duration: 0.8,
340
- scrollTrigger: {
341
- trigger: el,
342
- start: "top 80%",
343
- toggleActions: "play none none none"
344
- }
345
- });
346
- });
347
-
348
- // Section entrance animations
349
- gsap.utils.toArray('.scroll-section').forEach((section, i) => {
350
- if (i > 0) { // Skip first section
351
- gsap.from(section, {
352
- opacity: 0,
353
- y: 100,
354
- duration: 1,
355
- scrollTrigger: {
356
- trigger: section,
357
- start: "top 90%",
358
- toggleActions: "play none none none"
359
- }
360
- });
 
 
 
 
 
 
 
 
 
 
 
 
361
  }
362
  });
363
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
364
 
365
  // Scroll down arrow behavior
366
- function setupScrollDownArrow() {
367
- const scrollDown = document.querySelector('.scroll-down');
368
- if (scrollDown) {
369
- scrollDown.addEventListener('click', () => {
370
- window.scrollTo({
371
- top: window.innerHeight,
372
- behavior: 'smooth'
373
- });
374
  });
375
-
376
- // Hide arrow when scrolling down
377
- window.addEventListener('scroll', () => {
378
- if (window.scrollY > 100) {
379
- scrollDown.style.opacity = '0';
380
- scrollDown.style.pointerEvents = 'none';
381
- } else {
382
- scrollDown.style.opacity = '1';
383
- scrollDown.style.pointerEvents = 'auto';
384
- }
385
- });
386
- }
387
  }
388
 
389
- // Initialize everything when DOM is loaded
390
  document.addEventListener('DOMContentLoaded', () => {
391
- // Load Lenis for smooth scrolling (from CDN)
392
- const script = document.createElement('script');
393
- script.src = 'https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.19/bundled/lenis.min.js';
394
- script.onload = () => {
395
- setupSmoothScrolling();
396
- setupScrollAnimations();
397
- setupScrollDownArrow();
398
- };
399
- document.body.appendChild(script);
400
-
401
- // Intersection Observer for fade-in elements (fallback)
402
- if (!('IntersectionObserver' in window)) {
403
- const fadeElements = document.querySelectorAll('.fade-in');
404
- fadeElements.forEach(el => el.classList.add('visible'));
405
- } else {
406
- const fadeObserver = new IntersectionObserver((entries) => {
407
- entries.forEach(entry => {
408
- if (entry.isIntersecting) {
409
- entry.target.classList.add('visible');
410
- }
411
- });
412
- }, { threshold: 0.1 });
413
-
414
- document.querySelectorAll('.fade-in').forEach(el => {
415
- fadeObserver.observe(el);
416
- });
417
- }
418
  });
419
  </script>
420
  <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=GMA2/pcwjs" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Immersive Storytelling</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
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
10
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
11
  <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500&display=swap');
13
 
14
  body {
15
+ font-family: 'Inter', sans-serif;
 
 
16
  overflow-x: hidden;
17
+ scroll-behavior: smooth;
18
  }
19
 
20
  .header-font {
21
+ font-family: 'Playfair Display', serif;
22
  }
23
 
24
+ /* Section styling */
25
+ .story-section {
26
+ min-height: 100vh;
27
+ width: 100%;
28
+ position: relative;
29
+ overflow: hidden;
30
+ }
31
+
32
+ /* Placeholder images */
33
+ .unsplash-placeholder {
34
+ border: 2px dashed #ccc;
35
  background-size: cover;
36
  background-position: center;
37
+ position: relative;
 
38
  }
39
 
40
+ .unsplash-placeholder::after {
41
+ content: "Unsplash Placeholder";
42
+ position: absolute;
43
+ bottom: 0;
44
+ left: 0;
45
+ right: 0;
46
+ background: rgba(0,0,0,0.5);
47
+ color: white;
48
+ text-align: center;
49
+ padding: 4px;
50
+ font-size: 12px;
51
+ }
52
+
53
+ /* Scroll progress indicator */
54
+ .scroll-progress {
55
+ position: fixed;
56
+ top: 0;
57
+ left: 0;
58
+ width: 0%;
59
+ height: 4px;
60
+ background-color: #ef4444;
61
+ z-index: 1000;
62
+ transition: width 0.1s;
63
  }
64
 
65
+ /* Hamburger menu */
66
+ .hamburger-menu {
67
+ position: fixed;
68
+ top: 20px;
69
+ right: 20px;
70
+ z-index: 1000;
71
+ background: rgba(255,255,255,0.9);
72
+ border-radius: 50%;
73
+ width: 50px;
74
+ height: 50px;
75
+ display: flex;
76
+ flex-direction: column;
77
+ justify-content: center;
78
+ align-items: center;
79
+ cursor: pointer;
80
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
81
+ }
82
+
83
+ .hamburger-line {
84
+ width: 24px;
85
+ height: 2px;
86
+ background: #333;
87
+ margin: 3px 0;
88
+ transition: all 0.3s ease;
89
+ }
90
+
91
+ /* Navigation menu */
92
+ .nav-menu {
93
+ position: fixed;
94
+ top: 0;
95
+ right: -300px;
96
+ width: 300px;
97
+ height: 100vh;
98
+ background: white;
99
+ z-index: 999;
100
+ transition: right 0.3s ease;
101
+ padding: 80px 20px 20px;
102
+ box-shadow: -2px 0 10px rgba(0,0,0,0.1);
103
+ }
104
+
105
+ .nav-menu.active {
106
+ right: 0;
107
+ }
108
+
109
+ /* Timeline styling */
110
+ .timeline-node {
111
  position: relative;
112
+ padding-left: 40px;
113
+ margin-bottom: 40px;
114
  }
115
 
116
+ .timeline-node::before {
117
  content: '';
118
  position: absolute;
119
+ left: 0;
120
+ top: 0;
121
  width: 20px;
122
  height: 20px;
123
+ border-radius: 50%;
124
+ background: #ef4444;
125
+ border: 4px solid white;
126
+ box-shadow: 0 0 0 2px #ef4444;
127
+ }
128
+
129
+ .timeline-node::after {
130
+ content: '';
131
+ position: absolute;
132
+ left: 9px;
133
+ top: 20px;
134
+ width: 2px;
135
+ height: calc(100% + 20px);
136
+ background: #ef4444;
137
+ transform: scaleY(0);
138
+ transform-origin: top;
139
  }
140
 
141
+ .timeline-node.active::after {
142
+ transform: scaleY(1);
143
+ transition: transform 1s ease;
 
 
144
  }
145
 
146
+ /* Slider styling */
147
+ .custom-slider {
148
+ -webkit-appearance: none;
149
+ width: 100%;
150
+ height: 6px;
151
+ border-radius: 3px;
152
+ background: #ddd;
153
+ outline: none;
154
+ }
155
+
156
+ .custom-slider::-webkit-slider-thumb {
157
+ -webkit-appearance: none;
158
+ appearance: none;
159
+ width: 20px;
160
+ height: 20px;
161
+ border-radius: 50%;
162
+ background: #ef4444;
163
+ cursor: pointer;
164
  }
165
 
166
+ /* Scroll down arrow */
167
  .scroll-down {
168
  position: absolute;
169
+ bottom: 30px;
170
  left: 50%;
171
  transform: translateX(-50%);
172
  animation: bounce 2s infinite;
173
+ cursor: pointer;
174
  }
175
 
176
  @keyframes bounce {
 
178
  transform: translateY(0) translateX(-50%);
179
  }
180
  40% {
181
+ transform: translateY(-10px) translateX(-50%);
182
  }
183
  60% {
184
+ transform: translateY(-5px) translateX(-50%);
185
  }
186
  }
187
 
188
+ /* Responsive adjustments */
189
+ @media (min-width: 768px) {
190
+ .parallax-split {
191
+ display: flex;
192
+ height: 100vh;
193
+ }
194
+
195
+ .parallax-image {
196
+ width: 50%;
197
+ height: 100%;
198
+ position: sticky;
199
+ top: 0;
200
+ }
201
+
202
+ .parallax-content {
203
+ width: 50%;
204
+ padding: 40px;
205
+ display: flex;
206
+ flex-direction: column;
207
+ justify-content: center;
208
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
209
  }
210
  </style>
211
  </head>
212
  <body>
213
+ <!-- Scroll progress indicator -->
214
  <div class="scroll-progress"></div>
215
 
216
+ <!-- Hamburger menu -->
217
+ <div class="hamburger-menu" id="hamburger">
218
+ <div class="hamburger-line"></div>
219
+ <div class="hamburger-line"></div>
220
+ <div class="hamburger-line"></div>
221
+ </div>
222
+
223
+ <!-- Navigation menu -->
224
+ <div class="nav-menu" id="navMenu">
225
+ <ul class="space-y-4">
226
+ <li><a href="#hero" class="block py-2 px-4 hover:bg-gray-100 rounded scroll-link">⚡ Hero</a></li>
227
+ <li><a href="#story" class="block py-2 px-4 hover:bg-gray-100 rounded scroll-link">⚡ Story Scene</a></li>
228
+ <li><a href="#customizer" class="block py-2 px-4 hover:bg-gray-100 rounded scroll-link">⚡ Interactive Customizer</a></li>
229
+ <li><a href="#timeline" class="block py-2 px-4 hover:bg-gray-100 rounded scroll-link">⚡ Animated Timeline</a></li>
230
+ <li><a href="#share" class="block py-2 px-4 hover:bg-gray-100 rounded scroll-link">⚡ Shareable Finale</a></li>
231
+ </ul>
232
+ </div>
233
+
234
+ <!-- Section 1: Hero -->
235
+ <section id="hero" class="story-section bg-gray-900 text-white relative">
236
+ <div class="unsplash-placeholder absolute inset-0" style="background-image: url('https://source.unsplash.com/1920x1080/?romantic'); filter: blur(2px);"></div>
237
+ <div class="absolute inset-0 bg-black bg-opacity-50"></div>
238
+ <div class="relative z-10 h-full flex flex-col justify-center items-center text-center px-4">
239
+ <h1 class="header-font text-4xl md:text-6xl lg:text-7xl font-bold mb-4 transform translate-y-10 opacity-0" id="hero-title">Immersive Storytelling</h1>
240
+ <p class="text-xl md:text-2xl max-w-2xl mx-auto transform translate-y-10 opacity-0" id="hero-subtitle">Scroll to experience a journey through time and emotion</p>
241
  </div>
242
+ <div class="scroll-down text-white text-2xl">
243
+ <i class="fas fa-chevron-down"></i>
244
  </div>
245
+ <div class="absolute bottom-4 left-4 text-xs opacity-70">⚡ Animate on scroll: Title & subtitle fade up</div>
246
  </section>
247
+
248
+ <!-- Section 2: Parallax Story Scene -->
249
+ <section id="story" class="story-section bg-white">
250
+ <div class="parallax-split">
251
+ <div class="parallax-image">
252
+ <div class="unsplash-placeholder h-full" style="background-image: url('https://source.unsplash.com/800x600/?ancient');"></div>
253
+ </div>
254
+ <div class="parallax-content">
255
+ <h2 class="header-font text-3xl md:text-4xl mb-6 transform opacity-0" id="story-title">The Ancient Tale</h2>
256
+ <p class="mb-4 transform opacity-0" id="story-text-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
257
+ <p class="transform opacity-0" id="story-text-2">Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
258
+ <div class="absolute bottom-4 left-4 text-xs opacity-70">⚡ Animate on scroll: Text fades in sequentially</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
259
  </div>
260
  </div>
261
  </section>
262
+
263
+ <!-- Section 3: Interactive Customizer -->
264
+ <section id="customizer" class="story-section bg-gray-100 flex items-center justify-center py-20">
265
+ <div class="max-w-2xl mx-auto px-4 w-full">
266
+ <h2 class="header-font text-3xl md:text-4xl mb-10 text-center">🖱️ Customize Your Story</h2>
267
+
268
+ <div class="flex flex-col items-center mb-12">
269
+ <div class="unsplash-placeholder rounded-full w-48 h-48 md:w-64 md:h-64 mb-8" style="background-image: url('https://source.unsplash.com/400x400/?heart');" id="custom-preview"></div>
270
+ <div class="text-center">
271
+ <p class="text-lg font-medium mb-2" id="custom-text">Your Custom Text</p>
272
+ <p class="text-sm text-gray-600">Live preview updates as you adjust settings</p>
273
+ </div>
274
+ </div>
275
+
276
+ <div class="space-y-6">
277
+ <div>
278
+ <label class="block mb-2 font-medium">Color Theme</label>
279
+ <input type="range" min="0" max="100" value="50" class="custom-slider" id="color-slider">
280
+ </div>
281
 
282
+ <div>
283
+ <label class="block mb-2 font-medium">Size Adjustment</label>
284
+ <input type="range" min="0" max="100" value="50" class="custom-slider" id="size-slider">
 
285
  </div>
286
 
287
+ <div>
288
+ <label class="block mb-2 font-medium">Text Content</label>
289
+ <input type="text" class="w-full px-4 py-2 border rounded" placeholder="Type your story..." id="text-input">
 
 
 
 
 
 
290
  </div>
291
  </div>
292
+
293
+ <div class="absolute bottom-4 left-4 text-xs opacity-70">🖱️ Clickable: Interactive sliders & text input</div>
294
  </div>
295
  </section>
296
+
297
+ <!-- Section 4: Animated Timeline -->
298
+ <section id="timeline" class="story-section bg-white py-20">
299
+ <div class="max-w-2xl mx-auto px-4">
300
+ <h2 class="header-font text-3xl md:text-4xl mb-12 text-center">⚡ Journey Through Time</h2>
301
+
302
+ <div class="relative">
303
+ <!-- Timeline node 1 -->
304
+ <div class="timeline-node" id="timeline-1">
305
+ <div class="flex flex-col md:flex-row gap-6">
306
+ <div class="unsplash-placeholder w-full md:w-32 h-32 flex-shrink-0" style="background-image: url('https://source.unsplash.com/200x200/?history');"></div>
307
+ <div>
308
+ <h3 class="font-bold text-xl mb-2">The Beginning</h3>
309
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
310
+ </div>
311
  </div>
312
+ </div>
313
+
314
+ <!-- Timeline node 2 -->
315
+ <div class="timeline-node" id="timeline-2">
316
+ <div class="flex flex-col md:flex-row gap-6">
317
+ <div class="unsplash-placeholder w-full md:w-32 h-32 flex-shrink-0" style="background-image: url('https://source.unsplash.com/200x200/?medieval');"></div>
318
+ <div>
319
+ <h3 class="font-bold text-xl mb-2">The Middle</h3>
320
+ <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
321
+ </div>
322
  </div>
323
+ </div>
324
+
325
+ <!-- Timeline node 3 -->
326
+ <div class="timeline-node" id="timeline-3">
327
+ <div class="flex flex-col md:flex-row gap-6">
328
+ <div class="unsplash-placeholder w-full md:w-32 h-32 flex-shrink-0" style="background-image: url('https://source.unsplash.com/200x200/?future');"></div>
329
+ <div>
330
+ <h3 class="font-bold text-xl mb-2">The Future</h3>
331
+ <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
332
  </div>
333
  </div>
334
  </div>
335
  </div>
336
+
337
+ <div class="absolute bottom-4 left-4 text-xs opacity-70">⚡ Animate on scroll: Connector lines draw in</div>
338
+ </div>
339
+ </section>
340
+
341
+ <!-- Section 5: Shareable Finale -->
342
+ <section id="share" class="story-section relative">
343
+ <div class="unsplash-placeholder absolute inset-0" style="background-image: url('https://source.unsplash.com/1920x1080/?celebration');"></div>
344
+ <div class="absolute inset-0 bg-black bg-opacity-40"></div>
345
+ <div class="relative z-10 h-full flex flex-col justify-center items-center text-center px-4">
346
+ <h2 class="header-font text-4xl md:text-5xl lg:text-6xl font-bold mb-8 text-white">Share Your Story</h2>
347
+ <button class="bg-white hover:bg-gray-100 text-gray-900 font-bold py-4 px-8 rounded-full text-lg md:text-xl mb-10 transition duration-300 transform hover:scale-105">
348
+ 🖱️ Create Your Own Journey
349
+ </button>
350
+
351
+ <div class="flex space-x-6">
352
+ <a href="#" class="text-white hover:text-gray-300 text-2xl"><i class="fab fa-facebook"></i></a>
353
+ <a href="#" class="text-white hover:text-gray-300 text-2xl"><i class="fab fa-twitter"></i></a>
354
+ <a href="#" class="text-white hover:text-gray-300 text-2xl"><i class="fab fa-instagram"></i></a>
355
+ <a href="#" class="text-white hover:text-gray-300 text-2xl"><i class="fab fa-pinterest"></i></a>
356
+ </div>
357
+
358
+ <div class="absolute bottom-4 left-4 text-xs opacity-70 text-white">🖱️ Clickable: Share buttons & CTA</div>
359
  </div>
360
  </section>
361
 
 
363
  // Initialize GSAP and ScrollTrigger
364
  gsap.registerPlugin(ScrollTrigger);
365
 
366
+ // Mobile menu toggle
367
+ const hamburger = document.getElementById('hamburger');
368
+ const navMenu = document.getElementById('navMenu');
369
+
370
+ hamburger.addEventListener('click', () => {
371
+ navMenu.classList.toggle('active');
372
+ hamburger.classList.toggle('active');
373
+ });
374
+
375
+ // Close menu when clicking a link
376
+ document.querySelectorAll('.scroll-link').forEach(link => {
377
+ link.addEventListener('click', () => {
378
+ navMenu.classList.remove('active');
379
+ hamburger.classList.remove('active');
380
  });
381
+ });
382
+
383
+ // Scroll progress indicator
384
+ window.addEventListener('scroll', () => {
385
+ const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
386
+ const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
387
+ const scrollProgress = (scrollTop / scrollHeight) * 100;
388
+ document.querySelector('.scroll-progress').style.width = scrollProgress + '%';
389
+ });
390
+
391
+ // Hero section animations
392
+ gsap.to("#hero-title", {
393
+ y: 0,
394
+ opacity: 1,
395
+ duration: 1,
396
+ ease: "power2.out",
397
+ scrollTrigger: {
398
+ trigger: "#hero",
399
+ start: "top center",
400
+ toggleActions: "play none none none"
401
  }
402
+ });
 
 
 
 
 
 
 
403
 
404
+ gsap.to("#hero-subtitle", {
405
+ y: 0,
406
+ opacity: 1,
407
+ duration: 1,
408
+ delay: 0.3,
409
+ ease: "power2.out",
410
+ scrollTrigger: {
411
+ trigger: "#hero",
412
+ start: "top center",
413
+ toggleActions: "play none none none"
414
+ }
415
+ });
416
+
417
+ // Story section animations
418
+ gsap.to("#story-title", {
419
+ opacity: 1,
420
+ duration: 0.8,
421
+ scrollTrigger: {
422
+ trigger: "#story-title",
423
+ start: "top 80%",
424
+ toggleActions: "play none none none"
425
+ }
426
+ });
427
+
428
+ gsap.to("#story-text-1", {
429
+ opacity: 1,
430
+ duration: 0.8,
431
+ delay: 0.3,
432
+ scrollTrigger: {
433
+ trigger: "#story-text-1",
434
+ start: "top 90%",
435
+ toggleActions: "play none none none"
436
+ }
437
+ });
438
+
439
+ gsap.to("#story-text-2", {
440
+ opacity: 1,
441
+ duration: 0.8,
442
+ delay: 0.6,
443
+ scrollTrigger: {
444
+ trigger: "#story-text-2",
445
+ start: "top 90%",
446
+ toggleActions: "play none none none"
447
+ }
448
+ });
449
+
450
+ // Timeline animations
451
+ const timelineNodes = document.querySelectorAll('.timeline-node');
452
+
453
+ timelineNodes.forEach((node, index) => {
454
+ ScrollTrigger.create({
455
+ trigger: node,
456
+ start: "top 80%",
457
+ onEnter: () => {
458
+ node.classList.add('active');
459
  }
460
  });
461
+ });
462
+
463
+ // Customizer interactions
464
+ const colorSlider = document.getElementById('color-slider');
465
+ const sizeSlider = document.getElementById('size-slider');
466
+ const textInput = document.getElementById('text-input');
467
+ const customPreview = document.getElementById('custom-preview');
468
+ const customText = document.getElementById('custom-text');
469
+
470
+ colorSlider.addEventListener('input', () => {
471
+ const hue = (colorSlider.value / 100) * 360;
472
+ customPreview.style.filter = `hue-rotate(${hue}deg)`;
473
+ });
474
+
475
+ sizeSlider.addEventListener('input', () => {
476
+ const scale = 0.8 + (sizeSlider.value / 100) * 0.4;
477
+ customPreview.style.transform = `scale(${scale})`;
478
+ });
479
+
480
+ textInput.addEventListener('input', () => {
481
+ customText.textContent = textInput.value || 'Your Custom Text';
482
+ });
483
 
484
  // Scroll down arrow behavior
485
+ const scrollDown = document.querySelector('.scroll-down');
486
+ if (scrollDown) {
487
+ scrollDown.addEventListener('click', () => {
488
+ window.scrollTo({
489
+ top: window.innerHeight,
490
+ behavior: 'smooth'
 
 
491
  });
492
+ });
 
 
 
 
 
 
 
 
 
 
 
493
  }
494
 
495
+ // Initialize all animations when page loads
496
  document.addEventListener('DOMContentLoaded', () => {
497
+ // Force a small delay to ensure all elements are rendered
498
+ setTimeout(() => {
499
+ ScrollTrigger.refresh();
500
+ }, 500);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
501
  });
502
  </script>
503
  <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=GMA2/pcwjs" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
prompts.txt CHANGED
@@ -1,2 +1,3 @@
1
  can you create this site https://valentime.noomoagency.com/ but with a Jerusalem 33 AD Roman Empire look? For The Pomegranate Cafe, that will sell an audiobook, digital book and coffee see this site for reference https://www.theendthebook.com/pomegranatecafe
2
- can you make the scroll effect and animations like the one on the site https://valentime.noomoagency.com/
 
 
1
  can you create this site https://valentime.noomoagency.com/ but with a Jerusalem 33 AD Roman Empire look? For The Pomegranate Cafe, that will sell an audiobook, digital book and coffee see this site for reference https://www.theendthebook.com/pomegranatecafe
2
+ can you make the scroll effect and animations like the one on the site https://valentime.noomoagency.com/
3
+ Design a mobile-first, responsive wireframe for a five-section immersive storytelling website. Prioritize scroll-driven navigation and visual continuity across devices. Use Unsplash for placeholder images. Section 1: Hero (Fullscreen Scroll Trigger) Full-viewport height. Centered bold title + subtitle over a blurred Unsplash background (https://source.unsplash.com/1920x1080/?romantic). Floating 'Scroll Down' arrow anchored to the bottom. Section 2: Parallax Story Scene Split layout (desktop): Left: Fixed Unsplash image (https://source.unsplash.com/800x600/?ancient). Right: Text box with scroll-triggered fade-in. Mobile: Image spans full width, text below. Section 3: Interactive Customizer Centered circular Unsplash placeholder (https://source.unsplash.com/400x400/?heart). Below: Three wireframe sliders (color, size, text). Live preview area showing adjustments. Section 4: Animated Timeline Vertical timeline with 3 nodes. Each node: Left: Small Unsplash image (https://source.unsplash.com/200x200/?history). Right: Short text blurb. Connector lines animate on scroll into view. Section 5: Shareable Finale Full-width Unsplash background (https://source.unsplash.com/1920x1080/?celebration). Overlay: Large 'Share Your Story' button + social icons (wireframe outlines). Responsive Rules: All sections stack vertically on mobile. Hamburger menu (top-right) for navigation jumps. Images scale proportionally; text minimum 16px. Touch-friendly tap targets (buttons ≥48px). Annotations: Label scroll-triggered animations with '⚡ Animate on scroll'. Mark interactive elements with '🖱️ Clickable'. Use dashed borders for Unsplash placeholders. reference https://valentime.noomoagency.com/ and the immersive experience the user gets on scroll.