From 8ab2d5048be7f60c64abb7dcd46eaa3d86bb64b2 Mon Sep 17 00:00:00 2001 From: Doar Mihai Date: Sat, 28 Feb 2026 14:08:30 +0200 Subject: [PATCH] dark/light mode --- resources/css/app.css | 195 +++++-- resources/views/games/show.blade.php | 806 ++++++++++++++++---------- resources/views/layouts/app.blade.php | 49 +- 3 files changed, 697 insertions(+), 353 deletions(-) diff --git a/resources/css/app.css b/resources/css/app.css index c6db6cb..bdcaa00 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -3,16 +3,52 @@ :root { --primary: #7F00FF; --accent: #00C9FF; - --background: #121212; - --text: #EAEAEA; --gradient-start: #4f46e5; --gradient-end: #7c3aed; } +/* Dark Theme (Default) */ +[data-theme="dark"] { + --background: #0f172a; + --background-alt: #1e293b; + --background-elevated: rgba(30, 30, 30, 0.8); + --text: #e2e8f0; + --text-muted: #94a3b8; + --border-color: rgba(255, 255, 255, 0.1); + --card-bg: rgba(30, 30, 30, 0.6); + --card-hover: rgba(127, 0, 255, 0.05); + --input-bg: #1a1a1a; + --dropdown-bg: #1e293b; + --shadow: rgba(0, 0, 0, 0.3); +} + +/* Light Theme */ +[data-theme="light"] { + --background: #f8fafc; + --background-alt: #ffffff; + --background-elevated: rgba(255, 255, 255, 0.95); + --text: #1e293b; + --text-muted: #64748b; + --border-color: rgba(0, 0, 0, 0.1); + --card-bg: rgba(255, 255, 255, 0.8); + --card-hover: rgba(127, 0, 255, 0.08); + --input-bg: #ffffff; + --dropdown-bg: #ffffff; + --shadow: rgba(0, 0, 0, 0.1); +} + body { - background-color: #0f172a!important; - color: #e2e8f0; - background: url('../../img/top_bg_transparency_4.png') repeat-x #0f172a; + background-color: var(--background) !important; + color: var(--text); + transition: background-color 0.3s ease, color 0.3s ease; +} + +[data-theme="dark"] body { + background: url('../../img/top_bg_transparency_4.png') repeat-x var(--background); +} + +[data-theme="light"] body { + background: linear-gradient(180deg, #e0e7ff 0%, var(--background) 100%); } .gradient-text { @@ -52,21 +88,22 @@ body { /* Form Styles */ .form-control { - background-color: var(--background) !important; - border-color: rgba(255, 255, 255, 0.1) !important; + background-color: var(--input-bg) !important; + border-color: var(--border-color) !important; color: var(--text) !important; + transition: all 0.3s ease; } .form-control:focus { - background-color: var(--background) !important; + background-color: var(--input-bg) !important; border-color: var(--primary) !important; box-shadow: 0 0 0 0.25rem rgba(127, 0, 255, 0.25) !important; color: var(--text) !important; } .form-check-input { - background-color: var(--background) !important; - border-color: rgba(255, 255, 255, 0.1) !important; + background-color: var(--input-bg) !important; + border-color: var(--border-color) !important; } .form-check-input:checked { @@ -81,8 +118,8 @@ body { /* Alert Styles */ .alert { - background-color: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.1); + background-color: var(--card-bg); + border: 1px solid var(--border-color); color: var(--text); } @@ -92,29 +129,37 @@ body { color: #28a745; } +[data-theme="light"] .alert-success { + background-color: rgba(40, 167, 69, 0.15); +} + .alert-danger { background-color: rgba(220, 53, 69, 0.1); border-color: rgba(220, 53, 69, 0.2); color: #dc3545; } +[data-theme="light"] .alert-danger { + background-color: rgba(220, 53, 69, 0.15); +} + /* Custom Pagination Styles */ .pagination { --bs-pagination-color: var(--text); - --bs-pagination-bg: var(--background); - --bs-pagination-border-color: transparent; + --bs-pagination-bg: var(--card-bg); + --bs-pagination-border-color: var(--border-color); --bs-pagination-hover-color: var(--text); - --bs-pagination-hover-bg: rgba(255, 255, 255, 0.1); - --bs-pagination-hover-border-color: transparent; + --bs-pagination-hover-bg: var(--card-hover); + --bs-pagination-hover-border-color: var(--border-color); --bs-pagination-focus-color: var(--text); - --bs-pagination-focus-bg: rgba(255, 255, 255, 0.1); + --bs-pagination-focus-bg: var(--card-hover); --bs-pagination-focus-box-shadow: none; --bs-pagination-active-color: white; --bs-pagination-active-bg: linear-gradient(90deg, var(--primary), var(--accent)); --bs-pagination-active-border-color: transparent; - --bs-pagination-disabled-color: #6c757d; - --bs-pagination-disabled-bg: var(--background); - --bs-pagination-disabled-border-color: transparent; + --bs-pagination-disabled-color: var(--text-muted); + --bs-pagination-disabled-bg: var(--card-bg); + --bs-pagination-disabled-border-color: var(--border-color); } .page-link { @@ -140,8 +185,9 @@ body { /* Custom dropdown styles */ .dropdown-menu { - background-color: var(--background); - border: 1px solid rgba(255, 255, 255, 0.1); + background-color: var(--dropdown-bg); + border: 1px solid var(--border-color); + box-shadow: 0 4px 15px var(--shadow); } .dropdown-item { @@ -149,7 +195,7 @@ body { } .dropdown-item:hover { - background-color: rgba(255, 255, 255, 0.1); + background-color: var(--card-hover); color: var(--text); } @@ -203,30 +249,18 @@ body { } .navbar { - background-color: rgba(15, 23, 42, 0.8); + background-color: var(--background-elevated); backdrop-filter: blur(10px); + border-bottom: 1px solid var(--border-color); + transition: background-color 0.3s ease; } .navbar a { - color: white!important; -} - -.dropdown-menu { - background-color: #1e293b; - border: 1px solid #334155; -} - -.dropdown-item { - color: #e2e8f0; -} - -.dropdown-item:hover { - background-color: #334155; - color: #e2e8f0; + color: var(--text) !important; } .dropdown-divider { - border-top: 1px solid #334155; + border-top: 1px solid var(--border-color); } .cover-container{ @@ -312,9 +346,10 @@ body { /* Card View Styles */ .game-card-enhanced { - background-color: rgba(30, 30, 30, 0.8); + background-color: var(--card-bg); transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; overflow: hidden; + border: 1px solid var(--border-color); } .game-card-enhanced:hover { @@ -323,13 +358,14 @@ body { } .game-card-enhanced .card-body { - background-color: rgba(18, 18, 18, 0.9); + background-color: var(--card-bg); } /* List View Styles */ .game-card-list { - background-color: rgba(30, 30, 30, 0.8); + background-color: var(--card-bg); transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + border: 1px solid var(--border-color); } .game-card-list:hover { @@ -338,7 +374,7 @@ body { } .game-card-list .card-body { - background-color: rgba(18, 18, 18, 0.9); + background-color: var(--card-bg); } /* View Mode Button Styles */ @@ -350,11 +386,78 @@ body { .view-mode-btn.active { background: linear-gradient(90deg, var(--primary), var(--accent)); border-color: transparent; - color: white; + color: white !important; } .view-mode-btn:not(.active):hover { - background-color: rgba(127, 0, 255, 0.1); + background-color: var(--card-hover); +} + +/* Theme Toggle Button */ +.theme-toggle-btn { + padding: 0.5rem; + background: var(--card-bg); + border: 1px solid var(--border-color); + border-radius: 50%; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.3s ease; + color: var(--text); +} + +.theme-toggle-btn:hover { + background: var(--card-hover); + transform: scale(1.1); +} + +.theme-toggle-btn i { + font-size: 1.2rem; +} + +/* Text color overrides for light theme */ +[data-theme="light"] .text-white { + color: var(--text) !important; +} + +[data-theme="light"] .text-muted { + color: var(--text-muted) !important; +} + +[data-theme="light"] .text-gray-400 { + color: var(--text-muted) !important; +} + +[data-theme="light"] .bg-dark { + background-color: var(--card-bg) !important; +} + +[data-theme="light"] .border-secondary { + border-color: var(--border-color) !important; +} + +[data-theme="light"] .border-dark { + border-color: var(--border-color) !important; +} + +/* Button styles for light theme */ +[data-theme="light"] .btn-outline-light { + border-color: var(--border-color); + color: var(--text); +} + +[data-theme="light"] .btn-outline-light:hover { + background-color: var(--card-hover); + color: var(--text); +} + +/* Footer */ +footer { + background-color: var(--background-alt); + border-top-color: var(--border-color) !important; } /* Responsive adjustments */ diff --git a/resources/views/games/show.blade.php b/resources/views/games/show.blade.php index 934df0b..ca3cbc0 100644 --- a/resources/views/games/show.blade.php +++ b/resources/views/games/show.blade.php @@ -3,247 +3,117 @@ @section('title', $game->name) @section('content') -
- -
- -
- -
- {{ $game->name }} - @if($game->rating) -
-
- {{ number_format($game->rating, 1) }} -
-
- @endif -
- - -
-
-
Rating
- @if($game->rating) -
-
- @for($i = 1; $i <= 5; $i++) - - @endfor -
- ({{ number_format($game->rating_count) }} ratings) -
- @else -

No ratings yet

- @endif -
-
- - - @auth -
- -
    - @foreach(Auth::user()->lists as $list) -
  • -
    - @csrf - - -
    -
    • - @endforeach -
    • -
  • - - Create New List - -
    • -
-
- @endauth -
- - -
- -

{{ $game->name }}

-

- Released on {{ $game->first_release_date->format('F j, Y') }} - @if(isset($game->company)) - by {{ $game->company }} - @endif -

- - -
-
-
Description
-

{{ $game->summary }}

- @if($game->storyline) -
Storyline
-

{{ $game->storyline }}

- @endif -
-
-
- - -
- -
-
-
Platforms
-
- @foreach($game->platforms()->get() as $platform) - {{ $platform->name }} - @endforeach -
-
-
- - -
-
-
Genres
-
- @foreach($game->genres()->get() as $genre) - {{ $genre->name }} - @endforeach -
-
-
-
-
- - -
- -
-
-
-
Stats
-
-
-
    -
  • -
    - Release Date - {{ $game->first_release_date->format('F j, Y') }} -
    -
    • + +
    +
    +
    +
    +
    +

    {{ $game->name }}

    +
    @if($game->rating) -
  • -
    - Rating - {{ number_format($game->rating, 1) }}/100 ({{ number_format($game->rating_count) }} ratings) -
    -
    • - @endif - @if($game->url) -
  • -
    - Website - Visit -
    -
    • - @endif -
- - @if($reviews->isNotEmpty()) -
-
Rating Distribution
- @foreach($ratingDistribution as $rating) -
-
{{ $rating['range'] }}
-
-
+
+
+
+ {{ number_format($game->rating, 0) }} +
+
+
+ @for($i = 1; $i <= 5; $i++) + + @endfor +
+ {{ number_format($game->rating_count) }} ratings +
-
{{ $rating['count'] }}
- @endforeach + @endif + @if($game->first_release_date) +
+ + {{ $game->first_release_date->format('Y') }} +
+ @endif +
+ @foreach($game->genres()->limit(3)->get() as $genre) + {{ $genre->name }} + @endforeach +
+
+
+
+
+
+ + +
+
+ +
+ + @if($game->screenshots->count() > 0 || $game->videos->count() > 0) +
+
+
+ +
+ @if($game->screenshots->count() > 0) + Screenshot + @endif +
+ + +
+
+ @foreach($game->screenshots->take(6) as $index => $screenshot) +
+
+ Screenshot {{ $index + 1 }} +
+
+ @endforeach + @foreach($game->videos->take(2) as $video) +
+
+ Video +
+ +
+
+
+ @endforeach +
+
+
+
+
+ @endif + + +
+
+

About This Game

+
+
+ @if($game->summary) +

{{ $game->summary }}

+ @endif + + @if($game->storyline) +
Storyline
+

{{ $game->storyline }}

@endif
-
- -
- @if($game->similar_games->count() > 0) -
-
-
Games on Series
-
-
-
- @foreach($game->similar_games as $similar) -
-
- - {{ $similar->name }} -
-
{{ $similar->name }}
-

{{ $similar->first_release_date->format('Y') }}

- @if($similar->rating) -
-
- @for($i = 1; $i <= 5; $i++) - - @endfor -
- {{ number_format($similar->rating, 1) }} -
- @endif -
- -
-
- @endforeach -
-
-
- @endif - - @if($game->dlcs->count() > 0) -
-
-
DLCs & Expansions
-
-
-
- @foreach($game->dlcs as $dlc) -
-
- {{ $dlc->name }} -
-
{{ $dlc->name }}
- View Details -
-
-
- @endforeach -
-
-
- @endif -
-
- - -
-
-
-
-
Latest Reviews
+ +
+
+

Reviews

@auth - Write a Review + Write Review @endauth
@@ -254,120 +124,444 @@

No reviews yet. Be the first to review this game!

@auth - Write a Review + Write a Review @else - Login to Write a Review + Login to Write a Review @endauth
@else + + @if($game->rating) +
+
+
+
+ {{ number_format($game->rating, 1) }} + /100 +
+
+ @for($i = 1; $i <= 5; $i++) + + @endfor +
+ {{ number_format($game->rating_count) }} reviews +
+
+
Rating Distribution
+ @foreach(array_slice($ratingDistribution, 0, 5) as $rating) +
+ {{ $rating['range'] }} stars +
+
+
+ {{ number_format($rating['percentage'], 0) }}% +
+ @endforeach +
+
+
+ @endif + +
- @foreach($reviews->take(3) as $review) -
-
-
-
-
- -
-
-
- - {{ $review->user->name }} - -
- - {{ $review->created_at->diffForHumans() }} - -
+ @foreach($reviews->take(5) as $review) +
+
+
+
+
-
-
- {{ $review->rating }}/10 +
+ + {{ $review->user->name }} + +
+ {{ $review->created_at->diffForHumans() }}
- @if($review->recommended) - Recommended - @endif
-
-
-
- {!! nl2br(e(Str::limit($review->content, 300))) !!} - @if(strlen($review->content) > 300) - Read more +
+
+ {{ $review->rating }}/10 +
+ @if($review->recommended) +
+ + Recommended +
@endif
-
-
- - Read full review - - @if(auth()->id() === $review->user_id) -
- - Edit - -
- @csrf - @method('DELETE') - -
-
- @endif -
+
+ {!! nl2br(e(Str::limit($review->content, 300))) !!} + @if(strlen($review->content) > 300) + Read more + @endif +
+
+ + Read full review + + @if(auth()->id() === $review->user_id) +
+ + Edit + +
+ @csrf + @method('DELETE') + +
+
+ @endif
@endforeach - - @if($reviews->count() > 3) -
- - View All {{ $reviews->count() }} Reviews - -
- @endif
+ + @if($reviews->count() > 5) +
+ + View All {{ $reviews->count() }} Reviews + +
+ @endif @endif
+ + +
+ +
+
+ {{ $game->name }} + + + @auth +
+ +
    + @foreach(Auth::user()->lists as $list) +
  • +
    + @csrf + + +
    +
    • + @endforeach +
    • +
  • + + Create New List + +
    • +
+
+ @else + + Login to Add to List + + @endauth + + +
+
+ Release Date + {{ $game->first_release_date ? $game->first_release_date->format('F j, Y') : 'TBA' }} +
+ + @if($game->platforms()->count() > 0) +
+ Platforms +
+ @foreach($game->platforms()->get() as $platform) + + {{ $platform->name }} + + @endforeach +
+
+ @endif + + @if($game->genres()->count() > 0) +
+ Genres +
+ @foreach($game->genres()->get() as $genre) + {{ $genre->name }} + @endforeach +
+
+ @endif + + @if($game->url) +
+ Official Website + + Visit Website + +
+ @endif + + @if($game->rating) +
+ Community Rating +
+ {{ number_format($game->rating, 1) }}/100 + ({{ number_format($game->rating_count) }} votes) +
+
+ @endif +
+
+
+ + + @if($game->similar_games->count() > 0) +
+
+
You May Also Like
+
+
+ @foreach($game->similar_games->take(4) as $similar) + + {{ $similar->name }} +
+
{{ Str::limit($similar->name, 40) }}
+
+ @if($similar->rating) + {{ number_format($similar->rating, 0) }} + @endif + @if($similar->first_release_date) + {{ $similar->first_release_date->format('Y') }} + @endif +
+
+ + @endforeach +
+
+ @endif + + + @if($game->dlcs->count() > 0) +
+
+
DLC & Expansions
+
+
+ @foreach($game->dlcs->take(4) as $dlc) + + {{ $dlc->name }} +
+
{{ Str::limit($dlc->name, 40) }}
+ Additional Content +
+ + @endforeach +
+
+ @endif +
+@endsection +@push('styles') -@endsection +@endpush + +@push('scripts') + +@endpush diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index 77031dc..d3cc511 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -189,7 +189,12 @@
-
+
+ + + @auth