fun/Kol-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change style of button

Browse Source
This commit is contained in:
I-Fun
2026-04-05 09:56:29 +07:00
parent 5656dc1f3a
commit 8b5992b7ce
14 changed files with 1466 additions and 1394 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/views/layouts/app.blade.php
View File

@@ -72,7 +72,7 @@
<a href="{{ route('contracts.index') }}" @click="sidebarOpen = false"
class="nav-item {{ request()->routeIs('contracts.*') ? 'active' : '' }}">
<span class="text-lg shrink-0">📋</span> Brand Contracts
<span class="text-lg shrink-0">📋</span> Contracts
</a>
<!--
<a href="{{ route('social-hub.index') }}"

57
resources/views/layouts/fab.blade.php Normal file
View File

@@ -0,0 +1,57 @@
<div x-data="{ open: false }" class="fixed bottom-6 right-6 z-50 flex flex-col items-end">
{{-- Menu items (hidden by default) --}}
<div x-show="open" x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 translate-y-4 scale-95"
x-transition:enter-end="opacity-100 translate-y-0 scale-100"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 translate-y-0 scale-100"
x-transition:leave-end="opacity-0 translate-y-4 scale-95"
@click.away="open = false"
class="flex flex-col items-end gap-3 mb-4" style="display: none;">
<a href="{{ route('files.index') }}" class="flex items-center gap-3 group">
<span class="bg-gray-800 text-white font-medium text-xs px-3 py-2 rounded-lg shadow-xl min-w-max hidden lg:block opacity-0 translate-x-4 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 ease-out">Upload File</span>
<div class="w-12 h-12 rounded-full bg-teal-500 text-white flex items-center justify-center shadow hover:scale-110 transition-transform duration-200 text-lg">📁</div>
</a>
<a href="{{ route('notes.index') }}" class="flex items-center gap-3 group">
<span class="bg-gray-800 text-white font-medium text-xs px-3 py-2 rounded-lg shadow-xl min-w-max hidden lg:block opacity-0 translate-x-4 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 ease-out">Add Notes</span>
<div class="w-12 h-12 rounded-full bg-yellow-400 text-white flex items-center justify-center shadow hover:scale-110 transition-transform duration-200 text-lg">📝</div>
</a>
<a href="{{ route('content.create') }}" class="flex items-center gap-3 group">
<span class="bg-gray-800 text-white font-medium text-xs px-3 py-2 rounded-lg shadow-xl min-w-max hidden lg:block opacity-0 translate-x-4 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 ease-out">New Board</span>
<div class="w-12 h-12 rounded-full bg-purple-500 text-white flex items-center justify-center shadow hover:scale-110 transition-transform duration-200 text-lg">🎬</div>
</a>
<a href="{{ route('contracts.index') }}" class="flex items-center gap-3 group">
<span class="bg-gray-800 text-white font-medium text-xs px-3 py-2 rounded-lg shadow-xl min-w-max hidden lg:block opacity-0 translate-x-4 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 ease-out">New Contract</span>
<div class="w-12 h-12 rounded-full bg-rose-500 text-white flex items-center justify-center shadow hover:scale-110 transition-transform duration-200 text-lg">📄</div>
</a>
<a href="{{ route('invoices.create') }}" class="flex items-center gap-3 group">
<span class="bg-gray-800 text-white font-medium text-xs px-3 py-2 rounded-lg shadow-xl min-w-max hidden lg:block opacity-0 translate-x-4 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 ease-out">New Invoice</span>
<div class="w-12 h-12 rounded-full bg-amber-500 text-white flex items-center justify-center shadow hover:scale-110 transition-transform duration-200 text-lg">🧾</div>
</a>
<a href="{{ route('clients.create') }}" class="flex items-center gap-3 group">
<span class="bg-gray-800 text-white font-medium text-xs px-3 py-2 rounded-lg shadow-xl min-w-max hidden lg:block opacity-0 translate-x-4 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 ease-out">Add Client</span>
<div class="w-12 h-12 rounded-full bg-emerald-500 text-white flex items-center justify-center shadow hover:scale-110 transition-transform duration-200 text-lg">👥</div>
</a>
<a href="{{ route('schedule.create') }}" class="flex items-center gap-3 group">
<span class="bg-gray-800 text-white font-medium text-xs px-3 py-2 rounded-lg shadow-xl min-w-max hidden lg:block opacity-0 translate-x-4 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 ease-out">Add Event</span>
<div class="w-12 h-12 rounded-full bg-blue-500 text-white flex items-center justify-center shadow hover:scale-110 transition-transform duration-200 text-lg">📅</div>
</a>
</div>
{{-- Main FAB button --}}
<button @click="open = !open"
class="w-16 h-16 rounded-full bg-pink-500 hover:bg-pink-600 text-white flex items-center justify-center shadow-lg shadow-pink-500/40 hover:shadow-2xl hover:shadow-pink-500/50 transition-all duration-300 hover:-translate-y-1 hover:scale-105 active:scale-95 z-50 transform"
:class="{'rotate-45 bg-pink-600': open}">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
</svg>
</button>
</div>