|
|
<!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>A Test Title</h1><div class="expandedContent" id="content_out/articles/test articles/test1.article">
|
|
|
<p class="color1">
|
|
|
In dolor erat, malesuada at elit cursus, convallis imperdiet turpis. Ut aliquet magna tellus, at viverra mauris ullamcorper vehicula. Nam quis urna semper magna ornare elementum sed id mauris. Suspendisse faucibus nunc ante, ac rhoncus nisl tristique sed. Vestibulum pretium odio eget scelerisque vestibulum. Aliquam viverra ex ac vestibulum interdum. Donec ligula nunc, dignissim a purus vitae, fermentum laoreet diam. Quisque nec auctor urna. Vestibulum sit amet ligula ullamcorper, congue ipsum et, accumsan ante. Phasellus fermentum, sapien nec pulvinar blandit, elit purus pretium urna, et dapibus orci urna eu metus. Nunc molestie dictum pharetra. Suspendisse luctus felis et ante tristique, vitae commodo diam porttitor. Aliquam orci eros, placerat ac justo vitae, bibendum efficitur metus. Phasellus eget bibendum mauris.
|
|
|
</p>
|
|
|
</div><div class="datebar"></div><div class="date">2 May 2022 10:16AM</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=test1.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=test1.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>
|
|
|
|
