qcast3/qcast-pub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

열삭제, 열삽입, 단삭제, 단삽입 팝업 추가

Browse Source
This commit is contained in:
김창수 2024-10-10 09:25:10 +09:00
parent 0aeec572f9
commit 57cc0d0c3b
19 changed files with 1599 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
public/static/images/canvas/additional-edit01.svg Normal file
View File

@ -0,0 +1,115 @@
<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4200_3427)">
<mask id="mask0_4200_3427" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
</mask>
<g mask="url(#mask0_4200_3427)">
<rect x="-41" width="798" height="1" fill="#444444"/>
<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
</g>
<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
<mask id="path-40-inside-1_4200_3427" fill="white">
<path d="M31 26H102.25V78H31V26Z"/>
</mask>
<path d="M31 26H102.25V78H31V26Z" fill="#16417D"/>
<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H102.25V25H31V27ZM102.25 77H31V79H102.25V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_3427)"/>
<rect x="104.75" y="28.5" width="66.25" height="47" fill="#001027"/>
<rect x="104.75" y="28.5" width="66.25" height="47" stroke="white" stroke-width="5"/>
<rect x="176" y="28.5" width="66.25" height="47" fill="#16417D"/>
<rect x="176" y="28.5" width="66.25" height="47" stroke="#EA10AC" stroke-width="5"/>
<mask id="path-44-inside-2_4200_3427" fill="white">
<path d="M244.75 26H316V78H244.75V26Z"/>
</mask>
<path d="M244.75 26H316V78H244.75V26Z" fill="#16417D"/>
<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM244.75 27H316V25H244.75V27ZM315 26V78H317V26H315ZM316 77H244.75V79H316V77Z" fill="#00183B" mask="url(#path-44-inside-2_4200_3427)"/>
<mask id="path-46-inside-3_4200_3427" fill="white">
<path d="M31 78H102.25V130H31V78Z"/>
</mask>
<path d="M31 78H102.25V130H31V78Z" fill="#16417D"/>
<path d="M31 130H30V131H31V130ZM102.25 129H31V131H102.25V129ZM32 130V78H30V130H32Z" fill="#00183B" mask="url(#path-46-inside-3_4200_3427)"/>
<mask id="path-48-inside-4_4200_3427" fill="white">
<path d="M102.25 78H173.5V130H102.25V78Z"/>
</mask>
<path d="M102.25 78H173.5V130H102.25V78Z" fill="#001027"/>
<path d="M173.5 130V135H178.5V130H173.5ZM102.25 130H97.25V135H102.25V130ZM168.5 78V130H178.5V78H168.5ZM173.5 125H102.25V135H173.5V125ZM107.25 130V78H97.25V130H107.25Z" fill="white" mask="url(#path-48-inside-4_4200_3427)"/>
<mask id="path-50-inside-5_4200_3427" fill="white">
<path d="M173.5 78H244.75V130H173.5V78Z"/>
</mask>
<path d="M173.5 78H244.75V130H173.5V78Z" fill="#16417D"/>
<path d="M244.75 130V135H249.75V130H244.75ZM173.5 130H168.5V135H173.5V130ZM239.75 78V130H249.75V78H239.75ZM244.75 125H173.5V135H244.75V125ZM178.5 130V78H168.5V130H178.5Z" fill="#EA10AC" mask="url(#path-50-inside-5_4200_3427)"/>
<mask id="path-52-inside-6_4200_3427" fill="white">
<path d="M244.75 78H316V130H244.75V78Z"/>
</mask>
<path d="M244.75 78H316V130H244.75V78Z" fill="#16417D"/>
<path d="M316 130V131H317V130H316ZM315 78V130H317V78H315ZM316 129H244.75V131H316V129Z" fill="#00183B" mask="url(#path-52-inside-6_4200_3427)"/>
<mask id="path-54-inside-7_4200_3427" fill="white">
<path d="M31 130H102.25V182H31V130Z"/>
</mask>
<path d="M31 130H102.25V182H31V130Z" fill="#16417D"/>
<path d="M31 182H30V183H31V182ZM102.25 181H31V183H102.25V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-54-inside-7_4200_3427)"/>
<mask id="path-56-inside-8_4200_3427" fill="white">
<path d="M102.25 130H173.5V182H102.25V130Z"/>
</mask>
<path d="M102.25 130H173.5V182H102.25V130Z" fill="#001027"/>
<path d="M173.5 182V187H178.5V182H173.5ZM102.25 182H97.25V187H102.25V182ZM168.5 130V182H178.5V130H168.5ZM173.5 177H102.25V187H173.5V177ZM107.25 182V130H97.25V182H107.25Z" fill="white" mask="url(#path-56-inside-8_4200_3427)"/>
<mask id="path-58-inside-9_4200_3427" fill="white">
<path d="M173.5 130H244.75V182H173.5V130Z"/>
</mask>
<path d="M173.5 130H244.75V182H173.5V130Z" fill="#16417D"/>
<path d="M244.75 182V187H249.75V182H244.75ZM173.5 182H168.5V187H173.5V182ZM239.75 130V182H249.75V130H239.75ZM244.75 177H173.5V187H244.75V177ZM178.5 182V130H168.5V182H178.5Z" fill="#EA10AC" mask="url(#path-58-inside-9_4200_3427)"/>
<mask id="path-60-inside-10_4200_3427" fill="white">
<path d="M244.75 130H316V182H244.75V130Z"/>
</mask>
<path d="M244.75 130H316V182H244.75V130Z" fill="#16417D"/>
<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H244.75V183H316V181Z" fill="#00183B" mask="url(#path-60-inside-10_4200_3427)"/>
<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 56 166)" fill="#16417D"/>
<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 56 166)" stroke="white"/>
<path d="M59.2929 155.293C58.9024 155.683 58.9024 156.317 59.2929 156.707L65.6569 163.071C66.0474 163.462 66.6805 163.462 67.0711 163.071C67.4616 162.681 67.4616 162.047 67.0711 161.657L61.4142 156L67.0711 150.343C67.4616 149.953 67.4616 149.319 67.0711 148.929C66.6805 148.538 66.0474 148.538 65.6569 148.929L59.2929 155.293ZM74 155H60V157H74V155Z" fill="white"/>
<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 56 114)" fill="#16417D"/>
<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 56 114)" stroke="white"/>
<path d="M59.2929 103.293C58.9024 103.683 58.9024 104.317 59.2929 104.707L65.6569 111.071C66.0474 111.462 66.6805 111.462 67.0711 111.071C67.4616 110.681 67.4616 110.047 67.0711 109.657L61.4142 104L67.0711 98.3431C67.4616 97.9526 67.4616 97.3195 67.0711 96.9289C66.6805 96.5384 66.0474 96.5384 65.6569 96.9289L59.2929 103.293ZM74 103H60V105H74V103Z" fill="white"/>
<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 56 62)" fill="#16417D"/>
<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 56 62)" stroke="white"/>
<path d="M59.2929 51.2929C58.9024 51.6834 58.9024 52.3166 59.2929 52.7071L65.6569 59.0711C66.0474 59.4616 66.6805 59.4616 67.0711 59.0711C67.4616 58.6805 67.4616 58.0474 67.0711 57.6569L61.4142 52L67.0711 46.3431C67.4616 45.9526 67.4616 45.3195 67.0711 44.9289C66.6805 44.5384 66.0474 44.5384 65.6569 44.9289L59.2929 51.2929ZM74 51H60V53H74V51Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_4200_3427">
<rect width="352" height="209" rx="2" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

115
public/static/images/canvas/additional-edit02.svg Normal file
View File

@ -0,0 +1,115 @@
<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4200_3217)">
<mask id="mask0_4200_3217" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
</mask>
<g mask="url(#mask0_4200_3217)">
<rect x="-41" width="798" height="1" fill="#444444"/>
<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
</g>
<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
<mask id="path-40-inside-1_4200_3217" fill="white">
<path d="M31 26H102.25V78H31V26Z"/>
</mask>
<path d="M31 26H102.25V78H31V26Z" fill="#16417D"/>
<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H102.25V25H31V27ZM102.25 77H31V79H102.25V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_3217)"/>
<rect x="104.75" y="28.5" width="66.25" height="47" fill="#16417D"/>
<rect x="104.75" y="28.5" width="66.25" height="47" stroke="#EA10AC" stroke-width="5"/>
<rect x="176" y="28.5" width="66.25" height="47" fill="#001027"/>
<rect x="176" y="28.5" width="66.25" height="47" stroke="white" stroke-width="5"/>
<mask id="path-44-inside-2_4200_3217" fill="white">
<path d="M244.75 26H316V78H244.75V26Z"/>
</mask>
<path d="M244.75 26H316V78H244.75V26Z" fill="#16417D"/>
<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM244.75 27H316V25H244.75V27ZM315 26V78H317V26H315ZM316 77H244.75V79H316V77Z" fill="#00183B" mask="url(#path-44-inside-2_4200_3217)"/>
<mask id="path-46-inside-3_4200_3217" fill="white">
<path d="M31 78H102.25V130H31V78Z"/>
</mask>
<path d="M31 78H102.25V130H31V78Z" fill="#16417D"/>
<path d="M31 130H30V131H31V130ZM102.25 129H31V131H102.25V129ZM32 130V78H30V130H32Z" fill="#00183B" mask="url(#path-46-inside-3_4200_3217)"/>
<mask id="path-48-inside-4_4200_3217" fill="white">
<path d="M102.25 78H173.5V130H102.25V78Z"/>
</mask>
<path d="M102.25 78H173.5V130H102.25V78Z" fill="#16417D"/>
<path d="M173.5 130V135H178.5V130H173.5ZM102.25 130H97.25V135H102.25V130ZM168.5 78V130H178.5V78H168.5ZM173.5 125H102.25V135H173.5V125ZM107.25 130V78H97.25V130H107.25Z" fill="#EA10AC" mask="url(#path-48-inside-4_4200_3217)"/>
<mask id="path-50-inside-5_4200_3217" fill="white">
<path d="M173.5 78H244.75V130H173.5V78Z"/>
</mask>
<path d="M173.5 78H244.75V130H173.5V78Z" fill="#001027"/>
<path d="M244.75 130V135H249.75V130H244.75ZM173.5 130H168.5V135H173.5V130ZM239.75 78V130H249.75V78H239.75ZM244.75 125H173.5V135H244.75V125ZM178.5 130V78H168.5V130H178.5Z" fill="white" mask="url(#path-50-inside-5_4200_3217)"/>
<mask id="path-52-inside-6_4200_3217" fill="white">
<path d="M244.75 78H316V130H244.75V78Z"/>
</mask>
<path d="M244.75 78H316V130H244.75V78Z" fill="#16417D"/>
<path d="M316 130V131H317V130H316ZM315 78V130H317V78H315ZM316 129H244.75V131H316V129Z" fill="#00183B" mask="url(#path-52-inside-6_4200_3217)"/>
<mask id="path-54-inside-7_4200_3217" fill="white">
<path d="M31 130H102.25V182H31V130Z"/>
</mask>
<path d="M31 130H102.25V182H31V130Z" fill="#16417D"/>
<path d="M31 182H30V183H31V182ZM102.25 181H31V183H102.25V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-54-inside-7_4200_3217)"/>
<mask id="path-56-inside-8_4200_3217" fill="white">
<path d="M102.25 130H173.5V182H102.25V130Z"/>
</mask>
<path d="M102.25 130H173.5V182H102.25V130Z" fill="#16417D"/>
<path d="M173.5 182V187H178.5V182H173.5ZM102.25 182H97.25V187H102.25V182ZM168.5 130V182H178.5V130H168.5ZM173.5 177H102.25V187H173.5V177ZM107.25 182V130H97.25V182H107.25Z" fill="#EA10AC" mask="url(#path-56-inside-8_4200_3217)"/>
<mask id="path-58-inside-9_4200_3217" fill="white">
<path d="M173.5 130H244.75V182H173.5V130Z"/>
</mask>
<path d="M173.5 130H244.75V182H173.5V130Z" fill="#001027"/>
<path d="M244.75 182V187H249.75V182H244.75ZM173.5 182H168.5V187H173.5V182ZM239.75 130V182H249.75V130H239.75ZM244.75 177H173.5V187H244.75V177ZM178.5 182V130H168.5V182H178.5Z" fill="white" mask="url(#path-58-inside-9_4200_3217)"/>
<mask id="path-60-inside-10_4200_3217" fill="white">
<path d="M244.75 130H316V182H244.75V130Z"/>
</mask>
<path d="M244.75 130H316V182H244.75V130Z" fill="#16417D"/>
<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H244.75V183H316V181Z" fill="#00183B" mask="url(#path-60-inside-10_4200_3217)"/>
<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 290 41)" fill="#16417D"/>
<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 290 41)" stroke="white"/>
<path d="M287.707 52.7071C288.098 52.3166 288.098 51.6834 287.707 51.2929L281.343 44.9289C280.953 44.5384 280.319 44.5384 279.929 44.9289C279.538 45.3195 279.538 45.9526 279.929 46.3431L285.586 52L279.929 57.6569C279.538 58.0474 279.538 58.6805 279.929 59.0711C280.319 59.4616 280.953 59.4616 281.343 59.0711L287.707 52.7071ZM273 53H287V51H273V53Z" fill="white"/>
<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 290 93)" fill="#16417D"/>
<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 290 93)" stroke="white"/>
<path d="M287.707 104.707C288.098 104.317 288.098 103.683 287.707 103.293L281.343 96.9289C280.953 96.5384 280.319 96.5384 279.929 96.9289C279.538 97.3195 279.538 97.9526 279.929 98.3431L285.586 104L279.929 109.657C279.538 110.047 279.538 110.681 279.929 111.071C280.319 111.462 280.953 111.462 281.343 111.071L287.707 104.707ZM273 105H287V103H273V105Z" fill="white"/>
<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 290 145)" fill="#16417D"/>
<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 290 145)" stroke="white"/>
<path d="M287.707 156.707C288.098 156.317 288.098 155.683 287.707 155.293L281.343 148.929C280.953 148.538 280.319 148.538 279.929 148.929C279.538 149.319 279.538 149.953 279.929 150.343L285.586 156L279.929 161.657C279.538 162.047 279.538 162.681 279.929 163.071C280.319 163.462 280.953 163.462 281.343 163.071L287.707 156.707ZM273 157H287V155H273V157Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_4200_3217">
<rect width="352" height="209" rx="2" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

106
public/static/images/canvas/additional_bundle-del01.svg Normal file
View File

@ -0,0 +1,106 @@
<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4200_3872)">
<mask id="mask0_4200_3872" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
</mask>
<g mask="url(#mask0_4200_3872)">
<rect x="-41" width="798" height="1" fill="#444444"/>
<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
</g>
<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
<mask id="path-40-inside-1_4200_3872" fill="white">
<path d="M31 26H126V78H31V26Z"/>
</mask>
<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_3872)"/>
<mask id="path-42-inside-2_4200_3872" fill="white">
<path d="M126 26H221V78H126V26Z"/>
</mask>
<path d="M126 26H221V78H126V26Z" fill="#16417D"/>
<path d="M126 26V25H125V26H126ZM221 26H222V25H221V26ZM221 78V79H222V78H221ZM126 78H125V79H126V78ZM126 27H221V25H126V27ZM220 26V78H222V26H220ZM221 77H126V79H221V77ZM127 78V26H125V78H127Z" fill="#00183B" mask="url(#path-42-inside-2_4200_3872)"/>
<mask id="path-44-inside-3_4200_3872" fill="white">
<path d="M221 26H316V78H221V26Z"/>
</mask>
<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-44-inside-3_4200_3872)"/>
<mask id="path-46-inside-4_4200_3872" fill="white">
<path d="M31 78H126V130H31V78Z"/>
</mask>
<path d="M31 78H126V130H31V78Z" fill="#16417D"/>
<path d="M31 78V73H26V78H31ZM126 78H131V73H126V78ZM126 130V135H131V130H126ZM31 130H26V135H31V130ZM31 83H126V73H31V83ZM121 78V130H131V78H121ZM126 125H31V135H126V125ZM36 130V78H26V130H36Z" fill="#EA10AC" mask="url(#path-46-inside-4_4200_3872)"/>
<mask id="path-48-inside-5_4200_3872" fill="white">
<path d="M126 78H221V130H126V78Z"/>
</mask>
<path d="M126 78H221V130H126V78Z" fill="#16417D"/>
<path d="M221 78H226V73H221V78ZM221 130V135H226V130H221ZM126 83H221V73H126V83ZM216 78V130H226V78H216ZM221 125H126V135H221V125Z" fill="#EA10AC" mask="url(#path-48-inside-5_4200_3872)"/>
<mask id="path-50-inside-6_4200_3872" fill="white">
<path d="M221 78H316V130H221V78Z"/>
</mask>
<path d="M221 78H316V130H221V78Z" fill="#16417D"/>
<path d="M316 78H321V73H316V78ZM316 130V135H321V130H316ZM221 83H316V73H221V83ZM311 78V130H321V78H311ZM316 125H221V135H316V125Z" fill="#EA10AC" mask="url(#path-50-inside-6_4200_3872)"/>
<mask id="path-52-inside-7_4200_3872" fill="white">
<path d="M31 130H126V182H31V130Z"/>
</mask>
<path d="M31 130H126V182H31V130Z" fill="#16417D"/>
<path d="M31 182H30V183H31V182ZM126 181H31V183H126V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-52-inside-7_4200_3872)"/>
<mask id="path-54-inside-8_4200_3872" fill="white">
<path d="M126 130H221V182H126V130Z"/>
</mask>
<path d="M126 130H221V182H126V130Z" fill="#16417D"/>
<path d="M221 182V183H222V182H221ZM126 182H125V183H126V182ZM220 130V182H222V130H220ZM221 181H126V183H221V181ZM127 182V130H125V182H127Z" fill="#00183B" mask="url(#path-54-inside-8_4200_3872)"/>
<mask id="path-56-inside-9_4200_3872" fill="white">
<path d="M221 130H316V182H221V130Z"/>
</mask>
<path d="M221 130H316V182H221V130Z" fill="#16417D"/>
<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H221V183H316V181Z" fill="#00183B" mask="url(#path-56-inside-9_4200_3872)"/>
<rect x="87.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 87.5 145.5)" fill="#16417D"/>
<rect x="87.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 87.5 145.5)" stroke="white"/>
<path d="M76.2929 148.293C76.6834 147.902 77.3166 147.902 77.7071 148.293L84.0711 154.657C84.4616 155.047 84.4616 155.681 84.0711 156.071C83.6805 156.462 83.0474 156.462 82.6569 156.071L77 150.414L71.3431 156.071C70.9526 156.462 70.3195 156.462 69.9289 156.071C69.5384 155.681 69.5384 155.047 69.9289 154.657L76.2929 148.293ZM76 163V149H78V163H76Z" fill="white"/>
<rect x="181.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 181.5 145.5)" fill="#16417D"/>
<rect x="181.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 181.5 145.5)" stroke="white"/>
<path d="M170.293 148.293C170.683 147.902 171.317 147.902 171.707 148.293L178.071 154.657C178.462 155.047 178.462 155.681 178.071 156.071C177.681 156.462 177.047 156.462 176.657 156.071L171 150.414L165.343 156.071C164.953 156.462 164.319 156.462 163.929 156.071C163.538 155.681 163.538 155.047 163.929 154.657L170.293 148.293ZM170 163V149H172V163H170Z" fill="white"/>
<rect x="277.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 277.5 145.5)" fill="#16417D"/>
<rect x="277.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 277.5 145.5)" stroke="white"/>
<path d="M266.293 148.293C266.683 147.902 267.317 147.902 267.707 148.293L274.071 154.657C274.462 155.047 274.462 155.681 274.071 156.071C273.681 156.462 273.047 156.462 272.657 156.071L267 150.414L261.343 156.071C260.953 156.462 260.319 156.462 259.929 156.071C259.538 155.681 259.538 155.047 259.929 154.657L266.293 148.293ZM266 163V149H268V163H266Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_4200_3872">
<rect width="352" height="209" rx="2" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.1 KiB

106
public/static/images/canvas/additional_bundle-del02.svg Normal file
View File

