From ef821b8a6f9a98e43e0ef82d74af3e85fb08f6cc Mon Sep 17 00:00:00 2001
From: Doar Mihai <mihai@invata-progremare.ro>
Date: Sun, 28 Jun 2026 03:10:09 +0300
Subject: [PATCH] feat: restyle character creation page with dark crime theme

---
 .../views/game/character/create.blade.php     | 116 +++++++++---------
 1 file changed, 58 insertions(+), 58 deletions(-)

diff --git a/resources/views/game/character/create.blade.php b/resources/views/game/character/create.blade.php
index d6f83ac..eea235d 100644
--- a/resources/views/game/character/create.blade.php
+++ b/resources/views/game/character/create.blade.php
@@ -4,63 +4,63 @@
 
 @section('game-content')
     <div class="max-w-2xl mx-auto">
-        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-8">
-            <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6">
+        <div class="bg-syndicate-800 border border-syndicate-700 rounded-lg p-8">
+            <h1 class="font-display text-2xl font-bold text-gray-100 mb-6">
                 Create Your Character
             </h1>
-            
-            <p class="text-gray-600 dark:text-gray-400 mb-8">
-                Welcome to {{ config('game.name', 'The Crime Syndicate') }}! 
+
+            <p class="text-gray-400 mb-8">
+                Welcome to {{ config('game.name', 'The Crime Syndicate') }}!
                 Create your character to start your criminal career.
             </p>
-            
+
             <form method="POST" action="{{ route('game.character.store') }}">
                 @csrf
-                
+
                 <!-- Name -->
                 <div class="mb-6">
-                    <label for="name" class="block font-medium text-sm text-gray-700 dark:text-gray-300 mb-2">
+                    <label for="name" class="block font-medium text-sm text-gray-300 mb-2">
                         Character Name
                     </label>
-                    <input 
-                        id="name" 
-                        type="text" 
-                        name="name" 
+                    <input
+                        id="name"
+                        type="text"
+                        name="name"
                         value="{{ old('name') }}"
                         required
                         autofocus
                         autocomplete="name"
-                        class="w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 rounded-md shadow-sm @error('name') border-red-500 @enderror"
+                        class="w-full bg-syndicate-700 border-syndicate-600 text-gray-100 placeholder-gray-500 focus:border-crime-500 focus:ring-crime-500 rounded-md shadow-sm @error('name') border-red-500 @enderror"
                         placeholder="Enter your character name"
                         maxlength="50"
                     >
                     @error('name')
-                        <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
+                        <p class="mt-2 text-sm text-red-400">{{ $message }}</p>
                     @enderror
-                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                    <p class="mt-1 text-xs text-gray-500">
                         Choose a unique name for your character (max 50 characters).
                     </p>
                 </div>
-                
+
                 <!-- Gender -->
                 <div class="mb-6">
-                    <label class="block font-medium text-sm text-gray-700 dark:text-gray-300 mb-2">
+                    <label class="block font-medium text-sm text-gray-300 mb-2">
                         Gender
                     </label>
                     <div class="space-y-2">
                         @foreach($genders as $gender)
                             <div class="flex items-center">
-                                <input 
-                                    id="gender-{{ $gender }}" 
-                                    type="radio" 
-                                    name="gender" 
+                                <input
+                                    id="gender-{{ $gender }}"
+                                    type="radio"
+                                    name="gender"
                                     value="{{ $gender }}"
                                     {{ old('gender') === $gender ? 'checked' : ($loop->first ? 'checked' : '') }}
-                                    class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600"
+                                    class="h-4 w-4 text-crime-600 focus:ring-crime-500 border-syndicate-600 bg-syndicate-700"
                                 >
-                                <label 
-                                    for="gender-{{ $gender }}" 
-                                    class="ml-2 block text-sm text-gray-700 dark:text-gray-300"
+                                <label
+                                    for="gender-{{ $gender }}"
+                                    class="ml-2 block text-sm text-gray-300"
                                 >
                                     {{ ucfirst($gender) }}
                                 </label>
@@ -68,23 +68,23 @@
                         @endforeach
                     </div>
                     @error('gender')
-                        <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
+                        <p class="mt-2 text-sm text-red-400">{{ $message }}</p>
                     @enderror
                 </div>
-                
+
                 <!-- Location -->
                 <div class="mb-6">
-                    <label for="location_id" class="block font-medium text-sm text-gray-700 dark:text-gray-300 mb-2">
+                    <label for="location_id" class="block font-medium text-sm text-gray-300 mb-2">
                         Starting Location
                     </label>
