Spaces:
Running
Running
File size: 9,879 Bytes
1f7d7d4 7f9d160 1f7d7d4 |
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 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 |
<!DOCTYPE html>
<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>
|