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

feat: restyle inventory, hospital, and jail pages with dark crime theme

Browse Source 
Implement dark crime-themed redesign for three game pages using syndicate color
tokens and dark typography. Updated inventory grid, hospital recovery status
display, and jail sentence view with consistent styling.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Doar Mihai
2026-06-28 03:06:03 +03:00
co-authored by Claude Sonnet 4.6
parent 3326c73d10
commit cad99125ce
3 changed files with 82 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/game/hospital.blade.php
+22 -35
View File
@@ -4,38 +4,31 @@
@section('game-content') @section('game-content')
<div class="max-w-2xl mx-auto"> <div class="max-w-2xl mx-auto">
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg"> <div class="bg-syndicate-800 border border-syndicate-700 rounded-lg">
<div class="p-8 text-center"> <div class="p-8 text-center">
<div class="mb-6"> <div class="mb-6">
<span class="text-6xl text-red-500">🏥</span> <span class="text-6xl">🏥</span>
</div> </div>
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4"> <h1 class="font-display text-2xl font-bold text-gray-100 mb-4">You're in the Hospital</h1>
You're in the Hospital <p class="text-gray-400 mb-6 text-sm">Your character has been injured and is currently recovering.</p>
</h1>
<p class="text-gray-600 dark:text-gray-400 mb-6"> <div class="bg-red-900/20 border border-red-800 rounded-lg p-6 mb-6 text-left">
Your character has been injured and is currently recovering in the hospital. <h3 class="font-display text-base font-semibold text-red-300 mb-3">Your Status</h3>
</p> <div class="space-y-2 text-sm">
<div class="flex justify-between">
<div class="bg-red-50 dark:bg-red-900/30 rounded-lg p-6 mb-6"> <span class="text-gray-400">Health</span>
<h3 class="text-lg font-medium text-red-800 dark:text-red-200 mb-3"> <span class="text-gray-200 font-medium">{{ $character->health }}/{{ $character->max_health }}</span>
Your Status
</h3>
<div class="space-y-2">
<div class="flex justify-between text-sm">
<span class="text-gray-600 dark:text-gray-400">Health</span>
<span class="font-medium">{{ $character->health }}/{{ $character->max_health }}</span>
</div> </div>
<div class="flex justify-between text-sm"> <div class="flex justify-between">
<span class="text-gray-600 dark:text-gray-400">Status</span> <span class="text-gray-400">Status</span>
<span class="font-medium text-red-600 dark:text-red-400"> <span class="text-red-400 font-medium">
@if($character->health <= 0) Dead @else In Hospital @endif @if($character->health <= 0) Dead @else In Hospital @endif
</span> </span>
</div> </div>
<div class="flex justify-between text-sm"> <div class="flex justify-between">
<span class="text-gray-600 dark:text-gray-400">Release Time</span> <span class="text-gray-400">Release Time</span>
<span class="font-medium">{{ $releaseTime }}</span> <span class="text-gray-200 font-medium">{{ $releaseTime }}</span>
</div> </div>
</div> </div>
</div> </div>
@@ -43,24 +36,18 @@
<div class="space-y-4"> <div class="space-y-4">
<form action="{{ route('game.character.revive') }}" method="POST"> <form action="{{ route('game.character.revive') }}" method="POST">
@csrf @csrf
<button <button type="submit"
type="submit" class="w-full flex items-center justify-center px-6 py-4 bg-green-700 hover:bg-green-600 text-white font-medium rounded-lg transition">
class="w-full flex items-center justify-center px-6 py-4 bg-green-500 hover:bg-green-600 text-white font-medium rounded-lg transition"
>
<span class="mr-2">💵</span> <span class="mr-2">💵</span>
Revive Now for ${{ number_format($reviveCost) }} Revive Now for ${{ number_format($reviveCost) }}
</button> </button>
</form> </form>
<p class="text-sm text-gray-500 dark:text-gray-400"> <p class="text-sm text-gray-600">Or wait to be automatically released when your health regenerates.</p>
Or wait to be automatically released when your health regenerates.
</p>
<a <a href="{{ route('game.dashboard') }}"
href="{{ route('game.dashboard') }}" class="inline-flex items-center text-gray-500 hover:text-gray-300 transition text-sm">
class="inline-flex items-center text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition" <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
>
<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg> </svg>
Back to Dashboard Back to Dashboard
resources/views/game/inventory/index.blade.php
+29 -45
View File
@@ -4,69 +4,61 @@
@section('game-content') @section('game-content')
<div class="max-w-4xl mx-auto"> <div class="max-w-4xl mx-auto">
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg"> <div class="bg-syndicate-800 border border-syndicate-700 rounded-lg">
<div class="p-6 border-b border-gray-200 dark:border-gray-700"> <div class="px-6 py-4 border-b border-syndicate-700">
<h1 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Inventory</h1> <h1 class="font-display text-xl font-semibold text-gray-100">Inventory</h1>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400"> <p class="mt-1 text-sm text-gray-400">Equip weapons and armor, or use consumables.</p>
Manage your items. Equip weapons and armor, or use consumables.
</p>
</div> </div>
<div class="p-6"> <div class="p-6">
@if($inventory->isEmpty()) @if($inventory->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">Your inventory is empty.</p>
Your inventory is empty.
</p>
@else @else
<div class="space-y-4"> <div class="space-y-6">
@foreach($inventory->groupBy('item.type') as $type => $items) @foreach($inventory->groupBy('item.type') as $type => $items)
<div> <div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 capitalizes mb-3"> <h3 class="font-display text-base font-semibold text-gray-300 capitalize mb-3">
{{ ucfirst($type) }}s ({{ $items->sum('quantity') }}) {{ ucfirst($type) }}s ({{ $items->sum('quantity') }})
</h3> </h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
@foreach($items as $item) @foreach($items as $item)
<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 rounded-lg p-4">
<div class="flex justify-between items-start mb-2"> <div class="flex justify-between items-start mb-2">
<div> <div>
<h4 class="font-medium text-gray-800 dark:text-gray-200">{{ $item->item->name }}</h4> <h4 class="font-medium text-gray-100">{{ $item->item->name }}</h4>
<p class="text-xs text-gray-500 dark:text-gray-400"> <p class="text-xs text-gray-500">x{{ $item->quantity }}</p>
x{{ $item->quantity }}
</p>
</div> </div>
@if($item->equipped) @if($item->equipped)
<span class="text-xs px-2 py-1 bg-green-500 text-white rounded-full">Equipped</span> <span class="text-xs px-2 py-1 bg-green-800/60 border border-green-700 text-green-400 rounded-full">Equipped</span>
@endif @endif
</div> </div>
@if($item->item->description) @if($item->item->description)
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3"> <p class="text-sm text-gray-400 mb-3">{{ Str::limit($item->item->description, 80) }}</p>
{{ Str::limit($item->item->description, 80) }}
</p>
@endif @endif
<div class="grid grid-cols-2 gap-2 text-xs mb-3"> <div class="grid grid-cols-2 gap-2 text-xs text-gray-400 mb-3">
@if($item->item->attack_bonus > 0) @if($item->item->attack_bonus > 0)
<div class="flex items-center"> <div class="flex items-center space-x-1">
<span class="text-red-500 mr-1">⚔️</span> <span class="text-crime-400">⚔️</span>
<span>+{{ $item->item->attack_bonus }} Attack</span> <span>+{{ $item->item->attack_bonus }} Attack</span>
</div> </div>
@endif @endif
@if($item->item->defense_bonus > 0) @if($item->item->defense_bonus > 0)
<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>+{{ $item->item->defense_bonus }} Defense</span> <span>+{{ $item->item->defense_bonus }} Defense</span>
</div> </div>
@endif @endif
@if($item->item->health_bonus > 0) @if($item->item->health_bonus > 0)
<div class="flex items-center"> <div class="flex items-center space-x-1">
<span class="text-green-500 mr-1">❤️</span> <span class="text-green-400">❤️</span>
<span>+{{ $item->item->health_bonus }} Health</span> <span>+{{ $item->item->health_bonus }} Health</span>
</div> </div>
@endif @endif
@if($item->item->energy_bonus > 0) @if($item->item->energy_bonus > 0)
<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>+{{ $item->item->energy_bonus }} Energy</span> <span>+{{ $item->item->energy_bonus }} Energy</span>
</div> </div>
@endif @endif
@@ -77,20 +69,16 @@
@if($item->equipped) @if($item->equipped)
<form action="{{ route('game.inventory.unequip', $item) }}" method="POST"> <form action="{{ route('game.inventory.unequip', $item) }}" method="POST">
@csrf @csrf
<button <button type="submit"
type="submit" class="px-3 py-1 text-xs bg-syndicate-600 hover:bg-syndicate-500 text-gray-300 rounded transition">
class="px-3 py-1 text-xs bg-gray-400 hover:bg-gray-500 text-white rounded transition"
>
Unequip Unequip
</button> </button>
</form> </form>
@else @else
<form action="{{ route('game.inventory.equip', $item) }}" method="POST"> <form action="{{ route('game.inventory.equip', $item) }}" method="POST">
@csrf @csrf
<button <button type="submit"
type="submit" class="px-3 py-1 text-xs bg-crime-600 hover:bg-crime-500 text-white rounded transition">
class="px-3 py-1 text-xs bg-blue-500 hover:bg-blue-600 text-white rounded transition"
>
Equip Equip
</button> </button>
</form> </form>
@@ -100,10 +88,8 @@
@if($item->item->canUse()) @if($item->item->canUse())
<form action="{{ route('game.inventory.use', $item) }}" method="POST"> <form action="{{ route('game.inventory.use', $item) }}" method="POST">
@csrf @csrf
<button <button type="submit"
type="submit" class="px-3 py-1 text-xs bg-green-700 hover:bg-green-600 text-white rounded transition">
class="px-3 py-1 text-xs bg-green-500 hover:bg-green-600 text-white rounded transition"
>
Use Use
</button> </button>
</form> </form>
@@ -112,10 +98,8 @@
<form action="{{ route('game.inventory.drop', $item) }}" method="POST"> <form action="{{ route('game.inventory.drop', $item) }}" method="POST">
@csrf @csrf
<input type="number" name="quantity" value="1" min="1" max="{{ $item->quantity }}" class="hidden"> <input type="number" name="quantity" value="1" min="1" max="{{ $item->quantity }}" class="hidden">
<button <button type="submit"
type="submit" class="px-3 py-1 text-xs bg-red-900/60 hover:bg-red-800/80 border border-red-800 text-red-400 rounded transition">
class="px-3 py-1 text-xs bg-red-500 hover:bg-red-600 text-white rounded transition"
>
Drop Drop
</button> </button>
</form> </form>
resources/views/game/jail.blade.php
+17 -28
View File
@@ -4,46 +4,35 @@
@section('game-content') @section('game-content')
<div class="max-w-2xl mx-auto"> <div class="max-w-2xl mx-auto">
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg"> <div class="bg-syndicate-800 border border-syndicate-700 rounded-lg">
<div class="p-8 text-center"> <div class="p-8 text-center">
<div class="mb-6"> <div class="mb-6">
<span class="text-6xl text-yellow-500">🚔</span> <span class="text-6xl">🚔</span>
</div> </div>
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4"> <h1 class="font-display text-2xl font-bold text-gray-100 mb-4">You're in Jail</h1>
You're in Jail <p class="text-gray-400 mb-6 text-sm">Your character has been arrested and is currently serving time.</p>
</h1>
<p class="text-gray-600 dark:text-gray-400 mb-6"> <div class="bg-yellow-900/20 border border-yellow-800 rounded-lg p-6 mb-6 text-left">
Your character has been arrested and is currently serving time in jail. <h3 class="font-display text-base font-semibold text-yellow-300 mb-3">Your Status</h3>
</p> <div class="space-y-2 text-sm">
<div class="flex justify-between">
<div class="bg-yellow-50 dark:bg-yellow-900/30 rounded-lg p-6 mb-6"> <span class="text-gray-400">Status</span>
<h3 class="text-lg font-medium text-yellow-800 dark:text-yellow-200 mb-3"> <span class="text-yellow-400 font-medium">In Jail</span>
Your Status
</h3>
<div class="space-y-2">
<div class="flex justify-between text-sm">
<span class="text-gray-600 dark:text-gray-400">Status</span>
<span class="font-medium text-yellow-600 dark:text-yellow-400">In Jail</span>
</div> </div>
<div class="flex justify-between text-sm"> <div class="flex justify-between">
<span class="text-gray-600 dark:text-gray-400">Release Time</span> <span class="text-gray-400">Release Time</span>
<span class="font-medium">{{ $releaseTime }}</span> <span class="text-gray-200 font-medium">{{ $releaseTime }}</span>
</div> </div>
</div> </div>
</div> </div>
<div class="space-y-4"> <div class="space-y-4">
<p class="text-sm text-gray-500 dark:text-gray-400"> <p class="text-sm text-gray-600">You must wait for your sentence to complete.</p>
You must wait for your sentence to complete. There is no way to reduce your jail time.
</p>
<a <a href="{{ route('game.dashboard') }}"
href="{{ route('game.dashboard') }}" class="inline-flex items-center text-gray-500 hover:text-gray-300 transition text-sm">
class="inline-flex items-center text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition" <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
>
<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg> </svg>
Back to Dashboard Back to Dashboard