Hugging Face's logo

Spaces:
steake
/
chocomelt-bliss-haven
Running

App Files Community
chocomelt-bliss-haven
File size: 4,929 Bytes 
5f1a598
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
94e47c6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
 
// Product data - in a real scenario, this would come from an API
const products = [
    {
        id: 1,
        name: "Classic Hot Chocolate",
        price: "£12.99",
        image: "http://static.photos/food/400x400/1",
        hoverImage: "http://static.photos/food/400x400/2",
        rating: 5,
        flavor: "classic"
    },
    {
        id: 2,
        name: "Zesty Orange Delight",
        price: "£14.99",
        image: "http://static.photos/food/400x400/3",
        hoverImage: "http://static.photos/food/400x400/4",
        rating: 5,
        flavor: "orange"
    },
    {
        id: 3,
        name: "Mint Chocolate Dream",
        price: "£14.99",
        image: "http://static.photos/food/400x400/5",
        hoverImage: "http://static.photos/food/400x400/6",
        rating: 5,
        flavor: "mint"
    },
    {
        id: 4,
        name: "Premium Cocoa Collection",
        price: "£24.99",
        image: "http://static.photos/food/400x400/7",
        hoverImage: "http://static.photos/food/400x400/8",
        rating: 5,
        flavor: "premium"
    }
];

// Load products into the grid
document.addEventListener('DOMContentLoaded', function() {
    const productsGrid = document.getElementById('products-grid');
    
    products.forEach(product => {
        const productCard = document.createElement('div');
        productCard.className = 'product-card bg-white rounded-lg overflow-hidden shadow-md';
        
        let flavorBadge = '';
        if (product.flavor === 'orange') {
            flavorBadge = '<span class="absolute top-2 right-2 bg-zesty-orange text-white px-2 py-1 rounded-full text-xs font-semibold">Orange</span>';
        } else if (product.flavor === 'mint') {
            flavorBadge = '<span class="absolute top-2 right-2 bg-mint-leaf text-white px-2 py-1 rounded-full text-xs font-semibold">Mint</span>';
        } else if (product.flavor === 'premium') {
            flavorBadge = '<span class="absolute top-2 right-2 bg-luxury-gold text-white px-2 py-1 rounded-full text-xs font-semibold">Premium</span>';
        }

        productCard.innerHTML = `
            <div class="relative overflow-hidden">
                <div class="relative h-64">
                    <img src="${product.image}" alt="${product.name}" class="w-full h-full object-cover transition-opacity duration-300">
                    <img src="${product.hoverImage}" alt="${product.name}" class="absolute top-0 left-0 w-full h-full object-cover opacity-0 hover:opacity-100 transition-opacity duration-300">
                    ${flavorBadge}
                </div>
                <div class="p-4">
                    <h3 class="font-semibold text-deep-cocoa mb-2">${product.name}</h3>
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-luxury-gold font-bold">${product.price}</span>
                        <div class="flex text-luxury-gold">
                            ${'<i data-feather="star" class="w-4 h-4 fill-current"></i>'.repeat(product.rating)}
                        </div>
                    </div>
                    <button class="quick-add-btn w-full bg-deep-cocoa hover:bg-milk-chocolate text-white py-2 rounded-lg transition duration-300">
                        Add to Cart
                    </button>
                </div>
            </div>
        `;
        
        productsGrid.appendChild(productCard);
    });

    // Re-initialize feather icons after adding new content
    feather.replace();
});
// Newsletter subscription
document.addEventListener('DOMContentLoaded', function() {
    const newsletterForm = document.getElementById('newsletter-form');
    if (newsletterForm) {
        newsletterForm.addEventListener('submit', function(e) {
            e.preventDefault();
            const email = this.querySelector('input[type="email"]').value;
            alert(`Thank you for subscribing with ${email}! You'll receive our exclusive offers soon.`);
            this.reset();
        });
    }

    // Luxurious Drip Animation on Hero Button
    const heroBtn = document.querySelector('a[href="#products"]');
    if (heroBtn) {
        heroBtn.classList.add('btn-melt');
    }
});

// Animate product cards on scroll
const observerOptions = { threshold: 0.2 };
const productObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.style.opacity = 1;
            entry.target.style.transform = 'translateY(0)';
        }
    });
}, observerOptions);

document.addEventListener('DOMContentLoaded', () => {
    const cards = document.querySelectorAll('.product-card');
    cards.forEach(card => {
        card.style.opacity = 0;
        card.style.transform = 'translateY(30px)';
        card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        productObserver.observe(card);
    });
});