107 lines
2.8 KiB
HTML
107 lines
2.8 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<meta charset="utf-8" /><title>品牌文字放大对照</title
|
|
><link rel="stylesheet" href="/src/style.css" /><style>
|
|
body {
|
|
overflow: auto;
|
|
padding: 20px;
|
|
}
|
|
main {
|
|
max-width: 1000px;
|
|
}
|
|
h2 {
|
|
font: 16px system-ui;
|
|
margin: 20px 0 8px;
|
|
}
|
|
.crop {
|
|
position: relative;
|
|
width: 732px;
|
|
height: 308px;
|
|
overflow: hidden;
|
|
background: #e4e2dd;
|
|
}
|
|
.crop img {
|
|
width: 732px;
|
|
height: 308px;
|
|
}
|
|
.crop .brand {
|
|
left: 33.6px;
|
|
top: 21.6px;
|
|
transform: scale(2.4);
|
|
transform-origin: 0 0;
|
|
}
|
|
.guides {
|
|
position: absolute;
|
|
left: 34px;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 646px;
|
|
border-inline: 1px dashed #bc765b;
|
|
pointer-events: none;
|
|
}
|
|
.overlay .brand {
|
|
color: #c63d30;
|
|
opacity: 0.55;
|
|
}
|
|
pre {
|
|
font: 14px monospace;
|
|
white-space: pre-wrap;
|
|
}
|
|
</style>
|
|
<main>
|
|
<h2>原片左上角 · 2.4 倍放大</h2>
|
|
<div class="crop">
|
|
<img src="brand-original.jpg" alt="原片品牌文字放大" />
|
|
<div class="guides"></div>
|
|
</div>
|
|
<h2>当前界面 · 同倍率</h2>
|
|
<div class="crop">
|
|
<header class="brand">
|
|
<h1>RHINE LAB</h1>
|
|
<div>SYNTHESIZE INFORMATION</div>
|
|
<p>ANALYSIS <b>OS</b></p>
|
|
</header>
|
|
<div class="guides"></div>
|
|
</div>
|
|
<h2 id="overlay">原片与当前叠加 · 当前文字用红色标出</h2>
|
|
<label style="display: block; margin: 12px 0; font-size: 14px"
|
|
>当前文字透明度
|
|
<input id="opacity" type="range" min="0" max="1" step="0.05" value="0.55"
|
|
/></label>
|
|
<div class="crop overlay">
|
|
<img src="brand-original.jpg" alt="原片与当前文字叠加" />
|
|
<header class="brand">
|
|
<h1>RHINE LAB</h1>
|
|
<div>SYNTHESIZE INFORMATION</div>
|
|
<p>ANALYSIS <b>OS</b></p>
|
|
</header>
|
|
<div class="guides"></div>
|
|
</div>
|
|
<pre id="metrics"></pre>
|
|
</main>
|
|
<script type="module">
|
|
import { brandHeading } from "/src/brand.ts";
|
|
document
|
|
.querySelectorAll(".brand")
|
|
.forEach((el) => (el.innerHTML = brandHeading));
|
|
await document.fonts.ready;
|
|
document.querySelector("#metrics").textContent = JSON.stringify(
|
|
[...document.querySelector(".brand").children].map((el) => {
|
|
const r = document.createRange();
|
|
r.selectNodeContents(el);
|
|
return {
|
|
line: el.textContent,
|
|
width: r.getBoundingClientRect().width / 2.4,
|
|
spacing: getComputedStyle(el).letterSpacing,
|
|
fontSize: getComputedStyle(el).fontSize,
|
|
};
|
|
}),
|
|
null,
|
|
2,
|
|
);
|
|
document.querySelector("#opacity").oninput = (e) =>
|
|
(document.querySelector(".overlay .brand").style.opacity =
|
|
e.target.value);
|
|
</script>
|
|
</html>
|