Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Learn About Flowers!</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| /* Use Inter font */ | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| overscroll-behavior: none; /* Prevent pull-to-refresh */ | |
| } | |
| /* Custom styles for SVG parts */ | |
| .flower-part { | |
| cursor: pointer; | |
| transition: filter 0.3s ease, transform 0.3s ease; | |
| /* Add a subtle drop shadow for better definition */ | |
| filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2)); | |
| } | |
| .flower-part:hover { | |
| filter: brightness(1.1) drop-shadow(0 4px 4px rgba(0,0,0,0.3)); | |
| transform: scale(1.03); /* Slightly enlarge on hover */ | |
| } | |
| .flower-part.selected { | |
| filter: brightness(1.2) drop-shadow(0 5px 5px rgba(0,0,0,0.4)); | |
| stroke: #3b82f6; /* Blue outline when selected */ | |
| stroke-width: 3; /* Adjusted stroke width slightly for larger size */ | |
| transform: scale(1.05); | |
| } | |
| /* Style for the description box */ | |
| #description-box { | |
| min-height: 100px; /* Ensure space even when empty */ | |
| transition: background-color 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-green-100 to-blue-100 min-h-screen flex flex-col items-center justify-center p-4"> | |
| <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-4xl text-center"> | |
| <h1 class="text-3xl font-bold text-pink-600 mb-4">Explore the Parts of a Flower!</h1> | |
| <p class="text-gray-700 mb-6">Click on a part of the flower below to learn its name and what it does.</p> | |
| <div class="flex flex-col md:flex-row items-center justify-center gap-8"> | |
| <div class="w-full md:w-1/2 flex justify-center"> | |
| <svg id="flower-svg" viewBox="0 0 200 250" class="w-96 h-auto"> {/* Changed w-64 to w-96 */} | |
| <line x1="100" y1="150" x2="100" y2="240" stroke="green" stroke-width="5" /> | |
| <path id="sepal1" data-name="Sepals" data-description="These small green leaves protect the flower bud before it opens." class="flower-part fill-green-600" d="M 100 150 Q 90 160 85 170 T 90 180 L 100 150 Z" /> | |
| <path id="sepal2" data-name="Sepals" data-description="These small green leaves protect the flower bud before it opens." class="flower-part fill-green-600" d="M 100 150 Q 110 160 115 170 T 110 180 L 100 150 Z" /> | |
| <path id="sepal3" data-name="Sepals" data-description="These small green leaves protect the flower bud before it opens." class="flower-part fill-green-600" d="M 100 150 Q 85 155 75 160 T 80 175 L 100 150 Z" transform="rotate(10 100 150)" /> | |
| <path id="sepal4" data-name="Sepals" data-description="These small green leaves protect the flower bud before it opens." class="flower-part fill-green-600" d="M 100 150 Q 115 155 125 160 T 120 175 L 100 150 Z" transform="rotate(-10 100 150)" /> | |
| <path id="petal1" data-name="Petal" data-description="Petals are often bright and colorful to attract bees and butterflies for pollination." class="flower-part fill-pink-400" d="M 100 150 Q 100 100 140 100 T 150 140 L 100 150 Z" /> | |
| <path id="petal2" data-name="Petal" data-description="Petals are often bright and colorful to attract bees and butterflies for pollination." class="flower-part fill-pink-400" d="M 100 150 Q 100 100 60 100 T 50 140 L 100 150 Z" /> | |
| <path id="petal3" data-name="Petal" data-description="Petals are often bright and colorful to attract bees and butterflies for pollination." class="flower-part fill-pink-400" d="M 100 150 Q 60 130 50 80 T 90 60 L 100 150 Z" /> | |
| <path id="petal4" data-name="Petal" data-description="Petals are often bright and colorful to attract bees and butterflies for pollination." class="flower-part fill-pink-400" d="M 100 150 Q 140 130 150 80 T 110 60 L 100 150 Z" /> | |
| <path id="petal5" data-name="Petal" data-description="Petals are often bright and colorful to attract bees and butterflies for pollination." class="flower-part fill-pink-400" d="M 100 150 Q 100 180 130 190 T 100 150 Z" transform="rotate(180 100 150)" /> | |
| <ellipse id="ovary" data-name="Ovary" data-description="The ovary is at the bottom of the pistil and contains tiny ovules that can become seeds." class="flower-part fill-green-300" cx="100" cy="145" rx="10" ry="7" /> | |
| <line id="style" data-name="Style" data-description="The style is the stalk that connects the stigma to the ovary." class="flower-part" x1="100" y1="140" x2="100" y2="120" stroke="#a3e635" stroke-width="3" /> | |
| <circle id="stigma" data-name="Stigma" data-description="The stigma is the sticky top part of the pistil that catches pollen." class="flower-part fill-yellow-500" cx="100" cy="118" r="5" /> | |
| <line id="filament1" data-name="Filament" data-description="The filament is the thin stalk that holds up the anther." class="flower-part" x1="85" y1="140" x2="80" y2="125" stroke="#fbbf24" stroke-width="2" /> | |
| <line id="filament2" data-name="Filament" data-description="The filament is the thin stalk that holds up the anther." class="flower-part" x1="115" y1="140" x2="120" y2="125" stroke="#fbbf24" stroke-width="2" /> | |
| <line id="filament3" data-name="Filament" data-description="The filament is the thin stalk that holds up the anther." class="flower-part" x1="90" y1="145" x2="75" y2="135" stroke="#fbbf24" stroke-width="2" /> | |
| <line id="filament4" data-name="Filament" data-description="The filament is the thin stalk that holds up the anther." class="flower-part" x1="110" y1="145" x2="125" y2="135" stroke="#fbbf24" stroke-width="2" /> | |
| <ellipse id="anther1" data-name="Anther" data-description="The anther is at the top of the stamen and makes pollen." class="flower-part fill-orange-500" cx="80" cy="123" rx="4" ry="3" /> | |
| <ellipse id="anther2" data-name="Anther" data-description="The anther is at the top of the stamen and makes pollen." class="flower-part fill-orange-500" cx="120" cy="123" rx="4" ry="3" /> | |
| <ellipse id="anther3" data-name="Anther" data-description="The anther is at the top of the stamen and makes pollen." class="flower-part fill-orange-500" cx="75" cy="133" rx="4" ry="3" /> | |
| <ellipse id="anther4" data-name="Anther" data-description="The anther is at the top of the stamen and makes pollen." class="flower-part fill-orange-500" cx="125" cy="133" rx="4" ry="3" /> | |
| </svg> | |
| </div> | |
| <div id="description-box" class="w-full md:w-1/2 bg-blue-50 rounded-lg p-4 border border-blue-200 shadow-inner text-left"> | |
| <h2 id="part-name" class="text-xl font-semibold text-blue-800 mb-2">Flower Part Name</h2> | |
| <p id="part-description" class="text-gray-700">Click on a part of the flower to learn more!</p> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Get references to HTML elements | |
| const flowerParts = document.querySelectorAll('.flower-part'); | |
| const partNameElement = document.getElementById('part-name'); | |
| const partDescriptionElement = document.getElementById('part-description'); | |
| const descriptionBox = document.getElementById('description-box'); | |
| let selectedPart = null; // Keep track of the currently selected part | |
| // Add click event listener to each flower part | |
| flowerParts.forEach(part => { | |
| part.addEventListener('click', (event) => { | |
| // Prevent click event from bubbling up to parent elements if necessary | |
| event.stopPropagation(); | |
| // Get the name and description from data attributes | |
| const name = part.dataset.name; | |
| const description = part.dataset.description; | |
| // Update the description box | |
| partNameElement.textContent = name; | |
| partDescriptionElement.textContent = description; | |
| descriptionBox.classList.remove('bg-blue-50'); // Reset background | |
| descriptionBox.classList.add('bg-yellow-100'); // Indicate update | |
| // Remove 'selected' class from previously selected part | |
| if (selectedPart) { | |
| selectedPart.classList.remove('selected'); | |
| } | |
| // Add 'selected' class to the clicked part | |
| part.classList.add('selected'); | |
| selectedPart = part; // Update the selected part | |
| // Optional: Reset background color after a short delay | |
| setTimeout(() => { | |
| descriptionBox.classList.remove('bg-yellow-100'); | |
| descriptionBox.classList.add('bg-blue-50'); | |
| }, 500); // 0.5 seconds | |
| }); | |
| }); | |
| // Optional: Add a click listener to the body to deselect if clicking outside the flower | |
| document.body.addEventListener('click', (event) => { | |
| // Check if the click was outside the SVG flower area | |
| if (!event.target.closest('#flower-svg') && selectedPart) { | |
| selectedPart.classList.remove('selected'); | |
| selectedPart = null; | |
| partNameElement.textContent = 'Flower Part Name'; // Reset title | |
| partDescriptionElement.textContent = 'Click on a part of the flower to learn more!'; // Reset description | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |