This commit is contained in:
salam committed 2026-09-10 18:28:53 +02:00
1 parent b1add2f055
commit 57bca26ad2
8 files changed
+125 -132

No files matched your search

+31
View File
@@ -249,4 +249,35 @@ less padding in table
@apply bg-gray-100 dark:bg-gray-600/30 drop-shadow
}
}
}
.soccer-field {
width: 100%;
height: 400px;
/* Höhe nach Bedarf anpassen */
/* Linienfarbe hier flexibel definieren: */
background-color: currentColor;
/* Das SVG dient als Maske */
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://w3.org' viewBox='0 0 1050 680'%3E%3Crect x='2' y='2' width='1046' height='676' fill='none' stroke='black' stroke-width='4'/%3E%3Cline x1='525' y1='0' x2='525' y2='680' stroke='black' stroke-width='4'/%3E%3Ccircle cx='525' cy='340' r='91.5' fill='none' stroke='black' stroke-width='4'/%3E%3Ccircle cx='525' cy='340' r='4' fill='black'/%3E%3Crect x='0' y='138.5' width='165' height='403' fill='none' stroke='black' stroke-width='4'/%3E%3Crect x='0' y='248.5' width='55' height='183' fill='none' stroke='black' stroke-width='4'/%3E%3Ccircle cx='110' cy='340' r='4' fill='black'/%3E%3Cpath d='M 165 284.6 A 91.5 91.5 0 0 1 165 395.4' fill='none' stroke='black' stroke-width='4'/%3E%3Crect x='885' y='138.5' width='165' height='403' fill='none' stroke='black' stroke-width='4'/%3E%3Crect x='995' y='248.5' width='55' height='183' fill='none' stroke='black' stroke-width='4'/%3E%3Ccircle cx='940' cy='340' r='4' fill='black'/%3E%3Cpath d='M 885 284.6 A 91.5 91.5 0 0 0 885 395.4' fill='none' stroke='black' stroke-width='4'/%3E%3Cpath d='M 0 10 A 10 10 0 0 0 10 0' fill='none' stroke='black' stroke-width='4'/%3E%3Cpath d='M 0 670 A 10 10 0 0 1 10 680' fill='none' stroke='black' stroke-width='4'/%3E%3Cpath d='M 1040 0 A 10 10 0 0 0 1050 10' fill='none' stroke='black' stroke-width='4'/%3E%3Cpath d='M 1040 680 A 10 10 0 0 1 1050 670' fill='none' stroke='black' stroke-width='4'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://w3.org' viewBox='0 0 1050 680'%3E%3Crect x='2' y='2' width='1046' height='676' fill='none' stroke='black' stroke-width='4'/%3E%3Cline x1='525' y1='0' x2='525' y2='680' stroke='black' stroke-width='4'/%3E%3Ccircle cx='525' cy='340' r='91.5' fill='none' stroke='black' stroke-width='4'/%3E%3Ccircle cx='525' cy='340' r='4' fill='black'/%3E%3Crect x='0' y='138.5' width='165' height='403' fill='none' stroke='black' stroke-width='4'/%3E%3Crect x='0' y='248.5' width='55' height='183' fill='none' stroke='black' stroke-width='4'/%3E%3Ccircle cx='110' cy='340' r='4' fill='black'/%3E%3Cpath d='M 165 284.6 A 91.5 91.5 0 0 1 165 395.4' fill='none' stroke='black' stroke-width='4'/%3E%3Crect x='885' y='138.5' width='165' height='403' fill='none' stroke='black' stroke-width='4'/%3E%3Crect x='995' y='248.5' width='55' height='183' fill='none' stroke='black' stroke-width='4'/%3E%3Ccircle cx='940' cy='340' r='4' fill='black'/%3E%3Cpath d='M 885 284.6 A 91.5 91.5 0 0 0 885 395.4' fill='none' stroke='black' stroke-width='4'/%3E%3Cpath d='M 0 10 A 10 10 0 0 0 10 0' fill='none' stroke='black' stroke-width='4'/%3E%3Cpath d='M 0 670 A 10 10 0 0 1 10 680' fill='none' stroke='black' stroke-width='4'/%3E%3Cpath d='M 1040 0 A 10 10 0 0 0 1050 10' fill='none' stroke='black' stroke-width='4'/%3E%3Cpath d='M 1040 680 A 10 10 0 0 1 1050 670' fill='none' stroke='black' stroke-width='4'/%3E%3C/svg%3E");
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
.soccer-field-classic {
width: 100%;
height: 400px;
background-color: transparent;
/* Hintergrund bleibt transparent */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://w3.org' viewBox='0 0 1050 680'%3E%3Crect x='2' y='2' width='1046' height='676' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Cline x1='525' y1='0' x2='525' y2='680' stroke='%23ffffff' stroke-width='4'/%3E%3Ccircle cx='525' cy='340' r='91.5' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Ccircle cx='525' cy='340' r='4' fill='%23ffffff'/%3E%3Crect x='0' y='138.5' width='165' height='403' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Crect x='0' y='248.5' width='55' height='183' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Ccircle cx='110' cy='340' r='4' fill='%23ffffff'/%3E%3Cpath d='M 165 284.6 A 91.5 91.5 0 0 1 165 395.4' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Crect x='885' y='138.5' width='165' height='403' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Crect x='995' y='248.5' width='55' height='183' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Ccircle cx='940' cy='340' r='4' fill='%23ffffff'/%3E%3Cpath d='M 885 284.6 A 91.5 91.5 0 0 0 885 395.4' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Cpath d='M 0 10 A 10 10 0 0 0 10 0' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Cpath d='M 0 670 A 10 10 0 0 1 10 680' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Cpath d='M 1040 0 A 10 10 0 0 0 1050 10' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Cpath d='M 1040 680 A 10 10 0 0 1 1050 670' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
@@ -7,9 +7,9 @@
<div class="font-black text-2xl text-center">{{ $ss_team_name }} {{ $player_on_field_counter }}</div>
<div class="grid grid-cols-2">
<div class="m-4">{{ $this->form }}</div>
<div class="w-full max-w-md mx-auto p-4" x-data="{ x_value: {{ $x_value }} }">
<div class="w-56 max-w-56 mx-auto p-4" x-data="{ x_value: {{ $x_value }} }">
<div class="flex justify-between items-center mb-2">
<label class="text-sm font-medium text-gray-700 dark:text-gray-200">
<label class="text-sm font-medium">
Factor X
</label>
<!-- Zeigt den Wert live an -->
@@ -19,11 +19,11 @@
</div>
<input type="range" wire:model.live="x_value" wire:change="calculateAspg" min="0"
max="10"
class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary-600">
class="w-full h-2 bg-gray-200 dark:bg-gray-500 rounded-lg appearance-none cursor-pointer accent-primary-600">
</div>
</div>
</div>
<div class="mx-3 p-5 rounded col-span-5 grid grid-cols-7 grid-rows-5 gap-2 bg-cover bg-center bg-no-repeat aspect-7/5"
<div class="border mx-3 p-5 shadow rounded col-span-5 grid grid-cols-7 grid-rows-5 gap-2 bg-cover bg-center bg-no-repeat aspect-7/5"
style="background-image: url({{ asset('images/soccerfield-cleand.jpg') }});">
@foreach ($beschriftung as $boxNumber => $benennung)
@if ($benennung)
@@ -39,12 +39,12 @@
}
"
:class="isOver ? 'border-red-500 bg-white/20 ring-2 ring-red-500/50 scale-[1.02]' :
@if (in_array($benennung, ['SW', 'DR', 'DC', 'DL'])) 'border-gray-800 bg-green-500/30'
@if (in_array($benennung, ['SW', 'DR', 'DC', 'DL'])) 'border-gray-800 bg-green-500/40'
@elseif (in_array($benennung, ['DM', 'MR', 'MC', 'ML', 'AM']))
'border-gray-800 bg-blue-500/30'
'border-gray-800 bg-blue-500/40'
@else
'border-gray-800 bg-amber-500/30' @endif"
class="border rounded-xl transition-all pt-0 flex flex-col justify-start transform">
'border-gray-800 bg-amber-500/40' @endif"
class="border-3 rounded-xl transition-all pt-0 flex flex-col justify-start transform">
<!-- Box Header -->
<div class="grid grid-cols-6 items-center">
<div></div>