136 lines
4.8 KiB
Twig
136 lines
4.8 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block title %}漢字索引{% endblock %}
|
|
|
|
{% block body %}
|
|
<style>
|
|
.taiwan > .kanji-card { background-color: hsl(300, 100%, 80%); color: black; }
|
|
|
|
.zhcn-n1 > .kanji-card { background-color: hsl(220, 100%, 90%); color: black; }
|
|
.zhcn-n2 > .kanji-card { background-color: hsl(220, 100%, 80%); color: black; }
|
|
.zhcn-n3 > .kanji-card { background-color: hsl(220, 100%, 60%); color: black; }
|
|
|
|
.hsk-n1 > .kanji-card { background-color: hsl(180, 100%, 90%); color: black; }
|
|
.hsk-n2 > .kanji-card { background-color: hsl(180, 100%, 85%); color: black; }
|
|
.hsk-n3 > .kanji-card { background-color: hsl(180, 100%, 80%); color: black; }
|
|
.hsk-n4 > .kanji-card { background-color: hsl(180, 100%, 75%); color: black; }
|
|
.hsk-n5 > .kanji-card { background-color: hsl(180, 100%, 70%); color: black; }
|
|
.hsk-n6 > .kanji-card { background-color: hsl(180, 100%, 65%); color: black; }
|
|
.hsk-n7_9 > .kanji-card { background-color: hsl(180, 100%, 40%); color: black; }
|
|
|
|
.kanken-n10 > .kanji-card { background-color: hsl( 0, 100%, 90%); color: black; }
|
|
.kanken-n9 > .kanji-card { background-color: hsl( 0, 100%, 80%); color: black; }
|
|
.kanken-n8 > .kanji-card { background-color: hsl( 0, 100%, 70%); color: black; }
|
|
.kanken-n7 > .kanji-card { background-color: hsl( 0, 100%, 60%); color: black; }
|
|
.kanken-n6 > .kanji-card { background-color: hsl( 0, 100%, 50%); color: black; }
|
|
.kanken-n5 > .kanji-card { background-color: hsl( 0, 100%, 40%); color: black; }
|
|
.kanken-n4 > .kanji-card { background-color: hsl( 0, 100%, 30%); color: white; }
|
|
.kanken-n3 > .kanji-card { background-color: hsl( 0, 100%, 20%); color: white; }
|
|
.kanken-np2 > .kanji-card { background-color: hsl( 85, 100%, 70%); color: black; }
|
|
.kanken-n2 > .kanji-card { background-color: hsl( 80, 100%, 50%); color: black; }
|
|
.kanken-np1 > .kanji-card { background-color: hsl( 60, 100%, 90%); color: black; }
|
|
.kanken-np1n1 > .kanji-card { background-color: hsl( 55, 100%, 70%); color: black; }
|
|
.kanken-n1 > .kanji-card { background-color: hsl( 50, 100%, 50%); color: black; }
|
|
|
|
.bushu > .kanji-card { background-color: hsl( 45, 100%, 0%); color: white; }
|
|
.kyuujitai > .kanji-card { background-color: hsl( 45, 100%, 30%); color: white; }
|
|
.kyoyou > .kanji-card { background-color: hsl( 45, 0%, 50%); color: white; }
|
|
|
|
.unicode { border: 3px solid green !important; }
|
|
.sn { border-bottom: 3px solid var(--bs-danger) !important; }
|
|
.sln { border-bottom: 3px solid var(--bs-warning) !important; }
|
|
.ebook { border-top: 3px solid deeppink !important; }
|
|
.jimaku { border-top: 3px solid lightgray !important; }
|
|
|
|
.none, .ignored { opacity: 0.15; }
|
|
</style>
|
|
|
|
<div>
|
|
<div class="d-flex align-items-center p-2 ps-3 pe-3 border-bottom sticky-top bg-body">
|
|
<h1 class="text-left p-0 mb-0 flex-grow-1">{{ block('title') }}</h1>
|
|
<form
|
|
class="btn-group"
|
|
|
|
hx-target="#baseModalContent"
|
|
hx-swap="innerHTML"
|
|
hx-get="{{ path('app_kanji_view') }}"
|
|
>
|
|
<input
|
|
type="text" name="char" placeholder="字 / 5B57"
|
|
class="form-control w-auto"
|
|
>
|
|
<butto
|
|
type="submit"
|
|
class="btn btn-secondary"
|
|
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#baseModal"
|
|
>
|
|
検索
|
|
</button>
|
|
</form>
|
|
</div>
|
|
<div
|
|
class="d-flex flex-wrap p-4"
|
|
|
|
hx-target="#baseModalContent"
|
|
hx-swap="innerHTML"
|
|
>
|
|
{% for char in characters %}
|
|
<div style="width: calc(100% / 16);">
|
|
<div
|
|
class="
|
|
border text-center rounded
|
|
{{ char.lists|length == 0
|
|
? 'none'
|
|
: char.lists|keys|join(' ')
|
|
}}
|
|
"
|
|
style="
|
|
margin: 2px;
|
|
overflow: hidden;
|
|
"
|
|
title="{{ char.lists|keys|join("\n") }}"
|
|
>
|
|
<div
|
|
class="kanji-card border-bottom fs-1 pb-1"
|
|
|
|
hx-get="{{ path('app_kanji_view', { char: char.codepoint }) }}"
|
|
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#baseModal"
|
|
>
|
|
{#{% if char.jiten_href != null %}
|
|
<a
|
|
target="_blank"
|
|
href="{{- char.jiten_href -}}"
|
|
class="border-bottom"
|
|
>
|
|
{{- char.str -}}
|
|
</a>
|
|
{% else %}#}
|
|
{{- char.str -}}
|
|
{#{% endif %}#}
|
|
|
|
</div>
|
|
<div style="padding-bottom: 2px;">
|
|
{% if char.lists.unicode is not defined %}
|
|
<a
|
|
target="_blank"
|
|
href="{{ path('app_kanji_register', {
|
|
codepoint: char.codepoint
|
|
}) }}"
|
|
>
|
|
{{ char.codepoint }}
|
|
</a>
|
|
{% else %}
|
|
{{ char.codepoint }}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|