-                    <select 
-                        id="location_id" 
-                        name="location_id" 
+                    <select
+                        id="location_id"
+                        name="location_id"
                         required
-                        class="w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 rounded-md shadow-sm @error('location_id') border-red-500 @enderror"
+                        class="w-full bg-syndicate-700 border-syndicate-600 text-gray-100 focus:border-crime-500 focus:ring-crime-500 rounded-md shadow-sm @error('location_id') border-red-500 @enderror"
                     >
                         @foreach($locations as $location)
-                            <option 
+                            <option
                                 value="{{ $location->id }}"
                                 {{ old('location_id') == $location->id ? 'selected' : ($loop->first ? 'selected' : '') }}
                             >
@@ -93,59 +93,59 @@
                         @endforeach
                     </select>
                     @error('location_id')
-                        <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
+                        <p class="mt-2 text-sm text-red-400">{{ $message }}</p>
                     @enderror
-                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                    <p class="mt-1 text-xs text-gray-500">
                         Choose where your character will start their journey.
                     </p>
                 </div>
-                
+
                 <!-- Starting Stats Preview -->
-                <div class="mb-6 bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
-                    <h3 class="font-medium text-sm text-gray-700 dark:text-gray-300 mb-3">
+                <div class="mb-6 bg-syndicate-700 border border-syndicate-600 p-4 rounded-lg">
+                    <h3 class="font-display font-semibold text-sm text-gray-300 mb-3">
                         Starting Stats
                     </h3>
                     <div class="grid grid-cols-2 gap-3 text-sm">
                         <div class="flex justify-between">
-                            <span class="text-gray-600 dark:text-gray-400">Health</span>
-                            <span>{{ config('game.health.start_amount', 100) }}/{{ config('game.health.max', 100) }}</span>
+                            <span class="text-gray-400">Health</span>
+                            <span class="text-gray-200">{{ config('game.health.start_amount', 100) }}/{{ config('game.health.max', 100) }}</span>
                         </div>
                         <div class="flex justify-between">
-                            <span class="text-gray-600 dark:text-gray-400">Energy</span>
-                            <span>{{ config('game.energy.start_amount', 100) }}/{{ config('game.energy.max', 100) }}</span>
+                            <span class="text-gray-400">Energy</span>
+                            <span class="text-gray-200">{{ config('game.energy.start_amount', 100) }}/{{ config('game.energy.max', 100) }}</span>
                         </div>
                         <div class="flex justify-between">
-                            <span class="text-gray-600 dark:text-gray-400">Money</span>
-                            <span>${{ number_format(config('game.economy.start_money', 5000)) }}</span>
+                            <span class="text-gray-400">Money</span>
+                            <span class="text-gold-400">${{ number_format(config('game.economy.start_money', 5000)) }}</span>
                         </div>
                         <div class="flex justify-between">
-                            <span class="text-gray-600 dark:text-gray-400">Bank</span>
-                            <span>${{ number_format(config('game.economy.start_bank', 0)) }}</span>
+                            <span class="text-gray-400">Bank</span>
+                            <span class="text-gray-200">${{ number_format(config('game.economy.start_bank', 0)) }}</span>
                         </div>
                         <div class="flex justify-between">
-                            <span class="text-gray-600 dark:text-gray-400">Strength</span>
-                            <span>5</span>
+                            <span class="text-gray-400">Strength</span>
+                            <span class="text-gray-200">5</span>
                         </div>
                         <div class="flex justify-between">
-                            <span class="text-gray-600 dark:text-gray-400">Defense</span>
-                            <span>5</span>
+                            <span class="text-gray-400">Defense</span>
+                            <span class="text-gray-200">5</span>
                         </div>
                         <div class="flex justify-between">
-                            <span class="text-gray-600 dark:text-gray-400">Speed</span>
-                            <span>5</span>
+                            <span class="text-gray-400">Speed</span>
+                            <span class="text-gray-200">5</span>
                         </div>
                         <div class="flex justify-between">
-                            <span class="text-gray-600 dark:text-gray-400">Dexterity</span>
-                            <span>5</span>
+                            <span class="text-gray-400">Dexterity</span>
+                            <span class="text-gray-200">5</span>
                         </div>
                     </div>
                 </div>
-                
+
                 <!-- Submit Button -->
                 <div class="flex justify-end">
-                    <button 
-                        type="submit" 
-                        class="inline-flex items-center px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition"
+                    <button
+                        type="submit"
+                        class="inline-flex items-center px-6 py-3 bg-crime-600 hover:bg-crime-500 text-white font-medium rounded-lg transition"
                     >
                         Create Character
                         <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">