Spaces:

tbaro
/

noel

Running

App Files Files Community

tbaro commited on Dec 25, 2025

Commit

af32bc7

verified ·

1 Parent(s): 2eb27f6

Upload 14 files

Browse files

Files changed (15) hide show

.gitattributes +8 -0
5f5e9622-f3f6-49e9-bfd3-886ffc2d9496.jpg +0 -0
IMG_9450.jpg +3 -0
IMG_9451.jpg +3 -0
IMG_9453.jpg +3 -0
IMG_9461.jpg +3 -0
IMG_9547.jpg +3 -0
README.md +22 -10
app.py +20 -0
index.html +32 -19
main.js +359 -0
pngegg.png +3 -0
style.css +276 -28
z7273034591306_f2041027e92ac75073dc44d48a044a19.jpg +3 -0
z7273040168526_69abfd03e0779e60ce9b0b181353a68b.jpg +3 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,11 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+IMG_9450.jpg filter=lfs diff=lfs merge=lfs -text
+IMG_9451.jpg filter=lfs diff=lfs merge=lfs -text
+IMG_9453.jpg filter=lfs diff=lfs merge=lfs -text
+IMG_9461.jpg filter=lfs diff=lfs merge=lfs -text
+IMG_9547.jpg filter=lfs diff=lfs merge=lfs -text
+pngegg.png filter=lfs diff=lfs merge=lfs -text
+z7273034591306_f2041027e92ac75073dc44d48a044a19.jpg filter=lfs diff=lfs merge=lfs -text
+z7273040168526_69abfd03e0779e60ce9b0b181353a68b.jpg filter=lfs diff=lfs merge=lfs -text

5f5e9622-f3f6-49e9-bfd3-886ffc2d9496.jpg ADDED Viewed

IMG_9450.jpg ADDED Viewed

Git LFS Details

SHA256: d7893c8584d172c8338590fadb160dd9fd56545f52deb6fc8c02be040a80d03c
Pointer size: 132 Bytes
Size of remote file: 8.15 MB

IMG_9451.jpg ADDED Viewed

Git LFS Details

SHA256: 04b3f705b280e455fe16ef4507fcf95cd48e6ca16345205d01decbeeaa7eb187
Pointer size: 132 Bytes
Size of remote file: 8.24 MB

IMG_9453.jpg ADDED Viewed

Git LFS Details

SHA256: 9e116fffd56e8b12b98f6832729f0217fbe3ca4771440e2cd978350806575727
Pointer size: 132 Bytes
Size of remote file: 7.89 MB

IMG_9461.jpg ADDED Viewed

Git LFS Details

SHA256: f464f4b2ccbfbb96a8e6adeb2609dcc1cd074b76d89324557675d82a1fd5cf19
Pointer size: 132 Bytes
Size of remote file: 6.45 MB

IMG_9547.jpg ADDED Viewed

Git LFS Details

SHA256: 82d481d8fc32642defa99ddedfa654533978f08834ad83e8f442728d4ccc1c09
Pointer size: 133 Bytes
Size of remote file: 11.3 MB

README.md CHANGED Viewed

@@ -1,10 +1,22 @@
----
-title: Noel
-emoji: 💻
-colorFrom: red
-colorTo: blue
-sdk: static
-pinned: false
----
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

+---
+title: Merry Christmas em iu của anh
+emoji: 🎄
+colorFrom: green
+colorTo: blue
+sdk: static
+pinned: false
+---
+This project is a client-side Christmas page and can be deployed as a **Static HTML** Hugging Face Space.
+Quick steps to deploy on Hugging Face Spaces (Static HTML):
+1. Create a new Space at https://huggingface.co/spaces and choose "Static HTML" as the SDK.
+2. Push this repository to the new Space (the repo should contain `index.html` at the project root and assets at the repo root: `main.js`, `style.css`, `pngegg.png` and the image files).
+3. No `requirements.txt` is required for a static Space.
+Notes:
+- I updated asset paths in `static/main.js` to be relative so the app works when served statically.
+- You can remove `app.py` (Flask) if you plan to host as a static Space; keep it if you want to run locally with Flask.
+If you'd rather convert this to a Gradio or Streamlit-based Space (so you can add Python-powered interactivity), tell me and I can scaffold that for you.

app.py ADDED Viewed

	@@ -0,0 +1,20 @@

