Add 2 files
Browse files- index.html +549 -65
- 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>
|
| 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:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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 |
-
|
| 225 |
</h1>
|
| 226 |
<p class="text-xl md:text-2xl max-w-2xl mx-auto mb-12">
|
| 227 |
-
|
| 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 |
-
<
|
| 247 |
-
|
| 248 |
-
|
| 249 |
-
<
|
| 250 |
-
|
| 251 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 252 |
</div>
|
| 253 |
</section>
|
| 254 |
|
| 255 |
-
<
|
|
|
|
| 256 |
<div class="max-w-4xl mx-auto text-center">
|
| 257 |
-
<h2 class="header-font text-4xl md:text-5xl mb-8">The
|
| 258 |
-
<
|
| 259 |
-
|
| 260 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 261 |
</div>
|
| 262 |
</section>
|
| 263 |
|
| 264 |
-
<
|
|
|
|
| 265 |
<div class="max-w-4xl mx-auto text-center">
|
| 266 |
-
<h2 class="header-font text-4xl md:text-5xl mb-8">
|
| 267 |
-
<p class="text-
|
| 268 |
-
|
| 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(
|
| 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
|
| 346 |
-
|
| 347 |
|
| 348 |
// Handle window resize
|
| 349 |
window.addEventListener('resize', onWindowResize);
|
|
@@ -352,8 +636,8 @@
|
|
| 352 |
animate();
|
| 353 |
}
|
| 354 |
|
| 355 |
-
// Create
|
| 356 |
-
function
|
| 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 |
-
//
|
| 370 |
const buildingMaterial = new THREE.MeshStandardMaterial({
|
| 371 |
color: 0xC0C0C0,
|
| 372 |
roughness: 0.7,
|
| 373 |
metalness: 0.3
|
| 374 |
});
|
| 375 |
|
| 376 |
-
//
|
| 377 |
-
const
|
| 378 |
-
const
|
| 379 |
-
|
| 380 |
-
|
| 381 |
-
|
| 382 |
-
|
| 383 |
-
|
| 384 |
-
const
|
| 385 |
-
|
| 386 |
-
|
| 387 |
-
scene.add(
|
| 388 |
-
|
| 389 |
-
//
|
| 390 |
-
const
|
| 391 |
-
const
|
| 392 |
-
|
| 393 |
-
|
| 394 |
-
|
| 395 |
-
|
| 396 |
-
|
| 397 |
-
|
| 398 |
-
|
| 399 |
-
|
| 400 |
-
|
| 401 |
-
|
| 402 |
-
|
| 403 |
-
const
|
| 404 |
-
|
| 405 |
-
|
| 406 |
-
|
| 407 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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 |
-
|
| 533 |
-
|
| 534 |
-
|
| 535 |
-
|
| 536 |
-
|
| 537 |
-
|
| 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 |
+
© 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.
|