js-han
Version:
156 lines (141 loc) • 4.79 kB
HTML
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>簡化字轉漢字</title>
<link rel="icon" href="./src/assets/favicon.ico" type="image/x-icon">
<script type="module">
import Han from "./src/han.js";
window.onload = () => {
const traditional = document.querySelector('#traditional');
const simplified = document.querySelector('#simplified');
const header = document.querySelector('header');
const hanInstance = Han.getInstance();
const copyValue = () => {
traditional.value = hanInstance.toTraditional(simplified.value);
}
simplified.addEventListener('input', () => {
copyValue()
});
let hide = false
document.querySelector('#floating-action-button').onclick = () => {
if (!hide) {
simplified.style.display = 'none';
header.style.display = 'none';
} else {
simplified.style.display = 'block';
header.style.display = 'grid';
}
hide = !hide
}
}
</script>
<style>
body {
direction: rtl;
display: flex;
align-items: normal;
height: 100vh;
margin: 0;
font-family: 'Source Han Serif TC', 'SimSun-ExtB', 'MingLiU', serif;
background-color: #f7f6f5;
}
header {
display: grid;
align-items: flex-end;
}
h1 {
margin: .5em;
writing-mode: vertical-rl;
white-space: nowrap;
}
.links {
direction: ltr;
font-size: 16px;
text-align: right;
list-style-type: none;
padding: 1em;
}
.container {
display: flex;
width: 100%;
height: 100%;
}
#simplified:focus, #traditional:focus {
outline: none;
}
#simplified, #traditional {
width: 100%;
height: 100%;
resize: none;
padding: .5em;
box-sizing: border-box;
font-size: 24px;
color: #444;
direction: ltr;
font-family: 'Source Han Serif TC', 'SimSun-ExtB', 'MingLiU', serif;
}
#simplified {
border-left: none;
}
#traditional {
writing-mode: vertical-rl;
}
.floating-action-button {
position: fixed;
left: 1em;
bottom: 1.5em;
width: 56px;
height: 56px;
background-color: #8B0000;
color: white;
border: none;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
cursor: pointer;
z-index: 1000;
transition: background-color 0.3s ease;
user-select: none;
outline: none;
}
.floating-action-button:active {
background-color: #e91e63;
outline: none;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
</style>
</head>
<body>
<header>
<h1>簡化字轉漢字</h1>
<ul class="links">
<li><a target="_blank" href="https://github.com/lizongying/hanzi">Pages</a></li>
<li><a target="_blank" href="https://github.com/lizongying/pyhan">Py</a></li>
<li><a target="_blank" href="https://github.com/lizongying/rs-han">Rust</a></li>
<li><a target="_blank" href="https://github.com/lizongying/hanzi">Go</a></li>
<li><a target="_blank" href="https://github.com/lizongying/js-han">Js</a></li>
<li><a target="_blank" href="https://github.com/lizongying/hanzi">Kotlin</a></li>
<li><a target="_blank" href="https://github.com/lizongying/hanzi">Php</a></li>
<li><a target="_blank" href="https://github.com/lizongying/hanzi">C#</a></li>
</ul>
</header>
<div class="container">
<label for="simplified"></label>
<textarea id="simplified" placeholder="简化字"></textarea>
<label for="traditional"></label>
<textarea id="traditional" readonly placeholder="漢字"></textarea>
</div>
<div id="floating-action-button" class="floating-action-button">
漢
</div>
</body>
</html>