51 lines
2.2 KiB
PHP
51 lines
2.2 KiB
PHP
<div class="max-w-lg mx-auto py-12 px-4 sm:px-6 lg:px-8">
|
||
<div class="bg-white shadow rounded-lg p-6 space-y-4">
|
||
<h2 class="text-2xl font-semibold text-center">真情告白</h2>
|
||
|
||
<div class="space-y-2">
|
||
<input
|
||
type="text"
|
||
maxlength="64"
|
||
placeholder="請輸入您的留言"
|
||
wire:model.lazy="message"
|
||
class="w-full border rounded-lg p-3 focus:ring-2 focus:ring-pink-400 focus:outline-none"
|
||
/>
|
||
<div class="text-gray-500 text-sm text-right">
|
||
字串長度：{{ strlen($message) }} 個單位
|
||
</div>
|
||
</div>
|
||
<x-button
|
||
wire:click="submitMessage"
|
||
pink
|
||
label="確認送出"
|
||
class="w-full mt-4 text-xl font-semibold py-2 px-4 rounded-lg transition"
|
||
/>
|
||
|
||
{{-- 打開貼圖 Modal --}}
|
||
<x-card
|
||
class="mt-2 w-full cursor-pointer hover:bg-gray-50 transition"
|
||
wire:click="$dispatchTo('modals.sticker-modal','openModal')"
|
||
>
|
||
<div class="flex flex-col items-center text-gray-400">
|
||
<span class="text-gray-600 mb-2">已選貼圖：</span>
|
||
@if($selectedSticker)
|
||
<img src="{{ asset('superstar-pic/'.$selectedSticker) }}" class="w-16 h-16 object-contain bg-white border-2 rounded cursor-pointer ">
|
||
@else
|
||
<span class="w-16 h-16 flex items-center justify-center text-gray-400 text-sm text-center">選擇貼圖</span>
|
||
@endif
|
||
<span class="text-sm">點擊此處選擇</span>
|
||
</div>
|
||
</x-card>
|
||
</div>
|
||
|
||
<div class="mt-6 bg-yellow-50 border-l-4 border-yellow-400 p-4 text-sm text-yellow-700 rounded-lg space-y-1">
|
||
<ul class="list-disc pl-5 space-y-1">
|
||
<li>注意：不要使用特殊符號，可能無法正常顯示！</li>
|
||
<li>播歌畫面可顯示的字串長度為64（會員名稱 + 訊息內容）！</li>
|
||
<li>如果非要給這愛加個期限，我希望是一萬年…真情告白，等您留言！（每則留言輪播三次）</li>
|
||
</ul>
|
||
</div>
|
||
<livewire:modals.sticker-modal />
|
||
</div>
|
||
|