EncodeTheCode/mock_operating_system5c_cut.htm

## mock_operating_system5c_cut.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="renameFolder(this)" onclick="toggleVisibility('c-drive-contents')">C:\</div>
            <div class="contents" id="c-drive-contents">
                <div class="file" ondblclick="renameFile(this)">notepad.exe</div>
                <div class="file" ondblclick="renameFile(this)">bills.txt</div>
                <div class="directory">
                    <div class="folder-name" ondblclick="renameFolder(this)" onclick="toggleVisibility('my-folder-contents')">MyFolder</div>
                    <div class="contents" id="my-folder-contents">
                        <div class="file" ondblclick="renameFile(this)">document.docx</div>
                        <div class="file" ondblclick="renameFile(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="createFile()">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="createFolder()">Create Folder</button>
    </div>

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

        function toggleVisibility(id) {
            var contents = document.getElementById(id);
            if (contents.style.display === 'none' || contents.style.display === '') {
                contents.style.display = 'block';
            } else {
                contents.style.display = 'none';
            }
        }

        function createFile() {
            var fileName = document.getElementById('new-file-name').value;
            if (fileName) {
                if (fileExists(currentDir, fileName)) {
                    alert('File already exists. Please rename the file.');
                } else {
                    var newFile = document.createElement('div');
                    newFile.className = 'file';
                    newFile.textContent = fileName;
                    newFile.setAttribute('ondblclick', 'renameFile(this)');
                    currentDir.appendChild(newFile);
                    document.getElementById('new-file-name').value = ''; // Clear the input field
                }
            } else {
                alert('Please enter a file name.');
            }
        }

        function createFolder() {
            var folderName = document.getElementById('new-folder-name').value;
            if (folderName) {
                if (folderExists(currentDir, folderName)) {
                    alert('Folder already exists. Please rename the folder.');
                } else {
                    var newFolder = document.createElement('div');
                    newFolder.className = 'directory';

                    var folderNameDiv = document.createElement('div');
                    folderNameDiv.className = 'folder-name';
                    folderNameDiv.textContent = folderName;
                    folderNameDiv.setAttribute('ondblclick', 'renameFolder(this)');
                    folderNameDiv.setAttribute('onclick', `toggleVisibility('${folderName}-contents')`);
                    newFolder.appendChild(folderNameDiv);

                    var contentsDiv = document.createElement('div');
                    contentsDiv.className = 'contents';
                    contentsDiv.id = folderName + '-contents';
                    newFolder.appendChild(contentsDiv);

                    currentDir.appendChild(newFolder);
                    document.getElementById('new-folder-name').value = ''; // Clear the input field
                }
            } else {
                alert('Please enter a folder name.');
            }
        }

        function fileExists(parent, name) {
            var files = parent.getElementsByClassName('file');
            for (var i = 0; i < files.length; i++) {
                if (files[i].textContent === name) {
                    return true;
                }
            }
            return false;
        }

        function folderExists(parent, name) {
            var folders = parent.getElementsByClassName('directory');
            for (var i = 0; i < folders.length; i++) {
                if (folders[i].getElementsByClassName('folder-name')[0].textContent === name) {
                    return true;
                }
            }
            return false;
        }

        function renameFile(element) {
            var newName = prompt('Enter new name:', element.textContent);
            if (newName) {
                if (!fileExists(currentDir, newName)) {
                    element.textContent = newName;
                } else {
                    alert('A file with this name already exists.');
                }
            }
        }

        function renameFolder(element) {
            var newName = prompt('Enter new name:', element.textContent);
            if (newName) {
                var parentContents = element.nextElementSibling;
                if (!folderExists(parentContents.parentNode, newName)) {
                    element.textContent = newName;
                    element.setAttribute('onclick', `toggleVisibility('${newName}-contents')`);
                    parentContents.id = newName + '-contents';
                } else {
                    alert('A 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 = ''; // Clear the input field
        }

        function changeDirectory(path) {
            if (path === '..') {
                if (currentPath.length > 1) {
                    currentPath.pop();
                } else {
                    alert('Already at the root directory.');
                    return;
                }
            } else if (path.toUpperCase().endsWith('\\')) {
                // Absolute path
                currentPath = path.toUpperCase().split('\\');
                currentPath = currentPath.filter((item
	<!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="renameFolder(this)" onclick="toggleVisibility('c-drive-contents')">C:\</div>
	<div class="contents" id="c-drive-contents">
	<div class="file" ondblclick="renameFile(this)">notepad.exe</div>
	<div class="file" ondblclick="renameFile(this)">bills.txt</div>
	<div class="directory">
	<div class="folder-name" ondblclick="renameFolder(this)" onclick="toggleVisibility('my-folder-contents')">MyFolder</div>
	<div class="contents" id="my-folder-contents">
	<div class="file" ondblclick="renameFile(this)">document.docx</div>
	<div class="file" ondblclick="renameFile(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="createFile()">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="createFolder()">Create Folder</button>
	</div>

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

	function toggleVisibility(id) {
	var contents = document.getElementById(id);
	if (contents.style.display === 'none' \|\| contents.style.display === '') {
	contents.style.display = 'block';
	} else {
	contents.style.display = 'none';
	}
	}

	function createFile() {
	var fileName = document.getElementById('new-file-name').value;
	if (fileName) {
	if (fileExists(currentDir, fileName)) {
	alert('File already exists. Please rename the file.');
	} else {
	var newFile = document.createElement('div');
	newFile.className = 'file';
	newFile.textContent = fileName;
	newFile.setAttribute('ondblclick', 'renameFile(this)');
	currentDir.appendChild(newFile);
	document.getElementById('new-file-name').value = ''; // Clear the input field
	}
	} else {
	alert('Please enter a file name.');
	}
	}

	function createFolder() {
	var folderName = document.getElementById('new-folder-name').value;
	if (folderName) {
	if (folderExists(currentDir, folderName)) {
	alert('Folder already exists. Please rename the folder.');
	} else {
	var newFolder = document.createElement('div');
	newFolder.className = 'directory';

	var folderNameDiv = document.createElement('div');
	folderNameDiv.className = 'folder-name';
	folderNameDiv.textContent = folderName;
	folderNameDiv.setAttribute('ondblclick', 'renameFolder(this)');
	folderNameDiv.setAttribute('onclick', `toggleVisibility('${folderName}-contents')`);
	newFolder.appendChild(folderNameDiv);

	var contentsDiv = document.createElement('div');
	contentsDiv.className = 'contents';
	contentsDiv.id = folderName + '-contents';
	newFolder.appendChild(contentsDiv);

	currentDir.appendChild(newFolder);
	document.getElementById('new-folder-name').value = ''; // Clear the input field
	}
	} else {
	alert('Please enter a folder name.');
	}
	}

	function fileExists(parent, name) {
	var files = parent.getElementsByClassName('file');
	for (var i = 0; i < files.length; i++) {
	if (files[i].textContent === name) {
	return true;
	}
	}
	return false;
	}

	function folderExists(parent, name) {
	var folders = parent.getElementsByClassName('directory');
	for (var i = 0; i < folders.length; i++) {
	if (folders[i].getElementsByClassName('folder-name')[0].textContent === name) {
	return true;
	}
	}
	return false;
	}

	function renameFile(element) {
	var newName = prompt('Enter new name:', element.textContent);
	if (newName) {
	if (!fileExists(currentDir, newName)) {
	element.textContent = newName;
	} else {
	alert('A file with this name already exists.');
	}
	}
	}

	function renameFolder(element) {
	var newName = prompt('Enter new name:', element.textContent);
	if (newName) {
	var parentContents = element.nextElementSibling;
	if (!folderExists(parentContents.parentNode, newName)) {
	element.textContent = newName;
	element.setAttribute('onclick', `toggleVisibility('${newName}-contents')`);
	parentContents.id = newName + '-contents';
	} else {
	alert('A 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 = ''; // Clear the input field
	}

	function changeDirectory(path) {
	if (path === '..') {
	if (currentPath.length > 1) {
	currentPath.pop();
	} else {
	alert('Already at the root directory.');
	return;
	}
	} else if (path.toUpperCase().endsWith('\\')) {
	// Absolute path
	currentPath = path.toUpperCase().split('\\');
	currentPath = currentPath.filter((item