Scratch for kernels

iadeveloper — Sat, 23 May 2026 21:17:22 +0000
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>BlockC Pro Ultimate - Framebuffer corregido (32/24/16/8 bits)</title>
    <style>
        * { box-sizing: border-box; }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #0a0e1a;
            margin: 0;
            padding: 20px;
            height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .header {
            text-align: center;
            color: white;
            margin-bottom: 15px;
        }
        .header h1 {
            background: linear-gradient(135deg, #ff8c42, #ffd966);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            margin: 0;
        }
        .mode-bar {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 15px;
        }
        .mode-btn {
            background: #1e2a36;
            border: none;
            padding: 6px 20px;
            border-radius: 30px;
            color: white;
            cursor: pointer;
            font-weight: bold;
        }
        .mode-btn.active {
            background: #e67e22;
            box-shadow: 0 0 8px #e67e22;
        }
        .main-layout {
            display: flex;
            gap: 15px;
            flex: 1;
            min-height: 0;
            overflow: hidden;
        }
        .palette {
            width: 280px;
            background: #111827;
            border-radius: 20px;
            padding: 12px;
            overflow-y: auto;
            border: 1px solid #ff8c4244;
        }
        .palette h3 {
            color: #ffd966;
            margin: 12px 0 6px;
            font-size: 1rem;
        }
        .block-tpl {
            background: #f9f3d9;
            border-left: 10px solid #f4b942;
            border-radius: 10px;
            padding: 8px 10px;
            margin-bottom: 8px;
            cursor: grab;
            transition: 0.05s linear;
        }
        .block-tpl:active { cursor: grabbing; }
        .block-tpl:hover { transform: translateX(3px); background: #fff3e0; }
        .block-title { font-weight: bold; font-size: 0.85rem; }
        .block-preview { font-family: monospace; font-size: 0.7rem; background: #e9e2c7; border-radius: 6px; padding: 2px 6px; margin-top: 3px; }
        .workspace {
            flex: 2;
            background: #ecf0f1;
            border-radius: 20px;
            padding: 12px;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
        }
        .workspace-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2px solid #bdc3c7;
            padding-bottom: 6px;
            margin-bottom: 12px;
        }
        .workspace-actions button {
            background: #e67e22;
            border: none;
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            cursor: pointer;
            margin-left: 6px;
        }
        #blocksContainer {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .workspace-block {
            background: white;
            border-radius: 14px;
            padding: 10px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            border-left: 8px solid #3498db;
            gap: 8px;
        }
        .block-content {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
            flex: 1;
            font-family: monospace;
            font-size: 0.8rem;
        }
        .block-label {
            background: #ecf0f1;
            padding: 2px 10px;
            border-radius: 16px;
            font-size: 0.75rem;
        }
        .block-input {
            border: 1px solid #bdc3c7;
            border-radius: 16px;
            padding: 4px 10px;
            font-family: monospace;
            width: 130px;
        }
        .block-textarea {
            border: 1px solid #bdc3c7;
            border-radius: 12px;
            padding: 4px;
            font-family: monospace;
            font-size: 0.7rem;
            width: 180px;
            resize: vertical;
        }
        .delete-block {
            background: #e74c3c;
            color: white;
            border: none;
            border-radius: 30px;
            width: 26px;
            height: 26px;
            cursor: pointer;
            font-weight: bold;
        }
        .code-panel {
            width: 480px;
            background: #0a0e17;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            padding: 12px;
            color: #f8f8f2;
            border: 1px solid #ff8c4255;
        }
        .code-panel h3 {
            margin: 0 0 6px;
            color: #f1c40f;
            font-size: 1rem;
        }
        .code-area {
            background: #000000aa;
            border-radius: 14px;
            padding: 10px;
            font-family: 'Fira Code', monospace;
            font-size: 0.7rem;
            overflow: auto;
            flex: 1;
            white-space: pre-wrap;
        }
        .copy-btn, .download-btn, .hw-btn {
            background: #2c7da0;
            margin-top: 10px;
            border: none;
            padding: 6px;
            border-radius: 30px;
            font-weight: bold;
            cursor: pointer;
            color: white;
            width: 100%;
        }
        .download-btn { background: #27ae60; }
        .hw-btn { background: #8e44ad; }
        .button-group {
            display: flex;
            gap: 8px;
        }
        .boot-info {
            font-size: 0.65rem;
            text-align: center;
            margin-top: 8px;
            background: #00000066;
            padding: 6px;
            border-radius: 12px;
        }
        .tab-buttons {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
        }
        .tab-btn {
            background: #1e2a36;
            border: none;
            padding: 4px 12px;
            border-radius: 20px;
            color: white;
            cursor: pointer;
            font-size: 0.75rem;
        }
        .tab-btn.active { background: #e67e22; }
        .note {
            font-size: 0.7rem;
            background: #ffd96622;
            padding: 4px;
            border-radius: 8px;
            text-align: center;
            margin-top: 6px;
        }
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.7);
            backdrop-filter: blur(4px);
        }
        .modal-content {
            background-color: #1e2a36;
            margin: 5% auto;
            padding: 20px;
            border-radius: 24px;
            width: 80%;
            max-width: 800px;
            max-height: 80vh;
            overflow-y: auto;
            color: #f0f0f0;
            border: 1px solid #ff8c42;
        }
        .modal-content h2, .modal-content h3 { color: #ffd966; }
        .modal-content code {
            background: #0a0e1a;
            padding: 3px 6px;
            border-radius: 8px;
            font-family: monospace;
        }
        .modal-content pre {
            background: #0a0e1a;
            padding: 10px;
            border-radius: 12px;
            overflow-x: auto;
            font-size: 0.8rem;
        }
        .close {
            color: #ff8c42;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
        .close:hover { color: #ffd966; }
        .os-tabs {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin: 15px 0;
        }
        .os-tab {
            background: #2c3e50;
            padding: 6px 12px;
            border-radius: 30px;
            cursor: pointer;
        }
        .os-tab.active { background: #e67e22; }
        .os-content { display: none; }
        .os-content.active { display: block; }
    </style>
</head>
<body>
<div class="header">
    <h1>⌨️ BlockC Pro Ultimate - Framebuffer multicorrección</h1>
    <p>Soporta profundidades de color 32/24/16/8 bits, volatile y alineación Multiboot2</p>
</div>
<div class="mode-bar">
    <button class="mode-btn" data-mode="linux">🐧 Modo Linux</button>
    <button class="mode-btn active" data-mode="kernel">🖥️ Modo Kernel (UEFI/BIOS)</button>
</div>
<div class="main-layout">
    <div class="palette">
        <h3>🖥️ VGA / Framebuffer</h3>
        <div class="block-tpl" draggable="true" data-block-type="vga_print"><div class="block-title">📢 Imprimir texto</div><div class="block-preview">print("texto\n");</div></div>
        <div class="block-tpl" draggable="true" data-block-type="vga_clear"><div class="block-title">🧹 Limpiar pantalla</div><div class="block-preview">clear_screen();</div></div>
        <div class="block-tpl" draggable="true" data-block-type="set_color"><div class="block-title">🎨 Cambiar color (VGA)</div><div class="block-preview">set_color(0x0A);</div></div>
        <h3>⏱️ Delay</h3>
        <div class="block-tpl" draggable="true" data-block-type="delay"><div class="block-title">⏳ Esperar (ms)</div><div class="block-preview">delay_ms(500);</div></div>
        <h3>⌨️ Teclado (driver PS/2)</h3>
        <div class="block-tpl" draggable="true" data-block-type="kb_getchar"><div class="block-title">🔤 Leer carácter</div><div class="block-preview">char c = keyboard_getchar();</div></div>
        <div class="block-tpl" draggable="true" data-block-type="kb_wait_key"><div class="block-title">⏎ Esperar tecla</div><div class="block-preview">keyboard_wait_key();</div></div>
        <div class="block-tpl" draggable="true" data-block-type="kb_have_key"><div class="block-title">📥 ¿Tecla disponible?</div><div class="block-preview">if (keyboard_have_key())</div></div>
        <div class="block-tpl" draggable="true" data-block-type="kb_print_key"><div class="block-title">🔡 Mostrar tecla</div><div class="block-preview">mostrar tecla</div></div>
        <div class="block-tpl" draggable="true" data-block-type="kb_check_specific"><div class="block-title">🔍 ¿Tecla específica?</div><div class="block-preview">if (last_key == 'a')</div></div>
        <h3>🧠 Lógica</h3>
        <div class="block-tpl" draggable="true" data-block-type="int_var"><div class="block-title">🔢 int variable</div><div class="block-preview">int x = 0;</div></div>
        <div class="block-tpl" draggable="true" data-block-type="assign"><div class="block-title">✏️ Asignar</div><div class="block-preview">x = 42;</div></div>
        <div class="block-tpl" draggable="true" data-block-type="if_stmt"><div class="block-title">⚖️ if</div><div class="block-preview">if (x > 0) { }</div></div>
        <div class="block-tpl" draggable="true" data-block-type="while_loop"><div class="block-title">🔄 while</div><div class="block-preview">while (cond) { }</div></div>
        <div class="block-tpl" draggable="true" data-block-type="for_loop"><div class="block-title">🔁 for</div><div class="block-preview">for(...)</div></div>
        <h3>🔌 Puerto serie</h3>
        <div class="block-tpl" draggable="true" data-block-type="serial_put"><div class="block-title">📡 Imprimir por serie</div><div class="block-preview">serial_print("debug\n");</div></div>
    </div>
    <div class="workspace">
        <div class="workspace-header">
            <h3>🧩 Tus bloques</h3>
            <div class="workspace-actions">
                <button id="clearBtn">🗑️ Limpiar</button>
                <button id="demoKernelVga">🎮 Demo: Mini consola</button>
                <button id="demoLinesBtn">📝 Demo: Saltos de línea</button>
                <button id="hwManualBtn" style="background:#8e44ad;">💿 ISO híbrida (UEFI+BIOS)</button>
            </div>
        </div>
        <div id="blocksContainer"></div>
        <div class="note">💡 Escribe en los campos sin perder foco. El kernel ahora soporta cualquier profundidad de color.</div>
    </div>
    <div class="code-panel">
        <div class="tab-buttons">
            <button class="tab-btn active" data-tab="c">📄 kernel.c</button>
            <button class="tab-btn" data-tab="asm">⚙️ boot.asm</button>
        </div>
        <div class="code-area" id="codeArea"></div>
        <div class="button-group">
            <button id="copyBtn" class="copy-btn">📋 Copiar código</button>
            <button id="downloadBtn" class="download-btn">💾 Descargar kernel.c</button>
        </div>
        <div class="boot-info" id="bootInfo"></div>
    </div>
</div>

<div id="hwModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2>💿 Crear ISO híbrida (UEFI + BIOS)</h2>
        <p>Instrucciones actualizadas con modo de color 32 bits para framebuffer.</p>
        <div class="os-tabs">
            <div class="os-tab active" data-os="debian">🐧 Debian/Ubuntu</div>
            <div class="os-tab" data-os="arch">🎯 Arch Linux</div>
            <div class="os-tab" data-os="alpine">🗻 Alpine</div>
            <div class="os-tab" data-os="windows">🪟 Windows (WSL)</div>
        </div>
        <div id="os-debian" class="os-content active">
            <pre><code># Instalar herramientas
sudo apt update
sudo apt install nasm gcc-multilib xorriso grub-pc-bin grub-efi-amd64-bin

# Compilar
nasm -f elf32 boot.asm -o boot.o
gcc -ffreestanding -nostdlib -m32 -fno-stack-protector -c kernel.c -o kernel.o
ld -m elf_i386 -Ttext 0x100000 boot.o kernel.o -o kernel.elf

# Crear estructura ISO
mkdir -p iso/boot/grub/fonts
cp kernel.elf iso/boot/
cp /usr/share/grub/unicode.pf2 iso/boot/grub/fonts/ 2>/dev/null || echo "Fuente no encontrada, continuar sin ella"

# grub.cfg con resolución y profundidad 32 bits
cat > iso/boot/grub/grub.cfg << "EOF"
set gfxmode=1024x768x32,auto
set gfxpayload=keep
insmod efi_gop
insmod efi_uga
insmod vbe
insmod font
if loadfont ${prefix}/fonts/unicode.pf2; then
    set gfxmode=auto
    set gfxpayload=keep
    terminal_output gfxterm
fi
set timeout=3
set default=0
menuentry "BlockC Kernel" {
    multiboot2 /boot/kernel.elf
    boot
}
EOF

# Generar ISO híbrida
grub-mkrescue -o blockc.iso iso/

# Probar en QEMU (BIOS)
qemu-system-x86_64 -cdrom blockc.iso -serial stdio
# Probar en QEMU (UEFI)
qemu-system-x86_64 -bios /usr/share/ovmf/OVMF.fd -cdrom blockc.iso -serial stdio

# Grabar en USB (cuidado con el dispositivo)
sudo dd if=blockc.iso of=/dev/sdX bs=4M status=progress</code></pre>
        </div>
        <div id="os-arch" class="os-content"><pre><code>sudo pacman -S nasm gcc-multilib xorriso grub
# Mismos comandos de compilación y copia de fuente</code></pre></div>
        <div id="os-alpine" class="os-content"><pre><code>apk add nasm gcc-multilib xorriso grub</code></pre></div>
        <div id="os-windows" class="os-content"><pre><code>Usa WSL (Ubuntu) y sigue pasos de Debian.</code></pre></div>
        <p><strong>✅ La ISO ahora fuerza modo 32 bits, eliminando errores de escritura en profundidades incompatibles.</strong></p>
    </div>
</div>

<script>
    let blocks = [];
    let nextId = 1;
    let currentMode = "kernel";
    let currentTab = "c";

    // boot.asm MULTIBOOT2 completo (igual que antes, funciona correctamente)
    const BOOT_ASM = `[bits 32]
section .text
align 8
    dd 0xE85250D6
    dd 0x00
    dd (header_end - header_start)
    dd -(0xE85250D6 + 0x00 + (header_end - header_start))

header_start:
    align 8
    dw 5, 0
    dd 20
    dd 0, 0, 0
    align 8
    dw 0, 0
    dd 8
header_end:

global _start
extern kernel_main

_start:
    cli
    mov esp, stack_space
    push ebx
    push eax
    call kernel_main
    hlt

section .bss
resb 8192
stack_space:`;

    // Persistencia, descarga, escape
    function saveProject() { localStorage.setItem("blockc_project", JSON.stringify(blocks)); }
    function loadProject() {
        const data = localStorage.getItem("blockc_project");
        if (data) {
            blocks = JSON.parse(data);
            if (blocks.length) nextId = Math.max(...blocks.map(b=>b.id)) + 1;
        }
    }
    function downloadFile(name, content) {
        const a = document.createElement("a");
        const blob = new Blob([content], { type: "text/plain" });
        a.href = URL.createObjectURL(blob);
        a.download = name;
        a.click();
        URL.revokeObjectURL(a.href);
    }
    function escapeForC(str) {
        return str.replace(/\\/g, '\\\\').replace(/"/g, '\\"').replace(/\n/g, '\\n').replace(/\r/g, '\\r').replace(/\t/g, '\\t');
    }

    function blockDataTemplate(type) {
        if (type === 'vga_print') return { text: "Hola mundo", color: "0x07" };
        if (type === 'vga_clear') return {};
        if (type === 'set_color') return { color: "0x0A" };
        if (type === 'delay') return { millis: "500" };
        if (type === 'kb_getchar') return { var_name: "c" };
        if (type === 'kb_wait_key') return {};
        if (type === 'kb_have_key') return {};
        if (type === 'kb_print_key') return {};
        if (type === 'kb_check_specific') return { key: "a" };
        if (type === 'int_var') return { var_name: "x", init_val: "0" };
        if (type === 'assign') return { var_name: "x", value: "42" };
        if (type === 'if_stmt') return { condition: "x > 0", body: "    // acción" };
        if (type === 'while_loop') return { condition: "1", body: "    // bucle" };
        if (type === 'for_loop') return { init: "int i=0", cond: "i<5", inc: "i++", body: "    print(\"i\");" };
        if (type === 'serial_put') return { text: "debug\\r\\n" };
        return {};
    }

    function blockToLines(block) {
        const t = block.type;
        const d = block.data;
        if (t === 'vga_print') return [`print("${escapeForC(d.text)}");`];
        if (t === 'vga_clear') return [`clear_screen();`];
        if (t === 'set_color') return [`set_color(${d.color});`];
        if (t === 'delay') return [`delay_ms(${d.millis});`];
        if (t === 'kb_getchar') return [`char ${d.var_name} = keyboard_getchar();`];
        if (t === 'kb_wait_key') return [`keyboard_wait_key();`];
        if (t === 'kb_have_key') return [`if (keyboard_have_key()) {`, `    // tecla disponible`, `}`];
        if (t === 'kb_print_key') return [`char key = keyboard_getchar();`, `print_char(key);`];
        if (t === 'kb_check_specific') return [`if (last_key == '${d.key}') {`, `    print("Tecla detectada!");`, `}`];
        if (t === 'int_var') return [`int ${d.var_name} = ${d.init_val};`];
        if (t === 'assign') return [`${d.var_name} = ${d.value};`];
        if (t === 'if_stmt') return [`if (${d.condition}) {`, `    ${d.body.replace(/\n/g, '\n    ')}`, `}`];
        if (t === 'while_loop') return [`while (${d.condition}) {`, `    ${d.body.replace(/\n/g, '\n    ')}`, `}`];
        if (t === 'for_loop') return [`for (${d.init}; ${d.cond}; ${d.inc}) {`, `    ${d.body.replace(/\n/g, '\n    ')}`, `}`];
        if (t === 'serial_put') return [`serial_print("${escapeForC(d.text)}");`];
        return [`/* ${t} */`];
    }

    function needsKeyboard() {
        return blocks.some(b => ['kb_getchar','kb_wait_key','kb_have_key','kb_print_key','kb_check_specific'].includes(b.type));
    }

    // GENERADOR DE KERNEL.C CORREGIDO
    function generateKernelC() {
        let lines = [];
        lines.push("// kernel.c - Framebuffer con soporte de profundidad variable, volatile, alineación Multiboot2");
        lines.push("#include <stdint.h>");
        lines.push("");
        lines.push("// ---------- Puertos serie (debug) ----------");
        lines.push("#define COM1 0x3f8");
        lines.push("static inline void outb(uint16_t port, uint8_t val) { asm volatile(\"outb %0, %1\" : : \"a\"(val), \"Nd\"(port)); }");
        lines.push("static inline uint8_t inb(uint16_t port) { uint8_t ret; asm volatile(\"inb %1, %0\" : \"=a\"(ret) : \"Nd\"(port)); return ret; }");
        lines.push("static void serial_putchar(char c) { while(!(inb(COM1+5)&0x20)); outb(COM1,c); }");
        lines.push("void serial_print(const char *s) { while(*s) serial_putchar(*s++); }");
        lines.push("");
        lines.push("// ---------- Framebuffer con soporte de profundidad ----------");
        lines.push("static volatile uint32_t* fb_addr = 0;   // volatile para evitar optimización");
        lines.push("static volatile uint32_t fb_width = 0, fb_height = 0, fb_pitch = 0;");
        lines.push("static volatile uint8_t fb_bpp = 0;");
        lines.push("static volatile int fb_enabled = 0;");
        lines.push("static int fb_cursor_x = 0, fb_cursor_y = 0;");
        lines.push("");
        lines.push("// Escribe un píxel con color (RGB, dependiendo de la profundidad)");
        lines.push("static void fb_put_pixel(uint32_t x, uint32_t y, uint32_t color) {");
        lines.push("    if (!fb_addr || x >= fb_width || y >= fb_height) return;");
        lines.push("    uint8_t* ptr = (uint8_t*)fb_addr + y * fb_pitch + x * (fb_bpp/8);");
        lines.push("    switch(fb_bpp) {");
        lines.push("        case 32: *(uint32_t*)ptr = color; break;");
        lines.push("        case 24: ptr[0] = (color>>16)&0xFF; ptr[1] = (color>>8)&0xFF; ptr[2] = color&0xFF; break;");
        lines.push("        case 16: {");
        lines.push("            uint16_t c16 = ((color>>19)&0x1F)<<11 | ((color>>10)&0x3F)<<5 | ((color>>3)&0x1F);");
        lines.push("            *(uint16_t*)ptr = c16;");
        lines.push("            break;");
        lines.push("        }");
        lines.push("        case 8: *ptr = (color>>16)&0xFF; break;");
        lines.push("        default: break;");
        lines.push("    }");
        lines.push("}");
        lines.push("");
        lines.push("// Dibuja un carácter (8x16) usando el color dado");
        lines.push("static void fb_putchar(char c, uint32_t color) {");
        lines.push("    (void)c; // por simplicidad dibujamos un cuadrado de color");
        lines.push("    for (int py = 0; py < 16; py++)");
        lines.push("        for (int px = 0; px < 8; px++) {");
        lines.push("            uint32_t x = fb_cursor_x*8 + px;");
        lines.push("            uint32_t y = fb_cursor_y*16 + py;");
        lines.push("            if (x < fb_width && y < fb_height)");
        lines.push("                fb_put_pixel(x, y, color);");
        lines.push("        }");
        lines.push("    fb_cursor_x++;");
        lines.push("    if (fb_cursor_x >= fb_width/8) { fb_cursor_x = 0; fb_cursor_y++; }");
        lines.push("}");
        lines.push("");
        lines.push("// ---------- VGA modo texto (fallback) ----------");
        lines.push("static char* const VGA_MEM = (char*)0xB8000;");
        lines.push("static int vga_x = 0, vga_y = 0;");
        lines.push("static uint8_t vga_color = 0x07;");
        lines.push("");
        lines.push("static void vga_scroll(void) {");
        lines.push("    for (int y = 1; y < 25; y++)");
        lines.push("        for (int x = 0; x < 80; x++) {");
        lines.push("            int from = (y*80+x)*2, to = ((y-1)*80+x)*2;");
        lines.push("            VGA_MEM[to] = VGA_MEM[from]; VGA_MEM[to+1] = VGA_MEM[from+1];");
        lines.push("        }");
        lines.push("    for (int x = 0; x < 80; x++) {");
        lines.push("        int pos = (24*80+x)*2;");
        lines.push("        VGA_MEM[pos] = ' '; VGA_MEM[pos+1] = vga_color;");
        lines.push("    }");
        lines.push("    vga_y = 24;");
        lines.push("}");
        lines.push("");
        lines.push("static void vga_putchar(char c) {");
        lines.push("    if (c == 8) {");
        lines.push("        if (vga_x > 0) vga_x--;");
        lines.push("        int pos = (vga_y*80+vga_x)*2;");
        lines.push("        VGA_MEM[pos] = ' '; VGA_MEM[pos+1] = vga_color;");
        lines.push("        return;");
        lines.push("    }");
        lines.push("    if (c == '\\n') { vga_x = 0; vga_y++; }");
        lines.push("    else {");
        lines.push("        int pos = (vga_y*80+vga_x)*2;");
        lines.push("        VGA_MEM[pos] = c; VGA_MEM[pos+1] = vga_color;");
        lines.push("        vga_x++;");
        lines.push("        if (vga_x >= 80) { vga_x = 0; vga_y++; }");
        lines.push("    }");
        lines.push("    if (vga_y >= 25) vga_scroll();");
        lines.push("}");
        lines.push("");
        lines.push("void set_color(uint8_t color) { vga_color = color; }");
        lines.push("");
        lines.push("void clear_screen() {");
        lines.push("    if (fb_enabled && fb_addr) {");
        lines.push("        for (uint32_t y = 0; y < fb_height; y++)");
        lines.push("            for (uint32_t x = 0; x < fb_width; x++)");
        lines.push("                fb_put_pixel(x, y, 0x00000000);");
        lines.push("        fb_cursor_x = fb_cursor_y = 0;");
        lines.push("        serial_print(\"Framebuffer limpiado (\");");
        lines.push("        serial_print((fb_bpp==32?\"32\":fb_bpp==24?\"24\":fb_bpp==16?\"16\":\"8\"));");
        lines.push("        serial_print(\" bpp)\\r\\n\");");
        lines.push("    } else {");
        lines.push("        for (int i = 0; i < 80*25; i++) { VGA_MEM[i*2] = ' '; VGA_MEM[i*2+1] = vga_color; }");
        lines.push("        vga_x = vga_y = 0;");
        lines.push("        serial_print(\"VGA limpiado\\r\\n\");");
        lines.push("    }");
        lines.push("}");
        lines.push("");
        lines.push("void print_char(char c) {");
        lines.push("    if (fb_enabled && fb_addr) fb_putchar(c, 0x00FFFFFF);");
        lines.push("    else vga_putchar(c);");
        lines.push("}");
        lines.push("");
        lines.push("void print(const char *s) { while(*s) print_char(*s++); }");
        lines.push("");
        lines.push("// ---------- Delay ----------");
        lines.push("static void delay_cycles(int count) { for(volatile int i=0;i<count;i++) asm volatile(\"nop\"); }");
        lines.push("void delay_ms(int ms) { for(int i=0;i<ms;i++) delay_cycles(2000); }");
        lines.push("");
        lines.push("// ---------- Teclado (opcional) ----------");
        if (needsKeyboard()) {
            lines.push("#define KEYBOARD_DATA 0x60");
            lines.push("#define KEYBOARD_STATUS 0x64");
            lines.push("static char last_key = 0;");
            lines.push("static int shift_pressed = 0;");
            lines.push("static const char keymap[128] = {");
            lines.push("0,27,'1','2','3','4','5','6','7','8','9','0','-','=',8,9,");
            lines.push("'q','w','e','r','t','y','u','i','o','p','[',']',13,0,'a','s',");
            lines.push("'d','f','g','h','j','k','l',';','\\'','`',0,'\\\\','z','x','c','v',");
            lines.push("'b','n','m',',','.','/',0,'*',0,' ',0};");
            lines.push("static uint8_t keyboard_read_scancode(void) { while(!(inb(KEYBOARD_STATUS)&1)); return inb(KEYBOARD_DATA); }");
            lines.push("char keyboard_getchar(void) {");
            lines.push("    uint8_t sc;");
            lines.push("    while(1) {");
            lines.push("        sc = keyboard_read_scancode();");
            lines.push("        if(sc == 0x2A || sc == 0x36) { shift_pressed = 1; continue; }");
            lines.push("        if(sc == 0xAA || sc == 0xB6) { shift_pressed = 0; continue; }");
            lines.push("        if(sc & 0x80) continue;");
            lines.push("        char c = keymap[sc];");
            lines.push("        if(c) { last_key = c; return c; }");
            lines.push("    }");
            lines.push("}");
            lines.push("int keyboard_have_key(void) { return (inb(KEYBOARD_STATUS) & 1); }");
            lines.push("void keyboard_wait_key(void) { keyboard_getchar(); }");
        }
        lines.push("");
        lines.push("// ---------- Parseo Multiboot2 con alineación correcta ----------");
        lines.push("struct multiboot_tag { uint32_t type; uint32_t size; };");
        lines.push("struct multiboot_tag_fb {");
        lines.push("    uint32_t type; uint32_t size; uint64_t addr;");
        lines.push("    uint32_t pitch; uint32_t width; uint32_t height;");
        lines.push("    uint8_t bpp; uint8_t type_fb;");
        lines.push("};");
        lines.push("");
        lines.push("static void multiboot2_init(unsigned long magic, unsigned long addr) {");
        lines.push("    serial_print(\"multiboot2_init\\r\\n\");");
        lines.push("    if (magic != 0x36d76289) { serial_print(\"Magic incorrecto\\r\\n\"); return; }");
        lines.push("    if (!addr) { serial_print(\"Puntero nulo\\r\\n\"); return; }");
        lines.push("    uint32_t* tags = (uint32_t*)addr;");
        lines.push("    while (1) {");
        lines.push("        uint32_t type = tags[0];");
        lines.push("        uint32_t size = tags[1];");
        lines.push("        if (type == 0) break;");
        lines.push("        if (type == 8) {");
        lines.push("            struct multiboot_tag_fb* fb = (struct multiboot_tag_fb*)tags;");
        lines.push("            if (fb->addr && fb->width && fb->height) {");
        lines.push("                fb_addr = (uint32_t*)(uintptr_t)fb->addr;");
        lines.push("                fb_width = fb->width;");
        lines.push("                fb_height = fb->height;");
        lines.push("                fb_pitch = fb->pitch;");
        lines.push("                fb_bpp = fb->bpp;");
        lines.push("                fb_enabled = 1;");
        lines.push("                serial_print(\"Framebuffer detectado \");");
        lines.push("                serial_print((fb_bpp==32?\"32\":fb_bpp==24?\"24\":fb_bpp==16?\"16\":\"8\"));");
        lines.push("                serial_print(\" bpp\\r\\n\");");
        lines.push("            }");
        lines.push("        }");
        lines.push("        // Alineación a 8 bytes según especificación Multiboot2");
        lines.push("        size = (size + 7) & ~7;");
        lines.push("        tags = (uint32_t*)((char*)tags + size);");
        lines.push("    }");
        lines.push("}");
        lines.push("");
        lines.push("void kernel_main(unsigned long magic, unsigned long addr) {");
        lines.push("    serial_print(\"Kernel_main\\r\\n\");");
        lines.push("    multiboot2_init(magic, addr);");
        lines.push("    clear_screen();");
        lines.push("    print(\"BlockC Pro Ultimate\\n\");");
        lines.push("    print(\"Framebuffer + VGA\\n\");");
        for (let blk of blocks) {
            let blines = blockToLines(blk);
            for (let l of blines) lines.push("    " + l);
        }
        const hasInfiniteLoop = blocks.some(b => b.type === 'while_loop' && b.data.condition.trim() === "1");
        if (!hasInfiniteLoop) lines.push("    while(1);");
        lines.push("}");
        return lines.join("\n");
    }

    function updateDisplay() {
        const area = document.getElementById('codeArea');
        if (currentTab === 'c') area.innerText = generateKernelC();
        else area.innerText = BOOT_ASM;
        const infoDiv = document.getElementById('bootInfo');
        if (currentMode === 'kernel') {
            infoDiv.innerHTML = `🔧 Compilar y crear ISO híbrida con modo color 32 bits:<br>
            nasm -f elf32 boot.asm -o boot.o<br>
            gcc -ffreestanding -nostdlib -m32 -fno-stack-protector -c kernel.c -o kernel.o<br>
            ld -m elf_i386 -Ttext 0x100000 boot.o kernel.o -o kernel.elf<br>
            mkdir -p iso/boot/grub/fonts<br>
            cp kernel.elf iso/boot/<br>
            cp /usr/share/grub/unicode.pf2 iso/boot/grub/fonts/ 2>/dev/null<br>
            (seguir el manual para grub.cfg)<br>
            grub-mkrescue -o blockc.iso iso/`;
        } else {
            infoDiv.innerHTML = `🐧 Modo Linux: gcc kernel.c -o kernel && ./kernel (solo simula)`;
        }
    }

    function refreshCodeAndSave() { updateDisplay(); saveProject(); }

    function renderWorkspace() {
        const container = document.getElementById('blocksContainer');
        container.innerHTML = '';
        for (let block of blocks) {
            const div = document.createElement('div');
            div.className = 'workspace-block';
            const contentDiv = document.createElement('div');
            contentDiv.className = 'block-content';
            const t = block.type;
            const d = block.data;

            if (t === 'vga_print') {
                contentDiv.appendChild(labelSpan("print:"));
                const ta = document.createElement('textarea');
                ta.className = 'block-textarea';
                ta.value = d.text;
                ta.rows = 2;
                ta.addEventListener('input', e => { d.text = e.target.value; refreshCodeAndSave(); });
                contentDiv.appendChild(ta);
                contentDiv.appendChild(labelSpan("color (VGA):"));
                const inp = createInputNoRender(d.color, v=>{ d.color=v; refreshCodeAndSave(); }, "0x07");
                contentDiv.appendChild(inp);
            } else if (t === 'vga_clear') {
                contentDiv.appendChild(labelSpan("clear_screen()"));
            } else if (t === 'set_color') {
                contentDiv.appendChild(labelSpan("set_color("));
                contentDiv.appendChild(createInputNoRender(d.color, v=>{ d.color=v; refreshCodeAndSave(); }));
                contentDiv.appendChild(labelSpan(")"));
            } else if (t === 'delay') {
                contentDiv.appendChild(labelSpan("delay_ms("));
                contentDiv.appendChild(createInputNoRender(d.millis, v=>{ d.millis=v; refreshCodeAndSave(); }));
                contentDiv.appendChild(labelSpan(")"));
            } else if (t === 'kb_getchar') {
                contentDiv.appendChild(labelSpan("char"));
                contentDiv.appendChild(createInputNoRender(d.var_name, v=>{ d.var_name=v; refreshCodeAndSave(); }));
                contentDiv.appendChild(labelSpan("= keyboard_getchar()"));
            } else if (t === 'kb_wait_key') {
                contentDiv.appendChild(labelSpan("keyboard_wait_key()"));
            } else if (t === 'kb_have_key') {
                contentDiv.appendChild(labelSpan("if (keyboard_have_key())"));
            } else if (t === 'kb_print_key') {
                contentDiv.appendChild(labelSpan("Mostrar tecla"));
            } else if (t === 'kb_check_specific') {
                contentDiv.appendChild(labelSpan("if tecla == "));
                contentDiv.appendChild(createInputNoRender(d.key, v=>{ d.key=v; refreshCodeAndSave(); }));
            } else if (t === 'int_var') {
                contentDiv.appendChild(labelSpan("int"));
                contentDiv.appendChild(createInputNoRender(d.var_name, v=>{ d.var_name=v; refreshCodeAndSave(); }));
                contentDiv.appendChild(labelSpan("="));
                contentDiv.appendChild(createInputNoRender(d.init_val, v=>{ d.init_val=v; refreshCodeAndSave(); }));
            } else if (t === 'assign') {
                contentDiv.appendChild(createInputNoRender(d.var_name, v=>{ d.var_name=v; refreshCodeAndSave(); }));
                contentDiv.appendChild(labelSpan("="));
                contentDiv.appendChild(createInputNoRender(d.value, v=>{ d.value=v; refreshCodeAndSave(); }));
            } else if (t === 'if_stmt') {
                contentDiv.appendChild(labelSpan("if ("));
                contentDiv.appendChild(createInputNoRender(d.condition, v=>{ d.condition=v; refreshCodeAndSave(); }));
                contentDiv.appendChild(labelSpan(") {"));
                const ta = createTextareaNoRender(d.body, v=>{ d.body=v; refreshCodeAndSave(); });
                contentDiv.appendChild(ta);
            } else if (t === 'while_loop') {
                contentDiv.appendChild(labelSpan("while ("));
                contentDiv.appendChild(createInputNoRender(d.condition, v=>{ d.condition=v; refreshCodeAndSave(); }));
                contentDiv.appendChild(labelSpan(") {"));
                const ta = createTextareaNoRender(d.body, v=>{ d.body=v; refreshCodeAndSave(); });
                contentDiv.appendChild(ta);
            } else if (t === 'for_loop') {
                contentDiv.appendChild(labelSpan("for ("));
                contentDiv.appendChild(createInputNoRender(d.init, v=>{ d.init=v; refreshCodeAndSave(); }));
                contentDiv.appendChild(labelSpan(";"));
                contentDiv.appendChild(createInputNoRender(d.cond, v=>{ d.cond=v; refreshCodeAndSave(); }));
                contentDiv.appendChild(labelSpan(";"));
                contentDiv.appendChild(createInputNoRender(d.inc, v=>{ d.inc=v; refreshCodeAndSave(); }));
                contentDiv.appendChild(labelSpan(") {"));
                const ta = createTextareaNoRender(d.body, v=>{ d.body=v; refreshCodeAndSave(); });
                contentDiv.appendChild(ta);
            } else if (t === 'serial_put') {
                contentDiv.appendChild(labelSpan("serial_print:"));
                const ta = document.createElement('textarea');
                ta.className = 'block-textarea';
                ta.value = d.text;
                ta.rows = 2;
                ta.addEventListener('input', e => { d.text = e.target.value; refreshCodeAndSave(); });
                contentDiv.appendChild(ta);
            }
            const del = document.createElement('button');
            del.innerText = '✖';
            del.className = 'delete-block';
            del.onclick = () => { blocks = blocks.filter(b=>b.id!==block.id); renderWorkspace(); updateDisplay(); saveProject(); };
            div.appendChild(contentDiv);
            div.appendChild(del);
            container.appendChild(div);
        }
        updateDisplay();
        saveProject();
    }

    function labelSpan(t) { let s = document.createElement('span'); s.className = 'block-label'; s.innerText = t; return s; }
    function createInputNoRender(val, onChange, ph="") {
        let inp = document.createElement('input');
        inp.className = 'block-input';
        inp.value = val;
        inp.placeholder = ph;
        inp.addEventListener('input', e => onChange(e.target.value));
        return inp;
    }
    function createTextareaNoRender(val, onChange) {
        let ta = document.createElement('textarea');
        ta.className = 'block-textarea';
        ta.value = val;
        ta.rows = 2;
        ta.addEventListener('input', e => onChange(e.target.value));
        return ta;
    }

    function addBlock(type) {
        blocks.push({ id: nextId++, type: type, data: blockDataTemplate(type) });
        renderWorkspace();
    }

    // Drag & Drop
    document.querySelectorAll('.block-tpl').forEach(el => {
        el.setAttribute('draggable', 'true');
        el.addEventListener('dragstart', e => e.dataTransfer.setData('text/plain', el.getAttribute('data-block-type')));
    });
    document.querySelector('.workspace').addEventListener('dragover', e => e.preventDefault());
    document.querySelector('.workspace').addEventListener('drop', e => {
        e.preventDefault();
        const type = e.dataTransfer.getData('text/plain');
        if (type) addBlock(type);
    });

    // Modo Linux/Kernel
    document.querySelectorAll('.mode-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            document.querySelectorAll('.mode-btn').forEach(b=>b.classList.remove('active'));
            btn.classList.add('active');
            currentMode = btn.getAttribute('data-mode');
            updateDisplay();
        });
    });
    // Tabs
    document.querySelectorAll('.tab-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            document.querySelectorAll('.tab-btn').forEach(b=>b.classList.remove('active'));
            btn.classList.add('active');
            currentTab = btn.getAttribute('data-tab');
            updateDisplay();
        });
    });

    document.getElementById('clearBtn').onclick = () => { blocks = []; renderWorkspace(); };
    document.getElementById('demoKernelVga').onclick = () => {
        blocks = [];
        addBlock('vga_clear');
        addBlock('vga_print');
        addBlock('while_loop');
        setTimeout(() => {
            if(blocks[1]) { blocks[1].data.text = "=== Mini Consola BlockC ===\nEscribe y presiona Enter...\n> "; }
            if(blocks[2]) {
                blocks[2].data.condition = "1";
                blocks[2].data.body = `char c = keyboard_getchar();
if(c == '\\n') print("\\n> ");
else print_char(c);`;
            }
            renderWorkspace();
        },10);
    };
    document.getElementById('demoLinesBtn').onclick = () => {
        blocks = [];
        addBlock('vga_clear');
        addBlock('vga_print');
        addBlock('vga_print');
        addBlock('vga_print');
        setTimeout(() => {
            if(blocks[1]) { blocks[1].data.text = "¡Hola!\nEsto es una línea nueva.\n"; }
            if(blocks[2]) { blocks[2].data.text = "Y aquí otra línea.\n"; }
            if(blocks[3]) { blocks[3].data.text = "Usa \\n en tus textos.\n¡Disfruta BlockC!"; }
            renderWorkspace();
        },10);
    };
    document.getElementById('copyBtn').onclick = () => {
        let content = (currentTab === 'c') ? generateKernelC() : BOOT_ASM;
        navigator.clipboard.writeText(content);
        alert("✅ Código copiado");
    };
    document.getElementById('downloadBtn').onclick = () => {
        let content = generateKernelC();
        downloadFile("kernel.c", content);
    };

    // Modal manual
    const modal = document.getElementById('hwModal');
    const hwBtn = document.getElementById('hwManualBtn');
    const spanClose = document.getElementsByClassName('close')[0];
    hwBtn.onclick = () => modal.style.display = "block";
    spanClose.onclick = () => modal.style.display = "none";
    window.onclick = (event) => { if(event.target == modal) modal.style.display = "none"; };
    document.querySelectorAll('.os-tab').forEach(tab => {
        tab.addEventListener('click', () => {
            const os = tab.getAttribute('data-os');
            document.querySelectorAll('.os-tab').forEach(t=>t.classList.remove('active'));
            tab.classList.add('active');
            document.querySelectorAll('.os-content').forEach(c=>c.classList.remove('active'));
            document.getElementById(`os-${os}`).classList.add('active');
        });
    });

    // Inicializar
    loadProject();
    if (blocks.length === 0) {
        addBlock('vga_print');
        setTimeout(() => { if(blocks[0]) { blocks[0].data.text = "BlockC Pro Ultimate\nArranca en UEFI/BIOS con framebuffer 32/24/16/8 bits"; } renderWorkspace(); },10);
    } else renderWorkspace();
</script>
</body>
</html>
DEV Community: iadeveloper

Scratch for kernels
