<style>
.discussionDetailPage-mainSection,
.standard-comments.entry-comments.comments-main{
position:absolute!important;
left:-99999px!important;
top:0!important;
width:1px!important;
height:1px!important;
overflow:hidden!important;
opacity:0!important;
}
#aflModernForum{
max-width:850px;
margin:34px auto;
padding:14px;
font-family:Arial,Helvetica,sans-serif;
color:#171717;
}
#aflModernForum *{box-sizing:border-box;}
#aflModernForum .afl-forum-card{
background:#fff;
border:1px solid rgba(0,0,0,.08);
border-radius:18px;
box-shadow:0 18px 55px rgba(0,0,0,.05);
padding:34px;
}
#aflModernForum .afl-label{
font-size:9px;
letter-spacing:.24em;
text-transform:uppercase;
color:#8b8b8b;
margin-bottom:12px;
}
#aflModernForum .afl-title{
margin:0 0 18px;
font-family:Georgia,"Times New Roman",serif;
font-size:clamp(23px,2.5vw,31px);
line-height:1.18;
font-weight:400;
}
#aflModernForum .afl-author-row{
display:flex;
align-items:center;
gap:13px;
padding:14px 0 22px;
border-bottom:1px solid rgba(0,0,0,.08);
margin-bottom:26px;
}
#aflModernForum .afl-avatar,
#aflModernForum img.afl-avatar{
width:44px!important;
height:44px!important;
min-width:44px!important;
min-height:44px!important;
max-width:44px!important;
max-height:44px!important;
border-radius:50%!important;
object-fit:cover!important;
display:block!important;
}
#aflModernForum .afl-author a{
color:#111;
text-decoration:none;
font-family:Georgia,"Times New Roman",serif;
font-size:16px;
font-weight:400;
letter-spacing:.02em;
}
#aflModernForum .afl-date{
margin-top:3px;
font-size:10px;
letter-spacing:.12em;
text-transform:uppercase;
color:#999;
}
#aflModernForum .afl-body{
max-width:730px;
font-family:Georgia,"Times New Roman",serif;
font-size:18px;
line-height:1.78;
color:#252525;
}
#aflModernForum .afl-stats{
display:flex;
gap:14px;
margin-top:25px;
padding-top:15px;
border-top:1px solid rgba(0,0,0,.07);
font-size:10px;
letter-spacing:.13em;
text-transform:uppercase;
color:#888;
}
#aflModernForum .afl-actions{
display:flex;
gap:8px;
margin-top:16px;
}
#aflModernForum .afl-pill{
border:1px solid rgba(0,0,0,.14);
background:#fafafa;
color:#111;
padding:8px 12px;
border-radius:999px;
font-size:9px;
letter-spacing:.13em;
text-transform:uppercase;
cursor:pointer;
transition:.2s ease;
}
#aflModernForum .afl-pill:hover{
background:#111;
color:#fff;
}
#aflModernForum .afl-comments{
margin-top:36px;
padding-top:23px;
border-top:1px solid rgba(0,0,0,.09);
}
#aflModernForum .afl-comments-title{
margin:0 0 14px;
font-size:9px;
letter-spacing:.22em;
text-transform:uppercase;
color:#888;
font-weight:400;
}
#aflModernForum .afl-comment{
display:flex;
gap:12px;
padding:16px 0;
border-top:1px solid rgba(0,0,0,.055);
}
#aflModernForum .afl-comment:first-of-type{border-top:0;}
#aflModernForum .afl-comment > a{
width:38px!important;
height:38px!important;
min-width:38px!important;
max-width:38px!important;
flex:0 0 38px!important;
display:block!important;
}
#aflModernForum .afl-comment-avatar,
#aflModernForum img.afl-comment-avatar{
width:38px!important;
height:38px!important;
min-width:38px!important;
min-height:38px!important;
max-width:38px!important;
max-height:38px!important;
border-radius:50%!important;
object-fit:cover!important;
display:block!important;
flex:0 0 38px!important;
}
#aflModernForum .afl-comment-main{
flex:1;
min-width:0;
}
#aflModernForum .afl-comment-meta{
display:flex;
flex-wrap:wrap;
gap:8px;
align-items:baseline;
margin-bottom:6px;
}
#aflModernForum .afl-comment-author a{
color:#111;
font-family:Georgia,"Times New Roman",serif;
font-size:15px;
font-weight:400;
letter-spacing:.02em;
text-decoration:none;
}
#aflModernForum .afl-comment-date{
font-size:10px;
color:#999;
}
#aflModernForum .afl-comment-text{
font-family:Arial,Helvetica,sans-serif;
font-size:15.5px;
line-height:1.6;
color:#292929;
}
#aflModernForum .afl-comment-tools{
display:flex;
gap:10px;
margin-top:8px;
}
#aflModernForum .afl-comment-tool{
border:0;
background:transparent;
padding:0;
color:#888;
font-size:10px;
letter-spacing:.14em;
text-transform:uppercase;
cursor:pointer;
}
#aflModernForum .afl-comment-tool:hover{
color:#111;
text-decoration:underline;
}
#aflModernForum .afl-edit-box{
margin-top:10px;
display:none;
}
#aflModernForum .afl-edit-box.is-open{
display:block;
}
#aflModernForum .afl-edit-box textarea{
width:100%;
min-height:72px;
border:1px solid rgba(0,0,0,.14);
border-radius:12px;
padding:12px;
font-size:14px;
line-height:1.5;
}
#aflModernForum .afl-edit-actions{
display:flex;
gap:8px;
margin-top:8px;
}
#aflModernForum .afl-reply{
margin-top:28px;
padding-top:20px;
border-top:1px solid rgba(0,0,0,.08);
}
#aflModernForum .afl-reply-title{
font-size:9px;
letter-spacing:.20em;
text-transform:uppercase;
color:#888;
margin-bottom:10px;
}
#aflModernForum .afl-reply-box{
position:relative;
}
#aflModernForum #aflModernReply{
width:100%;
min-height:72px;
border:1px solid rgba(0,0,0,.12);
background:#fafafa;
border-radius:14px;
padding:13px 48px 13px 14px;
font-size:15px;
line-height:1.5;
resize:vertical;
outline:none;
}
#aflModernForum #aflModernReply:focus{
background:#fff;
border-color:#111;
}
#aflModernForum #aflModernSend{
position:absolute;
right:10px;
top:10px;
width:28px;
height:28px;
border:0;
background:transparent;
color:#111;
font-size:17px;
cursor:pointer;
opacity:.55;
}
#aflModernForum #aflModernSend:hover{opacity:1;}
#aflModernForum .afl-note{
margin-top:8px;
font-size:11px;
color:#999;
}
#aflBackToTop{
position:fixed;
right:22px;
bottom:24px;
width:38px;
height:38px;
border-radius:50%;
border:1px solid rgba(0,0,0,.16);
background:rgba(255,255,255,.92);
color:#111;
font-size:20px;
line-height:36px;
text-align:center;
cursor:pointer;
z-index:99999;
box-shadow:0 10px 30px rgba(0,0,0,.08);
opacity:0;
visibility:hidden;
transition:.25s ease;
}
#aflBackToTop.is-visible{
opacity:1;
visibility:visible;
}
#aflBackToTop:hover{
background:#111;
color:#fff;
}
@media(max-width:700px){
#aflModernForum{
margin:20px auto;
padding:12px;
}
#aflModernForum .afl-forum-card{
padding:23px;
border-radius:14px;
}
#aflModernForum .afl-title{font-size:24px;}
#aflModernForum .afl-body{font-size:16.5px;}
}
</style>
<script>
(function(){
function ready(fn){
if(document.readyState !== "loading"){fn();}
else{document.addEventListener("DOMContentLoaded",fn);}
}
ready(function(){
var original = document.querySelector(".discussionDetailPage-mainSection");
if(!original || document.getElementById("aflModernForum")) return;
var commentsOriginal = document.querySelector(".standard-comments.entry-comments.comments-main");
var titleEl = original.querySelector(".entry-title a, .entry-title");
var bylineEl = original.querySelector(".entry-byline");
var contentEl = original.querySelector(".entry-content");
var avatarLink = original.querySelector(".entry-headline .avatar-frame");
var avatarImg = original.querySelector(".entry-headline .avatar-frame img");
var authorLink = original.querySelector(".entry-byline a");
var likeOriginal = original.querySelector(".likeButton a");
var followOriginal = original.querySelector(".js-followUnfollow a");
var formOriginal = original.querySelector(".addCommentContainer .commentForm");
var textareaOriginal = formOriginal ? formOriginal.querySelector("textarea[name='commentText']") : null;
var submitOriginal = formOriginal ? formOriginal.querySelector("input[type='submit']") : null;
var title = titleEl ? titleEl.textContent.trim() : "Forum Discussion";
var byline = bylineEl ? bylineEl.textContent.replace(/\s+/g," ").trim() : "";
var avatar = avatarImg ? avatarImg.src : "";
var authorUrl = authorLink ? authorLink.href : (avatarLink ? avatarLink.href : "#");
var author = authorLink ? authorLink.textContent.trim() : "ARTFreeLife Author";
var date = "";
var match = byline.match(/on (.*)$/i);
if(match) date = match[1].trim();
var views = "";
var bodyHTML = "";
if(contentEl){
var clone = contentEl.cloneNode(true);
var tags = clone.querySelector(".entry-tags");
if(tags){
views = tags.textContent.replace(/\s+/g," ").trim();
tags.remove();
}
bodyHTML = clone.innerHTML;
}
var likeCount = "";
if(likeOriginal){
var lc = likeOriginal.querySelector(".likeButton-count");
likeCount = lc ? lc.textContent.replace(/\s+/g," ").trim() : "";
}
var ui = document.createElement("section");
ui.id = "aflModernForum";
ui.innerHTML =
'<article class="afl-forum-card">' +
'<div class="afl-label">ARTFreeLife Forum</div>' +
'<h1 class="afl-title">'+esc(title)+'</h1>' +
'<div class="afl-author-row">' +
(avatar ? '<a href="'+authorUrl+'"><img class="afl-avatar" src="'+avatar+'" alt=""></a>' : '') +
'<div>' +
'<div class="afl-author"><a href="'+authorUrl+'">'+esc(author)+'</a></div>' +
'<div class="afl-date">'+esc(date)+'</div>' +
'</div>' +
'</div>' +
'<div class="afl-body">'+bodyHTML+'</div>' +
'<div class="afl-stats">' +
(views ? '<span>'+esc(views)+'</span>' : '') +
'<span id="aflLikeCount">'+(likeCount ? esc(likeCount)+' Likes' : 'Like')+'</span>' +
'</div>' +
'<div class="afl-actions">' +
'<button type="button" class="afl-pill" id="aflLikeBtn">Like</button>' +
'<button type="button" class="afl-pill" id="aflReplyBtn">Reply</button>' +
'<button type="button" class="afl-pill" id="aflFollowBtn">Follow</button>' +
'</div>' +
'<section class="afl-comments">' +
'<h3 class="afl-comments-title">Replies</h3>' +
'<div id="aflModernComments">'+buildCommentsHTML(commentsOriginal)+'</div>' +
'</section>' +
'<section class="afl-reply" id="aflReplyArea">' +
'<div class="afl-reply-title">Write a reply</div>' +
'<div class="afl-reply-box">' +
'<textarea id="aflModernReply" placeholder="Write your reply..."></textarea>' +
'<button type="button" id="aflModernSend" title="Send">→</button>' +
'</div>' +
'<div class="afl-note" id="aflModernNote">Enter to send. Shift + Enter for new line.</div>' +
'</section>' +
'</article>';
original.parentNode.insertBefore(ui, original);
document.getElementById("aflLikeBtn").onclick = function(e){
e.preventDefault();
if(likeOriginal) likeOriginal.click();
setTimeout(updateLikeCount,300);
};
document.getElementById("aflFollowBtn").onclick = function(e){
e.preventDefault();
if(followOriginal) followOriginal.click();
};
document.getElementById("aflReplyBtn").onclick = function(){
var t = document.getElementById("aflModernReply");
document.getElementById("aflReplyArea").scrollIntoView({behavior:"smooth",block:"center"});
setTimeout(function(){t.focus();},250);
};
var visualTextarea = document.getElementById("aflModernReply");
var sendBtn = document.getElementById("aflModernSend");
sendBtn.onclick = sendReply;
visualTextarea.addEventListener("keydown",function(e){
if(e.key === "Enter" && !e.shiftKey){
e.preventDefault();
sendReply();
}
});
document.addEventListener("click",function(e){
var editBtn = e.target.closest("[data-afl-edit]");
var delBtn = e.target.closest("[data-afl-delete]");
var saveBtn = e.target.closest("[data-afl-save-edit]");
var cancelBtn = e.target.closest("[data-afl-cancel-edit]");
if(editBtn){
var box = document.getElementById(editBtn.getAttribute("data-afl-edit"));
if(box) box.classList.toggle("is-open");
}
if(cancelBtn){
var cbox = document.getElementById(cancelBtn.getAttribute("data-afl-cancel-edit"));
if(cbox) cbox.classList.remove("is-open");
}
if(saveBtn){
var idx = saveBtn.getAttribute("data-index");
var source = getOriginalComment(idx);
var editBox = document.getElementById(saveBtn.getAttribute("data-afl-save-edit"));
var visualEdit = editBox ? editBox.querySelector("textarea") : null;
if(source && visualEdit){
var editForm = source.querySelector(".comments-editContainer .commentForm");
var editTextarea = editForm ? editForm.querySelector("textarea[name='commentText']") : null;
var editSubmit = editForm ? editForm.querySelector("input[type='submit']") : null;
if(editTextarea && editSubmit){
editTextarea.value = visualEdit.value;
editTextarea.dispatchEvent(new Event("input",{bubbles:true}));
editTextarea.dispatchEvent(new Event("change",{bubbles:true}));
editSubmit.click();
setTimeout(function(){ location.reload(); },900);
}
}
}
if(delBtn){
var didx = delBtn.getAttribute("data-index");
var originalComment = getOriginalComment(didx);
var originalDelete = originalComment ? originalComment.querySelector(".comments-deleteAction") : null;
if(originalDelete && confirm("Delete this reply?")){
originalDelete.click();
setTimeout(function(){ location.reload(); },900);
}
}
});
function sendReply(){
var text = visualTextarea.value.trim();
if(!text) return;
var note = document.getElementById("aflModernNote");
if(!formOriginal || !textareaOriginal || !submitOriginal){
note.textContent = "Original Ning comment form not found.";
return;
}
appendInstantComment(text);
textareaOriginal.value = text;
textareaOriginal.dispatchEvent(new Event("input",{bubbles:true}));
textareaOriginal.dispatchEvent(new Event("change",{bubbles:true}));
note.textContent = "Sending...";
visualTextarea.value = "";
setTimeout(function(){
submitOriginal.click();
},60);
setTimeout(function(){
note.textContent = "Comment sent. Updating...";
location.reload();
},1400);
}
function appendInstantComment(text){
var list = document.getElementById("aflModernComments");
if(!list) return;
var empty = list.querySelector(".afl-empty-comments");
if(empty) empty.remove();
var div = document.createElement("div");
div.className = "afl-comment";
div.innerHTML =
(avatar ? '<a href="'+authorUrl+'"><img class="afl-comment-avatar" src="'+avatar+'" alt=""></a>' : '') +
'<div class="afl-comment-main">' +
'<div class="afl-comment-meta">' +
'<span class="afl-comment-author"><a href="'+authorUrl+'">'+esc(author)+'</a></span>' +
'<span class="afl-comment-date">Just now</span>' +
'</div>' +
'<div class="afl-comment-text">'+esc(text).replace(/\n/g,"<br>")+'</div>' +
'</div>';
list.insertBefore(div,list.firstChild);
}
function buildCommentsHTML(container){
if(!container) return '<div class="afl-empty-comments">No replies yet.</div>';
var items = container.querySelectorAll(".comments-comment");
if(!items.length) return '<div class="afl-empty-comments">No replies yet.</div>';
var html = "";
items.forEach(function(item,index){
var avLink = item.querySelector(".avatar-frame");
var avImg = item.querySelector(".avatar-frame img");
var au = item.querySelector(".comments-author-name");
var dt = item.querySelector(".comments-timestamp");
var tx = item.querySelector(".comments-text.entry-content");
var editAction = item.querySelector(".comments-editAction");
var deleteAction = item.querySelector(".comments-deleteAction");
var href = au ? au.href : (avLink ? avLink.href : "#");
var name = au ? au.textContent.trim() : "Author";
var dateText = dt ? dt.textContent.trim() : "";
var rawText = tx ? tx.textContent.trim() : "";
var editId = "aflEditBox_" + index;
html +=
'<div class="afl-comment">' +
(avImg ? '<a href="'+href+'"><img class="afl-comment-avatar" src="'+avImg.src+'" alt=""></a>' : '') +
'<div class="afl-comment-main">' +
'<div class="afl-comment-meta">' +
'<span class="afl-comment-author"><a href="'+href+'">'+esc(name)+'</a></span>' +
'<span class="afl-comment-date">'+esc(dateText)+'</span>' +
'</div>' +
'<div class="afl-comment-text">'+(tx ? tx.innerHTML : "")+'</div>' +
((editAction || deleteAction) ?
'<div class="afl-comment-tools">' +
(editAction ? '<button type="button" class="afl-comment-tool" data-afl-edit="'+editId+'">Edit</button>' : '') +
(deleteAction ? '<button type="button" class="afl-comment-tool" data-afl-delete="1" data-index="'+index+'">Delete</button>' : '') +
'</div>' : '') +
(editAction ?
'<div class="afl-edit-box" id="'+editId+'">' +
'<textarea>'+esc(rawText)+'</textarea>' +
'<div class="afl-edit-actions">' +
'<button type="button" class="afl-pill" data-afl-save-edit="'+editId+'" data-index="'+index+'">Save</button>' +
'<button type="button" class="afl-pill" data-afl-cancel-edit="'+editId+'">Cancel</button>' +
'</div>' +
'</div>' : '') +
'</div>' +
'</div>';
});
return html;
}
function getOriginalComment(index){
if(!commentsOriginal) return null;
return commentsOriginal.querySelectorAll(".comments-comment")[index] || null;
}
function updateLikeCount(){
if(!likeOriginal) return;
var lc = likeOriginal.querySelector(".likeButton-count");
var box = document.getElementById("aflLikeCount");
if(lc && box){
var v = lc.textContent.replace(/\s+/g," ").trim();
box.textContent = v ? v + " Likes" : "Like";
}
}
var backTop = document.createElement("button");
backTop.id = "aflBackToTop";
backTop.type = "button";
backTop.innerHTML = "↑";
document.body.appendChild(backTop);
backTop.addEventListener("click",function(){
window.scrollTo({top:0,behavior:"smooth"});
});
window.addEventListener("scroll",function(){
if(window.scrollY > 420){
backTop.classList.add("is-visible");
}else{
backTop.classList.remove("is-visible");
}
});
function esc(str){
return String(str || "")
.replace(/&/g,"&")
.replace(/</g,"<")
.replace(/>/g,">")
.replace(/"/g,""")
.replace(/'/g,"'");
}
});
})();
</script>
Replies