| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>74LS00 NAND Gate Circuit Simulator</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> |
| | <style> |
| | .gate-body { |
| | fill: #f3f4f6; |
| | stroke: #4b5563; |
| | stroke-width: 2; |
| | } |
| | .gate-pin { |
| | fill: #9ca3af; |
| | stroke: #4b5563; |
| | stroke-width: 1; |
| | } |
| | .wire { |
| | stroke: #3b82f6; |
| | stroke-width: 2; |
| | fill: none; |
| | } |
| | .input-high { |
| | fill: #10b981; |
| | } |
| | .input-low { |
| | fill: #ef4444; |
| | } |
| | .output-high { |
| | fill: #10b981; |
| | } |
| | .output-low { |
| | fill: #ef4444; |
| | } |
| | .logic-probe { |
| | transition: all 0.3s ease; |
| | } |
| | .pin-label { |
| | font-family: 'Courier New', monospace; |
| | font-size: 12px; |
| | user-select: none; |
| | } |
| | .circuit-container { |
| | filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1)); |
| | } |
| | .toggle-btn { |
| | transition: all 0.2s ease; |
| | } |
| | .toggle-btn:active { |
| | transform: scale(0.95); |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gray-100 min-h-screen"> |
| | <div class="container mx-auto px-4 py-8"> |
| | <header class="mb-8 text-center"> |
| | <h1 class="text-3xl font-bold text-gray-800 mb-2">74LS00 Quad 2-Input NAND Gate</h1> |
| | <p class="text-gray-600 max-w-2xl mx-auto">Interactive circuit diagram and truth table for the 74LS00 IC. Click on inputs to toggle their state.</p> |
| | </header> |
| |
|
| | <div class="flex flex-col lg:flex-row gap-8 items-center lg:items-start"> |
| | |
| | <div class="circuit-container bg-white rounded-xl p-6 flex-1 max-w-2xl"> |
| | <div class="flex justify-between items-center mb-4"> |
| | <h2 class="text-xl font-semibold text-gray-700">Circuit Diagram</h2> |
| | <button id="reset-btn" class="toggle-btn bg-blue-100 text-blue-700 px-3 py-1 rounded-md text-sm font-medium hover:bg-blue-200"> |
| | <i class="fas fa-sync-alt mr-1"></i> Reset |
| | </button> |
| | </div> |
| | |
| | <div class="overflow-x-auto"> |
| | <svg id="circuit-svg" width="100%" height="300" viewBox="0 0 800 300" class="mx-auto"> |
| | |
| | <rect x="200" y="50" width="400" height="200" rx="10" fill="#f3f4f6" stroke="#4b5563" stroke-width="2"/> |
| | |
| | |
| | <text x="400" y="140" font-family="Arial" font-size="24" text-anchor="middle" fill="#1f2937">74LS00</text> |
| | |
| | |
| | <g id="input-pins"> |
| | |
| | <g class="pin" data-pin="1" data-type="input"> |
| | <rect x="190" y="70" width="10" height="20" class="gate-pin input-low" id="pin1"/> |
| | <text x="180" y="82" class="pin-label" text-anchor="end">1</text> |
| | <text x="170" y="82" class="pin-label" text-anchor="end">A</text> |
| | </g> |
| | |
| | |
| | <g class="pin" data-pin="2" data-type="input"> |
| | <rect x="190" y="110" width="10" height="20" class="gate-pin input-low" id="pin2"/> |
| | <text x="180" y="122" class="pin-label" text-anchor="end">2</text> |
| | <text x="170" y="122" class="pin-label" text-anchor="end">B</text> |
| | </g> |
| | |
| | |
| | <g class="pin" data-pin="4" data-type="input"> |
| | <rect x="190" y="150" width="10" height="20" class="gate-pin input-low" id="pin4"/> |
| | <text x="180" y="162" class="pin-label" text-anchor="end">4</text> |
| | <text x="170" y="162" class="pin-label" text-anchor="end">A</text> |
| | </g> |
| | |
| | |
| | <g class="pin" data-pin="5" data-type="input"> |
| | <rect x="190" y="190" width="10" height="20" class="gate-pin input-low" id="pin5"/> |
| | <text x="180" y="202" class="pin-label" text-anchor="end">5</text> |
| | <text x="170" y="202" class="pin-label" text-anchor="end">B</text> |
| | </g> |
| | |
| | |
| | <g class="pin" data-pin="9" data-type="input"> |
| | <rect x="190" y="230" width="10" height="20" class="gate-pin input-low" id="pin9"/> |
| | <text x="180" y="242" class="pin-label" text-anchor="end">9</text> |
| | <text x="170" y="242" class="pin-label" text-anchor="end">A</text> |
| | </g> |
| | |
| | |
| | <g class="pin" data-pin="10" data-type="input"> |
| | <rect x="190" y="270" width="10" height="20" class="gate-pin input-low" id="pin10"/> |
| | <text x="180" y="282" class="pin-label" text-anchor="end">10</text> |
| | <text x="170" y="282" class="pin-label" text-anchor="end">B</text> |
| | </g> |
| | </g> |
| | |
| | |
| | <g id="output-pins"> |
| | |
| | <g class="pin" data-pin="3" data-type="output"> |
| | <rect x="600" y="90" width="10" height="20" class="gate-pin output-high" id="pin3"/> |
| | <text x="615" y="102" class="pin-label">3</text> |
| | <text x="630" y="102" class="pin-label">Y</text> |
| | </g> |
| | |
| | |
| | <g class="pin" data-pin="6" data-type="output"> |
| | <rect x="600" y="170" width="10" height="20" class="gate-pin output-high" id="pin6"/> |
| | <text x="615" y="182" class="pin-label">6</text> |
| | <text x="630" y="182" class="pin-label">Y</text> |
| | </g> |
| | |
| | |
| | <g class="pin" data-pin="8" data-type="output"> |
| | <rect x="600" y="250" width="10" height="20" class="gate-pin output-high" id="pin8"/> |
| | <text x="615" y="262" class="pin-label">8</text> |
| | <text x="630" y="262" class="pin-label">Y</text> |
| | </g> |
| | </g> |
| | |
| | |
| | <g> |
| | |
| | <g> |
| | <rect x="300" y="30" width="20" height="10" class="gate-pin input-high" id="pin14"/> |
| | <text x="310" y="22" class="pin-label" text-anchor="middle">14</text> |
| | <text x="310" y="15" class="pin-label" text-anchor="middle">VCC</text> |
| | </g> |
| | |
| | |
| | <g> |
| | <rect x="400" y="30" width="20" height="10" class="gate-pin input-low" id="pin7"/> |
| | <text x="410" y="22" class="pin-label" text-anchor="middle">7</text> |
| | <text x="410" y="15" class="pin-label" text-anchor="middle">GND</text> |
| | </g> |
| | </g> |
| | |
| | |
| | <g> |
| | |
| | <path d="M300 80 Q 350 90 400 80" class="wire" stroke-dasharray="5,3"/> |
| | <path d="M300 120 Q 350 110 400 120" class="wire" stroke-dasharray="5,3"/> |
| | <path d="M400 80 L 400 120" class="wire"/> |
| | <path d="M400 100 L 450 100" class="wire"/> |
| | <circle cx="450" cy="100" r="5" fill="#3b82f6" stroke="#1d4ed8"/> |
| | <path d="M455 100 L 500 100" class="wire"/> |
| | |
| | |
| | <path d="M300 160 Q 350 170 400 160" class="wire" stroke-dasharray=" |
| | </html> |
