better design and working setting cells

This commit is contained in:
jhim
2026-02-13 11:31:32 +01:00
committed by Jonas
parent 8e99bbca0e
commit a8879da715
17 changed files with 198 additions and 11 deletions
Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

-1
View File
@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" zoomAndPan="magnify" viewBox="0 0 750 749.999995" height="1000" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="e7b8afbede"><path d="M 75 75 L 675 75 L 675 675 L 75 675 Z M 75 75 " clip-rule="nonzero"/></clipPath><clipPath id="440a805226"><path d="M 375 75 C 209.316406 75 75 209.316406 75 375 C 75 540.683594 209.316406 675 375 675 C 540.683594 675 675 540.683594 675 375 C 675 209.316406 540.683594 75 375 75 Z M 375 75 " clip-rule="nonzero"/></clipPath><clipPath id="7f2c195106"><path d="M 0 0 L 600 0 L 600 600 L 0 600 Z M 0 0 " clip-rule="nonzero"/></clipPath><clipPath id="e3354956bd"><path d="M 300 0 C 134.316406 0 0 134.316406 0 300 C 0 465.683594 134.316406 600 300 600 C 465.683594 600 600 465.683594 600 300 C 600 134.316406 465.683594 0 300 0 Z M 300 0 " clip-rule="nonzero"/></clipPath><clipPath id="1c631abcde"><rect x="0" width="600" y="0" height="600"/></clipPath></defs><g clip-path="url(#e7b8afbede)"><g clip-path="url(#440a805226)"><g transform="matrix(1, 0, 0, 1, 75, 75)"><g clip-path="url(#1c631abcde)"><g clip-path="url(#7f2c195106)"><g clip-path="url(#e3354956bd)"><rect x="-240" width="1080" fill="#ff3131" height="1079.999992" y="-239.999999" fill-opacity="1"/></g></g></g></g></g></g></svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" zoomAndPan="magnify" viewBox="0 0 750 749.999995" height="1000" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="ad6cd27943"><path d="M 75 75 L 675 75 L 675 675 L 75 675 Z M 75 75 " clip-rule="nonzero"/></clipPath><clipPath id="9a98a26f9b"><path d="M 375 75 C 209.316406 75 75 209.316406 75 375 C 75 540.683594 209.316406 675 375 675 C 540.683594 675 675 540.683594 675 375 C 675 209.316406 540.683594 75 375 75 Z M 375 75 " clip-rule="nonzero"/></clipPath><clipPath id="60f8a42e73"><path d="M 0 0 L 600 0 L 600 600 L 0 600 Z M 0 0 " clip-rule="nonzero"/></clipPath><clipPath id="9c1234e484"><path d="M 300 0 C 134.316406 0 0 134.316406 0 300 C 0 465.683594 134.316406 600 300 600 C 465.683594 600 600 465.683594 600 300 C 600 134.316406 465.683594 0 300 0 Z M 300 0 " clip-rule="nonzero"/></clipPath><clipPath id="d93f14d70b"><rect x="0" width="600" y="0" height="600"/></clipPath></defs><g clip-path="url(#ad6cd27943)"><g clip-path="url(#9a98a26f9b)"><g transform="matrix(1, 0, 0, 1, 75, 75)"><g clip-path="url(#d93f14d70b)"><g clip-path="url(#60f8a42e73)"><g clip-path="url(#9c1234e484)"><rect x="-240" width="1080" fill="#ffcc00" height="1079.999992" y="-239.999999" fill-opacity="1"/></g></g></g></g></g></g></svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

-1
View File
@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" zoomAndPan="magnify" viewBox="0 0 750 749.999995" height="1000" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="7bb6b410f0"><path d="M 0 0 L 750 0 L 750 750 L 0 750 Z M 0 0 " clip-rule="nonzero"/></clipPath><clipPath id="987972088d"><rect x="0" width="750" y="0" height="750"/></clipPath><clipPath id="04d1f86e7b"><path d="M 75 75 L 675 75 L 675 675 L 75 675 Z M 75 75 " clip-rule="nonzero"/></clipPath><clipPath id="d06cb80b9a"><path d="M 375 75 C 209.316406 75 75 209.316406 75 375 C 75 540.683594 209.316406 675 375 675 C 540.683594 675 675 540.683594 675 375 C 675 209.316406 540.683594 75 375 75 Z M 375 75 " clip-rule="nonzero"/></clipPath><clipPath id="65f0859d55"><path d="M 0 0 L 600 0 L 600 600 L 0 600 Z M 0 0 " clip-rule="nonzero"/></clipPath><clipPath id="459a82968f"><path d="M 300 0 C 134.316406 0 0 134.316406 0 300 C 0 465.683594 134.316406 600 300 600 C 465.683594 600 600 465.683594 600 300 C 600 134.316406 465.683594 0 300 0 Z M 300 0 " clip-rule="nonzero"/></clipPath><clipPath id="f5a651b72f"><rect x="0" width="600" y="0" height="600"/></clipPath></defs><rect x="-75" width="900" fill="#ffffff" y="-74.999999" height="899.999994" fill-opacity="1"/><rect x="-75" width="900" fill="#ffffff" y="-74.999999" height="899.999994" fill-opacity="1"/><g transform="matrix(1, 0, 0, 1, 0, -0.000000000000042435)"><g clip-path="url(#987972088d)"><g clip-path="url(#7bb6b410f0)"><rect x="-165" width="1080" fill="#004aad" height="1079.999992" y="-164.999999" fill-opacity="1"/></g></g></g><g clip-path="url(#04d1f86e7b)"><g clip-path="url(#d06cb80b9a)"><g transform="matrix(1, 0, 0, 1, 75, 75)"><g clip-path="url(#f5a651b72f)"><g clip-path="url(#65f0859d55)"><g clip-path="url(#459a82968f)"><rect x="-240" width="1080" fill="#ffffff" height="1079.999992" y="-239.999999" fill-opacity="1"/></g></g></g></g></g></g></svg>

Before

Width:  |  Height:  |  Size: 1.9 KiB

+15
View File
@@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1000" viewBox="0 0 750 750" height="1000" version="1.0">
<defs>
<mask id="circle-cutout">
<rect width="750" height="750" fill="white"/>
<circle cx="375" cy="375" r="300" fill="black"/>
</mask>
<linearGradient id="blue-grad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0058cc"/>
<stop offset="100%" stop-color="#003fa0"/>
</linearGradient>
</defs>
<rect width="750" height="750" fill="url(#blue-grad)" mask="url(#circle-cutout)"/>
<circle cx="375" cy="375" r="300" fill="none" stroke="#002255" stroke-width="8"/>
<rect x="2" y="2" width="746" height="746" fill="none" stroke="#001a44" stroke-width="4" rx="4"/>
</svg>

After

Width:  |  Height:  |  Size: 730 B

+17
View File
@@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1000" viewBox="0 0 750 750" height="1000" version="1.0">
<defs>
<mask id="circle-cutout">
<rect width="750" height="750" fill="white"/>
<circle cx="375" cy="375" r="300" fill="black"/>
</mask>
<linearGradient id="blue-grad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0058cc"/>
<stop offset="100%" stop-color="#003fa0"/>
</linearGradient>
</defs>
<circle cx="375" cy="375" r="300" fill="#dd0000"/>
<circle cx="375" cy="375" r="286" fill="none" stroke="#8b0000" stroke-width="12"/>
<rect width="750" height="750" fill="url(#blue-grad)" mask="url(#circle-cutout)"/>
<circle cx="375" cy="375" r="300" fill="none" stroke="#002255" stroke-width="8"/>
<rect x="2" y="2" width="746" height="746" fill="none" stroke="#001a44" stroke-width="4" rx="4"/>
</svg>

After

Width:  |  Height:  |  Size: 868 B

+17
View File
@@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1000" viewBox="0 0 750 750" height="1000" version="1.0">
<defs>
<mask id="circle-cutout">
<rect width="750" height="750" fill="white"/>
<circle cx="375" cy="375" r="300" fill="black"/>
</mask>
<linearGradient id="blue-grad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0058cc"/>
<stop offset="100%" stop-color="#003fa0"/>
</linearGradient>
</defs>
<circle cx="375" cy="375" r="300" fill="#ffcc00"/>
<circle cx="375" cy="375" r="286" fill="none" stroke="#997700" stroke-width="12"/>
<rect width="750" height="750" fill="url(#blue-grad)" mask="url(#circle-cutout)"/>
<circle cx="375" cy="375" r="300" fill="none" stroke="#002255" stroke-width="8"/>
<rect x="2" y="2" width="746" height="746" fill="none" stroke="#001a44" stroke-width="4" rx="4"/>
</svg>

After

Width:  |  Height:  |  Size: 868 B

@@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1000" viewBox="0 0 750 750" height="1000" version="1.0">
<defs>
<mask id="circle-cutout">
<rect width="750" height="750" fill="white"/>
<circle cx="375" cy="375" r="300" fill="black"/>
</mask>
</defs>
<rect width="750" height="750" fill="#004aad" mask="url(#circle-cutout)"/>
</svg>

After

Width:  |  Height:  |  Size: 356 B

@@ -0,0 +1,19 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1000" viewBox="0 0 750 750" height="1000" version="1.0">
<defs>
<mask id="circle-cutout">
<rect width="750" height="750" fill="white"/>
<circle cx="375" cy="375" r="300" fill="black"/>
</mask>
<linearGradient id="blue-grad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0055cc"/>
<stop offset="50%" stop-color="#003d99"/>
<stop offset="100%" stop-color="#002d73"/>
</linearGradient>
</defs>
<!-- Blaues Feld mit Gradient und Loch -->
<rect width="750" height="750" fill="url(#blue-grad)" mask="url(#circle-cutout)"/>
<!-- Dunklerer Rand um das Loch -->
<circle cx="375" cy="375" r="300" fill="none" stroke="#002255" stroke-width="8"/>
<!-- Äußerer Rand des Feldes -->
<rect x="2" y="2" width="746" height="746" fill="none" stroke="#001a44" stroke-width="4" rx="4"/>
</svg>

After

Width:  |  Height:  |  Size: 898 B

@@ -0,0 +1,26 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1000" viewBox="0 0 750 750" height="1000" version="1.0">
<defs>
<mask id="circle-cutout">
<rect width="750" height="750" fill="white"/>
<circle cx="375" cy="375" r="300" fill="black"/>
</mask>
<radialGradient id="chip-gradient" cx="40%" cy="38%" r="50%">
<stop offset="0%" stop-color="#ff4444"/>
<stop offset="70%" stop-color="#dd0000"/>
<stop offset="100%" stop-color="#aa0000"/>
</radialGradient>
<radialGradient id="shine" cx="35%" cy="30%" r="40%">
<stop offset="0%" stop-color="white" stop-opacity="0.4"/>
<stop offset="100%" stop-color="white" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- Blaues Feld mit Loch -->
<rect width="750" height="750" fill="#004aad" mask="url(#circle-cutout)"/>
<!-- Spielstein -->
<circle cx="375" cy="375" r="290" fill="url(#chip-gradient)"/>
<circle cx="375" cy="375" r="290" fill="url(#shine)"/>
<!-- Dunklere Outline -->
<circle cx="375" cy="375" r="288" fill="none" stroke="#8b0000" stroke-width="6"/>
<!-- Innerer Ring für Realismus -->
<circle cx="375" cy="375" r="250" fill="none" stroke="#aa0000" stroke-width="3" opacity="0.5"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

@@ -0,0 +1,26 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1000" viewBox="0 0 750 750" height="1000" version="1.0">
<defs>
<mask id="circle-cutout">
<rect width="750" height="750" fill="white"/>
<circle cx="375" cy="375" r="300" fill="black"/>
</mask>
<radialGradient id="chip-gradient" cx="40%" cy="38%" r="50%">
<stop offset="0%" stop-color="#ffee55"/>
<stop offset="70%" stop-color="#ffcc00"/>
<stop offset="100%" stop-color="#ccaa00"/>
</radialGradient>
<radialGradient id="shine" cx="35%" cy="30%" r="40%">
<stop offset="0%" stop-color="white" stop-opacity="0.45"/>
<stop offset="100%" stop-color="white" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- Blaues Feld mit Loch -->
<rect width="750" height="750" fill="#004aad" mask="url(#circle-cutout)"/>
<!-- Spielstein -->
<circle cx="375" cy="375" r="290" fill="url(#chip-gradient)"/>
<circle cx="375" cy="375" r="290" fill="url(#shine)"/>
<!-- Dunklere Outline -->
<circle cx="375" cy="375" r="288" fill="none" stroke="#997700" stroke-width="6"/>
<!-- Innerer Ring für Realismus -->
<circle cx="375" cy="375" r="250" fill="none" stroke="#bbaa00" stroke-width="3" opacity="0.5"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

+11
View File
@@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1000" viewBox="0 0 750 750" height="1000" version="1.0">
<defs>
<mask id="circle-cutout">
<rect width="750" height="750" fill="white"/>
<circle cx="375" cy="375" r="300" fill="black"/>
</mask>
</defs>
<circle cx="375" cy="375" r="300" fill="#dd0000"/>
<circle cx="375" cy="375" r="286" fill="none" stroke="#8b0000" stroke-width="12"/>
<rect width="750" height="750" fill="#004aad" mask="url(#circle-cutout)"/>
</svg>

After

Width:  |  Height:  |  Size: 494 B

+11
View File
@@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1000" viewBox="0 0 750 750" height="1000" version="1.0">
<defs>
<mask id="circle-cutout">
<rect width="750" height="750" fill="white"/>
<circle cx="375" cy="375" r="300" fill="black"/>
</mask>
</defs>
<circle cx="375" cy="375" r="300" fill="#ffcc00"/>
<circle cx="375" cy="375" r="286" fill="none" stroke="#997700" stroke-width="12"/>
<rect width="750" height="750" fill="#004aad" mask="url(#circle-cutout)"/>
</svg>

After

Width:  |  Height:  |  Size: 494 B