GMA2 commited on
Commit
37a511e
·
verified ·
1 Parent(s): 8f99568

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +549 -65
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Immersive 3D Journey</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
9
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
@@ -16,12 +16,14 @@
16
  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/CopyShader.js"></script>
17
  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/LuminosityHighPassShader.js"></script>
18
  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/UnrealBloomPass.js"></script>
 
19
  <style>
20
  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500&display=swap');
21
 
22
  :root {
23
  --primary-color: #ef4444;
24
  --secondary-color: #3b82f6;
 
25
  }
26
 
27
  body {
@@ -182,7 +184,6 @@
182
  .scroll-content {
183
  position: relative;
184
  z-index: 10;
185
- padding: 100vh 0;
186
  background-color: rgba(0, 0, 0, 0.7);
187
  color: white;
188
  }
@@ -192,7 +193,156 @@
192
  display: flex;
193
  align-items: center;
194
  justify-content: center;
195
- padding: 0 20px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
196
  }
197
 
198
  /* Annotation for developers */
@@ -221,10 +371,10 @@
221
  <section class="hero-section">
222
  <div class="hero-content">
223
  <h1 class="header-font text-5xl md:text-7xl lg:text-8xl font-bold mb-6">
224
- Ancient Rome Reborn
225
  </h1>
226
  <p class="text-xl md:text-2xl max-w-2xl mx-auto mb-12">
227
- Step into history with our immersive 3D journey through the heart of the Roman Empire
228
  </p>
229
  <button id="journeyBtn" class="journey-btn">
230
  Begin Your Journey
@@ -243,32 +393,161 @@
243
 
244
  <!-- Scroll Content -->
245
  <div class="scroll-content">
246
- <section class="scroll-section">
247
- <div class="max-w-4xl mx-auto text-center">
248
- <h2 class="header-font text-4xl md:text-5xl mb-8">The Roman Forum</h2>
249
- <p class="text-lg md:text-xl">
250
- The center of Roman public life for centuries, this is where elections, public speeches, criminal trials, and gladiatorial matches took place.
251
- </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
252
  </div>
253
  </section>
254
 
255
- <section class="scroll-section">
 
256
  <div class="max-w-4xl mx-auto text-center">
257
- <h2 class="header-font text-4xl md:text-5xl mb-8">The Colosseum</h2>
258
- <p class="text-lg md:text-xl">
259
- The largest amphitheater ever built, capable of holding 50,000 spectators for gladiatorial contests and public spectacles.
260
- </p>
 
 
 
 
 
 
 
 
 
261
  </div>
262
  </section>
263
 
264
- <section class="scroll-section">
 
265
  <div class="max-w-4xl mx-auto text-center">
266
- <h2 class="header-font text-4xl md:text-5xl mb-8">The Pantheon</h2>
267
- <p class="text-lg md:text-xl">
268
- A former Roman temple and now a church, with the world's largest unreinforced concrete dome still standing after 2000 years.
269
  </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
270
  </div>
271
  </section>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
272
  </div>
273
 
274
  <!-- Developer Annotation -->
@@ -283,6 +562,11 @@
283
  const progressText = document.querySelector('.progress-text');
284
  const sceneContainer = document.getElementById('sceneContainer');
285
  const webglCanvas = document.getElementById('webglCanvas');
 
 
 
 
 
286
 
287
  // Three.js variables
288
  let scene, camera, renderer, controls;
@@ -326,7 +610,7 @@
326
 
327
  composer = new THREE.EffectComposer(renderer);
328
  composer.addPass(renderScene);
329
- composer.addPass(bloomPass);
330
 
331
  // Create camera path (Bézier curve)
332
  const curvePoints = [
@@ -342,8 +626,8 @@
342
  curvePoints[0], curvePoints[1], curvePoints[2], curvePoints[3]
343
  );
344
 
345
- // Create simple Rome environment
346
- createRomeEnvironment();
347
 
348
  // Handle window resize
349
  window.addEventListener('resize', onWindowResize);
@@ -352,8 +636,8 @@
352
  animate();
353
  }
354
 
