EncodeTheCode/mock_operating_system5c_opt_bad.htm

## mock_operating_system5c_opt_bad.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) {
            var contents = document.getElementById(id);
            contents.style.display = (contents.style.display === 'none' || contents.style.display === '') ? 'block' : 'none';
        }

        function create(type) {
            var name = type === 'file' ? document.getElementById('new-file-name').value : document.getElementById('new-folder-name').value;
            if (!name) {
                alert('Please enter a name.');
                return;
            }
            if (type === 'file' && fileExists(currentDir, name)) {
                alert('File already exists. Please rename the file.');
                return;
            }
            if (type === 'folder' && folderExists(currentDir, name)) {
                alert('Folder already exists. Please rename the folder.');
                return;
            }
            var newItem = document.createElement(type === 'file' ? 'div' : 'div');
            newItem.className = type;
            newItem.textContent = name;
            newItem.setAttribute('ondblclick', 'rename(this)');
            if (type === 'folder') {
                newItem.setAttribute('onclick', `toggleVisibility('${name}-contents')`);
                var contentsDiv = document.createElement('div');
                contentsDiv.className = 'contents';
                contentsDiv.id = name + '-contents';
                newItem.appendChild(contentsDiv);
            }
            currentDir.appendChild(newItem);
            document.getElementById(type === 'file' ? 'new-file-name' : 'new-folder-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) {
                if ((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.setAttribute('onclick', `toggleVisibility('${newName}-contents')`);
                        document.getElementById(contentsId).id = newName + '-contents';
                    }
                } else {
                    alert('A file/folder 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('\\');
                currentPath = currentPath.filter(item => item);
            } else {
                var parts = path.toUpperCase().split('\\');
                currentPath.push(...parts.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) {
	var contents = document.getElementById(id);
	contents.style.display = (contents.style.display === 'none' \|\| contents.style.display === '') ? 'block' : 'none';
	}

	function create(type) {
	var name = type === 'file' ? document.getElementById('new-file-name').value : document.getElementById('new-folder-name').value;
	if (!name) {
	alert('Please enter a name.');
	return;
	}
	if (type === 'file' && fileExists(currentDir, name)) {
	alert('File already exists. Please rename the file.');
	return;
	}
	if (type === 'folder' && folderExists(currentDir, name)) {
	alert('Folder already exists. Please rename the folder.');
	return;
	}
	var newItem = document.createElement(type === 'file' ? 'div' : 'div');
	newItem.className = type;
	newItem.textContent = name;
	newItem.setAttribute('ondblclick', 'rename(this)');
	if (type === 'folder') {
	newItem.setAttribute('onclick', `toggleVisibility('${name}-contents')`);
	var contentsDiv = document.createElement('div');
	contentsDiv.className = 'contents';
	contentsDiv.id = name + '-contents';
	newItem.appendChild(contentsDiv);
	}
	currentDir.appendChild(newItem);
	document.getElementById(type === 'file' ? 'new-file-name' : 'new-folder-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) {
	if ((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.setAttribute('onclick', `toggleVisibility('${newName}-contents')`);
	document.getElementById(contentsId).id = newName + '-contents';
	}
	} else {
	alert('A file/folder 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('\\');
	currentPath = currentPath.filter(item => item);
	} else {
	var parts = path.toUpperCase().split('\\');
	currentPath.push(...parts.filter(item => item));
	}
	document.getElementById('cwd').textContent = currentPath.join('\\') + '\\';
	}
	</script>
	</body>
	</html>