Further enhance and add in advanced stuff with a more immersive experience of windows 2.

```
<html><head><base href="." /><title>Windows 2.0</title><style>
body {
    margin: 0;
    padding: 20px;
    background: #008080;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    overflow: hidden;
}

.window {
    background: #c0c0c0;
    border: 2px solid #ffffff;
    border-right-color: #808080;
    border-bottom-color: #808080;
    position: absolute;
    min-width: 200px;
    min-height: 150px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
}

.title-bar {
    background: #000080;
    color: white;
    padding: 2px 5px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
}

.close-btn {
    background: #c0c0c0;
    border: 2px solid #ffffff;
    border-right-color: #808080;
    border-bottom-color: #808080;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
}

.window-content {
    padding: 10px;
    flex-grow: 1;
}

.menu-bar {
    display: flex;
    border-bottom: 1px solid #808080;
    padding: 2px;
}

.menu-item {
    padding: 2px 8px;
    cursor: pointer;
}

.menu-item:hover {
    background: #000080;
    color: white;
}

.icon {
    width: 32px;
    height: 32px;
    margin: 10px;
    text-align: center;
    cursor: pointer;
}

.icon-label {
    font-size: 12px;
    color: white;
    text-align: center;
    margin-top: 4px;
}
</style></head><body>

<div class="window" style="top: 50px; left: 50px">
    <div class="title-bar">
        <span>Program Manager</span>
        <div class="close-btn">×</div>
    </div>
    <div class="menu-bar">
        <div class="menu-item">File</div>
        <div class="menu-item">Options</div>
        <div class="menu-item">Window</div>
        <div class="menu-item">Help</div>
    </div>
    <div class="window-content">
        <div style="display: flex; flex-wrap: wrap;">
            <div class="icon">
                <svg viewBox="0 0 32 32">
                    <rect x="4" y="4" width="24" height="24" fill="#c0c0c0" stroke="#000"/>
                    <rect x="8" y="8" width="16" height="16" fill="#ffffff"/>
                </svg>
                <div class="icon-label">Applications</div>
            </div>
            <div class="icon">
                <svg viewBox="0 0 32 32">
                    <path d="M6,6 h20 v20 h-20 z" fill="#ffff00"/>
                    <rect x="10" y="10" width="12" height="12" fill="#000080"/>
                </svg>
                <div class="icon-label">Documents</div>
            </div>
        </div>
    </div>
</div>

<div class="window" style="top: 100px; left: 300px">
    <div class="title-bar">
        <span>Notepad</span>
        <div class="close-btn">×</div>
    </div>
    <div class="menu-bar">
        <div class="menu-item">File</div>
        <div class="menu-item">Edit</div>
        <div class="menu-item">Search</div>
    </div>
    <div class="window-content">
        <textarea style="width: 100%; height: 200px; resize: none; font-family: 'Courier New', monospace;">Welcome to Windows 2.0!</textarea>
    </div>
</div>

<script>
// Make windows draggable
document.querySelectorAll('.window').forEach(window => {
    let titleBar = window.querySelector('.title-bar');
    let isDragging = false;
    let currentX;
    let currentY;
    let initialX;
    let initialY;
    let xOffset = 0;
    let yOffset = 0;

    titleBar.addEventListener('mousedown', dragStart);
    document.addEventListener('mousemove', drag);
    document.addEventListener('mouseup', dragEnd);

    function dragStart(e) {
        initialX = e.clientX - xOffset;
        initialY = e.clientY - yOffset;

        if (e.target === titleBar) {
            isDragging = true;
        }
    }

    function drag(e) {
        if (isDragging) {
            e.preventDefault();
            currentX = e.clientX - initialX;
            currentY = e.clientY - initialY;

            xOffset = currentX;
            yOffset = currentY;

            window.style.transform = `translate(${currentX}px, ${currentY}px)`;
        }
    }

    function dragEnd(e) {
        initialX = currentX;
        initialY = currentY;
        isDragging = false;
    }

    // Window focus management
    window.addEventListener('mousedown', () => {
        document.querySelectorAll('.window').forEach(w => {
            w.style.zIndex = '1';
        });
        window.style.zIndex = '2';
    });

    // Close button functionality
    window.querySelector('.close-btn').addEventListener('click', () => {
        window.remove();
    });
});
</script>

</body></html>