Skip to content

Commit db7bb6b

Browse files
fl2onfl2on
authored
Add files via upload
1 parent bc24d77 commit db7bb6b

File tree

2 files changed

+542
-0
lines changed

2 files changed

+542
-0
lines changed

‎index.html‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,10 @@ <h1 class="text-5xl sm:text-6xl lg:text-7xl xl:text-8xl font-bold mb-6 leading-t
155155
<span class="w-1.5 h-1.5 bg-pink-400 rounded-full mr-2"></span>
156156
21+ Tools
157157
</div>
158+
<div class="flex items-center">
159+
<span class="w-1.5 h-1.5 bg-yellow-400 rounded-full mr-2"></span>
160+
Logisim Built-In
161+
</div>
158162
</div>
159163
</div>
160164
</div>
@@ -212,6 +216,10 @@ <h2 class="text-4xl sm:text-5xl font-bold mb-4">
212216
<i class="fas fa-project-diagram mb-2 text-xl"></i>
213217
<span class="text-xs font-medium">Circuit Designer</span>
214218
</button>
219+
<button class="tab-btn flex-shrink-0" data-tab="logisim">
220+
<i class="fas fa-laptop-code mb-2 text-xl"></i>
221+
<span class="text-xs font-medium">Logisim</span>
222+
</button>
215223
<button class="tab-btn flex-shrink-0" data-tab="converters">
216224
<i class="fas fa-exchange-alt mb-2 text-xl"></i>
217225
<span class="text-xs font-medium">Converters</span>
@@ -1540,6 +1548,142 @@ <h3 class="text-white font-semibold">Digital Forge AI</h3>
15401548
</div>
15411549
</div>
15421550

