diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 97dc20a0ace484808958a9d974644394935331df..474ce1e9c5a365e68b75611747f31c83ba1bf2a3 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -2,6 +2,6 @@ stages:
- build
nix-build:
- stage: build
- image: nixos:20.03
+ stage: build
+ tags: [nix]
script: nix-build
diff --git a/README.md b/README.md
index 59fc8ffbd2f6f3a1ee63c89b45305b0b652cc52e..6532f2073a24b7293d745defedf170519062e675 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,18 @@
# Divoc BB3 logo generator
This generator is meant to provide an easy way to generator BB3 style logos/user pictures. If one needs something more complex, both logo templates in src are nicely editable in Inkscape.
## TODO
-- [ ] Modify Genos font, so that the i looks right?
-- [ ] Apply official stying
-- [ ] Add more animals
-- [ ] Add more accent / background colors
+- [ ] Modify fonts
+ - Merge fonts, latin from Genos, JP and Cyrillic from Noto Sans
+ - Replace `i` from Genos with custom `i`
+ - Genos bold only, Noto Sans Black only, possibly all merged to regular?
+- [ ] Finalize animals
+- [ ] Finalize accent / background colors
- [ ] Where to host?
+- [ ] Better alt text
+- [ ] Replace place holder images
+- [ ] Add font controls: size and letter spacing
+- [ ] Add customizing instructions
+- [ ] Add alt text to svgs
## Build from source
`$ nix --extra-experimental-features flakes build`
### legacy
diff --git a/flake.nix b/flake.nix
index 5fb07e822aab033cc64b740549762620cd70bda6..4750b721b4c196c522920216626ff4fa23a11b42 100644
--- a/flake.nix
+++ b/flake.nix
@@ -26,14 +26,15 @@
"$(base64 -w0 ${svg_templates}/logo_small_template.svg)"
'';
installPhase = ''
- mkdir -p $out
+ mkdir -p $out $out/img $out/font
cp index.html $out/index.html
- cp ${favicon}/favicon.svg ${favicon}/favicon.png $out/
cp ${google_fonts}/ofl/notosansjp/NotoSansJP-Black.otf $out
# bundle the Genos-Bold font, since opentype.js can't work with the
# variable-width version that's included in google fonts
cp ${./Genos-Bold.ttf} $out/Genos-Bold.ttf
cp ${opentype_js} $out/opentype.min.js
+ cp ${favicon}/favicon.svg ${favicon}/favicon.png $out/img
+ cp ${google_fonts}/ufl/ubuntumono/UbuntuMono-Regular.ttf ${google_fonts}/ufl/ubuntu/Ubuntu-Regular.ttf ${google_fonts}/ufl/ubuntu/Ubuntu-Bold.ttf $out/font
'';
};
favicon = pkgs.stdenv.mkDerivation rec {
diff --git a/src/index.html b/src/index.html
index 39a89c928cc3ff377d125dd5fd85760a49df83d9..f785d0715fddaf1398be47e76e526f86ec690a05 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,10 +2,10 @@
<head>
<title>Divoc logo generator</title>
<meta charset="utf-8" />
- <link rel="shortcut icon" href="favicon.svg">
- <link rel="shortcut icon" href="favicon.png">
- <link rel="icon" href="favicon.svg">
- <link rel="icon" href="favicon.png">
+ <link rel="shortcut icon" href="img/favicon.svg">
+ <link rel="shortcut icon" href="img/favicon.png">
+ <link rel="icon" href="img/favicon.svg">
+ <link rel="icon" href="img/favicon.png">
<meta name="theme-color" content="#000000">
<meta name="og:title" content="Divoc logo generator">
<meta name="description" content="Divoc logo generator">
@@ -14,56 +14,106 @@
<meta name="og:image" content="favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
+ @font-face {
+ font-family: 'Ubuntu';
+ font-style: normal;
+ font-weight: regular;
+ src: local('Ubuntu'), url(font/Ubuntu-Regular.ttf) format('truetype');
+ }
+ @font-face {
+ font-family: 'Ubuntu';
+ font-style: normal;
+ font-weight: bold;
+ src: local('Ubuntu'), url(font/Ubuntu-Bold.ttf) format('truetype');
+ }
+ @font-face {
+ font-family: 'Ubuntu Mono';
+ font-style: normal;
+ font-weight: regular;
+ src: local('Ubuntu Mono'), url(font/UbuntuMono-Regular.ttf) format('truetype');
+ }
html {
scroll-behavior: smooth;
+ min-height: 100%;
}
body {
- background: #000;
- color: #fff;
+ font-family: Ubuntu;
+ background: linear-gradient(#332a39ff 0%, #020613ff 100%);
+ color: #FFEBD8;
margin: 0px auto 50px auto;
max-width: 1500px;
overflow-x: hidden;
+ background-size: cover;
+ background-attachment: fixed;
}
main {
margin: 0px 10px;
}
- input {
+ h1 {
+ box-shadow: 0px -20px 0px -11px #62c1a6 inset;
+ margin-left: -20px;
+ padding: 0px 20px 2px 20px;
+ display: inline-block;
+ }
+ h2 {
+ font-size: 18px;
margin: 10px 0px;
}
- a {
- color: #00c6ff;
+ p {
+ margin: 10px 0px;
+ }
+ input, textarea {
+ background: #241B2B;
+ color: #FFEBD8;
+ border: #FFEBD8 4px solid;
+ border-radius: 3px;
+ font-size: 110%;
+ }
+ input:focus, textarea:focus {
+ border-color: #62c1a6;
+ outline: none;
}
- .table {
+ .input-with-label {
display: inline-grid;
- grid-template-columns: repeat(2, auto);
- grid-template-rows: repeat(3, auto);
+ grid-template-columns: auto;
+ grid-template-rows: auto;
}
- .table > * {
- margin: 5px 7px;
+ .input-with-label label {
+ margin-left: 7px;
}
- .dynamic_table {
- width: 100%;
+ .input-with-label label h2 {
+ margin: 0px;
+ }
+ .input-with-label input {
+ margin-top: 1px;
}
#preview h2, #preview button {
margin-bottom: 5px;
}
+ .katakana-wrapper {
+ display: inline-block;
+ max-width: 100%;
+ }
+ .katakana-wrapper summary {
+ font-size: 18px;
+ font-weight: 700;
+ }
.katakana {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
- display: inline-grid;
+ display: grid;
grid-template-columns: repeat(12, 50px);
grid-template-rows: 50px;
- margin-bottom: 20px;
+ grid-gap: 4px;
+ padding-left: 4px;
+ padding-bottom: 4px;
}
.katakana > div {
- /* margin: 7px 7px; */
line-height: 2em;
vertical-align: middle;
text-align: center;
line-height: 50px;
- }
- .katakana > div {
width: 50px;
height: 50px;
}
@@ -71,29 +121,145 @@
width: 100%;
height: 100%;
border: none;
- margin: 0px;
+ margin: -4px;
+ border-radius: 3px;
+ background: transparent;
+ color: #FFEBD8;
+ box-shadow: 0 0 0 4px #FFEBD8;
}
.katakana > div > button > span {
display: block;
}
- .color_selector_simple label, .color_selector_gradient label {
- padding: 0px calc(50% - 20px);
- margin-left: 10px;
+ .container-background {
+ background: #241B2B;
+ margin: 10px -10px;
+ padding: 10px 10px;
+ }
+ .container {
+ margin: 10px 0px;
+ }
+ .container-background > *:first-child, .container > *:first-child {
+ margin-top: 0px;
+ }
+ .container-background > *:last-child, .container > *:last-child {
+ margin-bottom: 0px;
+ }
+ .download-button-container {
+ grid-column: 2;
+ }
+ .download-button-container:last-child {
+ align-self: end;
+ }
+ .download-button-container > h2, .download-button-container > div, .download-button-container > div > button {
+ width: 100%;
+ text-align: center;
+ margin: 0px;
+ font-weight: bold;
+ }
+ .download-button-container > h2 {
+ margin: 5px;
+ width: calc(100% - 20px);
+ }
+ .download-button-container > div {
+ display: grid;
+ grid-template-columns: repeat(2, 50%);
+ padding: 0px;
+ }
+ .download-button-container > div > button {
+ border: none;
+ margin: 5px;
+ padding: 5px;
+ width: calc(100% - 20px);
+ background: #62c1a6;
+ font-size: 18px;
+ }
+ #preview {
+ max-width: 1000px;
+ margin: 0px auto;
+ }
+ #preview > div {
+ display: grid;
+ grid-template-columns: 70% 30%;
+ grid-template-rows: auto 1fr auto;
+ width: 100%;
+ }
+ #preview_big {
+ grid-row-start: 1;
+ grid-row-end: 4;
}
#preview_big, #preview_small, #preview_big > svg, #preview_small > svg {
display: block;
width: 100%;
+ height: fit-content;
+ }
+ #selector_color_foreground, #selector_color_background, #selector_animal {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+ grid-template-rows: repeat(auto-fit, 40px);
+ grid-area: box-content;
+ }
+ #selector_color_foreground input, #selector_color_background input, #selector_animal input {
+ display: none;
+ }
+ #selector_color_foreground > div, #selector_color_background > div {
+ width: calc(100% - 10px);
+ height: 30px;
+ margin: 5px;
+ }
+ #selector_color_foreground label, #selector_color_background label {
+ padding: 0px 0px 30px 100%;
+ display: block;
+ }
+ #selector_animal label {
+ display: block;
+ }
+ #selector_color_foreground input:checked + label, #selector_color_background input:checked + label, #selector_animal input:checked + label {
+ border: #FFEBD8 4px 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));
+ }
+ #selector_animal > div {
+ width: calc(100% - 10px);
+ margin: 5px;
+ }
+ #selector_animal img {
height: auto;
+ width: 100%;
+ background: #1F1C2A;
+ margin-bottom: -4px; /* Very hacky, but is needed for some reason */
}
@media screen and (prefers-color-scheme: light) {
body {
- color: #000;
- background: #fff;
+ color: #0E0E0F;
+ background: linear-gradient(#fff0e0ff 0%, #d0c8c3ff 100%);
+ }
+ input, textarea {
+ background: #DED6E5;
+ color: #0E0E0F;
+ border-color: #0E0E0F;
+ }
+ input:focus, textarea:focus {
+ border-color: #57C0A2;
+ }
+ .katakana > div > button {
+ color: #0E0E0F;
+ box-shadow: 0 0 0 4px #0E0E0F;
+ }
+ #selector_color_foreground input:checked + label, #selector_color_background input:checked + label, #selector_animal input:checked + label {
+ border-color: #0E0E0F;
+ }
+ .container-background {
+ background: #DED6E5;
}
}
@media only screen and (max-width: 500px) {
- .dynamic_table {
- grid-template-columns: auto;
+ .download-button-container:last-child {
+ grid-row: 4;
+ grid-column: 1;
}
}
</style>
@@ -162,17 +328,17 @@
svg2png_promise = (svg_data, width, height) => {
return new Promise(resolve => {
- image = new Image();
+ image = new Image();
image.onload = () => {
- if (height === null) {
- height = (image.height / image.width) * width;
- }
+ if (height === null) {
+ height = (image.height / image.width) * width;
+ }
- canvas = document.createElement("canvas");
- canvas.width = width;
- canvas.height = height;
+ canvas = document.createElement("canvas");
+ canvas.width = width;
+ canvas.height = height;
- canvas.getContext('2d').drawImage(image, 0, 0, width, height);
+ canvas.getContext('2d').drawImage(image, 0, 0, width, height);
resolve(dataURItoBlob(canvas.toDataURL("image/png")));
}
@@ -288,255 +454,283 @@
</head>
<body>
<main>
- <h1>Preview</h1>
- <div id="preview" class="table dynamic_table">
- <div>
- <h2>big</h2>
- <button id="download_big_svg">Save big SVG</button>
- <button id="download_big_png">Save big PNG</button>
- <div id="preview_big"></div>
- </div>
- <div>
- <h2>small</h2>
- <button id="download_small_svg">Save small SVG</button>
- <button id="download_small_png">Save small PNG</button>
- <div id="preview_small"></div>
- </div>
- </div>
- <h2>Alt text</h2>
- <p id="alt_text"></p>
- <h1>Options</h1>
- <h2>Animal</h2>
- <div id="selector_animal">
- <div>
- <input type="radio" id="animal_bunny" name="animal" value="bunny" checked="true"/>
- <label for="animal_bunny">bunny</label>
- </div>
- <div>
- <input type="radio" id="animal_maneki-neko" name="animal" value="maneki-neko"/>
- <label for="animal_maneki-neko">maneki-neko</label>
- </div>
- <div>
- <input type="radio" id="animal_creature" name="animal" value="creature"/>
- <label for="animal_creature">creature</label>
- </div>
- <div>
- <input type="radio" id="animal_haj" name="animal" value="haj"/>
- <label for="animal_haj">haj</label>
- </div>
- <div>
- <input type="radio" id="animal_otter" name="animal" value="otter"/>
- <label for="animal_otter">otter</label>
- </div>
- </div>
- <h2>Text</h2>
- <div class="table">
- <label for="headline_text">Headline</label>
- <input type="text" id="headline_text" value="DiVOC"/>
+ <div class="container">
+ <h1>logo generator</h1>
</div>
- <div>
- <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 id="preview" alt="preview of generated logo">
+ <div class="container-background">
+ <div id="preview_big"></div>
+ <div id="preview_small"></div>
+ <div class="download-button-container">
+ <h2>save small logo</h2>
+ <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>
+ <div>
+ <button id="download_big_svg">SVG</button>
+ <button id="download_big_png">PNG</button>
+ </div>
+ </div>
</div>
</div>
- <div class="table">
- <label for="sub_headline_text">Sub headline</label>
- <textarea id="sub_headline_text">ブリッジ・バブルス</textarea>
+ <div class="container-background">
+ <h2>alt text</h2>
+ <p id="alt_text"></p>
</div>
- <div>
- <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>
- </div>
- <h2>Color</h2>
- <h3>Foreground acent</h3>
- <div id="selector_color_foreground">
- <div class="color_selector_simple">
- <input type="radio" id="foreground_white" name="foreground_color" value="#FFEBD8"/>
- <label for="foreground_white" style="background-color: #FFEBD8;"></label>
- </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;"></label>
+ <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;"></label>
+ <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;"></label>
+ <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;"></label>
+ <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;"></label>
+ <label for="foreground_purple" style="background-color: #A74DB7;" alt="pink"></label>
</div>
</div>
- <h3>Background</h3>
- <div id="selector_color_background">
+ <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, #1f1c2a 0%, #1f1c2a 38%, #00000000 38%, #00000000 42%, #020613 42%, #332a39 100%);"></label>
+ <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, #0b1a26 0%, #0b1a26 38%, #00000000 38%, #00000000 42%, #0d0313 42%, #0b1a26 100%);"></label>
+ <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>
+ </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>
+ </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>
+ </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>
+ </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>
+ </details>
</div>
</div>
</main>