@ -0,0 +1,106 @@
<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4200_4066)">
<mask id="mask0_4200_4066" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
</mask>
<g mask="url(#mask0_4200_4066)">
<rect x="-41" width="798" height="1" fill="#444444"/>
<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
</g>
<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
<mask id="path-40-inside-1_4200_4066" fill="white">
<path d="M31 26H126V78H31V26Z"/>
</mask>
<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_4066)"/>
<mask id="path-42-inside-2_4200_4066" fill="white">
<path d="M126 26H221V78H126V26Z"/>
</mask>
<path d="M126 26H221V78H126V26Z" fill="#16417D"/>
<path d="M126 26V25H125V26H126ZM221 26H222V25H221V26ZM221 78V79H222V78H221ZM126 78H125V79H126V78ZM126 27H221V25H126V27ZM220 26V78H222V26H220ZM221 77H126V79H221V77ZM127 78V26H125V78H127Z" fill="#00183B" mask="url(#path-42-inside-2_4200_4066)"/>
<mask id="path-44-inside-3_4200_4066" fill="white">
<path d="M221 26H316V78H221V26Z"/>
</mask>
<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-44-inside-3_4200_4066)"/>
<mask id="path-46-inside-4_4200_4066" fill="white">
<path d="M31 78H126V130H31V78Z"/>
</mask>
<path d="M31 78H126V130H31V78Z" fill="#16417D"/>
<path d="M31 78V73H26V78H31ZM126 78H131V73H126V78ZM126 130V135H131V130H126ZM31 130H26V135H31V130ZM31 83H126V73H31V83ZM121 78V130H131V78H121ZM126 125H31V135H126V125ZM36 130V78H26V130H36Z" fill="#EA10AC" mask="url(#path-46-inside-4_4200_4066)"/>
<mask id="path-48-inside-5_4200_4066" fill="white">
<path d="M126 78H221V130H126V78Z"/>
</mask>
<path d="M126 78H221V130H126V78Z" fill="#16417D"/>
<path d="M221 78H226V73H221V78ZM221 130V135H226V130H221ZM126 83H221V73H126V83ZM216 78V130H226V78H216ZM221 125H126V135H221V125Z" fill="#EA10AC" mask="url(#path-48-inside-5_4200_4066)"/>
<mask id="path-50-inside-6_4200_4066" fill="white">
<path d="M221 78H316V130H221V78Z"/>
</mask>
<path d="M221 78H316V130H221V78Z" fill="#16417D"/>
<path d="M316 78H321V73H316V78ZM316 130V135H321V130H316ZM221 83H316V73H221V83ZM311 78V130H321V78H311ZM316 125H221V135H316V125Z" fill="#EA10AC" mask="url(#path-50-inside-6_4200_4066)"/>
<mask id="path-52-inside-7_4200_4066" fill="white">
<path d="M31 130H126V182H31V130Z"/>
</mask>
<path d="M31 130H126V182H31V130Z" fill="#16417D"/>
<path d="M31 182H30V183H31V182ZM126 181H31V183H126V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-52-inside-7_4200_4066)"/>
<mask id="path-54-inside-8_4200_4066" fill="white">
<path d="M126 130H221V182H126V130Z"/>
</mask>
<path d="M126 130H221V182H126V130Z" fill="#16417D"/>
<path d="M221 182V183H222V182H221ZM126 182H125V183H126V182ZM220 130V182H222V130H220ZM221 181H126V183H221V181ZM127 182V130H125V182H127Z" fill="#00183B" mask="url(#path-54-inside-8_4200_4066)"/>
<mask id="path-56-inside-9_4200_4066" fill="white">
<path d="M221 130H316V182H221V130Z"/>
</mask>
<path d="M221 130H316V182H221V130Z" fill="#16417D"/>
<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H221V183H316V181Z" fill="#00183B" mask="url(#path-56-inside-9_4200_4066)"/>
<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 87 64)" fill="#16417D"/>
<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 87 64)" stroke="white"/>
<path d="M76.2929 61.7071C76.6834 62.0976 77.3166 62.0976 77.7071 61.7071L84.0711 55.3431C84.4616 54.9526 84.4616 54.3195 84.0711 53.9289C83.6805 53.5384 83.0474 53.5384 82.6569 53.9289L77 59.5858L71.3431 53.9289C70.9526 53.5384 70.3195 53.5384 69.9289 53.9289C69.5384 54.3195 69.5384 54.9526 69.9289 55.3431L76.2929 61.7071ZM76 47V61H78V47H76Z" fill="white"/>
<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 181 64)" fill="#16417D"/>
<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 181 64)" stroke="white"/>
<path d="M170.293 61.7071C170.683 62.0976 171.317 62.0976 171.707 61.7071L178.071 55.3431C178.462 54.9526 178.462 54.3195 178.071 53.9289C177.681 53.5384 177.047 53.5384 176.657 53.9289L171 59.5858L165.343 53.9289C164.953 53.5384 164.319 53.5384 163.929 53.9289C163.538 54.3195 163.538 54.9526 163.929 55.3431L170.293 61.7071ZM170 47V61H172V47H170Z" fill="white"/>
<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 277 64)" fill="#16417D"/>
<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 277 64)" stroke="white"/>
<path d="M266.293 61.7071C266.683 62.0976 267.317 62.0976 267.707 61.7071L274.071 55.3431C274.462 54.9526 274.462 54.3195 274.071 53.9289C273.681 53.5384 273.047 53.5384 272.657 53.9289L267 59.5858L261.343 53.9289C260.953 53.5384 260.319 53.5384 259.929 53.9289C259.538 54.3195 259.538 54.9526 259.929 55.3431L266.293 61.7071ZM266 47V61H268V47H266Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_4200_4066">
<rect width="352" height="209" rx="2" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.1 KiB

115
public/static/images/canvas/additional_bundle-del03.svg Normal file
View File

@ -0,0 +1,115 @@
<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4200_4260)">
<mask id="mask0_4200_4260" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
</mask>
<g mask="url(#mask0_4200_4260)">
<rect x="-41" width="798" height="1" fill="#444444"/>
<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
</g>
<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
<mask id="path-40-inside-1_4200_4260" fill="white">
<path d="M31 26H126V78H31V26Z"/>
</mask>
<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_4260)"/>
<mask id="path-42-inside-2_4200_4260" fill="white">
<path d="M126 26H221V78H126V26Z"/>
</mask>
<path d="M126 26H221V78H126V26Z" fill="#16417D"/>
<path d="M126 26V25H125V26H126ZM221 26H222V25H221V26ZM221 78V79H222V78H221ZM126 78H125V79H126V78ZM126 27H221V25H126V27ZM220 26V78H222V26H220ZM221 77H126V79H221V77ZM127 78V26H125V78H127Z" fill="#00183B" mask="url(#path-42-inside-2_4200_4260)"/>
<mask id="path-44-inside-3_4200_4260" fill="white">
<path d="M221 26H316V78H221V26Z"/>
</mask>
<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-44-inside-3_4200_4260)"/>
<mask id="path-46-inside-4_4200_4260" fill="white">
<path d="M31 78H126V130H31V78Z"/>
</mask>
<path d="M31 78H126V130H31V78Z" fill="#16417D"/>
<path d="M31 78V73H26V78H31ZM126 78H131V73H126V78ZM126 130V135H131V130H126ZM31 130H26V135H31V130ZM31 83H126V73H31V83ZM121 78V130H131V78H121ZM126 125H31V135H126V125ZM36 130V78H26V130H36Z" fill="#EA10AC" mask="url(#path-46-inside-4_4200_4260)"/>
<mask id="path-48-inside-5_4200_4260" fill="white">
<path d="M126 78H221V130H126V78Z"/>
</mask>
<path d="M126 78H221V130H126V78Z" fill="#16417D"/>
<path d="M221 78H226V73H221V78ZM221 130V135H226V130H221ZM126 83H221V73H126V83ZM216 78V130H226V78H216ZM221 125H126V135H221V125Z" fill="#EA10AC" mask="url(#path-48-inside-5_4200_4260)"/>
<mask id="path-50-inside-6_4200_4260" fill="white">
<path d="M221 78H316V130H221V78Z"/>
</mask>
<path d="M221 78H316V130H221V78Z" fill="#16417D"/>
<path d="M316 78H321V73H316V78ZM316 130V135H321V130H316ZM221 83H316V73H221V83ZM311 78V130H321V78H311ZM316 125H221V135H316V125Z" fill="#EA10AC" mask="url(#path-50-inside-6_4200_4260)"/>
<mask id="path-52-inside-7_4200_4260" fill="white">
<path d="M31 130H126V182H31V130Z"/>
</mask>
<path d="M31 130H126V182H31V130Z" fill="#16417D"/>
<path d="M31 182H30V183H31V182ZM126 181H31V183H126V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-52-inside-7_4200_4260)"/>
<mask id="path-54-inside-8_4200_4260" fill="white">
<path d="M126 130H221V182H126V130Z"/>
</mask>
<path d="M126 130H221V182H126V130Z" fill="#16417D"/>
<path d="M221 182V183H222V182H221ZM126 182H125V183H126V182ZM220 130V182H222V130H220ZM221 181H126V183H221V181ZM127 182V130H125V182H127Z" fill="#00183B" mask="url(#path-54-inside-8_4200_4260)"/>
<mask id="path-56-inside-9_4200_4260" fill="white">
<path d="M221 130H316V182H221V130Z"/>
</mask>
<path d="M221 130H316V182H221V130Z" fill="#16417D"/>
<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H221V183H316V181Z" fill="#00183B" mask="url(#path-56-inside-9_4200_4260)"/>
<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 87 64)" fill="#16417D"/>
<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 87 64)" stroke="white"/>
<path d="M76.2929 61.7071C76.6834 62.0976 77.3166 62.0976 77.7071 61.7071L84.0711 55.3431C84.4616 54.9526 84.4616 54.3195 84.0711 53.9289C83.6805 53.5384 83.0474 53.5384 82.6569 53.9289L77 59.5858L71.3431 53.9289C70.9526 53.5384 70.3195 53.5384 69.9289 53.9289C69.5384 54.3195 69.5384 54.9526 69.9289 55.3431L76.2929 61.7071ZM76 47V61H78V47H76Z" fill="white"/>
<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 181 64)" fill="#16417D"/>
<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 181 64)" stroke="white"/>
<path d="M170.293 61.7071C170.683 62.0976 171.317 62.0976 171.707 61.7071L178.071 55.3431C178.462 54.9526 178.462 54.3195 178.071 53.9289C177.681 53.5384 177.047 53.5384 176.657 53.9289L171 59.5858L165.343 53.9289C164.953 53.5384 164.319 53.5384 163.929 53.9289C163.538 54.3195 163.538 54.9526 163.929 55.3431L170.293 61.7071ZM170 47V61H172V47H170Z" fill="white"/>
<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 277 64)" fill="#16417D"/>
<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 277 64)" stroke="white"/>
<path d="M266.293 61.7071C266.683 62.0976 267.317 62.0976 267.707 61.7071L274.071 55.3431C274.462 54.9526 274.462 54.3195 274.071 53.9289C273.681 53.5384 273.047 53.5384 272.657 53.9289L267 59.5858L261.343 53.9289C260.953 53.5384 260.319 53.5384 259.929 53.9289C259.538 54.3195 259.538 54.9526 259.929 55.3431L266.293 61.7071ZM266 47V61H268V47H266Z" fill="white"/>
<rect x="87.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 87.5 145.5)" fill="#16417D"/>
<rect x="87.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 87.5 145.5)" stroke="white"/>
<path d="M76.2929 148.293C76.6834 147.902 77.3166 147.902 77.7071 148.293L84.0711 154.657C84.4616 155.047 84.4616 155.681 84.0711 156.071C83.6805 156.462 83.0474 156.462 82.6569 156.071L77 150.414L71.3431 156.071C70.9526 156.462 70.3195 156.462 69.9289 156.071C69.5384 155.681 69.5384 155.047 69.9289 154.657L76.2929 148.293ZM76 163V149H78V163H76Z" fill="white"/>
<rect x="181.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 181.5 145.5)" fill="#16417D"/>
<rect x="181.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 181.5 145.5)" stroke="white"/>
<path d="M170.293 148.293C170.683 147.902 171.317 147.902 171.707 148.293L178.071 154.657C178.462 155.047 178.462 155.681 178.071 156.071C177.681 156.462 177.047 156.462 176.657 156.071L171 150.414L165.343 156.071C164.953 156.462 164.319 156.462 163.929 156.071C163.538 155.681 163.538 155.047 163.929 154.657L170.293 148.293ZM170 163V149H172V163H170Z" fill="white"/>
<rect x="277.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 277.5 145.5)" fill="#16417D"/>
<rect x="277.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 277.5 145.5)" stroke="white"/>
<path d="M266.293 148.293C266.683 147.902 267.317 147.902 267.707 148.293L274.071 154.657C274.462 155.047 274.462 155.681 274.071 156.071C273.681 156.462 273.047 156.462 272.657 156.071L267 150.414L261.343 156.071C260.953 156.462 260.319 156.462 259.929 156.071C259.538 155.681 259.538 155.047 259.929 154.657L266.293 148.293ZM266 163V149H268V163H266Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_4200_4260">
<rect width="352" height="209" rx="2" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

