From 1185a97b587b2ed5b2ed57811ed25cee11f543c7 Mon Sep 17 00:00:00 2001
From: rintyuu <me@rintyuu.uk>
Date: Tue, 3 Dec 2024 21:35:53 -0800
Subject: [PATCH] add embed functionality

---
 index.html | 368 +++++++++++++++++++++++++++++------------------------
 1 file changed, 202 insertions(+), 166 deletions(-)
diff --git a/index.html b/index.html
index 64a15b9..28e20e7 100644
--- a/index.html
+++ b/index.html
@@ -1,48 +1,53 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Notepad</title>
-<style>
-    /* Styles for draggable windows */
-    .window {
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Notepad</title>
+    <style>
+      .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 {
+        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+      }
+      .title-bar {
         background-color: #f0f0f0;
         padding: 5px;
         cursor: move;
         display: flex;
         justify-content: space-between;
         align-items: center;
-    }
-    .close-btn {
+      }
+      .close-btn {
         cursor: pointer;
-    }
-    .title-bar button {
+      }
+      .title-bar button {
         cursor: pointer;
-    }
-    .text-area {
+      }
+      .text-area {
         width: 300px;
         height: 200px;
-    }
-    .dropdown {
+      }
+      .embed-area {
+        width: 100%;
+        height: 100%;
+        border: none;
+        display: none; 
+      }
+      .dropdown {
         position: relative;
         display: inline-block;
-    }
-    .dropdown-content {
+      }
+      .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 {
+        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
+      }
+      .dropdown-content button {
         color: black;
         padding: 12px 16px;
         text-decoration: none;
@@ -52,220 +57,251 @@
         background: none;
         width: 100%;
         text-align: left;
-    }
-    .dropdown:hover .dropdown-content {
+      }
+      .dropdown:hover .dropdown-content {
         display: block;
-    }
-    .top-left {
-        /* position: absolute; */
-        top: 5px;
-        left: 5px;
-    }
-</style>
-</head>
-<body>
+      }
+    </style>
+  </head>
+  <body>
+    <button onclick="createNewNotepad()">New...</button>
+    <button onclick="showHelp()">Help</button>
 
-<button class="top-left" onclick="createNewNotepad()">New...</button>
+    <script>
+      let zIndexCounter = 1;
 
-<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';
+      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';
+        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...';
+        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 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 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);
+
+        const renameButton = document.createElement("button");
+        renameButton.textContent = "Rename";
+        renameButton.onclick = function () {
+          const newTitle = prompt("Enter new title:");
+          if (newTitle !== null) {
+            titleText.textContent = newTitle;
+          }
+        };
+
+        const embedButton = document.createElement("button");
+        embedButton.textContent = "Embed";
+        embedButton.onclick = function () {
+          const embedCode = prompt("Enter embed HTML (e.g., iframe):");
+          if (embedCode) {
+            replaceWithEmbed(notepadWindow, embedCode);
+          }
+        };
+
+        const closeButton = document.createElement("button");
+        closeButton.textContent = "Close";
+        closeButton.onclick = function () {
+          const textArea = notepadWindow.querySelector(".text-area");
+          if (textArea.value.trim() === "") {
+            notepadWindow.parentNode.removeChild(notepadWindow);
+          } else {
+            const confirmClose = confirm(
+              "Are you sure you want to close this notepad?"
+            );
+            if (confirmClose) {
+              notepadWindow.parentNode.removeChild(notepadWindow);
             }
+          }
         };
+
         fileDropdownContent.appendChild(newButton);
         fileDropdownContent.appendChild(saveButton);
         fileDropdownContent.appendChild(openButton);
         fileDropdownContent.appendChild(renameButton);
+        fileDropdownContent.appendChild(embedButton);
         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 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);
