Mastodawn

<!doctype html>
<html>
<head>

list of languages:
https://cloud9-sdk.readme.io/docs/language-mode

-->

<title>Web File Editor</title>

</head>
<body>

<div id = "lightdarkbutton" class = "button">LIGHT MODE</div>

<a href= "generate-file-set.php" style = "position:absolute;right:5px;top:3.5em;font-size:2em;font-family:Arial">generate-file-set.php</a>

<a href= "delete-files.html" style = "position:absolute;right:5px;top:5.5em;font-size:2em;font-family:Arial">delete-files.html</a>

<table id = "inputtable">
<tr>
<td>Current File Name:</td>
<td id = "currentfilename"></td>
</tr>
<tr>
<td>New File Name(end with .html, .js, .css, .json, .php, .md, .txt):</td>
<td><input id = "newscrollinput"/></td>
</tr>
</table>

</div>

editor = ace.edit("maineditor");
editor.setTheme("ace/theme/github");
//editor.setTheme("ace/theme/vibrant_ink");
editor.getSession().setMode("ace/mode/html");
editor.getSession().setUseWrapMode(true);
editor.$blockScrolling = Infinity;
editor.setTheme("ace/theme/vibrant_ink");

currentFile = "index.html";
var httpc = new XMLHttpRequest();
httpc.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
filedata = this.responseText;
setmode();
editor.setValue(filedata);
document.getElementById("currentfilename").innerHTML = currentFile;
}
};
httpc.open("GET", "load-file.php?filename=" + currentFile, true);
httpc.send();

scrolls = [];
var httpc8 = new XMLHttpRequest();
httpc8.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
scrolls = JSON.parse(this.responseText);
for(var index = 0;index < scrolls.length;index++) {
if(scrolls[index].substring(scrolls[index].length-5,scrolls[index].length) == ".html" || scrolls[index].substring(scrolls[index].length-4,scrolls[index].length) == ".txt" || scrolls[index].substring(scrolls[index].length-4,scrolls[index].length) == ".css" || scrolls[index].substring(scrolls[index].length-4,scrolls[index].length) == ".php" || scrolls[index].substring(scrolls[index].length-3,scrolls[index].length) == ".js" ||scrolls[index].substring(scrolls[index].length-3,scrolls[index].length) == ".py" || scrolls[index].substring(scrolls[index].length-3,scrolls[index].length) == ".md" || scrolls[index].substring(scrolls[index].length-5,scrolls[index].length) == ".json"){

if(scrolls[index].substring(scrolls[index].length-5,scrolls[index].length) == ".html"){
var newa = document.createElement("A");
newa.innerHTML = scrolls[index];
newa.href = scrolls[index];
document.getElementById("filescroll").appendChild(newa);
}
var newscrollbutton = document.createElement("div");
newscrollbutton.classList.add("file");
newscrollbutton.classList.add("html");
if(scrolls[index].substring(scrolls[index].length-3,scrolls[index].length) == ".js"){
newscrollbutton.style.borderColor = "red";
}
if(scrolls[index].substring(scrolls[index].length-3,scrolls[index].length) == ".md"){
newscrollbutton.style.borderColor = "#0000ff80";
}
if(scrolls[index].substring(scrolls[index].length-4,scrolls[index].length) == ".css"){
newscrollbutton.style.borderColor = "yellow";
}
if(scrolls[index].substring(scrolls[index].length-4,scrolls[index].length) == ".php"){
newscrollbutton.style.borderColor = "purple";
}
newscrollbutton.innerHTML = scrolls[index];
document.getElementById("filescroll").appendChild(newscrollbutton);
newscrollbutton.onclick = function(){
currentFile = this.innerHTML;
//use php script to load current file;
var httpc = new XMLHttpRequest();
httpc.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
filedata = this.responseText;
setmode();
editor.setValue(filedata);
var fileType = currentFile.split("/")[0];
var fileName = currentFile.split("/")[1];
//document.getElementById("newscrollinput").value = fileName;
}
};
httpc.open("GET", "load-file.php?filename=" + currentFile, true);
httpc.send();

document.getElementById("currentfilename").innerHTML = currentFile;

}

}
}
}
};

httpc8.open("GET", "list-files.php", true);
httpc8.send();

document.getElementById("currentfilename").innerHTML = currentFile;