97
public/static/images/canvas/additional_bundle-del04.svg Normal file
View File

@ -0,0 +1,97 @@
<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4200_3677)">
<mask id="mask0_4200_3677" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
</mask>
<g mask="url(#mask0_4200_3677)">
<rect x="-41" width="798" height="1" fill="#444444"/>
<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
</g>
<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
<mask id="path-40-inside-1_4200_3677" fill="white">
<path d="M31 26H126V78H31V26Z"/>
</mask>
<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_3677)"/>
<mask id="path-42-inside-2_4200_3677" fill="white">
<path d="M126 26H221V78H126V26Z"/>
</mask>
<path d="M126 26H221V78H126V26Z" fill="#16417D"/>
<path d="M126 26V25H125V26H126ZM221 26H222V25H221V26ZM221 78V79H222V78H221ZM126 78H125V79H126V78ZM126 27H221V25H126V27ZM220 26V78H222V26H220ZM221 77H126V79H221V77ZM127 78V26H125V78H127Z" fill="#00183B" mask="url(#path-42-inside-2_4200_3677)"/>
<mask id="path-44-inside-3_4200_3677" fill="white">
<path d="M221 26H316V78H221V26Z"/>
</mask>
<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-44-inside-3_4200_3677)"/>
<mask id="path-46-inside-4_4200_3677" fill="white">
<path d="M31 78H126V130H31V78Z"/>
</mask>
<path d="M31 78H126V130H31V78Z" fill="#16417D"/>
<path d="M31 78V73H26V78H31ZM126 78H131V73H126V78ZM126 130V135H131V130H126ZM31 130H26V135H31V130ZM31 83H126V73H31V83ZM121 78V130H131V78H121ZM126 125H31V135H126V125ZM36 130V78H26V130H36Z" fill="#EA10AC" mask="url(#path-46-inside-4_4200_3677)"/>
<mask id="path-48-inside-5_4200_3677" fill="white">
<path d="M126 78H221V130H126V78Z"/>
</mask>
<path d="M126 78H221V130H126V78Z" fill="#16417D"/>
<path d="M221 78H226V73H221V78ZM221 130V135H226V130H221ZM126 83H221V73H126V83ZM216 78V130H226V78H216ZM221 125H126V135H221V125Z" fill="#EA10AC" mask="url(#path-48-inside-5_4200_3677)"/>
<mask id="path-50-inside-6_4200_3677" fill="white">
<path d="M221 78H316V130H221V78Z"/>
</mask>
<path d="M221 78H316V130H221V78Z" fill="#16417D"/>
<path d="M316 78H321V73H316V78ZM316 130V135H321V130H316ZM221 83H316V73H221V83ZM311 78V130H321V78H311ZM316 125H221V135H316V125Z" fill="#EA10AC" mask="url(#path-50-inside-6_4200_3677)"/>
<mask id="path-52-inside-7_4200_3677" fill="white">
<path d="M31 130H126V182H31V130Z"/>
</mask>
<path d="M31 130H126V182H31V130Z" fill="#16417D"/>
<path d="M31 182H30V183H31V182ZM126 181H31V183H126V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-52-inside-7_4200_3677)"/>
<mask id="path-54-inside-8_4200_3677" fill="white">
<path d="M126 130H221V182H126V130Z"/>
</mask>
<path d="M126 130H221V182H126V130Z" fill="#16417D"/>
<path d="M221 182V183H222V182H221ZM126 182H125V183H126V182ZM220 130V182H222V130H220ZM221 181H126V183H221V181ZM127 182V130H125V182H127Z" fill="#00183B" mask="url(#path-54-inside-8_4200_3677)"/>
<mask id="path-56-inside-9_4200_3677" fill="white">
<path d="M221 130H316V182H221V130Z"/>
</mask>
<path d="M221 130H316V182H221V130Z" fill="#16417D"/>
<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H221V183H316V181Z" fill="#00183B" mask="url(#path-56-inside-9_4200_3677)"/>
</g>
<defs>
<clipPath id="clip0_4200_3677">
<rect width="352" height="209" rx="2" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

124
public/static/images/canvas/additional_bundle-edit01.svg Normal file
View File

@ -0,0 +1,124 @@
<svg width="352" height="257" viewBox="0 0 352 257" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4200_4645)">
<mask id="mask0_4200_4645" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
</mask>
<g mask="url(#mask0_4200_4645)">
<rect x="-41" width="798" height="1" fill="#444444"/>
<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
<rect x="-41" y="224" width="798" height="1" fill="#444444"/>
<rect x="-41" y="240" width="798" height="1" fill="#444444"/>
<rect x="-41" y="256" width="798" height="1" fill="#444444"/>
<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
</g>
<rect x="13" y="9" width="323" height="240" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
<mask id="path-43-inside-1_4200_4645" fill="white">
<path d="M31 26H126V78H31V26Z"/>
</mask>
<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-43-inside-1_4200_4645)"/>
<mask id="path-45-inside-2_4200_4645" fill="white">
<path d="M126 26H221V78H126V26Z"/>
</mask>
<path d="M126 26H221V78H126V26Z" fill="#16417D"/>
<path d="M126 26V25H125V26H126ZM221 26H222V25H221V26ZM221 78V79H222V78H221ZM126 78H125V79H126V78ZM126 27H221V25H126V27ZM220 26V78H222V26H220ZM221 77H126V79H221V77ZM127 78V26H125V78H127Z" fill="#00183B" mask="url(#path-45-inside-2_4200_4645)"/>
<mask id="path-47-inside-3_4200_4645" fill="white">
<path d="M221 26H316V78H221V26Z"/>
</mask>
<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-47-inside-3_4200_4645)"/>
<mask id="path-49-inside-4_4200_4645" fill="white">
<path d="M31 78H126V130H31V78Z"/>
</mask>
<path d="M31 78H126V130H31V78Z" fill="#001027"/>
<path d="M31 78V73H26V78H31ZM126 78H131V73H126V78ZM126 130V135H131V130H126ZM31 130H26V135H31V130ZM31 83H126V73H31V83ZM121 78V130H131V78H121ZM126 125H31V135H126V125ZM36 130V78H26V130H36Z" fill="white" mask="url(#path-49-inside-4_4200_4645)"/>
<mask id="path-51-inside-5_4200_4645" fill="white">
<path d="M126 78H221V130H126V78Z"/>
</mask>
<path d="M126 78H221V130H126V78Z" fill="#001027"/>
<path d="M221 78H226V73H221V78ZM221 130V135H226V130H221ZM126 83H221V73H126V83ZM216 78V130H226V78H216ZM221 125H126V135H221V125Z" fill="white" mask="url(#path-51-inside-5_4200_4645)"/>
<mask id="path-53-inside-6_4200_4645" fill="white">
<path d="M221 78H316V130H221V78Z"/>
</mask>
<path d="M221 78H316V130H221V78Z" fill="#001027"/>
<path d="M316 78H321V73H316V78ZM316 130V135H321V130H316ZM221 83H316V73H221V83ZM311 78V130H321V78H311ZM316 125H221V135H316V125Z" fill="white" mask="url(#path-53-inside-6_4200_4645)"/>
<mask id="path-55-inside-7_4200_4645" fill="white">
<path d="M31 130H126V182H31V130Z"/>
</mask>
<path d="M31 130H126V182H31V130Z" fill="#16417D"/>
<path d="M31 130V125H26V130H31ZM126 130H131V125H126V130ZM126 182V187H131V182H126ZM31 182H26V187H31V182ZM31 135H126V125H31V135ZM121 130V182H131V130H121ZM126 177H31V187H126V177ZM36 182V130H26V182H36Z" fill="#EA10AC" mask="url(#path-55-inside-7_4200_4645)"/>
<mask id="path-57-inside-8_4200_4645" fill="white">
<path d="M126 130H221V182H126V130Z"/>
</mask>
<path d="M126 130H221V182H126V130Z" fill="#16417D"/>
<path d="M221 130H226V125H221V130ZM221 182V187H226V182H221ZM126 135H221V125H126V135ZM216 130V182H226V130H216ZM221 177H126V187H221V177Z" fill="#EA10AC" mask="url(#path-57-inside-8_4200_4645)"/>
<mask id="path-59-inside-9_4200_4645" fill="white">
<path d="M221 130H316V182H221V130Z"/>
</mask>
<path d="M221 130H316V182H221V130Z" fill="#16417D"/>
<path d="M316 130H321V125H316V130ZM316 182V187H321V182H316ZM221 135H316V125H221V135ZM311 130V182H321V130H311ZM316 177H221V187H316V177Z" fill="#EA10AC" mask="url(#path-59-inside-9_4200_4645)"/>
<mask id="path-61-inside-10_4200_4645" fill="white">
<path d="M31 182H126V234H31V182Z"/>
</mask>
<path d="M31 182H126V234H31V182Z" fill="#16417D"/>
<path d="M31 234H30V235H31V234ZM126 233H31V235H126V233ZM32 234V182H30V234H32Z" fill="#00183B" mask="url(#path-61-inside-10_4200_4645)"/>
<mask id="path-63-inside-11_4200_4645" fill="white">
<path d="M126 182H221V234H126V182Z"/>
</mask>
<path d="M126 182H221V234H126V182Z" fill="#16417D"/>
<path d="M221 234V235H222V234H221ZM126 234H125V235H126V234ZM220 182V234H222V182H220ZM221 233H126V235H221V233ZM127 234V182H125V234H127Z" fill="#00183B" mask="url(#path-63-inside-11_4200_4645)"/>
<mask id="path-65-inside-12_4200_4645" fill="white">
<path d="M221 182H316V234H221V182Z"/>
</mask>
<path d="M221 182H316V234H221V182Z" fill="#16417D"/>
<path d="M316 234V235H317V234H316ZM315 182V234H317V182H315ZM316 233H221V235H316V233Z" fill="#00183B" mask="url(#path-65-inside-12_4200_4645)"/>
<rect x="87.5" y="43.5" width="21" height="21" rx="10.5" transform="rotate(90 87.5 43.5)" fill="#16417D"/>
<rect x="87.5" y="43.5" width="21" height="21" rx="10.5" transform="rotate(90 87.5 43.5)" stroke="white"/>
<path d="M76.2929 46.2929C76.6834 45.9024 77.3166 45.9024 77.7071 46.2929L84.0711 52.6569C84.4616 53.0474 84.4616 53.6805 84.0711 54.0711C83.6805 54.4616 83.0474 54.4616 82.6569 54.0711L77 48.4142L71.3431 54.0711C70.9526 54.4616 70.3195 54.4616 69.9289 54.0711C69.5384 53.6805 69.5384 53.0474 69.9289 52.6569L76.2929 46.2929ZM76 61V47H78V61H76Z" fill="white"/>
<rect x="181.5" y="43.5" width="21" height="21" rx="10.5" transform="rotate(90 181.5 43.5)" fill="#16417D"/>
<rect x="181.5" y="43.5" width="21" height="21" rx="10.5" transform="rotate(90 181.5 43.5)" stroke="white"/>
<path d="M170.293 46.2929C170.683 45.9024 171.317 45.9024 171.707 46.2929L178.071 52.6569C178.462 53.0474 178.462 53.6805 178.071 54.0711C177.681 54.4616 177.047 54.4616 176.657 54.0711L171 48.4142L165.343 54.0711C164.953 54.4616 164.319 54.4616 163.929 54.0711C163.538 53.6805 163.538 53.0474 163.929 52.6569L170.293 46.2929ZM170 61V47H172V61H170Z" fill="white"/>
<rect x="277.5" y="43.5" width="21" height="21" rx="10.5" transform="rotate(90 277.5 43.5)" fill="#16417D"/>
<rect x="277.5" y="43.5" width="21" height="21" rx="10.5" transform="rotate(90 277.5 43.5)" stroke="white"/>
<path d="M266.293 46.2929C266.683 45.9024 267.317 45.9024 267.707 46.2929L274.071 52.6569C274.462 53.0474 274.462 53.6805 274.071 54.0711C273.681 54.4616 273.047 54.4616 272.657 54.0711L267 48.4142L261.343 54.0711C260.953 54.4616 260.319 54.4616 259.929 54.0711C259.538 53.6805 259.538 53.0474 259.929 52.6569L266.293 46.2929ZM266 61V47H268V61H266Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_4200_4645">
<rect width="352" height="257" rx="2" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

