Timmy
04907e1ac6
- eight-drunken-styles.html (醉翁八態) - liquor-tasting.html (品酒程序) - shoe-size.html (鞋子尺寸對照表)
308 lines
7.6 KiB
HTML
308 lines
7.6 KiB
HTML
<!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>
|