document.getElementById("maineditor").onkeyup = function(){
data = encodeURIComponent(editor.getSession().getValue());
var httpc = new XMLHttpRequest();
var url = "save-file.php";
httpc.open("POST", url, true);
httpc.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
httpc.send("data="+data+"&filename="+currentFile);//send text to save-file.php
var fileType = currentFile.split("/")[0];
var fileName = currentFile.split("/")[1];
}

document.body.style.backgroundColor = "#202020";
document.body.style.color = "white";
document.getElementById("newscrollinput").style.backgroundColor = "#202020";
document.getElementById("newscrollinput").style.color = "white";

editor.setTheme("ace/theme/vibrant_ink");

document.getElementById("newscrollinput").value = "";

name = "";
document.getElementById("newscrollinput").onchange = function(){
name = this.value;
currentFile = name;
scroll = editor.getSession().getValue();

setmode();
editor.setValue(scroll);
data = encodeURIComponent(scroll);
var httpc = new XMLHttpRequest();
var url = "save-file.php";
httpc.open("POST", url, true);
httpc.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
httpc.send("data="+data+"&filename=" + currentFile);//send text to save-file.php
addcodelink(name);
document.getElementById("currentfilename").innerHTML = currentFile;

}

codesquaresize = 120;

lightmode = false;
document.getElementById("lightdarkbutton").onclick = function(){
lightmode = !lightmode;
if(lightmode){
document.getElementById("lightdarkbutton").style.color = "black";
document.getElementById("lightdarkbutton").style.borderColor = "black";

document.getElementById("filescroll").style.backgroundColor = "white";

document.getElementById("filescroll").style.color = "black";
document.getElementById("currentfilename").style.backgroundColor = "#eeeeee";
document.getElementById("currentfilename").style.color = "black";
document.getElementById("newscrollinput").style.color = "black";
document.getElementById("newscrollinput").style.backgroundColor = "white";
document.body.style.backgroundColor = "#b0b0b0";
document.body.style.color = "black";
document.getElementById("lightdarkbutton").innerHTML = "DARK MODE";
editor.setTheme("ace/theme/github");

var links = document.getElementsByTagName("a");
for(var index = 0;index < links.length;index++){
links[index].style.color = "blue";
}
}
else{

document.getElementById("lightdarkbutton").style.color = "white";
document.getElementById("lightdarkbutton").style.borderColor = "white";

document.body.style.backgroundColor = "#404040";
document.body.style.color = "white";

document.getElementById("filescroll").style.backgroundColor = "#101010";
document.getElementById("filescroll").style.color = "white";

document.getElementById("currentfilename").style.backgroundColor = "#101010";
document.getElementById("currentfilename").style.color = "white"
document.getElementById("newscrollinput").style.color = "white";
document.getElementById("newscrollinput").style.backgroundColor = "black";
document.getElementById("lightdarkbutton").innerHTML = "LIGHT MODE";
editor.setTheme("ace/theme/vibrant_ink");

var links = document.getElementsByTagName("a");
for(var index = 0;index < links.length;index++){
links[index].style.color = "#ff2cb4";
}
}
}
</script>
<style>
a{
color:#ff2cb4;
}
#inputtable{
position:absolute;
left:10px;
top:10px;
font-size:1.5em;
font-family:Arial;
}
#newscrollinput{
font-family:courier;

}
#linktable{
position:absolute;
right:10px;
top:10px;
background-color:#808080;
}
body{
overflow:hidden;
}
input{
font-family:Arial;
color:white;
}

.file{
cursor:pointer;
border-radius:0.25em;
border:solid;
padding:0.25em 0.25em 0.25em 0.25em;
}
.files:hover{
background-color:green;
}
.files:active{
background-color:yellow;
}
#filescroll{
position:absolute;
overflow:scroll;
top:250px;
bottom:0%;
right:0%;
left:75%;
border:solid;
border-radius:5px;
border-width:3px;
font-family:Arial;
font-size:22px;
z-index:99999999;
}
#maineditor{
position:absolute;
left:0%;
top:150px;
bottom:1em;
right:30%;
font-size:22px;
border:solid;
border-color:black;
}
.button{
cursor:pointer;
}
.button:hover{
background-color:green;
}
.button:active{
background-color:yellow;
}
#lightdarkbutton{
position:absolute;
right:0px;
top:0px;
right:5px;
top:5px;
text-align:center;
border:solid;
border-radius:3px;
font-size:2em;
border-color:white;
color:white;
font-family:Arial;
}
</style>

</body>
</html>

Ace - The High Performance Code Editor for the Web