124
public/static/images/canvas/additional_bundle-edit02.svg Normal file
View File

@ -0,0 +1,124 @@
<svg width="352" height="257" viewBox="0 0 352 257" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4200_4454)">
<mask id="mask0_4200_4454" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
</mask>
<g mask="url(#mask0_4200_4454)">
<rect x="-41" width="798" height="1" fill="#444444"/>
<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
<rect x="-41" y="224" width="798" height="1" fill="#444444"/>
<rect x="-41" y="240" width="798" height="1" fill="#444444"/>
<rect x="-41" y="256" width="798" height="1" fill="#444444"/>
<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
</g>
<rect x="13" y="9" width="323" height="240" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
<mask id="path-43-inside-1_4200_4454" fill="white">
<path d="M31 26H126V78H31V26Z"/>
</mask>
<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-43-inside-1_4200_4454)"/>
<mask id="path-45-inside-2_4200_4454" fill="white">
<path d="M126 26H221V78H126V26Z"/>
</mask>
<path d="M126 26H221V78H126V26Z" fill="#16417D"/>
<path d="M126 26V25H125V26H126ZM221 26H222V25H221V26ZM221 78V79H222V78H221ZM126 78H125V79H126V78ZM126 27H221V25H126V27ZM220 26V78H222V26H220ZM221 77H126V79H221V77ZM127 78V26H125V78H127Z" fill="#00183B" mask="url(#path-45-inside-2_4200_4454)"/>
<mask id="path-47-inside-3_4200_4454" fill="white">
<path d="M221 26H316V78H221V26Z"/>
</mask>
<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-47-inside-3_4200_4454)"/>
<mask id="path-49-inside-4_4200_4454" fill="white">
<path d="M31 78H126V130H31V78Z"/>
</mask>
<path d="M31 78H126V130H31V78Z" fill="#16417D"/>
<path d="M31 78V73H26V78H31ZM126 78H131V73H126V78ZM126 130V135H131V130H126ZM31 130H26V135H31V130ZM31 83H126V73H31V83ZM121 78V130H131V78H121ZM126 125H31V135H126V125ZM36 130V78H26V130H36Z" fill="#EA10AC" mask="url(#path-49-inside-4_4200_4454)"/>
<mask id="path-51-inside-5_4200_4454" fill="white">
<path d="M126 78H221V130H126V78Z"/>
</mask>
<path d="M126 78H221V130H126V78Z" fill="#16417D"/>
<path d="M221 78H226V73H221V78ZM221 130V135H226V130H221ZM126 83H221V73H126V83ZM216 78V130H226V78H216ZM221 125H126V135H221V125Z" fill="#EA10AC" mask="url(#path-51-inside-5_4200_4454)"/>
<mask id="path-53-inside-6_4200_4454" fill="white">
<path d="M221 78H316V130H221V78Z"/>
</mask>
<path d="M221 78H316V130H221V78Z" fill="#16417D"/>
<path d="M316 78H321V73H316V78ZM316 130V135H321V130H316ZM221 83H316V73H221V83ZM311 78V130H321V78H311ZM316 125H221V135H316V125Z" fill="#EA10AC" mask="url(#path-53-inside-6_4200_4454)"/>
<mask id="path-55-inside-7_4200_4454" fill="white">
<path d="M31 130H126V182H31V130Z"/>
</mask>
<path d="M31 130H126V182H31V130Z" fill="#001027"/>
<path d="M31 130V125H26V130H31ZM126 130H131V125H126V130ZM126 182V187H131V182H126ZM31 182H26V187H31V182ZM31 135H126V125H31V135ZM121 130V182H131V130H121ZM126 177H31V187H126V177ZM36 182V130H26V182H36Z" fill="white" mask="url(#path-55-inside-7_4200_4454)"/>
<mask id="path-57-inside-8_4200_4454" fill="white">
<path d="M126 130H221V182H126V130Z"/>
</mask>
<path d="M126 130H221V182H126V130Z" fill="#001027"/>
<path d="M221 130H226V125H221V130ZM221 182V187H226V182H221ZM126 135H221V125H126V135ZM216 130V182H226V130H216ZM221 177H126V187H221V177Z" fill="white" mask="url(#path-57-inside-8_4200_4454)"/>
<mask id="path-59-inside-9_4200_4454" fill="white">
<path d="M221 130H316V182H221V130Z"/>
</mask>
<path d="M221 130H316V182H221V130Z" fill="#001027"/>
<path d="M316 130H321V125H316V130ZM316 182V187H321V182H316ZM221 135H316V125H221V135ZM311 130V182H321V130H311ZM316 177H221V187H316V177Z" fill="white" mask="url(#path-59-inside-9_4200_4454)"/>
<mask id="path-61-inside-10_4200_4454" fill="white">
<path d="M31 182H126V234H31V182Z"/>
</mask>
<path d="M31 182H126V234H31V182Z" fill="#16417D"/>
<path d="M31 234H30V235H31V234ZM126 233H31V235H126V233ZM32 234V182H30V234H32Z" fill="#00183B" mask="url(#path-61-inside-10_4200_4454)"/>
<mask id="path-63-inside-11_4200_4454" fill="white">
<path d="M126 182H221V234H126V182Z"/>
</mask>
<path d="M126 182H221V234H126V182Z" fill="#16417D"/>
<path d="M221 234V235H222V234H221ZM126 234H125V235H126V234ZM220 182V234H222V182H220ZM221 233H126V235H221V233ZM127 234V182H125V234H127Z" fill="#00183B" mask="url(#path-63-inside-11_4200_4454)"/>
<mask id="path-65-inside-12_4200_4454" fill="white">
<path d="M221 182H316V234H221V182Z"/>
</mask>
<path d="M221 182H316V234H221V182Z" fill="#16417D"/>
<path d="M316 234V235H317V234H316ZM315 182V234H317V182H315ZM316 233H221V235H316V233Z" fill="#00183B" mask="url(#path-65-inside-12_4200_4454)"/>
<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 87 218)" fill="#16417D"/>
<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 87 218)" stroke="white"/>
<path d="M76.2929 215.707C76.6834 216.098 77.3166 216.098 77.7071 215.707L84.0711 209.343C84.4616 208.953 84.4616 208.319 84.0711 207.929C83.6805 207.538 83.0474 207.538 82.6569 207.929L77 213.586L71.3431 207.929C70.9526 207.538 70.3195 207.538 69.9289 207.929C69.5384 208.319 69.5384 208.953 69.9289 209.343L76.2929 215.707ZM76 201V215H78V201H76Z" fill="white"/>
<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 181 218)" fill="#16417D"/>
<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 181 218)" stroke="white"/>
<path d="M170.293 215.707C170.683 216.098 171.317 216.098 171.707 215.707L178.071 209.343C178.462 208.953 178.462 208.319 178.071 207.929C177.681 207.538 177.047 207.538 176.657 207.929L171 213.586L165.343 207.929C164.953 207.538 164.319 207.538 163.929 207.929C163.538 208.319 163.538 208.953 163.929 209.343L170.293 215.707ZM170 201V215H172V201H170Z" fill="white"/>
<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 277 218)" fill="#16417D"/>
<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 277 218)" stroke="white"/>
<path d="M266.293 215.707C266.683 216.098 267.317 216.098 267.707 215.707L274.071 209.343C274.462 208.953 274.462 208.319 274.071 207.929C273.681 207.538 273.047 207.538 272.657 207.929L267 213.586L261.343 207.929C260.953 207.538 260.319 207.538 259.929 207.929C259.538 208.319 259.538 208.953 259.929 209.343L266.293 215.707ZM266 201V215H268V201H266Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_4200_4454">
<rect width="352" height="257" rx="2" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.4 KiB