355
- // Create Rome environment
356
- function createRomeEnvironment() {
357
  // Ground
358
  const groundGeometry = new THREE.PlaneGeometry(100, 100);
359
  const groundMaterial = new THREE.MeshStandardMaterial({
@@ -366,45 +650,65 @@
366
  ground.receiveShadow = true;
367
  scene.add(ground);
368
 
369
- // Roman buildings (simplified for demo)
370
  const buildingMaterial = new THREE.MeshStandardMaterial({
371
  color: 0xC0C0C0,
372
  roughness: 0.7,
373
  metalness: 0.3
374
  });
375
 
376
- // Colosseum
377
- const colosseumGeometry = new THREE.TorusGeometry(5, 2, 16, 32, Math.PI * 2);
378
- const colosseum = new THREE.Mesh(colosseumGeometry, buildingMaterial);
379
- colosseum.position.set(15, 2, 0);
380
- colosseum.rotation.x = Math.PI / 2;
381
- scene.add(colosseum);
382
-
383
- // Pantheon
384
- const pantheonGeometry = new THREE.CylinderGeometry(3, 3, 5, 32);
385
- const pantheon = new THREE.Mesh(pantheonGeometry, buildingMaterial);
386
- pantheon.position.set(0, 2.5, -10);
387
- scene.add(pantheon);
388
-
389
- // Pantheon dome
390
- const domeGeometry = new THREE.SphereGeometry(3, 32, 16, 0, Math.PI * 2, 0, Math.PI / 2);
391
- const dome = new THREE.Mesh(domeGeometry, buildingMaterial);
392
- dome.position.set(0, 5, -10);
393
- dome.rotation.x = Math.PI;
394
- scene.add(dome);
395
-
396
- // Roman forum (simplified)
397
- const forumGeometry = new THREE.BoxGeometry(10, 1, 15);
398
- const forum = new THREE.Mesh(forumGeometry, buildingMaterial);
399
- forum.position.set(-10, 0.5, 5);
400
- scene.add(forum);
401
-
402
- // Pillars
403
- const pillarGeometry = new THREE.CylinderGeometry(0.5, 0.5, 8, 8);
404
- for (let i = 0; i < 8; i++) {
405
- const pillar = new THREE.Mesh(pillarGeometry, buildingMaterial);
406
- pillar.position.set(-10 + i * 1.5, 4, 5);
407
- scene.add(pillar);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
408
  }
409
 
410
  // Lighting
@@ -416,6 +720,15 @@
416
  directionalLight.castShadow = true;
417
  scene.add(directionalLight);
418
 
 
 
 
 
 
 
 
 
 
419
  // Particles for atmosphere
420
  const particleCount = 1000;
421
  const particlesGeometry = new THREE.BufferGeometry();
@@ -529,13 +842,36 @@
529
 
530
  // Set up scroll trigger for camera movement
531
  function setupScrollTrigger() {
532
- ScrollTrigger.create({
533
- start: 0,
534
- end: "max",
535
- onUpdate: (self) => {
536
- // Map scroll progress to camera path (0.3 to 1.0 range)
537
- scrollProgress = 0.3 + self.progress * 0.7;
538
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
539
  });
540
  }
541
 
@@ -622,6 +958,154 @@
622
  duration: 0.3
623
  });
624
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
625
  </script>
626
  <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>
627
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>The Pomegranate Café - Immersive Experience</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
9
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
 
16
  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/CopyShader.js"></script>
17
  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/LuminosityHighPassShader.js"></script>
18
  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/UnrealBloomPass.js"></script>
19
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
20
  <style>
21
  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500&display=swap');
22
 
23
  :root {
24
  --primary-color: #ef4444;
25
  --secondary-color: #3b82f6;
26
+ --accent-color: #8B4513; /* Coffee brown */
27
  }
28
 
29
  body {
 
184
  .scroll-content {
185
  position: relative;
186
  z-index: 10;
 
187
  background-color: rgba(0, 0, 0, 0.7);
188
  color: white;
189
  }
 
193
  display: flex;
194
  align-items: center;
195
  justify-content: center;
196
+ padding: 80px 20px;
197
+ }
198
+
199
+ /* Book section */
200
+ .book-section {
201
+ background-color: rgba(0, 0, 0, 0.8);
202
+ padding: 60px 0;
203
+ }
204
+
205
+ /* Product cards */
206
+ .product-card {
207
+ background: rgba(255, 255, 255, 0.1);
208
+ backdrop-filter: blur(10px);
209
+ border-radius: 20px;
210
+ overflow: hidden;
211
+ max-width: 800px;
212
+ margin: 0 auto;
213
+ transition: transform 0.3s ease;
214
+ }
215
+
216
+ .product-card:hover {
217
+ transform: translateY(-10px);
218
+ }
219
+
220
+ .product-image {
221
+ height: 300px;
222
+ background-size: cover;
223
+ background-position: center;
224
+ }
225
+
226
+ .add-to-cart {
227
+ background-color: var(--accent-color);
228
+ color: white;
229
+ border: none;
230
+ padding: 12px 24px;
231
+ border-radius: 30px;
232
+ cursor: pointer;
233
+ transition: all 0.3s ease;
234
+ font-weight: 500;
235
+ }
236
+
237
+ .add-to-cart:hover {
238
+ background-color: #a0522d;
239
+ transform: scale(1.05);
240
+ }
241
+
242
+ /* About author */
243
+ .author-section {
244
+ background-color: rgba(0, 0, 0, 0.9);
245
+ }
246
+
247
+ .author-image {
248
+ width: 200px;
249
+ height: 200px;
250
+ border-radius: 50%;
251
+ object-fit: cover;
252
+ border: 5px solid var(--accent-color);
253
+ }
254
+
255
+ /* Newsletter form */
256
+ .newsletter-form {
257
+ max-width: 500px;
258
+ margin: 0 auto;
259
+ }
260
+
261
+ .form-input {
262
+ background: rgba(255, 255, 255, 0.1);
263
+ border: 1px solid rgba(255, 255, 255, 0.2);
264
+ color: white;
265
+ padding: 15px 20px;
266
+ border-radius: 30px;
267
+ width: 100%;
268
+ margin-bottom: 15px;
269
+ }
270
+
271
+ .form-input::placeholder {
272
+ color: rgba(255, 255, 255, 0.7);
273
+ }
274
+
275
+ .submit-btn {
276
+ background-color: var(--primary-color);
277
+ color: white;
278
+ border: none;
279
+ padding: 15px 30px;
280
+ border-radius: 30px;
281
+ cursor: pointer;
282
+ transition: all 0.3s ease;
283
+ font-weight: 500;
284
+ width: 100%;
285
+ }
286
+
287
+ .submit-btn:hover {
288
+ background-color: #dc2626;
289
+ transform: translateY(-3px);
290
+ }
291
+
292
+ /* Contact form */
293
+ .contact-form {
294
+ max-width: 600px;
295
+ margin: 0 auto;
296
+ }
297
+
298
+ textarea.form-input {
299
+ min-height: 150px;
300
+ }
301
+
302
+ /* Footer */
303
+ .footer {
304
+ background-color: #111;
305
+ padding: 60px 0 30px;
306
+ text-align: center;
307
+ }
308
+
309
+ .social-icon {
310
+ display: inline-flex;
311
+ align-items: center;
312
+ justify-content: center;
313
+ width: 40px;
314
+ height: 40px;
315
+ border-radius: 50%;
316
+ background-color: rgba(255, 255, 255, 0.1);
317
+ margin: 0 8px;
318
+ color: white;
319
+ transition: all 0.3s ease;
320
+ }
321
+
322
+ .social-icon:hover {
323
+ background-color: var(--accent-color);
324
+ transform: translateY(-3px);
325
+ }
326
+
327
+ .back-to-top {
328
+ display: inline-block;
329
+ margin-top: 30px;
330
+ color: var(--accent-color);
331
+ text-decoration: none;
332
+ font-weight: 500;
333
+ }
334
+
335
+ .back-to-top:hover {
336
+ text-decoration: underline;
337
+ }
338
+
339
+ /* Success message */
340
+ .success-message {
341
+ display: none;
342
+ background: rgba(0, 200, 0, 0.2);
343
+ padding: 20px;
344
+ border-radius: 10px;
345
+ margin-top: 20px;
346
  }
347
 
348
  /* Annotation for developers */
 
371
  <section class="hero-section">
372
  <div class="hero-content">
373
  <h1 class="header-font text-5xl md:text-7xl lg:text-8xl font-bold mb-6">
374
+ The Pomegranate Café
375
  </h1>
376
  <p class="text-xl md:text-2xl max-w-2xl mx-auto mb-12">
377
+ An immersive journey through the world of J.L. Robb's novel
378
  </p>
379
  <button id="journeyBtn" class="journey-btn">
380
  Begin Your Journey
 
393
 
394
  <!-- Scroll Content -->
395
  <div class="scroll-content">
396
+ <!-- About the Book Section -->
397
+ <section id="about-book" class="scroll-section book-section">
398
+ <div class="max-w-4xl mx-auto">
399
+ <h2 class="header-font text-4xl md:text-5xl mb-8 text-center">About The Book</h2>
400
+ <div class="grid md:grid-cols-2 gap-8 items-center">
401
+ <div>
402
+ <img src="https://images.unsplash.com/photo-1544947950-fa07a98d237f?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="The Pomegranate Café Book Cover" class="rounded-lg shadow-xl w-full">
403
+ </div>
404
+ <div>
405
+ <p class="text-lg mb-4">
406
+ "The Pomegranate Café" is a captivating novel that transports readers to a world of mystery, romance, and intrigue set against the backdrop of a charming café.
407
+ </p>
408
+ <p class="text-lg mb-4">
409
+ Follow the intertwining stories of the café's unique patrons as their lives unfold in unexpected ways, revealing secrets, passions, and the transformative power of human connection.
410
+ </p>
411
+ <p class="text-lg">
412
+ J.L. Robb's masterful storytelling weaves together multiple narratives into a rich tapestry that will keep you turning pages late into the night.
413
+ </p>
414
+ </div>
415
+ </div>
416
+ </div>
417
+ </section>
418
+
419
+ <!-- First Product Section -->
420
+ <section id="product-1" class="scroll-section">
421
+ <div class="product-card">
422
+ <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1544947950-fa07a98d237f?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80');"></div>
423
+ <div class="p-8">
424
+ <h3 class="header-font text-3xl mb-4">The Pomegranate Café - Hardcover Edition</h3>
425
+ <p class="text-lg mb-6">The beautifully crafted hardcover edition of J.L. Robb's bestselling novel, perfect for collectors and book lovers alike.</p>
426
+ <div class="flex justify-between items-center">
427
+ <span class="text-2xl font-bold">$24.99</span>
428
+ <button class="add-to-cart" data-product="1">Add to Cart</button>
429
+ </div>
430
+ </div>
431
+ </div>
432
+ </section>
433
+
434
+ <!-- Second Product Section -->
435
+ <section id="product-2" class="scroll-section">
436
+ <div class="product-card">
437
+ <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80');"></div>
438
+ <div class="p-8">
439
+ <h3 class="header-font text-3xl mb-4">The Pomegranate Café - Paperback Edition</h3>
440
+ <p class="text-lg mb-6">The affordable paperback edition of this captivating novel, perfect for reading on the go or sharing with friends.</p>
441
+ <div class="flex justify-between items-center">
442
+ <span class="text-2xl font-bold">$14.99</span>
443
+ <button class="add-to-cart" data-product="2">Add to Cart</button>
444
+ </div>
445
+ </div>
446
+ </div>
447
+ </section>
448
+
449
+ <!-- Third Product Section -->
450
+ <section id="product-3" class="scroll-section">
451
+ <div class="product-card">
452
+ <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1511920170033-f839b4c1e4f0?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80');"></div>
453
+ <div class="p-8">
454
+ <h3 class="header-font text-3xl mb-4">Pomegranate Café Blend Coffee</h3>
455
+ <p class="text-lg mb-6">Experience the rich, aromatic coffee blend inspired by the novel's setting. Each purchase supports independent coffee growers.</p>
456
+ <div class="flex justify-between items-center">
457
+ <span class="text-2xl font-bold">$12.99</span>
458
+ <button class="add-to-cart" data-product="3">Add to Cart</button>
459
+ </div>
460
+ </div>
461
  </div>
462
  </section>
463
 
464
+ <!-- About Author Section -->
465
+ <section id="about-author" class="scroll-section author-section">
466
  <div class="max-w-4xl mx-auto text-center">
467
+ <h2 class="header-font text-4xl md:text-5xl mb-8">About The Author</h2>
468
+ <img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="J.L. Robb" class="author-image mx-auto mb-8">
469
+ <div class="max-w-2xl mx-auto">
470
+ <p class="text-lg mb-4">
471
+ J.L. Robb is an award-winning author known for her evocative storytelling and richly drawn characters. A former café owner herself, she brings authenticity and warmth to her depiction of the Pomegranate Café and its patrons.
472
+ </p>
473
+ <p class="text-lg mb-4">
474
+ With degrees in literature and anthropology, Robb's writing is informed by her deep understanding of human nature and cultural traditions. She has published six novels to critical acclaim.
475
+ </p>
476
+ <p class="text-lg">
477
+ When not writing, Robb can be found exploring coffee shops around the world, collecting vintage teapots, and mentoring emerging writers through her popular workshops.
478
+ </p>
479
+ </div>
480
  </div>
481
  </section>
482
 
483
+ <!-- Newsletter Section -->
484
+ <section id="newsletter" class="scroll-section">
485
  <div class="max-w-4xl mx-auto text-center">
486
+ <h2 class="header-font text-4xl md:text-5xl mb-8">Stay Connected</h2>
487
+ <p class="text-xl mb-8 max-w-2xl mx-auto">
488
+ Join our newsletter for exclusive content, behind-the-scenes insights, and updates on new releases.
489
  </p>
490
+
491
+ <form id="newsletterForm" class="newsletter-form">
492
+ <input type="email" id="newsletterEmail" class="form-input" placeholder="Your email address" required>
493
+ <button type="submit" class="submit-btn">Subscribe</button>
494
+ </form>
495
+
496
+ <div id="newsletterSuccess" class="success-message">
497
+ <p class="text-lg">Thank you for subscribing! You'll receive a confirmation email shortly.</p>
498
+ </div>
499
+ </div>
500
+ </section>
501
+
502
+ <!-- Contact Section -->
503
+ <section id="contact" class="scroll-section">
504
+ <div class="max-w-4xl mx-auto">
505
+ <h2 class="header-font text-4xl md:text-5xl mb-8 text-center">Contact Us</h2>
506
+
507
+ <form id="contactForm" class="contact-form">
508
+ <div class="grid md:grid-cols-2 gap-6 mb-6">
509
+ <div>
510
+ <input type="text" id="contactName" class="form-input" placeholder="Your Name" required>
511
+ </div>
512
+ <div>
513
+ <input type="email" id="contactEmail" class="form-input" placeholder="Your Email" required>
514
+ </div>
515
+ </div>
516
+ <div class="mb-6">
517
+ <input type="text" id="contactSubject" class="form-input" placeholder="Subject">
518
+ </div>
519
+ <div class="mb-6">
520
+ <textarea id="contactMessage" class="form-input" placeholder="Your Message" required></textarea>
521
+ </div>
522
+ <button type="submit" class="submit-btn">Send Message</button>
523
+ </form>
524
+
525
+ <div id="contactSuccess" class="success-message mt-6">
526
+ <p class="text-lg">Thank you for your message! We'll get back to you soon.</p>
527
+ </div>
528
  </div>
529
  </section>
530
+
531
+ <!-- Footer -->
532
+ <footer class="footer">
533
+ <div class="max-w-6xl mx-auto px-4">
534
+ <div class="flex justify-center mb-8">
535
+ <a href="#" class="social-icon"><i class="fab fa-facebook-f"></i></a>
536
+ <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
537
+ <a href="#" class="social-icon"><i class="fab fa-patreon"></i></a>
538
+ <a href="#" class="social-icon"><i class="fab fa-threads"></i></a>
539
+ <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
540
+ <a href="#" class="social-icon"><i class="fab fa-tiktok"></i></a>
541
+ <a href="#" class="social-icon"><i class="fas fa-book-open"></i></a> <!-- Substack icon -->
542
+ </div>
543
+
544
+ <p class="text-sm mb-4">
545
+ &copy; 2025 The Pomegranate Café by J.L. Robb. All rights reserved.
546
+ </p>
547
+
548
+ <a href="#" class="back-to-top">Back to Top</a>
549
+ </div>
550
+ </footer>
551
  </div>
552
 
553
  <!-- Developer Annotation -->
 
562
  const progressText = document.querySelector('.progress-text');
563
  const sceneContainer = document.getElementById('sceneContainer');
564
  const webglCanvas = document.getElementById('webglCanvas');
565
+ const newsletterForm = document.getElementById('newsletterForm');
566
+ const newsletterSuccess = document.getElementById('newsletterSuccess');
567
+ const contactForm = document.getElementById('contactForm');
568
+ const contactSuccess = document.getElementById('contactSuccess');
569
+ const addToCartButtons = document.querySelectorAll('.add-to-cart');
570
 
571
  // Three.js variables
572
  let scene, camera, renderer, controls;
 
610
 
611
  composer = new THREE.EffectComposer(renderer);
612
  composer.addPass(renderScene);
613
+ composer.addPass(boomPass);
614
 
615
  // Create camera path (Bézier curve)
616
  const curvePoints = [
 
626
  curvePoints[0], curvePoints[1], curvePoints[2], curvePoints[3]
627
  );
628
 
629
+ // Create simple café environment
630
+ createCafeEnvironment();
631
 
632
  // Handle window resize
633
  window.addEventListener('resize', onWindowResize);
 
636
  animate();
637
  }
638
 
639
+ // Create café environment
640
+ function createCafeEnvironment() {
641
  // Ground
642
  const groundGeometry = new THREE.PlaneGeometry(100, 100);
643
  const groundMaterial = new THREE.MeshStandardMaterial({
 
650
  ground.receiveShadow = true;
651
  scene.add(ground);
652
 
653
+ // Café building (simplified for demo)
654
  const buildingMaterial = new THREE.MeshStandardMaterial({
655
  color: 0xC0C0C0,
656
  roughness: 0.7,
657
  metalness: 0.3
658
  });
659
 
660
+ // Main café structure
661
+ const cafeGeometry = new THREE.BoxGeometry(15, 8, 20);
662
+ const cafe = new THREE.Mesh(cafeGeometry, buildingMaterial);
663
+ cafe.position.set(0, 4, 0);
664
+ scene.add(cafe);
665
+
666
+ // Café roof
667
+ const roofGeometry = new THREE.ConeGeometry(12, 4, 4);
668
+ const roof = new THREE.Mesh(roofGeometry, buildingMaterial);
669
+ roof.position.set(0, 10, 0);
670
+ roof.rotation.y = Math.PI / 4;
671
+ scene.add(roof);
672
+
673
+ // Café sign
674
+ const signGeometry = new THREE.PlaneGeometry(8, 1.5);
675
+ const signMaterial = new THREE.MeshStandardMaterial({
676
+ color: 0xef4444,
677
+ emissive: 0xef4444,
678
+ emissiveIntensity: 0.5
679
+ });
680
+ const sign = new THREE.Mesh(signGeometry, signMaterial);
681
+ sign.position.set(0, 9, -10.5);
682
+ sign.rotation.x = -Math.PI / 2;
683
+ scene.add(sign);
684
+
685
+ // Outdoor tables
686
+ const tableGeometry = new THREE.CylinderGeometry(1, 1, 0.5, 32);
687
+ const tableMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513 });
688
+
689
+ for (let i = 0; i < 6; i++) {
690
+ const table = new THREE.Mesh(tableGeometry, tableMaterial);
691
+ table.position.set(
692
+ -12 + i * 5,
693
+ 0.25,
694
+ -5 - (i % 2) * 3
695
+ );
696
+ scene.add(table);
697
+
698
+ // Chairs
699
+ const chairGeometry = new THREE.BoxGeometry(0.8, 0.8, 0.8);
700
+ const chairMaterial = new THREE.MeshStandardMaterial({ color: 0x654321 });
701
+
702
+ for (let j = 0; j < 4; j++) {
703
+ const chair = new THREE.Mesh(chairGeometry, chairMaterial);
704
+ const angle = j * Math.PI / 2;
705
+ chair.position.set(
706
+ table.position.x + Math.cos(angle) * 1.5,
707
+ 0.4,
708
+ table.position.z + Math.sin(angle) * 1.5
709
+ );
710
+ scene.add(chair);
711
+ }
712
  }
713
 
714
  // Lighting
 
720
  directionalLight.castShadow = true;
721
  scene.add(directionalLight);
722
 
723
+ // Café window lights
724
+ const windowLight1 = new THREE.PointLight(0xffeedd, 2, 5);
725
+ windowLight1.position.set(7.5, 4, 0);
726
+ scene.add(windowLight1);
727
+
728
+ const windowLight2 = new THREE.PointLight(0xffeedd, 2, 5);
729
+ windowLight2.position.set(-7.5, 4, 0);
730
+ scene.add(windowLight2);
731
+
732
  // Particles for atmosphere
733
  const particleCount = 1000;
734
  const particlesGeometry = new THREE.BufferGeometry();
 
842
 
843
  // Set up scroll trigger for camera movement
844
  function setupScrollTrigger() {
845
+ // Create markers for each section
846
+ const sections = [
847
+ '#about-book',
848
+ '#product-1',
849
+ '#product-2',
850
+ '#product-3',
851
+ '#about-author',
852
+ '#newsletter',
853
+ '#contact'
854
+ ];
855
+
856
+ sections.forEach((section, index) => {
857
+ ScrollTrigger.create({
858
+ trigger: section,
859
+ start: "top center",
860
+ end: "bottom center",
861
+ onEnter: () => {
862
+ // Smooth scroll to section
863
+ gsap.to(window, {
864
+ duration: 1,
865
+ scrollTo: section,
866
+ ease: "power2.inOut"
867
+ });
868
+ },
869
+ onUpdate: (self) => {
870
+ // Map scroll progress to camera path (0.3 to 1.0 range)
871
+ const sectionProgress = (index + self.progress) / sections.length;
872
+ scrollProgress = 0.3 + sectionProgress * 0.7;
873
+ }
874
+ });
875
  });
876
  }
877
 
 
958
  duration: 0.3
959
  });
