<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Cloudflare Web Analytics --><script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "cf90fc61d0d64d3cb6c7ea91712fc5ed"}'></script><!-- End Cloudflare Web Analytics -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Home thing -->
    <link rel="stylesheet" href="https://awashcard0.pages.dev/home-thing/style.css">
    <script src='https://awashcard0.pages.dev/home-thing/script.js'></script>
    <!-- End home thing -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap" rel="stylesheet">
    <link href="/favicon.ico" type="image/x-icon" rel="shortcut icon">
    <link href="/favicon.ico" type="image/x-icon" rel="icon">
    <title>Quick edit</title>
  </head>
  <body>
    <div class="menubar">
      <a href="/editers">Quick edit</a>
      <button onclick="location.href = 'https://github.com/Awashcard0/quick-edit'">Github</button>
      <button onclick="copy()">Copy</button>
      <button onclick="savedoc()">Save</button>
      <button onclick="print()">Print</button>
      <button onclick="cle()">Clear</button>
      <input type="file" id="file-input" />
    </div>
    <div>
      <noscript>
        <h1>Where are your maners?</h1>
        <h2>You need javascript to use this</h2>
      </noscript>
      <div>
        <!-- Text box -->
        <textarea type="text" id="text" name="text" placeholder="Edit text here" onchange="savetols()" autofocus></textarea>
      </div>
    </div>
    <div id="snackbar">Copied to clipboard</div>
    <div id="del">Cleared</div>
    <div id="sav">Downloaded</div>
    <div id="welcome">Welcome to quick edit</div>
  </body>
  <script>
// welcome
    setTimeout(function() {
      var x = document.getElementById("welcome");
      x.className = "show";
      setTimeout(function() {
        x.className = x.className.replace("show", "");
      }, 1900);
    }, 100);
// check for external file
var url = window.location.href
var externalFile = url.includes("?")

