I build websites
that actually work

const OracleSystem = {
    states: { IDLE: 'idle', REVEALED: 'revealed' },
    currentState: 'idle',
    
    transition(newState) {
        if (this.canTransition(newState)) {
            this.currentState = newState;
            this.executeSideEffects(newState);
        }
    },
    
    canTransition(state) {
        const valid = { idle: ['revealed'], revealed: ['idle'] };
        return valid[this.currentState].includes(state);
    }
};

function allowDrop(ev) {
    ev.preventDefault();
    ev.currentTarget.classList.add('drag-over');
}

function drop(ev) {
    ev.preventDefault();
    const data = ev.dataTransfer.getData("text");
    const element = document.getElementById(data);
    ev.currentTarget.querySelector('.space-y-2').appendChild(element);
    
    // Persist to localStorage
    updateTaskStatus(data, ev.currentTarget.dataset.status);
}

// Virtual Console Implementation
const originalLog = console.log;
console.log = (...args) => {
    const output = document.getElementById('console');
    output.innerHTML += args.join(' ') + '<br>';
    originalLog.apply(console, args);
};

.perspective-1000 { perspective: 1000px; }
.preserve-3d { transform-style: preserve-3d; }
.backface-hidden { backface-visibility: hidden; }
.rotate-y-180 { transform: rotateY(180deg); }

function randomizeChart() {
    document.querySelectorAll('.chart-bar').forEach(bar => {
        bar.style.height = Math.random() * 80 + 20 + '%';
    });
}

const commands = {
    theme: () => document.documentElement.classList.toggle('dark'),
    contact: () => location.href = '#contact'
};

function checkStrength(pass) {
    let score = 0;
    if (pass.length > 8) score++;
    if (pass.match(/[A-Z]/)) score++;
    if (pass.match(/[0-9]/)) score++;
    if (pass.match(/[^A-Za-z0-9]/)) score++;
    // Update UI based on score...
}

function slideCompare(e) {
    const rect = e.currentTarget.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const percent = (x / rect.width) * 100;
    document.getElementById('after-layer').style.width = percent + '%';
}