Spaces:

bhanuripranathi
/

my-first-website

Running

App Files Files Community

bhanuripranathi commited on Jul 29, 2025

Commit

e27c2c7

verified ·

1 Parent(s): 8b89f98

Design a cozy thumbnail generator website with a futuristic, yet warm vibe that appeals to modern design lovers. The page should feature a soft cream background with subtle texture, resembling handmade paper, and have a spacious, inviting feel. At the center of the page, display a sleek, rounded-card container with a warm white background. Inside the card, include a text area with the placeholder 'What should your thumbnail show?' Use a modern, friendly, handwritten-style font that maintains readability. Below this text field, add a 'Create' button in a soft brown color that changes to a slightly darker shade when hovered over. When the user clicks 'Create', the website should send the text they typed to https://goyel.app.n8n.cloud/webhook-test/thumbnail. The endpoint will return the finished thumbnail as an image file. During the waiting period (which takes about a minute), replace the button with a simple message that reads 'Generating your thumbnail...' with a looping animation of a dynamic indicator (like dots appearing one by one or a simple animated circle). The transition should feel smooth and calm. Once the thumbnail is generated and the image is returned from the endpoint, display the finished image in place of the text area with a gentle fade-in effect. Below the image, place a 'Download' link in the same brown color as the button, which allows users to save their thumbnail. The entire experience should feel personal and crafted with care, using colors like warm beige, soft browns, creamy whites, and subtle accent colors (such as sage green). Ensure that the layout is mobile-friendly, providing a cozy, modern, and seamless experience across devices. - Initial Deployment

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +172 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: My First Website
-emoji: 📉
-colorFrom: green
 colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: my-first-website
+emoji: 🐳
+colorFrom: pink
 colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,172 @@
-<!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>Cozy Thumbnail Generator</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;600&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
+    <style>
+        body {
+            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23e5e7eb' fill-opacity='0.2' fill-rule='evenodd'/%3E%3C/svg%3E");
+            font-family: 'Inter', sans-serif;
+        }
+        .handwriting {
+            font-family: 'Caveat', cursive;
+        }
+        @keyframes dotPulse {
+            0%, 60%, 100% { opacity: 0.3; }
+            30% { opacity: 1; }
+        }
+        .dot-1 { animation: dotPulse 1.5s infinite; }
+        .dot-2 { animation: dotPulse 1.5s infinite 0.3s; }
+        .dot-3 { animation: dotPulse 1.5s infinite 0.6s; }
+        .fade-in {
+            animation: fadeIn 0.8s ease-in-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .card {
+            box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
+            transition: all 0.3s ease;
+        }
+        .card:hover {
+            box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.15);
+        }
+    </style>
+</head>
+<body class="min-h-screen bg-amber-50 flex items-center justify-center p-4">
+    <div class="w-full max-w-2xl">
+        <div class="text-center mb-8">
+            <h1 class="text-4xl md:text-5xl font-bold text-amber-900 handwriting mb-2">Cozy Thumbnail Creator</h1>
+            <p class="text-amber-700 max-w-md mx-auto">Craft beautiful thumbnails with a personal touch</p>
+        </div>
+        <div class="card bg-white rounded-2xl p-8 md:p-10 shadow-lg border border-amber-100">
+            <div id="generator-container">
+                <div class="mb-6">
+                    <label for="thumbnail-text" class="block text-amber-800 mb-2 text-lg handwriting">What should your thumbnail show?</label>
+                    <textarea id="thumbnail-text" rows="3" class="w-full px-4 py-3 rounded-lg border-2 border-amber-200 focus:border-amber-400 focus:ring-amber-300 focus:outline-none transition-all resize-none bg-amber-50 text-amber-900 placeholder-amber-400 handwriting text-xl" placeholder="Type your text here..."></textarea>
+                </div>
+                <button id="create-btn" class="w-full bg-amber-600 hover:bg-amber-700 text-white font-medium py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-[1.02] active:scale-95 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
+                    Create Thumbnail
+                </button>
+            </div>
+            <div id="loading-container" class="hidden text-center py-8">
+                <div class="inline-block mb-4">
+                    <svg class="animate-spin h-10 w-10 text-amber-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    </svg>
+                </div>
+                <p class="text-amber-800 text-xl handwriting">Generating your thumbnail<span class="dots"><span class="dot-1">.</span><span class="dot-2">.</span><span class="dot-3">.</span></span></p>
+            </div>
+            <div id="result-container" class="hidden">
+                <div id="thumbnail-result" class="mb-6 fade-in"></div>
+                <a id="download-btn" href="#" class="block w-full bg-amber-600 hover:bg-amber-700 text-white font-medium py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-[1.02] active:scale-95 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 text-center">
+                    Download Thumbnail
+                </a>
+                <button id="new-thumbnail-btn" class="mt-4 w-full bg-white hover:bg-amber-50 text-amber-700 border border-amber-300 font-medium py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-[1.02] active:scale-95 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
+                    Create Another
+                </button>
+            </div>
+        </div>
+        <div class="text-center mt-8 text-amber-600 text-sm">
+            <p>Made with care • Enjoy your beautiful thumbnails</p>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const createBtn = document.getElementById('create-btn');
+            const generatorContainer = document.getElementById('generator-container');
+            const loadingContainer = document.getElementById('loading-container');
+            const resultContainer = document.getElementById('result-container');
+            const thumbnailResult = document.getElementById('thumbnail-result');
+            const downloadBtn = document.getElementById('download-btn');
+            const newThumbnailBtn = document.getElementById('new-thumbnail-btn');
+            const thumbnailText = document.getElementById('thumbnail-text');
+            createBtn.addEventListener('click', function() {
+                const text = thumbnailText.value.trim();
+                if (!text) {
+                    thumbnailText.focus();
+                    return;
+                }
+                // Show loading state
+                generatorContainer.classList.add('hidden');
+                loadingContainer.classList.remove('hidden');
+                // Prepare the data to send
+                const data = {
+                    text: text
+                };
+                // Send the request to the API
+                fetch('https://goyel.app.n8n.cloud/webhook-test/thumbnail', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(data)
+                })
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error('Network response was not ok');
+                    }
+                    return response.blob();
+                })
+                .then(blob => {
+                    // Create object URL from the blob
+                    const imageUrl = URL.createObjectURL(blob);
+                    // Hide loading, show result
+                    loadingContainer.classList.add('hidden');
+                    // Display the image
+                    thumbnailResult.innerHTML = `
+                        <img src="${imageUrl}" alt="Generated thumbnail" class="w-full rounded-lg shadow-md border border-amber-100">
+                    `;
+                    // Set download link
+                    downloadBtn.href = imageUrl;
+                    downloadBtn.download = 'cozy-thumbnail.png';
+                    // Show result container with fade effect
+                    resultContainer.classList.remove('hidden');
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    loadingContainer.classList.add('hidden');
+                    generatorContainer.classList.remove('hidden');
+                    // Show error message
+                    alert('Something went wrong. Please try again.');
+                });
+            });
+            newThumbnailBtn.addEventListener('click', function() {
+                resultContainer.classList.add('hidden');
+                generatorContainer.classList.remove('hidden');
+                thumbnailText.value = '';
+                thumbnailText.focus();
+            });
+        });
+    </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=bhanuripranathi/my-first-website" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>