if (externalFile == true) {
  // is external file
  setTimeout(function() {
      var x = document.getElementById("welcome");
      x.innerHTML = "Getting external url..."
      x.className = "show";
      setTimeout(function() {
        x.className = x.className.replace("show", "");
      }, 3000);
      let externalFileUrl = url.split("?");
      var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                //alert(xhr.response);
                var text = document.getElementById("text");
                text.value = xhr.response
            }
        }
        xhr.open('get', externalFileUrl[1], true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
        xhr.send();
    }, 2300);
} else {
  // not external file

    var text = document.getElementById("text");
    // localStorage.setItem("text", localStorage.text);
    if (localStorage.getItem("text")) {
      if (confirm("Do you want to load old changes?") == true) {
        text.value = localStorage.getItem("text");
        let savcode = localStorage.getItem("text");
        localStorage.removeItem("text");
        localStorage.setItem("text", savcode)
      } else {
        let savcode = localStorage.getItem("text");
        localStorage.removeItem("text");
        localStorage.setItem("text", savcode)
      }
    } else {
      let savcode = localStorage.getItem("text");
      localStorage.removeItem("text");
      localStorage.setItem("text", savcode)
    }
  }

    function print() {
      childWindow = window.open('', 'childWindow', 'location=yes, menubar=yes, toolbar=yes');
      childWindow.document.open();
      childWindow.document.write(' <html> <head> <title> Print - Quick edit - quick-edit.pages.dev </title> </head> <body> ');
          childWindow.document.write(document.getElementById('text').value.replace(/\n/gi, ' <br> '));
                setTimeout(function() {
                  childWindow.print(); 
                  childWindow.document.close();
                  childWindow.close();
                }, 2500);
              }

              function savetols() {
                // localStorage.text = text.value;
                localStorage.setItem("text", text.value);
              }
              if (typeof(Storage) !== "undefined") {
                // Code for localStorage/sessionStorage.
              } else {
                // alert("Cant save to local storge")
              }

              function tsave() {
                text = document.getElementById("text");
                var savebox = document.getElementById("savebox");
                savebox.value = text.value
                text.value = savebox.value
              }

              function cle() {
                var y = document.getElementById("del");
                text = document.getElementById("text");
                y.innerHTML = "Cleared"
                text.value = "";
                text.select();
                y.className = "show";
                setTimeout(function() {
                  y.className = y.className.replace("show", "");
                }, 3000);
              }

              function savedoc() {
                var filename = prompt("File name?\nex. filename.fileextension")
                let t = document.getElementById("text");
                if (confirm("You are saving the file as " + filename) == true) {
                  var textFileAsBlob = new Blob([t.value], {
                    type: 'text/plain'
                  });
                  var downloadLink = document.createElement("a");
                  downloadLink.download = filename;
                  downloadLink.innerHTML = "Download File";
                  if (window.webkitURL != null) {
                    // Chrome allows the link to be clicked
                    // without actually adding it to the DOM.
                    downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
                  } else {
                    // Firefox requires the link to be added to the DOM
                    // before it can be clicked.
                    downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
                    downloadLink.onclick = destroyClickedElement;
                    downloadLink.style.display = "none";
                    document.body.appendChild(downloadLink);
                  }
                  downloadLink.click();
                  var x = document.getElementById("sav");
                  x.innerHTML = "Downloaded"
                  x.className = "show";
                  setTimeout(function() {
                    x.className = x.className.replace("show", "");
                  }, 3000);
                } else {
                  var x = document.getElementById("sav");
                  x.innerHTML = "Cancelled"
                  x.className = "show";
                  setTimeout(function() {
                    x.className = x.className.replace("show", "");
                  }, 3000);
                }
              }

              function readSingleFile(e) {
                var file = e.target.files[0];
                if (!file) {
                  return;
                }
                var reader = new FileReader();
                reader.onload = function(e) {
                  var contents = e.target.result;
                  displayContents(contents);
                };
                reader.readAsText(file);
              }

              function displayContents(contents) {
                text = document.getElementById("text");
                text.value = contents;
              }
              document.getElementById('file-input').addEventListener('change', readSingleFile, false);

              function copy() {
                var x = document.getElementById("snackbar");
                text = document.getElementById("text");
                text.select();
                text.setSelectionRange(0, 99999);
                navigator.clipboard.writeText(text.value);
                x.className = "show";
                setTimeout(function() {
                  x.className = x.className.replace("show", "");
                }, 3000);
              }

              function urlhelp() {
                if (confirm("https://quick-edit.pages.dev/?your url\nwould you like to start to the url config wizard")) {
	            	var askurl = prompt("Enter the url to the file");
		            if (askurl.includes("http", "https")) {
	              	prompt("Here is your url\nCopy it now", "https://quick-edit.pages.dev/?" + askurl)
	              } else {
	            	if (confirm("Make sure the URL has the protocol in it\nWould you like to make the URL anyway")) {
		              prompt ("Here is your url\nCopy it now\nWarning: No protocol may result in a 404 ", "https://quick-edit.pages.dev/?" + askurl)
              	}
                }    
                }
              }
  </script>
  <style>
    body {
      font-family: 'Ubuntu', sans-serif;
      margin: 0;
      height: 100%;
      width: 100%;
      background-color: #888888;
    }

    textarea {
      width: 99.58%;
      height: 95.7vh;
      /* height: 95.7vh;
      width: 99.58vw; */
      font-family: 'Ubuntu', sans-serif;
      background-color: #888888;
      font-size: 17px;
    }

    #snackbar {
      visibility: hidden;
      min-width: 200px;
      margin-left: -125px;
      background-color: #333;
      color: #fff;
      text-align: center;
      border-radius: 2px;
      padding: 16px;
      position: fixed;
      z-index: 1;
      left: 50%;
      bottom: 30px;
      font-size: 35px;
    }

    #del {
      visibility: hidden;
      min-width: 100px;
      margin-left: -100px;
      background-color: #333;
      color: #fff;
      text-align: center;
      border-radius: 2px;
      padding: 16px;
      position: fixed;
      z-index: 1;
      left: 50%;
      bottom: 30px;
      font-size: 35px;
    }

    #sav {
      visibility: hidden;
      min-width: 100px;
      margin-left: -100px;
      background-color: #333;
      color: #fff;
      text-align: center;
      border-radius: 2px;
      padding: 16px;
      position: fixed;
      z-index: 1;
      left: 50%;
      bottom: 30px;
      font-size: 35px;
    }

    #welcome {
      visibility: hidden;
      min-width: 100px;
      margin-left: -100px;
      background-color: #333;
      color: #fff;
      text-align: center;
      border-radius: 2px;
      padding: 16px;
      position: fixed;
      z-index: 1;
      left: 50%;
      bottom: 30px;
      font-size: 35px;
    }

    #snackbar.show {
      border-radius: 25px;
      visibility: visible;
      -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
      animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }

    #del.show {
      border-radius: 25px;
      visibility: visible;
      -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
      animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }

    #sav.show {
      border-radius: 25px;
      visibility: visible;
      -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
      animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }

    #welcome.show {
      border-radius: 25px;
      visibility: visible;
      -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
      animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }

    @-webkit-keyframes fadein {
      from {
        bottom: 0;
        opacity: 0;
      }

      to {
        bottom: 30px;
        opacity: 1;
      }
    }

    @keyframes fadein {
      from {
        bottom: 0;
        opacity: 0;
      }

      to {
        bottom: 30px;
        opacity: 1;
      }
    }

    @-webkit-keyframes fadeout {
      from {
        bottom: 30px;
        opacity: 1;
      }

      to {
        bottom: 0;
        opacity: 0;
      }
    }

    @keyframes fadeout {
      from {
        bottom: 30px;
        opacity: 1;
      }

      to {
        bottom: 0;
        opacity: 0;
      }
    }

    .menubar {
  background-color: #616161;
  padding: 5px 15px;
  display: flex;
  align-items: center;
}

.menubar button, 
.menubar input {
  margin-left: 2.5px;
}
  </style>
</html>