Initial commit: add mini pages collection
- eight-drunken-styles.html (醉翁八態) - liquor-tasting.html (品酒程序) - shoe-size.html (鞋子尺寸對照表)
This commit is contained in:
676
eight-drunken-styles.html
Normal file
676
eight-drunken-styles.html
Normal 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>
|
||||
551
liquor-tasting.html
Normal file
551
liquor-tasting.html
Normal file
@@ -0,0 +1,551 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-TW">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>飲酒七方 · 品酒程序</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 {
|
||||
--gold: #c9a84c;
|
||||
--gold-light: #e8cb7a;
|
||||
--gold-dim: #7a6030;
|
||||
--bg: #0d0d0d;
|
||||
--surface: #141414;
|
||||
--surface2: #1c1c1c;
|
||||
--text: #e8e0d0;
|
||||
--text-dim: #8a8070;
|
||||
--border: rgba(201,168,76,0.2);
|
||||
}
|
||||
|
||||
*, *::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 TEXTURE === */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/* === HERO === */
|
||||
.hero {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(201,168,76,0.08) 0%, transparent 70%);
|
||||
}
|
||||
|
||||
.hero-deco {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border: 1px solid rgba(201,168,76,0.06);
|
||||
border-radius: 50%;
|
||||
animation: pulse-ring 6s ease-in-out infinite;
|
||||
}
|
||||
.hero-deco:nth-child(2) {
|
||||
width: 450px; height: 450px;
|
||||
border-color: rgba(201,168,76,0.1);
|
||||
animation-delay: -2s;
|
||||
}
|
||||
.hero-deco:nth-child(3) {
|
||||
width: 300px; height: 300px;
|
||||
border-color: rgba(201,168,76,0.15);
|
||||
animation-delay: -4s;
|
||||
}
|
||||
|
||||
@keyframes pulse-ring {
|
||||
0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
|
||||
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.03); }
|
||||
}
|
||||
|
||||
.hero-content { position: relative; z-index: 2; }
|
||||
|
||||
.hero-en {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: clamp(0.7rem, 1.5vw, 0.85rem);
|
||||
letter-spacing: 0.5em;
|
||||
color: var(--gold);
|
||||
text-transform: uppercase;
|
||||
opacity: 0;
|
||||
animation: fade-up 1s ease forwards 0.3s;
|
||||
}
|
||||
|
||||
.hero-zh {
|
||||
font-size: clamp(3rem, 10vw, 7rem);
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
margin: 0.3em 0 0.2em;
|
||||
background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 40%, var(--gold-dim) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
opacity: 0;
|
||||
animation: fade-up 1s ease forwards 0.6s;
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
font-size: clamp(0.8rem, 2vw, 1rem);
|
||||
font-weight: 300;
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.3em;
|
||||
opacity: 0;
|
||||
animation: fade-up 1s ease forwards 0.9s;
|
||||
}
|
||||
|
||||
.hero-line {
|
||||
width: 1px;
|
||||
height: 80px;
|
||||
background: linear-gradient(to bottom, var(--gold), transparent);
|
||||
margin: 2.5rem auto 0;
|
||||
opacity: 0;
|
||||
animation: fade-up 1s ease forwards 1.2s;
|
||||
}
|
||||
|
||||
@keyframes fade-up {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* === SECTION === */
|
||||
section {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 6rem 2rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.section-title::before, .section-title::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, var(--gold-dim), transparent);
|
||||
}
|
||||
|
||||
.section-title h2 {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.4em;
|
||||
color: var(--gold);
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* === SEVEN WAYS === */
|
||||
.ways-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 1.5px;
|
||||
background: var(--border);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.way-card {
|
||||
background: var(--surface);
|
||||
padding: 2.5rem 2rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: background 0.4s ease;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.way-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 3px;
|
||||
height: 0;
|
||||
background: var(--gold);
|
||||
transition: height 0.4s ease;
|
||||
}
|
||||
|
||||
.way-card:hover { background: var(--surface2); }
|
||||
.way-card:hover::before { height: 100%; }
|
||||
|
||||
.way-char {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
background: linear-gradient(135deg, var(--gold-light), var(--gold));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.way-en {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.35em;
|
||||
color: var(--gold-dim);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.way-desc {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 300;
|
||||
line-height: 2;
|
||||
color: var(--text-dim);
|
||||
font-family: 'Noto Sans TC', sans-serif;
|
||||
}
|
||||
|
||||
.way-num {
|
||||
position: absolute;
|
||||
top: 1.5rem;
|
||||
right: 1.5rem;
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 0.6rem;
|
||||
color: rgba(201,168,76,0.2);
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
/* === TASTING PROCEDURE === */
|
||||
.procedure-section {
|
||||
background: var(--surface);
|
||||
border-top: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.procedure-section > section {
|
||||
padding-top: 5rem;
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
|
||||
.steps-flow {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.steps-flow::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: calc(12.5% + 10px);
|
||||
right: calc(12.5% + 10px);
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, var(--gold-dim), var(--gold), var(--gold-dim));
|
||||
}
|
||||
|
||||
.step {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 0 1rem;
|
||||
opacity: 0;
|
||||
animation: fade-up 0.8s ease forwards;
|
||||
}
|
||||
|
||||
.step:nth-child(1) { animation-delay: 0.1s; }
|
||||
.step:nth-child(2) { animation-delay: 0.3s; }
|
||||
.step:nth-child(3) { animation-delay: 0.5s; }
|
||||
.step:nth-child(4) { animation-delay: 0.7s; }
|
||||
|
||||
.step-circle {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--gold);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--bg);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transition: all 0.4s ease;
|
||||
box-shadow: 0 0 30px rgba(201,168,76,0.05);
|
||||
}
|
||||
|
||||
.step-circle:hover {
|
||||
background: rgba(201,168,76,0.08);
|
||||
box-shadow: 0 0 50px rgba(201,168,76,0.15);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.step-zh {
|
||||
font-size: 2rem;
|
||||
font-weight: 900;
|
||||
color: var(--gold-light);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.step-en {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 0.55rem;
|
||||
letter-spacing: 0.2em;
|
||||
color: var(--gold-dim);
|
||||
text-transform: uppercase;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
.step-attrs {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.step-attrs span {
|
||||
font-size: 0.82rem;
|
||||
color: var(--text-dim);
|
||||
font-family: 'Noto Sans TC', sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.step-attrs .en-attr {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 0.55rem;
|
||||
color: rgba(201,168,76,0.3);
|
||||
letter-spacing: 0.1em;
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
|
||||
/* === FOOTER === */
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 3rem 2rem;
|
||||
border-top: 1px solid var(--border);
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 0.6rem;
|
||||
letter-spacing: 0.4em;
|
||||
color: var(--gold-dim);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* === SCROLL REVEAL === */
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: opacity 0.8s ease, transform 0.8s ease;
|
||||
}
|
||||
.reveal.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* === RESPONSIVE === */
|
||||
@media (max-width: 768px) {
|
||||
.steps-flow {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 3rem 1rem;
|
||||
}
|
||||
.steps-flow::before { display: none; }
|
||||
.ways-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.steps-flow { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- HERO -->
|
||||
<div class="hero">
|
||||
<div class="hero-deco"></div>
|
||||
<div class="hero-deco"></div>
|
||||
<div class="hero-deco"></div>
|
||||
<div class="hero-content">
|
||||
<p class="hero-en">The Art of Chinese Liquor</p>
|
||||
<h1 class="hero-zh">飲酒七方</h1>
|
||||
<p class="hero-sub">七種飲酒之道 · 一套品酒程序</p>
|
||||
<div class="hero-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SEVEN WAYS -->
|
||||
<section>
|
||||
<div class="section-title">
|
||||
<h2>Seven Ways of Liquor Drinking</h2>
|
||||
</div>
|
||||
<div class="ways-grid reveal">
|
||||
<div class="way-card">
|
||||
<span class="way-num">01</span>
|
||||
<div class="way-char">壯</div>
|
||||
<div class="way-en">Drink Bravely</div>
|
||||
<div class="way-desc">鴻圖壯志心未止，飲乾一壺笑看天</div>
|
||||
</div>
|
||||
<div class="way-card">
|
||||
<span class="way-num">02</span>
|
||||
<div class="way-char">放</div>
|
||||
<div class="way-en">Drink Freely</div>
|
||||
<div class="way-desc">任由酒花白眼亂，何不一回酒中仙</div>
|
||||
</div>
|
||||
<div class="way-card">
|
||||
<span class="way-num">03</span>
|
||||
<div class="way-char">覬</div>
|
||||
<div class="way-en">Drink Lustfully</div>
|
||||
<div class="way-desc">胸前瑞雪燈斜照，眼底桃花酒半醺。美人在懷，秋波盈盈，飲酒一杯已三分</div>
|
||||
</div>
|
||||
<div class="way-card">
|
||||
<span class="way-num">04</span>
|
||||
<div class="way-char">獨</div>
|
||||
<div class="way-en">Drink Alone</div>
|
||||
<div class="way-desc">一仰盡盅酒，舉杯邀邀月</div>
|
||||
</div>
|
||||
<div class="way-card">
|
||||
<span class="way-num">05</span>
|
||||
<div class="way-char">對</div>
|
||||
<div class="way-en">Drink in Pairs</div>
|
||||
<div class="way-desc">但求知音相對飲，隔桌呼取盡餘杯</div>
|
||||
</div>
|
||||
<div class="way-card">
|
||||
<span class="way-num">06</span>
|
||||
<div class="way-char">共</div>
|
||||
<div class="way-en">Drink in Groups</div>
|
||||
<div class="way-desc">開壇猛生花醉月，群朋聚飲樂無邊。催酒興來難知盡，千杯不醉似神仙</div>
|
||||
</div>
|
||||
<div class="way-card">
|
||||
<span class="way-num">07</span>
|
||||
<div class="way-char">豪</div>
|
||||
<div class="way-en">Drink Generously</div>
|
||||
<div class="way-desc">醉臥沙場君莫笑，瀟瀟滄海歸何年</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PROCEDURE -->
|
||||
<div class="procedure-section">
|
||||
<section>
|
||||
<div class="section-title">
|
||||
<h2>Procedure of Liquor Tasting</h2>
|
||||
</div>
|
||||
<div class="steps-flow">
|
||||
<div class="step">
|
||||
<div class="step-circle">
|
||||
<div class="step-zh">看</div>
|
||||
<div class="step-en">Look</div>
|
||||
</div>
|
||||
<div class="step-attrs">
|
||||
<span>光澤</span>
|
||||
<span>顏色</span>
|
||||
<span>清晰度</span>
|
||||
<span class="en-attr">gloss · color · clarity</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-circle">
|
||||
<div class="step-zh">嗅</div>
|
||||
<div class="step-en">Smell</div>
|
||||
</div>
|
||||
<div class="step-attrs">
|
||||
<span>果香 · 花香 · 藥香</span>
|
||||
<span>清香 · 濃香</span>
|
||||
<span>醬香 · 醇香</span>
|
||||
<span class="en-attr">fruity · flowery · herbal<br>refreshing · strong · mellow</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-circle">
|
||||
<div class="step-zh">喝</div>
|
||||
<div class="step-en">Taste</div>
|
||||
</div>
|
||||
<div class="step-attrs">
|
||||
<span>酸</span>
|
||||
<span>甜</span>
|
||||
<span>苦</span>
|
||||
<span>澀</span>
|
||||
<span>鹹</span>
|
||||
<span class="en-attr">sour · sweet · bitter · astringent · salty</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-circle">
|
||||
<div class="step-zh">回味</div>
|
||||
<div class="step-en">Savor</div>
|
||||
</div>
|
||||
<div class="step-attrs">
|
||||
<span>平滑</span>
|
||||
<span>柔和</span>
|
||||
<span>爽口</span>
|
||||
<span>圓正</span>
|
||||
<span class="en-attr">smooth · supple · fresh · round</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
飲酒七方 · Seven Ways of Liquor Drinking · 品酒程序
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Scroll reveal
|
||||
const reveals = document.querySelectorAll('.reveal');
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.1 });
|
||||
reveals.forEach(el => observer.observe(el));
|
||||
|
||||
// Staggered card reveal
|
||||
const cards = document.querySelectorAll('.way-card');
|
||||
const cardObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const cards = entry.target.querySelectorAll('.way-card');
|
||||
cards.forEach((card, i) => {
|
||||
setTimeout(() => {
|
||||
card.style.opacity = '1';
|
||||
card.style.transform = 'translateY(0)';
|
||||
}, i * 80);
|
||||
});
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.1 });
|
||||
|
||||
document.querySelectorAll('.ways-grid').forEach(grid => {
|
||||
grid.querySelectorAll('.way-card').forEach(card => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(20px)';
|
||||
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease, background 0.4s ease';
|
||||
});
|
||||
cardObserver.observe(grid);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
307
shoe-size.html
Normal file
307
shoe-size.html
Normal file
@@ -0,0 +1,307 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-TW">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>鞋子尺寸對照表</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
font-family: 'Noto Sans TC', sans-serif;
|
||||
background: #f5f6fa;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 2.5rem 1rem 4rem;
|
||||
color: #1a1a2e;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.7rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
font-size: 2rem;
|
||||
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
color: #1a1a2e;
|
||||
}
|
||||
|
||||
/* Size input */
|
||||
.input-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 1.4rem 1.6rem;
|
||||
margin-bottom: 1.2rem;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.07);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.input-card label {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.input-row select {
|
||||
flex: 1;
|
||||
padding: 0.5rem 0.8rem;
|
||||
border: 1.5px solid #e0e4f0;
|
||||
border-radius: 8px;
|
||||
font-family: inherit;
|
||||
font-size: 0.95rem;
|
||||
color: #1a1a2e;
|
||||
background: #f8f9ff;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.input-row select:focus { border-color: #4f6ef7; }
|
||||
|
||||
.input-row input[type=number] {
|
||||
width: 90px;
|
||||
padding: 0.5rem 0.8rem;
|
||||
border: 1.5px solid #e0e4f0;
|
||||
border-radius: 8px;
|
||||
font-family: inherit;
|
||||
font-size: 0.95rem;
|
||||
color: #1a1a2e;
|
||||
background: #f8f9ff;
|
||||
outline: none;
|
||||
text-align: center;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.input-row input[type=number]:focus { border-color: #4f6ef7; }
|
||||
|
||||
/* Table card */
|
||||
.table-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.07);
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
thead tr {
|
||||
background: #eef0fb;
|
||||
}
|
||||
|
||||
thead th {
|
||||
padding: 1rem 1.4rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
color: #6b7280;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
border-top: 1px solid #f0f1f8;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
tbody tr:hover { background: #f7f8ff; }
|
||||
|
||||
tbody tr.highlight {
|
||||
background: #eff3ff;
|
||||
border-left: 3px solid #4f6ef7;
|
||||
}
|
||||
|
||||
tbody tr.highlight td:first-child { padding-left: calc(1.4rem - 3px); }
|
||||
|
||||
tbody td {
|
||||
padding: 1rem 1.4rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
td.region {
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
td.code {
|
||||
font-size: 0.75rem;
|
||||
color: #9ca3af;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
td.size {
|
||||
font-weight: 700;
|
||||
font-size: 1.05rem;
|
||||
color: #1a1a2e;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
tbody tr.highlight td.size {
|
||||
color: #4f6ef7;
|
||||
}
|
||||
|
||||
.region-wrap { display: flex; flex-direction: column; gap: 2px; }
|
||||
.region-name { font-weight: 500; color: #374151; font-size: 0.95rem; }
|
||||
.region-code { font-size: 0.72rem; color: #9ca3af; }
|
||||
|
||||
/* Note */
|
||||
.note {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.75rem;
|
||||
color: #9ca3af;
|
||||
text-align: center;
|
||||
line-height: 1.8;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
<div class="header">
|
||||
<span class="header-icon">👟</span>
|
||||
<h1>鞋子尺寸對照表</h1>
|
||||
</div>
|
||||
|
||||
<div class="input-card">
|
||||
<label>輸入尺寸換算</label>
|
||||
<div class="input-row">
|
||||
<select id="fromUnit" onchange="convert()">
|
||||
<option value="eu">歐碼 EU</option>
|
||||
<option value="us">美碼 US</option>
|
||||
<option value="uk">英碼 UK</option>
|
||||
<option value="mm">腳長 mm</option>
|
||||
<option value="mx">墨西哥 MX (cm)</option>
|
||||
<option value="br">巴西 BR</option>
|
||||
<option value="ru">俄羅斯 RU</option>
|
||||
</select>
|
||||
<input type="number" id="sizeInput" placeholder="44" min="1" step="0.5" oninput="convert()">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>地區／規格</th>
|
||||
<th style="text-align:right">尺寸標示</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tableBody">
|
||||
<!-- filled by JS -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p class="note">以上為近似換算，不同品牌可能略有差異。<br>建議實際試穿確認。</p>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Base data: array of {eu, us, uk, mm, mx, br, ru}
|
||||
const sizeData = [
|
||||
{ eu: 38, us: 6, uk: 5, mm: 240, mx: 24.0, br: 36, ru: 37 },
|
||||
{ eu: 38.5, us: 6.5, uk: 5.5, mm: 245, mx: 24.5, br: 37, ru: 37.5 },
|
||||
{ eu: 39, us: 7, uk: 6, mm: 250, mx: 25.0, br: 38, ru: 38 },
|
||||
{ eu: 40, us: 7.5, uk: 6.5, mm: 255, mx: 25.5, br: 38, ru: 38.5 },
|
||||
{ eu: 40.5, us: 8, uk: 7, mm: 260, mx: 26.0, br: 39, ru: 39 },
|
||||
{ eu: 41, us: 8.5, uk: 7.5, mm: 265, mx: 26.5, br: 40, ru: 40 },
|
||||
{ eu: 42, us: 9, uk: 8, mm: 270, mx: 27.0, br: 41, ru: 40.5 },
|
||||
{ eu: 42.5, us: 9.5, uk: 8.5, mm: 275, mx: 27.5, br: 41, ru: 41 },
|
||||
{ eu: 43, us: 10, uk: 9, mm: 278, mx: 27.8, br: 42, ru: 42 },
|
||||
{ eu: 44, us: 10.5, uk: 9.5, mm: 282, mx: 28.0, br: 42, ru: 43 },
|
||||
{ eu: 44.5, us: 11, uk: 10, mm: 285, mx: 28.5, br: 43, ru: 43.5 },
|
||||
{ eu: 45, us: 11.5, uk: 10.5, mm: 290, mx: 29.0, br: 44, ru: 44 },
|
||||
{ eu: 46, us: 12, uk: 11, mm: 295, mx: 29.5, br: 45, ru: 45 },
|
||||
{ eu: 47, us: 13, uk: 12, mm: 300, mx: 30.0, br: 46, ru: 46 },
|
||||
];
|
||||
|
||||
const regions = [
|
||||
{ key: 'eu', name: '歐碼', code: 'EU', unit: '' },
|
||||
{ key: 'us', name: '美碼', code: 'US', unit: '' },
|
||||
{ key: 'uk', name: '英碼', code: 'UK', unit: '' },
|
||||
{ key: 'mm', name: '腳長', code: 'CM/MM', unit: ' mm' },
|
||||
{ key: 'mx', name: '墨西哥', code: 'MX', unit: ' cm' },
|
||||
{ key: 'br', name: '巴西', code: 'BR', unit: '' },
|
||||
{ key: 'ru', name: '俄羅斯', code: 'RU', unit: '' },
|
||||
];
|
||||
|
||||
// Default display (no input): show the sample row from image
|
||||
function renderDefault() {
|
||||
const tbody = document.getElementById('tableBody');
|
||||
const sample = sizeData.find(r => r.eu === 44) || sizeData[9];
|
||||
tbody.innerHTML = regions.map(r => `
|
||||
<tr>
|
||||
<td><div class="region-wrap">
|
||||
<span class="region-name">${r.name}</span>
|
||||
<span class="region-code">${r.code}</span>
|
||||
</div></td>
|
||||
<td class="size">${fmt(sample[r.key])}${r.unit}</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function fmt(v) {
|
||||
return Number.isInteger(v) ? v : v;
|
||||
}
|
||||
|
||||
function convert() {
|
||||
const unit = document.getElementById('fromUnit').value;
|
||||
const val = parseFloat(document.getElementById('sizeInput').value);
|
||||
if (isNaN(val)) { renderDefault(); return; }
|
||||
|
||||
// Find closest row
|
||||
let best = null, bestDiff = Infinity;
|
||||
for (const row of sizeData) {
|
||||
const diff = Math.abs(row[unit] - val);
|
||||
if (diff < bestDiff) { bestDiff = diff; best = row; }
|
||||
}
|
||||
|
||||
const tbody = document.getElementById('tableBody');
|
||||
tbody.innerHTML = regions.map(r => `
|
||||
<tr class="${r.key === unit ? 'highlight' : ''}">
|
||||
<td><div class="region-wrap">
|
||||
<span class="region-name">${r.name}</span>
|
||||
<span class="region-code">${r.code}</span>
|
||||
</div></td>
|
||||
<td class="size">${fmt(best[r.key])}${r.unit}</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
renderDefault();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user