|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<link rel="stylesheet" type="text/css" href="/reset.css">
|
|
|
<link rel="stylesheet" type="text/css" href="/sig.css">
|
|
|
<meta charset="UTF-8">
|
|
|
<script type="text/javascript">
|
|
|
function loadCodeBackground() {
|
|
|
fetch("/codeBackground").then((data)=>data.text())
|
|
|
.then((data)=>{
|
|
|
document.getElementById("codeForeground").innerText=data
|
|
|
document.getElementById("codeBackground").innerText=data
|
|
|
})
|
|
|
}
|
|
|
loadCodeBackground();
|
|
|
</script>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="navbar">
|
|
|
<div class="navbaritem"><a href="/">HOME</a></div>
|
|
|
<div class="navbaritem"><a href="/blog.html">BLOG</a></div>
|
|
|
<div class="navbaritem"><a href="/arcade.html">ARCADE</a></div>
|
|
|
<div class="navbaritem"><a href="/stream.html">STREAM</a></div><div id="liveindicator"></div>
|
|
|
<div class="navbaritem"><a href="/code.html">CODING SERVICES</a></div>
|
|
|
<div class="socials">
|
|
|
<div class="navbaritem"><a href="/code.html">DISCORD</a></div>
|
|
|
<div class="navbaritem"><a href="/code.html">GITHUB</a></div>
|
|
|
<div class="navbaritem"><a href="/code.html">TWITCH</a></div>
|
|
|
<div class="navbaritem"><a href="/code.html">YOUTUBE</a></div>
|
|
|
<div class="navbaritem"><a href="/code.html">TWITTER</a></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<script type="text/javascript">
|
|
|
function getLiveStatus() {
|
|
|
document.getElementById("liveindicator").innerHTML="<a href=\"/stream.html\">🔴 LIVE</a>"
|
|
|
}
|
|
|
getLiveStatus()
|
|
|
</script>
|
|
|
<div class="contentBody">
|
|
|
<div class="contentWrapper"><h1>Another test title</h1><div class="expandedContent" id="content_out/articles/test articles/test2.article">
|
|
|
<p class="color6">
|
|
|
Sed lobortis nisi id nunc tincidunt volutpat. Mauris cursus felis quis condimentum posuere. Pellentesque vitae dolor et justo suscipit ultrices. Integer dapibus leo id felis varius, ut volutpat massa bibendum. Quisque sed nunc arcu. In sit amet faucibus magna, non venenatis massa. Cras sed placerat risus, id consectetur est. Pellentesque in nunc dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque eget lorem ac urna posuere accumsan. Quisque sed imperdiet nisi.
|
|
|
</p>
|
|
|
</div><div class="datebar"></div><div class="date">1 May 2022 05:13AM</div></div>
|
|
|
<hr/>
|
|
|
<script type="text/javascript">
|
|
|
function changeColor() {
|
|
|
document.getElementById("submit").style.borderColor=document.getElementById("msg").style.borderColor=document.getElementById("name").style.borderColor=document.getElementById("col").style.borderColor=document.getElementById("col").options[document.getElementById("col").selectedIndex].text
|
|
|
}
|
|
|
function submit() {
|
|
|
if (document.getElementById("msg").value.replaceAll(" ","").length>1000) {
|
|
|
alert("Your message is longer than 1000 characters!");
|
|
|
return;
|
|
|
}
|
|
|
if (document.getElementById("col").options[document.getElementById("col").selectedIndex].text!=="GREEN"&&
|
|
|
document.getElementById("col").options[document.getElementById("col").selectedIndex].text!=="RED"&&
|
|
|
document.getElementById("col").options[document.getElementById("col").selectedIndex].text!=="YELLOW"&&
|
|
|
document.getElementById("col").options[document.getElementById("col").selectedIndex].text!=="BLUE"&&
|
|
|
document.getElementById("col").options[document.getElementById("col").selectedIndex].text!=="MAGENTA"&&
|
|
|
document.getElementById("col").options[document.getElementById("col").selectedIndex].text!=="CYAN"&&
|
|
|
document.getElementById("col").options[document.getElementById("col").selectedIndex].text!=="WHITE") {
|
|
|
alert("You chose an invalid color!");
|
|
|
return;
|
|
|
}
|
|
|
document.getElementById("submit").disabled=
|
|
|
document.getElementById("name").disabled=
|
|
|
document.getElementById("col").disabled=
|
|
|
document.getElementById("msg").disabled=true;
|
|
|
fetch("/COMMENTS?submit=true&article=test2.comment&message="+encodeURIComponent(document.getElementById("msg").value)+"&name="
|
|
|
+encodeURIComponent(document.getElementById("name").value)+"&color="
|
|
|
+encodeURIComponent(document.getElementById("col").options[document.getElementById("col").selectedIndex].text)
|
|
|
, {cache: "no-cache"}).then((data)=>data.text())
|
|
|
.then((data)=>{
|
|
|
document.getElementById("msg").value=""
|
|
|
document.getElementById("name").value=""
|
|
|
document.getElementById("submit").disabled=
|
|
|
document.getElementById("name").disabled=
|
|
|
document.getElementById("col").disabled=
|
|
|
document.getElementById("msg").disabled=false;
|
|
|
fetchComments()
|
|
|
})
|
|
|
.catch((err)=>{
|
|
|
document.getElementById("submit").disabled=
|
|
|
document.getElementById("name").disabled=
|
|
|
document.getElementById("col").disabled=
|
|
|
document.getElementById("msg").disabled=false;
|
|
|
})
|
|
|
}
|
|
|
function bonus(str) {
|
|
|
switch (str) {
|
|
|
case "^^":{
|
|
|
return "Bold Text"
|
|
|
}break;
|
|
|
case "**":{
|
|
|
return "Italic Text"
|
|
|
}break;
|
|
|
case "__":{
|
|
|
return "Underlined Text"
|
|
|
}break;
|
|
|
case "~~":{
|
|
|
return "//Code goes here."
|
|
|
}break;
|
|
|
case "[[":{
|
|
|
return "http://link.com"
|
|
|
}break;
|
|
|
}
|
|
|
}
|
|
|
function insert(c1,c2) {
|
|
|
if (document.getElementById("msg").selectionStart==document.getElementById("msg").selectionEnd) {
|
|
|
//No highlighting. Insert here.
|
|
|
if (c2!=undefined) {
|
|
|
document.getElementById("msg").value=document.getElementById("msg").value.substring(0,document.getElementById("msg").selectionStart)+c1+
|
|
|
bonus(c1)+
|
|
|
c2+document.getElementById("msg").value.substring(document.getElementById("msg").selectionStart)
|
|
|
} else {
|
|
|
document.getElementById("msg").value=document.getElementById("msg").value.substring(0,document.getElementById("msg").selectionStart)+c1+document.getElementById("msg").value.substring(document.getElementById("msg").selectionStart)
|
|
|
}
|
|
|
} else {
|
|
|
if (c2!=undefined) {
|
|
|
document.getElementById("msg").value=document.getElementById("msg").value.substring(0,document.getElementById("msg").selectionStart)+c1+document.getElementById("msg").value.substring(document.getElementById("msg").selectionStart,document.getElementById("msg").selectionEnd)+c2+document.getElementById("msg").value.substring(document.getElementById("msg").selectionEnd)
|
|
|
} else {
|
|
|
document.getElementById("msg").value=document.getElementById("msg").value.substring(0,document.getElementById("msg").selectionStart)+c1+document.getElementById("msg").value.substring(document.getElementById("msg").selectionStart)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<div id="commentForm">
|
|
|
<b>Leave a comment!</b><br/><br/>
|
|
|
<label for="name">Display Name: </label><input id="name"></input><br/><br/>
|
|
|
<label for="col">Display Color: </label><select id="col" onchange="changeColor()">
|
|
|
<option value="RED">RED</option>
|
|
|
<option value="GREEN" selected>GREEN</option>
|
|
|
<option value="YELLOW">YELLOW</option>
|
|
|
<option value="BLUE">BLUE</option>
|
|
|
<option value="MAGENTA">MAGENTA</option>
|
|
|
<option value="CYAN">CYAN</option>
|
|
|
<option value="WHITE">WHITE</option>
|
|
|
</select><br/><br/>
|
|
|
<label for="msg" style="vertical-align:top;display:inline;">Message: </label>
|
|
|
<div>
|
|
|
<div class="toolbar">
|
|
|
<span class="toolbarItem" onclick="insert('^^','^^')" title="Bold"> <b>B</b> </span>
|
|
|
<span class="toolbarItem" onclick="insert('**','**')" title="Italics"> <i>I</i> </span>
|
|
|
<span class="toolbarItem" onclick="insert('__','__')" title="Underline"> <u>U</u> </span>
|
|
|
<span class="toolbarItem" onclick="insert('~~','~~')" title="Code"> <code> </span>
|
|
|
<span class="toolbarItem" onclick="insert('[[',']]')" title="Link"> <http://> </span>
|
|
|
<span class="toolbarItem" onclick="insert('😊')" title="Smiley Face Emoji"> 😊 </span>
|
|
|
<span class="toolbarItem" onclick="insert('😔')" title="Sad Face Emoji"> 😔 </span>
|
|
|
<span class="toolbarItem" onclick="insert('👍')" title="Thumbs Up Emoji"> 👍 </span>
|
|
|
<span class="toolbarItem" onclick="insert('❤️')" title="Heart Emoji"> ❤️ </span>
|
|
|
<span class="toolbarItem" onclick="insert('😡')" title="Pouting Emoji"> 😡 </span>
|
|
|
</div>
|
|
|
<textarea id="msg"></textarea>
|
|
|
</div><br/><br/>
|
|
|
<button id="submit" onclick="submit()">POST</button>
|
|
|
</div><br/><br/>
|
|
|
<div id="commentContainer" style="visibility:hidden;">
|
|
|
<h2>Comments <sub>(<span class="commentCounter" id="commentCounter">0</span>)</sub></h2>
|
|
|
<div class="comments" id="comments"></div>
|
|
|
</div>
|
|
|
<script type="text/javascript">
|
|
|
function fetchComments() {
|
|
|
fetch("/COMMENTS?article=test2.comment", {cache: "no-cache"}).then((data)=>data.text())
|
|
|
.then((data)=>{
|
|
|
data=data.split("\n");
|
|
|
if (!isNaN(Number(data[0]))) {
|
|
|
document.getElementById("comments").innerHTML="";
|
|
|
document.getElementById("commentCounter").innerText=data[0]
|
|
|
for (var i=data.length-3;i>=1;i-=2) {
|
|
|
if (data[i].trim().length>0&&data[i+1].trim().length>0) {
|
|
|
document.getElementById("comments").innerHTML+="<div id=\"msg"+((i+1)/2)+"\" class=\"commentDisplayer\"><div class=\"commentData\">"+decodeURIComponent(data[i]).replaceAll("\n","<br/>").replaceAll("\\\\NEWLINE\\\\","\n")+"</div><br>"
|
|
|
data2=data[i+1].split(";");
|
|
|
document.getElementById("msg"+((i+1)/2)).style.borderColor=data2[1]
|
|
|
document.getElementById("comments").innerHTML+="<div class=\"commentInfo\"><sup>- "+decodeURIComponent(data2[0])+"</sup></div></div><br>"
|
|
|
}
|
|
|
}
|
|
|
document.getElementById("commentContainer").style.visibility="visible"
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
fetchComments()
|
|
|
changeColor()
|
|
|
</script>
|
|
|
|
|
|
</div> <!--End Content Body-->
|
|
|
<div class="codeForeground" id="codeForeground"></div>
|
|
|
<div class="codeBackground" id="codeBackground"></div>
|
|
|
</body>
|
|
|
<footer>
|
|
|
|
|
|
</footer>
|
|
|
</html>
|
|
|
|
