From 8f7061ee69d083f6df7c2ebb9fb92713930a2262 Mon Sep 17 00:00:00 2001
From: rintyuu <me@rintyuu.uk>
Date: Sat, 30 Mar 2024 16:00:10 -0700
Subject: [PATCH] Uploaded v0.4 of notepad

---
 index.html | 270 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 270 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..cec0a2b
--- /dev/null
+++ b/index.html
@@ -0,0 +1,270 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Browser Notepad</title>
+<style>
+    /* Styles for draggable windows */
+    .window {
+        position: absolute;
+        border: 1px solid #ccc;
+        background-color: #fff;
+        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Drop shadow */
+    }
+    .title-bar {
+        background-color: #f0f0f0;
+        padding: 5px;
+        cursor: move;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .close-btn {
+        cursor: pointer;
+    }
+    .title-bar button {
+        cursor: pointer;
+    }
+    .text-area {
+        width: 300px;
+        height: 200px;
+    }
+    .dropdown {
+        position: relative;
+        display: inline-block;
+    }
+    .dropdown-content {
+        display: none;
+        position: absolute;
+        background-color: #f9f9f9;
+        min-width: 100px;
+        z-index: 1;
+        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Drop shadow */
+    }
+    .dropdown-content button {
+        color: black;
+        padding: 12px 16px;
+        text-decoration: none;
+        display: block;
+        cursor: pointer;
+        border: none;
+        background: none;
+        width: 100%;
+        text-align: left;
+    }
+    .dropdown:hover .dropdown-content {
+        display: block;
+    }
+    .top-left {
+        /* position: absolute; */
+        top: 5px;
+        left: 5px;
+    }
+</style>
+</head>
+<body>
+
+<button class="top-left" onclick="createNewNotepad()">New...</button>
+
+<button class="top-left" href="#" onclick="showHelp()">Help</button> 
+
+<script>
+    let zIndexCounter = 1;
+
+    // Function to create a new notepad
+    function createNewNotepad() {
+        const notepadWindow = document.createElement('div');
+        notepadWindow.className = 'window';
+        notepadWindow.style.left = '50px';
+        notepadWindow.style.top = '50px';
+        notepadWindow.style.zIndex = zIndexCounter++;
+
+        const titleBar = document.createElement('div');
+        titleBar.className = 'title-bar';
+        titleBar.draggable = true;
+
+        const fileDropdown = document.createElement('div');
+        fileDropdown.className = 'dropdown';
+        const fileDropdownButton = document.createElement('button');
+        fileDropdownButton.textContent = 'File';
+        const fileDropdownContent = document.createElement('div');
+        fileDropdownContent.className = 'dropdown-content';
+        const newButton = document.createElement('button');
+        newButton.textContent = 'New...';
+        newButton.onclick = createNewNotepad;
+        const saveButton = document.createElement('button');
+        saveButton.textContent = 'Save';
+        saveButton.onclick = function() {
+            saveText(notepadWindow);
+        };
+        const openButton = document.createElement('button');
+        openButton.textContent = 'Open';
+        openButton.onclick = function() {
+            openFile(notepadWindow);
+        };
+        const renameButton = document.createElement('button');
+        renameButton.textContent = 'Rename';
+        renameButton.onclick = function() {
+            const newTitle = prompt('Enter new title:');
+            if (newTitle !== null) {
+                titleText.textContent = newTitle;
+            }
+        };
+        const closeButton = document.createElement('button');
+        closeButton.textContent = 'Close';
+        closeButton.onclick = function() {
+            if (notepadWindow.querySelector('.text-area').value.trim() !== '') {
+                const confirmClose = confirm('Are you sure you want to close this notepad?');
+                if (confirmClose) {
+                    notepadWindow.parentNode.removeChild(notepadWindow);
+                }
+            } else {
+                notepadWindow.parentNode.removeChild(notepadWindow);
+            }
+        };
+        fileDropdownContent.appendChild(newButton);
+        fileDropdownContent.appendChild(saveButton);
+        fileDropdownContent.appendChild(openButton);
+        fileDropdownContent.appendChild(renameButton);
+        fileDropdownContent.appendChild(closeButton);
+        fileDropdown.appendChild(fileDropdownButton);
+        fileDropdown.appendChild(fileDropdownContent);
+
+        const titleText = document.createElement('div');
+        titleText.textContent = 'Notepad';
+        titleText.style.textAlign = 'center';
+        titleText.style.flexGrow = '1';
+
+        const closeButtonTitle = document.createElement('button');
+        closeButtonTitle.className = 'close-btn';
+        closeButtonTitle.innerHTML = 'X';
+        closeButtonTitle.onclick = function() {
+            if (notepadWindow.querySelector('.text-area').value.trim() !== '') {
+                const confirmClose = confirm('Are you sure you want to close this notepad?');
+                if (confirmClose) {
+                    notepadWindow.parentNode.removeChild(notepadWindow);
+                }
+            } else {
+                notepadWindow.parentNode.removeChild(notepadWindow);
+            }
+        };
+
+        titleBar.appendChild(fileDropdown);
+        titleBar.appendChild(titleText);
+        titleBar.appendChild(closeButtonTitle);
+
+        const textArea = document.createElement('textarea');
+        textArea.className = 'text-area';
+
+        notepadWindow.appendChild(titleBar);
+        notepadWindow.appendChild(textArea);
+        document.body.appendChild(notepadWindow);
+
+        makeDraggable(titleBar, notepadWindow);
+    }
+
+    // Function to make an element draggable
+    function makeDraggable(dragHandle, element) {
+        let offsetX, offsetY;
+
+        dragHandle.addEventListener('mousedown', function(event) {
+            event.preventDefault();
+            offsetX = event.clientX - parseInt(element.style.left, 10);
+            offsetY = event.clientY - parseInt(element.style.top, 10);
+
+            document.addEventListener('mousemove', dragElement);
+            document.addEventListener('mouseup', stopDragging);
+        });
+
+        function dragElement(event) {
+            element.style.left = (event.clientX - offsetX) + 'px';
+            element.style.top = (event.clientY - offsetY) + 'px';
+        }
+
+        function stopDragging() {
+            document.removeEventListener('mousemove', dragElement);
+            document.removeEventListener('mouseup', stopDragging);
+        }
+    }
+
+    // Function to save text from notepad
+    function saveText(notepadWindow) {
+        const textArea = notepadWindow.querySelector('.text-area');
+        const textToSave = textArea.value;
+        const blob = new Blob([textToSave], {type: "text/plain"});
+        const url = URL.createObjectURL(blob);
+        const titleText = notepadWindow.querySelector('.title-bar > div:nth-child(2)').textContent;
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = titleText + '.txt';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+    }
+
+    // Function to open text file in notepad
+    function openFile(notepadWindow) {
+        const fileInput = document.createElement('input');
+        fileInput.type = 'file';
+        fileInput.accept = 'text/plain';
+        fileInput.addEventListener('change', function() {
+            const file = fileInput.files[0];
+            const reader = new FileReader();
+            reader.onload = function(event) {
+                notepadWindow.querySelector('.text-area').value = event.target.result;
+            };
+            reader.readAsText(file);
+        });
+        fileInput.click();
+    }
+
+    // Function to show help
+    function showHelp() {
+        const helpWindow = document.createElement('div');
+        helpWindow.className = 'window';
+        helpWindow.style.left = '50px';
+        helpWindow.style.top = '50px';
+        helpWindow.style.zIndex = zIndexCounter++;
+
+        const titleBar = document.createElement('div');
+        titleBar.className = 'title-bar';
+        titleBar.draggable = true;
+
+        const titleText = document.createElement('div');
+        titleText.textContent = 'Help';
+        titleText.style.textAlign = 'center';
+        titleText.style.flexGrow = '1';
+
+        const closeButtonTitle = document.createElement('button');
+        closeButtonTitle.className = 'close-btn';
+        closeButtonTitle.innerHTML = 'X';
+        closeButtonTitle.onclick = function() {
+            helpWindow.parentNode.removeChild(helpWindow);
+        };
+
+        titleBar.appendChild(titleText);
+        titleBar.appendChild(closeButtonTitle);
+
+        const textArea = document.createElement('textarea');
+        textArea.className = 'text-area';
+        textArea.style.width = '578px'; // Adjusting width
+        textArea.style.height = '221px'; // Adjusting height
+        textArea.value = 'rintyuu/notepad v0.4\n\n' +
+                         'using this webapp is very straight foward,\n' +
+                         ' - click "New Notepad" at the top right to make a new text window\n' +
+                         ' - windows are dragable\n' +
+                         ' - in each window, there is a file context menu\n' +
+                         ' - have fun typing\n' +
+                         'contact me at me@rintyuu.uk for suggestions';
+
+        helpWindow.appendChild(titleBar);
+        helpWindow.appendChild(textArea);
+        document.body.appendChild(helpWindow);
+
+        makeDraggable(titleBar, helpWindow);
+    }
+</script>
+
+</body>
+</html>
