diff --git a/src/index.html b/src/index.html
index e39cbd9450fb194c28fa9a2cba1524972ab1067a..074d5beed6c8262ad1ac0803ac0b7ade9150255d 100644
--- a/src/index.html
+++ b/src/index.html
@@ -55,8 +55,7 @@
padding: 0px 20px 2px 20px;
display: inline-block;
}
- h2 {
- font-size: 18px;
+ h2, h3 {
margin: 10px 0px;
}
p {
@@ -65,9 +64,9 @@
input, textarea {
background: #241B2B;
color: #FFEBD8;
- border: #FFEBD8 4px solid;
+ border: #FFEBD8 3px solid;
border-radius: 3px;
- font-size: 110%;
+ font-size: 130%;
}
input:focus, textarea:focus {
border-color: #62c1a6;
@@ -104,18 +103,16 @@
overflow-y: hidden;
display: grid;
grid-template-columns: repeat(12, 50px);
- grid-template-rows: 50px;
+ grid-template-rows: repeat(6, 60px);
grid-gap: 4px;
padding-left: 4px;
padding-bottom: 4px;
}
.katakana > div {
- line-height: 2em;
- vertical-align: middle;
text-align: center;
- line-height: 50px;
+ line-height: 60px;
width: 50px;
- height: 50px;
+ height: 60px;
}
.katakana > div > button {
width: 100%;
@@ -123,13 +120,16 @@
border: none;
margin: -4px;
border-radius: 3px;
- background: transparent;
+ background: #0E0E0F;
color: #FFEBD8;
- box-shadow: 0 0 0 4px #FFEBD8;
}
.katakana > div > button > span {
display: block;
}
+ .katakana > div > button > span:first-child {
+ font-size: 170%;
+ line-height: 115%;
+ }
.container-background {
background: #241B2B;
margin: 10px -10px;
@@ -138,10 +138,13 @@
.container {
margin: 10px 0px;
}
- .container-background > *:first-child, .container > *:first-child {
+ .container-distance {
+ margin: 30px 0px;
+ }
+ .container-background > *:first-child, .container > *:first-child, .container-distance > *:first-child {
margin-top: 0px;
}
- .container-background > *:last-child, .container > *:last-child {
+ .container-background > *:last-child, .container > *:last-child, .container-distance > *:last-child {
margin-bottom: 0px;
}
.download-button-container {
@@ -172,6 +175,7 @@
width: calc(100% - 20px);
background: #62c1a6;
font-size: 18px;
+ color: #0E0E0F;
}
#preview {
max-width: 1000px;
@@ -212,15 +216,17 @@
}
#selector_animal label {
display: block;
+ width: 100%;
+ height: 100%;
}
#selector_color_foreground input:checked + label, #selector_color_background input:checked + label, #selector_animal input:checked + label {
- border: #FFEBD8 4px solid;
+ border: #FFEBD8 3px solid;
border-radius: 3px;
margin: -5px;
}
#selector_animal {
- grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
- grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
+ grid-template-columns: repeat(auto-fit, minmax(100px, 250px));
+ grid-template-rows: repeat(auto-fit, minmax(100px, 250px));
}
#selector_animal > div {
width: calc(100% - 10px);
@@ -229,9 +235,15 @@
#selector_animal img {
height: auto;
width: 100%;
+ height: 100%;
background: #1F1C2A;
margin-bottom: -4px; /* Very hacky, but is needed for some reason */
}
+ #text-table {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, 700px);
+ grid-template-rows: auto;
+ }
@media screen and (prefers-color-scheme: light) {
body {
color: #0E0E0F;
@@ -247,7 +259,8 @@
}
.katakana > div > button {
color: #0E0E0F;
- box-shadow: 0 0 0 4px #0E0E0F;
+ background: #FFEBD8;
+ box-shadow: 0px 0px 0px 1px #a7a7a7;
}
#selector_color_foreground input:checked + label, #selector_color_background input:checked + label, #selector_animal input:checked + label {
border-color: #0E0E0F;
@@ -458,14 +471,14 @@
<div id="preview_big"></div>
<div id="preview_small"></div>
<div class="download-button-container">
- <h2>save small logo</h2>
+ <h3>save small logo</h3>
<div>
<button id="download_small_svg">svg</button>
<button id="download_small_png">png</button>
</div>
</div>
<div class="download-button-container">
- <h2>save big logo</h2>
+ <h3>save big logo</h3>
<div>
<button id="download_big_svg">SVG</button>
<button id="download_big_png">PNG</button>
@@ -474,259 +487,267 @@
</div>
</div>
<div class="container-background">
- <h2>alt text</h2>
+ <h3>alt text</h3>
<p id="alt_text"></p>
</div>
- <div id="selector_color_foreground" class="container" alt="select foreground color of the logo">
- <div class="color_selector_simple">
- <input type="radio" id="foreground_red" name="foreground_color" value="#EA5177"/>
- <label for="foreground_red" style="background-color: #EA5177;" alt="red"></label>
- </div>
- <div class="color_selector_simple">
- <input type="radio" id="foreground_yellow" name="foreground_color" value="#FDBE4B"/>
- <label for="foreground_yellow" style="background-color: #FDBE4B;" alt="yellow"></label>
- </div>
- <div class="color_selector_simple">
- <input type="radio" id="foreground_green" name="foreground_color" value="#62c1a6" checked="true"/>
- <label for="foreground_green" style="background-color: #62c1a6;" alt="green"></label>
- </div>
- <div class="color_selector_simple">
- <input type="radio" id="foreground_blue" name="foreground_color" value="#5253ff"/>
- <label for="foreground_blue" style="background-color: #5253ff;" alt="blue"></label>
- </div>
- <div class="color_selector_simple">
- <input type="radio" id="foreground_purple" name="foreground_color" value="#A74DB7"/>
- <label for="foreground_purple" style="background-color: #A74DB7;" alt="pink"></label>
- </div>
- </div>
- <div id="selector_color_background" class="container" alt="select background color of the logo">
- <div class="color_selector_gradient">
- <input type="radio" id="background_light" name="background_color" value='{"simple": "#1f1c2a", "bottom": "#020613", "top": "#332a39"}' checked="true"/>
- <label for="background_light" style="background: linear-gradient(90deg, #020613 0%, #332a39 100%);" alt="pink"></label>
- </div>
- <div class="color_selector_gradient">
- <input type="radio" id="background_dark" name="background_color" value='{"simple": "#0b1a26", "bottom": "#0d0313", "top": "#0b1a26"}'/>
- <label for="background_dark" style="background: linear-gradient(90deg, #0d0313 0%, #0b1a26 100%);" alt="green"></label>
- </div>
- </div>
- <div id="selector_animal" class="container" alt="select animal on the logo">
- <div>
- <input type="radio" id="animal_bunny" name="animal" value="bunny" checked="true"/>
- <label for="animal_bunny">
- <img alt="bunny" src="img/favicon.svg"/>
- </label>
- </div>
- <div>
- <input type="radio" id="animal_maneki-neko" name="animal" value="maneki-neko"/>
- <label for="animal_maneki-neko">
- <img alt="maneki-neko Winkekatze" src="img/favicon.svg"/>
- </label>
- </div>
- <div>
- <input type="radio" id="animal_creature" name="animal" value="creature"/>
- <label for="animal_creature">
- <img alt="creature" src="img/favicon.svg"/>
- </label>
- </div>
- <div>
- <input type="radio" id="animal_haj" name="animal" value="haj"/>
- <label for="animal_haj">
- <img alt="haj" src="img/favicon.svg"/>
- </label>
- </div>
- <div>
- <input type="radio" id="animal_otter" name="animal" value="otter"/>
- <label for="animal_otter">
- <img alt="otter" src="img/favicon.svg"/>
- </label>
+ <div class="container-distance">
+ <h2>Customize visuals</h2>
+ <div id="selector_color_foreground" class="container" alt="select foreground color of the logo">
+ <div class="color_selector_simple">
+ <input type="radio" id="foreground_red" name="foreground_color" value="#EA5177"/>
+ <label for="foreground_red" style="background-color: #EA5177;" alt="red"></label>
+ </div>
+ <div class="color_selector_simple">
+ <input type="radio" id="foreground_yellow" name="foreground_color" value="#FDBE4B"/>
+ <label for="foreground_yellow" style="background-color: #FDBE4B;" alt="yellow"></label>
+ </div>
+ <div class="color_selector_simple">
+ <input type="radio" id="foreground_green" name="foreground_color" value="#62c1a6" checked="true"/>
+ <label for="foreground_green" style="background-color: #62c1a6;" alt="green"></label>
+ </div>
+ <div class="color_selector_simple">
+ <input type="radio" id="foreground_blue" name="foreground_color" value="#5253ff"/>
+ <label for="foreground_blue" style="background-color: #5253ff;" alt="blue"></label>
+ </div>
+ <div class="color_selector_simple">
+ <input type="radio" id="foreground_purple" name="foreground_color" value="#A74DB7"/>
+ <label for="foreground_purple" style="background-color: #A74DB7;" alt="pink"></label>
+ </div>
</div>
- </div>
- <div class="container">
- <div>
- <div class="input-with-label">
- <label for="headline_text"><h2>headline</h2></label>
- <input type="text" id="headline_text" value="DiVOC"/>
+ <div id="selector_color_background" class="container" alt="select background color of the logo">
+ <div class="color_selector_gradient">
+ <input type="radio" id="background_light" name="background_color" value='{"simple": "#1f1c2a", "bottom": "#020613", "top": "#332a39"}' checked="true"/>
+ <label for="background_light" style="background: linear-gradient(90deg, #020613 0%, #332a39 100%);" alt="pink"></label>
+ </div>
+ <div class="color_selector_gradient">
+ <input type="radio" id="background_dark" name="background_color" value='{"simple": "#0b1a26", "bottom": "#0d0313", "top": "#0b1a26"}'/>
+ <label for="background_dark" style="background: linear-gradient(90deg, #0d0313 0%, #0b1a26 100%);" alt="green"></label>
</div>
</div>
- <div class="container-background katakana-wrapper">
- <details open>
- <summary>
- katakana keyboard
- </summary>
- <div class="katakana" id="headline_katakana" for="headline_text">
- <div>n</div>
- <div>w</div>
- <div>r</div>
- <div>y</div>
- <div>m</div>
- <div>h</div>
- <div>n</div>
- <div>t</div>
- <div>s</div>
- <div>k</div>
- <div></div>
- <div></div>
-
- <div><button value="ン"><span>ン</span><span>n</span></button></div>
- <div><button value="ワ"><span>ワ</span><span>wa</span></button></div>
- <div><button value="ラ"><span>ラ</span><span>ra</span></button></div>
- <div><button value="ヤ"><span>ヤ</span><span>ya</span></button></div>
- <div><button value="マ"><span>マ</span><span>ma</span></button></div>
- <div><button value="ハ"><span>ハ</span><span>ha</span></button></div>
- <div><button value="ナ"><span>ナ</span><span>na</span></button></div>
- <div><button value="タ"><span>タ</span><span>ta</span></button></div>
- <div><button value="サ"><span>サ</span><span>sa</span></button></div>
- <div><button value="カ"><span>カ</span><span>ka</span></button></div>
- <div><button value="ア"><span>ア</span><span>a</span></button></div>
- <div>a</div>
-
- <div></div>
- <div></div>
- <div><button value="リ"><span>リ</span><span>ri</span></button></div>
- <div></div>
- <div><button value="ミ"><span>ミ</span><span>mi</span></button></div>
- <div><button value="ヒ"><span>ヒ</span><span>hi</span></button></div>
- <div><button value="ニ"><span>ニ</span><span>ni</span></button></div>
- <div><button value="チ"><span>チ</span><span>chi</span></button></div>
- <div><button value="シ"><span>シ</span><span>shi</span></button></div>
- <div><button value="キ"><span>キ</span><span>ki</span></button></div>
- <div><button value="イ"><span>イ</span><span>i</span></button></div>
- <div>i</div>
-
- <div></div>
- <div></div>
- <div><button value="ル"><span>ル</span><span>ru</span></button></div>
- <div><button value="ユ"><span>ユ</span><span>yu</span></button></div>
- <div><button value="ム"><span>ム</span><span>mu</span></button></div>
- <div><button value="フ"><span>フ</span><span>fu</span></button></div>
- <div><button value="ヌ"><span>ヌ</span><span>nu</span></button></div>
- <div><button value="ツ"><span>ツ</span><span>tsu</span></button></div>
- <div><button value="ス"><span>ス</span><span>su</span></button></div>
- <div><button value="ク"><span>ク</span><span>ku</span></button></div>
- <div><button value="ウ"><span>ウ</span><span>u</span></button></div>
- <div>u</div>
-
- <div></div>
- <div></div>
- <div><button value="レ"><span>レ</span><span>re</span></button></div>
- <div></div>
- <div><button value="メ"><span>メ</span><span>me</span></button></div>
- <div><button value="ヘ"><span>ヘ</span><span>he</span></button></div>
- <div><button value="ネ"><span>ネ</span><span>ne</span></button></div>
- <div><button value="テ"><span>テ</span><span>te</span></button></div>
- <div><button value="セ"><span>セ</span><span>se</span></button></div>
- <div><button value="ケ"><span>ケ</span><span>ke</span></button></div>
- <div><button value="エ"><span>エ</span><span>e</span></button></div>
- <div>e</div>
-
- <div></div>
- <div><button value="ヲ"><span>ヲ</span><span>wo</span></button></div>
- <div><button value="ロ"><span>ロ</span><span>ro</span></button></div>
- <div><button value="ヨ"><span>ヨ</span><span>yo</span></button></div>
- <div><button value="モ"><span>モ</span><span>mo</span></button></div>
- <div><button value="ホ"><span>ホ</span><span>ho</span></button></div>
- <div><button value="ノ"><span>ノ</span><span>no</span></button></div>
- <div><button value="ト"><span>ト</span><span>to</span></button></div>
- <div><button value="ソ"><span>ソ</span><span>so</span></button></div>
- <div><button value="コ"><span>コ</span><span>ko</span></button></div>
- <div><button value="オ"><span>オ</span><span>o</span></button></div>
- <div>o</div>
- </div>
- </details>
+ <div id="selector_animal" class="container" alt="select animal on the logo">
+ <div>
+ <input type="radio" id="animal_bunny" name="animal" value="bunny" checked="true"/>
+ <label for="animal_bunny">
+ <img alt="bunny" src="img/favicon.svg"/>
+ </label>
+ </div>
+ <div>
+ <input type="radio" id="animal_maneki-neko" name="animal" value="maneki-neko"/>
+ <label for="animal_maneki-neko">
+ <img alt="maneki-neko Winkekatze" src="img/favicon.svg"/>
+ </label>
+ </div>
+ <div>
+ <input type="radio" id="animal_creature" name="animal" value="creature"/>
+ <label for="animal_creature">
+ <img alt="creature" src="img/favicon.svg"/>
+ </label>
+ </div>
+ <div>
+ <input type="radio" id="animal_haj" name="animal" value="haj"/>
+ <label for="animal_haj">
+ <img alt="haj" src="img/favicon.svg"/>
+ </label>
+ </div>
+ <div>
+ <input type="radio" id="animal_otter" name="animal" value="otter"/>
+ <label for="animal_otter">
+ <img alt="otter" src="img/favicon.svg"/>
+ </label>
+ </div>
</div>
</div>
- <div class="container">
- <div>
- <div class="input-with-label">
- <label for="sub_headline_text"><h2>subtitle</h2></label>
- <textarea id="sub_headline_text">ブリッジ・バブルス</textarea>
+ <div class="container-distance">
+ <h2>Customize text</h2>
+ <div id="text-table">
+ <div class="container">
+ <div>
+ <div class="input-with-label">
+ <label for="headline_text"><h3>headline</h3></label>
+ <input type="text" id="headline_text" value="DiVOC"/>
+ </div>
+ </div>
+ <div class="container-background katakana-wrapper">
+ <details>
+ <summary>
+ katakana keyboard
+ </summary>
+ <div class="katakana" id="headline_katakana" for="headline_text">
+ <div>n</div>
+ <div>w</div>
+ <div>r</div>
+ <div>y</div>
+ <div>m</div>
+ <div>h</div>
+ <div>n</div>
+ <div>t</div>
+ <div>s</div>
+ <div>k</div>
+ <div></div>
+ <div></div>
+
+ <div><button value="ン"><span>ン</span><span>n</span></button></div>
+ <div><button value="ワ"><span>ワ</span><span>wa</span></button></div>
+ <div><button value="ラ"><span>ラ</span><span>ra</span></button></div>
+ <div><button value="ヤ"><span>ヤ</span><span>ya</span></button></div>
+ <div><button value="マ"><span>マ</span><span>ma</span></button></div>
+ <div><button value="ハ"><span>ハ</span><span>ha</span></button></div>
+ <div><button value="ナ"><span>ナ</span><span>na</span></button></div>
+ <div><button value="タ"><span>タ</span><span>ta</span></button></div>
+ <div><button value="サ"><span>サ</span><span>sa</span></button></div>
+ <div><button value="カ"><span>カ</span><span>ka</span></button></div>
+ <div><button value="ア"><span>ア</span><span>a</span></button></div>
+ <div>a</div>
+
+ <div></div>
+ <div></div>
+ <div><button value="リ"><span>リ</span><span>ri</span></button></div>
+ <div></div>
+ <div><button value="ミ"><span>ミ</span><span>mi</span></button></div>
+ <div><button value="ヒ"><span>ヒ</span><span>hi</span></button></div>
+ <div><button value="ニ"><span>ニ</span><span>ni</span></button></div>
+ <div><button value="チ"><span>チ</span><span>chi</span></button></div>
+ <div><button value="シ"><span>シ</span><span>shi</span></button></div>
+ <div><button value="キ"><span>キ</span><span>ki</span></button></div>
+ <div><button value="イ"><span>イ</span><span>i</span></button></div>
+ <div>i</div>
+
+ <div></div>
+ <div></div>
+ <div><button value="ル"><span>ル</span><span>ru</span></button></div>
+ <div><button value="ユ"><span>ユ</span><span>yu</span></button></div>
+ <div><button value="ム"><span>ム</span><span>mu</span></button></div>
+ <div><button value="フ"><span>フ</span><span>fu</span></button></div>
+ <div><button value="ヌ"><span>ヌ</span><span>nu</span></button></div>
+ <div><button value="ツ"><span>ツ</span><span>tsu</span></button></div>
+ <div><button value="ス"><span>ス</span><span>su</span></button></div>
+ <div><button value="ク"><span>ク</span><span>ku</span></button></div>
+ <div><button value="ウ"><span>ウ</span><span>u</span></button></div>
+ <div>u</div>
+
+ <div></div>
+ <div></div>
+ <div><button value="レ"><span>レ</span><span>re</span></button></div>
+ <div></div>
+ <div><button value="メ"><span>メ</span><span>me</span></button></div>
+ <div><button value="ヘ"><span>ヘ</span><span>he</span></button></div>
+ <div><button value="ネ"><span>ネ</span><span>ne</span></button></div>
+ <div><button value="テ"><span>テ</span><span>te</span></button></div>
+ <div><button value="セ"><span>セ</span><span>se</span></button></div>
+ <div><button value="ケ"><span>ケ</span><span>ke</span></button></div>
+ <div><button value="エ"><span>エ</span><span>e</span></button></div>
+ <div>e</div>
+
+ <div></div>
+ <div><button value="ヲ"><span>ヲ</span><span>wo</span></button></div>
+ <div><button value="ロ"><span>ロ</span><span>ro</span></button></div>
+ <div><button value="ヨ"><span>ヨ</span><span>yo</span></button></div>
+ <div><button value="モ"><span>モ</span><span>mo</span></button></div>
+ <div><button value="ホ"><span>ホ</span><span>ho</span></button></div>
+ <div><button value="ノ"><span>ノ</span><span>no</span></button></div>
+ <div><button value="ト"><span>ト</span><span>to</span></button></div>
+ <div><button value="ソ"><span>ソ</span><span>so</span></button></div>
+ <div><button value="コ"><span>コ</span><span>ko</span></button></div>
+ <div><button value="オ"><span>オ</span><span>o</span></button></div>
+ <div>o</div>
+ </div>
+ </details>
+ </div>
</div>
- </div>
- <div class="container-background katakana-wrapper">
- <details open>
- <summary>
- katakana keyboard
- </summary>
- <div class="katakana" id="sub_headline_katakana" for="sub_headline_text">
- <div>n</div>
- <div>w</div>
- <div>r</div>
- <div>y</div>
- <div>m</div>
- <div>h</div>
- <div>n</div>
- <div>t</div>
- <div>s</div>
- <div>k</div>
- <div></div>
- <div></div>
-
- <div><button value="ン"><span>ン</span><span>n</span></button></div>
- <div><button value="ワ"><span>ワ</span><span>wa</span></button></div>
- <div><button value="ラ"><span>ラ</span><span>ra</span></button></div>
- <div><button value="ヤ"><span>ヤ</span><span>ya</span></button></div>
- <div><button value="マ"><span>マ</span><span>ma</span></button></div>
- <div><button value="ハ"><span>ハ</span><span>ha</span></button></div>
- <div><button value="ナ"><span>ナ</span><span>na</span></button></div>
- <div><button value="タ"><span>タ</span><span>ta</span></button></div>
- <div><button value="サ"><span>サ</span><span>sa</span></button></div>
- <div><button value="カ"><span>カ</span><span>ka</span></button></div>
- <div><button value="ア"><span>ア</span><span>a</span></button></div>
- <div>a</div>
-
- <div></div>
- <div></div>
- <div><button value="リ"><span>リ</span><span>ri</span></button></div>
- <div></div>
- <div><button value="ミ"><span>ミ</span><span>mi</span></button></div>
- <div><button value="ヒ"><span>ヒ</span><span>hi</span></button></div>
- <div><button value="ニ"><span>ニ</span><span>ni</span></button></div>
- <div><button value="チ"><span>チ</span><span>chi</span></button></div>
- <div><button value="シ"><span>シ</span><span>shi</span></button></div>
- <div><button value="キ"><span>キ</span><span>ki</span></button></div>
- <div><button value="イ"><span>イ</span><span>i</span></button></div>
- <div>i</div>
-
- <div></div>
- <div></div>
- <div><button value="ル"><span>ル</span><span>ru</span></button></div>
- <div><button value="ユ"><span>ユ</span><span>yu</span></button></div>
- <div><button value="ム"><span>ム</span><span>mu</span></button></div>
- <div><button value="フ"><span>フ</span><span>fu</span></button></div>
- <div><button value="ヌ"><span>ヌ</span><span>nu</span></button></div>
- <div><button value="ツ"><span>ツ</span><span>tsu</span></button></div>
- <div><button value="ス"><span>ス</span><span>su</span></button></div>
- <div><button value="ク"><span>ク</span><span>ku</span></button></div>
- <div><button value="ウ"><span>ウ</span><span>u</span></button></div>
- <div>u</div>
-
- <div></div>
- <div></div>
- <div><button value="レ"><span>レ</span><span>re</span></button></div>
- <div></div>
- <div><button value="メ"><span>メ</span><span>me</span></button></div>
- <div><button value="ヘ"><span>ヘ</span><span>he</span></button></div>
- <div><button value="ネ"><span>ネ</span><span>ne</span></button></div>
- <div><button value="テ"><span>テ</span><span>te</span></button></div>
- <div><button value="セ"><span>セ</span><span>se</span></button></div>
- <div><button value="ケ"><span>ケ</span><span>ke</span></button></div>
- <div><button value="エ"><span>エ</span><span>e</span></button></div>
- <div>e</div>
-
- <div></div>
- <div><button value="ヲ"><span>ヲ</span><span>wo</span></button></div>
- <div><button value="ロ"><span>ロ</span><span>ro</span></button></div>
- <div><button value="ヨ"><span>ヨ</span><span>yo</span></button></div>
- <div><button value="モ"><span>モ</span><span>mo</span></button></div>
- <div><button value="ホ"><span>ホ</span><span>ho</span></button></div>
- <div><button value="ノ"><span>ノ</span><span>no</span></button></div>
- <div><button value="ト"><span>ト</span><span>to</span></button></div>
- <div><button value="ソ"><span>ソ</span><span>so</span></button></div>
- <div><button value="コ"><span>コ</span><span>ko</span></button></div>
- <div><button value="オ"><span>オ</span><span>o</span></button></div>
- <div>o</div>
+ <div class="container">
+ <div>
+ <div class="input-with-label">
+ <label for="sub_headline_text"><h3>subtitle</h3></label>
+ <textarea id="sub_headline_text">ブリッジ・バブルス</textarea>
+ </div>
</div>
- </details>
+ <div class="container-background katakana-wrapper">
+ <details open>
+ <summary>
+ katakana keyboard
+ </summary>
+ <div class="katakana" id="sub_headline_katakana" for="sub_headline_text">
+ <div>n</div>
+ <div>w</div>
+ <div>r</div>
+ <div>y</div>
+ <div>m</div>
+ <div>h</div>
+ <div>n</div>
+ <div>t</div>
+ <div>s</div>
+ <div>k</div>
+ <div></div>
+ <div></div>
+
+ <div><button value="ン"><span>ン</span><span>n</span></button></div>
+ <div><button value="ワ"><span>ワ</span><span>wa</span></button></div>
+ <div><button value="ラ"><span>ラ</span><span>ra</span></button></div>
+ <div><button value="ヤ"><span>ヤ</span><span>ya</span></button></div>
+ <div><button value="マ"><span>マ</span><span>ma</span></button></div>
+ <div><button value="ハ"><span>ハ</span><span>ha</span></button></div>
+ <div><button value="ナ"><span>ナ</span><span>na</span></button></div>
+ <div><button value="タ"><span>タ</span><span>ta</span></button></div>
+ <div><button value="サ"><span>サ</span><span>sa</span></button></div>
+ <div><button value="カ"><span>カ</span><span>ka</span></button></div>
+ <div><button value="ア"><span>ア</span><span>a</span></button></div>
+ <div>a</div>
+
+ <div></div>
+ <div></div>
+ <div><button value="リ"><span>リ</span><span>ri</span></button></div>
+ <div></div>
+ <div><button value="ミ"><span>ミ</span><span>mi</span></button></div>
+ <div><button value="ヒ"><span>ヒ</span><span>hi</span></button></div>
+ <div><button value="ニ"><span>ニ</span><span>ni</span></button></div>
+ <div><button value="チ"><span>チ</span><span>chi</span></button></div>
+ <div><button value="シ"><span>シ</span><span>shi</span></button></div>
+ <div><button value="キ"><span>キ</span><span>ki</span></button></div>
+ <div><button value="イ"><span>イ</span><span>i</span></button></div>
+ <div>i</div>
+
+ <div></div>
+ <div></div>
+ <div><button value="ル"><span>ル</span><span>ru</span></button></div>
+ <div><button value="ユ"><span>ユ</span><span>yu</span></button></div>
+ <div><button value="ム"><span>ム</span><span>mu</span></button></div>
+ <div><button value="フ"><span>フ</span><span>fu</span></button></div>
+ <div><button value="ヌ"><span>ヌ</span><span>nu</span></button></div>
+ <div><button value="ツ"><span>ツ</span><span>tsu</span></button></div>
+ <div><button value="ス"><span>ス</span><span>su</span></button></div>
+ <div><button value="ク"><span>ク</span><span>ku</span></button></div>
+ <div><button value="ウ"><span>ウ</span><span>u</span></button></div>
+ <div>u</div>
+
+ <div></div>
+ <div></div>
+ <div><button value="レ"><span>レ</span><span>re</span></button></div>
+ <div></div>
+ <div><button value="メ"><span>メ</span><span>me</span></button></div>
+ <div><button value="ヘ"><span>ヘ</span><span>he</span></button></div>
+ <div><button value="ネ"><span>ネ</span><span>ne</span></button></div>
+ <div><button value="テ"><span>テ</span><span>te</span></button></div>
+ <div><button value="セ"><span>セ</span><span>se</span></button></div>
+ <div><button value="ケ"><span>ケ</span><span>ke</span></button></div>
+ <div><button value="エ"><span>エ</span><span>e</span></button></div>
+ <div>e</div>
+
+ <div></div>
+ <div><button value="ヲ"><span>ヲ</span><span>wo</span></button></div>
+ <div><button value="ロ"><span>ロ</span><span>ro</span></button></div>
+ <div><button value="ヨ"><span>ヨ</span><span>yo</span></button></div>
+ <div><button value="モ"><span>モ</span><span>mo</span></button></div>
+ <div><button value="ホ"><span>ホ</span><span>ho</span></button></div>
+ <div><button value="ノ"><span>ノ</span><span>no</span></button></div>
+ <div><button value="ト"><span>ト</span><span>to</span></button></div>
+ <div><button value="ソ"><span>ソ</span><span>so</span></button></div>
+ <div><button value="コ"><span>コ</span><span>ko</span></button></div>
+ <div><button value="オ"><span>オ</span><span>o</span></button></div>
+ <div>o</div>
+ </div>
+ </details>
+ </div>
+ </div>
</div>
</div>
</main>