+from flask import Flask, render_template, send_from_directory
+import os
+app = Flask(__name__)
+@app.route('/')
+def index():
+    return render_template('index.html')
+@app.route('/images/<path:filename>')
+def images(filename):
+    # After flattening repository, images are at the project root. Serve from root.
+    return send_from_directory(app.root_path, filename)
+@app.route('/pngegg.png')
+def tree_png():
+    return send_from_directory(app.root_path, 'pngegg.png')
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=5000, debug=True)

index.html CHANGED Viewed

@@ -1,19 +1,32 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Merry Christmas em iu của anh</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="/style.css">
+</head>
+<body class="bg-gradient-to-b from-gray-900 to-gray-800 min-h-screen flex flex-col justify-between relative overflow-hidden">
+    <!-- Snow effect -->
+    <canvas id="snow-canvas" class="absolute inset-0 w-full h-full pointer-events-none z-0"></canvas>
+    <!-- Header -->
+    <header class="text-center py-8">
+        <h1 class="text-4xl md:text-6xl font-bold text-yellow-300 drop-shadow-lg tracking-wide">Merry Christmas em iu của anh</h1>
+    </header>
+    <!-- Main Content -->
+    <main class="flex-1 flex flex-col items-center justify-center relative z-10 w-full">
+        <div id="tree-container" class="relative flex flex-col items-center justify-center w-full max-w-full">
+            <!-- Christmas tree will be rendered here by JS -->
+        </div>
+        <div id="gifts-container" class="flex flex-row flex-wrap justify-center items-end mt-8 space-x-4 w-full max-w-full px-2">
+            <!-- Gift boxes will be rendered here by JS -->
+        </div>
+    </main>
+    <!-- Footer -->
+    <footer class="text-center py-6">
+        <span class="text-lg text-gray-300 font-medium">Made by: @tbaro - your love</span>
+    </footer>
+    <script src="/main.js"></script>
+</body>
+</html>

main.js ADDED Viewed

	@@ -0,0 +1,359 @@

