Initial Ladill Give extraction — online giving pages at give.ladill.com.
Donation checkout via Ladill Pay (9% fee), church/giving QR pages, SSO, and platform scan forwarding. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
@@ -0,0 +1,530 @@
|
||||
@php
|
||||
$style = \App\Support\Qr\QrStyleDefaults::merge($style ?? null);
|
||||
$moduleStyles = $moduleStyles ?? \App\Support\Qr\QrModuleStyleCatalog::visible();
|
||||
$cornerOuterStyles = $cornerOuterStyles ?? \App\Support\Qr\QrCornerStyleCatalog::outerStyles();
|
||||
$cornerInnerStyles = $cornerInnerStyles ?? \App\Support\Qr\QrCornerStyleCatalog::innerStyles();
|
||||
$frameStyles = $frameStyles ?? \App\Support\Qr\QrFrameStyleCatalog::visible();
|
||||
$qrBits = [1,0,1,0,1, 0,1,1,0,0, 1,1,0,1,1, 0,0,1,0,1, 1,0,1,1,0];
|
||||
@endphp
|
||||
|
||||
@include('qr-codes.partials.qr-customizer-script')
|
||||
|
||||
{{-- ── Quick style presets ──────────────────────────────────────────── --}}
|
||||
<div class="overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-sm">
|
||||
<div class="border-b border-slate-100 bg-slate-50/70 px-5 py-3.5">
|
||||
<p class="text-[10px] font-semibold uppercase tracking-[0.1em] text-slate-400">Quick styles</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-4 gap-px bg-slate-100/80">
|
||||
@foreach([
|
||||
[
|
||||
'key' => 'classic',
|
||||
'label' => 'Classic',
|
||||
'fg' => '#000000',
|
||||
'bg' => '#ffffff',
|
||||
'outer' => 'square',
|
||||
'inner' => 'square',
|
||||
'dot' => false,
|
||||
],
|
||||
[
|
||||
'key' => 'rounded',
|
||||
'label' => 'Rounded',
|
||||
'fg' => '#111827',
|
||||
'bg' => '#ffffff',
|
||||
'outer' => 'rounded',
|
||||
'inner' => 'square',
|
||||
'dot' => false,
|
||||
],
|
||||
[
|
||||
'key' => 'branded',
|
||||
'label' => 'Branded',
|
||||
'fg' => '#1d4ed8',
|
||||
'bg' => '#ffffff',
|
||||
'outer' => 'rounded',
|
||||
'inner' => 'square',
|
||||
'dot' => false,
|
||||
],
|
||||
[
|
||||
'key' => 'dots',
|
||||
'label' => 'Dots',
|
||||
'fg' => '#0f172a',
|
||||
'bg' => '#ffffff',
|
||||
'outer' => 'square',
|
||||
'inner' => 'dot',
|
||||
'dot' => true,
|
||||
],
|
||||
] as $preset)
|
||||
@php
|
||||
$outerRadius = match($preset['outer']) { 'rounded' => '3px', 'circle' => '50%', default => '1px' };
|
||||
$innerRadius = $preset['inner'] === 'dot' ? '50%' : '1px';
|
||||
$dotRadius = $preset['dot'] ? '50%' : '1px';
|
||||
@endphp
|
||||
<button type="button"
|
||||
@click="setStylePreset('{{ $preset['key'] }}')"
|
||||
class="group flex flex-col items-center gap-2.5 bg-white px-3 py-4 text-center transition hover:bg-slate-50/80 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-400">
|
||||
|
||||
{{-- Mini QR illustration --}}
|
||||
<span class="relative flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-lg"
|
||||
style="background-color: {{ $preset['bg'] }}">
|
||||
|
||||
{{-- Top-left finder --}}
|
||||
<span class="absolute left-[4px] top-[4px] flex h-[14px] w-[14px] items-center justify-center"
|
||||
style="border: 2.5px solid {{ $preset['fg'] }}; border-radius: {{ $outerRadius }}; background: transparent">
|
||||
<span class="block h-[5px] w-[5px]"
|
||||
style="background: {{ $preset['fg'] }}; border-radius: {{ $innerRadius }}"></span>
|
||||
</span>
|
||||
|
||||
{{-- Top-right finder --}}
|
||||
<span class="absolute right-[4px] top-[4px] flex h-[14px] w-[14px] items-center justify-center"
|
||||
style="border: 2.5px solid {{ $preset['fg'] }}; border-radius: {{ $outerRadius }}; background: transparent">
|
||||
<span class="block h-[5px] w-[5px]"
|
||||
style="background: {{ $preset['fg'] }}; border-radius: {{ $innerRadius }}"></span>
|
||||
</span>
|
||||
|
||||
{{-- Bottom-left finder --}}
|
||||
<span class="absolute bottom-[4px] left-[4px] flex h-[14px] w-[14px] items-center justify-center"
|
||||
style="border: 2.5px solid {{ $preset['fg'] }}; border-radius: {{ $outerRadius }}; background: transparent">
|
||||
<span class="block h-[5px] w-[5px]"
|
||||
style="background: {{ $preset['fg'] }}; border-radius: {{ $innerRadius }}"></span>
|
||||
</span>
|
||||
|
||||
{{-- Data dots (5×3 grid, avoiding finder corners) --}}
|
||||
<span class="absolute inset-0 flex items-center justify-center">
|
||||
<span class="grid grid-cols-3 gap-[2px] translate-x-[5px]">
|
||||
@foreach([1,0,1,0,1,0,1,1,0] as $bit)
|
||||
<span class="h-[3px] w-[3px]"
|
||||
style="{{ $bit ? 'background:' . $preset['fg'] . ';border-radius:' . $dotRadius : '' }}"></span>
|
||||
@endforeach
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span class="text-[11px] font-semibold text-slate-600 group-hover:text-slate-900">{{ $preset['label'] }}</span>
|
||||
</button>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-sm">
|
||||
|
||||
{{-- Pill tab nav --}}
|
||||
<div class="border-b border-slate-100 bg-slate-50/70 px-4 py-3">
|
||||
<div class="flex gap-1 rounded-xl bg-slate-200/50 p-1">
|
||||
@foreach([
|
||||
['id' => 'body', 'label' => 'Body'],
|
||||
['id' => 'colors', 'label' => 'Colors'],
|
||||
['id' => 'eyes', 'label' => 'Eyes'],
|
||||
['id' => 'logo', 'label' => 'Logo'],
|
||||
['id' => 'frame', 'label' => 'Frame'],
|
||||
] as $tab)
|
||||
<button type="button"
|
||||
@click="openSection = '{{ $tab['id'] }}'"
|
||||
:class="openSection === '{{ $tab['id'] }}'
|
||||
? 'bg-white shadow-sm text-slate-900'
|
||||
: 'text-slate-500 hover:text-slate-700'"
|
||||
class="flex-1 rounded-lg py-1.5 text-[11px] font-semibold transition-all duration-150">
|
||||
{{ $tab['label'] }}
|
||||
</button>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-5">
|
||||
|
||||
{{-- ── Body ─────────────────────────────────────────────────────── --}}
|
||||
<div x-show="openSection === 'body'" x-cloak
|
||||
x-transition:enter="transition-opacity duration-150"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100">
|
||||
<p class="mb-3 text-[10px] font-semibold uppercase tracking-[0.1em] text-slate-400">Dot shape</p>
|
||||
<div class="grid grid-cols-2 gap-2.5">
|
||||
@foreach($moduleStyles as $key => $meta)
|
||||
<label class="group cursor-pointer">
|
||||
<input type="radio" name="style[module_style]" value="{{ $key }}" x-model="moduleStyle" class="sr-only">
|
||||
<span class="flex items-center gap-3 rounded-xl border-2 bg-white px-3.5 py-3 transition-all"
|
||||
:class="moduleStyle === '{{ $key }}'
|
||||
? 'border-indigo-500 bg-indigo-50/60'
|
||||
: 'border-slate-200 group-hover:border-slate-300'">
|
||||
<span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-slate-50 ring-1 ring-slate-200/60">
|
||||
@if ($key === 'square')
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-slate-800" fill="currentColor">
|
||||
<path d="M0,0V11H11V0H0ZM7,7h-3v-3h3v3ZM13,0V11h11V0H13Zm7,7h-3v-3h3v3ZM0,13v11H11V13H0Zm7,7h-3v-3h3v3Zm10-3h-4v-4h4v4Zm3,3h-3v-3h3v3Zm-3,4h-4v-4h4v4Zm7-7h-4v-4h4v4Z"/>
|
||||
</svg>
|
||||
@elseif ($key === 'dots')
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-slate-800" fill="currentColor">
|
||||
<path d="M7,0h-3C1.794,0,0,1.794,0,4v3c0,2.206,1.794,4,4,4h3c2.206,0,4-1.794,4-4V4C11,1.794,9.206,0,7,0Zm2,7c0,1.103-.897,2-2,2h-3c-1.103,0-2-.897-2-2V4c0-1.103,.897-2,2-2h3c1.103,0,2,.897,2,2v3Zm-2-2v1c0,.552-.448,1-1,1h-1c-.552,0-1-.448-1-1v-1c0-.552,.448-1,1-1h1c.552,0,1,.448,1,1Zm10,6h3c2.206,0,4-1.794,4-4V4C24,1.794,22.206,0,20,0h-3C14.794,0,13,1.794,13,4v3c0,2.206,1.794,4,4,4Zm-2-7c0-1.103,.897-2,2-2h3c1.103,0,2,.897,2,2v3c0,1.103-.897,2-2,2h-3c-1.103,0-2-.897-2-2V4Zm2,2v-1c0-.552,.448-1,1-1h1c.552,0,1,.448,1,1v1c0,.552-.448,1-1,1h-1c-.552,0-1-.448-1-1ZM7,13h-3c-2.206,0-4,1.794-4,4v3c0,2.206,1.794,4,4,4h3c2.206,0,4-1.794,4-4v-3c0-2.206-1.794-4-4-4Zm2,7c0,1.103-.897,2-2,2h-3c-1.103,0-2-.897-2-2v-3c0-1.103,.897-2,2-2h3c1.103,0,2,.897,2,2v3Zm-2-2v1c0,.552-.448,1-1,1h-1c-.552,0-1-.448-1-1v-1c0-.552,.448-1,1-1h1c.552,0,1,.448,1,1Zm10-3.5v1c0,.828-.672,1.5-1.5,1.5h-1c-.828,0-1.5-.672-1.5-1.5v-1c0-.828,.672-1.5,1.5-1.5h1c.828,0,1.5,.672,1.5,1.5Zm3,4h0c0,.828-.672,1.5-1.5,1.5h0c-.828,0-1.5-.672-1.5-1.5h0c0-.828,.672-1.5,1.5-1.5h0c.828,0,1.5,.672,1.5,1.5Zm-3,3v1c0,.828-.672,1.5-1.5,1.5h-1c-.828,0-1.5-.672-1.5-1.5v-1c0-.828,.672-1.5,1.5-1.5h1c.828,0,1.5,.672,1.5,1.5Zm7-7v1c0,.828-.672,1.5-1.5,1.5h-1c-.828,0-1.5-.672-1.5-1.5v-1c0-.828,.672-1.5,1.5-1.5h1c.828,0,1.5,.672,1.5,1.5Z"/>
|
||||
</svg>
|
||||
@else
|
||||
<span class="grid grid-cols-4 gap-[2px] p-1.5">
|
||||
@foreach($qrBits as $bit)
|
||||
<span class="block aspect-square {{ $bit ? ('bg-slate-800 ' . ($meta['circular'] ? 'rounded-full' : '')) : 'bg-transparent' }}"></span>
|
||||
@endforeach
|
||||
</span>
|
||||
@endif
|
||||
</span>
|
||||
<span class="text-xs font-semibold text-slate-700">{{ $meta['label'] }}</span>
|
||||
</span>
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- ── Colors ───────────────────────────────────────────────────── --}}
|
||||
<div x-show="openSection === 'colors'" x-cloak
|
||||
x-transition:enter="transition-opacity duration-150"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
class="space-y-5">
|
||||
<div>
|
||||
<p class="mb-3 text-[10px] font-semibold uppercase tracking-[0.1em] text-slate-400">Quick presets</p>
|
||||
<div class="flex flex-wrap gap-2.5">
|
||||
@foreach([
|
||||
['fg' => '#000000', 'bg' => '#ffffff', 'label' => 'Classic'],
|
||||
['fg' => '#1d4ed8', 'bg' => '#ffffff', 'label' => 'Blue'],
|
||||
['fg' => '#047857', 'bg' => '#ffffff', 'label' => 'Green'],
|
||||
['fg' => '#7c3aed', 'bg' => '#ffffff', 'label' => 'Purple'],
|
||||
['fg' => '#c2410c', 'bg' => '#fff7ed', 'label' => 'Orange'],
|
||||
['fg' => '#be185d', 'bg' => '#fdf4ff', 'label' => 'Pink'],
|
||||
['fg' => '#0f172a', 'bg' => '#ecfdf5', 'label' => 'Dark teal'],
|
||||
] as $preset)
|
||||
<button type="button"
|
||||
@click="fg = '{{ $preset['fg'] }}'; bg = '{{ $preset['bg'] }}'; schedulePreview()"
|
||||
title="{{ $preset['label'] }}"
|
||||
class="h-8 w-8 rounded-full border-2 border-white shadow ring-1 ring-slate-300/60 transition hover:scale-110 hover:ring-indigo-400"
|
||||
style="background-color: {{ $preset['fg'] }}"></button>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-3 sm:grid-cols-2">
|
||||
<div>
|
||||
<label class="mb-1.5 block text-xs font-semibold text-slate-600">Foreground</label>
|
||||
<div class="flex items-center gap-2 rounded-xl border border-slate-200 bg-slate-50/80 p-2">
|
||||
<input type="color" name="style[foreground]" x-model="fg" @input="schedulePreview()"
|
||||
class="h-9 w-10 shrink-0 cursor-pointer rounded-lg border-0 bg-transparent p-0.5">
|
||||
<input type="text" x-model="fg" @change="schedulePreview()"
|
||||
class="min-w-0 flex-1 rounded-lg border border-slate-200 bg-white px-2.5 py-1.5 font-mono text-sm focus:border-indigo-400 focus:outline-none">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1.5 block text-xs font-semibold text-slate-600">Background</label>
|
||||
<div class="flex items-center gap-2 rounded-xl border border-slate-200 bg-slate-50/80 p-2">
|
||||
<input type="color" name="style[background]" x-model="bg" @input="schedulePreview()"
|
||||
class="h-9 w-10 shrink-0 cursor-pointer rounded-lg border-0 bg-transparent p-0.5">
|
||||
<input type="text" x-model="bg" @change="schedulePreview()"
|
||||
class="min-w-0 flex-1 rounded-lg border border-slate-200 bg-white px-2.5 py-1.5 font-mono text-sm focus:border-indigo-400 focus:outline-none">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="mb-3 text-[10px] font-semibold uppercase tracking-[0.1em] text-slate-400">Gradient</p>
|
||||
<input type="hidden" name="style[gradient_type]" :value="gradientType">
|
||||
<div class="flex gap-1 rounded-xl bg-slate-200/50 p-1">
|
||||
@foreach([['none', 'None'], ['linear', 'Linear'], ['radial', 'Radial']] as [$val, $lbl])
|
||||
<button type="button"
|
||||
@click="gradientType = '{{ $val }}'"
|
||||
:class="gradientType === '{{ $val }}' ? 'bg-white shadow-sm text-slate-900' : 'text-slate-500 hover:text-slate-700'"
|
||||
class="flex-1 rounded-lg py-1.5 text-[11px] font-semibold transition-all duration-150">
|
||||
{{ $lbl }}
|
||||
</button>
|
||||
@endforeach
|
||||
</div>
|
||||
<div x-show="gradientType !== 'none'" x-cloak class="mt-3 space-y-3">
|
||||
<div class="grid gap-3 sm:grid-cols-2">
|
||||
<div>
|
||||
<label class="mb-1.5 block text-xs font-semibold text-slate-600">Start color</label>
|
||||
<div class="flex items-center gap-2 rounded-xl border border-slate-200 bg-slate-50/80 p-2">
|
||||
<input type="color" name="style[gradient_color1]" x-model="gradientColor1" @input="schedulePreview()"
|
||||
class="h-9 w-10 shrink-0 cursor-pointer rounded-lg border-0 bg-transparent p-0.5">
|
||||
<input type="text" x-model="gradientColor1" @change="schedulePreview()"
|
||||
class="min-w-0 flex-1 rounded-lg border border-slate-200 bg-white px-2.5 py-1.5 font-mono text-sm focus:border-indigo-400 focus:outline-none">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1.5 block text-xs font-semibold text-slate-600">End color</label>
|
||||
<div class="flex items-center gap-2 rounded-xl border border-slate-200 bg-slate-50/80 p-2">
|
||||
<input type="color" name="style[gradient_color2]" x-model="gradientColor2" @input="schedulePreview()"
|
||||
class="h-9 w-10 shrink-0 cursor-pointer rounded-lg border-0 bg-transparent p-0.5">
|
||||
<input type="text" x-model="gradientColor2" @change="schedulePreview()"
|
||||
class="min-w-0 flex-1 rounded-lg border border-slate-200 bg-white px-2.5 py-1.5 font-mono text-sm focus:border-indigo-400 focus:outline-none">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div x-show="gradientType === 'linear'" class="space-y-1">
|
||||
<label class="flex items-center justify-between text-xs font-semibold text-slate-600">
|
||||
<span>Rotation</span>
|
||||
<span x-text="gradientRotation + '°'" class="font-normal text-slate-400"></span>
|
||||
</label>
|
||||
<input type="range" name="style[gradient_rotation]" min="0" max="360" x-model.number="gradientRotation"
|
||||
class="w-full accent-indigo-600">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- ── Eyes ─────────────────────────────────────────────────────── --}}
|
||||
<div x-show="openSection === 'eyes'" x-cloak
|
||||
x-transition:enter="transition-opacity duration-150"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
class="space-y-5">
|
||||
<div>
|
||||
<p class="mb-3 text-[10px] font-semibold uppercase tracking-[0.1em] text-slate-400">Outer frame</p>
|
||||
<div class="grid grid-cols-3 gap-2.5">
|
||||
@foreach([
|
||||
['value' => 'square', 'label' => 'Square', 'shape' => 'h-7 w-7 border-[3px] border-slate-800'],
|
||||
['value' => 'rounded', 'label' => 'Rounded', 'shape' => 'h-7 w-7 rounded-[5px] border-[3px] border-slate-800'],
|
||||
['value' => 'circle', 'label' => 'Circle', 'shape' => 'h-7 w-7 rounded-full border-[3px] border-slate-800'],
|
||||
] as $opt)
|
||||
<label class="group cursor-pointer">
|
||||
<input type="radio" name="style[finder_outer]" value="{{ $opt['value'] }}" x-model="finderOuter" class="sr-only">
|
||||
<span class="flex flex-col items-center gap-2 rounded-xl border-2 bg-white p-3 transition-all"
|
||||
:class="finderOuter === '{{ $opt['value'] }}'
|
||||
? 'border-indigo-500 bg-indigo-50/60'
|
||||
: 'border-slate-200 group-hover:border-slate-300'">
|
||||
<span class="flex h-10 w-10 items-center justify-center rounded-lg bg-slate-50 ring-1 ring-slate-200/60">
|
||||
<span class="{{ $opt['shape'] }}"></span>
|
||||
</span>
|
||||
<span class="text-[11px] font-semibold text-slate-600">{{ $opt['label'] }}</span>
|
||||
</span>
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="mb-3 text-[10px] font-semibold uppercase tracking-[0.1em] text-slate-400">Inner dot</p>
|
||||
<div class="grid grid-cols-3 gap-2.5">
|
||||
@foreach([
|
||||
['value' => 'square', 'label' => 'Square', 'shape' => 'h-5 w-5 rounded-[2px] bg-slate-800'],
|
||||
['value' => 'rounded', 'label' => 'Rounded', 'shape' => 'h-5 w-5 rounded-[4px] bg-slate-800'],
|
||||
['value' => 'dot', 'label' => 'Dot', 'shape' => 'h-5 w-5 rounded-full bg-slate-800'],
|
||||
] as $opt)
|
||||
<label class="group cursor-pointer">
|
||||
<input type="radio" name="style[finder_inner]" value="{{ $opt['value'] }}" x-model="finderInner" class="sr-only">
|
||||
<span class="flex flex-col items-center gap-2 rounded-xl border-2 bg-white p-3 transition-all"
|
||||
:class="finderInner === '{{ $opt['value'] }}'
|
||||
? 'border-indigo-500 bg-indigo-50/60'
|
||||
: 'border-slate-200 group-hover:border-slate-300'">
|
||||
<span class="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-50 ring-1 ring-slate-200/60">
|
||||
<span class="{{ $opt['shape'] }}"></span>
|
||||
</span>
|
||||
<span class="text-[11px] font-semibold text-slate-600">{{ $opt['label'] }}</span>
|
||||
</span>
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- ── Logo ─────────────────────────────────────────────────────── --}}
|
||||
<div x-show="openSection === 'logo'" x-cloak
|
||||
x-transition:enter="transition-opacity duration-150"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
class="space-y-4">
|
||||
<div>
|
||||
<p class="text-xs font-semibold text-slate-700">Center logo</p>
|
||||
<p class="mt-0.5 text-xs leading-5 text-slate-400">Placed in the center. Error correction is raised automatically when a logo is present.</p>
|
||||
</div>
|
||||
<label class="flex cursor-pointer flex-col items-center gap-3 rounded-xl border-2 border-dashed border-slate-200 bg-slate-50/60 py-8 text-center transition hover:border-indigo-400 hover:bg-indigo-50/20">
|
||||
<span class="flex h-12 w-12 items-center justify-center rounded-full bg-white shadow-sm ring-1 ring-slate-200/60">
|
||||
<svg class="h-6 w-6 text-slate-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"/>
|
||||
</svg>
|
||||
</span>
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-slate-700">Click to upload</p>
|
||||
<p class="text-xs text-slate-400">PNG, JPG, GIF, WebP · max 2 MB</p>
|
||||
</div>
|
||||
<input type="file" name="logo" accept="image/png,image/jpeg,image/gif,image/webp" x-ref="logoInput" @change="onLogoChange()" class="sr-only">
|
||||
</label>
|
||||
|
||||
{{-- Logo options: shown when a logo is present (uploaded or existing) --}}
|
||||
<div x-show="hasExistingLogo || _rawLogoFile" x-cloak class="space-y-4 border-t border-slate-100 pt-4">
|
||||
|
||||
{{-- Size --}}
|
||||
<div>
|
||||
<label class="flex items-center justify-between text-xs font-semibold text-slate-600">
|
||||
<span>Logo size</span>
|
||||
<span x-text="Math.round(logoSize * 100) + '%'" class="font-normal text-slate-400"></span>
|
||||
</label>
|
||||
<input type="range" min="10" max="40" step="1"
|
||||
:value="Math.round(logoSize * 100)"
|
||||
@input="logoSize = parseFloat($event.target.value) / 100"
|
||||
class="mt-2 w-full accent-indigo-600">
|
||||
<input type="hidden" name="style[logo_size]" :value="logoSize">
|
||||
</div>
|
||||
|
||||
{{-- Padding --}}
|
||||
<div>
|
||||
<label class="flex items-center justify-between text-xs font-semibold text-slate-600">
|
||||
<span>Padding</span>
|
||||
<span x-text="logoMargin" class="font-normal text-slate-400"></span>
|
||||
</label>
|
||||
<input type="range" name="style[logo_margin]" min="0" max="15" x-model.number="logoMargin"
|
||||
class="mt-2 w-full accent-indigo-600">
|
||||
</div>
|
||||
|
||||
{{-- White background toggle --}}
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs font-semibold text-slate-600">White background</span>
|
||||
<button type="button" role="switch" :aria-checked="logoWhiteBg"
|
||||
@click="logoWhiteBg = !logoWhiteBg"
|
||||
:class="logoWhiteBg ? 'bg-indigo-500' : 'bg-slate-200'"
|
||||
class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors focus:outline-none">
|
||||
<span :class="logoWhiteBg ? 'translate-x-5' : 'translate-x-1'"
|
||||
class="inline-block h-3.5 w-3.5 rounded-full bg-white shadow transition-transform"></span>
|
||||
</button>
|
||||
<input type="hidden" name="style[logo_white_bg]" :value="logoWhiteBg ? '1' : '0'">
|
||||
</div>
|
||||
|
||||
{{-- Shape --}}
|
||||
<div>
|
||||
<p class="mb-2 text-[10px] font-semibold uppercase tracking-[0.1em] text-slate-400">Shape</p>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
{{-- Original: landscape rectangle — logo keeps its natural aspect ratio --}}
|
||||
<button type="button"
|
||||
@click="logoShape = 'none'"
|
||||
:class="logoShape === 'none' ? 'border-indigo-500 bg-indigo-50/60' : 'border-slate-200 hover:border-slate-300'"
|
||||
class="flex flex-col items-center gap-2 rounded-xl border-2 bg-white p-3 transition-all">
|
||||
<span class="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-50 ring-1 ring-slate-200/60">
|
||||
<span class="h-4 w-7 rounded-[2px] bg-slate-800"></span>
|
||||
</span>
|
||||
<span class="text-[11px] font-semibold text-slate-600">Original</span>
|
||||
</button>
|
||||
{{-- Rounded: square crop with rounded corners --}}
|
||||
<button type="button"
|
||||
@click="logoShape = 'rounded'"
|
||||
:class="logoShape === 'rounded' ? 'border-indigo-500 bg-indigo-50/60' : 'border-slate-200 hover:border-slate-300'"
|
||||
class="flex flex-col items-center gap-2 rounded-xl border-2 bg-white p-3 transition-all">
|
||||
<span class="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-50 ring-1 ring-slate-200/60">
|
||||
<span class="h-7 w-7 rounded-xl bg-slate-800"></span>
|
||||
</span>
|
||||
<span class="text-[11px] font-semibold text-slate-600">Rounded</span>
|
||||
</button>
|
||||
{{-- Circle: square crop clipped to circle --}}
|
||||
<button type="button"
|
||||
@click="logoShape = 'circle'"
|
||||
:class="logoShape === 'circle' ? 'border-indigo-500 bg-indigo-50/60' : 'border-slate-200 hover:border-slate-300'"
|
||||
class="flex flex-col items-center gap-2 rounded-xl border-2 bg-white p-3 transition-all">
|
||||
<span class="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-50 ring-1 ring-slate-200/60">
|
||||
<span class="h-7 w-7 rounded-full bg-slate-800"></span>
|
||||
</span>
|
||||
<span class="text-[11px] font-semibold text-slate-600">Circle</span>
|
||||
</button>
|
||||
</div>
|
||||
<input type="hidden" name="style[logo_shape]" :value="logoShape">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@if(!empty($showRemoveLogo))
|
||||
<label class="flex items-center gap-2.5 text-sm text-slate-600">
|
||||
<input type="checkbox" name="remove_logo" value="1" x-model="removeLogo" @change="schedulePreview()"
|
||||
class="h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
|
||||
Remove current logo
|
||||
</label>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- ── Frame ────────────────────────────────────────────────────── --}}
|
||||
<div x-show="openSection === 'frame'" x-cloak
|
||||
x-transition:enter="transition-opacity duration-150"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
class="space-y-5">
|
||||
<div>
|
||||
<p class="mb-3 text-[10px] font-semibold uppercase tracking-[0.1em] text-slate-400">Frame style</p>
|
||||
<div class="grid grid-cols-2 gap-2.5">
|
||||
@foreach($frameStyles as $key => $meta)
|
||||
<label class="group cursor-pointer">
|
||||
<input type="radio" name="style[frame_style]" value="{{ $key }}" x-model="frameStyle" class="sr-only">
|
||||
<span class="flex items-center gap-3 rounded-xl border-2 bg-white p-3 transition-all"
|
||||
:class="frameStyle === '{{ $key }}'
|
||||
? 'border-indigo-500 bg-indigo-50/60'
|
||||
: 'border-slate-200 group-hover:border-slate-300'">
|
||||
<span class="flex h-10 w-9 shrink-0 items-end justify-center overflow-hidden rounded-lg border border-slate-200 bg-white p-1 shadow-sm">
|
||||
@if($key === 'none')
|
||||
<span class="h-8 w-8 rounded-sm bg-slate-200 opacity-40"></span>
|
||||
@elseif($meta['mode'] === 'border')
|
||||
<span class="h-8 w-8 rounded-sm border-2 border-slate-500 bg-slate-100"></span>
|
||||
@elseif($meta['mode'] === 'label')
|
||||
<span class="flex h-9 w-8 flex-col items-stretch gap-0.5">
|
||||
<span class="flex-1 rounded-sm border border-slate-300 bg-slate-100"></span>
|
||||
<span class="rounded-sm bg-slate-700 py-0.5 text-center text-[5px] font-bold leading-none text-white">SCAN</span>
|
||||
</span>
|
||||
@else
|
||||
<span class="flex h-9 w-8 flex-col items-stretch gap-0.5">
|
||||
<span class="flex-1 rounded-sm border border-slate-300 bg-slate-100"></span>
|
||||
<span class="rounded-full bg-slate-700 py-0.5 text-center text-[5px] font-bold leading-none text-white">TAP</span>
|
||||
</span>
|
||||
@endif
|
||||
</span>
|
||||
<span class="min-w-0">
|
||||
<span class="block text-xs font-semibold text-slate-800">{{ $meta['label'] }}</span>
|
||||
<span class="block text-[10px] leading-4 text-slate-400">{{ $meta['description'] }}</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Frame colour --}}
|
||||
<div x-show="frameStyle !== 'none'" x-cloak class="space-y-1">
|
||||
<label class="block text-xs font-semibold text-slate-600">Frame colour</label>
|
||||
<div class="flex gap-2">
|
||||
<input type="color" name="style[frame_color]" x-model="frameColor" @input="schedulePreview()"
|
||||
class="h-9 w-9 shrink-0 cursor-pointer rounded-lg border border-slate-200 bg-white p-0.5">
|
||||
<input type="text" x-model="frameColor" @change="schedulePreview()" maxlength="7"
|
||||
class="flex-1 rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm focus:border-indigo-400 focus:outline-none focus:ring-1 focus:ring-indigo-400/30">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Frame text -- only for frames that show a CTA label --}}
|
||||
<div x-show="frameStyle === 'scan_me' || frameStyle === 'tap_to_scan'" x-cloak class="space-y-1">
|
||||
<label class="flex items-center justify-between text-xs font-semibold text-slate-600">
|
||||
<span>Label text</span>
|
||||
<span class="font-normal text-slate-400" x-text="frameStyle === 'tap_to_scan' ? 'Default: TAP TO SCAN' : 'Default: SCAN ME'"></span>
|
||||
</label>
|
||||
<input type="text" name="style[frame_text]" x-model="frameText"
|
||||
maxlength="100"
|
||||
:placeholder="frameStyle === 'tap_to_scan' ? 'TAP TO SCAN' : 'SCAN ME'"
|
||||
class="w-full rounded-xl border border-slate-200 bg-white px-3.5 py-2.5 text-sm focus:border-indigo-400 focus:outline-none focus:ring-1 focus:ring-indigo-400/30">
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 border-t border-slate-100 pt-4">
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-slate-600">Error correction</label>
|
||||
<select name="style[error_correction]" x-model="ecc"
|
||||
class="mt-1.5 w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm focus:border-indigo-400 focus:outline-none">
|
||||
<option value="L">Low — 7% recovery</option>
|
||||
<option value="M">Medium — 15% recovery</option>
|
||||
<option value="Q">Quartile — 25% recovery</option>
|
||||
<option value="H">High — 30% recovery</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="flex items-center justify-between text-xs font-semibold text-slate-600">
|
||||
<span>Output scale</span>
|
||||
<span x-text="scale + '×'" class="font-normal text-slate-400"></span>
|
||||
</label>
|
||||
<input type="range" name="style[scale]" min="4" max="16" x-model.number="scale"
|
||||
class="mt-2 w-full accent-indigo-600">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="flex items-center justify-between text-xs font-semibold text-slate-600">
|
||||
<span>Quiet zone</span>
|
||||
<span x-text="margin + ' modules'" class="font-normal text-slate-400"></span>
|
||||
</label>
|
||||
<input type="range" name="style[margin]" min="0" max="10" x-model.number="margin"
|
||||
class="mt-2 w-full accent-indigo-600">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,669 @@
|
||||
@once('qr-customizer-alpine')
|
||||
<script>
|
||||
(function () {
|
||||
const registerQrCustomizer = () => {
|
||||
Alpine.data('qrCustomizer', (config) => ({
|
||||
previewUrl: config.previewUrl,
|
||||
shortCode: config.shortCode || 'preview',
|
||||
qrData: config.qrData || 'https://ladill.com',
|
||||
existingLogoPath: config.existingLogoPath || null,
|
||||
hasExistingLogo: Boolean(config.hasExistingLogo),
|
||||
removeLogo: false,
|
||||
previewLoading: false,
|
||||
previewTimer: null,
|
||||
showPreviewModal: false,
|
||||
openSection: config.openSection || 'body',
|
||||
balance: config.balance ?? null,
|
||||
price: config.price ?? null,
|
||||
topupModalId: config.topupModalId ?? null,
|
||||
topupUrl: config.topupUrl ?? null,
|
||||
canonicalSyncUrl: config.canonicalSyncUrl ?? null,
|
||||
csrf: config.csrf ?? null,
|
||||
_canonicalSynced: false,
|
||||
type: config.type ?? 'url',
|
||||
wizard: Boolean(config.wizard),
|
||||
step: config.wizard ? 1 : 0,
|
||||
fg: config.style.foreground,
|
||||
bg: config.style.background,
|
||||
ecc: config.style.error_correction,
|
||||
margin: Number(config.style.margin),
|
||||
moduleStyle: config.style.module_style,
|
||||
finderOuter: config.style.finder_outer,
|
||||
finderInner: config.style.finder_inner,
|
||||
frameStyle: config.style.frame_style,
|
||||
frameText: config.style.frame_text || '',
|
||||
frameColor: config.style.frame_color || '#000000',
|
||||
scale: Number(config.style.scale),
|
||||
gradientType: config.style.gradient_type || 'none',
|
||||
gradientColor1: config.style.gradient_color1 || '#000000',
|
||||
gradientColor2: config.style.gradient_color2 || '#7c3aed',
|
||||
gradientRotation: Number(config.style.gradient_rotation ?? 45),
|
||||
logoSize: Number(config.style.logo_size ?? 0.3),
|
||||
logoMargin: Number(config.style.logo_margin ?? 5),
|
||||
logoWhiteBg: Boolean(config.style.logo_white_bg),
|
||||
logoShape: config.style.logo_shape || 'none',
|
||||
_rawLogoFile: null,
|
||||
_processedLogoUrl: null,
|
||||
init() {
|
||||
[
|
||||
'fg', 'bg', 'ecc', 'margin', 'moduleStyle',
|
||||
'finderOuter', 'finderInner', 'frameStyle', 'frameText', 'frameColor', 'scale',
|
||||
'gradientType', 'gradientColor1', 'gradientColor2', 'gradientRotation',
|
||||
'logoSize', 'logoMargin',
|
||||
].forEach((field) => {
|
||||
this.$watch(field, () => this.schedulePreview());
|
||||
});
|
||||
|
||||
// These require canvas re-processing before preview
|
||||
['logoWhiteBg', 'logoShape'].forEach((field) => {
|
||||
this.$watch(field, () => this._reprocessLogo());
|
||||
});
|
||||
|
||||
this.schedulePreview();
|
||||
|
||||
if (config.existingLogoUrl) {
|
||||
this._loadExistingLogo(config.existingLogoUrl);
|
||||
}
|
||||
|
||||
this.$watch('showPreviewModal', (val) => {
|
||||
if (val) this.schedulePreview();
|
||||
});
|
||||
},
|
||||
toggleSection(id) {
|
||||
this.openSection = this.openSection === id ? null : id;
|
||||
},
|
||||
schedulePreview() {
|
||||
clearTimeout(this.previewTimer);
|
||||
this.previewTimer = setTimeout(() => this.refreshPreview(), 200);
|
||||
},
|
||||
async onLogoChange() {
|
||||
const input = this.$refs.logoInput;
|
||||
this._rawLogoFile = input?.files?.[0] || null;
|
||||
if (this._rawLogoFile) {
|
||||
await this._reprocessLogo();
|
||||
} else {
|
||||
this._processedLogoUrl = null;
|
||||
this.schedulePreview();
|
||||
}
|
||||
},
|
||||
async _reprocessLogo() {
|
||||
if (!this._rawLogoFile) return;
|
||||
const result = await this._processLogoImage(this._rawLogoFile);
|
||||
if (result) {
|
||||
this._processedLogoUrl = result;
|
||||
this.schedulePreview();
|
||||
}
|
||||
},
|
||||
// Load existing logo from data URI (edit view) and apply canvas processing
|
||||
_loadExistingLogo(dataUri) {
|
||||
fetch(dataUri)
|
||||
.then(r => r.blob())
|
||||
.then(blob => {
|
||||
this._rawLogoFile = new File([blob], 'logo', { type: blob.type || 'image/png' });
|
||||
return this._processLogoImage(this._rawLogoFile);
|
||||
})
|
||||
.then(result => {
|
||||
if (result) {
|
||||
this._processedLogoUrl = result;
|
||||
this.schedulePreview();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this._processedLogoUrl = dataUri;
|
||||
this.schedulePreview();
|
||||
});
|
||||
},
|
||||
// Apply shape clipping and/or white background to logo via canvas.
|
||||
// For circle/rounded shapes a center-square crop is used so the shape looks balanced.
|
||||
// For no-shape logos the natural aspect ratio is preserved.
|
||||
_processLogoImage(file) {
|
||||
return new Promise((resolve) => {
|
||||
const img = new Image();
|
||||
const raw = URL.createObjectURL(file);
|
||||
img.onload = () => {
|
||||
const needsSquareCrop = this.logoShape !== 'none';
|
||||
const sw = img.naturalWidth;
|
||||
const sh = img.naturalHeight;
|
||||
|
||||
let cw, ch, sx, sy, sSize;
|
||||
if (needsSquareCrop) {
|
||||
// Crop to center square for circle/rounded shapes
|
||||
sSize = Math.min(sw, sh);
|
||||
sx = (sw - sSize) / 2;
|
||||
sy = (sh - sSize) / 2;
|
||||
cw = ch = 300;
|
||||
} else {
|
||||
// Preserve natural aspect ratio
|
||||
const MAX = 600;
|
||||
const scale = Math.min(1, MAX / Math.max(sw, sh));
|
||||
cw = Math.round(sw * scale);
|
||||
ch = Math.round(sh * scale);
|
||||
sx = sy = 0;
|
||||
sSize = null;
|
||||
}
|
||||
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = cw;
|
||||
canvas.height = ch;
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
if (needsSquareCrop) {
|
||||
ctx.beginPath();
|
||||
if (this.logoShape === 'circle') {
|
||||
ctx.arc(cw / 2, ch / 2, cw / 2, 0, Math.PI * 2);
|
||||
} else {
|
||||
// Rounded — 20% corner radius
|
||||
const r = cw * 0.2;
|
||||
ctx.moveTo(r, 0);
|
||||
ctx.lineTo(cw - r, 0);
|
||||
ctx.arcTo(cw, 0, cw, r, r);
|
||||
ctx.lineTo(cw, ch - r);
|
||||
ctx.arcTo(cw, ch, cw - r, ch, r);
|
||||
ctx.lineTo(r, ch);
|
||||
ctx.arcTo(0, ch, 0, ch - r, r);
|
||||
ctx.lineTo(0, r);
|
||||
ctx.arcTo(0, 0, r, 0, r);
|
||||
ctx.closePath();
|
||||
}
|
||||
ctx.clip();
|
||||
}
|
||||
|
||||
if (this.logoWhiteBg) {
|
||||
ctx.fillStyle = '#ffffff';
|
||||
ctx.fillRect(0, 0, cw, ch);
|
||||
}
|
||||
|
||||
if (sSize !== null) {
|
||||
ctx.drawImage(img, sx, sy, sSize, sSize, 0, 0, cw, ch);
|
||||
} else {
|
||||
ctx.drawImage(img, 0, 0, cw, ch);
|
||||
}
|
||||
|
||||
URL.revokeObjectURL(raw);
|
||||
resolve(canvas.toDataURL('image/png'));
|
||||
};
|
||||
img.onerror = () => {
|
||||
URL.revokeObjectURL(raw);
|
||||
resolve(null);
|
||||
};
|
||||
img.src = raw;
|
||||
});
|
||||
},
|
||||
setStylePreset(preset) {
|
||||
const presets = {
|
||||
classic: {
|
||||
fg: '#000000', bg: '#ffffff', moduleStyle: 'square',
|
||||
finderOuter: 'square', finderInner: 'square',
|
||||
frameStyle: 'none', ecc: 'M', margin: 4,
|
||||
gradientType: 'none',
|
||||
},
|
||||
rounded: {
|
||||
fg: '#111827', bg: '#ffffff', moduleStyle: 'square',
|
||||
finderOuter: 'rounded', finderInner: 'square',
|
||||
frameStyle: 'scan_me', ecc: 'Q', margin: 4,
|
||||
gradientType: 'none',
|
||||
},
|
||||
branded: {
|
||||
fg: '#1d4ed8', bg: '#ffffff', moduleStyle: 'square',
|
||||
finderOuter: 'rounded', finderInner: 'square',
|
||||
frameStyle: 'tap_to_scan', ecc: 'Q', margin: 4,
|
||||
gradientType: 'none',
|
||||
},
|
||||
dots: {
|
||||
fg: '#0f172a', bg: '#ffffff', moduleStyle: 'dots',
|
||||
finderOuter: 'square', finderInner: 'dot',
|
||||
frameStyle: 'scan_me', ecc: 'H', margin: 5,
|
||||
gradientType: 'none',
|
||||
},
|
||||
};
|
||||
Object.assign(this, presets[preset] || presets.classic);
|
||||
this.schedulePreview();
|
||||
},
|
||||
setEyePreset(preset) {
|
||||
const presets = {
|
||||
square: { finderOuter: 'square', finderInner: 'square' },
|
||||
rounded: { finderOuter: 'rounded', finderInner: 'square' },
|
||||
target: { finderOuter: 'circle', finderInner: 'dot' },
|
||||
};
|
||||
Object.assign(this, presets[preset] || presets.square);
|
||||
this.schedulePreview();
|
||||
},
|
||||
redirectTopup() {
|
||||
if (this.topupUrl) {
|
||||
window.location.href = this.topupUrl;
|
||||
return true;
|
||||
}
|
||||
|
||||
if (this.topupModalId) {
|
||||
window.dispatchEvent(new CustomEvent('open-modal', {
|
||||
detail: this.topupModalId,
|
||||
bubbles: true,
|
||||
}));
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
checkBalance(event) {
|
||||
if (this.balance === null || this.price === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.balance <= 0 || this.balance < this.price) {
|
||||
event?.preventDefault();
|
||||
this.redirectTopup();
|
||||
}
|
||||
},
|
||||
nextStep(event) {
|
||||
if (!this.wizard) {
|
||||
return;
|
||||
}
|
||||
if (this.step === 1 && !this.validateWizardStep1()) {
|
||||
event?.preventDefault();
|
||||
return;
|
||||
}
|
||||
if (this.step < 3) {
|
||||
this.step++;
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
},
|
||||
prevStep() {
|
||||
if (this.wizard && this.step > 1) {
|
||||
this.step--;
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
},
|
||||
validateWizardStep1() {
|
||||
const form = this.$refs.createForm;
|
||||
const label = form?.querySelector('[name=label]');
|
||||
if (!label?.value?.trim()) {
|
||||
label?.focus();
|
||||
label?.reportValidity?.();
|
||||
return false;
|
||||
}
|
||||
return label.checkValidity?.() !== false;
|
||||
},
|
||||
wizardSubmit(event) {
|
||||
if (this.wizard && this.step < 3) {
|
||||
event?.preventDefault();
|
||||
this.nextStep(event);
|
||||
return;
|
||||
}
|
||||
this.submitOrTopup(event);
|
||||
},
|
||||
reviewLabel() {
|
||||
return this.$refs.createForm?.querySelector('[name=label]')?.value?.trim() || '';
|
||||
},
|
||||
reviewEventName() {
|
||||
const eventBlock = this.$refs.createForm?.querySelector('[data-event-name]');
|
||||
return eventBlock?.value?.trim() || this.reviewLabel();
|
||||
},
|
||||
submitOrTopup(event) {
|
||||
if (this.balance <= 0 || this.balance < this.price) {
|
||||
event?.preventDefault();
|
||||
this.redirectTopup();
|
||||
return;
|
||||
}
|
||||
|
||||
if (event?.type === 'submit') {
|
||||
return;
|
||||
}
|
||||
|
||||
const form = this.$el.tagName === 'FORM' ? this.$el : this.$refs.createForm;
|
||||
form?.requestSubmit();
|
||||
},
|
||||
_buildGradient() {
|
||||
if (this.gradientType === 'none') return null;
|
||||
return {
|
||||
type: this.gradientType,
|
||||
rotation: this.gradientType === 'linear' ? (Math.PI * this.gradientRotation / 180) : 0,
|
||||
colorStops: [
|
||||
{ offset: 0, color: this.gradientColor1 },
|
||||
{ offset: 1, color: this.gradientColor2 },
|
||||
],
|
||||
};
|
||||
},
|
||||
_buildQrOptions(width, height) {
|
||||
const dotsTypeMap = { square: 'square', dots: 'dots' };
|
||||
const cornersSquareMap = { square: 'square', rounded: 'extra-rounded', circle: 'dot' };
|
||||
// 'rounded' maps to 'square'; SVG post-processing applies the actual corner radius
|
||||
const cornersDotMap = { square: 'square', rounded: 'square', dot: 'dot' };
|
||||
|
||||
const gradient = this._buildGradient();
|
||||
|
||||
const options = {
|
||||
width,
|
||||
height,
|
||||
type: 'svg',
|
||||
data: this.qrData,
|
||||
margin: Math.round(Number(this.margin) * 4),
|
||||
qrOptions: { errorCorrectionLevel: this.ecc || 'M' },
|
||||
dotsOptions: {
|
||||
type: dotsTypeMap[this.moduleStyle] || 'square',
|
||||
...(gradient ? { gradient } : { color: this.fg }),
|
||||
},
|
||||
cornersSquareOptions: {
|
||||
type: cornersSquareMap[this.finderOuter] || 'square',
|
||||
...(gradient ? { gradient } : { color: this.fg }),
|
||||
},
|
||||
cornersDotOptions: {
|
||||
type: cornersDotMap[this.finderInner] || 'square',
|
||||
...(gradient ? { gradient } : { color: this.fg }),
|
||||
},
|
||||
backgroundOptions: { color: this.bg },
|
||||
};
|
||||
|
||||
if (this._processedLogoUrl && !this.removeLogo) {
|
||||
options.image = this._processedLogoUrl;
|
||||
options.imageOptions = {
|
||||
crossOrigin: 'anonymous',
|
||||
margin: this.logoMargin,
|
||||
imageSize: this.logoSize,
|
||||
hideBackgroundDots: true,
|
||||
};
|
||||
}
|
||||
|
||||
return options;
|
||||
},
|
||||
// Post-process SVG to give corner inner dots rounded corners.
|
||||
// qr-code-styling renders square cornersDot as <rect> elements inside <clipPath> in <defs>.
|
||||
// Adding rx/ry directly to those rects rounds the clip mask → the visible dot appears rounded.
|
||||
_applyRoundedInnerDot(container) {
|
||||
const svg = container.querySelector('svg');
|
||||
if (!svg) return;
|
||||
|
||||
const defs = svg.querySelector('defs');
|
||||
if (!defs) { this._applyRoundedInnerDotFallback(container); return; }
|
||||
|
||||
// Collect all square <rect> elements (width === height) inside <clipPath> elements,
|
||||
// grouped by their size value.
|
||||
const groups = new Map();
|
||||
defs.querySelectorAll('clipPath rect').forEach(rect => {
|
||||
const w = rect.getAttribute('width');
|
||||
const h = rect.getAttribute('height');
|
||||
if (w && h && w === h) {
|
||||
if (!groups.has(w)) groups.set(w, []);
|
||||
groups.get(w).push(rect);
|
||||
}
|
||||
});
|
||||
|
||||
// Find the group of exactly 3 with the smallest size — that is the inner finder dot
|
||||
// (one rect per finder eye; outer ring uses <path>, individual modules form much larger groups).
|
||||
let targetRects = null, minSize = Infinity;
|
||||
for (const [sizeStr, rects] of groups) {
|
||||
if (rects.length !== 3) continue;
|
||||
const size = parseFloat(sizeStr);
|
||||
if (size < minSize) { minSize = size; targetRects = rects; }
|
||||
}
|
||||
|
||||
if (!targetRects) { this._applyRoundedInnerDotFallback(container); return; }
|
||||
|
||||
const r = (minSize * 0.28).toFixed(3);
|
||||
for (const rect of targetRects) {
|
||||
rect.setAttribute('rx', r);
|
||||
rect.setAttribute('ry', r);
|
||||
}
|
||||
},
|
||||
// Fallback: use qrcode-generator to compute finder inner dot pixel positions, then
|
||||
// overdraw rounded SVG <rect> elements at those positions.
|
||||
_applyRoundedInnerDotFallback(container) {
|
||||
const svg = container.querySelector('svg');
|
||||
if (!svg || typeof window.qrcode === 'undefined') return;
|
||||
try {
|
||||
const qr = window.qrcode(0, this.ecc || 'M');
|
||||
qr.addData(this.qrData);
|
||||
qr.make();
|
||||
const n = qr.getModuleCount();
|
||||
const svgW = svg.viewBox?.baseVal?.width || parseFloat(svg.getAttribute('width') || '500');
|
||||
const marginPx = Math.round(Number(this.margin) * 4);
|
||||
const modulePx = (svgW - 2 * marginPx) / n;
|
||||
const dotSize = modulePx * 3;
|
||||
const r = dotSize * 0.28;
|
||||
const fill = this.gradientType !== 'none' ? this.gradientColor1 : this.fg;
|
||||
const NS = 'http://www.w3.org/2000/svg';
|
||||
for (const [row, col] of [[2, 2], [2, n - 5], [n - 5, 2]]) {
|
||||
const x = marginPx + col * modulePx;
|
||||
const y = marginPx + row * modulePx;
|
||||
// Cover the square dot with the background color
|
||||
const eraser = document.createElementNS(NS, 'rect');
|
||||
eraser.setAttribute('x', x); eraser.setAttribute('y', y);
|
||||
eraser.setAttribute('width', dotSize); eraser.setAttribute('height', dotSize);
|
||||
eraser.setAttribute('fill', this.bg);
|
||||
svg.appendChild(eraser);
|
||||
// Draw rounded corner dot
|
||||
const dot = document.createElementNS(NS, 'rect');
|
||||
dot.setAttribute('x', x); dot.setAttribute('y', y);
|
||||
dot.setAttribute('width', dotSize); dot.setAttribute('height', dotSize);
|
||||
dot.setAttribute('rx', r); dot.setAttribute('ry', r);
|
||||
dot.setAttribute('fill', fill);
|
||||
svg.appendChild(dot);
|
||||
}
|
||||
} catch (_) { /* silent */ }
|
||||
},
|
||||
refreshPreview() {
|
||||
if (typeof window.QRCodeStyling === 'undefined') return;
|
||||
|
||||
this.previewLoading = true;
|
||||
|
||||
try {
|
||||
const container = this.$refs.qrPreview;
|
||||
if (container) {
|
||||
container.innerHTML = '';
|
||||
new window.QRCodeStyling(this._buildQrOptions(500, 500)).append(container);
|
||||
if (this.finderInner === 'rounded') this._applyRoundedInnerDot(container);
|
||||
}
|
||||
|
||||
const modalContainer = this.$refs.qrPreviewModal;
|
||||
if (modalContainer && this.showPreviewModal) {
|
||||
modalContainer.innerHTML = '';
|
||||
new window.QRCodeStyling(this._buildQrOptions(320, 320)).append(modalContainer);
|
||||
if (this.finderInner === 'rounded') this._applyRoundedInnerDot(modalContainer);
|
||||
}
|
||||
} finally {
|
||||
this.previewLoading = false;
|
||||
this._maybeSyncCanonical();
|
||||
}
|
||||
},
|
||||
|
||||
// Persist the exact rendered QR as the canonical SVG+PNG (single source of
|
||||
// truth) so downloads match the preview. Only on pages with a real /q code
|
||||
// (canonicalSyncUrl set — i.e. the show page), once per load.
|
||||
_maybeSyncCanonical() {
|
||||
if (!this.canonicalSyncUrl || this._canonicalSynced) return;
|
||||
if (typeof window.QRCodeStyling === 'undefined') return;
|
||||
const svgEl = this.$refs.qrPreview?.querySelector('svg');
|
||||
if (!svgEl) return;
|
||||
this._canonicalSynced = true;
|
||||
// Defer so finder-dot post-processing + DOM settle before serializing.
|
||||
setTimeout(() => this.syncCanonical(), 300);
|
||||
},
|
||||
async syncCanonical() {
|
||||
try {
|
||||
const svgEl = this.$refs.qrPreview?.querySelector('svg');
|
||||
if (!svgEl) return;
|
||||
const inner = new XMLSerializer().serializeToString(svgEl);
|
||||
const finalSvg = this._buildFramedSvg(inner);
|
||||
const png = await this._svgToPng(finalSvg);
|
||||
if (!png) return;
|
||||
const fd = new FormData();
|
||||
fd.append('svg', finalSvg);
|
||||
fd.append('png', png);
|
||||
await fetch(this.canonicalSyncUrl, {
|
||||
method: 'POST',
|
||||
headers: { 'X-CSRF-TOKEN': this.csrf || '', 'Accept': 'application/json' },
|
||||
body: fd,
|
||||
});
|
||||
} catch (_) { /* non-fatal: server fallback render remains */ }
|
||||
},
|
||||
_xmlEscape(s) {
|
||||
return String(s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
},
|
||||
// Composite the CSS preview frame (thin border / SCAN ME label / TAP TO
|
||||
// SCAN pill) into a single vector SVG, with the QR nested as vector — so
|
||||
// downloads include the frame exactly like the preview. No frame => QR as-is.
|
||||
_buildFramedSvg(qrSvg) {
|
||||
const fs = this.frameStyle;
|
||||
if (!fs || fs === 'none') return qrSvg;
|
||||
|
||||
const color = this.frameColor || '#000000';
|
||||
const Q = 1000, pad = 72, radius = 56;
|
||||
const W = Q + pad * 2;
|
||||
|
||||
// Nest the QR vector: ensure a viewBox, drop intrinsic width/height, place it.
|
||||
const wm = qrSvg.match(/<svg\b[^>]*?\swidth\s*=\s*"([\d.]+)/i);
|
||||
const hm = qrSvg.match(/<svg\b[^>]*?\sheight\s*=\s*"([\d.]+)/i);
|
||||
const ow = wm ? wm[1] : '500';
|
||||
const oh = hm ? hm[1] : '500';
|
||||
let qr = qrSvg;
|
||||
if (!/viewBox\s*=/i.test(qr)) {
|
||||
qr = qr.replace(/<svg\b/i, `<svg viewBox="0 0 ${ow} ${oh}"`);
|
||||
}
|
||||
qr = qr
|
||||
.replace(/(<svg\b[^>]*?)\swidth\s*=\s*"[^"]*"/i, '$1')
|
||||
.replace(/(<svg\b[^>]*?)\sheight\s*=\s*"[^"]*"/i, '$1')
|
||||
.replace(/<svg\b/i, `<svg x="${pad}" y="${pad}" width="${Q}" height="${Q}"`);
|
||||
|
||||
let labelH = 0, labelMarkup = '', border = '';
|
||||
if (fs === 'scan_me') {
|
||||
labelH = 124;
|
||||
const txt = ((this.frameText && this.frameText.trim()) ? this.frameText : 'SCAN ME').toUpperCase();
|
||||
labelMarkup =
|
||||
`<line x1="${pad}" y1="${Q + pad + 26}" x2="${W - pad}" y2="${Q + pad + 26}" stroke="${color}" stroke-opacity="0.25" stroke-width="2"/>` +
|
||||
`<text x="${W / 2}" y="${Q + pad + 86}" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="44" font-weight="700" letter-spacing="7" fill="${color}">${this._xmlEscape(txt)}</text>`;
|
||||
} else if (fs === 'tap_to_scan') {
|
||||
labelH = 142;
|
||||
const txt = ((this.frameText && this.frameText.trim()) ? this.frameText : 'TAP TO SCAN').toUpperCase();
|
||||
const pillH = 78;
|
||||
const pillW = Math.min(W - pad * 2, 160 + txt.length * 24);
|
||||
const pillX = (W - pillW) / 2, pillY = Q + pad + 30;
|
||||
labelMarkup =
|
||||
`<rect x="${pillX}" y="${pillY}" width="${pillW}" height="${pillH}" rx="${pillH / 2}" fill="${color}"/>` +
|
||||
`<text x="${W / 2}" y="${pillY + pillH / 2 + 13}" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="36" font-weight="700" letter-spacing="5" fill="${this.frameTextColor}">${this._xmlEscape(txt)}</text>`;
|
||||
}
|
||||
const H = Q + pad * 2 + labelH;
|
||||
if (fs === 'thin') {
|
||||
border = `<rect x="11" y="11" width="${W - 22}" height="${H - 22}" rx="${radius - 6}" fill="none" stroke="${color}" stroke-width="18"/>`;
|
||||
}
|
||||
|
||||
// No XML prolog here — the server's sanitizeSvg prepends it (a literal
|
||||
// XML prolog in a Blade file would be read as a PHP open tag).
|
||||
return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}">` +
|
||||
`<rect x="0" y="0" width="${W}" height="${H}" rx="${radius}" fill="#ffffff"/>` +
|
||||
border + qr + labelMarkup +
|
||||
'</svg>';
|
||||
},
|
||||
_svgToPng(svgString) {
|
||||
return new Promise((resolve) => {
|
||||
try {
|
||||
const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
try {
|
||||
const w = img.naturalWidth || 1000;
|
||||
const h = img.naturalHeight || 1000;
|
||||
const f = Math.max(1, 1000 / Math.max(w, h)); // upscale small to ~1000 for crisp print
|
||||
const cw = Math.round(w * f), ch = Math.round(h * f);
|
||||
const c = document.createElement('canvas');
|
||||
c.width = cw; c.height = ch;
|
||||
const ctx = c.getContext('2d');
|
||||
ctx.fillStyle = (this.frameStyle && this.frameStyle !== 'none') ? '#ffffff' : (this.bg || '#ffffff');
|
||||
ctx.fillRect(0, 0, cw, ch);
|
||||
ctx.drawImage(img, 0, 0, cw, ch);
|
||||
URL.revokeObjectURL(url);
|
||||
resolve(c.toDataURL('image/png'));
|
||||
} catch (_) { URL.revokeObjectURL(url); resolve(null); }
|
||||
};
|
||||
img.onerror = () => { URL.revokeObjectURL(url); resolve(null); };
|
||||
img.src = url;
|
||||
} catch (_) { resolve(null); }
|
||||
});
|
||||
},
|
||||
|
||||
// Returns black or white depending on frameColor luminance, for readable CTA text
|
||||
get frameTextColor() {
|
||||
return this._hexToLuminance(this.frameColor) > 0.35 ? '#000000' : '#ffffff';
|
||||
},
|
||||
|
||||
// ── Scanability validation ────────────────────────────────────────
|
||||
get scanability() {
|
||||
let score = 100;
|
||||
const warnings = [];
|
||||
|
||||
// Contrast check — use gradient start colour when gradient is active
|
||||
const effectiveFg = this.gradientType !== 'none' ? this.gradientColor1 : this.fg;
|
||||
const ratio = this._contrastRatio(effectiveFg, this.bg);
|
||||
|
||||
if (ratio < 2.0) {
|
||||
score -= 50;
|
||||
warnings.push('Very low contrast — code will likely fail to scan.');
|
||||
} else if (ratio < 3.0) {
|
||||
score -= 30;
|
||||
warnings.push('Low contrast between foreground and background.');
|
||||
} else if (ratio < 4.5) {
|
||||
score -= 10;
|
||||
warnings.push('Contrast is acceptable but could be improved.');
|
||||
}
|
||||
|
||||
// Logo size checks
|
||||
const hasLogo = Boolean(this._processedLogoUrl) && !this.removeLogo;
|
||||
if (hasLogo) {
|
||||
if (this.logoSize > 0.40) {
|
||||
score -= 25;
|
||||
warnings.push('Logo is too large and may block scanning.');
|
||||
} else if (this.logoSize > 0.30) {
|
||||
score -= 10;
|
||||
warnings.push('Large logo — use High (H) error correction.');
|
||||
}
|
||||
|
||||
if (this.logoSize > 0.25 && this.ecc === 'L') {
|
||||
score -= 15;
|
||||
warnings.push('Logo requires at least Medium (M) error correction.');
|
||||
}
|
||||
}
|
||||
|
||||
// Extreme customisation warning
|
||||
const hasGradient = this.gradientType !== 'none';
|
||||
const complexEyes = this.finderOuter === 'circle' || this.finderInner === 'dot';
|
||||
if (hasLogo && hasGradient && complexEyes && this.ecc === 'L') {
|
||||
score -= 10;
|
||||
warnings.push('Many effects combined — consider higher error correction.');
|
||||
}
|
||||
|
||||
score = Math.max(0, score);
|
||||
|
||||
let label, level;
|
||||
if (score >= 80) { label = 'Excellent'; level = 'excellent'; }
|
||||
else if (score >= 60) { label = 'Good'; level = 'good'; }
|
||||
else { label = 'Warning'; level = 'warning'; }
|
||||
|
||||
return { score, label, level, warnings };
|
||||
},
|
||||
_hexToLuminance(hex) {
|
||||
hex = (hex || '#000000').replace('#', '');
|
||||
if (hex.length === 3) hex = hex.split('').map(c => c + c).join('');
|
||||
if (hex.length !== 6) return 0;
|
||||
const r = parseInt(hex.slice(0, 2), 16) / 255;
|
||||
const g = parseInt(hex.slice(2, 4), 16) / 255;
|
||||
const b = parseInt(hex.slice(4, 6), 16) / 255;
|
||||
const lin = c => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
|
||||
return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
|
||||
},
|
||||
_contrastRatio(hex1, hex2) {
|
||||
const l1 = this._hexToLuminance(hex1);
|
||||
const l2 = this._hexToLuminance(hex2);
|
||||
const light = Math.max(l1, l2);
|
||||
const dark = Math.min(l1, l2);
|
||||
return (light + 0.05) / (dark + 0.05);
|
||||
},
|
||||
}));
|
||||
};
|
||||
|
||||
if (window.Alpine) {
|
||||
registerQrCustomizer();
|
||||
} else {
|
||||
document.addEventListener('alpine:init', registerQrCustomizer);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
@endonce
|
||||
@@ -0,0 +1,188 @@
|
||||
@php
|
||||
$showDownloads = $showDownloads ?? true;
|
||||
@endphp
|
||||
|
||||
<div class="overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-sm">
|
||||
|
||||
{{-- QR display area with gradient background --}}
|
||||
<div class="relative flex items-center justify-center bg-gradient-to-br from-indigo-50/60 via-white to-violet-50/40 px-8 py-10">
|
||||
|
||||
{{-- Spinner overlay --}}
|
||||
<div x-show="previewLoading" x-cloak
|
||||
class="absolute inset-0 z-10 flex items-center justify-center bg-white/60 backdrop-blur-[2px]">
|
||||
<svg class="h-8 w-8 animate-spin text-indigo-500" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-20" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3"/>
|
||||
<path class="opacity-80" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{{-- Floating QR card --}}
|
||||
<div class="w-full max-w-xs transition-all duration-300"
|
||||
:class="previewLoading ? 'opacity-40 scale-[0.97]' : 'opacity-100 scale-100'">
|
||||
<div class="overflow-hidden rounded-2xl bg-white shadow-2xl"
|
||||
:style="frameStyle === 'thin'
|
||||
? 'box-shadow: 0 0 0 2px ' + frameColor + ', 0 25px 50px -12px rgb(0 0 0 / 0.25)'
|
||||
: 'box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25), 0 0 0 1px rgb(0 0 0 / 0.06)'">
|
||||
|
||||
{{-- Frame wrapper: adds padding + CTA for label/pill frames --}}
|
||||
<div :class="{
|
||||
'p-[8px]': frameStyle === 'thin',
|
||||
'p-[14px]': frameStyle === 'scan_me' || frameStyle === 'tap_to_scan',
|
||||
'p-4': frameStyle === 'none',
|
||||
}">
|
||||
{{-- QR code area — SVG renderer only, no static fallback --}}
|
||||
<div x-ref="qrPreview"
|
||||
class="aspect-square w-full [&>svg]:block [&>svg]:h-full [&>svg]:w-full"></div>
|
||||
|
||||
{{-- Scan me label --}}
|
||||
<div x-show="frameStyle === 'scan_me'" x-cloak
|
||||
:style="'border-top: 1px solid ' + frameColor + '40; color: ' + frameColor"
|
||||
class="pt-2.5 pb-0.5 text-center">
|
||||
<span x-text="(frameText && frameText.trim() ? frameText : 'SCAN ME').toUpperCase()"
|
||||
class="text-[11px] font-bold tracking-[0.18em]"></span>
|
||||
</div>
|
||||
|
||||
{{-- Tap to scan pill --}}
|
||||
<div x-show="frameStyle === 'tap_to_scan'" x-cloak
|
||||
class="mt-2.5 flex justify-center pb-0.5">
|
||||
<span x-text="(frameText && frameText.trim() ? frameText : 'TAP TO SCAN').toUpperCase()"
|
||||
:style="'background-color: ' + frameColor + '; color: ' + frameTextColor"
|
||||
class="rounded-full px-5 py-1.5 text-[10px] font-bold tracking-widest"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Scanability score --}}
|
||||
<div class="border-t border-slate-100 px-5 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-[10px] font-semibold uppercase tracking-[0.1em] text-slate-400">Scan quality</span>
|
||||
<span class="text-xs font-bold tabular-nums"
|
||||
:class="{
|
||||
'text-emerald-600': scanability.level === 'excellent',
|
||||
'text-amber-500': scanability.level === 'good',
|
||||
'text-red-500': scanability.level === 'warning',
|
||||
}"
|
||||
x-text="scanability.score + '% — ' + scanability.label"></span>
|
||||
</div>
|
||||
<div class="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-slate-100">
|
||||
<div class="h-full rounded-full transition-all duration-300"
|
||||
:style="'width: ' + scanability.score + '%'"
|
||||
:class="{
|
||||
'bg-emerald-500': scanability.level === 'excellent',
|
||||
'bg-amber-400': scanability.level === 'good',
|
||||
'bg-red-500': scanability.level === 'warning',
|
||||
}"></div>
|
||||
</div>
|
||||
<template x-if="scanability.warnings.length > 0">
|
||||
<ul class="mt-2.5 space-y-1.5">
|
||||
<template x-for="w in scanability.warnings" :key="w">
|
||||
<li class="flex items-start gap-1.5">
|
||||
<svg class="mt-px h-3.5 w-3.5 shrink-0 text-amber-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<span class="text-[11px] leading-4 text-amber-700" x-text="w"></span>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
{{-- Download + Share buttons --}}
|
||||
@if($showDownloads && isset($qrCode))
|
||||
@php
|
||||
$shareUrl = $qrCode->publicUrl();
|
||||
$shareEnc = urlencode($shareUrl);
|
||||
$shareText = urlencode($qrCode->label . ' — scan my QR code');
|
||||
@endphp
|
||||
<div class="border-t border-slate-100 bg-slate-50/50 px-6 py-5">
|
||||
<p class="mb-3 text-[10px] font-semibold uppercase tracking-[0.1em] text-slate-400">Download & Share</p>
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
|
||||
<a href="{{ route('events.download', [$qrCode, 'png']) }}"
|
||||
class="group flex flex-col items-center gap-1.5 rounded-xl border border-slate-200 bg-white py-3.5 text-center transition hover:border-indigo-300 hover:bg-indigo-50">
|
||||
<svg class="h-4 w-4 text-slate-400 transition group-hover:text-indigo-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12M12 16.5V3"/>
|
||||
</svg>
|
||||
<span class="text-xs font-semibold text-slate-600 transition group-hover:text-indigo-700">PNG</span>
|
||||
</a>
|
||||
|
||||
<a href="{{ route('events.download', [$qrCode, 'svg']) }}"
|
||||
class="group flex flex-col items-center gap-1.5 rounded-xl border border-slate-200 bg-white py-3.5 text-center transition hover:border-violet-300 hover:bg-violet-50">
|
||||
<svg class="h-4 w-4 text-slate-400 transition group-hover:text-violet-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"/>
|
||||
</svg>
|
||||
<span class="text-xs font-semibold text-slate-600 transition group-hover:text-violet-700">SVG</span>
|
||||
</a>
|
||||
|
||||
<a href="{{ route('events.download', [$qrCode, 'pdf']) }}"
|
||||
class="group flex flex-col items-center gap-1.5 rounded-xl border border-slate-200 bg-white py-3.5 text-center transition hover:border-rose-300 hover:bg-rose-50">
|
||||
<svg class="h-4 w-4 text-slate-400 transition group-hover:text-rose-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/>
|
||||
</svg>
|
||||
<span class="text-xs font-semibold text-slate-600 transition group-hover:text-rose-700">PDF</span>
|
||||
</a>
|
||||
|
||||
{{-- Share button with popover --}}
|
||||
<div class="relative" x-data="{ open: false, copied: false }">
|
||||
<button type="button"
|
||||
@click="open = !open"
|
||||
:class="open ? 'border-sky-300 bg-sky-50' : 'border-slate-200 bg-white hover:border-sky-300 hover:bg-sky-50'"
|
||||
class="group flex w-full flex-col items-center gap-1.5 rounded-xl border py-3.5 text-center transition">
|
||||
<svg class="h-4 w-4 transition" :class="open ? 'text-sky-500' : 'text-slate-400 group-hover:text-sky-500'" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z"/>
|
||||
</svg>
|
||||
<span class="text-xs font-semibold transition" :class="open ? 'text-sky-700' : 'text-slate-600 group-hover:text-sky-700'">Share</span>
|
||||
</button>
|
||||
|
||||
<div x-show="open" x-cloak
|
||||
@click.outside="open = false"
|
||||
x-transition:enter="transition ease-out duration-100"
|
||||
x-transition:enter-start="opacity-0 scale-95"
|
||||
x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-75"
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
class="absolute bottom-full right-0 z-50 mb-2 w-52 origin-bottom-right rounded-xl border border-slate-200 bg-white p-1.5 shadow-xl">
|
||||
|
||||
<a href="https://wa.me/?text={{ $shareText }}%20{{ $shareEnc }}" target="_blank" rel="noopener"
|
||||
@click="open = false"
|
||||
class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-slate-700 transition hover:bg-slate-50">
|
||||
<svg class="h-4 w-4 shrink-0 text-green-500" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>
|
||||
WhatsApp
|
||||
</a>
|
||||
|
||||
<a href="https://twitter.com/intent/tweet?url={{ $shareEnc }}&text={{ $shareText }}" target="_blank" rel="noopener"
|
||||
@click="open = false"
|
||||
class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-slate-700 transition hover:bg-slate-50">
|
||||
<svg class="h-4 w-4 shrink-0 text-slate-800" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.748l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
|
||||
X (Twitter)
|
||||
</a>
|
||||
|
||||
<a href="https://www.facebook.com/sharer/sharer.php?u={{ $shareEnc }}" target="_blank" rel="noopener"
|
||||
@click="open = false"
|
||||
class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-slate-700 transition hover:bg-slate-50">
|
||||
<svg class="h-4 w-4 shrink-0 text-blue-600" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
|
||||
Facebook
|
||||
</a>
|
||||
|
||||
<div class="my-1 border-t border-slate-100"></div>
|
||||
|
||||
<button type="button"
|
||||
@click="navigator.clipboard.writeText('{{ $shareUrl }}').then(() => { copied = true; setTimeout(() => { copied = false; open = false }, 1500) })"
|
||||
class="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition hover:bg-slate-50"
|
||||
:class="copied ? 'text-emerald-600' : 'text-slate-700'">
|
||||
<svg x-show="!copied" class="h-4 w-4 shrink-0 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>
|
||||
<svg x-show="copied" x-cloak class="h-4 w-4 shrink-0 text-emerald-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
|
||||
<span x-text="copied ? 'Copied!' : 'Copy link'">Copy link</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user