960
  });
961
+
962
+ // Newsletter form submission
963
+ newsletterForm.addEventListener('submit', (e) => {
964
+ e.preventDefault();
965
+
966
+ // Get the email value
967
+ const email = document.getElementById('newsletterEmail').value;
968
+
969
+ /*
970
+ INSTRUCTIONS FOR EMAIL INTEGRATION:
971
+
972
+ 1. To connect this form to your email service:
973
+ - Replace this comment block with your preferred email handling solution
974
+ - Popular options include:
975
+ * Formspree: https://formspree.io/
976
+ * EmailJS: https://www.emailjs.com/
977
+ * Custom backend API
978
+
979
+ 2. For a basic PHP solution:
980
+ - Create a PHP file (e.g., subscribe.php) with mail() function
981
+ - Set the form action attribute to point to that file
982
+ - Example PHP code:
983
+ <?php
984
+ $email = $_POST['email'];
985
+ $to = "your@email.com";
986
+ $subject = "New Newsletter Subscription";
987
+ $message = "A new subscriber: " . $email;
988
+ mail($to, $subject, $message);
989
+ ?>
990
+ */
991
+
992
+ // For demo purposes, we'll just show the success message
993
+ newsletterForm.style.display = 'none';
994
+ newsletterSuccess.style.display = 'block';
995
+
996
+ // Reset form
997
+ newsletterForm.reset();
998
+ });
999
+
1000
+ // Contact form submission
1001
+ contactForm.addEventListener('submit', (e) => {
1002
+ e.preventDefault();
1003
+
1004
+ // Get form values
1005
+ const name = document.getElementById('contactName').value;
1006
+ const email = document.getElementById('contactEmail').value;
1007
+ const subject = document.getElementById('contactSubject').value;
1008
+ const message = document.getElementById('contactMessage').value;
1009
+
1010
+ /*
1011
+ INSTRUCTIONS FOR CONTACT FORM INTEGRATION:
1012
+
1013
+ 1. To connect this form to your email service:
1014
+ - Replace this comment block with your preferred email handling solution
1015
+ - Popular options include:
1016
+ * Formspree: https://formspree.io/
1017
+ * EmailJS: https://www.emailjs.com/
1018
+ * Custom backend API
1019
+
1020
+ 2. For a basic PHP solution:
1021
+ - Create a PHP file (e.g., contact.php) with mail() function
1022
+ - Set the form action attribute to point to that file
1023
+ - Example PHP code:
1024
+ <?php
1025
+ $name = $_POST['name'];
1026
+ $email = $_POST['email'];
1027
+ $subject = $_POST['subject'];
1028
+ $message = $_POST['message'];
1029
+
1030
+ $to = "your@email.com";
1031
+ $headers = "From: $email";
1032
+ $body = "Name: $name\nEmail: $email\nSubject: $subject\n\nMessage:\n$message";
1033
+
1034
+ mail($to, $subject, $body, $headers);
1035
+ ?>
1036
+ */
1037
+
1038
+ // For demo purposes, we'll just show the success message
1039
+ contactForm.style.display = 'none';
1040
+ contactSuccess.style.display = 'block';
1041
+
1042
+ // Reset form
1043
+ contactForm.reset();
1044
+ });
1045
+
1046
+ // Add to cart functionality
1047
+ addToCartButtons.forEach(button => {
1048
+ button.addEventListener('click', (e) => {
1049
+ const productId = e.target.getAttribute('data-product');
1050
+
1051
+ // Animation effect
1052
+ gsap.to(e.target, {
1053
+ scale: 1.1,
1054
+ backgroundColor: '#4CAF50',
1055
+ duration: 0.3,
1056
+ yoyo: true,
1057
+ repeat: 1,
1058
+ onComplete: () => {
1059
+ e.target.style.backgroundColor = ''; // Reset color
1060
+ }
1061
+ });
1062
+
1063
+ /*
1064
+ INSTRUCTIONS FOR CART INTEGRATION:
1065
+
1066
+ 1. To connect this to your e-commerce platform:
1067
+ - Replace this comment block with your preferred cart solution
1068
+ - Popular options include:
1069
+ * Shopify Buy Button: https://shopify.dev/docs/api/buy-button
1070
+ * WooCommerce AJAX: https://docs.woocommerce.com/document/ajax-add-to-cart/
1071
+ * Custom cart implementation
1072
+
1073
+ 2. For a basic implementation:
1074
+ - Store cart items in localStorage
1075
+ - Example code:
1076
+ let cart = JSON.parse(localStorage.getItem('cart')) || [];
1077
+ cart.push({ id: productId });
1078
+ localStorage.setItem('cart', JSON.stringify(cart));
1079
+ */
1080
+
1081
+ console.log(`Added product ${productId} to cart`);
1082
+ });
1083
+ });
1084
+
1085
+ // Social media links setup
1086
+ /*
1087
+ INSTRUCTIONS FOR SOCIAL MEDIA LINKS:
1088
+
1089
+ 1. Replace the href="#" in the footer with your actual social media URLs
1090
+ 2. Example structure:
1091
+ <a href="https://facebook.com/yourpage" class="social-icon"><i class="fab fa-facebook-f"></i></a>
1092
+ <a href="https://instagram.com/yourpage" class="social-icon"><i class="fab fa-instagram"></i></a>
1093
+ <a href="https://patreon.com/yourpage" class="social-icon"><i class="fab fa-patreon"></i></a>
1094
+ <a href="https://threads.net/yourpage" class="social-icon"><i class="fab fa-threads"></i></a>
1095
+ <a href="https://twitter.com/yourpage" class="social-icon"><i class="fab fa-twitter"></i></a>
1096
+ <a href="https://tiktok.com/yourpage" class="social-icon"><i class="fab fa-tiktok"></i></a>
1097
+ <a href="https://substack.com/yourpage" class="social-icon"><i class="fas fa-book-open"></i></a>
1098
+ */
1099
+
1100
+ // Back to top functionality
1101
+ document.querySelector('.back-to-top').addEventListener('click', (e) => {
1102
+ e.preventDefault();
1103
+ gsap.to(window, {
1104
+ duration: 1,
1105
+ scrollTo: 0,
1106
+ ease: "power2.inOut"
1107
+ });
1108
+ });
1109
  </script>
