timmy/mini-pages
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: add mini pages collection

Browse Source 
- eight-drunken-styles.html (醉翁八態)
- liquor-tasting.html (品酒程序)
- shoe-size.html (鞋子尺寸對照表)
This commit is contained in:
Timmy
2026-04-12 14:24:42 +08:00
commit 04907e1ac6
3 changed files with 1534 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

676
eight-drunken-styles.html Normal file
View File

@@ -0,0 +1,676 @@
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>醉翁八態 · Eight Drunken Styles</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;400;600;900&family=Cinzel:wght@400;700&family=Noto+Sans+TC:wght@300;400&display=swap" rel="stylesheet">
<style>
:root {
--c1: #c8b87a; /* 猴 - 黃綠 */
--c2: #d4956a; /* 獅 - 橙 */
--c3: #c8855a; /* 豬 - 深橙 */
--c4: #c47a7a; /* 羊 - 玫瑰 */
--c5: #8a9e8a; /* 狼 - 灰綠 */
--c6: #7a9060; /* 狐 - 橄欖 */
--c7: #5a7060; /* 哭 - 深綠 */
--c8: #4a5a50; /* 真 - 墨綠 */
--bg: #1a1a18;
--text: #f0ebe0;
--text-dim: #a09880;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--text);
font-family: 'Noto Serif TC', serif;
min-height: 100vh;
overflow-x: hidden;
}
/* noise */
body::after {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 9999;
}
/* ===== HERO ===== */
.hero {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
overflow: hidden;
background: #0d0d0b;
}
.hero-stripes {
position: absolute;
inset: 0;
display: flex;
opacity: 0.18;
}
.hero-stripes span {
flex: 1;
transform: skewX(-3deg) scaleX(1.1);
}
.hero-stripes span:nth-child(1) { background: var(--c1); }
.hero-stripes span:nth-child(2) { background: var(--c2); }
.hero-stripes span:nth-child(3) { background: var(--c3); }
.hero-stripes span:nth-child(4) { background: var(--c4); }
.hero-stripes span:nth-child(5) { background: var(--c5); }
.hero-stripes span:nth-child(6) { background: var(--c6); }
.hero-stripes span:nth-child(7) { background: var(--c7); }
.hero-stripes span:nth-child(8) { background: var(--c8); }
.hero-content { position: relative; z-index: 2; }
.hero-label {
font-family: 'Cinzel', serif;
font-size: 0.7rem;
letter-spacing: 0.5em;
color: var(--text-dim);
text-transform: uppercase;
opacity: 0;
animation: fadeUp 1s ease forwards 0.3s;
}
.hero-title {
font-size: clamp(3.5rem, 12vw, 8rem);
font-weight: 900;
line-height: 1;
margin: 0.25em 0 0.2em;
opacity: 0;
animation: fadeUp 1s ease forwards 0.6s;
background: linear-gradient(135deg, #e8d88a 0%, #f5f0e0 50%, #c8b87a 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-sub {
font-family: 'Cinzel', serif;
font-size: clamp(0.65rem, 1.5vw, 0.85rem);
letter-spacing: 0.4em;
color: var(--text-dim);
text-transform: uppercase;
opacity: 0;
animation: fadeUp 1s ease forwards 0.9s;
}
.hero-scroll {
position: absolute;
bottom: 2.5rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
opacity: 0;
animation: fadeUp 1s ease forwards 1.4s;
}
.hero-scroll span {
font-family: 'Cinzel', serif;
font-size: 0.55rem;
letter-spacing: 0.4em;
color: var(--text-dim);
text-transform: uppercase;
}
.scroll-line {
width: 1px;
height: 50px;
background: linear-gradient(to bottom, rgba(200,184,122,0.6), transparent);
animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
0%, 100% { opacity: 0.4; transform: scaleY(1); }
50% { opacity: 1; transform: scaleY(1.1); }
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
/* ===== CARDS SECTION ===== */
.cards-section {
padding: 6rem 0 8rem;
}
.cards-title {
text-align: center;
margin-bottom: 5rem;
}
.cards-title h2 {
font-family: 'Cinzel', serif;
font-size: 0.7rem;
letter-spacing: 0.5em;
color: var(--text-dim);
text-transform: uppercase;
}
/* ===== STRIPE CARDS ===== */
.stripe-wrap {
display: flex;
gap: 0;
min-height: 680px;
position: relative;
overflow: hidden;
}
.stripe {
flex: 1;
position: relative;
cursor: pointer;
transition: flex 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
padding: 3rem 0 2.5rem;
}
.stripe:hover { flex: 3; }
.stripe::before {
content: '';
position: absolute;
inset: 0;
background: inherit;
opacity: 0.85;
transition: opacity 0.4s ease;
}
.stripe:hover::before { opacity: 1; }
.stripe-1 { background: var(--c1); }
.stripe-2 { background: var(--c2); }
.stripe-3 { background: var(--c3); }
.stripe-4 { background: var(--c4); }
.stripe-5 { background: var(--c5); }
.stripe-6 { background: var(--c6); }
.stripe-7 { background: var(--c7); }
.stripe-8 { background: var(--c8); }
.stripe-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
}
/* animal circle */
.animal-circle {
width: 90px;
height: 90px;
border-radius: 50%;
background: rgba(255,255,255,0.92);
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
flex-shrink: 0;
box-shadow: 0 8px 30px rgba(0,0,0,0.2);
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.stripe:hover .animal-circle {
transform: scale(1.1);
box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.stripe-name {
writing-mode: vertical-rl;
font-size: 1.4rem;
font-weight: 900;
color: rgba(255,255,255,0.95);
margin-top: 1.5rem;
letter-spacing: 0.1em;
text-shadow: 0 2px 8px rgba(0,0,0,0.2);
transition: opacity 0.3s ease;
}
.stripe-en {
writing-mode: vertical-rl;
font-family: 'Cinzel', serif;
font-size: 0.55rem;
letter-spacing: 0.25em;
color: rgba(255,255,255,0.5);
margin-top: 0.8rem;
text-transform: uppercase;
}
/* expanded content */
.stripe-detail {
opacity: 0;
max-width: 0;
overflow: hidden;
transition: opacity 0.4s ease 0.2s, max-width 0.6s ease;
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 0 1.2rem 1rem;
}
.stripe:hover .stripe-detail {
opacity: 1;
max-width: 300px;
}
.stripe-detail p {
font-size: 0.82rem;
font-weight: 300;
line-height: 2;
color: rgba(255,255,255,0.88);
font-family: 'Noto Sans TC', sans-serif;
writing-mode: vertical-rl;
text-orientation: mixed;
white-space: nowrap;
text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.stripe:hover .stripe-name,
.stripe:hover .stripe-en {
writing-mode: horizontal-tb;
margin-top: 0;
}
.stripe-top {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
padding-bottom: 1.5rem;
}
/* ===== GRID CARDS (mobile/alt view) ===== */
.grid-section {
max-width: 1100px;
margin: 0 auto;
padding: 6rem 1.5rem 8rem;
}
.grid-title {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 3.5rem;
}
.grid-title::before, .grid-title::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(to right, transparent, rgba(200,184,122,0.3), transparent);
}
.grid-title h2 {
font-family: 'Cinzel', serif;
font-size: 0.65rem;
letter-spacing: 0.4em;
color: var(--text-dim);
text-transform: uppercase;
white-space: nowrap;
}
.cards-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.card {
border-radius: 2px;
overflow: hidden;
display: flex;
flex-direction: column;
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.4s ease;
}
.card.visible {
opacity: 1;
transform: translateY(0);
}
.card:hover {
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
transform: translateY(-4px);
}
.card-header {
padding: 2rem 1.5rem 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.card-1 .card-header { background: var(--c1); }
.card-2 .card-header { background: var(--c2); }
.card-3 .card-header { background: var(--c3); }
.card-4 .card-header { background: var(--c4); }
.card-5 .card-header { background: var(--c5); }
.card-6 .card-header { background: var(--c6); }
.card-7 .card-header { background: var(--c7); }
.card-8 .card-header { background: var(--c8); }
.card-icon {
width: 72px;
height: 72px;
border-radius: 50%;
background: rgba(255,255,255,0.9);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.card-name {
font-size: 1.3rem;
font-weight: 900;
color: rgba(255,255,255,0.95);
text-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.card-en {
font-family: 'Cinzel', serif;
font-size: 0.55rem;
letter-spacing: 0.3em;
color: rgba(255,255,255,0.55);
text-transform: uppercase;
margin-top: -0.4rem;
}
.card-body {
background: #1e1e1c;
padding: 1.4rem 1.3rem;
flex: 1;
border: 1px solid rgba(255,255,255,0.04);
border-top: none;
}
.card-body p {
font-size: 0.8rem;
font-weight: 300;
line-height: 2;
color: rgba(240,235,224,0.65);
font-family: 'Noto Sans TC', sans-serif;
}
/* ===== FOOTER ===== */
footer {
text-align: center;
padding: 3rem 2rem;
border-top: 1px solid rgba(255,255,255,0.06);
font-family: 'Cinzel', serif;
font-size: 0.55rem;
letter-spacing: 0.45em;
color: var(--text-dim);
text-transform: uppercase;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
.cards-grid { grid-template-columns: repeat(2, 1fr); }
.stripe-wrap { display: none; }
}
@media (max-width: 540px) {
.cards-grid { grid-template-columns: 1fr; }
}
@media (min-width: 901px) {
.grid-section { display: none; }
/* show stripe on desktop */
}
</style>
</head>
<body style="background:#0d0d0b !important;">
<!-- HERO -->
<div class="hero" style="background:#0d0d0b !important;">
<div class="hero-stripes">
<span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span>
</div>
<div class="hero-content">
<p class="hero-label">Eight Drunken Styles</p>
<h1 class="hero-title">醉翁八態</h1>
<p class="hero-sub">八種醉態 · 各有其韻</p>
</div>
<div class="hero-scroll">
<span>Scroll</span>
<div class="scroll-line"></div>
</div>
</div>
<!-- DESKTOP: STRIPE INTERACTION -->
<div class="stripe-wrap">
<div class="stripe stripe-1">
<div class="stripe-inner">
<div class="stripe-top">
<div class="animal-circle">🐒</div>
<div class="stripe-name">猴醉</div>
<div class="stripe-en">Monkey-like</div>
</div>
<div class="stripe-detail">
<p>大聲唱歌、跳來跳去，動作迅速、反應敏捷</p>
</div>
</div>
</div>
<div class="stripe stripe-2">
<div class="stripe-inner">
<div class="stripe-top">
<div class="animal-circle">🦁</div>
<div class="stripe-name">獅醉</div>
<div class="stripe-en">Lion-like</div>
</div>
<div class="stripe-detail">
<p>大吼大叫、滋事尋釁，舞步連連、想著立桿</p>
</div>
</div>
</div>
<div class="stripe stripe-3">
<div class="stripe-inner">
<div class="stripe-top">
<div class="animal-circle">🐷</div>
<div class="stripe-name">豬醉</div>
<div class="stripe-en">Pig-like</div>
</div>
<div class="stripe-detail">
<p>舌頭遲鈍、言語不清楚仍想倒，但舌頭已說不能使喚，嚷著再來一杯</p>
</div>
</div>
</div>
<div class="stripe stripe-4">
<div class="stripe-inner">
<div class="stripe-top">
<div class="animal-circle">🐐</div>
<div class="stripe-name">羊醉</div>
<div class="stripe-en">Goat-like</div>
</div>
<div class="stripe-detail">
<p>自以為威風八面、大言不慚，對異性性趣十足，帥哥美女想去撩戲弄</p>
</div>
</div>
</div>
<div class="stripe stripe-5">
<div class="stripe-inner">
<div class="stripe-top">
<div class="animal-circle">🐺</div>
<div class="stripe-name">狼醉</div>
<div class="stripe-en">Wolf-like</div>
</div>
<div class="stripe-detail">
<p>對異性性趣十足、感覺得都是帥哥美女，灌酒以達心願，以達到對方</p>
</div>
</div>
</div>
<div class="stripe stripe-6">
<div class="stripe-inner">
<div class="stripe-top">
<div class="animal-circle">🦊</div>
<div class="stripe-name">狐醉</div>
<div class="stripe-en">Fox-like</div>
</div>
<div class="stripe-detail">
<p>也可說是假醉，金圓將對方灌醉，以達其願，人動盡其反而臉不加寬</p>
</div>
</div>
</div>
<div class="stripe stripe-7">
<div class="stripe-inner">
<div class="stripe-top">
<div class="animal-circle">🐦</div>
<div class="stripe-name">哭醉</div>
<div class="stripe-en">Sadly drunk</div>
</div>
<div class="stripe-detail">
<p>爛醉如泥，淚流滿面，人動盡反而臉不加寬</p>
</div>
</div>
</div>
<div class="stripe stripe-8">
<div class="stripe-inner">
<div class="stripe-top">
<div class="animal-circle">🐸</div>
<div class="stripe-name">真醉</div>
<div class="stripe-en">Really drunk</div>
</div>
<div class="stripe-detail">
<p>真的醉了，很快進入睡眠狀態</p>
</div>
</div>
</div>
</div>
<!-- MOBILE / GRID VIEW -->
<div class="grid-section">
<div class="grid-title"><h2>Eight Drunken Styles · 醉翁八態</h2></div>
<div class="cards-grid">
<div class="card card-1">
<div class="card-header">
<div class="card-icon">🐒</div>
<div class="card-name">猴醉</div>
<div class="card-en">Monkey-like</div>
</div>
<div class="card-body"><p>大聲唱歌、跳來跳去，動作迅速、反應敏捷</p></div>
</div>
<div class="card card-2">
<div class="card-header">
<div class="card-icon">🦁</div>
<div class="card-name">獅醉</div>
<div class="card-en">Lion-like</div>
</div>
<div class="card-body"><p>大吼大叫、滋事尋釁，舞步連連、想著立桿</p></div>
</div>
<div class="card card-3">
<div class="card-header">
<div class="card-icon">🐷</div>
<div class="card-name">豬醉</div>
<div class="card-en">Pig-like</div>
</div>
<div class="card-body"><p>舌頭遲鈍、言語不清楚仍想倒，嚷著再來一杯</p></div>
</div>
<div class="card card-4">
<div class="card-header">
<div class="card-icon">🐐</div>
<div class="card-name">羊醉</div>
<div class="card-en">Goat-like</div>
</div>
<div class="card-body"><p>自以為威風八面、大言不慚，對異性性趣十足，想去撩戲弄</p></div>
</div>
<div class="card card-5">
<div class="card-header">
<div class="card-icon">🐺</div>
<div class="card-name">狼醉</div>
<div class="card-en">Wolf-like</div>
</div>
<div class="card-body"><p>感覺得都是帥哥美女，灌酒以達心願，強行接近對方</p></div>
</div>
<div class="card card-6">
<div class="card-header">
<div class="card-icon">🦊</div>
<div class="card-name">狐醉</div>
<div class="card-en">Fox-like</div>
</div>
<div class="card-body"><p>也可說是假醉，金圓將對方灌醉，以達其願，人動盡其反而臉不加寬</p></div>
</div>
<div class="card card-7">
<div class="card-header">
<div class="card-icon">🐦</div>
<div class="card-name">哭醉</div>
<div class="card-en">Sadly drunk</div>
</div>
<div class="card-body"><p>爛醉如泥、淚流滿面，觸景傷情、感慨橫飛</p></div>
</div>
<div class="card card-8">
<div class="card-header">
<div class="card-icon">🐸</div>
<div class="card-name">真醉</div>
<div class="card-en">Really drunk</div>
</div>
<div class="card-body"><p>真的醉了，很快進入睡眠狀態</p></div>
</div>
</div>
</div>
<footer>醉翁八態 · Eight Drunken Styles · 飲酒七方</footer>
<script>
// Scroll reveal for cards
const cards = document.querySelectorAll('.card');
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry, i) => {
if (entry.isIntersecting) {
setTimeout(() => entry.target.classList.add('visible'), 80 * [...cards].indexOf(entry.target));
}
});
}, { threshold: 0.1 });
cards.forEach(c => observer.observe(c));
</script>
</body>
</html>