A
Anonymous

Muscle Structure Explorer - Copy this Html, Tailwind Component to your project

Crea un div de dos columnas con las siguientes características: 1. Columna 1: Estructura Muscular del Cuerpo Humano (SVG): Esta columna debe mostrar una estructura muscular en formato SVG del cuerpo humano, con los músculos bien definidos. Interactividad: Al pasar el mouse sobre un músculo específico, este debe resaltarse visualmente (por ejemplo, con un efecto de resplandor o contorno destacado) para enfocarlo, destacando ese músculo de los demás. Al hacer clic en un músculo, como el pecho, la columna 2 debe actualizarse para mostrar información relacionada con ese músculo. El resaltado y la interactividad de los músculos deben funcionar bien con el formato SVG, permitiendo una manipulación fluida de las partes seleccionadas. 2. Columna 2: Categorías y Subcategorías de Músculos: Al hacer clic en un músculo (por ejemplo, el pecho), en esta columna debe aparecer un listado de categorías y subcategorías relacionadas con ese músculo. Por ejemplo, si se hace clic en pecho, deben mostrarse las siguientes categorías y subcategorías: Pectoral Pectoral Mayor Pectoral Medio Pectoral Inferior Cada categoría y subcategoría debe estar representada como un enlace que dirija a una página específica de la app donde se muestren los ejercicios relacionados con ese músculo o submúsculo. Las subcategorías deben ser fácilmente navegables y se deben mostrar de manera jerárquica para ayudar al usuario a identificar y explorar diferentes áreas de interés. 3. Características adicionales: Interactividad: El resaltado de músculos y el cambio dinámico de contenido en la columna 2 deben ser dinámicos y ejecutados mediante JavaScript (puede usarse vanilla JS o jQuery para manejar las interacciones). Diseño responsivo: El diseño debe adaptarse bien a diferentes tamaños de pantalla, especialmente para dispositivos móviles, donde la imagen SVG de la estructura muscular y las categorías deben mostrarse de forma clara y funcional. Animación suave: El resaltado de músculos y el despliegue de categorías deben incluir animaciones suaves para mejorar la experiencia de usuario, como transiciones y efectos de desvanecimiento. El SVG debe ser escalable y de alta calidad para que se vea nítido en diferentes tamaños de pantalla y resoluciones.

Prompt
Component Preview

About

Muscle Structure Explorer - Interactive SVG of human muscles with dynamic categories, responsive design, and smooth animations. Built. Get component free!

Share

Last updated 1 month ago