Spaces:
Running
Running
A poetic website where users write small thoughts, which turn into animated flowers growing on the screen. Past entries saved in localStorage as a ‘memory garden.’ No backend - Follow Up Deployment
7a8b62d verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Memory Garden</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @keyframes grow { | |
| 0% { transform: scale(0); opacity: 0; } | |
| 100% { transform: scale(1); opacity: 1; } | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0) rotate(0deg); } | |
| 50% { transform: translateY(-10px) rotate(5deg); } | |
| 100% { transform: translateY(0) rotate(0deg); } | |
| } | |
| .flower { | |
| animation: grow 1.5s ease-out forwards, float 4s ease-in-out infinite; | |
| position: absolute; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .flower:hover { | |
| transform: scale(1.1) ; | |
| z-index: 100; | |
| } | |
| .petal { | |
| position: absolute; | |
| border-radius: 50% 50% 0 50%; | |
| transform-origin: bottom right; | |
| } | |
| .center { | |
| position: absolute; | |
| border-radius: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| .stem { | |
| position: absolute; | |
| background: linear-gradient(to bottom, #7cbd6b, #5a8f4e); | |
| transform-origin: top center; | |
| bottom: 0; | |
| left: 50%; | |
| } | |
| .leaf { | |
| position: absolute; | |
| border-radius: 50% 0 50% 50%; | |
| background: linear-gradient(to bottom right, #7cbd6b, #5a8f4e); | |
| transform-origin: right center; | |
| } | |
| .thought-text { | |
| position: absolute; | |
| font-family: 'Georgia', serif; | |
| font-style: italic; | |
| text-align: center; | |
| width: 120px; | |
| transform: translate(-50%, -50%); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| pointer-events: none; | |
| color: #333; | |
| text-shadow: 0 0 2px white; | |
| } | |
| .flower:hover .thought-text { | |
| opacity: 1; | |
| } | |
| .garden { | |
| position: relative; | |
| min-height: 70vh; | |
| background: linear-gradient(to bottom, #e0f7fa, #b2ebf2); | |
| overflow: hidden; | |
| } | |
| .fade-in { | |
| animation: fadeIn 1s ease-in forwards; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-blue-50 font-serif"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <header class="text-center mb-8 fade-in"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-green-800 mb-2">Memory Garden</h1> | |
| <p class="text-lg text-green-700">Plant your thoughts and watch them bloom</p> | |
| <div class="w-24 h-1 bg-green-300 mx-auto mt-4"></div> | |
| </header> | |
| <div class="max-w-2xl mx-auto mb-8 p-6 bg-white rounded-lg shadow-md fade-in"> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-pen-nib text-green-600 mr-3 text-xl"></i> | |
| <h2 class="text-xl font-semibold text-green-800">Write a Thought</h2> | |
| </div> | |
| <textarea id="thoughtInput" class="w-full p-4 border border-green-300 rounded-lg focus:ring-2 focus:ring-green-400 focus:border-green-400 h-32 resize-none" placeholder="Write a small thought, feeling, or memory..."></textarea> | |
| <div class="flex justify-between items-center mt-4"> | |
| <div class="flex space-x-2"> | |
| <button id="colorPicker" class="w-8 h-8 rounded-full bg-red-300 border-2 border-white shadow-md" title="Flower Color"></button> | |
| <button id="randomColor" class="text-gray-600 hover:text-green-700" title="Random Color"> | |
| <i class="fas fa-random"></i> | |
| </button> | |
| </div> | |
| <button id="plantThought" class="px-6 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors flex items-center"> | |
| <i class="fas fa-seedling mr-2"></i> Plant It | |
| </button> | |
| </div> | |
| </div> | |
| <div class="garden rounded-lg shadow-inner fade-in" id="garden"> | |
| <div class="absolute inset-0 flex items-center justify-center" id="emptyGarden"> | |
| <div class="text-center text-gray-500 p-8 max-w-md"> | |
| <i class="fas fa-leaf text-5xl mb-4 text-green-300"></i> | |
| <h3 class="text-xl font-medium mb-2">Your Garden is Empty</h3> | |
| <p>Write a thought above to plant your first flower. Each thought will bloom uniquely in your memory garden.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 p-6 bg-white rounded-lg shadow-md fade-in"> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-book-open text-green-600 mr-3 text-xl"></i> | |
| <h2 class="text-xl font-semibold text-green-800">Garden Guide</h2> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="p-4 bg-green-50 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-lightbulb text-green-500 mr-2"></i> | |
| <h3 class="font-medium">How It Works</h3> | |
| </div> | |
| <p class="text-sm text-gray-700">Write a thought and click "Plant It" to create a unique flower. Your garden is saved in your browser.</p> | |
| </div> | |
| <div class="p-4 bg-green-50 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-palette text-green-500 mr-2"></i> | |
| <h3 class="font-medium">Customize</h3> | |
| </div> | |
| <p class="text-sm text-gray-700">Choose a color for your flower or let the garden surprise you with a random hue.</p> | |
| </div> | |
| <div class="p-4 bg-green-50 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-trash-alt text-green-500 mr-2"></i> | |
| <h3 class="font-medium">Maintenance</h3> | |
| </div> | |
| <p class="text-sm text-gray-700">Click on any flower to remove it from your garden if it no longer brings you joy.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Color picker setup | |
| const colorPicker = document.getElementById('colorPicker'); | |
| const randomColorBtn = document.getElementById('randomColor'); | |
| const plantBtn = document.getElementById('plantThought'); | |
| const thoughtInput = document.getElementById('thoughtInput'); | |
| const garden = document.getElementById('garden'); | |
| const emptyGarden = document.getElementById('emptyGarden'); | |
| let currentColor = '#fca5a5'; // Default light red | |
| // Initialize garden from localStorage | |
| loadGarden(); | |
| // Set up color picker | |
| colorPicker.addEventListener('click', function() { | |
| const color = prompt('Enter a hex color (e.g., #fca5a5) or color name for your flower:', currentColor); | |
| if (color) { | |
| currentColor = color; | |
| colorPicker.style.backgroundColor = currentColor; | |
| } | |
| }); | |
| // Random color button | |
| randomColorBtn.addEventListener('click', function() { | |
| const colors = [ | |
| '#fca5a5', '#fdba74', '#fcd34d', '#fde047', '#bef264', | |
| '#86efac', '#6ee7b7', '#5eead4', '#67e8f9', '#7dd3fc', | |
| '#93c5fd', '#a5b4fc', '#c4b5fd', '#d8b4fe', '#f0abfc', | |
| '#f9a8d4', '#fda4af', '#fecaca', '#ffedd5', '#fed7aa' | |
| ]; | |
| currentColor = colors[Math.floor(Math.random() * colors.length)]; | |
| colorPicker.style.backgroundColor = currentColor; | |
| }); | |
| // Plant thought button | |
| plantBtn.addEventListener('click', function() { | |
| const thought = thoughtInput.value.trim(); | |
| if (thought) { | |
| createFlower(thought, currentColor); | |
| thoughtInput.value = ''; | |
| saveGarden(); | |
| if (emptyGarden) { | |
| emptyGarden.style.display = 'none'; | |
| } | |
| } else { | |
| alert('Please write a thought before planting.'); | |
| } | |
| }); | |
| // Create a flower element | |
| function createFlower(text, color) { | |
| const flower = document.createElement('div'); | |
| flower.className = 'flower'; | |
| // Random position in garden (avoid edges) | |
| const x = 10 + Math.random() * 80; | |
| const y = 10 + Math.random() * 60; | |
| flower.style.left = `${x}%`; | |
| flower.style.top = `${y}%`; | |
| // Random size | |
| const size = 30 + Math.random() * 50; | |
| const petalCount = 5 + Math.floor(Math.random() * 8); | |
| // Create petals | |
| for (let i = 0; i < petalCount; i++) { | |
| const petal = document.createElement('div'); | |
| petal.className = 'petal'; | |
| petal.style.backgroundColor = color; | |
| petal.style.width = `${size}px`; | |
| petal.style.height = `${size}px`; | |
| // Rotate petals around center | |
| const rotation = (360 / petalCount) * i; | |
| petal.style.transform = `rotate(${rotation}deg)`; | |
| flower.appendChild(petal); | |
| } | |
| // Create center | |
| const center = document.createElement('div'); | |
| center.className = 'center'; | |
| center.style.width = `${size/3}px`; | |
| center.style.height = `${size/3}px`; | |
| center.style.backgroundColor = getContrastColor(color); | |
| flower.appendChild(center); | |
| // Create stem (random height) | |
| const stemHeight = 50 + Math.random() * 100; | |
| const stem = document.createElement('div'); | |
| stem.className = 'stem'; | |
| stem.style.width = '4px'; | |
| stem.style.height = `${stemHeight}px`; | |
| stem.style.transform = `translateX(-50%) rotate(${Math.random() * 10 - 5}deg)`; | |
| flower.appendChild(stem); | |
| // Create leaves (random number) | |
| const leafCount = 1 + Math.floor(Math.random() * 3); | |
| for (let i = 0; i < leafCount; i++) { | |
| const leaf = document.createElement('div'); | |
| leaf.className = 'leaf'; | |
| const leafSize = 15 + Math.random() * 20; | |
| leaf.style.width = `${leafSize}px`; | |
| leaf.style.height = `${leafSize/1.5}px`; | |
| // Position leaves along stem | |
| const | |
| <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=dhishooooom/digital-capsule" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |