<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="okchai2 blog">
<title>/okchai2/1</title>
<link rel="shortcut icon" href="/freecity/favicon.ico">
<style>
body {
background-color: #1e222b;
margin: 0;
padding: 0 0 120px 0;
}
.banner-container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: 0;
padding: 10px 0;
background-color: #16191f;
box-sizing: border-box;
}
.fixed-bottom {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 999;
box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.5);
padding: 12px 8px;
}
.banner-container a {
display: block;
margin: 0 6px;
background-color: #242b35;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
}
.banner-container a:hover {
transform: translateY(-5px);
filter: brightness(1.2) contrast(1.05);
box-shadow: 0 8px 20px rgba(6, 182, 212, 0.4);
}
.banner-container img {
display: block;
width: 100%;
height: 45px;
border: 0;
object-fit: cover;
border-radius: 12px;
}
.banner-container a img {
border: 2px solid #06b6d4;
box-sizing: border-box;
transition: border-color 0.2s ease;
}
.banner-container a:hover img {
border-color: #22d3ee;
}
.banner-container .bottom-link {
width: 20%;
}
.banner-container .side-link {
width: 30%;
}
.banner-container .mid-link {
width: 40%;
}
.banner-container .mid-img {
height: 45px;
}
.content-wrapper {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: #e2e8f0;
max-width: 680px;
margin: 60px auto;
padding: 0 24px;
}
.article-title {
font-size: 2.5rem;
color: #ffffff;
margin: 0 0 12px 0;
font-weight: 800;
letter-spacing: -0.8px;
line-height: 1.2;
}
.article-meta {
font-size: 0.95rem;
color: #a0aec0;
margin-bottom: 35px;
border-bottom: 1px solid #2d3748;
padding-bottom: 20px;
}
.article-meta .author {
font-weight: 600;
color: #f7fafc;
}
.article-meta .divider {
margin: 0 10px;
color: #4a5568;
}
.content-wrapper p {
font-size: 1.15rem;
line-height: 1.75;
margin: 0 0 24px 0;
color: #cbd5e1;
}
.content-link {
color: #06b6d4;
text-decoration: none;
font-weight: 500;
border-bottom: 1px solid rgba(6, 182, 212, 0.3);
padding-bottom: 2px;
transition: color 0.2s ease, border-color 0.2s ease, text-shadow 0.2s ease;
}
.content-link:hover {
color: #22d3ee;
border-bottom-color: #22d3ee;
text-shadow: 0 0 8px rgba(34, 211, 238, 0.4);
}
.blockquote-container {
background: #252b36;
border-left: 4px solid #06b6d4;
margin: 40px 0;
padding: 24px 28px;
border-radius: 0 8px 8px 0;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.blockquote-text {
font-size: 1.25rem !important;
line-height: 1.6 !important;
color: #ffffff !important;
margin: 0 0 12px 0 !important;
font-style: italic;
}
.blockquote-source {
font-size: 0.9rem;
text-align: right;
font-style: normal;
font-weight: 600;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 1px;
display: block;
}
.article-image-container {
margin: 32px 0;
border-radius: 12px;
overflow: hidden;
border: 1px solid #2d3748;
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.article-img {
width: 100%;
height: auto;
display: block;
}
.text-center {
text-align: center;
}
</style>
</head>
<body>
<nav class="banner-container">
<a class="bottom-link" href="/i" title="/i World Map">
<img src="/world.png" alt="World Map">
</a>
<a class="bottom-link" href="/]" title="/] Qora Renaissance">
<img src="/i/5.png" alt="Qora Renaissance">
</a>
<a class="bottom-link" href="/" title="Qora Home Page">
<img src="/2ndtest/qora.png" alt="Qora Home">
</a>
<a class="bottom-link" href="/freecity" title="/freecity">
<img src="/i/7.png" alt="/freecity">
</a>
<a class="bottom-link" href="/index/blog.html?blogname=okchai2" title="Qora Blog : okchai2">
<img src="/okchai/timahpulai.jpg" alt="okchai2 Blog">
</a>
</nav>
<main class="content-wrapper">
<h1 class="article-title">配合旮旯功能的HTML網頁新設計</h1>
<div class="article-meta">
/okchai2/1 By <span class="author">O. K. Chai</span>
<span class="divider">•</span>
<time datetime="2026-10-22">October 22, 2026</time>
</div>
<p>
這一頁，是 okchai2 第一頁 /okchai2/1, 之後會補上 /okchai2/0 和 index 頁 /okchai2。
<a href="/index/blockexplorer.html" class="content-link" title="Explore the Network">Qora decentralized blockexplorer</a> Hyperlink 視覺效果不錯。
</p>
<div class="blockquote-container">
<p class="blockquote-text">
"一圖勝千言"
</p>
<cite class="blockquote-source">— 不是孔子說</cite>
</div>
<div class="article-image-container">
<img src="/i/1400.png" alt="NFT" class="article-img">
這是一個 NFT，有意持有請聯絡我。
</div>
<p>Using HTML and JavaScript only. 最下方的圖案，左邊去上一頁，右邊去下一頁，中間去到該NFT的訊息紀錄頁，間接就是一個廣告。 </p>
<p class="text-center">
<a href="/okchai2" class="content-link" title="okchai2 Index">
<img src="/i/1000.png" width="15" height="15" alt="index icon"> index
</a>
</p>
</main>
<footer id="tuju-footer" class="banner-container fixed-bottom"></footer>
<script>
function calculateImageId(value) {
const remainder = value % 20;
const groupFactor = (value - remainder) / 20;
return (20 + groupFactor) * 100 + (20 + remainder);
}
const y = 1;
const x = y - 1;
const z = y + 1;
const x2000 = calculateImageId(x);
const y2000 = calculateImageId(y);
const z2000 = calculateImageId(z);
let footerHTML = "";
footerHTML += `<a class="side-link" href="/tuju/${x}" title="tuju/${x} Page">
<img src="/i/${x2000}.png" alt="Previous">
</a>`;
footerHTML += `<a class="mid-link" href="/i${y2000}" title="NFT /i${y2000} info Page">
<img class="mid-img" src="/i/${y2000}.png" alt="Current">
</a>`;
footerHTML += `<a class="side-link" href="/tuju/${z}" title="tuju/${z} Page">
<img src="/i/${z2000}.png" alt="Next">
</a>`;
document.getElementById("tuju-footer").innerHTML = footerHTML;
</script>
</body>
</html>