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

feat: restyle character creation page with dark crime theme

Browse Source
This commit is contained in:
Doar Mihai
2026-06-28 03:10:09 +03:00
parent cad99125ce
commit ef821b8a6f
1 changed files with 58 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/game/character/create.blade.php
+34 -34
View File
@@ -4,12 +4,12 @@
@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 p-8"> <div class="bg-syndicate-800 border border-syndicate-700 rounded-lg p-8">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6"> <h1 class="font-display text-2xl font-bold text-gray-100 mb-6">
Create Your Character Create Your Character
</h1> </h1>
<p class="text-gray-600 dark:text-gray-400 mb-8"> <p class="text-gray-400 mb-8">
Welcome to {{ config('game.name', 'The Crime Syndicate') }}! Welcome to {{ config('game.name', 'The Crime Syndicate') }}!
Create your character to start your criminal career. Create your character to start your criminal career.
</p> </p>
@@ -19,7 +19,7 @@
<!-- Name --> <!-- Name -->
<div class="mb-6"> <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 Character Name
</label> </label>
<input <input
@@ -30,21 +30,21 @@
required required
autofocus autofocus
autocomplete="name" 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" placeholder="Enter your character name"
maxlength="50" maxlength="50"
> >
@error('name') @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 @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). Choose a unique name for your character (max 50 characters).
</p> </p>
</div> </div>
<!-- Gender --> <!-- Gender -->
<div class="mb-6"> <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 Gender
</label> </label>
<div class="space-y-2"> <div class="space-y-2">
@@ -56,11 +56,11 @@
name="gender" name="gender"
value="{{ $gender }}" value="{{ $gender }}"
{{ old('gender') === $gender ? 'checked' : ($loop->first ? 'checked' : '') }} {{ 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 <label
for="gender-{{ $gender }}" for="gender-{{ $gender }}"
class="ml-2 block text-sm text-gray-700 dark:text-gray-300" class="ml-2 block text-sm text-gray-300"
> >
{{ ucfirst($gender) }} {{ ucfirst($gender) }}
</label> </label>
@@ -68,20 +68,20 @@
@endforeach @endforeach
</div> </div>
@error('gender') @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 @enderror
</div> </div>
<!-- Location --> <!-- Location -->
<div class="mb-6"> <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 Starting Location
</label> </label>
<select <select
id="location_id" id="location_id"
name="location_id" name="location_id"
required 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) @foreach($locations as $location)
<option <option
@@ -93,50 +93,50 @@
@endforeach @endforeach
</select> </select>
@error('location_id') @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 @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. Choose where your character will start their journey.
</p> </p>
</div> </div>
<!-- Starting Stats Preview --> <!-- Starting Stats Preview -->
<div class="mb-6 bg-gray-50 dark:bg-gray-700 p-4 rounded-lg"> <div class="mb-6 bg-syndicate-700 border border-syndicate-600 p-4 rounded-lg">
<h3 class="font-medium text-sm text-gray-700 dark:text-gray-300 mb-3"> <h3 class="font-display font-semibold text-sm text-gray-300 mb-3">
Starting Stats Starting Stats
</h3> </h3>
<div class="grid grid-cols-2 gap-3 text-sm"> <div class="grid grid-cols-2 gap-3 text-sm">
<div class="flex justify-between"> <div class="flex justify-between">
<span class="text-gray-600 dark:text-gray-400">Health</span> <span class="text-gray-400">Health</span>
<span>{{ config('game.health.start_amount', 100) }}/{{ config('game.health.max', 100) }}</span> <span class="text-gray-200">{{ config('game.health.start_amount', 100) }}/{{ config('game.health.max', 100) }}</span>
</div> </div>
<div class="flex justify-between"> <div class="flex justify-between">
<span class="text-gray-600 dark:text-gray-400">Energy</span> <span class="text-gray-400">Energy</span>
<span>{{ config('game.energy.start_amount', 100) }}/{{ config('game.energy.max', 100) }}</span> <span class="text-gray-200">{{ config('game.energy.start_amount', 100) }}/{{ config('game.energy.max', 100) }}</span>
</div> </div>
<div class="flex justify-between"> <div class="flex justify-between">
<span class="text-gray-600 dark:text-gray-400">Money</span> <span class="text-gray-400">Money</span>
<span>${{ number_format(config('game.economy.start_money', 5000)) }}</span> <span class="text-gold-400">${{ number_format(config('game.economy.start_money', 5000)) }}</span>
</div> </div>
<div class="flex justify-between"> <div class="flex justify-between">
<span class="text-gray-600 dark:text-gray-400">Bank</span> <span class="text-gray-400">Bank</span>
<span>${{ number_format(config('game.economy.start_bank', 0)) }}</span> <span class="text-gray-200">${{ number_format(config('game.economy.start_bank', 0)) }}</span>
</div> </div>
<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>5</span> <span class="text-gray-200">5</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>5</span> <span class="text-gray-200">5</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>5</span> <span class="text-gray-200">5</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>5</span> <span class="text-gray-200">5</span>
</div> </div>
</div> </div>
</div> </div>
@@ -145,7 +145,7 @@
<div class="flex justify-end"> <div class="flex justify-end">
<button <button
type="submit" 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" 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 Create Character
<svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">