diff --git a/README.md b/README.md index 4264d3c6b839867d7ed39ee4e2d602ed570adcba..24ac1124157fb9384c8481c32d12918e15ff6a53 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,9 @@ # 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 -- [ ] 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 diff --git a/src/index.html b/src/index.html index 074d5beed6c8262ad1ac0803ac0b7ade9150255d..e8f9186f4229fd5489ef1d1bd3f53379c975d514 100644 --- a/src/index.html +++ b/src/index.html @@ -232,8 +232,7 @@ width: calc(100% - 10px); margin: 5px; } - #selector_animal img { - height: auto; + #selector_animal .animal_button, #selector_animal .animal_button svg { width: 100%; height: 100%; background: #1F1C2A; @@ -386,7 +385,8 @@ ); // Set all colors - apply_color = (selector, style_key, value) => [svg_big, svg_small].forEach((e) => e.querySelectorAll(selector).forEach((e) => e.style[style_key] = value)); + apply_color = (selector, style_key, value) => [svg_big, svg_small].concat(Array.from(document.querySelectorAll(".animal_button"))) + .forEach((e) => e.querySelectorAll(selector).forEach((e) => e.style[style_key] = value)); apply_color(".color_accent", "fill", accent_color); apply_color(".color_background", "fill", background_color.simple); apply_color(".color_background_top", "stop-color", background_color.top); @@ -405,6 +405,12 @@ // after it's been loaded once document.querySelector("#preview_big").appendChild(svg_big); document.querySelector("#preview_small").appendChild(svg_small); + document.querySelectorAll(".animal_button").forEach((button) => { + button_image = svg_small.cloneNode(true); + button_image.querySelectorAll(".animal").forEach((e) => e.style.display = e.id === button.id ? "inline" : "none"); + + button.appendChild(button_image); + }); // Add a event listener to every input event document.querySelectorAll( @@ -527,32 +533,32 @@ <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 alt="bunny" for="animal_bunny"> + <div class="animal_button" id="bunny"></div> </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 alt="maneki-neko Winkekatze" for="animal_maneki-neko"> + <div class="animal_button" id="maneki-neko"></div> </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 alt="creature" for="animal_creature"> + <div class="animal_button" id="creature"></div> </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 alt="haj" for="animal_haj"> + <div class="animal_button" id="haj"></div> </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 alt="otter" for="animal_otter"> + <div class="animal_button" id="otter"></div> </label> </div> </div>