Where people come together to learn, code, and play. Custom-built HTTP server, site generator, and website from scratch using no external libraries. Goal is to be as minimalistic and fun as possible.
http://projectdivar.com
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
4.8 KiB
95 lines
4.8 KiB
<!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="contentBody">
|
|
<div class="contentWrapper"><h1>A Test Title</h1><div class="expandedContent" id="content_out/articles/test articles/test1.article">
|
|
<p class="color6">
|
|
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() {
|
|
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)
|
|
).then((data)=>data.text())
|
|
.then((data)=>{
|
|
fetchComments()
|
|
})
|
|
}
|
|
</script>
|
|
<div id="commentForm">
|
|
<b>Leave a comment!</b><br/><br/>
|
|
<label for="name">Display Name: </label><input id="name"><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><textarea id="msg"></textarea><br/><br/>
|
|
<button id="submit" onload="changeColor()" 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").then((data)=>data.text())
|
|
.then((data)=>{
|
|
data=data.split("\n");
|
|
document.getElementById("comments").innerHTML="";
|
|
for (var i=0;i<data.length;i++) {
|
|
if (i==0) {
|
|
document.getElementById("commentCounter").innerText=data[i]
|
|
} else {
|
|
if (data[i].trim().length>0) {
|
|
if (i%2==1) {
|
|
document.getElementById("comments").innerHTML+="<div class=\"commentDisplayer\"><div class=\"commentData\">"+data[i]+"</div><br>"
|
|
} else {
|
|
document.getElementById("comments").innerHTML+="<div class=\"commentInfo\"><sup>- "+data[i]+"</sup></div></div><br>"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
document.getElementById("commentContainer").style.visibility="visible"
|
|
})
|
|
}
|
|
fetchComments()
|
|
</script>
|
|
|
|
</div> <!--End Content Body-->
|
|
<div class="codeForeground" id="codeForeground"></div>
|
|
<div class="codeBackground" id="codeBackground"></div>
|
|
</body>
|
|
<footer>
|
|
|
|
</footer>
|
|
</html>
|
|
|