web-a2e 1.0.0

package/src/css/responsive.css

@@ -0,0 +1,400 @@
+/* Apple //e Emulator - Responsive Styles
+   All media queries for different screen sizes and devices
+*/
+
+/* Tablet and smaller desktop */
+@media (max-width: 1200px) {
+    main {
+        flex-direction: column;
+        align-items: center;
+    }
+}
+
+/* Small screens / large tablets */
+@media (max-width: 800px) {
+    header {
+        flex-direction: column;
+        gap: var(--space-sm);
+        padding: var(--space-sm);
+    }
+
+    .header-left {
+        width: 100%;
+        justify-content: center;
+    }
+
+    .tagline,
+    .retro-brand {
+        display: none;
+    }
+
+    .header-controls {
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .control-group {
+        border: none;
+        padding: var(--space-xs);
+    }
+
+    #screen {
+        width: 100%;
+        max-width: 560px;
+        height: auto;
+        aspect-ratio: 560 / 384;
+    }
+
+    #disk-drives {
+        flex-direction: column;
+        gap: var(--space-sm);
+    }
+
+    .drive-image-container {
+        width: 100%;
+        max-width: 240px;
+    }
+}
+
+/* Mobile portrait (phones) */
+@media (max-width: 600px) {
+    header {
+        padding: var(--space-xs) var(--space-sm);
+        gap: var(--space-xs);
+    }
+
+    .header-left {
+        margin-bottom: var(--space-xs);
+    }
+
+    .logo-image {
+        height: 26px;
+    }
+
+    .header-controls {
+        width: 100%;
+        gap: var(--space-xs);
+    }
+
+    .control-group {
+        padding: var(--space-xs);
+        gap: 2px;
+    }
+
+    .control-btn {
+        width: 36px;
+        height: 36px;
+        padding: 0;
+    }
+
+    .control-btn svg {
+        width: 20px;
+        height: 20px;
+    }
+
+    /* Compact menu triggers and text buttons on mobile */
+    .header-menu-trigger,
+    .header-text-btn {
+        padding: 4px 8px;
+        font-size: 0.75rem;
+    }
+
+    .header-menu-trigger svg.menu-chevron {
+        display: none;
+    }
+
+    /* Hide debug and help menus on mobile - not usable on small screens */
+    #debug-menu-container,
+    #help-menu-container,
+    .debug-window {
+        display: none !important;
+    }
+
+    /* Disk drives - more compact layout */
+    .disk-drives-row {
+        gap: var(--space-sm);
+    }
+
+    .disk-drive {
+        gap: var(--space-xs);
+        max-width: 100%;
+    }
+
+    .drive-image-container {
+        max-width: 180px;
+        margin: 0 auto;
+    }
+
+    .drive-number {
+        font-size: 0.9em;
+    }
+
+    .drive-info {
+        padding: 2px 0;
+    }
+
+    .disk-name,
+    .disk-track {
+        font-size: 0.625rem;
+    }
+
+    .disk-track {
+        min-width: 24px;
+        padding: 1px 3px;
+    }
+
+    .drive-controls {
+        gap: 3px;
+    }
+
+    .disk-insert,
+    .disk-blank,
+    .disk-eject {
+        padding: 4px 6px;
+        font-size: 0.625rem;
+    }
+
+    /* Footer adjustments */
+    footer {
+        font-size: 0.6875rem;
+        padding: var(--space-xs) var(--space-sm);
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    footer kbd {
+        padding: 0 3px;
+        font-size: 0.625rem;
+    }
+
+    /* Floating reminders positioning for mobile */
+    .power-reminder {
+        top: auto;
+        bottom: 120px;
+        left: 50% !important;
+        transform: translateX(-50%);
+    }
+
+    .power-reminder .reminder-arrow {
+        display: none;
+    }
+
+    #drives-reminder {
+        display: none !important;
+    }
+}
+
+/* Extra small mobile (very small phones) */
+@media (max-width: 400px) {
+    .logo-image {
+        height: 22px;
+    }
+
+    .control-btn {
+        width: 32px;
+        height: 32px;
+    }
+
+    .control-btn svg {
+        width: 18px;
+        height: 18px;
+    }
+
+    .header-menu-trigger,
+    .header-text-btn {
+        padding: 4px 6px;
+        font-size: 0.6875rem;
+    }
+
+    .drive-image-container {
+        max-width: 150px;
+    }
+
+    .disk-insert,
+    .disk-blank,
+    .disk-eject {
+        padding: 3px 4px;
+        font-size: 0.5625rem;
+    }
+}
+
+/* Mobile landscape */
+@media (max-height: 500px) and (orientation: landscape) {
+    header {
+        flex-direction: row;
+        padding: var(--space-xs) var(--space-sm);
+        gap: var(--space-sm);
+    }
+
+    .header-left {
+        width: auto;
+        margin-bottom: 0;
+    }
+
+    .logo-image {
+        height: 22px;
+    }
+
+    .tagline,
+    .retro-brand {
+        display: none;
+    }
+
+    .control-btn {
+        width: 32px;
+        height: 32px;
+    }
+
+    .control-btn svg {
+        width: 16px;
+        height: 16px;
+    }
+
+    .control-group {
+        padding: 2px var(--space-xs);
+        gap: 2px;
+        border: none;
+    }
+
+    .header-menu-trigger,
+    .header-text-btn {
+        padding: 4px 6px;
+        font-size: 0.6875rem;
+    }
+
+    .header-menu-trigger svg.menu-chevron {
+        display: none;
+    }
+
+    /* Hide debug/help menus in landscape mobile */
+    #debug-menu-container,
+    #help-menu-container,
+    .debug-window {
+        display: none !important;
+    }
+
+    main {
+        flex-direction: row;
+        padding: var(--space-xs);
+        gap: var(--space-sm);
+    }
+
+    .emulator-section {
+        flex-direction: row;
+        gap: var(--space-sm);
+    }
+
+    #monitor-frame {
+        flex: none;
+    }
+
+    /* Disk drives in landscape - compact */
+    .disk-drives-row {
+        flex-direction: column;
+        gap: var(--space-xs);
+    }
+
+    .disk-drive {
+        flex-direction: row;
+        align-items: center;
+        gap: var(--space-xs);
+        max-width: 100%;
+    }
+
+    .drive-image-container {
+        max-width: 80px;
+        flex-shrink: 0;
+    }
+
+    .drive-number {
+        font-size: 0.7em;
+    }
+
+    .drive-info {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 2px;
+        min-width: 60px;
+    }
+
+    .disk-name,
+    .disk-track {
+        font-size: 0.5625rem;
+    }
+
+    .drive-controls {
+        flex-direction: column;
+        gap: 2px;
+    }
+
+    .disk-insert,
+    .disk-blank,
+    .disk-eject {
+        padding: 2px 4px;
+        font-size: 0.5rem;
+        min-width: 40px;
+    }
+
+    footer {
+        padding: 2px var(--space-sm);
+        font-size: 0.625rem;
+    }
+
+    footer kbd {
+        padding: 0 2px;
+        font-size: 0.5625rem;
+    }
+
+    /* Hide reminders in landscape */
+    .power-reminder,
+    #drives-reminder {
+        display: none !important;
+    }
+}
+
+/* Touch device improvements */
+@media (hover: none) and (pointer: coarse) {
+    /* Increase touch target sizes */
+    .control-btn {
+        min-width: 44px;
+        min-height: 44px;
+    }
+
+    .header-menu-trigger {
+        min-height: 44px;
+    }
+
+    .disk-insert,
+    .disk-blank,
+    .disk-eject {
+        min-height: 36px;
+    }
+
+    /* Disable hover states that don't work well on touch */
+    .control-btn:hover {
+        background: var(--bg-light);
+        border-color: var(--border-default);
+    }
+
+    .control-btn.power-btn:hover {
+        background: var(--bg-light);
+        box-shadow: none;
+    }
+
+    /* Show active states instead for touch feedback */
+    .control-btn:active {
+        background: var(--bg-panel);
+        transform: scale(0.95);
+    }
+
+    .control-btn.power-btn:active {
+        background: var(--accent-green-dim);
+        color: white;
+    }
+
+    /* Visual feedback when keyboard is active */
+    #screen.keyboard-active {
+        outline: 2px solid var(--accent-green);
+        outline-offset: 2px;
+    }
+}

