some progress
This commit is contained in:
@@ -228,3 +228,19 @@ body {
|
||||
.dropdown-divider {
|
||||
border-top: 1px solid #334155;
|
||||
}
|
||||
|
||||
.cover-container{
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.cover-container a:hover+.game-info-cover{
|
||||
display: flex;
|
||||
}
|
||||
.cover-container .game-info-cover{
|
||||
border: 1px solid #000;
|
||||
margin-left: 10px;
|
||||
position: absolute; top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
color: #fff; background: rgba(0, 0, 0, 0.7);
|
||||
display: none; justify-content: center; align-items: center;
|
||||
}
|
||||
|
||||
@@ -7,9 +7,9 @@
|
||||
<h1 class="h2 fw-bold gradient-text">All Games</h1>
|
||||
<div class="d-flex gap-2">
|
||||
<form action="{{ route('games.index') }}" method="GET" class="d-flex me-2">
|
||||
<input type="text"
|
||||
name="search"
|
||||
class="form-control bg-dark text-white border-0"
|
||||
<input type="text"
|
||||
name="search"
|
||||
class="form-control bg-dark text-white border-0"
|
||||
placeholder="Search games..."
|
||||
value="{{ request('search') }}"
|
||||
style="min-width: 250px;">
|
||||
@@ -92,7 +92,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if(request()->hasAny(['platform', 'genre', 'year', 'rating_range']))
|
||||
@if(request()->hasAny(['platform', 'genre', 'year ', 'rating_range']))
|
||||
<div class="mb-4">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
@if(request('platform'))
|
||||
@@ -123,35 +123,48 @@
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-4">
|
||||
<div class="row g-4">
|
||||
@foreach($games as $game)
|
||||
<div class="col">
|
||||
<div class="card gradient-border h-100">
|
||||
<img src="{{ $game->cover_url ?? 'https://via.placeholder.com/300x400' }}"
|
||||
class="card-img-top"
|
||||
alt="{{ $game->name }}"
|
||||
style="height: 300px; object-fit: cover;">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{{ $game->name }}</h5>
|
||||
<p class="card-text text-gray-400 small">
|
||||
{{ Str::limit($game->summary, 100) }}
|
||||
</p>
|
||||
<div class="d-flex gap-2 mb-3">
|
||||
@if($game->rating)
|
||||
<span class="badge bg-primary"><i class="fas fa-star me-1"></i> {{ number_format($game->rating, 1) }}</span>
|
||||
@endif
|
||||
@if($game->first_release_date)
|
||||
<span class="badge bg-secondary">
|
||||
<i class="fas fa-calendar-alt me-1"></i> {{ \Carbon\Carbon::parse($game->first_release_date)->format('Y') }}
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
<a href="{{ route('games.show', $game->slug) }}" class="btn btn-gradient w-100">
|
||||
<i class="fas fa-info-circle me-1"></i> View Details
|
||||
<div class="col-md-2">
|
||||
<div class="cover-container">
|
||||
<a href="{{ route('games.show', $game->slug) }}">
|
||||
<img src="{{ $game->cover_url ?? 'https://via.placeholder.com/300x400' }}"
|
||||
class="card-img-top"
|
||||
alt="{{ $game->name }}"
|
||||
style="height: 300px; object-fit: cover;">
|
||||
<div class="game-info-cover">
|
||||
text here
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{-- <div class="col">--}}
|
||||
{{-- <div class="card gradient-border h-100">--}}
|
||||
{{-- <img src="{{ $game->cover_url ?? 'https://via.placeholder.com/300x400' }}"--}}
|
||||
{{-- class="card-img-top"--}}
|
||||
{{-- alt="{{ $game->name }}"--}}
|
||||
{{-- style="height: 300px; object-fit: cover;">--}}
|
||||
{{-- <div class="card-body">--}}
|
||||
{{-- <h5 class="card-title">{{ $game->name }}</h5>--}}
|
||||
{{-- <p class="card-text text-gray-400 small">--}}
|
||||
{{-- {{ Str::limit($game->summary, 100) }}--}}
|
||||
{{-- </p>--}}
|
||||
{{-- <div class="d-flex gap-2 mb-3">--}}
|
||||
{{-- @if($game->rating)--}}
|
||||
{{-- <span class="badge bg-primary"><i class="fas fa-star me-1"></i> {{ number_format($game->rating, 1) }}</span>--}}
|
||||
{{-- @endif--}}
|
||||
{{-- @if($game->first_release_date)--}}
|
||||
{{-- <span class="badge bg-secondary">--}}
|
||||
{{-- <i class="fas fa-calendar-alt me-1"></i> {{ \Carbon\Carbon::parse($game->first_release_date)->format('Y') }}--}}
|
||||
{{-- </span>--}}
|
||||
{{-- @endif--}}
|
||||
{{-- </div>--}}
|
||||
{{-- <a href="{{ route('games.show', $game->slug) }}" class="btn btn-gradient w-100">--}}
|
||||
{{-- <i class="fas fa-info-circle me-1"></i> View Details--}}
|
||||
{{-- </a>--}}
|
||||
{{-- </div>--}}
|
||||
{{-- </div>--}}
|
||||
{{-- </div>--}}
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
|
||||
@@ -47,28 +47,40 @@
|
||||
|
||||
<div class="card bg-dark text-white mb-4">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Details</h5>
|
||||
<h5 class="mb-0">Released on</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<h6 class="text-muted">Platforms</h6>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
@foreach($game->platforms()->get() as $platform)
|
||||
<span class="badge bg-secondary">{{ $platform->name }}</span>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-dark text-white mb-4">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Genres</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<h6 class="text-muted">Genres</h6>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
@foreach($game->genres()->get() as $genre)
|
||||
<span class="badge bg-primary">{{ $genre->name }}</span>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($game->rating)
|
||||
<div class="card bg-dark text-white mb-4">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Details</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
@if($game->rating)
|
||||
<div class="mb-3">
|
||||
<h6 class="text-muted">Rating</h6>
|
||||
<div class="d-flex align-items-center">
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'ClearGame - Track Your Games. Level Up Your Backlog.')
|
||||
|
||||
@section('content')
|
||||
<section class="text-center py-5">
|
||||
<h1 class="display-4 fw-bold mb-4">
|
||||
<span class="gradient-text">Track Your Games.</span><br>
|
||||
Level Up Your Backlog.
|
||||
</h1>
|
||||
<p class="lead text-gray-400 mb-5 mx-auto" style="max-width: 600px;">
|
||||
Organize your gaming journey, discover new titles, and connect with fellow gamers.
|
||||
Your ultimate companion for managing and completing your game collection.
|
||||
</p>
|
||||
<div class="d-flex justify-content-center gap-3">
|
||||
<a href="#" class="btn btn-gradient btn-lg">Get Started</a>
|
||||
<a href="#" class="btn btn-outline-gradient btn-lg">Learn More</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-5">
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4">
|
||||
<div class="gradient-border p-4 rounded-3 h-100">
|
||||
<div class="display-4 mb-3 gradient-text">🎮</div>
|
||||
<h3 class="h4 fw-semibold mb-2">Track Your Progress</h3>
|
||||
<p class="text-gray-400">Keep tabs on your gaming journey and celebrate your achievements.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="gradient-border p-4 rounded-3 h-100">
|
||||
<div class="display-4 mb-3 gradient-text">📊</div>
|
||||
<h3 class="h4 fw-semibold mb-2">Discover New Games</h3>
|
||||
<p class="text-gray-400">Find your next favorite game with personalized recommendations.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="gradient-border p-4 rounded-3 h-100">
|
||||
<div class="display-4 mb-3 gradient-text">👥</div>
|
||||
<h3 class="h4 fw-semibold mb-2">Connect with Gamers</h3>
|
||||
<p class="text-gray-400">Share your experiences and connect with like-minded gamers.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="text-center py-5">
|
||||
<h2 class="display-5 fw-bold mb-4">Ready to Level Up Your Gaming Experience?</h2>
|
||||
<a href="#" class="btn btn-gradient btn-lg">Join ClearGame Today</a>
|
||||
</section>
|
||||
@endsection
|
||||
@@ -33,15 +33,7 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
<div class="container">
|
||||
<a class="navbar-brand text-2xl fw-bold gradient-text" href="#">ClearGame</a>
|
||||
<div class="d-flex">
|
||||
<a href="#" class="text-gray-300 text-decoration-none me-3">Login</a>
|
||||
<a href="#" class="btn btn-gradient">Sign Up</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@include('layouts.navigation')
|
||||
|
||||
<main class="container">
|
||||
<section class="text-center py-5">
|
||||
@@ -97,4 +89,4 @@
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -19,7 +19,29 @@
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--primary: #7F00FF;
|
||||
--accent: #00C9FF;
|
||||
--background: #121212;
|
||||
--text: #EAEAEA;
|
||||
}
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: var(--background);
|
||||
color: var(--text);
|
||||
}
|
||||
.gradient-text {
|
||||
background: linear-gradient(90deg, var(--primary), var(--accent));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.gradient-border {
|
||||
border: 2px solid transparent;
|
||||
background: linear-gradient(var(--background), var(--background)) padding-box,
|
||||
linear-gradient(90deg, var(--primary), var(--accent)) border-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-sans antialiased">
|
||||
<div class="min-h-screen bg-gray-100 dark:bg-gray-900">
|
||||
@@ -44,6 +66,9 @@
|
||||
<i class="fas fa-user me-1"></i> {{ Auth::user()->name }}
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li>
|
||||
<a href="">My lists</a>
|
||||
</li>
|
||||
<li>
|
||||
<form method="POST" action="{{ route('logout') }}">
|
||||
@csrf
|
||||
|
||||
@@ -19,38 +19,46 @@
|
||||
</div>
|
||||
|
||||
<!-- Settings Dropdown -->
|
||||
<div class="hidden sm:flex sm:items-center sm:ms-6">
|
||||
<x-dropdown align="right" width="48">
|
||||
<x-slot name="trigger">
|
||||
<button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150">
|
||||
<div>{{ Auth::user()->name }}</div>
|
||||
@auth
|
||||
<div class="hidden sm:flex sm:items-center sm:ms-6">
|
||||
<x-dropdown align="right" width="48">
|
||||
<x-slot name="trigger">
|
||||
<button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150">
|
||||
<div>{{ Auth::user()->name }}</div>
|
||||
|
||||
<div class="ms-1">
|
||||
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</x-slot>
|
||||
<div class="ms-1">
|
||||
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</x-slot>
|
||||
|
||||
<x-slot name="content">
|
||||
<x-dropdown-link :href="route('profile.edit')">
|
||||
{{ __('Profile') }}
|
||||
</x-dropdown-link>
|
||||
|
||||
<!-- Authentication -->
|
||||
<form method="POST" action="{{ route('logout') }}">
|
||||
@csrf
|
||||
|
||||
<x-dropdown-link :href="route('logout')"
|
||||
onclick="event.preventDefault();
|
||||
this.closest('form').submit();">
|
||||
{{ __('Log Out') }}
|
||||
<x-slot name="content">
|
||||
<x-dropdown-link :href="route('profile.edit')">
|
||||
{{ __('Profile') }}
|
||||
</x-dropdown-link>
|
||||
</form>
|
||||
</x-slot>
|
||||
</x-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- Authentication -->
|
||||
<form method="POST" action="{{ route('logout') }}">
|
||||
@csrf
|
||||
|
||||
<x-dropdown-link :href="route('logout')"
|
||||
onclick="event.preventDefault();
|
||||
this.closest('form').submit();">
|
||||
{{ __('Log Out') }}
|
||||
</x-dropdown-link>
|
||||
</form>
|
||||
</x-slot>
|
||||
</x-dropdown>
|
||||
</div>
|
||||
@endauth
|
||||
@guest
|
||||
<div class="d-flex">
|
||||
<a href="#" class="text-gray-300 text-decoration-none me-3">Login</a>
|
||||
<a href="#" class="btn btn-gradient">Sign Up</a>
|
||||
</div>
|
||||
@endguest
|
||||
|
||||
<!-- Hamburger -->
|
||||
<div class="-me-2 flex items-center sm:hidden">
|
||||
|
||||
@@ -4,51 +4,65 @@
|
||||
|
||||
@section('content')
|
||||
<div class="container py-4">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h1 class="text-gradient">My Lists</h1>
|
||||
<a href="{{ route('lists.create') }}" class="btn btn-gradient">
|
||||
<i class="fas fa-plus me-2"></i>Create New List
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row g-4">
|
||||
@foreach($lists as $list)
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card bg-dark text-white h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-start mb-3">
|
||||
<h5 class="card-title mb-0">{{ $list->name }}</h5>
|
||||
<span class="badge bg-secondary">{{ $list->games_count }} games</span>
|
||||
</div>
|
||||
@if($list->description)
|
||||
<p class="card-text text-muted">{{ $list->description }}</p>
|
||||
@endif
|
||||
</div>
|
||||
<div class="card-footer bg-dark border-top border-secondary">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<a href="{{ route('lists.show', $list) }}" class="btn btn-outline-primary btn-sm">
|
||||
<i class="fas fa-eye me-1"></i> View
|
||||
</a>
|
||||
@if(!$list->is_default)
|
||||
<div class="btn-group">
|
||||
<a href="{{ route('lists.edit', $list) }}" class="btn btn-outline-secondary btn-sm">
|
||||
<i class="fas fa-edit me-1"></i> Edit
|
||||
</a>
|
||||
<form action="{{ route('lists.destroy', $list) }}" method="POST" class="d-inline">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="submit" class="btn btn-outline-danger btn-sm"
|
||||
onclick="return confirm('Are you sure you want to delete this list?')">
|
||||
<i class="fas fa-trash me-1"></i> Delete
|
||||
</button>
|
||||
</form>
|
||||
@if($lists->count())
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h1 class="text-gradient d-block float-start">My Lists</h1>
|
||||
<span class="float-end">
|
||||
<a href="{{ route('lists.create') }}" class="btn btn-gradient">
|
||||
<i class="fas fa-plus me-2"></i>Create New List
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
@foreach($lists as $list)
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card bg-dark text-white h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-start mb-3">
|
||||
<h5 class="card-title mb-0">{{ $list->name }}</h5>
|
||||
<span class="badge bg-secondary">{{ $list->games_count }} games</span>
|
||||
</div>
|
||||
@if($list->description)
|
||||
<p class="card-text text-muted">{{ $list->description }}</p>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
<div class="card-footer bg-dark border-top border-secondary">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<a href="{{ route('lists.show', $list) }}" class="btn btn-outline-primary btn-sm">
|
||||
<i class="fas fa-eye me-1"></i> View
|
||||
</a>
|
||||
@if(!$list->is_default)
|
||||
<div class="btn-group">
|
||||
<a href="{{ route('lists.edit', $list) }}" class="btn btn-outline-secondary btn-sm">
|
||||
<i class="fas fa-edit me-1"></i> Edit
|
||||
</a>
|
||||
<form action="{{ route('lists.destroy', $list) }}" method="POST" class="d-inline">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="submit" class="btn btn-outline-danger btn-sm"
|
||||
onclick="return confirm('Are you sure you want to delete this list?')">
|
||||
<i class="fas fa-trash me-1"></i> Delete
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
@else
|
||||
no lists exists
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@endsection
|
||||
|
||||
Reference in New Issue
Block a user