103
public/static/images/canvas/additional_del01.svg Normal file
View File

@ -0,0 +1,103 @@
<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4200_2642)">
<mask id="mask0_4200_2642" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
</mask>
<g mask="url(#mask0_4200_2642)">
<rect x="-41" width="798" height="1" fill="#444444"/>
<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
</g>
<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
<mask id="path-40-inside-1_4200_2642" fill="white">
<path d="M31 26H126V78H31V26Z"/>
</mask>
<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_2642)"/>
<rect x="128.5" y="28.5" width="90" height="47" fill="#16417D"/>
<rect x="128.5" y="28.5" width="90" height="47" stroke="#EA10AC" stroke-width="5"/>
<mask id="path-43-inside-2_4200_2642" fill="white">
<path d="M221 26H316V78H221V26Z"/>
</mask>
<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-43-inside-2_4200_2642)"/>
<mask id="path-45-inside-3_4200_2642" fill="white">
<path d="M31 78H126V130H31V78Z"/>
</mask>
<path d="M31 78H126V130H31V78Z" fill="#16417D"/>
<path d="M31 130H30V131H31V130ZM126 129H31V131H126V129ZM32 130V78H30V130H32Z" fill="#00183B" mask="url(#path-45-inside-3_4200_2642)"/>
<mask id="path-47-inside-4_4200_2642" fill="white">
<path d="M126 78H221V130H126V78Z"/>
</mask>
<path d="M126 78H221V130H126V78Z" fill="#16417D"/>
<path d="M221 130V135H226V130H221ZM126 130H121V135H126V130ZM216 78V130H226V78H216ZM221 125H126V135H221V125ZM131 130V78H121V130H131Z" fill="#EA10AC" mask="url(#path-47-inside-4_4200_2642)"/>
<mask id="path-49-inside-5_4200_2642" fill="white">
<path d="M221 78H316V130H221V78Z"/>
</mask>
<path d="M221 78H316V130H221V78Z" fill="#16417D"/>
<path d="M316 130V131H317V130H316ZM315 78V130H317V78H315ZM316 129H221V131H316V129Z" fill="#00183B" mask="url(#path-49-inside-5_4200_2642)"/>
<mask id="path-51-inside-6_4200_2642" fill="white">
<path d="M31 130H126V182H31V130Z"/>
</mask>
<path d="M31 130H126V182H31V130Z" fill="#16417D"/>
<path d="M31 182H30V183H31V182ZM126 181H31V183H126V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-51-inside-6_4200_2642)"/>
<mask id="path-53-inside-7_4200_2642" fill="white">
<path d="M126 130H221V182H126V130Z"/>
</mask>
<path d="M126 130H221V182H126V130Z" fill="#16417D"/>
<path d="M221 182V187H226V182H221ZM126 182H121V187H126V182ZM216 130V182H226V130H216ZM221 177H126V187H221V177ZM131 182V130H121V182H131Z" fill="#EA10AC" mask="url(#path-53-inside-7_4200_2642)"/>
<mask id="path-55-inside-8_4200_2642" fill="white">
<path d="M221 130H316V182H221V130Z"/>
</mask>
<path d="M221 130H316V182H221V130Z" fill="#16417D"/>
<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H221V183H316V181Z" fill="#00183B" mask="url(#path-55-inside-8_4200_2642)"/>
<rect x="258.5" y="41.5" width="21" height="21" rx="10.5" fill="#16417D"/>
<rect x="258.5" y="41.5" width="21" height="21" rx="10.5" stroke="white"/>
<path d="M261.293 52.7071C260.902 52.3166 260.902 51.6834 261.293 51.2929L267.657 44.9289C268.047 44.5384 268.681 44.5384 269.071 44.9289C269.462 45.3195 269.462 45.9526 269.071 46.3431L263.414 52L269.071 57.6569C269.462 58.0474 269.462 58.6805 269.071 59.0711C268.681 59.4616 268.047 59.4616 267.657 59.0711L261.293 52.7071ZM276 53H262V51H276V53Z" fill="white"/>
<rect x="258.5" y="93.5" width="21" height="21" rx="10.5" fill="#16417D"/>
<rect x="258.5" y="93.5" width="21" height="21" rx="10.5" stroke="white"/>
<path d="M261.293 104.707C260.902 104.317 260.902 103.683 261.293 103.293L267.657 96.9289C268.047 96.5384 268.681 96.5384 269.071 96.9289C269.462 97.3195 269.462 97.9526 269.071 98.3431L263.414 104L269.071 109.657C269.462 110.047 269.462 110.681 269.071 111.071C268.681 111.462 268.047 111.462 267.657 111.071L261.293 104.707ZM276 105H262V103H276V105Z" fill="white"/>
<rect x="258.5" y="145.5" width="21" height="21" rx="10.5" fill="#16417D"/>
<rect x="258.5" y="145.5" width="21" height="21" rx="10.5" stroke="white"/>
<path d="M261.293 156.707C260.902 156.317 260.902 155.683 261.293 155.293L267.657 148.929C268.047 148.538 268.681 148.538 269.071 148.929C269.462 149.319 269.462 149.953 269.071 150.343L263.414 156L269.071 161.657C269.462 162.047 269.462 162.681 269.071 163.071C268.681 163.462 268.047 163.462 267.657 163.071L261.293 156.707ZM276 157H262V155H276V157Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_4200_2642">
<rect width="352" height="209" rx="2" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB

103
public/static/images/canvas/additional_del02.svg Normal file
View File

@ -0,0 +1,103 @@
<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4200_2835)">
<mask id="mask0_4200_2835" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
</mask>
<g mask="url(#mask0_4200_2835)">
<rect x="-41" width="798" height="1" fill="#444444"/>
<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
</g>
<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
<mask id="path-40-inside-1_4200_2835" fill="white">
<path d="M31 26H126V78H31V26Z"/>
</mask>
<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_2835)"/>
<rect x="128.5" y="28.5" width="90" height="47" fill="#16417D"/>
<rect x="128.5" y="28.5" width="90" height="47" stroke="#EA10AC" stroke-width="5"/>
<mask id="path-43-inside-2_4200_2835" fill="white">
<path d="M221 26H316V78H221V26Z"/>
</mask>
<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-43-inside-2_4200_2835)"/>
<mask id="path-45-inside-3_4200_2835" fill="white">
<path d="M31 78H126V130H31V78Z"/>
</mask>
<path d="M31 78H126V130H31V78Z" fill="#16417D"/>
<path d="M31 130H30V131H31V130ZM126 129H31V131H126V129ZM32 130V78H30V130H32Z" fill="#00183B" mask="url(#path-45-inside-3_4200_2835)"/>
<mask id="path-47-inside-4_4200_2835" fill="white">
<path d="M126 78H221V130H126V78Z"/>
</mask>
<path d="M126 78H221V130H126V78Z" fill="#16417D"/>
<path d="M221 130V135H226V130H221ZM126 130H121V135H126V130ZM216 78V130H226V78H216ZM221 125H126V135H221V125ZM131 130V78H121V130H131Z" fill="#EA10AC" mask="url(#path-47-inside-4_4200_2835)"/>
<mask id="path-49-inside-5_4200_2835" fill="white">
<path d="M221 78H316V130H221V78Z"/>
</mask>
<path d="M221 78H316V130H221V78Z" fill="#16417D"/>
<path d="M316 130V131H317V130H316ZM315 78V130H317V78H315ZM316 129H221V131H316V129Z" fill="#00183B" mask="url(#path-49-inside-5_4200_2835)"/>
<mask id="path-51-inside-6_4200_2835" fill="white">
<path d="M31 130H126V182H31V130Z"/>
</mask>
<path d="M31 130H126V182H31V130Z" fill="#16417D"/>
<path d="M31 182H30V183H31V182ZM126 181H31V183H126V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-51-inside-6_4200_2835)"/>
<mask id="path-53-inside-7_4200_2835" fill="white">
<path d="M126 130H221V182H126V130Z"/>
</mask>
<path d="M126 130H221V182H126V130Z" fill="#16417D"/>
<path d="M221 182V187H226V182H221ZM126 182H121V187H126V182ZM216 130V182H226V130H216ZM221 177H126V187H221V177ZM131 182V130H121V182H131Z" fill="#EA10AC" mask="url(#path-53-inside-7_4200_2835)"/>
<mask id="path-55-inside-8_4200_2835" fill="white">
<path d="M221 130H316V182H221V130Z"/>
</mask>
<path d="M221 130H316V182H221V130Z" fill="#16417D"/>
<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H221V183H316V181Z" fill="#00183B" mask="url(#path-55-inside-8_4200_2835)"/>
<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 41)" fill="#16417D"/>
<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 41)" stroke="white"/>
<path d="M86.7071 52.7071C87.0976 52.3166 87.0976 51.6834 86.7071 51.2929L80.3431 44.9289C79.9526 44.5384 79.3195 44.5384 78.9289 44.9289C78.5384 45.3195 78.5384 45.9526 78.9289 46.3431L84.5858 52L78.9289 57.6569C78.5384 58.0474 78.5384 58.6805 78.9289 59.0711C79.3195 59.4616 79.9526 59.4616 80.3431 59.0711L86.7071 52.7071ZM72 53H86V51H72V53Z" fill="white"/>
<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 93)" fill="#16417D"/>
<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 93)" stroke="white"/>
<path d="M86.7071 104.707C87.0976 104.317 87.0976 103.683 86.7071 103.293L80.3431 96.9289C79.9526 96.5384 79.3195 96.5384 78.9289 96.9289C78.5384 97.3195 78.5384 97.9526 78.9289 98.3431L84.5858 104L78.9289 109.657C78.5384 110.047 78.5384 110.681 78.9289 111.071C79.3195 111.462 79.9526 111.462 80.3431 111.071L86.7071 104.707ZM72 105H86V103H72V105Z" fill="white"/>
<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 145)" fill="#16417D"/>
<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 145)" stroke="white"/>
<path d="M86.7071 156.707C87.0976 156.317 87.0976 155.683 86.7071 155.293L80.3431 148.929C79.9526 148.538 79.3195 148.538 78.9289 148.929C78.5384 149.319 78.5384 149.953 78.9289 150.343L84.5858 156L78.9289 161.657C78.5384 162.047 78.5384 162.681 78.9289 163.071C79.3195 163.462 79.9526 163.462 80.3431 163.071L86.7071 156.707ZM72 157H86V155H72V157Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_4200_2835">
<rect width="352" height="209" rx="2" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB

112
public/static/images/canvas/additional_del03.svg Normal file
View File

@ -0,0 +1,112 @@
<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4200_3022)">
<mask id="mask0_4200_3022" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
</mask>
<g mask="url(#mask0_4200_3022)">
<rect x="-41" width="798" height="1" fill="#444444"/>
<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
</g>
<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
<mask id="path-40-inside-1_4200_3022" fill="white">
<path d="M31 26H126V78H31V26Z"/>
</mask>
<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_3022)"/>
<rect x="128.5" y="28.5" width="90" height="47" fill="#16417D"/>
<rect x="128.5" y="28.5" width="90" height="47" stroke="#EA10AC" stroke-width="5"/>
<mask id="path-43-inside-2_4200_3022" fill="white">
<path d="M221 26H316V78H221V26Z"/>
</mask>
<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-43-inside-2_4200_3022)"/>
<mask id="path-45-inside-3_4200_3022" fill="white">
<path d="M31 78H126V130H31V78Z"/>
</mask>
<path d="M31 78H126V130H31V78Z" fill="#16417D"/>
<path d="M31 130H30V131H31V130ZM126 129H31V131H126V129ZM32 130V78H30V130H32Z" fill="#00183B" mask="url(#path-45-inside-3_4200_3022)"/>
<mask id="path-47-inside-4_4200_3022" fill="white">
<path d="M126 78H221V130H126V78Z"/>
</mask>
<path d="M126 78H221V130H126V78Z" fill="#16417D"/>
<path d="M221 130V135H226V130H221ZM126 130H121V135H126V130ZM216 78V130H226V78H216ZM221 125H126V135H221V125ZM131 130V78H121V130H131Z" fill="#EA10AC" mask="url(#path-47-inside-4_4200_3022)"/>
<mask id="path-49-inside-5_4200_3022" fill="white">
<path d="M221 78H316V130H221V78Z"/>
</mask>
<path d="M221 78H316V130H221V78Z" fill="#16417D"/>
<path d="M316 130V131H317V130H316ZM315 78V130H317V78H315ZM316 129H221V131H316V129Z" fill="#00183B" mask="url(#path-49-inside-5_4200_3022)"/>
<mask id="path-51-inside-6_4200_3022" fill="white">
<path d="M31 130H126V182H31V130Z"/>
</mask>
<path d="M31 130H126V182H31V130Z" fill="#16417D"/>
<path d="M31 182H30V183H31V182ZM126 181H31V183H126V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-51-inside-6_4200_3022)"/>
<mask id="path-53-inside-7_4200_3022" fill="white">
<path d="M126 130H221V182H126V130Z"/>
</mask>
<path d="M126 130H221V182H126V130Z" fill="#16417D"/>
<path d="M221 182V187H226V182H221ZM126 182H121V187H126V182ZM216 130V182H226V130H216ZM221 177H126V187H221V177ZM131 182V130H121V182H131Z" fill="#EA10AC" mask="url(#path-53-inside-7_4200_3022)"/>
<mask id="path-55-inside-8_4200_3022" fill="white">
<path d="M221 130H316V182H221V130Z"/>
</mask>
<path d="M221 130H316V182H221V130Z" fill="#16417D"/>
<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H221V183H316V181Z" fill="#00183B" mask="url(#path-55-inside-8_4200_3022)"/>
<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 41)" fill="#16417D"/>
<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 41)" stroke="white"/>
<path d="M86.7071 52.7071C87.0976 52.3166 87.0976 51.6834 86.7071 51.2929L80.3431 44.9289C79.9526 44.5384 79.3195 44.5384 78.9289 44.9289C78.5384 45.3195 78.5384 45.9526 78.9289 46.3431L84.5858 52L78.9289 57.6569C78.5384 58.0474 78.5384 58.6805 78.9289 59.0711C79.3195 59.4616 79.9526 59.4616 80.3431 59.0711L86.7071 52.7071ZM72 53H86V51H72V53Z" fill="white"/>
<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 93)" fill="#16417D"/>
<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 93)" stroke="white"/>
<path d="M86.7071 104.707C87.0976 104.317 87.0976 103.683 86.7071 103.293L80.3431 96.9289C79.9526 96.5384 79.3195 96.5384 78.9289 96.9289C78.5384 97.3195 78.5384 97.9526 78.9289 98.3431L84.5858 104L78.9289 109.657C78.5384 110.047 78.5384 110.681 78.9289 111.071C79.3195 111.462 79.9526 111.462 80.3431 111.071L86.7071 104.707ZM72 105H86V103H72V105Z" fill="white"/>
<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 145)" fill="#16417D"/>
<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 145)" stroke="white"/>
<path d="M86.7071 156.707C87.0976 156.317 87.0976 155.683 86.7071 155.293L80.3431 148.929C79.9526 148.538 79.3195 148.538 78.9289 148.929C78.5384 149.319 78.5384 149.953 78.9289 150.343L84.5858 156L78.9289 161.657C78.5384 162.047 78.5384 162.681 78.9289 163.071C79.3195 163.462 79.9526 163.462 80.3431 163.071L86.7071 156.707ZM72 157H86V155H72V157Z" fill="white"/>
<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 258 166)" fill="#16417D"/>
<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 258 166)" stroke="white"/>
<path d="M261.293 155.293C260.902 155.683 260.902 156.317 261.293 156.707L267.657 163.071C268.047 163.462 268.681 163.462 269.071 163.071C269.462 162.681 269.462 162.047 269.071 161.657L263.414 156L269.071 150.343C269.462 149.953 269.462 149.319 269.071 148.929C268.681 148.538 268.047 148.538 267.657 148.929L261.293 155.293ZM276 155H262V157H276V155Z" fill="white"/>
<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 258 114)" fill="#16417D"/>
<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 258 114)" stroke="white"/>
<path d="M261.293 103.293C260.902 103.683 260.902 104.317 261.293 104.707L267.657 111.071C268.047 111.462 268.681 111.462 269.071 111.071C269.462 110.681 269.462 110.047 269.071 109.657L263.414 104L269.071 98.3431C269.462 97.9526 269.462 97.3195 269.071 96.9289C268.681 96.5384 268.047 96.5384 267.657 96.9289L261.293 103.293ZM276 103H262V105H276V103Z" fill="white"/>
<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 258 62)" fill="#16417D"/>
<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 258 62)" stroke="white"/>
<path d="M261.293 51.2929C260.902 51.6834 260.902 52.3166 261.293 52.7071L267.657 59.0711C268.047 59.4616 268.681 59.4616 269.071 59.0711C269.462 58.6805 269.462 58.0474 269.071 57.6569L263.414 52L269.071 46.3431C269.462 45.9526 269.462 45.3195 269.071 44.9289C268.681 44.5384 268.047 44.5384 267.657 44.9289L261.293 51.2929ZM276 51H262V53H276V51Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_4200_3022">
<rect width="352" height="209" rx="2" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.4 KiB

94
public/static/images/canvas/additional_del04.svg Normal file
View File

@ -0,0 +1,94 @@
<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4200_2449)">
<mask id="mask0_4200_2449" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
</mask>
<g mask="url(#mask0_4200_2449)">
<rect x="-41" width="798" height="1" fill="#444444"/>
<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
</g>
<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
<mask id="path-40-inside-1_4200_2449" fill="white">
<path d="M31 26H126V78H31V26Z"/>
</mask>
<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_2449)"/>
<rect x="128.5" y="28.5" width="90" height="47" fill="#16417D"/>
<rect x="128.5" y="28.5" width="90" height="47" stroke="#EA10AC" stroke-width="5"/>
<mask id="path-43-inside-2_4200_2449" fill="white">
<path d="M221 26H316V78H221V26Z"/>
</mask>
<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-43-inside-2_4200_2449)"/>
<mask id="path-45-inside-3_4200_2449" fill="white">
<path d="M31 78H126V130H31V78Z"/>
</mask>
<path d="M31 78H126V130H31V78Z" fill="#16417D"/>
<path d="M31 130H30V131H31V130ZM126 129H31V131H126V129ZM32 130V78H30V130H32Z" fill="#00183B" mask="url(#path-45-inside-3_4200_2449)"/>
<mask id="path-47-inside-4_4200_2449" fill="white">
<path d="M126 78H221V130H126V78Z"/>
</mask>
<path d="M126 78H221V130H126V78Z" fill="#16417D"/>
<path d="M221 130V135H226V130H221ZM126 130H121V135H126V130ZM216 78V130H226V78H216ZM221 125H126V135H221V125ZM131 130V78H121V130H131Z" fill="#EA10AC" mask="url(#path-47-inside-4_4200_2449)"/>
<mask id="path-49-inside-5_4200_2449" fill="white">
<path d="M221 78H316V130H221V78Z"/>
</mask>
<path d="M221 78H316V130H221V78Z" fill="#16417D"/>
<path d="M316 130V131H317V130H316ZM315 78V130H317V78H315ZM316 129H221V131H316V129Z" fill="#00183B" mask="url(#path-49-inside-5_4200_2449)"/>
<mask id="path-51-inside-6_4200_2449" fill="white">
<path d="M31 130H126V182H31V130Z"/>
</mask>
<path d="M31 130H126V182H31V130Z" fill="#16417D"/>
<path d="M31 182H30V183H31V182ZM126 181H31V183H126V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-51-inside-6_4200_2449)"/>
<mask id="path-53-inside-7_4200_2449" fill="white">
<path d="M126 130H221V182H126V130Z"/>
</mask>
<path d="M126 130H221V182H126V130Z" fill="#16417D"/>
<path d="M221 182V187H226V182H221ZM126 182H121V187H126V182ZM216 130V182H226V130H216ZM221 177H126V187H221V177ZM131 182V130H121V182H131Z" fill="#EA10AC" mask="url(#path-53-inside-7_4200_2449)"/>
<mask id="path-55-inside-8_4200_2449" fill="white">
<path d="M221 130H316V182H221V130Z"/>
</mask>
<path d="M221 130H316V182H221V130Z" fill="#16417D"/>
<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H221V183H316V181Z" fill="#00183B" mask="url(#path-55-inside-8_4200_2449)"/>
</g>
<defs>
<clipPath id="clip0_4200_2449">
<rect width="352" height="209" rx="2" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

8
src/app/canvas/page.jsx
View File

