diff --git a/www/css/style.css b/www/css/style.css index 99b8a00..54e8109 100644 --- a/www/css/style.css +++ b/www/css/style.css @@ -4,4 +4,180 @@ box-sizing: border-box; } +@font-face { + font-family: sans-cn; + src: url("../fonts/sans/SourceHanSansSC-VF.ttf.woff2"); +} +@font-face { + font-family: sans-hk; + src: url("../fonts/sans/SourceHanSansHC-VF.ttf.woff2"); +} +@font-face { + font-family: sans-tw; + src: url("../fonts/sans/SourceHanSansTC-VF.ttf.woff2"); +} +@font-face { + font-family: sans-jp; + src: url("../fonts/sans/SourceHanSans-VF.ttf.woff2"); +} +@font-face { + font-family: sans-kr; + src: url("../fonts/sans/SourceHanSansK-VF.ttf.woff2"); +} +@font-face { + font-family: serif-cn; + src: url("../fonts/serif/SourceHanSerifSC-VF.ttf.woff2"); +} +@font-face { + font-family: serif-hk; + src: url("../fonts/serif/SourceHanSerifHC-VF.ttf.woff2"); +} +@font-face { + font-family: serif-tw; + src: url("../fonts/serif/SourceHanSerifTC-VF.ttf.woff2"); +} +@font-face { + font-family: serif-jp; + src: url("../fonts/serif/SourceHanSerif-VF.ttf.woff2"); +} +@font-face { + font-family: serif-kr; + src: url("../fonts/serif/SourceHanSerifK-VF.ttf.woff2"); +} +.nav { + background-color: deepskyblue; + box-shadow: 0 0 8px gray; +} +.nav .title { + margin-left: 16px; + margin-right: 16px; + color: white; + font-size: 24px; + line-height: 48px; +} + +.main .error-tip { + color: red; + font-size: 32px; + line-height: 96px; + text-align: center; +} +.main .loading-tip { + font-size: 32px; + line-height: 96px; + text-align: center; +} +.main .input { + padding: 8px; + display: block; +} +.main .input input { + width: 100%; + padding: 8px; + font-size: 16px; + resize: none; +} +.main .checkbox-line { + padding-left: 8px; + padding-right: 8px; +} +.main .checkbox-line .checkbox .name { + margin-left: 6px; + margin-right: 20px; + font-size: 16px; +} +.main .search-result .item { + margin: 8px; + border-style: solid; + border-width: 1px; + border-color: gray; +} +.main .search-result .item .title { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; +} +.main .search-result .item .title .code-point { + padding-left: 8px; + padding-right: 8px; + color: white; + background-color: black; + font-size: 16px; + font-weight: bold; + line-height: 32px; +} +.main .search-result .item .title .char { + margin-left: 8px; + margin-right: 8px; + font-size: 20px; + font-weight: bold; +} +.main .search-result .item .title .tag { + margin: 4px; + padding-left: 8px; + padding-right: 8px; + font-size: 14px; + line-height: 20px; + border-style: solid; + border-width: 1px; + border-color: gray; + border-radius: 10px; +} +.main .search-result .item .glyphs { + padding: 4px; + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +.main .search-result .item .glyphs .glyph { + margin: 4px; + display: flex; + flex-direction: column; + align-items: center; + border-style: solid; + border-width: 1px; + border-color: gray; +} +.main .search-result .item .glyphs .glyph .title { + width: 100%; + display: flex; + justify-content: space-between; +} +.main .search-result .item .glyphs .glyph .title .language-flavor { + padding-left: 8px; + padding-right: 8px; + color: white; + background-color: gray; + font-size: 14px; + font-weight: bold; + line-height: 28px; +} +.main .search-result .item .glyphs .glyph .title .glyph-name { + margin-left: 8px; + margin-right: 8px; + font-size: 14px; +} +.main .search-result .item .glyphs .glyph .char { + padding-left: 16px; + padding-right: 16px; +} +.main .search-result .item .glyphs .sans-background { + background-color: beige; +} +.main .search-result .item .glyphs .serif-background { + background-color: linen; +} + +.footer { + padding-top: 8px; + padding-bottom: 12px; + display: flex; + justify-content: center; +} +.footer .separate { + padding-left: 8px; + padding-right: 8px; +} + /*# sourceMappingURL=style.css.map */ diff --git a/www/css/style.css.map b/www/css/style.css.map index 328dc46..73d7817 100644 --- a/www/css/style.css.map +++ b/www/css/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA","file":"style.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;;AAKJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AAGR;EACI;EACA;;AAEI;EACI;EACA;EACA;;AAKR;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGR;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGR;EACI;EACA;;AAGR;EACI;;AAEJ;EACI;;;AAOpB;EACI;EACA;EACA;EACA;;AACA;EACI;EACA","file":"style.css"} \ No newline at end of file diff --git a/www/css/style.scss b/www/css/style.scss index 23d8732..8ea57d8 100644 --- a/www/css/style.scss +++ b/www/css/style.scss @@ -3,3 +3,195 @@ padding: 0; box-sizing: border-box; } + +@font-face { + font-family: Sans-CN; + src: url("../fonts/sans/SourceHanSansSC-VF.otf.woff2"); +} + +@font-face { + font-family: Sans-HK; + src: url("../fonts/sans/SourceHanSansHC-VF.otf.woff2"); +} + +@font-face { + font-family: Sans-TW; + src: url("../fonts/sans/SourceHanSansTC-VF.otf.woff2"); +} + +@font-face { + font-family: Sans-JP; + src: url("../fonts/sans/SourceHanSans-VF.otf.woff2"); +} + +@font-face { + font-family: Sans-KR; + src: url("../fonts/sans/SourceHanSansK-VF.otf.woff2"); +} + +@font-face { + font-family: Serif-CN; + src: url("../fonts/serif/SourceHanSerifSC-VF.otf.woff2"); +} + +@font-face { + font-family: Serif-HK; + src: url("../fonts/serif/SourceHanSerifHC-VF.otf.woff2"); +} + +@font-face { + font-family: Serif-TW; + src: url("../fonts/serif/SourceHanSerifTC-VF.otf.woff2"); +} + +@font-face { + font-family: Serif-JP; + src: url("../fonts/serif/SourceHanSerif-VF.otf.woff2"); +} + +@font-face { + font-family: Serif-KR; + src: url("../fonts/serif/SourceHanSerifK-VF.otf.woff2"); +} + +.nav { + background-color: deepskyblue; + box-shadow: 0 0 8px gray; + .title { + margin-left: 16px; + margin-right: 16px; + color: white; + font-size: 24px; + line-height: 48px; + } +} + +.main { + .error-tip { + color: red; + font-size: 32px; + line-height: 96px; + text-align: center; + } + .loading-tip { + font-size: 32px; + line-height: 96px; + text-align: center; + } + .input { + padding: 8px; + display: block; + input { + width: 100%; + padding: 8px; + font-size: 16px; + resize: none; + } + } + .checkbox-line { + padding-left: 8px; + padding-right: 8px; + .checkbox { + .name { + margin-left: 6px; + margin-right: 20px; + font-size: 16px; + } + } + } + .search-result { + .item { + margin: 8px; + border-style: solid; + border-width: 1px; + border-color: gray; + .title { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + .code-point { + padding-left: 8px; + padding-right: 8px; + color: white; + background-color: black; + font-size: 16px; + font-weight: bold; + line-height: 32px; + } + .char { + margin-left: 8px; + margin-right: 8px; + font-size: 20px; + font-weight: bold; + } + .tag { + margin: 4px; + padding-left: 8px; + padding-right: 8px; + font-size: 14px; + line-height: 20px; + border-style: solid; + border-width: 1px; + border-color: gray; + border-radius: 10px; + } + } + .glyphs { + padding: 4px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + .glyph { + margin: 4px; + display: flex; + flex-direction: column; + align-items: center; + border-style: solid; + border-width: 1px; + border-color: gray; + .title { + width: 100%; + display: flex; + justify-content: space-between; + .language-flavor { + padding-left: 8px; + padding-right: 8px; + color: white; + background-color: gray; + font-size: 14px; + font-weight: bold; + line-height: 28px; + } + .glyph-name { + margin-left: 8px; + margin-right: 8px; + font-size: 14px; + } + } + .char { + padding-left: 16px; + padding-right: 16px; + } + } + .sans-background { + background-color: beige; + } + .serif-background { + background-color: linen; + } + } + } + } +} + +.footer { + padding-top: 8px; + padding-bottom: 12px; + display: flex; + justify-content: center; + .separate { + padding-left: 8px; + padding-right: 8px; + } +} diff --git a/www/index.html b/www/index.html index f3e1b8f..12c6c84 100644 --- a/www/index.html +++ b/www/index.html @@ -8,7 +8,76 @@ -
{{ message }}
+
+ +
+ + + + +
+ +
diff --git a/www/js/app.js b/www/js/app.js index d7d7d53..39e6b62 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -3,7 +3,64 @@ import {createApp} from './vue.esm-browser.prod.js' createApp({ data() { return { - message: 'Hello World!', + languageFlavors: [ + 'cn', + 'hk', + 'tw', + 'jp', + 'kr', + ], + mapping: null, + mappingLoadFailed: false, + input: '', + displaySans: true, + displaySerif: true, + fontWeight: 400, + fontSize: 100, } - } + }, + computed: { + searchQuery() { + let query = [] + for (let c of this.input) { + let codePoint = c.codePointAt(0) + if (codePoint in this.mapping && !query.includes(codePoint)) { + query.push(codePoint) + } + } + return query + } + }, + async created() { + try { + let response = await fetch('data/mapping.json') + if (response.ok) { + this.mapping = await response.json() + } else { + this.mappingLoadFailed = true + } + } catch (e) { + this.mappingLoadFailed = true + } + }, + methods: { + getGlyphColor(glyphName) { + if (glyphName.endsWith('-CN')) { + return 'orange'; + } + if (glyphName.endsWith('-HK')) { + return 'dodgerblue' + } + if (glyphName.endsWith('-TW')) { + return 'green' + } + if (glyphName.endsWith('-JP')) { + return 'red' + } + if (glyphName.endsWith('-KR')) { + return 'violet' + } + return 'black' + }, + }, }).mount('#app')