pcwjs / index.html
GMA2's picture
Add 2 files
934d348 verified
Raw History Blame Contribute Delete
30.1 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Pomegranate Café - Immersive Experience</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500&display=swap');
:root {
--primary-color: #ef4444;
--secondary-color: #3b82f6;
--accent-color: #8B4513; /* Coffee brown */
}
body {
font-family: 'Inter', sans-serif;
overflow-x: hidden;
scroll-behavior: smooth;
background-color: #000;
color: #fff;
margin: 0;
padding: 0;
}
.header-font {
font-family: 'Playfair Display', serif;
}
/* Preloader styles */
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
opacity: 1;
pointer-events: all;
transition: opacity 0.5s ease;
}
.preloader.loaded {
opacity: 0;
pointer-events: none;
}
.radial-loader {
width: 80px;
height: 80px;
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, 0.1);
border-top-color: var(--primary-color);
animation: spin 1s linear infinite;
position: relative;
}
.radial-loader::after {
content: '';
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, 0.1);
border-top-color: var(--secondary-color);
animation: spin 2s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.progress-text {
margin-top: 20px;
font-size: 1.2rem;
color: white;
}
.progress-bar-container {
width: 300px;
height: 10px;
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
margin-top: 20px;
overflow: hidden;
}
.progress-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
border-radius: 5px;
transition: width 0.3s ease;
}
/* Hero section */
.hero-section {
position: relative;
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.hero-content {
position: relative;
z-index: 10;
text-align: center;
padding: 0 20px;
max-width: 1200px;
}
/* Button styles */
.journey-btn {
position: relative;
display: inline-block;
padding: 18px 36px;
font-size: 1.2rem;
font-weight: 500;
color: white;
background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
border: none;
border-radius: 50px;
cursor: pointer;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
}
.journey-btn:hover {
transform: scale(1.05);
box-shadow: 0 0 25px rgba(239, 68, 68, 0.8);
}
.journey-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, var(--secondary-color), var(--primary-color));
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.journey-btn:hover::before {
opacity: 1;
}
.particle {
position: absolute;
background-color: var(--primary-color);
border-radius: 50%;
pointer-events: none;
z-index: 100;
}
/* Scroll content */
.scroll-content {
position: relative;
z-index: 10;
background-color: rgba(0, 0, 0, 0.7);
color: white;
}
.scroll-section {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 80px 20px;
}
/* Book section */
.book-section {
background-color: rgba(0, 0, 0, 0.8);
padding: 60px 0;
}
/* Product cards */
.product-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
overflow: hidden;
max-width: 800px;
margin: 0 auto;
transition: transform 0.3s ease;
}
.product-card:hover {
transform: translateY(-10px);
}
.product-image {
height: 300px;
background-size: cover;
background-position: center;
}
.add-to-cart {
background-color: var(--accent-color);
color: white;
border: none;
padding: 12px 24px;
border-radius: 30px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
}
.add-to-cart:hover {
background-color: #a0522d;
transform: scale(1.05);
}
/* About author */
.author-section {
background-color: rgba(0, 0, 0, 0.9);
}
.author-image {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
border: 5px solid var(--accent-color);
}
/* Newsletter form */
.newsletter-form {
max-width: 500px;
margin: 0 auto;
}
.form-input {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
padding: 15px 20px;
border-radius: 30px;
width: 100%;
margin-bottom: 15px;
}
.form-input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.submit-btn {
background-color: var(--primary-color);
color: white;
border: none;
padding: 15px 30px;
border-radius: 30px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
width: 100%;
}
.submit-btn:hover {
background-color: #dc2626;
transform: translateY(-3px);
}
/* Contact form */
.contact-form {
max-width: 600px;
margin: 0 auto;
}
textarea.form-input {
min-height: 150px;
}
/* Footer */
.footer {
background-color: #111;
padding: 60px 0 30px;
text-align: center;
}
.social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.1);
margin: 0 8px;
color: white;
transition: all 0.3s ease;
}
.social-icon:hover {
background-color: var(--accent-color);
transform: translateY(-3px);
}
.back-to-top {
display: inline-block;
margin-top: 30px;
color: var(--accent-color);
text-decoration: none;
font-weight: 500;
}
.back-to-top:hover {
text-decoration: underline;
}
/* Success message */
.success-message {
display: none;
background: rgba(0, 200, 0, 0.2);
padding: 20px;
border-radius: 10px;
margin-top: 20px;
}
</style>
</head>
<body>
<!-- Preloader -->
<div class="preloader">
<div class="radial-loader"></div>
<div class="progress-text">Loading immersive experience... 0%</div>
<div class="progress-bar-container">
<div class="progress-bar"></div>
</div>
</div>
<!-- Hero Section -->
<section class="hero-section">
<div class="hero-content">
<h1 class="header-font text-5xl md:text-7xl lg:text-8xl font-bold mb-6">
The Pomegranate Café
</h1>
<p class="text-xl md:text-2xl max-w-2xl mx-auto mb-12">
An immersive journey through the world of J.L. Robb's novel
</p>
<button id="journeyBtn" class="journey-btn">
Begin Your Journey
</button>
</div>
<!-- Background elements -->
<div class="absolute inset-0 bg-black opacity-50 z-0"></div>
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-black z-0"></div>
</section>
<!-- Scroll Content -->
<div class="scroll-content">
<!-- About the Book Section -->
<section id="about-book" class="scroll-section book-section">
<div class="max-w-4xl mx-auto">
<h2 class="header-font text-4xl md:text-5xl mb-8 text-center">About The Book</h2>
<div class="grid md:grid-cols-2 gap-8 items-center">
<div>
<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">
</div>
<div>
<p class="text-lg mb-4">
"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é.
</p>
<p class="text-lg mb-4">
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.
</p>
<p class="text-lg">
J.L. Robb's masterful storytelling weaves together multiple narratives into a rich tapestry that will keep you turning pages late into the night.
</p>
</div>
</div>
</div>
</section>
<!-- First Product Section -->
<section id="product-1" class="scroll-section">
<div class="product-card">
<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>
<div class="p-8">
<h3 class="header-font text-3xl mb-4">The Pomegranate Café - Hardcover Edition</h3>
<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>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold">$24.99</span>
<button class="add-to-cart" data-product="1">Add to Cart</button>
</div>
</div>
</div>
</section>
<!-- Second Product Section -->
<section id="product-2" class="scroll-section">
<div class="product-card">
<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>
<div class="p-8">
<h3 class="header-font text-3xl mb-4">The Pomegranate Café - Paperback Edition</h3>
<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>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold">$14.99</span>
<button class="add-to-cart" data-product="2">Add to Cart</button>
</div>
</div>
</div>
</section>
<!-- Third Product Section -->
<section id="product-3" class="scroll-section">
<div class="product-card">
<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>
<div class="p-8">
<h3 class="header-font text-3xl mb-4">Pomegranate Café Blend Coffee</h3>
<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>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold">$12.99</span>
<button class="add-to-cart" data-product="3">Add to Cart</button>
</div>
</div>
</div>
</section>
<!-- About Author Section -->
<section id="about-author" class="scroll-section author-section">
<div class="max-w-4xl mx-auto text-center">
<h2 class="header-font text-4xl md:text-5xl mb-8">About The Author</h2>
<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">
<div class="max-w-2xl mx-auto">
<p class="text-lg mb-4">
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.
</p>
<p class="text-lg mb-4">
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.
</p>
<p class="text-lg">
When not writing, Robb can be found exploring coffee shops around the world, collecting vintage teapots, and mentoring emerging writers through her popular workshops.
</p>
</div>
</div>
</section>
<!-- Newsletter Section -->
<section id="newsletter" class="scroll-section">
<div class="max-w-4xl mx-auto text-center">
<h2 class="header-font text-4xl md:text-5xl mb-8">Stay Connected</h2>
<p class="text-xl mb-8 max-w-2xl mx-auto">
Join our newsletter for exclusive content, behind-the-scenes insights, and updates on new releases.
</p>
<form id="newsletterForm" class="newsletter-form">
<input type="email" id="newsletterEmail" class="form-input" placeholder="Your email address" required>
<button type="submit" class="submit-btn">Subscribe</button>
</form>
<div id="newsletterSuccess" class="success-message">
<p class="text-lg">Thank you for subscribing! You'll receive a confirmation email shortly.</p>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="scroll-section">
<div class="max-w-4xl mx-auto">
<h2 class="header-font text-4xl md:text-5xl mb-8 text-center">Contact Us</h2>
<form id="contactForm" class="contact-form">
<div class="grid md:grid-cols-2 gap-6 mb-6">
<div>
<input type="text" id="contactName" class="form-input" placeholder="Your Name" required>
</div>
<div>
<input type="email" id="contactEmail" class="form-input" placeholder="Your Email" required>
</div>
</div>
<div class="mb-6">
<input type="text" id="contactSubject" class="form-input" placeholder="Subject">
</div>
<div class="mb-6">
<textarea id="contactMessage" class="form-input" placeholder="Your Message" required></textarea>
</div>
<button type="submit" class="submit-btn">Send Message</button>
</form>
<div id="contactSuccess" class="success-message mt-6">
<p class="text-lg">Thank you for your message! We'll get back to you soon.</p>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="max-w-6xl mx-auto px-4">
<div class="flex justify-center mb-8">
<a href="#" class="social-icon"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
<a href="#" class="social-icon"><i class="fab fa-patreon"></i></a>
<a href="#" class="social-icon"><i class="fab fa-threads"></i></a>
<a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
<a href="#" class="social-icon"><i class="fab fa-tiktok"></i></a>
<a href="#" class="social-icon"><i class="fas fa-book-open"></i></a>
</div>
<p class="text-sm mb-4">
&copy; 2025 The Pomegranate Café by J.L. Robb. All rights reserved.
</p>
<a href="#" class="back-to-top">Back to Top</a>
</div>
</footer>
</div>
<script>
// DOM Elements
const journeyBtn = document.getElementById('journeyBtn');
const preloader = document.querySelector('.preloader');
const progressText = document.querySelector('.progress-text');
const progressBar = document.querySelector('.progress-bar');
const newsletterForm = document.getElementById('newsletterForm');
const newsletterSuccess = document.getElementById('newsletterSuccess');
const contactForm = document.getElementById('contactForm');
const contactSuccess = document.getElementById('contactSuccess');
const addToCartButtons = document.querySelectorAll('.add-to-cart');
// Particle system for button effect
let particles = [];
// Initialize the page
function initPage() {
// Start with the preloader
simulateLoading();
// Set up event listeners
setupEventListeners();
}
// Simulate loading progress
function simulateLoading() {
let progress = 0;
const interval = setInterval(() => {
progress += Math.random() * 10;
if (progress >= 100) {
progress = 100;
clearInterval(interval);
// Complete loading
setTimeout(() => {
progressText.textContent = "Loading complete!";
// Hide preloader after a short delay
setTimeout(() => {
preloader.classList.add('loaded');
setupScrollTrigger();
}, 500);
}, 300);
}
// Update progress
progressText.textContent = `Loading immersive experience... ${Math.floor(progress)}%`;
progressBar.style.width = `${progress}%`;
}, 300);
}
// Set up scroll trigger for sections
function setupScrollTrigger() {
// Create markers for each section
const sections = [
'#about-book',
'#product-1',
'#product-2',
'#product-3',
'#about-author',
'#newsletter',
'#contact'
];
sections.forEach((section) => {
ScrollTrigger.create({
trigger: section,
start: "top center",
end: "bottom center",
onEnter: () => {
// Smooth scroll to section
gsap.to(window, {
duration: 1,
scrollTo: section,
ease: "power2.inOut"
});
}
});
});
}
// Create particles for button click effect
function createParticles(x, y, count = 20) {
for (let i = 0; i < count; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
// Random size and color
const size = Math.random() * 10 + 5;
const hue = 20 + Math.random() * 20; // Red-orange range
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
particle.style.backgroundColor = `hsl(${hue}, 100%, 50%)`;
particle.style.boxShadow = `0 0 ${size}px hsl(${hue}, 100%, 50%)`;
// Position at click point
particle.style.left = `${x}px`;
particle.style.top = `${y}px`;
document.body.appendChild(particle);
// Set random velocity and life
const angle = Math.random() * Math.PI * 2;
const speed = Math.random() * 5 + 2;
const vx = Math.cos(angle) * speed;
const vy = Math.sin(angle) * speed;
const life = Math.random() * 1000 + 500;
particles.push({
element: particle,
x: x,
y: y,
vx: vx,
vy: vy,
life: life,
update: function() {
this.x += this.vx;
this.y += this.vy;
this.vy += 0.1; // Gravity
this.life -= 16; // Assuming 60fps
this.element.style.left = `${this.x}px`;
this.element.style.top = `${this.y}px`;
this.element.style.opacity = this.life / 1000;
}
});
}
}
// Set up all event listeners
function setupEventListeners() {
// Button click handler
journeyBtn.addEventListener('click', (e) => {
// Button click effect
gsap.to(journeyBtn, {
scale: 1.1,
boxShadow: '0 0 30px rgba(239, 68, 68, 0.8)',
duration: 0.3,
yoyo: true,
repeat: 1
});
// Create particles at click position
createParticles(e.clientX, e.clientY);
});
// Button hover effects
journeyBtn.addEventListener('mouseenter', () => {
gsap.to(journeyBtn, {
scale: 1.05,
boxShadow: '0 0 25px rgba(239, 68, 68, 0.8)',
duration: 0.3
});
});
journeyBtn.addEventListener('mouseleave', () => {
gsap.to(journeyBtn, {
scale: 1,
boxShadow: '0 0 15px rgba(239, 68, 68, 0.5)',
duration: 0.3
});
});
// Newsletter form submission
newsletterForm.addEventListener('submit', (e) => {
e.preventDefault();
// Get the email value
const email = document.getElementById('newsletterEmail').value;
// For demo purposes, show the success message
newsletterForm.style.display = 'none';
newsletterSuccess.style.display = 'block';
// Reset form
newsletterForm.reset();
});
// Contact form submission
contactForm.addEventListener('submit', (e) => {
e.preventDefault();
// For demo purposes, show the success message
contactForm.style.display = 'none';
contactSuccess.style.display = 'block';
// Reset form
contactForm.reset();
});
// Add to cart functionality
addToCartButtons.forEach(button => {
button.addEventListener('click', (e) => {
const productId = e.target.getAttribute('data-product');
// Animation effect
gsap.to(e.target, {
scale: 1.1,
backgroundColor: '#4CAF50',
duration: 0.3,
yoyo: true,
repeat: 1,
onComplete: () => {
e.target.style.backgroundColor = ''; // Reset color
}
});
console.log(`Added product ${productId} to cart`);
});
});
// Back to top functionality
document.querySelector('.back-to-top').addEventListener('click', (e) => {
e.preventDefault();
gsap.to(window, {
duration: 1,
scrollTo: 0,
ease: "power2.inOut"
});
});
// Animation loop for particles
function animateParticles() {
requestAnimationFrame(animateParticles);
// Update particles
if (particles.length > 0) {
for (let i = 0; i < particles.length; i++) {
particles[i].update();
if (particles[i].life <= 0) {
particles[i].element.remove();
particles.splice(i, 1);
i--;
}
}
}
}
// Start particle animation
animateParticles();
}
// Initialize the page when everything is loaded
document.addEventListener('DOMContentLoaded', initPage);
</script>
<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>
</html>