Add 2 files
Browse files- index.html +403 -320
- 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>
|
| 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=
|
| 13 |
|
| 14 |
body {
|
| 15 |
-
font-family: '
|
| 16 |
-
background-color: #f5f1e6;
|
| 17 |
-
color: #3a3226;
|
| 18 |
overflow-x: hidden;
|
|
|
|
| 19 |
}
|
| 20 |
|
| 21 |
.header-font {
|
| 22 |
-
font-family: '
|
| 23 |
}
|
| 24 |
|
| 25 |
-
|
| 26 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 27 |
background-size: cover;
|
| 28 |
background-position: center;
|
| 29 |
-
|
| 30 |
-
background-color: rgba(90, 60, 30, 0.7);
|
| 31 |
}
|
| 32 |
|
| 33 |
-
.
|
| 34 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 35 |
}
|
| 36 |
|
| 37 |
-
|
| 38 |
-
|
| 39 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 40 |
position: relative;
|
|
|
|
|
|
|
| 41 |
}
|
| 42 |
|
| 43 |
-
.
|
| 44 |
content: '';
|
| 45 |
position: absolute;
|
|
|
|
|
|
|
| 46 |
width: 20px;
|
| 47 |
height: 20px;
|
| 48 |
-
border:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 49 |
}
|
| 50 |
|
| 51 |
-
.
|
| 52 |
-
|
| 53 |
-
|
| 54 |
-
border-right: none;
|
| 55 |
-
border-bottom: none;
|
| 56 |
}
|
| 57 |
|
| 58 |
-
|
| 59 |
-
|
| 60 |
-
|
| 61 |
-
|
| 62 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 63 |
}
|
| 64 |
|
|
|
|
| 65 |
.scroll-down {
|
| 66 |
position: absolute;
|
| 67 |
-
bottom:
|
| 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(-
|
| 79 |
}
|
| 80 |
60% {
|
| 81 |
-
transform: translateY(-
|
| 82 |
}
|
| 83 |
}
|
| 84 |
|
| 85 |
-
|
| 86 |
-
|
| 87 |
-
|
| 88 |
-
|
| 89 |
-
|
| 90 |
-
|
| 91 |
-
|
| 92 |
-
|
| 93 |
-
|
| 94 |
-
|
| 95 |
-
|
| 96 |
-
|
| 97 |
-
|
| 98 |
-
|
| 99 |
-
|
| 100 |
-
|
| 101 |
-
|
| 102 |
-
|
| 103 |
-
|
| 104 |
-
|
| 105 |
-
|
| 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 |
-
<!--
|
| 158 |
-
<
|
| 159 |
-
<div class="
|
| 160 |
-
<div class="
|
| 161 |
-
<div class="
|
| 162 |
-
|
| 163 |
-
|
| 164 |
-
|
| 165 |
-
|
| 166 |
-
|
| 167 |
-
|
| 168 |
-
|
| 169 |
-
|
| 170 |
-
|
| 171 |
-
</
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 172 |
</div>
|
| 173 |
-
<div class="scroll-down">
|
| 174 |
-
<i class="fas fa-chevron-down
|
| 175 |
</div>
|
|
|
|
| 176 |
</section>
|
| 177 |
-
|
| 178 |
-
<!--
|
| 179 |
-
<section id="
|
| 180 |
-
<div class="
|
| 181 |
-
<div class="
|
| 182 |
-
<
|
| 183 |
-
|
| 184 |
-
|
| 185 |
-
|
| 186 |
-
|
| 187 |
-
|
| 188 |
-
|
| 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 |
-
<!--
|
| 232 |
-
<section id="
|
| 233 |
-
<div class="
|
| 234 |
-
|
| 235 |
-
|
| 236 |
-
<div class="
|
| 237 |
-
<
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 238 |
|
| 239 |
-
<div
|
| 240 |
-
<
|
| 241 |
-
<
|
| 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
|
| 246 |
-
<
|
| 247 |
-
|
| 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 |
-
<!--
|
| 260 |
-
<section class="
|
| 261 |
-
<div class="
|
| 262 |
-
|
| 263 |
-
|
| 264 |
-
<div class="
|
| 265 |
-
<
|
| 266 |
-
<
|
| 267 |
-
|
| 268 |
-
|
| 269 |
-
|
| 270 |
-
|
| 271 |
-
|
| 272 |
-
<
|
| 273 |
</div>
|
| 274 |
-
|
| 275 |
-
|
| 276 |
-
|
| 277 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 278 |
</div>
|
| 279 |
-
|
| 280 |
-
|
| 281 |
-
|
| 282 |
-
|
| 283 |
-
|
| 284 |
-
|
| 285 |
-
|
|
|
|
|
|
|
| 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 |
-
//
|
| 298 |
-
|
| 299 |
-
|
| 300 |
-
|
| 301 |
-
|
| 302 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 303 |
});
|
| 304 |
-
|
| 305 |
-
|
| 306 |
-
|
| 307 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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 |
-
|
| 319 |
-
|
| 320 |
-
|
| 321 |
-
|
| 322 |
-
|
| 323 |
-
|
| 324 |
-
|
| 325 |
-
|
| 326 |
-
|
| 327 |
-
|
| 328 |
-
|
| 329 |
-
|
| 330 |
-
|
| 331 |
-
|
| 332 |
-
|
| 333 |
-
|
| 334 |
-
|
| 335 |
-
|
| 336 |
-
|
| 337 |
-
|
| 338 |
-
|
| 339 |
-
|
| 340 |
-
|
| 341 |
-
|
| 342 |
-
|
| 343 |
-
|
| 344 |
-
|
| 345 |
-
|
| 346 |
-
|
| 347 |
-
|
| 348 |
-
|
| 349 |
-
|
| 350 |
-
|
| 351 |
-
|
| 352 |
-
|
| 353 |
-
|
| 354 |
-
|
| 355 |
-
|
| 356 |
-
|
| 357 |
-
|
| 358 |
-
|
| 359 |
-
|
| 360 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 361 |
}
|
| 362 |
});
|
| 363 |
-
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 364 |
|
| 365 |
// Scroll down arrow behavior
|
| 366 |
-
|
| 367 |
-
|
| 368 |
-
|
| 369 |
-
|
| 370 |
-
window.
|
| 371 |
-
|
| 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
|
| 390 |
document.addEventListener('DOMContentLoaded', () => {
|
| 391 |
-
//
|
| 392 |
-
|
| 393 |
-
|
| 394 |
-
|
| 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.
|