+// --- Christmas Tree, Ornaments, Gifts, Snow, Interactivity ---
+// Romantic quotes (expanded)
+const quotes = [
+    "Love is composed of a single soul inhabiting two bodies. – Aristotle",
+    "You are my heart, my life, my one and only thought. – Arthur Conan Doyle",
+    "I love you not only for what you are, but for what I am when I am with you. – Roy Croft",
+    "Whatever our souls are made of, his and mine are the same. – Emily Brontë",
+    "You are the finest, loveliest, tenderest, and most beautiful person I have ever known. – F. Scott Fitzgerald",
+    "I wish you to know that you have been the last dream of my soul. – Charles Dickens",
+    "If I know what love is, it is because of you. – Hermann Hesse",
+    "You are my sun, my moon, and all my stars. – E.E. Cummings",
+    "I love you more than words can wield the matter. – Shakespeare",
+    "To love and be loved is to feel the sun from both sides. – David Viscott",
+    "Anh yêu em hơn tất cả những gì anh có thể nói bằng lời.",
+    "Em là món quà tuyệt vời nhất mà cuộc đời đã ban tặng cho anh.",
+    "Chỉ cần có em bên cạnh, mọi mùa đông đều trở nên ấm áp."
+];
+// Bauble images - read from project images folder
+const baubleImages = [
+    "5f5e9622-f3f6-49e9-bfd3-886ffc2d9496.jpg",
+    "IMG_9450.jpg",
+    "IMG_9451.jpg",
+    "IMG_9453.jpg",
+    "IMG_9461.jpg",
+    "IMG_9547.jpg",
+    "z7273034591306_f2041027e92ac75073dc44d48a044a19.jpg",
+    "z7273040168526_69abfd03e0779e60ce9b0b181353a68b.jpg"
+];
+// Ornaments storage
+const ornaments = [];
+// Create bauble ornaments - here we just rely on baubleImages used when rendering
+function createBaubleOrnaments() {
+    // This is a placeholder; baubles are rendered directly in renderTree using baubleImages
+}
+// Create smaller decorative ornaments (circles) with relative positions (rx, ry)
+function createTreeOrnaments() {
+    ornaments.length = 0;
+    const count = 12;
+    for (let i = 0; i < count; i++) {
+        ornaments.push({
+            type: 'circle',
+            color: i % 2 === 0 ? '#FFD700' : '#E63946',
+            size: window.innerWidth < 600 ? 12 : 18,
+            rx: 0.25 + Math.random() * 0.5, // relative x position inside tree image
+            ry: 0.2 + Math.random() * 0.6  // relative y position inside tree image
+        });
+    }
+}
+function renderTree() {
+    // Use a single cartoon tree image as centerpiece
+    const treeContainer = document.getElementById('tree-container');
+    treeContainer.innerHTML = '';
+    // wrapper to align baubles relative to the image
+    const wrapper = document.createElement('div');
+    wrapper.className = 'tree-wrapper';
+    wrapper.style.position = 'relative';
+    wrapper.style.display = 'inline-block';
+    const treeImg = document.createElement('img');
+    // use relative route for static deployment
+    treeImg.src = 'pngegg.png';
+    treeImg.alt = 'Christmas Tree';
+    treeImg.className = 'cartoon-tree-img';
+    treeImg.style.display = 'block';
+    treeImg.style.margin = '0 auto';
+    // Larger tree sizes for a premium look
+    // let CSS control responsive width; remove hard-coded inline width
+    // treeImg.style.width = window.innerWidth < 600 ? '220px' : (window.innerWidth < 900 ? '340px' : '480px');
+    treeImg.style.height = 'auto';
+    treeImg.style.position = 'relative';
+    treeImg.style.zIndex = 2;
+    wrapper.appendChild(treeImg);
+    treeContainer.appendChild(wrapper);
+    // Overlay baubles (images) on the tree image in a circular/spiral pattern
+    const baubleCount = baubleImages.length;
+    function placeBaublesAndOrnaments() {
+        const rect = treeImg.getBoundingClientRect();
+        const w = Math.round(rect.width);
+        const h = Math.round(rect.height);
+        // clear previous ornaments inside wrapper
+        wrapper.querySelectorAll('.ornament').forEach(e => e.remove());
+        for (let i = 0; i < baubleCount; i++) {
+            const angle = (i / baubleCount) * Math.PI * 2 - Math.PI / 2;
+            const radius = w * 0.32 + (i % 2) * 18;
+            const x = w / 2 + Math.cos(angle) * radius;
+            const y = h * 0.45 + Math.sin(angle) * (radius * 0.7);
+            const bauble = document.createElement('div');
+            bauble.className = 'ornament';
+            bauble.style.position = 'absolute';
+            bauble.style.left = (x - 22) + 'px';
+            bauble.style.top = (y - 22) + 'px';
+            // larger baubles for better visibility
+            bauble.style.width = window.innerWidth < 600 ? '44px' : (window.innerWidth < 900 ? '64px' : '80px');
+            bauble.style.height = window.innerWidth < 600 ? '44px' : (window.innerWidth < 900 ? '64px' : '80px');
+            bauble.style.background = `url('${baubleImages[i]}') center/cover no-repeat`;
+            bauble.style.border = '3px solid #fff8';
+            bauble.style.boxShadow = '0 6px 18px 4px rgba(0,0,0,0.35), 0 0 24px 6px #FFD70044';
+            bauble.style.borderRadius = '50%';
+            bauble.style.zIndex = 60;
+            // gentle float animation
+            bauble.style.animation = `float ${3 + Math.random()*2}s ${i * 100}ms ease-in-out infinite`;
+            wrapper.appendChild(bauble);
+        }
+        // Render extra small ornaments (circles) from ornaments array (rx/ry - relative coords)
+        ornaments.forEach(o => {
+            if (o.type === 'circle') {
+                const el = document.createElement('div');
+                el.className = 'ornament';
+                const x = Math.round(o.rx * w);
+                const y = Math.round(o.ry * h);
+                const size = o.size || (window.innerWidth < 600 ? 14 : 26);
+                el.style.position = 'absolute';
+                el.style.left = (x - size / 2) + 'px';
+                el.style.top = (y - size / 2) + 'px';
+                el.style.width = size + 'px';
+                el.style.height = size + 'px';
+                el.style.borderRadius = '50%';
+                el.style.background = o.color || '#FFD700';
+                el.style.border = '2px solid #fff4';
+                el.style.boxShadow = '0 6px 14px 3px rgba(0,0,0,0.28)';
+                el.style.zIndex = 55;
+                el.style.opacity = 0.95;
+                wrapper.appendChild(el);
+            }
+        });
+        wrapper.style.width = w + 'px';
+        wrapper.style.height = h + 'px';
+        // Ensure wrapper is centered in container
+        wrapper.style.display = 'block';
+        wrapper.style.margin = '0 auto';
+    }
+    // use load event for reliability
+    treeImg.onload = () => {
+        placeBaublesAndOrnaments();
+        // now we can safely render gift boxes positioned relative to the tree
+        renderGiftBoxes();
+    };
+    if (treeImg.complete) {
+        placeBaublesAndOrnaments();
+        renderGiftBoxes();
+    }
+}
+// Render gift boxes
+function renderGiftBoxes() {
+    const giftsContainer = document.getElementById('gifts-container');
+    giftsContainer.innerHTML = '';
+    const wrapper = document.querySelector('.tree-wrapper');
+    const boxCount = window.innerWidth > 1200 ? 8 : window.innerWidth > 900 ? 6 : (window.innerWidth < 600 ? 3 : 5);
+    // If wrapper exists, place boxes around base of the tree
+    if (wrapper) {
+        // remove any old boxes and any previous row
+        wrapper.querySelectorAll('.gift-box.inside').forEach(e => e.remove());
+        wrapper.querySelectorAll('.boxes-row').forEach(e => e.remove());
+        const w = wrapper.clientWidth;
+        const h = wrapper.clientHeight;
+        // preferred sizes (relative to container)
+        let desiredBox = Math.round(Math.min(110, w * 0.18));
+        let gap = Math.round(Math.max(8, w * 0.02));
+        const padding = 12;
+        // compute max possible box size to fit
+        const maxBox = Math.floor((w - padding * 2 - (boxCount - 1) * gap) / boxCount);
+        let boxSize = Math.max(36, Math.min(desiredBox, maxBox));
+        // if still too big, reduce gap and try again
+        if (boxSize * boxCount + (boxCount - 1) * gap + padding * 2 > w) {
+            gap = Math.max(6, Math.floor((w - padding * 2 - boxCount * boxSize) / Math.max(1, boxCount - 1)));
+            boxSize = Math.max(32, Math.floor((w - padding * 2 - (boxCount - 1) * gap) / boxCount));
+        }
+        const totalWidth = boxCount * boxSize + (boxCount - 1) * gap;
+        // create a centered, responsive row container that sits visually in front of the tree
+        const row = document.createElement('div');
+        row.className = 'boxes-row';
+        row.style.position = 'absolute';
+        row.style.left = '50%';
+        row.style.transform = 'translateX(-50%)';
+        row.style.width = totalWidth + 'px';
+        row.style.display = 'flex';
+        row.style.gap = gap + 'px';
+        row.style.justifyContent = 'center';
+        row.style.flexWrap = 'nowrap';
+        row.style.bottom = '-' + Math.round(boxSize / 2) + 'px';
+        row.style.zIndex = 140;
+        row.style.pointerEvents = 'auto';
+        // fill row
+        for (let i = 0; i < boxCount; i++) {
+            const box = document.createElement('div');
+            box.className = 'gift-box inside';
+            box.style.width = boxSize + 'px';
+            box.style.height = boxSize + 'px';
+            box.style.boxShadow = '0 16px 40px rgba(0,0,0,0.5), 0 0 18px 6px #FFD70033';
+            box.innerHTML = `<div class="gift-ribbon"></div><div class="gift-bow"></div>`;
+            box.onclick = () => showQuotePopup();
+            box.style.animation = `bob 3s ${i * 120}ms ease-in-out infinite`;
+            // subtle rotation
+            box.style.transform = (i % 2 === 0) ? 'rotate(-2deg)' : 'rotate(2deg)';
+            row.appendChild(box);
+        }
+        // append to wrapper so it always aligns with the tree image
+        wrapper.appendChild(row);
+    } else {
+        // fallback: render in gifts container
+        for (let i = 0; i < boxCount; i++) {
+            const box = document.createElement('div');
+            box.className = 'gift-box';
+            box.innerHTML = `<div class="gift-ribbon"></div><div class="gift-bow"></div>`;
+            box.onclick = () => showQuotePopup();
+            giftsContainer.appendChild(box);
+        }
+        giftsContainer.style.justifyContent = 'center';
+        giftsContainer.style.gap = '12px';
+    }
+}
+// Show quote popup
+let lastQuoteIndex = -1;
+function showQuotePopup() {
+    // Remove any existing popup
+    const old = document.querySelector('.quote-popup');
+    if (old) old.remove();
+    // Pick a new quote, not the same as last
+    let idx;
+    do {
+        idx = Math.floor(Math.random() * quotes.length);
+    } while (quotes.length > 1 && idx === lastQuoteIndex);
+    lastQuoteIndex = idx;
+    const popup = document.createElement('div');
+    popup.className = 'quote-popup';
+    const quote = quotes[idx];
+    popup.innerHTML = `<button class="close-btn">×</button><div>${quote}</div>`;
+    popup.querySelector('.close-btn').onclick = () => popup.remove();
+    document.body.appendChild(popup);
+}
+// Snow effect
+function snowEffect() {
+    const canvas = document.getElementById('snow-canvas');
+    const ctx = canvas.getContext('2d');
+    let W = window.innerWidth, H = window.innerHeight;
+    canvas.width = W;
+    canvas.height = H;
+    let mp = 80;
+    let particles = [];
+    for (let i = 0; i < mp; i++) {
+        particles.push({
+            x: Math.random() * W,
+            y: Math.random() * H,
+            r: 2 + Math.random() * 4,
+            d: Math.random() * mp
+        });
+    }
+    function draw() {
+        ctx.clearRect(0, 0, W, H);
+        ctx.fillStyle = "rgba(255,255,255,0.85)";
+        ctx.beginPath();
+        for (let i = 0; i < mp; i++) {
+            let p = particles[i];
+            ctx.moveTo(p.x, p.y);
+            ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2, true);
+        }
+        ctx.fill();
+        update();
+    }
+    let angle = 0;
+    function update() {
+        angle += 0.01;
+        for (let i = 0; i < mp; i++) {
+            let p = particles[i];
+            p.y += Math.cos(angle + p.d) + 1 + p.r / 2;
+            p.x += Math.sin(angle) * 2;
+            if (p.x > W + 5 || p.x < -5 || p.y > H) {
+                if (i % 3 > 0) {
+                    particles[i] = {x: Math.random() * W, y: -10, r: p.r, d: p.d};
+                } else {
+                    if (Math.sin(angle) > 0) {
+                        particles[i] = {x: -5, y: Math.random() * H, r: p.r, d: p.d};
+                    } else {
+                        particles[i] = {x: W + 5, y: Math.random() * H, r: p.r, d: p.d};
+                    }
+                }
+            }
+        }
+    }
+    setInterval(draw, 33);
+    window.addEventListener('resize', () => {
+        W = window.innerWidth;
+        H = window.innerHeight;
+        canvas.width = W;
+        canvas.height = H;
+    });
+}
+// --- INIT & Responsive ---
+function renderAll() {
+    ornaments.length = 0;
+    createBaubleOrnaments();
+    createTreeOrnaments();
+    renderTree();
+    renderGiftBoxes();
+}
+function renderMoonAndStars() {
+    // Add a moon and stars to the background
+    let moon = document.getElementById('moon');
+    if (!moon) {
+        moon = document.createElement('div');
+        moon.id = 'moon';
+        moon.style.position = 'fixed';
+        moon.style.top = '60px';
+        moon.style.right = '80px';
+        moon.style.width = '80px';
+        moon.style.height = '80px';
+        moon.style.borderRadius = '50%';
+        moon.style.background = 'radial-gradient(circle at 60% 40%, #fffbe6 70%, #ffe066 100%, #fff0 100%)';
+        moon.style.boxShadow = '0 0 60px 10px #fffbe6cc, 0 0 120px 40px #ffe06644';
+        moon.style.zIndex = 1;
+        document.body.appendChild(moon);
+    }
+    // Remove old stars
+    document.querySelectorAll('.starry-star').forEach(e => e.remove());
+    // Add random stars
+    for (let i = 0; i < 40; i++) {
+        const star = document.createElement('div');
+        star.className = 'starry-star';
+        star.style.position = 'fixed';
+        star.style.top = (Math.random() * 40 + 10) + '%';
+        star.style.left = (Math.random() * 100) + '%';
+        const size = Math.random() * 2.5 + 1.5;
+        star.style.width = size + 'px';
+        star.style.height = size + 'px';
+        star.style.background = 'white';
+        star.style.borderRadius = '50%';
+        star.style.opacity = 0.7 + Math.random() * 0.3;
+        star.style.zIndex = 1;
+        star.style.boxShadow = `0 0 ${size*4}px ${size/2}px #fff8`;
+        document.body.appendChild(star);
+    }
+}
+document.addEventListener('DOMContentLoaded', () => {
+    renderAll();
+    snowEffect();
+    renderMoonAndStars();
+    window.addEventListener('resize', () => {
+        renderAll();
+        renderMoonAndStars();
+    });
+});

