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

feat: restyle crimes page with dark crime theme

Browse Source 
Replace crimes index page with dark syndicate theme styling using:
- syndicate color tokens for backgrounds and borders
- crime color tokens for action buttons
- gold color tokens for reward displays
- Improved visual hierarchy and spacing

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Doar Mihai
2026-06-28 03:04:41 +03:00
co-authored by Claude Sonnet 4.6
parent 0d4409b52c
commit 3326c73d10
1 changed files with 53 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/game/crimes/index.blade.php
+48 -60
View File
@@ -3,25 +3,20 @@
@section('title', 'Crimes') @section('title', 'Crimes')
@section('game-content') @section('game-content')
<div class="max-w-4xl mx-auto"> <div class="max-w-4xl mx-auto space-y-6">
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 border-b border-gray-200 dark:border-gray-700"> {{-- Header card --}}
<div class="flex justify-between items-center"> <div class="bg-syndicate-800 border border-syndicate-700 rounded-lg">
<h1 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Available Crimes</h1> <div class="px-6 py-4 border-b border-syndicate-700 flex justify-between items-center">
<div class="text-sm text-gray-500 dark:text-gray-400"> <h1 class="font-display text-xl font-semibold text-gray-100">Available Crimes</h1>
Energy: {{ $character->energy }}/{{ $character->max_energy }} <div class="text-sm text-gray-400">
</div> Energy: <span class="text-yellow-400 font-medium">{{ $character->energy }}/{{ $character->max_energy }}</span>
</div> </div>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
Commit crimes to earn money and experience. Each crime costs energy and has a chance of success or failure.
</p>
</div> </div>
<div class="p-6"> <div class="p-6">
@if($availableCrimes->isEmpty()) @if($availableCrimes->isEmpty())
<p class="text-center text-gray-500 dark:text-gray-400 py-8"> <p class="text-center text-gray-500 py-8 text-sm">No crimes available. Try leveling up or restoring your energy.</p>
No crimes available. Try leveling up or restoring your energy.
</p>
@else @else
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
@foreach($availableCrimes as $crime) @foreach($availableCrimes as $crime)
@@ -31,102 +26,94 @@
$successRate = $crime->calculateSuccessRate($character); $successRate = $crime->calculateSuccessRate($character);
@endphp @endphp
<div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 border border-gray-200 dark:border-gray-600"> <div class="bg-syndicate-700 border border-syndicate-600 hover:border-crime-600 rounded-lg p-4 transition">
<div class="flex justify-between items-start mb-2"> <div class="flex justify-between items-start mb-2">
<div> <div>
<h3 class="font-medium text-gray-800 dark:text-gray-200">{{ $crime->name }}</h3> <h3 class="font-medium text-gray-100">{{ $crime->name }}</h3>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1"> <p class="text-xs text-gray-500 mt-1">{{ $crime->difficulty_label }} Difficulty</p>
{{ $crime->difficulty_label }} Difficulty
</p>
</div> </div>
<span class="text-xs px-2 py-1 rounded-full {{ $crime->difficulty_color }} text-white"> <span class="text-xs px-2 py-1 rounded-full {{ $crime->difficulty_color }} text-white flex-shrink-0">
{{ number_format($successRate * 100, 1) }}% Success {{ number_format($successRate * 100, 1) }}% Success
</span> </span>
</div> </div>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3"> <p class="text-sm text-gray-400 mb-3">{{ Str::limit($crime->description, 100) }}</p>
{{ Str::limit($crime->description, 100) }}
</p>
<div class="grid grid-cols-2 gap-2 text-xs"> <div class="grid grid-cols-2 gap-2 text-xs text-gray-400 mb-3">
<div class="flex items-center"> <div class="flex items-center space-x-1">
<span class="text-yellow-500 mr-1">⚡</span> <span class="text-yellow-400">⚡</span>
<span>{{ $crime->energy_cost }} Energy</span> <span>{{ $crime->energy_cost }} Energy</span>
</div> </div>
<div class="flex items-center"> <div class="flex items-center space-x-1">
<span class="text-green-500 mr-1">💰</span> <span class="text-gold-400">💰</span>
<span>${{ $crime->reward_min }}-{{ $crime->reward_max }}</span> <span>${{ $crime->reward_min }}-{{ $crime->reward_max }}</span>
</div> </div>
<div class="flex items-center"> <div class="flex items-center space-x-1">
<span class="text-blue-500 mr-1">📈</span> <span class="text-blue-400">📈</span>
<span>{{ $crime->experience }} EXP</span> <span>{{ $crime->experience }} EXP</span>
</div> </div>
<div class="flex items-center"> <div class="flex items-center space-x-1">
<span class="text-gray-500 mr-1">⏱️</span> <span class="text-gray-500">⏱</span>
<span>{{ $crime->cooldown }}s Cooldown</span> <span>{{ $crime->cooldown }}s Cooldown</span>
</div> </div>
</div> </div>
@if($onCooldown) @if($onCooldown)
<button <button disabled
disabled class="w-full py-2 px-4 text-sm text-center bg-syndicate-600 text-gray-600 rounded-lg cursor-not-allowed">
class="w-full mt-3 py-2 px-4 text-sm text-center bg-gray-300 dark:bg-gray-600 text-gray-500 dark:text-gray-400 rounded-lg cursor-not-allowed"
>
On Cooldown ({{ ceil($cooldownRemaining / 60) }}m) On Cooldown ({{ ceil($cooldownRemaining / 60) }}m)
</button> </button>
@else @else
<form action="{{ route('game.crimes.attempt', $crime) }}" method="POST" class="mt-3"> <form action="{{ route('game.crimes.attempt', $crime) }}" method="POST">
@csrf @csrf
<button <button type="submit"
type="submit" class="w-full py-2 px-4 text-sm text-center bg-crime-600 hover:bg-crime-500 text-white rounded-lg transition">
class="w-full py-2 px-4 text-sm text-center bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition"
>
Attempt Crime Attempt Crime
</button> </button>
</form> </form>
@endif @endif
@if($crime->requires_level) @if($crime->requires_level)
<p class="text-xs text-gray-500 dark:text-gray-400 mt-2"> <p class="text-xs text-gray-600 mt-2">Requires Level {{ $crime->requires_level }}+</p>
Requires Level {{ $crime->requires_level }}+
</p>
@endif @endif
</div> </div>
@endforeach @endforeach
</div> </div>
@endif @endif
</div> </div>
</div>
<div class="p-6 border-t border-gray-200 dark:border-gray-700"> {{-- Recent Attempts --}}
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">Recent Attempts</h3> <div class="bg-syndicate-800 border border-syndicate-700 rounded-lg">
<div class="px-6 py-4 border-b border-syndicate-700">
<h3 class="font-display text-lg font-semibold text-gray-100">Recent Attempts</h3>
</div>
<div class="p-6">
@if($recentAttempts->isEmpty()) @if($recentAttempts->isEmpty())
<p class="text-center text-gray-500 dark:text-gray-400 py-4"> <p class="text-center text-gray-500 py-4 text-sm">No recent crime attempts.</p>
No recent crime attempts.
</p>
@else @else
<div class="space-y-2"> <div class="space-y-2">
@foreach($recentAttempts as $attempt) @foreach($recentAttempts as $attempt)
<div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg"> <div class="flex items-center justify-between p-3 bg-syndicate-700 rounded-lg">
<div class="flex items-center"> <div class="flex items-center space-x-3">
<span class="mr-3"> <span>
@if($attempt->success) @if($attempt->success)
<span class="text-green-500">✅</span> <span class="text-green-400">✅</span>
@else @else
<span class="text-red-500">❌</span> <span class="text-red-400">❌</span>
@endif @endif
</span> </span>
<div> <div>
<p class="font-medium text-gray-800 dark:text-gray-200">{{ $attempt->crime->name }}</p> <p class="font-medium text-gray-200 text-sm">{{ $attempt->crime->name }}</p>
<p class="text-xs text-gray-500 dark:text-gray-400">{{ $attempt->attempted_at->diffForHumans() }}</p> <p class="text-xs text-gray-500">{{ $attempt->attempted_at->diffForHumans() }}</p>
</div> </div>
</div> </div>
<div class="text-right"> <div class="text-right">
@if($attempt->success) @if($attempt->success)
<p class="text-sm text-green-600 dark:text-green-400">+${{ number_format($attempt->reward) }}</p> <p class="text-sm text-gold-400">+${{ number_format($attempt->reward) }}</p>
<p class="text-xs text-gray-500 dark:text-gray-400">+{{ $attempt->experience_gained }} EXP</p> <p class="text-xs text-gray-500">+{{ $attempt->experience_gained }} EXP</p>
@else @else
<p class="text-sm text-red-600 dark:text-red-400">Failed</p> <p class="text-sm text-red-400">Failed</p>
@endif @endif
</div> </div>
</div> </div>
@@ -135,5 +122,6 @@
@endif @endif
</div> </div>
</div> </div>
</div> </div>
@endsection @endsection