+        const closeButtonTitle = document.createElement("button");
+        closeButtonTitle.className = "close-btn";
+        closeButtonTitle.innerHTML = "X";
+        closeButtonTitle.onclick = function () {
+          const textArea = notepadWindow.querySelector(".text-area");
+          if (textArea.value.trim() === "") {
+            notepadWindow.parentNode.removeChild(notepadWindow);
+          } else {
+            const confirmClose = confirm(
+              "Are you sure you want to close this?"
+            );
+            if (confirmClose) {
+              notepadWindow.parentNode.removeChild(notepadWindow);
             }
+          }
         };
 
         titleBar.appendChild(fileDropdown);
         titleBar.appendChild(titleText);
         titleBar.appendChild(closeButtonTitle);
 
-        const textArea = document.createElement('textarea');
-        textArea.className = 'text-area';
+        const textArea = document.createElement("textarea");
+        textArea.className = "text-area";
+
+        const embedArea = document.createElement("div");
+        embedArea.className = "embed-area";
 
         notepadWindow.appendChild(titleBar);
         notepadWindow.appendChild(textArea);
+        notepadWindow.appendChild(embedArea);
         document.body.appendChild(notepadWindow);
 
         makeDraggable(titleBar, notepadWindow);
-    }
+      }
 
-    // Function to make an element draggable
-    function makeDraggable(dragHandle, element) {
+      function replaceWithEmbed(notepadWindow, embedCode) {
+        const textArea = notepadWindow.querySelector(".text-area");
+        const embedArea = notepadWindow.querySelector(".embed-area");
+
+        textArea.style.display = "none";
+        embedArea.style.display = "block";
+        embedArea.innerHTML = embedCode;
+      }
+
+      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);
+        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);
+          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';
+          element.style.left = event.clientX - offsetX + "px";
+          element.style.top = event.clientY - offsetY + "px";
         }
 
         function stopDragging() {
-            document.removeEventListener('mousemove', dragElement);
-            document.removeEventListener('mouseup', stopDragging);
+          document.removeEventListener("mousemove", dragElement);
+          document.removeEventListener("mouseup", stopDragging);
         }
-    }
+      }
 
-    // Function to save text from notepad
-    function saveText(notepadWindow) {
-        const textArea = notepadWindow.querySelector('.text-area');
+      function saveText(notepadWindow) {
+        const textArea = notepadWindow.querySelector(".text-area");
         const textToSave = textArea.value;
-        const blob = new Blob([textToSave], {type: "text/plain"});
+        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');
+        const titleText = notepadWindow.querySelector(
+          ".title-bar > div:nth-child(2)"
+        ).textContent;
+        const a = document.createElement("a");
         a.href = url;
-        a.download = titleText + '.txt';
+        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);
+      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) {
+            const textArea = notepadWindow.querySelector(".text-area");
+            textArea.style.display = "block";
+            const embedArea = notepadWindow.querySelector(".embed-area");
+            embedArea.style.display = "none";
+            textArea.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';
+      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';
+        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 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);
+        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\n' +
-                         'https://git.rintyuu.dev/rintyuu/notepad\n' +
-                         'contact me at me@rintyuu.uk for suggestions';
+        const textArea = document.createElement("textarea");
+        textArea.className = "text-area";
+        textArea.style.width = "578px";
+        textArea.style.height = "221px";
+        textArea.value =
+          "rintyuu/notepad v0.5\n\n" +
+          "using this webapp is very straightforward,\n" +
+          ' - click "New..." at the top right to make a new text window\n' +
+          " - windows are draggable\n" +
+          " - in each window, there is a file context menu\n" +
+          " - have fun typing\n\n" +
+          "https://git.rintyuu.dev/rintyuu/notepad\n" +
+          "contact me at me@rintyuu.uk for suggestions";
 
         helpWindow.appendChild(titleBar);
         helpWindow.appendChild(textArea);
         document.body.appendChild(helpWindow);
 
         makeDraggable(titleBar, helpWindow);
-    }
-</script>
+      }
 
-</body>
+      createNewNotepad();
+    </script>
+  </body>
 </html>
