root/thecrimesynticate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: restyle game dashboard with dark crime theme

Browse Source 
Replace light card classes with dark syndicate theme equivalents:
- All cards now use bg-syndicate-800 with border-syndicate-700
- Primary action buttons use crime-* colors
- Stats display uses gray text for labels, color-coded values
- Quick actions use syndicate-700 borders with crime-600 hover states
- Recent activity items in syndicate-700 background

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Doar Mihai
2026-06-28 03:03:27 +03:00
co-authored by Claude Sonnet 4.6
parent 2a384b8481
commit 0d4409b52c
1 changed files with 78 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/game/dashboard.blade.php
+78 -111
View File
@@ -4,93 +4,85 @@
@section('game-content') @section('game-content')
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Welcome Card -->
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-6"> {{-- Welcome Card --}}
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4"> <div class="bg-syndicate-800 border border-syndicate-700 rounded-lg p-6">
<h2 class="font-display text-xl font-semibold text-gray-100 mb-4">
Welcome, {{ $character->name }}! Welcome, {{ $character->name }}!
</h2> </h2>
<p class="text-gray-600 dark:text-gray-400"> <p class="text-gray-400 text-sm">
You are in <strong>{{ $character->location->name ?? 'Unknown Location' }}</strong>. You are in <strong class="text-gray-200">{{ $character->location->name ?? 'Unknown Location' }}</strong>.
</p> </p>
<p class="text-gray-600 dark:text-gray-400 mt-2"> <p class="text-gray-400 text-sm mt-2">
Level: {{ $character->level }} ({{ number_format($character->experience) }} / {{ number_format($character->experience_for_next_level) }} EXP) Level {{ $character->level }} &mdash; {{ number_format($character->experience) }} / {{ number_format($character->experience_for_next_level) }} EXP
</p> </p>
<div class="w-full bg-gray-200 rounded-full h-2 mt-3"> <div class="w-full bg-syndicate-700 rounded-full h-1.5 mt-3">
<div <div class="bg-crime-600 h-1.5 rounded-full" style="width: {{ $character->experience_progress }}%"></div>
class="bg-blue-600 h-2 rounded-full"
style="width: {{ $character->experience_progress }}%"
></div>
</div> </div>
<p class="text-sm text-gray-500 mt-1">EXP Progress: {{ number_format($character->experience_progress, 1) }}%</p> <p class="text-xs text-gray-600 mt-1">{{ number_format($character->experience_progress, 1) }}% to next level</p>
</div> </div>
<!-- Quick Stats --> {{-- Quick Stats --}}
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-6"> <div class="bg-syndicate-800 border border-syndicate-700 rounded-lg p-6">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Quick Stats</h3> <h3 class="font-display text-lg font-semibold text-gray-100 mb-4">Quick Stats</h3>
<div class="space-y-2"> <div class="space-y-2 text-sm">
<div class="flex justify-between"> <div class="flex justify-between">
<span class="text-gray-600 dark:text-gray-400">Strength</span> <span class="text-gray-400">Strength</span>
<span class="font-medium">{{ $character->strength }}</span> <span class="text-gray-200 font-medium">{{ $character->strength }}</span>
</div> </div>
<div class="flex justify-between"> <div class="flex justify-between">
<span class="text-gray-600 dark:text-gray-400">Defense</span> <span class="text-gray-400">Defense</span>
<span class="font-medium">{{ $character->defense }}</span> <span class="text-gray-200 font-medium">{{ $character->defense }}</span>
</div> </div>
<div class="flex justify-between"> <div class="flex justify-between">
<span class="text-gray-600 dark:text-gray-400">Speed</span> <span class="text-gray-400">Speed</span>
<span class="font-medium">{{ $character->speed }}</span> <span class="text-gray-200 font-medium">{{ $character->speed }}</span>
</div> </div>
<div class="flex justify-between"> <div class="flex justify-between">
<span class="text-gray-600 dark:text-gray-400">Dexterity</span> <span class="text-gray-400">Dexterity</span>
<span class="font-medium">{{ $character->dexterity }}</span> <span class="text-gray-200 font-medium">{{ $character->dexterity }}</span>
</div> </div>
<div class="flex justify-between pt-2 border-t border-gray-200 dark:border-gray-700"> <div class="flex justify-between pt-2 border-t border-syndicate-700">
<span class="text-gray-600 dark:text-gray-400">Attack Power</span> <span class="text-gray-400">Attack Power</span>
<span class="font-medium text-green-600 dark:text-green-400">{{ $character->attack_power }}</span> <span class="text-crime-400 font-medium">{{ $character->attack_power }}</span>
</div> </div>
<div class="flex justify-between"> <div class="flex justify-between">
<span class="text-gray-600 dark:text-gray-400">Defense</span> <span class="text-gray-400">Total Defense</span>
<span class="font-medium text-blue-600 dark:text-blue-400">{{ $character->defense }}</span> <span class="text-blue-400 font-medium">{{ $character->defense }}</span>
</div> </div>
</div> </div>
</div> </div>
<!-- Money & Bank --> {{-- Finances --}}
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-6"> <div class="bg-syndicate-800 border border-syndicate-700 rounded-lg p-6">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Finances</h3> <h3 class="font-display text-lg font-semibold text-gray-100 mb-4">Finances</h3>
<div class="space-y-3"> <div class="space-y-3 text-sm">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center"> <div class="flex items-center space-x-2">
<span class="text-green-500 mr-2">💰</span> <span class="text-gold-400">💰</span>
<span class="text-gray-600 dark:text-gray-400">Cash</span> <span class="text-gray-400">Cash</span>
</div> </div>
<span class="font-medium">${{ number_format($character->money) }}</span> <span class="text-gold-400 font-medium">${{ number_format($character->money) }}</span>
</div> </div>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center"> <div class="flex items-center space-x-2">
<span class="text-blue-500 mr-2">🏦</span> <span class="text-blue-400">🏦</span>
<span class="text-gray-600 dark:text-gray-400">Bank</span> <span class="text-gray-400">Bank</span>
</div> </div>
<span class="font-medium">${{ number_format($character->bank) }}</span> <span class="text-gray-200 font-medium">${{ number_format($character->bank) }}</span>
</div> </div>
<div class="pt-2 border-t border-gray-200 dark:border-gray-700 space-y-2"> <div class="pt-2 border-t border-syndicate-700 space-y-2">
<a <a href="#" onclick="event.preventDefault(); document.getElementById('deposit-form').submit();"
href="#" class="block w-full text-center bg-crime-600 hover:bg-crime-500 text-white py-2 px-4 rounded text-sm transition">
onclick="event.preventDefault(); document.getElementById('deposit-form').submit();"
class="block w-full text-center bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded text-sm transition"
>
Deposit to Bank Deposit to Bank
</a> </a>
<form id="deposit-form" action="{{ route('game.character.deposit') }}" method="POST" class="hidden"> <form id="deposit-form" action="{{ route('game.character.deposit') }}" method="POST" class="hidden">
@csrf @csrf
<input type="number" name="amount" value="1000" min="1" max="{{ $character->money }}"> <input type="number" name="amount" value="1000" min="1" max="{{ $character->money }}">
</form> </form>
<a <a href="#" onclick="event.preventDefault(); document.getElementById('withdraw-form').submit();"
href="#" class="block w-full text-center bg-syndicate-700 hover:bg-syndicate-600 text-gray-300 py-2 px-4 rounded text-sm transition">
onclick="event.preventDefault(); document.getElementById('withdraw-form').submit();"
class="block w-full text-center bg-gray-600 hover:bg-gray-700 text-white py-2 px-4 rounded text-sm transition"
>
Withdraw from Bank Withdraw from Bank
</a> </a>
<form id="withdraw-form" action="{{ route('game.character.withdraw') }}" method="POST" class="hidden"> <form id="withdraw-form" action="{{ route('game.character.withdraw') }}" method="POST" class="hidden">
@@ -101,95 +93,70 @@
</div> </div>
</div> </div>
<!-- Quick Actions --> {{-- Quick Actions --}}
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-6 lg:col-span-2"> <div class="bg-syndicate-800 border border-syndicate-700 rounded-lg p-6 lg:col-span-2">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Quick Actions</h3> <h3 class="font-display text-lg font-semibold text-gray-100 mb-4">Quick Actions</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3"> <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<a <a href="{{ route('game.crimes.index') }}"
href="{{ route('game.crimes.index') }}" class="flex flex-col items-center justify-center bg-syndicate-700 border border-syndicate-600 hover:border-crime-600 text-gray-300 hover:text-gray-100 py-4 px-2 rounded-lg transition">
class="flex flex-col items-center justify-center bg-blue-500 hover:bg-blue-600 text-white py-4 px-2 rounded-lg transition group"
>
<span class="text-2xl mb-1">🎯</span> <span class="text-2xl mb-1">🎯</span>
<span class="text-sm font-medium">Crimes</span> <span class="text-sm font-medium">Crimes</span>
<span class="text-xs opacity-75">Commit crimes</span> <span class="text-xs text-gray-500">Commit crimes</span>
</a> </a>
<a href="{{ route('game.inventory.index') }}"
<a class="flex flex-col items-center justify-center bg-syndicate-700 border border-syndicate-600 hover:border-crime-600 text-gray-300 hover:text-gray-100 py-4 px-2 rounded-lg transition">
href="{{ route('game.inventory.index') }}"
class="flex flex-col items-center justify-center bg-green-500 hover:bg-green-600 text-white py-4 px-2 rounded-lg transition group"
>
<span class="text-2xl mb-1">🎒</span> <span class="text-2xl mb-1">🎒</span>
<span class="text-sm font-medium">Inventory</span> <span class="text-sm font-medium">Inventory</span>
<span class="text-xs opacity-75">Manage items</span> <span class="text-xs text-gray-500">Manage items</span>
</a> </a>
<a href="{{ route('game.character.show') }}"
<a class="flex flex-col items-center justify-center bg-syndicate-700 border border-syndicate-600 hover:border-crime-600 text-gray-300 hover:text-gray-100 py-4 px-2 rounded-lg transition">
href="{{ route('game.character.show') }}"
class="flex flex-col items-center justify-center bg-purple-500 hover:bg-purple-600 text-white py-4 px-2 rounded-lg transition group"
>
<span class="text-2xl mb-1">👤</span> <span class="text-2xl mb-1">👤</span>
<span class="text-sm font-medium">Profile</span> <span class="text-sm font-medium">Profile</span>
<span class="text-xs opacity-75">View profile</span> <span class="text-xs text-gray-500">View profile</span>
</a> </a>
<a href="{{ route('profile.edit') }}"
<a class="flex flex-col items-center justify-center bg-syndicate-700 border border-syndicate-600 hover:border-crime-600 text-gray-300 hover:text-gray-100 py-4 px-2 rounded-lg transition">
href="{{ route('profile.edit') }}"
class="flex flex-col items-center justify-center bg-gray-500 hover:bg-gray-600 text-white py-4 px-2 rounded-lg transition group"
>
<span class="text-2xl mb-1">⚙️</span> <span class="text-2xl mb-1">⚙️</span>
<span class="text-sm font-medium">Settings</span> <span class="text-sm font-medium">Settings</span>
<span class="text-xs opacity-75">Account settings</span> <span class="text-xs text-gray-500">Account settings</span>
</a> </a>
</div> </div>
</div> </div>
<!-- Recent Activity --> {{-- Recent Activity --}}
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-6 lg:col-span-3"> <div class="bg-syndicate-800 border border-syndicate-700 rounded-lg p-6 lg:col-span-3">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Recent Activity</h3> <h3 class="font-display text-lg font-semibold text-gray-100 mb-4">Recent Activity</h3>
@if($recentActivity->isEmpty()) @if($recentActivity->isEmpty())
<p class="text-gray-500 dark:text-gray-400 text-center py-4">No recent activity.</p> <p class="text-gray-500 text-center py-4 text-sm">No recent activity.</p>
@else @else
<div class="space-y-3"> <div class="space-y-2">
@foreach($recentActivity as $activity) @foreach($recentActivity as $activity)
<div class="flex items-start space-x-3 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg"> <div class="flex items-start space-x-3 p-3 bg-syndicate-700 rounded-lg">
<span class="text-gray-400 dark:text-gray-500"> <span class="text-gray-500 text-base">
@switch($activity->action) @switch($activity->action)
@case('crime_attempt') @case('crime_attempt')
@if(str_contains($activity->description, 'success')) @if(str_contains($activity->description, 'success')) ✅ @else ❌ @endif
✅
@else
❌
@endif
@break @break
@case('money_earned') @case('money_earned') 💰 @break
💰 @case('money_spent') 💸 @break
@break @case('character_created') 🎉 @break
@case('money_spent') @default 📝
💸
@break
@case('character_created')
🎉
@break
@default
📝
@endswitch @endswitch
</span> </span>
<div class="flex-1"> <div class="flex-1">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200"> <p class="text-sm font-medium text-gray-200">
{{ ucfirst(str_replace('_', ' ', $activity->action)) }} {{ ucfirst(str_replace('_', ' ', $activity->action)) }}
</p> </p>
<p class="text-xs text-gray-500 dark:text-gray-400"> <p class="text-xs text-gray-500">{{ $activity->description }}</p>
{{ $activity->description }} <p class="text-xs text-gray-600 mt-1">{{ $activity->created_at->diffForHumans() }}</p>
</p>
<p class="text-xs text-gray-400 dark:text-gray-500 mt-1">
{{ $activity->created_at->diffForHumans() }}
</p>
</div> </div>
</div> </div>
@endforeach @endforeach
</div> </div>
@endif @endif
</div> </div>
</div> </div>
@endsection @endsection