1110
  <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>
1111
  </html>
prompts.txt CHANGED
@@ -2,4 +2,5 @@ can you create this site https://valentime.noomoagency.com/ but with a Jerusalem
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.
4
  can you add all the animations, immersive, interactive, webgl and gsap effects like Noomo site I referenced?
5
- Create a wireframe for a hero section where clicking the ‘Begin Journey’ button triggers an immersive 3D scene transition. The effect should include: 1. Preloader Animation A subtle button hover effect (e.g., scale-up and glow). On click, a full-screen overlay with a blur effect and progress indicator (e.g., radial loader). 2. 3D Scene Initialization After loading, the camera zooms into a 3D environment (e.g., ancient Rome) along a predefined path. Use a depth-of-field blur to focus on key story elements while secondary details fade. 3. Scroll-Linked Camera Movement The transition hands off to scroll-driven navigation, where scrolling controls the camera’s path through the 3D scene. Annotations: Label this as ‘ScrollTrigger + Three.js integration’ (see [Search Result 1, 7]). 4. Visual Feedback Add micro-interactions (e.g., particles dispersing from the button on click). Include a motion blur effect during the transition to emphasize speed/direction. Technical Notes for Developers: The button triggers a loadScene() function that initializes WebGPU/Three.js rendering [Search Result 7]. Use GSAP for smooth transitions between the 2D UI and 3D environment [Search Result 7]. Animate the camera along a Bézier curve path for cinematic movement [Search Result 4]."
 
 
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.
4
  can you add all the animations, immersive, interactive, webgl and gsap effects like Noomo site I referenced?