1551+
<!-- Logisim Tab -->
1552+
<div id="logisim-content" class="tab-content hidden">
1553+
<div class="space-y-6">
1554+
<!-- Logisim Header -->
1555+
<div class="card p-6">
1556+
<div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
1557+
<div class="flex items-center">
1558+
<i class="fas fa-laptop-code text-4xl text-purple-400 mr-4"></i>
1559+
<div>
1560+
<h3 class="text-2xl font-bold">Logisim Circuit Simulator</h3>
1561+
<p class="text-white/50 text-sm mt-1">Diseña y simula circuitos digitales completos en tu navegador</p>
1562+
</div>
1563+
</div>
1564+
<div class="flex gap-2">
1565+
<a href="https://github.com/De-Rossi-Consulting/logisim.app" target="_blank" rel="noopener noreferrer"
1566+
class="px-4 py-2 bg-white/5 hover:bg-white/10 rounded-lg text-sm flex items-center transition-colors">
1567+
<i class="fab fa-github mr-2"></i>
1568+
Ver Código Fuente
1569+
</a>
1570+
</div>
1571+
</div>
1572+
</div>
1573+
1574+
<!-- Logisim Features -->
1575+
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
1576+
<div class="card p-4">
1577+
<div class="flex items-center mb-2">
1578+
<i class="fas fa-microchip text-2xl text-purple-400 mr-3"></i>
1579+
<h4 class="font-bold">Componentes Completos</h4>
1580+
</div>
1581+
<p class="text-white/60 text-sm">Compuertas lógicas, flip-flops, multiplexores, ALUs y más</p>
1582+
</div>
1583+
<div class="card p-4">
1584+
<div class="flex items-center mb-2">
1585+
<i class="fas fa-play-circle text-2xl text-green-400 mr-3"></i>
1586+
<h4 class="font-bold">Simulación en Tiempo Real</h4>
1587+
</div>
1588+
<p class="text-white/60 text-sm">Ejecuta y depura tus circuitos interactivamente</p>
1589+
</div>
1590+
<div class="card p-4">
1591+
<div class="flex items-center mb-2">
1592+
<i class="fas fa-save text-2xl text-blue-400 mr-3"></i>
1593+
<h4 class="font-bold">Guarda tus Proyectos</h4>
1594+
</div>
1595+
<p class="text-white/60 text-sm">Exporta e importa archivos .circ fácilmente</p>
1596+
</div>
1597+
</div>
1598+
1599+
<!-- Logisim Embedded -->
1600+
<div class="card p-0 overflow-hidden">
1601+
<div class="bg-gradient-to-r from-purple-500/20 to-blue-500/20 p-4 border-b border-white/10 flex justify-between items-center">
1602+
<div>
1603+
<h3 class="font-bold text-lg flex items-center gap-2">
1604+
<i class="fas fa-microchip text-purple-400"></i>
1605+
Simulador de Circuitos Digitales - Logisim
1606+
</h3>
1607+
<p class="text-white/60 text-sm">Diseña y simula circuitos directamente en tu navegador</p>
1608+
</div>
1609+
<a href="pages/logisim.html" target="_blank" class="px-4 py-2 bg-purple-500 hover:bg-purple-600 rounded-lg font-semibold transition-all flex items-center gap-2">
1610+
<i class="fas fa-expand"></i>
1611+
Abrir en Pestaña Nueva
1612+
</a>
1613+
</div>
1614+
<iframe
1615+
src="https://logisim.app/"
1616+
class="w-full border-0"
1617+
style="height: 600px; min-height: 500px;"
1618+
title="Logisim Circuit Simulator"
1619+
loading="lazy"
1620+
sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-downloads allow-modals">
1621+
</iframe>
1622+
</div>
1623+
1624+
<!-- Features Grid -->
1625+
<div class="grid md:grid-cols-2 gap-6">
1626+
<!-- Info Card -->
1627+
<div class="card p-6">
1628+
<h4 class="font-bold text-lg mb-4 flex items-center">
1629+
<i class="fas fa-info-circle text-purple-400 mr-3"></i>
1630+
Acerca de Logisim
1631+
</h4>
1632+
<div class="space-y-3 text-white/70 text-sm">
1633+
<p>
1634+
<strong class="text-white">Logisim</strong> es una herramienta educativa para diseñar y simular
1635+
circuitos digitales. Originalmente desarrollada por Carl Burch, esta versión ha sido
1636+
portada al navegador usando WebAssembly.
1637+
</p>
1638+
<div class="flex flex-wrap gap-2 mt-4">
1639+
<span class="px-3 py-1 bg-purple-500/20 text-purple-400 rounded-full text-xs">
1640+
WebAssembly
1641+
</span>
1642+
<span class="px-3 py-1 bg-blue-500/20 text-blue-400 rounded-full text-xs">
1643+
Circuit Design
1644+
</span>
1645+
<span class="px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-xs">
1646+
Education
1647+
</span>
1648+
<span class="px-3 py-1 bg-pink-500/20 text-pink-400 rounded-full text-xs">
1649+
Open Source
1650+
</span>
1651+
</div>
1652+
</div>
1653+
</div>
1654+
1655+
<!-- Quick Start -->
1656+
<div class="card p-6">
1657+
<h4 class="font-bold text-lg mb-4 flex items-center">
1658+
<i class="fas fa-rocket text-blue-400 mr-3"></i>
1659+
Inicio Rápido
1660+
</h4>
1661+
<ol class="space-y-2 text-white/70 text-sm list-decimal list-inside">
1662+
<li>Haz clic en <strong class="text-white">"Abrir Logisim"</strong></li>
1663+
<li>Usa las herramientas de la barra superior para añadir componentes</li>
1664+
<li>Conecta los componentes con cables</li>
1665+
<li>Haz clic en <i class="fas fa-hand-pointer text-xs"></i> para simular</li>
1666+
<li>Guarda tu circuito con <i class="fas fa-save text-xs"></i></li>
1667+
</ol>
1668+
</div>
1669+
</div>
1670+
1671+
<!-- Credits -->
1672+
<div class="card p-4 text-center bg-gradient-to-r from-purple-500/10 to-blue-500/10 border border-purple-500/20">
1673+
<p class="text-xs text-white/70">
1674+
<i class="fas fa-code text-purple-400"></i>
1675+
Logisim original por <strong class="text-white">Carl Burch</strong> •
1676+
Ported a WebAssembly por
1677+
<a href="https://github.com/De-Rossi-Consulting/logisim.app"
1678+
target="_blank"
1679+
class="text-purple-400 hover:text-purple-300 underline font-semibold">
1680+
De-Rossi-Consulting
1681+
</a>
1682+
</p>
1683+
</div>
1684+
</div>
1685+
</div>
1686+
15431687
<!-- Include Formulas Section -->
15441688
<script>
15451689
fetch('pages/formulas-list.html')

0 commit comments

Comments
 (0)