pngegg.png ADDED Viewed

Git LFS Details

SHA256: da3e15cceadd6ee4a9ce3694b9efcbb11169211739ee2745a90ebab7644ae4f6
Pointer size: 132 Bytes
Size of remote file: 3.2 MB

style.css CHANGED Viewed

@@ -1,28 +1,276 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
-}

+/* Premium, warm, romantic Christmas styles */
+body {
+    font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif;
+    background: linear-gradient(180deg, #232946 0%, #1a202c 100%);
+}
+#tree-container {
+    min-height: 320px;
+    min-width: 220px;
+    width: 100vw;
+    max-width: 100vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+/* Christmas tree styles */
+/* Beautiful, lush, premium Christmas tree */
+/* Cartoon tree image style */
+.cartoon-tree-img {
+    display: block;
+    margin: 0 auto;
+    width: min(72vw, 520px);
+    max-width: 92vw;
+    height: auto;
+    filter: drop-shadow(0 0 26px #fff8) drop-shadow(0 0 48px #FFD70044);
+    border-radius: 18px;
+    background: none;
+    z-index: 2;
+    box-shadow: 0 0 0 6px #fff2;
+    transition: width 0.25s ease, height 0.25s ease, transform 0.25s ease;
+}
+@media (max-width: 1200px) {
+    .cartoon-tree-img {
+        width: min(72vw, 420px);
+    }
+}
+@media (max-width: 900px) {
+    .cartoon-tree-img {
+        width: min(80vw, 360px);
+    }
+}
+@media (max-width: 600px) {
+    .cartoon-tree-img {
+        width: min(92vw, 220px);
+    }
+}
+    .christmas-tree {
+        width: 260px;
+        height: 400px;
+    }
+}
+@media (max-width: 600px) {
+    .christmas-tree {
+        width: 220px;
+        height: 320px;
+    }
+}
+.tree-part {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: 50%;
+    background: linear-gradient(135deg, #2d6a4f 60%, #1b4332 100%);
+    box-shadow: 0 0 40px 10px #14532d44;
+    border: 2px solid #fff2;
+}
+/* Glowing star */
+.tree-star {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 60px;
+    height: 60px;
+    z-index: 40;
+    animation: twinkle 2s infinite alternate;
+    filter: drop-shadow(0 0 18px #fff8) drop-shadow(0 0 32px #FFD700);
+}
+@keyframes twinkle {
+    0% { filter: brightness(1.2); }
+    100% { filter: brightness(2.2); }
+}
+/* tree wrapper for relative placements */
+.tree-wrapper {
+    position: relative;
+    display: inline-block;
+    overflow: visible;
+    padding-bottom: 48px; /* space for gifts */
+}
+/* centered row of gift boxes */
+.boxes-row {
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    gap: 18px;
+    pointer-events: auto;
+}
+@media (max-width: 600px) {
+    .boxes-row {
+        gap: 10px;
+    }
+}
+/* star twinkle */
+.starry-star {
+    animation: starTwinkle 3s infinite ease-in-out;
+}
+@keyframes starTwinkle {
+    0% { opacity: 0.6; transform: scale(1); }
+    50% { opacity: 1; transform: scale(1.4); }
+    100% { opacity: 0.6; transform: scale(1); }
+}
+/* Ornaments */
+.ornament {
+    position: absolute;
+    border-radius: 50%;
+    transition: transform 0.3s, box-shadow 0.3s;
+    cursor: pointer;
+    border: 2.5px solid #fff8;
+    box-shadow: 0 0 12px 2px #fff8, 0 0 18px 4px #FFD70044;
+    background: #fff;
+    z-index: 10;
+}
+.ornament:hover {
+    transform: scale(1.18) rotate(-2deg);
+    box-shadow: 0 0 32px 8px #fff9, 0 0 18px 4px #FFD70099;
+    z-index: 99;
+}
+/* Gift boxes */
+.gift-box {
+    width: 100px;
+    height: 100px;
+    background: linear-gradient(135deg, #e63946 60%, #fbefef 100%);
+    border-radius: 14px;
+    box-shadow: 0 12px 36px 0 rgba(0,0,0,0.35);
+    position: relative;
+    cursor: pointer;
+    transition: transform 0.25s, box-shadow 0.25s;
+    margin-bottom: 16px;
+    border: 2.5px solid #fff6;
+    overflow: hidden;
+}
+.gift-box:hover {
+    transform: scale(1.14) translateY(-6px) rotate(-2deg);
+    box-shadow: 0 18px 44px 0 rgba(0,0,0,0.45), 0 0 18px 6px #FFD70088;
+}
+.gift-box.inside {
+    cursor: pointer;
+}
+@keyframes bob {
+    0% { transform: translateY(0); }
+    50% { transform: translateY(-8px); }
+    100% { transform: translateY(0); }
+}
+@keyframes float {
+    0% { transform: translateY(0); }
+    50% { transform: translateY(-6px); }
+    100% { transform: translateY(0); }
+}
+@media (max-width: 900px) {
+    .gift-box {
+        width: 80px;
+        height: 80px;
+    }
+    .gift-ribbon {
+        width: 80px;
+        top: 28px;
+    }
+    .gift-bow {
+        left: 24px;
+        top: 16px;
+    }
+}
+@media (max-width: 600px) {
+    .gift-box {
+        width: 56px;
+        height: 56px;
+    }
+    .gift-ribbon {
+        width: 56px;
+        top: 18px;
+    }
+    .gift-bow {
+        left: 12px;
+        top: 6px;
+        width: 10px;
+        height: 10px;
+    }
+}
+.gift-ribbon {
+    position: absolute;
+    top: 46%;
+    left: 0;
+    width: 100%;
+    height: 12px;
+    background: linear-gradient(90deg, #c1121f 30%, #e63946 70%);
+    border-radius: 6px;
+    box-shadow: inset 0 -2px 6px rgba(0,0,0,0.25);
+}
+.gift-ribbon::before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: -8px;
+    width: 12px;
+    height: 32px;
+    background: linear-gradient(180deg, #ffdede, #ff7b7b);
+    border-radius: 4px;
+    opacity: 0.9;
+}
+.gift-bow {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 18px;
+    height: 18px;
+    background: radial-gradient(circle, #fff 40%, #ffccd5 100%);
+    border-radius: 6px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+}
+/* Popup styles */
+ .quote-popup {
+    position: fixed;
+    left: 50%;
+    top: 60%;
+    transform: translate(-50%, -50%);
+    background: rgba(34, 40, 49, 0.98);
+    color: #ffd6e0;
+    border-radius: 16px;
+    box-shadow: 0 8px 32px 0 #0008;
+    padding: 32px 40px;
+    font-size: 1.25rem;
+    font-family: 'Georgia', serif;
+    z-index: 50;
+    animation: fadeIn 0.5s;
+    max-width: 90vw;
+    word-break: break-word;
+}
+@media (max-width: 600px) {
+    .quote-popup {
+        padding: 16px 10px;
+        font-size: 1rem;
+    }
+}
+@keyframes fadeIn {
+    from { opacity: 0; transform: translate(-50%, -60%); }
+    to { opacity: 1; transform: translate(-50%, -50%); }
+}
+.quote-popup .close-btn {
+    position: absolute;
+    top: 12px;
+    right: 18px;
+    background: none;
+    border: none;
+    color: #fff;
+    font-size: 1.5rem;
+    cursor: pointer;
+}

z7273034591306_f2041027e92ac75073dc44d48a044a19.jpg ADDED Viewed

Git LFS Details

SHA256: 5d4ec32f948c19e7ab8f3178ef8959fa85bbac2633d54c9563f3938da155f2bc
Pointer size: 131 Bytes
Size of remote file: 363 kB

z7273040168526_69abfd03e0779e60ce9b0b181353a68b.jpg ADDED Viewed

Git LFS Details

SHA256: e3371b5489b55c91ef8794450b21bacb723c0885fecd73632b3199c570e94b41
Pointer size: 131 Bytes
Size of remote file: 690 kB