Spaces:

ParulPandey
/

Parts_of_a_flower

Running

App Files Files Community

Pp commited on Apr 1

Commit

1f7d7d4

verified ·

1 Parent(s): 7f9d160

Update index.html

Browse files

Files changed (1) hide show

index.html +140 -18

index.html CHANGED Viewed

@@ -1,19 +1,141 @@
-<!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>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>