HTML + CSS редактор пиксельной графики - пример html js css



Книга HTML + CSS редактор пиксельной графики



HTML + CSS редактор пиксельной графики (HTML код)



<div class="site-wrap">
<header class="wrapper">
<h1>HTML + CSS Pixel art editor</h1>
</header>
<main class="wrapper">
<h2>Canvas Size</h2>
<input class="input-size-8" type="radio" id="size-8" name="sizes" checked="checked"/>
<label class="label-size-8 option" for="size-8">8 × 8</label>
<input class="input-size-12" type="radio" id="size-12" name="sizes"/>
<label class="label-size-12 option" for="size-12">12 × 12</label>
<input class="input-size-16" type="radio" id="size-16" name="sizes"/>
<label class="label-size-16 option" for="size-16">16 × 16</label>
<h2>Color Palette</h2>
<input class="input-color-black" type="radio" id="color-black" name="colors" checked="checked"/>
<label class="label-color-black option" for="color-black"><span class="visually-hidden">black</span></label>
<input class="input-color-red" type="radio" id="color-red" name="colors"/>
<label class="label-color-red option" for="color-red"><span class="visually-hidden">red</span></label>
<input class="input-color-blue" type="radio" id="color-blue" name="colors"/>
<label class="label-color-blue option" for="color-blue"><span class="visually-hidden">blue</span></label>
<input class="input-color-green" type="radio" id="color-green" name="colors"/>
<label class="label-color-green option" for="color-green"><span class="visually-hidden">green</span></label>
<input class="input-color-purple" type="radio" id="color-purple" name="colors"/>
<label class="label-color-purple option" for="color-purple"><span class="visually-hidden">purple</span></label>
<input class="input-color-yellow" type="radio" id="color-yellow" name="colors"/>
<label class="label-color-yellow option" for="color-yellow"><span class="visually-hidden">yellow</span></label>
<input class="input-color-orange" type="radio" id="color-orange" name="colors"/>
<label class="label-color-orange option" for="color-orange"><span class="visually-hidden">orange</span></label>
<input class="input-color-white" type="radio" id="color-white" name="colors"/>
<label class="label-color-white option" for="color-white"><span class="visually-hidden">white</span></label>
<div class="canvases">
<form data-size="8" hidden="hidden">
<div class="canvas-container" data-size="8">
<input class="canvas-black" type="radio" id="canvas-black-1-8" name="1"/>
<label class="canvas-1" for="canvas-black-1-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-2-8" name="2"/>
<label class="canvas-2" for="canvas-black-2-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-3-8" name="3"/>
<label class="canvas-3" for="canvas-black-3-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-4-8" name="4"/>
<label class="canvas-4" for="canvas-black-4-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-5-8" name="5"/>
<label class="canvas-5" for="canvas-black-5-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-6-8" name="6"/>
<label class="canvas-6" for="canvas-black-6-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-7-8" name="7"/>
<label class="canvas-7" for="canvas-black-7-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-8-8" name="8"/>
<label class="canvas-8" for="canvas-black-8-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-9-8" name="9"/>
<label class="canvas-9" for="canvas-black-9-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-10-8" name="10"/>
<label class="canvas-10" for="canvas-black-10-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-11-8" name="11"/>
<label class="canvas-11" for="canvas-black-11-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-12-8" name="12"/>
<label class="canvas-12" for="canvas-black-12-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-13-8" name="13"/>
<label class="canvas-13" for="canvas-black-13-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-14-8" name="14"/>
<label class="canvas-14" for="canvas-black-14-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-15-8" name="15"/>
<label class="canvas-15" for="canvas-black-15-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-16-8" name="16"/>
<label class="canvas-16" for="canvas-black-16-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-17-8" name="17"/>
<label class="canvas-17" for="canvas-black-17-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-18-8" name="18"/>
<label class="canvas-18" for="canvas-black-18-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-19-8" name="19"/>
<label class="canvas-19" for="canvas-black-19-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-20-8" name="20"/>
<label class="canvas-20" for="canvas-black-20-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-21-8" name="21"/>
<label class="canvas-21" for="canvas-black-21-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-22-8" name="22"/>
<label class="canvas-22" for="canvas-black-22-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-23-8" name="23"/>
<label class="canvas-23" for="canvas-black-23-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-24-8" name="24"/>
<label class="canvas-24" for="canvas-black-24-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-25-8" name="25"/>
<label class="canvas-25" for="canvas-black-25-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-26-8" name="26"/>
<label class="canvas-26" for="canvas-black-26-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-27-8" name="27"/>
<label class="canvas-27" for="canvas-black-27-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-28-8" name="28"/>
<label class="canvas-28" for="canvas-black-28-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-29-8" name="29"/>
<label class="canvas-29" for="canvas-black-29-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-30-8" name="30"/>
<label class="canvas-30" for="canvas-black-30-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-31-8" name="31"/>
<label class="canvas-31" for="canvas-black-31-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-32-8" name="32"/>
<label class="canvas-32" for="canvas-black-32-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-33-8" name="33"/>
<label class="canvas-33" for="canvas-black-33-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-34-8" name="34"/>
<label class="canvas-34" for="canvas-black-34-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-35-8" name="35"/>
<label class="canvas-35" for="canvas-black-35-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-36-8" name="36"/>
<label class="canvas-36" for="canvas-black-36-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-37-8" name="37"/>
<label class="canvas-37" for="canvas-black-37-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-38-8" name="38"/>
<label class="canvas-38" for="canvas-black-38-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-39-8" name="39"/>
<label class="canvas-39" for="canvas-black-39-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-40-8" name="40"/>
<label class="canvas-40" for="canvas-black-40-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-41-8" name="41"/>
<label class="canvas-41" for="canvas-black-41-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-42-8" name="42"/>
<label class="canvas-42" for="canvas-black-42-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-43-8" name="43"/>
<label class="canvas-43" for="canvas-black-43-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-44-8" name="44"/>
<label class="canvas-44" for="canvas-black-44-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-45-8" name="45"/>
<label class="canvas-45" for="canvas-black-45-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-46-8" name="46"/>
<label class="canvas-46" for="canvas-black-46-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-47-8" name="47"/>
<label class="canvas-47" for="canvas-black-47-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-48-8" name="48"/>
<label class="canvas-48" for="canvas-black-48-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-49-8" name="49"/>
<label class="canvas-49" for="canvas-black-49-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-50-8" name="50"/>
<label class="canvas-50" for="canvas-black-50-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-51-8" name="51"/>
<label class="canvas-51" for="canvas-black-51-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-52-8" name="52"/>
<label class="canvas-52" for="canvas-black-52-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-53-8" name="53"/>
<label class="canvas-53" for="canvas-black-53-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-54-8" name="54"/>
<label class="canvas-54" for="canvas-black-54-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-55-8" name="55"/>
<label class="canvas-55" for="canvas-black-55-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-56-8" name="56"/>
<label class="canvas-56" for="canvas-black-56-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-57-8" name="57"/>
<label class="canvas-57" for="canvas-black-57-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-58-8" name="58"/>
<label class="canvas-58" for="canvas-black-58-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-59-8" name="59"/>
<label class="canvas-59" for="canvas-black-59-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-60-8" name="60"/>
<label class="canvas-60" for="canvas-black-60-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-61-8" name="61"/>
<label class="canvas-61" for="canvas-black-61-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-62-8" name="62"/>
<label class="canvas-62" for="canvas-black-62-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-63-8" name="63"/>
<label class="canvas-63" for="canvas-black-63-8"></label>
<input class="canvas-black" type="radio" id="canvas-black-64-8" name="64"/>
<label class="canvas-64" for="canvas-black-64-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-1-8" name="1"/>
<label class="canvas-1" for="canvas-red-1-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-2-8" name="2"/>
<label class="canvas-2" for="canvas-red-2-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-3-8" name="3"/>
<label class="canvas-3" for="canvas-red-3-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-4-8" name="4"/>
<label class="canvas-4" for="canvas-red-4-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-5-8" name="5"/>
<label class="canvas-5" for="canvas-red-5-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-6-8" name="6"/>
<label class="canvas-6" for="canvas-red-6-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-7-8" name="7"/>
<label class="canvas-7" for="canvas-red-7-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-8-8" name="8"/>
<label class="canvas-8" for="canvas-red-8-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-9-8" name="9"/>
<label class="canvas-9" for="canvas-red-9-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-10-8" name="10"/>
<label class="canvas-10" for="canvas-red-10-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-11-8" name="11"/>
<label class="canvas-11" for="canvas-red-11-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-12-8" name="12"/>
<label class="canvas-12" for="canvas-red-12-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-13-8" name="13"/>
<label class="canvas-13" for="canvas-red-13-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-14-8" name="14"/>
<label class="canvas-14" for="canvas-red-14-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-15-8" name="15"/>
<label class="canvas-15" for="canvas-red-15-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-16-8" name="16"/>
<label class="canvas-16" for="canvas-red-16-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-17-8" name="17"/>
<label class="canvas-17" for="canvas-red-17-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-18-8" name="18"/>
<label class="canvas-18" for="canvas-red-18-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-19-8" name="19"/>
<label class="canvas-19" for="canvas-red-19-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-20-8" name="20"/>
<label class="canvas-20" for="canvas-red-20-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-21-8" name="21"/>
<label class="canvas-21" for="canvas-red-21-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-22-8" name="22"/>
<label class="canvas-22" for="canvas-red-22-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-23-8" name="23"/>
<label class="canvas-23" for="canvas-red-23-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-24-8" name="24"/>
<label class="canvas-24" for="canvas-red-24-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-25-8" name="25"/>
<label class="canvas-25" for="canvas-red-25-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-26-8" name="26"/>
<label class="canvas-26" for="canvas-red-26-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-27-8" name="27"/>
<label class="canvas-27" for="canvas-red-27-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-28-8" name="28"/>
<label class="canvas-28" for="canvas-red-28-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-29-8" name="29"/>
<label class="canvas-29" for="canvas-red-29-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-30-8" name="30"/>
<label class="canvas-30" for="canvas-red-30-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-31-8" name="31"/>
<label class="canvas-31" for="canvas-red-31-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-32-8" name="32"/>
<label class="canvas-32" for="canvas-red-32-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-33-8" name="33"/>
<label class="canvas-33" for="canvas-red-33-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-34-8" name="34"/>
<label class="canvas-34" for="canvas-red-34-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-35-8" name="35"/>
<label class="canvas-35" for="canvas-red-35-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-36-8" name="36"/>
<label class="canvas-36" for="canvas-red-36-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-37-8" name="37"/>
<label class="canvas-37" for="canvas-red-37-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-38-8" name="38"/>
<label class="canvas-38" for="canvas-red-38-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-39-8" name="39"/>
<label class="canvas-39" for="canvas-red-39-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-40-8" name="40"/>
<label class="canvas-40" for="canvas-red-40-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-41-8" name="41"/>
<label class="canvas-41" for="canvas-red-41-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-42-8" name="42"/>
<label class="canvas-42" for="canvas-red-42-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-43-8" name="43"/>
<label class="canvas-43" for="canvas-red-43-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-44-8" name="44"/>
<label class="canvas-44" for="canvas-red-44-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-45-8" name="45"/>
<label class="canvas-45" for="canvas-red-45-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-46-8" name="46"/>
<label class="canvas-46" for="canvas-red-46-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-47-8" name="47"/>
<label class="canvas-47" for="canvas-red-47-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-48-8" name="48"/>
<label class="canvas-48" for="canvas-red-48-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-49-8" name="49"/>
<label class="canvas-49" for="canvas-red-49-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-50-8" name="50"/>
<label class="canvas-50" for="canvas-red-50-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-51-8" name="51"/>
<label class="canvas-51" for="canvas-red-51-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-52-8" name="52"/>
<label class="canvas-52" for="canvas-red-52-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-53-8" name="53"/>
<label class="canvas-53" for="canvas-red-53-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-54-8" name="54"/>
<label class="canvas-54" for="canvas-red-54-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-55-8" name="55"/>
<label class="canvas-55" for="canvas-red-55-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-56-8" name="56"/>
<label class="canvas-56" for="canvas-red-56-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-57-8" name="57"/>
<label class="canvas-57" for="canvas-red-57-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-58-8" name="58"/>
<label class="canvas-58" for="canvas-red-58-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-59-8" name="59"/>
<label class="canvas-59" for="canvas-red-59-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-60-8" name="60"/>
<label class="canvas-60" for="canvas-red-60-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-61-8" name="61"/>
<label class="canvas-61" for="canvas-red-61-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-62-8" name="62"/>
<label class="canvas-62" for="canvas-red-62-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-63-8" name="63"/>
<label class="canvas-63" for="canvas-red-63-8"></label>
<input class="canvas-red" type="radio" id="canvas-red-64-8" name="64"/>
<label class="canvas-64" for="canvas-red-64-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-1-8" name="1"/>
<label class="canvas-1" for="canvas-blue-1-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-2-8" name="2"/>
<label class="canvas-2" for="canvas-blue-2-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-3-8" name="3"/>
<label class="canvas-3" for="canvas-blue-3-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-4-8" name="4"/>
<label class="canvas-4" for="canvas-blue-4-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-5-8" name="5"/>
<label class="canvas-5" for="canvas-blue-5-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-6-8" name="6"/>
<label class="canvas-6" for="canvas-blue-6-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-7-8" name="7"/>
<label class="canvas-7" for="canvas-blue-7-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-8-8" name="8"/>
<label class="canvas-8" for="canvas-blue-8-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-9-8" name="9"/>
<label class="canvas-9" for="canvas-blue-9-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-10-8" name="10"/>
<label class="canvas-10" for="canvas-blue-10-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-11-8" name="11"/>
<label class="canvas-11" for="canvas-blue-11-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-12-8" name="12"/>
<label class="canvas-12" for="canvas-blue-12-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-13-8" name="13"/>
<label class="canvas-13" for="canvas-blue-13-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-14-8" name="14"/>
<label class="canvas-14" for="canvas-blue-14-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-15-8" name="15"/>
<label class="canvas-15" for="canvas-blue-15-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-16-8" name="16"/>
<label class="canvas-16" for="canvas-blue-16-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-17-8" name="17"/>
<label class="canvas-17" for="canvas-blue-17-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-18-8" name="18"/>
<label class="canvas-18" for="canvas-blue-18-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-19-8" name="19"/>
<label class="canvas-19" for="canvas-blue-19-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-20-8" name="20"/>
<label class="canvas-20" for="canvas-blue-20-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-21-8" name="21"/>
<label class="canvas-21" for="canvas-blue-21-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-22-8" name="22"/>
<label class="canvas-22" for="canvas-blue-22-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-23-8" name="23"/>
<label class="canvas-23" for="canvas-blue-23-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-24-8" name="24"/>
<label class="canvas-24" for="canvas-blue-24-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-25-8" name="25"/>
<label class="canvas-25" for="canvas-blue-25-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-26-8" name="26"/>
<label class="canvas-26" for="canvas-blue-26-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-27-8" name="27"/>
<label class="canvas-27" for="canvas-blue-27-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-28-8" name="28"/>
<label class="canvas-28" for="canvas-blue-28-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-29-8" name="29"/>
<label class="canvas-29" for="canvas-blue-29-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-30-8" name="30"/>
<label class="canvas-30" for="canvas-blue-30-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-31-8" name="31"/>
<label class="canvas-31" for="canvas-blue-31-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-32-8" name="32"/>
<label class="canvas-32" for="canvas-blue-32-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-33-8" name="33"/>
<label class="canvas-33" for="canvas-blue-33-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-34-8" name="34"/>
<label class="canvas-34" for="canvas-blue-34-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-35-8" name="35"/>
<label class="canvas-35" for="canvas-blue-35-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-36-8" name="36"/>
<label class="canvas-36" for="canvas-blue-36-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-37-8" name="37"/>
<label class="canvas-37" for="canvas-blue-37-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-38-8" name="38"/>
<label class="canvas-38" for="canvas-blue-38-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-39-8" name="39"/>
<label class="canvas-39" for="canvas-blue-39-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-40-8" name="40"/>
<label class="canvas-40" for="canvas-blue-40-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-41-8" name="41"/>
<label class="canvas-41" for="canvas-blue-41-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-42-8" name="42"/>
<label class="canvas-42" for="canvas-blue-42-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-43-8" name="43"/>
<label class="canvas-43" for="canvas-blue-43-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-44-8" name="44"/>
<label class="canvas-44" for="canvas-blue-44-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-45-8" name="45"/>
<label class="canvas-45" for="canvas-blue-45-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-46-8" name="46"/>
<label class="canvas-46" for="canvas-blue-46-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-47-8" name="47"/>
<label class="canvas-47" for="canvas-blue-47-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-48-8" name="48"/>
<label class="canvas-48" for="canvas-blue-48-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-49-8" name="49"/>
<label class="canvas-49" for="canvas-blue-49-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-50-8" name="50"/>
<label class="canvas-50" for="canvas-blue-50-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-51-8" name="51"/>
<label class="canvas-51" for="canvas-blue-51-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-52-8" name="52"/>
<label class="canvas-52" for="canvas-blue-52-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-53-8" name="53"/>
<label class="canvas-53" for="canvas-blue-53-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-54-8" name="54"/>
<label class="canvas-54" for="canvas-blue-54-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-55-8" name="55"/>
<label class="canvas-55" for="canvas-blue-55-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-56-8" name="56"/>
<label class="canvas-56" for="canvas-blue-56-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-57-8" name="57"/>
<label class="canvas-57" for="canvas-blue-57-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-58-8" name="58"/>
<label class="canvas-58" for="canvas-blue-58-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-59-8" name="59"/>
<label class="canvas-59" for="canvas-blue-59-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-60-8" name="60"/>
<label class="canvas-60" for="canvas-blue-60-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-61-8" name="61"/>
<label class="canvas-61" for="canvas-blue-61-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-62-8" name="62"/>
<label class="canvas-62" for="canvas-blue-62-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-63-8" name="63"/>
<label class="canvas-63" for="canvas-blue-63-8"></label>
<input class="canvas-blue" type="radio" id="canvas-blue-64-8" name="64"/>
<label class="canvas-64" for="canvas-blue-64-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-1-8" name="1"/>
<label class="canvas-1" for="canvas-green-1-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-2-8" name="2"/>
<label class="canvas-2" for="canvas-green-2-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-3-8" name="3"/>
<label class="canvas-3" for="canvas-green-3-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-4-8" name="4"/>
<label class="canvas-4" for="canvas-green-4-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-5-8" name="5"/>
<label class="canvas-5" for="canvas-green-5-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-6-8" name="6"/>
<label class="canvas-6" for="canvas-green-6-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-7-8" name="7"/>
<label class="canvas-7" for="canvas-green-7-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-8-8" name="8"/>
<label class="canvas-8" for="canvas-green-8-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-9-8" name="9"/>
<label class="canvas-9" for="canvas-green-9-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-10-8" name="10"/>
<label class="canvas-10" for="canvas-green-10-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-11-8" name="11"/>
<label class="canvas-11" for="canvas-green-11-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-12-8" name="12"/>
<label class="canvas-12" for="canvas-green-12-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-13-8" name="13"/>
<label class="canvas-13" for="canvas-green-13-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-14-8" name="14"/>
<label class="canvas-14" for="canvas-green-14-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-15-8" name="15"/>
<label class="canvas-15" for="canvas-green-15-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-16-8" name="16"/>
<label class="canvas-16" for="canvas-green-16-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-17-8" name="17"/>
<label class="canvas-17" for="canvas-green-17-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-18-8" name="18"/>
<label class="canvas-18" for="canvas-green-18-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-19-8" name="19"/>
<label class="canvas-19" for="canvas-green-19-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-20-8" name="20"/>
<label class="canvas-20" for="canvas-green-20-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-21-8" name="21"/>
<label class="canvas-21" for="canvas-green-21-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-22-8" name="22"/>
<label class="canvas-22" for="canvas-green-22-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-23-8" name="23"/>
<label class="canvas-23" for="canvas-green-23-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-24-8" name="24"/>
<label class="canvas-24" for="canvas-green-24-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-25-8" name="25"/>
<label class="canvas-25" for="canvas-green-25-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-26-8" name="26"/>
<label class="canvas-26" for="canvas-green-26-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-27-8" name="27"/>
<label class="canvas-27" for="canvas-green-27-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-28-8" name="28"/>
<label class="canvas-28" for="canvas-green-28-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-29-8" name="29"/>
<label class="canvas-29" for="canvas-green-29-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-30-8" name="30"/>
<label class="canvas-30" for="canvas-green-30-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-31-8" name="31"/>
<label class="canvas-31" for="canvas-green-31-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-32-8" name="32"/>
<label class="canvas-32" for="canvas-green-32-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-33-8" name="33"/>
<label class="canvas-33" for="canvas-green-33-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-34-8" name="34"/>
<label class="canvas-34" for="canvas-green-34-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-35-8" name="35"/>
<label class="canvas-35" for="canvas-green-35-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-36-8" name="36"/>
<label class="canvas-36" for="canvas-green-36-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-37-8" name="37"/>
<label class="canvas-37" for="canvas-green-37-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-38-8" name="38"/>
<label class="canvas-38" for="canvas-green-38-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-39-8" name="39"/>
<label class="canvas-39" for="canvas-green-39-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-40-8" name="40"/>
<label class="canvas-40" for="canvas-green-40-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-41-8" name="41"/>
<label class="canvas-41" for="canvas-green-41-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-42-8" name="42"/>
<label class="canvas-42" for="canvas-green-42-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-43-8" name="43"/>
<label class="canvas-43" for="canvas-green-43-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-44-8" name="44"/>
<label class="canvas-44" for="canvas-green-44-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-45-8" name="45"/>
<label class="canvas-45" for="canvas-green-45-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-46-8" name="46"/>
<label class="canvas-46" for="canvas-green-46-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-47-8" name="47"/>
<label class="canvas-47" for="canvas-green-47-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-48-8" name="48"/>
<label class="canvas-48" for="canvas-green-48-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-49-8" name="49"/>
<label class="canvas-49" for="canvas-green-49-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-50-8" name="50"/>
<label class="canvas-50" for="canvas-green-50-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-51-8" name="51"/>
<label class="canvas-51" for="canvas-green-51-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-52-8" name="52"/>
<label class="canvas-52" for="canvas-green-52-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-53-8" name="53"/>
<label class="canvas-53" for="canvas-green-53-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-54-8" name="54"/>
<label class="canvas-54" for="canvas-green-54-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-55-8" name="55"/>
<label class="canvas-55" for="canvas-green-55-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-56-8" name="56"/>
<label class="canvas-56" for="canvas-green-56-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-57-8" name="57"/>
<label class="canvas-57" for="canvas-green-57-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-58-8" name="58"/>
<label class="canvas-58" for="canvas-green-58-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-59-8" name="59"/>
<label class="canvas-59" for="canvas-green-59-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-60-8" name="60"/>
<label class="canvas-60" for="canvas-green-60-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-61-8" name="61"/>
<label class="canvas-61" for="canvas-green-61-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-62-8" name="62"/>
<label class="canvas-62" for="canvas-green-62-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-63-8" name="63"/>
<label class="canvas-63" for="canvas-green-63-8"></label>
<input class="canvas-green" type="radio" id="canvas-green-64-8" name="64"/>
<label class="canvas-64" for="canvas-green-64-8"></label>
<input class="canvas-purple" type="radio" id="canvas-purple-1-8" name="1"/>
<label class="canvas-1" for="canvas-purple-1-8"></label>
<input class="canvas-purple" type="radio" id="canvas-purple-2-8" name="2"/>
<label class="canvas-2" for="canvas-purple-2-8"></label>
<input class="canvas-purple" type="radio" id="canvas-purple-3-8" name="3"/>
<label class="canvas-3" for="canvas-purple-3-8"></label>
<input class="canvas-purple" type="radio" id="canvas-purple-4-8" name="4"/>
<label class="canvas-4" for="canvas-purple-4-8"></label>
<input class="canvas-purple" type="radio" id="canvas-purple-5-8" name="5"/>
<label class="canvas-5" for="canvas-purple-5-8"></label>
<input class="canvas-purple" type="radio" id="canvas-purple-6-8" name="6"/>
<label class="canvas-6" for="canvas-purple-6-8"></label>
<input class="canvas-purple" type="radio" id="canvas-purple-7-8" name="7"/>
<label class="canvas-7" for="canvas-purple-7-8"></label>
<input class="canvas-purple" type="radio" id="canvas-purple-8-8" name="8"/>
<label class="canvas-8" for="canvas-purple-8-8"></label>
<input class="canvas-purple" type="radio" id="canvas-purple-9-8" name="9"/>
<label class="canvas-9" for="canvas-purple-9-8"></label>
<input class="canvas-purple" type="radio" id="canvas-purple-10-8" name="10"/>
<label class="canvas-10" for="canvas-purple-10-8"></label>
<input class="canvas-purple" type="radio" id="canvas-purple-11-8" name="11"/>
<label class="canvas-11" for="canvas-purple-11-8"></label>
<input class="canvas-purple" type="radio" id="canvas-purple-12-8" name="12"/>
<label class="canvas-12" for="canvas-purple-12-8"></label>
<input class="canvas-purple" type="radio" id="canvas-purple-13-8" name="13"/>
<label class="canvas-13" for="canvas-purple-13-8"></label>
706   0  

Comments

    Ничего не найдено.