package/src/css/rule-builder.css

@@ -0,0 +1,340 @@
+/* ============================================
+   RULE BUILDER WINDOW
+   ============================================ */
+
+.rb-root {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    gap: 8px;
+}
+
+.rb-header-bar {
+    padding: 2px 0 6px;
+    border-bottom: 1px solid var(--separator-bg);
+}
+
+.rb-target-label {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.rb-rules-container {
+    flex: 1;
+    overflow-y: auto;
+    min-height: 0;
+    padding: 4px 0;
+}
+
+.rb-rules-container::-webkit-scrollbar {
+    width: 5px;
+}
+.rb-rules-container::-webkit-scrollbar-track {
+    background: transparent;
+}
+.rb-rules-container::-webkit-scrollbar-thumb {
+    background: var(--overlay-active);
+    border-radius: 3px;
+}
+
+/* Group container */
+.rb-group {
+    border-left: 2px solid var(--accent-blue);
+    background: rgba(0, 0, 0, 0.12);
+    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+    padding: 8px 8px 6px;
+    margin: 2px 0;
+}
+
+.rb-group .rb-group {
+    margin: 4px 0;
+}
+
+.rb-group-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-bottom: 6px;
+}
+
+.rb-match-label {
+    font-size: 10px;
+    color: var(--text-muted);
+}
+
+.rb-logic-select {
+    padding: 2px 6px;
+    font-family: var(--font-mono);
+    font-size: 10px;
+    font-weight: 600;
+    background: var(--input-bg-deeper);
+    border: 1px solid var(--accent-blue-border);
+    border-radius: 3px;
+    color: var(--accent-blue);
+    cursor: pointer;
+    appearance: none;
+    -webkit-appearance: none;
+    text-align: center;
+    min-width: 44px;
+}
+
+.rb-logic-select:hover {
+    border-color: var(--accent-blue);
+}
+
+.rb-logic-select option {
+    background: var(--bg-dark, #0d1117);
+    color: var(--text-primary);
+}
+
+.rb-group-remove {
+    margin-left: auto;
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    font-size: 14px;
+    cursor: pointer;
+    padding: 0 4px;
+    opacity: 0.5;
+    transition: opacity 0.1s;
+    line-height: 1;
+}
+
+.rb-group-remove:hover {
+    opacity: 1;
+    color: var(--accent-red);
+}
+
+/* Group children */
+.rb-group-children {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+}
+
+/* Rule row */
+.rb-rule-row {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 3px 0;
+}
+
+/* Shared select/input styles */
+.rb-select {
+    padding: 3px 6px;
+    font-family: var(--font-mono);
+    font-size: 10px;
+    background: var(--input-bg-deeper);
+    border: 1px solid var(--control-border);
+    border-radius: 3px;
+    color: var(--text-primary);
+    cursor: pointer;
+    appearance: none;
+    -webkit-appearance: none;
+}
+
+.rb-select:hover {
+    border-color: var(--accent-blue-border);
+}
+
+.rb-select option {
+    background: var(--bg-dark, #0d1117);
+    color: var(--text-primary);
+}
+
+.rb-input {
+    padding: 3px 6px;
+    font-family: var(--font-mono);
+    font-size: 10px;
+    background: var(--input-bg-deeper);
+    border: 1px solid var(--control-border);
+    border-radius: 3px;
+    color: var(--text-primary);
+    outline: none;
+}
+
+.rb-input:focus {
+    border-color: var(--accent-blue);
+}
+
+.rb-input::placeholder {
+    color: var(--text-muted);
+    opacity: 0.5;
+}
+
+/* Subject select width */
+.rb-subject {
+    min-width: 72px;
+}
+
+/* Detail control width */
+.rb-detail {
+    min-width: 52px;
+    max-width: 64px;
+}
+
+input.rb-detail {
+    width: 64px;
+}
+
+/* BASIC variable detail group (name + index side by side) */
+.rb-detail-group {
+    display: flex;
+    gap: 3px;
+}
+
+.rb-detail-half {
+    width: 48px !important;
+    min-width: 40px !important;
+    max-width: 56px !important;
+}
+
+.rb-detail-third {
+    width: 40px !important;
+    min-width: 32px !important;
+    max-width: 48px !important;
+}
+
+/* Operator select width */
+.rb-operator {
+    min-width: 44px;
+}
+
+/* Value input width */
+.rb-value {
+    width: 60px;
+    flex-shrink: 0;
+}
+
+/* Rule remove button */
+.rb-rule-remove {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    font-size: 14px;
+    cursor: pointer;
+    padding: 0 4px;
+    opacity: 0.5;
+    transition: opacity 0.1s;
+    line-height: 1;
+    flex-shrink: 0;
+}
+
+.rb-rule-remove:hover {
+    opacity: 1;
+    color: var(--accent-red);
+}
+
+/* Connector label between siblings */
+.rb-connector {
+    text-align: center;
+    font-size: 9px;
+    font-weight: 600;
+    color: var(--text-muted);
+    opacity: 0.5;
+    padding: 1px 0;
+    letter-spacing: 0.05em;
+}
+
+/* Add buttons */
+.rb-add-btns {
+    display: flex;
+    gap: 6px;
+    margin-top: 4px;
+}
+
+.rb-btn {
+    padding: 4px 10px;
+    font-family: var(--font-mono);
+    font-size: 10px;
+    font-weight: 500;
+    background: var(--control-bg);
+    border: 1px solid var(--control-border);
+    border-radius: 3px;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all 0.12s;
+    white-space: nowrap;
+}
+
+.rb-btn:hover {
+    background: var(--glass-border);
+    color: var(--text-primary);
+    border-color: rgba(48, 54, 61, 0.7);
+}
+
+.rb-btn-add {
+    font-size: 9px;
+    padding: 2px 8px;
+}
+
+.rb-btn-add:hover {
+    background: var(--accent-green-bg-strong);
+    border-color: var(--accent-green-border);
+    color: var(--accent-green);
+}
+
+/* Preview bar */
+.rb-preview {
+    padding: 6px 8px;
+    background: var(--input-bg-deep);
+    border: 1px solid var(--glass-border-subtle);
+    border-radius: 3px;
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--accent-green);
+    white-space: nowrap;
+    overflow-x: auto;
+    min-height: 22px;
+}
+
+/* Action buttons */
+.rb-actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 6px;
+    border-top: 1px solid var(--glass-border-subtle);
+}
+
+.rb-actions-right {
+    display: flex;
+    gap: 6px;
+}
+
+.rb-btn-clear:hover {
+    background: var(--accent-red-bg-stronger);
+    border-color: var(--accent-red-border);
+    color: var(--accent-red);
+}
+
+.rb-btn-apply {
+    background: var(--accent-green-bg-strong);
+    border-color: var(--accent-green-border);
+    color: var(--accent-green);
+}
+
+.rb-btn-apply:hover {
+    background: rgba(63, 185, 80, 0.35);
+    border-color: rgba(63, 185, 80, 0.6);
+}
+
+/* Depth-based accent colors on nested groups */
+.rb-group[data-depth="1"] {
+    border-left-color: var(--accent-purple);
+}
+
+.rb-group[data-depth="2"] {
+    border-left-color: var(--accent-orange);
+}
+
+.rb-group[data-depth="3"] {
+    border-left-color: var(--accent-green);
+}
+
+.rb-group[data-depth="4"] {
+    border-left-color: var(--accent-red);
+}