ghassan/takeone
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed the styling and colors to purple

Browse Source
This commit is contained in:
ghassan committed 2026-01-22 00:01:27 +03:00
1 parent 454e5d761b
commit fba93887ad
4 files changed
+247 -73
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

resources/views/clubs/explore.blade.php
+60 -36
View File
@@ -3,24 +3,24 @@
@section('content')
<div class="container py-4">
<!-- Hero Section -->
<div class="text-center mb-5">
<h1 class="display-4 fw-bold text-danger mb-2">Find Your Perfect Fit</h1>
<div class="text-center mb-3">
<h1 class="display-4 fw-bold text-primary mb-2">Find Your Perfect Fit</h1>
<p class="lead text-muted">Discover sports clubs, trainers, nutrition clinics, and more near you</p>
<p class="text-muted"><i class="bi bi-geo-alt-fill me-1"></i><span id="currentLocation">Detecting location...</span></p>
<p class="text-muted"><span id="currentLocation" class="badge bg-primary text-white rounded-pill px-3 py-2"><i class="bi bi-geo-alt-fill me-1 fs-5"></i>Detecting location...</span></p>
</div>
<!-- Search Bar with Near Me Button -->
<div class="row justify-content-center mb-4">
<div class="col-lg-10">
<div class="card shadow-sm border-0">
<div class="card-body p-2">
<div class="input-group">
<div class="card shadow-sm rounded-pill border-0">
<div class="card-body rounded-pill p-2">
<div class="input-group rounded-pill">
<span class="input-group-text bg-white border-0">
<i class="bi bi-search"></i>
</span>
<input type="text" id="searchInput" class="form-control border-0"
<input type="text" id="searchInput" class="form-control bg-white border-0"
placeholder="Search for clubs, trainers, nutrition clinics...">
<button class="btn btn-danger px-4" id="nearMeBtn" type="button">
<button class="btn btn-primary px-4 rounded-pill" id="nearMeBtn" type="button">
<i class="bi bi-geo-alt-fill me-2"></i>Near Me
</button>
</div>
@@ -33,34 +33,34 @@
<div class="row justify-content-center mb-4">
<div class="col-lg-10">
<div class="d-flex flex-wrap gap-2 justify-content-center">
<button class="btn btn-danger category-btn active" data-category="all">
<button class="btn btn-primary category-btn active" data-category="all">
<i class="bi bi-search me-2"></i>All
</button>
<button class="btn btn-outline-danger category-btn" data-category="sports-clubs">
<button class="btn btn-outline-primary category-btn" data-category="sports-clubs">
<i class="bi bi-trophy me-2"></i>Sports Clubs
</button>
<button class="btn btn-outline-danger category-btn" data-category="personal-trainers">
<button class="btn btn-outline-primary category-btn" data-category="personal-trainers">
<i class="bi bi-person me-2"></i>Personal Trainers
</button>
<button class="btn btn-outline-danger category-btn" data-category="events">
<button class="btn btn-outline-primary category-btn" data-category="events">
<i class="bi bi-calendar-event me-2"></i>Events
</button>
<button class="btn btn-outline-danger category-btn" data-category="nutrition-clinic">
<button class="btn btn-outline-primary category-btn" data-category="nutrition-clinic">
<i class="bi bi-apple me-2"></i>Nutrition Clinic
</button>
<button class="btn btn-outline-danger category-btn" data-category="physiotherapy-clinics">
<button class="btn btn-outline-primary category-btn" data-category="physiotherapy-clinics">
<i class="bi bi-activity me-2"></i>Physiotherapy Clinics
</button>
<button class="btn btn-outline-danger category-btn" data-category="sports-shops">
<button class="btn btn-outline-primary category-btn" data-category="sports-shops">
<i class="bi bi-bag me-2"></i>Sports Shops
</button>
<button class="btn btn-outline-danger category-btn" data-category="venues">
<i class="bi bi-building me-2"></i>Venues
<button class="btn btn-outline-primary category-btn" data-category="venues">
<i class="bi bi-building-fill me-2"></i>Venues
</button>
<button class="btn btn-outline-danger category-btn" data-category="supplements">
<button class="btn btn-outline-primary category-btn" data-category="supplements">
<i class="bi bi-box me-2"></i>Supplements
</button>
<button class="btn btn-outline-danger category-btn" data-category="food-plans">
<button class="btn btn-outline-primary category-btn" data-category="food-plans">
<i class="bi bi-egg-fried me-2"></i>Food Plans
</button>
</div>
@@ -76,7 +76,7 @@
<!-- Loading Spinner -->
<div id="loadingSpinner" class="text-center py-5">
<div class="spinner-border text-danger" role="status">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<p class="mt-3 text-muted">Finding what's near you...</p>
@@ -88,6 +88,8 @@
<div class="row g-4" id="clubsContainer">
<!-- Club cards will be inserted here -->
</div>
</div>
<div class="col-12 d-flex justify-content-center">
<div id="noResults" class="d-flex flex-column align-items-center justify-content-center text-center" style="display: none; min-height: 400px;">
<i class="bi bi-inbox" style="font-size: 4rem; color: #dee2e6;"></i>
<h4 class="mt-3 text-muted">No Results Found</h4>
@@ -116,7 +118,7 @@
<i class="bi bi-geo-alt-fill me-1"></i>
<span id="modalLocationCoordinates">Drag the marker to set your location</span>
</small>
<button type="button" class="btn btn-danger" id="applyLocationBtn">
<button type="button" class="btn btn-primary" id="applyLocationBtn">
<i class="bi bi-check-circle me-2"></i>Apply Location
</button>
</div>
@@ -146,7 +148,7 @@
.category-btn.active {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
box-shadow: 0 4px 8px hsl(var(--primary) / 0.3);
}
.club-card {
@@ -171,7 +173,7 @@
position: absolute;
top: 10px;
right: 10px;
background: #dc3545;
background: #0d6efd;
color: white;
padding: 0.25rem 0.75rem;
border-radius: 20px;
@@ -180,7 +182,7 @@
}
.stat-box {
background: #f8f9fa;
background: hsl(var(--muted));
border-radius: 8px;
padding: 0.75rem;
text-align: center;
@@ -188,18 +190,18 @@
.stat-box i {
font-size: 1.25rem;
color: #dc3545;
color: hsl(var(--primary));
}
.stat-box .stat-number {
font-size: 1.25rem;
font-weight: 700;
color: #212529;
color: hsl(var(--foreground));
}
.stat-box .stat-label {
font-size: 0.75rem;
color: #6c757d;
color: hsl(var(--muted-foreground));
}
/* Pulsing animation for location marker */
@@ -220,6 +222,28 @@
.pulse-marker {
animation: pulse 2s ease-in-out infinite;
color: #0d6efd;
}
#currentLocation {
font-size: 1.2rem;
}
.input-group.rounded-pill {
overflow: hidden;
}
.input-group.rounded-pill .input-group-text {
border-radius: 50rem 0 0 50rem !important;
}
.input-group.rounded-pill .form-control {
border-radius: 0;
}
.form-control:focus {
border-color: #ced4da !important;
box-shadow: none !important;
}
</style>
@endpush
@@ -254,11 +278,11 @@ document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.category-btn').forEach(btn => {
btn.addEventListener('click', function() {
document.querySelectorAll('.category-btn').forEach(b => {
b.classList.remove('active', 'btn-danger');
b.classList.add('btn-outline-danger');
b.classList.remove('active', 'btn-primary');
b.classList.add('btn-outline-primary');
});
this.classList.remove('btn-outline-danger');
this.classList.add('active', 'btn-danger');
this.classList.remove('btn-outline-primary');
this.classList.add('active', 'btn-primary');
currentCategory = this.dataset.category;
filterClubs();
@@ -338,8 +362,8 @@ function startWatchingLocation() {
// Update location display
function updateLocationDisplay(lat, lng) {
document.getElementById('currentLocation').textContent =
`${lat.toFixed(4)}, ${lng.toFixed(4)}`;
document.getElementById('currentLocation').innerHTML =
`<i class="bi bi-geo-alt-fill me-1 fs-5"></i>${lat.toFixed(4)}, ${lng.toFixed(4)}`;
document.getElementById('modalLocationCoordinates').textContent =
`Latitude: ${lat.toFixed(6)}, Longitude: ${lng.toFixed(6)}`;
}
@@ -350,7 +374,7 @@ function initMap(lat, lng) {
map.remove();
}
map = L.map('map').setView([lat, lng], 13);
map = L.map('map', { attributionControl: false }).setView([lat, lng], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; OpenStreetMap contributors',
@@ -478,10 +502,10 @@ function displayClubs(clubs) {
</div>
<div class="d-grid gap-2">
<button class="btn btn-danger">
<button class="btn btn-primary">
<i class="bi bi-person-plus me-2"></i>Join Club
</button>
<button class="btn btn-outline-danger">View Details</button>
<button class="btn btn-outline-primary">View Details</button>
</div>
</div>
</div>
resources/views/layouts/app.blade.php
+133 -13
View File
@@ -26,10 +26,130 @@
<!-- Custom Styles -->
<style>
:root {
/* Base Colors */
--background: 220 15% 97%;
--foreground: 215 25% 27%;
--card: 0 0% 100%;
--card-foreground: 215 25% 27%;
/* Primary - Soft Purple */
--primary: 250 60% 70%;
--primary-foreground: 0 0% 100%;
--primary-hover: 250 60% 65%;
/* Secondary - Soft Sage Green */
--secondary: 140 30% 75%;
--secondary-foreground: 140 45% 25%;
/* Success - Soft Mint */
--success: 150 40% 70%;
--success-foreground: 150 45% 20%;
/* Warning - Soft Peach */
--warning: 35 60% 80%;
--warning-foreground: 35 60% 30%;
/* Info - Soft Sky Blue */
--info: 200 50% 75%;
--info-foreground: 200 60% 25%;
--muted: 220 15% 94%;
--muted-foreground: 215 15% 50%;
--accent: 250 60% 92%;
--accent-foreground: 250 60% 30%;
--destructive: 0 50% 75%;
--destructive-foreground: 0 0% 100%;
--border: 220 15% 88%;
--input: 220 15% 92%;
--ring: 250 60% 70%;
--radius: 0.75rem;
/* Sidebar */
--sidebar-background: 250 25% 96%;
--sidebar-foreground: 215 25% 35%;
--sidebar-primary: 250 60% 70%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 250 25% 90%;
--sidebar-accent-foreground: 215 25% 40%;
--sidebar-border: 250 20% 85%;
--sidebar-ring: 250 60% 70%;
/* Gradients */
--gradient-primary: linear-gradient(135deg, hsl(250 60% 75%), hsl(250 60% 65%));
--gradient-secondary: linear-gradient(135deg, hsl(140 30% 80%), hsl(140 30% 70%));
--gradient-sidebar: linear-gradient(180deg, hsl(250 25% 98%), hsl(250 25% 94%));
--gradient-success: linear-gradient(135deg, hsl(150 40% 75%), hsl(150 40% 65%));
--gradient-warning: linear-gradient(135deg, hsl(35 60% 85%), hsl(35 60% 75%));
--gradient-info: linear-gradient(135deg, hsl(200 50% 80%), hsl(200 50% 70%));
/* Shadows */
--shadow-card: 0 2px 12px hsl(250 20% 70% / 0.08);
--shadow-elevated: 0 8px 30px hsl(250 20% 60% / 0.12);
--shadow-primary: 0 4px 20px hsl(250 60% 70% / 0.25);
/* Bootstrap Overrides */
--bs-primary: hsl(var(--primary));
--bs-secondary: hsl(var(--secondary));
--bs-success: hsl(var(--success));
--bs-info: hsl(var(--info));
--bs-warning: hsl(var(--warning));
--bs-danger: hsl(var(--destructive));
--bs-light: hsl(var(--muted));
--bs-dark: hsl(var(--foreground));
--bs-white: hsl(var(--card));
--bs-body-color: hsl(var(--foreground));
--bs-body-bg: hsl(var(--background));
}
body {
font-family: 'Inter', sans-serif;
background-color: #f8f9fa;
background-color: hsl(var(--background));
}
/* Theme Overrides */
.text-primary { color: hsl(var(--primary)) !important; }
.text-secondary { color: hsl(var(--secondary)) !important; }
.text-success { color: hsl(var(--success)) !important; }
.text-info { color: hsl(var(--info)) !important; }
.text-warning { color: hsl(var(--warning)) !important; }
.text-danger { color: hsl(var(--destructive)) !important; }
.text-muted { color: hsl(var(--muted-foreground)) !important; }
.bg-primary { background-color: hsl(var(--primary)) !important; }
.bg-secondary { background-color: hsl(var(--secondary)) !important; }
.bg-success { background-color: hsl(var(--success)) !important; }
.bg-info { background-color: hsl(var(--info)) !important; }
.bg-warning { background-color: hsl(var(--warning)) !important; }
.bg-danger { background-color: hsl(var(--destructive)) !important; }
.bg-light { background-color: hsl(var(--muted)) !important; }
.bg-white { background-color: #ffffff !important; }
.btn-primary {
background-color: hsl(var(--primary)) !important;
border-color: hsl(var(--primary)) !important;
}
.btn-primary:hover {
background-color: hsl(var(--primary-hover)) !important;
border-color: hsl(var(--primary-hover)) !important;
}
.btn-outline-primary {
color: hsl(var(--primary)) !important;
border-color: hsl(var(--primary)) !important;
}
.btn-outline-primary:hover {
background-color: hsl(var(--primary)) !important;
border-color: hsl(var(--primary)) !important;
}
.border { border-color: hsl(var(--border)) !important; }
.border-primary { border-color: hsl(var(--primary)) !important; }
.card { background-color: #ffffff !important; }
.navbar-brand {
font-weight: 600;
}
@@ -50,12 +170,12 @@
font-weight: 500;
}
.btn-primary {
background-color: #0d6efd;
border-color: #0d6efd;
background-color: hsl(var(--primary));
border-color: hsl(var(--primary));
}
.btn-primary:hover {
background-color: #0b5ed7;
border-color: #0a58ca;
background-color: hsl(var(--primary-hover));
border-color: hsl(var(--primary-hover));
}
.user-avatar {
width: 32px;
@@ -68,8 +188,8 @@
width: 32px;
height: 32px;
border-radius: 50%;
background-color: #0d6efd;
color: white;
background-color: hsl(var(--primary));
color: hsl(var(--primary-foreground));
display: inline-flex;
align-items: center;
justify-content: center;
@@ -94,8 +214,8 @@
position: absolute;
top: 0;
right: 0;
background-color: #dc3545;
color: white;
background-color: hsl(var(--destructive));
color: hsl(var(--destructive-foreground));
border-radius: 50%;
width: 18px;
height: 18px;
@@ -112,24 +232,24 @@
}
.notification-item {
padding: 0.75rem 1rem;
border-bottom: 1px solid #f0f0f0;
border-bottom: 1px solid hsl(var(--border));
transition: background-color 0.2s;
}
.notification-item:hover {
background-color: #f8f9fa;
background-color: hsl(var(--muted));
}
.notification-item:last-child {
border-bottom: none;
}
.notification-item.unread {
background-color: #f0f7ff;
background-color: hsl(var(--accent));
}
</style>
@stack('styles')
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<nav class="navbar navbar-expand-md navbar-light bg-light shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ Auth::check() ? route('clubs.explore') : url('/') }}">
<img src="{{ asset('images/logo.png') }}" alt="TAKEONE" height="40">