Repolode
Enviar
SeanWong17

SeanWong17/Future-Style-Periodic-Table

Una tabla periódica interactiva con estética cyberpunk, modelos orbitales 3D, mapas de calor e interfaz bilingüe, creada con TypeScript y Vite.

Ver en GitHubSitio web
Estrellas
609
Forks
80
Issues abiertos
0
Último commit
hace 8 días

¿Qué es?

Future Style Periodic Table es una tabla periódica interactiva que funciona en el navegador y presenta los 118 elementos químicos con una estética oscura inspirada en el cyberpunk, resaltados de neón por categoría y paneles con efecto de vidrio esmerilado. Al seleccionar un elemento, se abre una vista detallada con su número atómico, masa atómica, configuración electrónica, isótopos y estados de oxidación comunes.

El proyecto incluye un modo de mapa de calor que colorea la tabla según propiedades como el radio atómico, la electronegatividad, la energía de ionización y los puntos de fusión y ebullición. Al hacer clic en un elemento, se abre un modelo 3D simplificado de tipo Bohr, creado con transformaciones 3D de CSS, que se puede arrastrar para girarlo y visualizar a pantalla completa con zoom mediante la rueda del ratón. El proyecto aclara que este modelo tiene fines didácticos y no representa una nube electrónica real basada en probabilidades.

El sitio está escrito en TypeScript con Vite, utiliza CSS Grid para distribuir la tabla y permite cambiar entre chino e inglés. Se puede ejecutar localmente con npm, compilar para GitHub Pages o servir desde un contenedor de Docker.

Funciones clave

  • 01Tabla periódica interactiva con los 118 elementos, filtros por categoría y búsqueda por símbolo, nombre o número atómico.
  • 02Modo de mapa de calor que colorea los elementos según propiedades como la electronegatividad y el punto de fusión.
  • 03Modelo atómico 3D simplificado de tipo Bohr que se puede girar y ver a pantalla completa con zoom.
  • 04Tarjetas de detalle con configuración electrónica, isótopos y estados de oxidación comunes.
  • 05Cambio de idioma entre chino e inglés y diseños adaptables a computadoras y dispositivos móviles.

Casos de uso

  • Enseñar química general o presentar la tabla periódica a estudiantes.
  • Comparar visualmente las propiedades de los elementos mediante mapas de calor.
  • Estudiar un proyecto de referencia sobre transformaciones 3D de CSS y TypeScript con Vite.
  • Alojar una tabla periódica de consulta propia mediante GitHub Pages o Docker.

Inicio rápido

  1. 1

    Clona el repositorio

    git clone https://github.com/SeanWong17/Future-Style-Periodic-Table.git
  2. 2

    Entra en la carpeta del proyecto

    cd Future-Style-Periodic-Table
  3. 3

    Instala las dependencias

    npm install
  4. 4

    Inicia el servidor de desarrollo y abre http://localhost:5173/

    npm run dev

Antes de usarlo

  • Los modelos atómicos 3D son visualizaciones simplificadas del modelo de Bohr con fines didácticos, no representan distribuciones reales de nubes electrónicas.

En colecciones

Herramientas de aprendizaje y educación de código abiertoDiagramas, gráficos y visualizaciones animadas

Temas

#periodic-table#education#chemistry#visualization#typescript#vite#css3#interactive#3d-models#cyberpunks

Preguntas frecuentes

¿Qué es Future-Style-Periodic-Table?
Una tabla periódica interactiva con estética cyberpunk, modelos orbitales 3D, mapas de calor e interfaz bilingüe, creada con TypeScript y Vite. Future Style Periodic Table es una tabla periódica interactiva que funciona en el navegador y presenta los 118 elementos químicos con una estética oscura inspirada en el cyberpunk, resaltados de neón por categoría y paneles con efecto de vidrio esmerilado. Al seleccionar un elemento, se abre una vista detallada con su número atómico, masa atómica, configuración electrónica, isótopos y estados de oxidación comunes.
¿Future-Style-Periodic-Table es gratuito? ¿Qué licencia tiene?
Future-Style-Periodic-Table es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿Future-Style-Periodic-Table sigue mantenido?
Mantenimiento activo. El último commit de Future-Style-Periodic-Table fue el 29 oct 2026.
¿Para qué puedo usar Future-Style-Periodic-Table?
Enseñar química general o presentar la tabla periódica a estudiantes. Comparar visualmente las propiedades de los elementos mediante mapas de calor. Estudiar un proyecto de referencia sobre transformaciones 3D de CSS y TypeScript con Vite. Alojar una tabla periódica de consulta propia mediante GitHub Pages o Docker.
¿Cómo se instala Future-Style-Periodic-Table?
Clona el repositorio: git clone https://github.com/SeanWong17/Future-Style-Periodic-Table.git Entra en la carpeta del proyecto: cd Future-Style-Periodic-Table Instala las dependencias: npm install Inicia el servidor de desarrollo y abre http://localhost:5173/: npm run dev
¿Dónde consigo Future-Style-Periodic-Table?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/SeanWong17/Future-Style-Periodic-Table

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados