wip
This commit is contained in:
1 parent
b1add2f055
commit
57bca26ad2
8 files changed
+125
-132
No files matched your search
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user