@ -51,6 +51,9 @@ import AllModuleMove from '@/components/canvas/modal/additionalfunction/addition
import AllModuleCopy from '@/components/canvas/modal/additionalfunction/additionoption/AllModuleCopy'
import AllModuleNumChange from '@/components/canvas/modal/additionalfunction/additionoption/AllModuleNumChange'
import AdditionalColumnDelete from '@/components/canvas/modal/additionalfunction/moduleadditional/AdditionalColumnDelete'
import AdditionalColumnEdit from '@/components/canvas/modal/additionalfunction/moduleadditional/AdditionalColumnEdit'
import AdditionalBundleDelete from '@/components/canvas/modal/additionalfunction/moduleadditional/AdditionalBundleDelete'
import AdditionalBundleEdit from '@/components/canvas/modal/additionalfunction/moduleadditional/AdditionalBundleEdit'
export default function CanvasPage() {
const modalOption = useRecoilValue(modalState);
@ -120,7 +123,7 @@ export default function CanvasPage() {
{/* <ArrangementSetting/> */}
{/* 면형상 배치 */}
<PlaneShapeOption/>
{/* <PlaneShapeOption/> */}
{/* 오브젝트 배치*/}
{/* <ObjectOption/> */}
@ -164,6 +167,9 @@ export default function CanvasPage() {
{/* 열삭제, 열삽입, 단삭제, 단삽입 */}
{/* <AdditionalColumnDelete/> */}
{/* <AdditionalColumnEdit/> */}
{/* <AdditionalBundleDelete/> */}
<AdditionalBundleEdit/>
</div>
</div>
</div>

77
src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalBundleDelete.jsx Normal file
View File

@ -0,0 +1,77 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
import Image from "next/image";
import { useState } from "react";
export default function AdditionalBundleDelete(){
const [radioNum, setRadioNum] = useState(1)
const HandleRadioChange = (e) => {
setRadioNum(Number(e.target.value))
}
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap r`}>
<div className="modal-head">
<h1 className="title">ただし削除 </h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="properties-setting-wrap">
<div className="setting-tit">削除列をどのようにしますか？</div>
<div className="additional-wrap">
<div className="additional-radio-wrap">
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra01" onChange={HandleRadioChange} value={1} checked={radioNum === 1}/>
<label htmlFor="ra01">上向きに減らす</label>
</div>
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra02" onChange={HandleRadioChange} value={2} checked={radioNum === 2}/>
<label htmlFor="ra02">下向きに減らす</label>
</div>
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra03" onChange={HandleRadioChange} value={3} checked={radioNum === 3}/>
<label htmlFor="ra03">両側に減らす</label>
</div>
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra04" onChange={HandleRadioChange} value={4} checked={radioNum === 4}/>
<label htmlFor="ra04">減らさない</label>
</div>
</div>
<div className="additional-img-wrap">
{radioNum === 1 &&
<Image src="/static/images/canvas/additional_bundle-del01.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
}
{radioNum === 2 &&
<Image src="/static/images/canvas/additional_bundle-del02.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
}
{radioNum === 3 &&
<Image src="/static/images/canvas/additional_bundle-del03.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
}
{radioNum === 4 &&
<Image src="/static/images/canvas/additional_bundle-del04.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
}
</div>
</div>
</div>
<div className="properties-setting-wrap">
<div className="setting-tit">凡例</div>
<div className="module-table-box">
<div className="module-table-inner">
<div className="additional-color-wrap">
<div className="additional-color-box">
<span className="additional-color pink"></span>
<span className="normal-font">選択列</span>
</div>
</div>
</div>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">保存</button>
</div>
</div>
</div>
</WithDraggable>
)
}

67
src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalBundleEdit.jsx Normal file
View File

@ -0,0 +1,67 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
import Image from "next/image";
import { useState } from "react";
export default function AdditionalBundleEdit(){
const [radioNum, setRadioNum] = useState(1)
const HandleRadioChange = (e) => {
setRadioNum(Number(e.target.value))
}
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap r`}>
<div className="modal-head">
<h1 className="title">段挿入 </h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="properties-setting-wrap">
<div className="setting-tit">挿入する方向を選択してください。</div>
<div className="additional-wrap">
<div className="additional-radio-wrap">
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra01" onChange={HandleRadioChange} value={1} checked={radioNum === 1}/>
<label htmlFor="ra01">上部挿入</label>
</div>
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra02" onChange={HandleRadioChange} value={2} checked={radioNum === 2}/>
<label htmlFor="ra02">下の挿入</label>
</div>
</div>
<div className="additional-img-wrap">
{radioNum === 1 &&
<Image src="/static/images/canvas/additional_bundle-edit01.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
}
{radioNum === 2 &&
<Image src="/static/images/canvas/additional_bundle-edit02.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
}
</div>
</div>
</div>
<div className="properties-setting-wrap">
<div className="setting-tit">凡例</div>
<div className="module-table-box">
<div className="module-table-inner">
<div className="additional-color-wrap">
<div className="additional-color-box">
<span className="additional-color pink"></span>
<span className="normal-font">選択列</span>
</div>
<div className="additional-color-box">
<span className="additional-color white"></span>
<span className="normal-font">選択列</span>
</div>
</div>
</div>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">保存</button>
</div>
</div>
</div>
</WithDraggable>
)
}

38
src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalColumnDelete.jsx
View File

@ -1,6 +1,14 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
import Image from "next/image";
import { useState } from "react";
export default function AdditionalColumnDelete(){
const [radioNum, setRadioNum] = useState(1)
const HandleRadioChange = (e) => {
setRadioNum(Number(e.target.value))
}
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap r`}>
@ -14,31 +22,49 @@ export default function AdditionalColumnDelete(){
<div className="additional-wrap">
<div className="additional-radio-wrap">
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra01"/>
<input type="radio" name="radio01" id="ra01" onChange={HandleRadioChange} value={1} checked={radioNum === 1}/>
<label htmlFor="ra01">左に減らす</label>
</div>
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra02" />
<input type="radio" name="radio01" id="ra02" onChange={HandleRadioChange} value={2} checked={radioNum === 2}/>
<label htmlFor="ra02">右に減らす</label>
</div>
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra03" />
<input type="radio" name="radio01" id="ra03" onChange={HandleRadioChange} value={3} checked={radioNum === 3}/>
<label htmlFor="ra03">両側に減る</label>
</div>
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra04" />
<input type="radio" name="radio01" id="ra04" onChange={HandleRadioChange} value={4} checked={radioNum === 4}/>
<label htmlFor="ra04">減らさない</label>
</div>
</div>
<div className="additional-img-wrap">
{radioNum === 1 &&
<Image src="/static/images/canvas/additional_del01.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
}
{radioNum === 2 &&
<Image src="/static/images/canvas/additional_del02.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
}
{radioNum === 3 &&
<Image src="/static/images/canvas/additional_del03.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
}
{radioNum === 4 &&
<Image src="/static/images/canvas/additional_del04.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
}
</div>
</div>
</div>
<div className="properties-setting-wrap">
<div className="setting-tit">凡例</div>
<div className="module-table-box">
<div className="module-table-inner"></div>
<div className="module-table-inner">
<div className="additional-color-wrap">
<div className="additional-color-box">
<span className="additional-color pink"></span>
<span className="normal-font">選択列</span>
</div>
</div>
</div>
</div>
</div>
<div className="grid-btn-wrap">

67
src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalColumnEdit.jsx Normal file
View File

@ -0,0 +1,67 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
import Image from "next/image";
import { useState } from "react";
export default function AdditionalColumnEdit(){
const [radioNum, setRadioNum] = useState(1)
const HandleRadioChange = (e) => {
setRadioNum(Number(e.target.value))
}
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap r`}>
<div className="modal-head">
<h1 className="title">列の挿入 </h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="properties-setting-wrap">
<div className="setting-tit">挿入する方向を選択してください。</div>
<div className="additional-wrap">
<div className="additional-radio-wrap">
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra01" onChange={HandleRadioChange} value={1} checked={radioNum === 1}/>
<label htmlFor="ra01">左挿入</label>
</div>
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra02" onChange={HandleRadioChange} value={2} checked={radioNum === 2}/>
<label htmlFor="ra02">右挿入</label>
</div>
</div>
<div className="additional-img-wrap">
{radioNum === 1 &&
<Image src="/static/images/canvas/additional-edit01.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
}
{radioNum === 2 &&
<Image src="/static/images/canvas/additional-edit02.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
}
</div>
</div>
</div>
<div className="properties-setting-wrap">
<div className="setting-tit">凡例</div>
<div className="module-table-box">
<div className="module-table-inner">
<div className="additional-color-wrap">
<div className="additional-color-box">
<span className="additional-color pink"></span>
<span className="normal-font">選択列</span>
</div>
<div className="additional-color-box">
<span className="additional-color white"></span>
<span className="normal-font">選択列</span>
</div>
</div>
</div>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">保存</button>
</div>
</div>
</div>
</WithDraggable>
)
}

13
src/components/canvas/modal/planeshapeoption/PlaneShapeOption.jsx
View File

@ -24,15 +24,22 @@ import PlaneShapeTab18 from "./planeshapetab/PlaneShapeTab18";
export default function PlaneShapeOption(){
const [shapeNum, setShapeNum] = useState(1);
const [rotate, setRotate] = useState(0);
const [xfilp, setXfilp] = useState(false);
const [yfilp, setYfilp] = useState(false);
const [rotate, setRotate] = useState(0);
const RotateMenual = () => {
setRotate(rotate >= 271 ? 0 :rotate + 90)
if((xfilp === false && yfilp === true) || (xfilp === true && yfilp === false)){
setRotate(360);
setRotate(rotate - 90)
}else{
setRotate(0)
setRotate(rotate + 90)
}
}
const TransformRotate = () => {
return `${TransFormScale()} rotate(${(xfilp === false && yfilp === true) || (xfilp === true && yfilp === false) ? `-`: ``}${rotate}deg)`
return `${TransFormScale()} rotate(${rotate}deg)`
}
const TransFormScale = () => {

25
src/styles/_modal.scss
View File

@ -1479,4 +1479,29 @@ $alert-color: #101010;
.additional-wrap{
padding: 24px 0;
border-top: 1px solid #424242;
}
.additional-color-wrap{
display: flex;
align-items: center;
padding: 5px 0;
gap: 15px;
.additional-color-box{
display: flex;
align-items: center;
gap: 8px;
.additional-color{
display: block;
width: 16px;
height: 16px;
&.pink{
border: 2px solid #EA10AC;
background-color: #16417D;
}
&.white{
border: 2px solid #FFF;
background-color: #001027;
}
}
}
}