5
+ Create a wireframe for a hero section where clicking the ‘Begin Journey’ button triggers an immersive 3D scene transition. The effect should include: 1. Preloader Animation A subtle button hover effect (e.g., scale-up and glow). On click, a full-screen overlay with a blur effect and progress indicator (e.g., radial loader). 2. 3D Scene Initialization After loading, the camera zooms into a 3D environment (e.g., ancient Rome) along a predefined path. Use a depth-of-field blur to focus on key story elements while secondary details fade. 3. Scroll-Linked Camera Movement The transition hands off to scroll-driven navigation, where scrolling controls the camera’s path through the 3D scene. Annotations: Label this as ‘ScrollTrigger + Three.js integration’ (see [Search Result 1, 7]). 4. Visual Feedback Add micro-interactions (e.g., particles dispersing from the button on click). Include a motion blur effect during the transition to emphasize speed/direction. Technical Notes for Developers: The button triggers a loadScene() function that initializes WebGPU/Three.js rendering [Search Result 7]. Use GSAP for smooth transitions between the 2D UI and 3D environment [Search Result 7]. Animate the camera along a Bézier curve path for cinematic movement [Search Result 4]."
6
+ can you make the immersive experience scroll to different sections with About the book, then scroll more and have first product https://www.theendthebook.com/product-page/the-pomegranate-caf%C3%A9 and a brief and add to cart, scroll more and have second product https://www.theendthebook.com/product-page/the-pomegranate-caf%C3%A9-1 and add to cart, then third product for coffee and add to cart, then scroll more and it takes you seamlessly into an about the author section, scroll and it takes you to a CTA to sign up for receiving a newsletter or blog subscribe form that requires an email address to submit, once submitted they will receive a thank you for subscribing message, (please note code inside code not on screen of where to edit or add email and connect to database, and then scroll more to a contact us form (same notation inside code of how to make this work), footer that has copyright 2025 The Pomegranate Cafe by Author J.L. Robb with social media icons fb,IG,patreon, threads, twitter/X, tiktok and substack (again inside code have it so the links are set up and I just need to drop in the correct link and instruct me how to) lastly in footer have a way to go back to the beginning.