EncodeTheCode/mock_operating_system6_opt_poorly_maybe.htm

## mock_operating_system6_opt_poorly_maybe.htm
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mock File System</title>
    <style>
        body {
            font-family: 'Courier New', Courier, monospace;
            background-color: #f4f4f4;
            padding: 20px;
        }
        .filesystem {
            border: 1px solid #000;
            background-color: #fff;
            padding: 10px;
            width: 300px;
        }
        .directory, .file {
            margin-left: 20px;
            cursor: pointer;
        }
        .directory > .folder-name {
            font-weight: bold;
            color: #0066cc;
        }
        .file {
            color: #333;
        }
    </style>
</head>
<body>
    <h1>Mock File System</h1>
    <div class="filesystem">
        <div class="directory" id="c-drive">
            <div class="folder-name" ondblclick="rename(this)" onclick="toggleVisibility('c-drive-contents')">C:\</div>
            <div class="contents" id="c-drive-contents">
                <div class="file" ondblclick="rename(this)">notepad.exe</div>
                <div class="file" ondblclick="rename(this)">bills.txt</div>
                <div class="directory">
                    <div class="folder-name" ondblclick="rename(this)" onclick="toggleVisibility('my-folder-contents')">MyFolder</div>
                    <div class="contents" id="my-folder-contents">
                        <div class="file" ondblclick="rename(this)">document.docx</div>
                        <div class="file" ondblclick="rename(this)">photo.jpg</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div>
        <h2>Current Working Directory: <span id="cwd">C:\</span></h2>
        <input type="text" id="command-line" placeholder="Enter command (e.g., cd MyFolder)">
        <button onclick="executeCommand()">Execute</button>
    </div>
    <div>
        <h2>Create New File</h2>
        <input type="text" id="new-file-name" placeholder="File name (e.g., newfile.txt)">
        <button onclick="create('file')">Create File</button>
    </div>
    <div>
        <h2>Create New Folder</h2>
        <input type="text" id="new-folder-name" placeholder="Folder name (e.g., NewFolder)">
        <button onclick="create('folder')">Create Folder</button>
    </div>

    <script>
        let currentDir = document.getElementById('c-drive-contents');
        let currentPath = ['C:'];

        function toggleVisibility(id) {
            document.getElementById(id).style.display ^= 2;
        }

        function create(type) {
            var name = document.getElementById(`new-${type}-name`).value.trim();
            if (!name) {
                alert(`Please enter a ${type} name.`);
                return;
            }
            if (type === 'file' && fileExists(currentDir, name) || type === 'folder' && folderExists(currentDir, name)) {
                alert(`${type.charAt(0).toUpperCase() + type.slice(1)} already exists. Please rename the ${type}.`);
                return;
            }
            var newItem = document.createElement('div');
            newItem.className = type;
            newItem.textContent = name;
            newItem.setAttribute('ondblclick', 'rename(this)');
            if (type === 'folder') {
                newItem.onclick = () => toggleVisibility(`${name}-contents`);
                newItem.innerHTML += `<div class="contents" id="${name}-contents"></div>`;
            }
            currentDir.appendChild(newItem);
            document.getElementById(`new-${type}-name`).value = '';
        }

        function fileExists(parent, name) {
            return Array.from(parent.getElementsByClassName('file')).some(item => item.textContent === name);
        }

        function folderExists(parent, name) {
            return Array.from(parent.getElementsByClassName('directory')).some(item => item.getElementsByClassName('folder-name')[0].textContent === name);
        }

        function rename(element) {
            var newName = prompt('Enter new name:', element.textContent);
            if (newName && ((element.className === 'file' && !fileExists(currentDir, newName)) ||
                (element.className === 'directory' && !folderExists(currentDir, newName)))) {
                element.textContent = newName;
                if (element.className === 'directory') {
                    var contentsId = element.id.replace('-contents', '');
                    element.onclick = () => toggleVisibility(`${newName}-contents`);
                    document.getElementById(contentsId).id = `${newName}-contents`;
                }
            } else if (newName) {
                alert(`A ${element.className} with this name already exists.`);
            }
        }

        function executeCommand() {
            var command = document.getElementById('command-line').value.trim();
            if (command.startsWith('cd ')) {
                var path = command.slice(3).trim();
                changeDirectory(path);
            } else {
                alert('Unknown command.');
            }
            document.getElementById('command-line').value = '';
        }

        function changeDirectory(path) {
            if (path === '..') {
                if (currentPath.length > 1) {
                    currentPath.pop();
                } else {
                    alert('Already at the root directory.');
                    return;
                }
            } else if (path.toUpperCase().endsWith('\\')) {
                currentPath = path.toUpperCase().split('\\').filter(item => item);
            } else {
                currentPath.push(...path.toUpperCase().split('\\').filter(item => item));
            }
            document.getElementById('cwd').textContent = currentPath.join('\\') + '\\';
        }
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Mock File System</title>
	<style>
	body {
	font-family: 'Courier New', Courier, monospace;
	background-color: #f4f4f4;
	padding: 20px;
	}
	.filesystem {
	border: 1px solid #000;
	background-color: #fff;
	padding: 10px;
	width: 300px;
	}
	.directory, .file {
	margin-left: 20px;
	cursor: pointer;
	}
	.directory > .folder-name {
	font-weight: bold;
	color: #0066cc;
	}
	.file {
	color: #333;
	}
	</style>
	</head>
	<body>
	<h1>Mock File System</h1>
	<div class="filesystem">
	<div class="directory" id="c-drive">
	<div class="folder-name" ondblclick="rename(this)" onclick="toggleVisibility('c-drive-contents')">C:\</div>
	<div class="contents" id="c-drive-contents">
	<div class="file" ondblclick="rename(this)">notepad.exe</div>
	<div class="file" ondblclick="rename(this)">bills.txt</div>
	<div class="directory">
	<div class="folder-name" ondblclick="rename(this)" onclick="toggleVisibility('my-folder-contents')">MyFolder</div>
	<div class="contents" id="my-folder-contents">
	<div class="file" ondblclick="rename(this)">document.docx</div>
	<div class="file" ondblclick="rename(this)">photo.jpg</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<div>
	<h2>Current Working Directory: <span id="cwd">C:\</span></h2>
	<input type="text" id="command-line" placeholder="Enter command (e.g., cd MyFolder)">
	<button onclick="executeCommand()">Execute</button>
	</div>
	<div>
	<h2>Create New File</h2>
	<input type="text" id="new-file-name" placeholder="File name (e.g., newfile.txt)">
	<button onclick="create('file')">Create File</button>
	</div>
	<div>
	<h2>Create New Folder</h2>
	<input type="text" id="new-folder-name" placeholder="Folder name (e.g., NewFolder)">
	<button onclick="create('folder')">Create Folder</button>
	</div>

	<script>
	let currentDir = document.getElementById('c-drive-contents');
	let currentPath = ['C:'];

	function toggleVisibility(id) {
	document.getElementById(id).style.display ^= 2;
	}

	function create(type) {
	var name = document.getElementById(`new-${type}-name`).value.trim();
	if (!name) {
	alert(`Please enter a ${type} name.`);
	return;
	}
	if (type === 'file' && fileExists(currentDir, name) \|\| type === 'folder' && folderExists(currentDir, name)) {
	alert(`${type.charAt(0).toUpperCase() + type.slice(1)} already exists. Please rename the ${type}.`);
	return;
	}
	var newItem = document.createElement('div');
	newItem.className = type;
	newItem.textContent = name;
	newItem.setAttribute('ondblclick', 'rename(this)');
	if (type === 'folder') {
	newItem.onclick = () => toggleVisibility(`${name}-contents`);
	newItem.innerHTML += `<div class="contents" id="${name}-contents"></div>`;
	}
	currentDir.appendChild(newItem);
	document.getElementById(`new-${type}-name`).value = '';
	}

	function fileExists(parent, name) {
	return Array.from(parent.getElementsByClassName('file')).some(item => item.textContent === name);
	}

	function folderExists(parent, name) {
	return Array.from(parent.getElementsByClassName('directory')).some(item => item.getElementsByClassName('folder-name')[0].textContent === name);
	}

	function rename(element) {
	var newName = prompt('Enter new name:', element.textContent);
	if (newName && ((element.className === 'file' && !fileExists(currentDir, newName)) \|\|
	(element.className === 'directory' && !folderExists(currentDir, newName)))) {
	element.textContent = newName;
	if (element.className === 'directory') {
	var contentsId = element.id.replace('-contents', '');
	element.onclick = () => toggleVisibility(`${newName}-contents`);
	document.getElementById(contentsId).id = `${newName}-contents`;
	}
	} else if (newName) {
	alert(`A ${element.className} with this name already exists.`);
	}
	}

	function executeCommand() {
	var command = document.getElementById('command-line').value.trim();
	if (command.startsWith('cd ')) {
	var path = command.slice(3).trim();
	changeDirectory(path);
	} else {
	alert('Unknown command.');
	}
	document.getElementById('command-line').value = '';
	}

	function changeDirectory(path) {
	if (path === '..') {
	if (currentPath.length > 1) {
	currentPath.pop();
	} else {
	alert('Already at the root directory.');
	return;
	}
	} else if (path.toUpperCase().endsWith('\\')) {
	currentPath = path.toUpperCase().split('\\').filter(item => item);
	} else {
	currentPath.push(...path.toUpperCase().split('\\').filter(item => item));
	}
	document.getElementById('cwd').textContent = currentPath.join('\\') + '\\';
	}
	</script>
	</body>
	</html>