feat: makieta mobilna pilota TravelLeader z profilem, opiniami i kalendarzem
This commit is contained in:
oskarn
@@ -0,0 +1,215 @@
|
||||
<?php
|
||||
$enablePrototypeComments = true;
|
||||
$pageTitle = 'TravelLeader - Mój Profil Pilota';
|
||||
include 'header.php';
|
||||
|
||||
// Rok rozpoczęcia działalności jako pilot (z bazy danych / edycji)
|
||||
$startYear = 2019;
|
||||
$currentYear = (int)date('Y');
|
||||
$experienceYears = max(1, $currentYear - $startYear);
|
||||
?>
|
||||
|
||||
<div class="app-content">
|
||||
|
||||
<!-- Pasek nagłówka profilu z akcjami -->
|
||||
<!-- Pasek nagłówka profilu z akcjami i statusem bazy -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div>
|
||||
<div class="d-flex align-items-center gap-2 mb-1">
|
||||
<h5 class="fw-bold mb-0" style="color: var(--dark-navy);">Mój Profil</h5>
|
||||
<span class="d-inline-flex align-items-center gap-1 text-success fw-bold" style="font-size: 0.7rem; background: #ecfdf5; padding: 2px 8px; border-radius: 99px; border: 1px solid #a7f3d0;">
|
||||
<span style="width: 6px; height: 6px; background-color: #10b981; border-radius: 50%;"></span> Aktywny w bazie
|
||||
</span>
|
||||
</div>
|
||||
<small class="text-muted" style="font-size: 0.74rem;">Wizytówka widoczna dla biur podróży</small>
|
||||
</div>
|
||||
<a href="profile-edit.php" class="btn btn-sm btn-primary-custom py-2 px-3" style="width: auto; font-size: 0.78rem;">
|
||||
<i class='bx bx-edit-alt'></i> Edytuj
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Karta główna profilu (Hero - w 100% realne informacje pilota) -->
|
||||
<div class="profile-hero">
|
||||
<div class="profile-avatar-container">
|
||||
<div class="profile-avatar-img d-flex align-items-center justify-content-center" style="background: linear-gradient(135deg, #4f46e5, #7c3aed); color: white; font-size: 2.2rem; font-weight: 800;">
|
||||
OK
|
||||
</div>
|
||||
<div class="profile-verified-badge" title="Zweryfikowany pilot TravelLeader">
|
||||
<i class='bx bx-check'></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="profile-name">Oskar Kaczmarek</h4>
|
||||
<div class="profile-tagline">
|
||||
<i class='bx bx-compass text-primary'></i> Licencjonowany Pilot Wycieczek & Przewodnik
|
||||
</div>
|
||||
|
||||
<!-- Średnia ocen i liczba opinii od biur podróży -> przejście do nowego widoku profile-reviews.php -->
|
||||
<a href="profile-reviews.php" class="rating-badge-pill text-decoration-none" title="Zobacz opinie i referencje biur">
|
||||
<i class='bx bxs-star'></i>
|
||||
<span>4.9 / 5.0</span>
|
||||
<span class="text-muted fw-normal">(18 opinii od 6 biur)</span>
|
||||
<i class='bx bx-chevron-right text-muted'></i>
|
||||
</a>
|
||||
|
||||
<!-- Szybkie statystyki (staż wyliczany automatycznie z roku rozpoczęcia) -->
|
||||
<div class="row g-2 mt-2 pt-2 border-top">
|
||||
<div class="col-4">
|
||||
<div class="fw-bold" style="font-size: 1.05rem; color: var(--dark-navy);"><?= $experienceYears ?> lat</div>
|
||||
<div class="text-muted" style="font-size: 0.7rem;">Staż (od <?= $startYear ?>)</div>
|
||||
</div>
|
||||
<div class="col-4 border-start border-end">
|
||||
<div class="fw-bold" style="font-size: 1.05rem; color: var(--primary);">42</div>
|
||||
<div class="text-muted" style="font-size: 0.7rem;">Zrealizowanych</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="fw-bold" style="font-size: 1.05rem; color: #10b981;">100%</div>
|
||||
<div class="text-muted" style="font-size: 0.7rem;">Dyspozycyjność</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sekcja: Autoprezentacja / O mnie -->
|
||||
<div class="section-card">
|
||||
<div class="section-title">
|
||||
<span><i class='bx bx-user-voice text-primary me-1'></i> O mnie</span>
|
||||
<a href="profile-edit.php#bio" class="text-muted" style="font-size: 0.75rem;"><i class='bx bx-pencil'></i></a>
|
||||
</div>
|
||||
<p class="mb-0 text-secondary" style="font-size: 0.84rem; line-height: 1.5;">
|
||||
Pasjonat kultury śródziemnomorskiej z wykształceniem historycznym. Od <?= $startYear ?> roku z sukcesami pilotuję wycieczki objazdowe po Włoszech, Hiszpanii i Bałkanach. Wyróżnia mnie opanowanie w sytuacjach kryzysowych, doskonały kontakt z grupą oraz płynna znajomość języka włoskiego i angielskiego.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Sekcja: Wideo-Wizytówka & Multimedia -->
|
||||
<div class="section-card">
|
||||
<div class="section-title">
|
||||
<span><i class='bx bx-video text-primary me-1'></i> Wideo-Wizytówka i Zdjęcia</span>
|
||||
<span class="badge bg-label-primary rounded-pill" style="font-size: 0.7rem;">Wideo + 4 foto</span>
|
||||
</div>
|
||||
|
||||
<!-- Odtwarzacz wideo autoprezentacji -->
|
||||
<div class="video-card-preview" onclick="alert('Odtwarzanie wideo-autoprezentacji pilota (1:15 min). Biuro podróży może posłuchać głosu i prezencji pilota przed wysłaniem zlecenia.');">
|
||||
<div class="video-play-btn">
|
||||
<i class='bx bx-play' style="margin-left: 3px;"></i>
|
||||
</div>
|
||||
<div class="fw-bold" style="font-size: 0.85rem;">Autoprezentacja dla biur (1:15 min)</div>
|
||||
<small style="font-size: 0.72rem; opacity: 0.8;">Kliknij, aby odtworzyć próbkę</small>
|
||||
</div>
|
||||
|
||||
<!-- Siatka zdjęć z tras -->
|
||||
<div class="media-grid mt-2">
|
||||
<div class="media-thumbnail d-flex align-items-center justify-content-center" style="background: linear-gradient(135deg, #60a5fa, #3b82f6); color: white;">
|
||||
<i class='bx bx-landscape fs-2'></i>
|
||||
</div>
|
||||
<div class="media-thumbnail d-flex align-items-center justify-content-center" style="background: linear-gradient(135deg, #f59e0b, #d97706); color: white;">
|
||||
<i class='bx bx-camera fs-2'></i>
|
||||
</div>
|
||||
<div class="media-thumbnail d-flex align-items-center justify-content-center" style="background: linear-gradient(135deg, #10b981, #059669); color: white;">
|
||||
<i class='bx bx-group fs-2'></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sekcja: Obsługiwane Kraje i Destynacje -->
|
||||
<div class="section-card">
|
||||
<div class="section-title">
|
||||
<span><i class='bx bx-globe text-primary me-1'></i> Kraje & Destynacje</span>
|
||||
<a href="profile-edit.php#destynacje" class="text-muted" style="font-size: 0.75rem;"><i class='bx bx-pencil'></i></a>
|
||||
</div>
|
||||
<div class="d-flex flex-wrap">
|
||||
<span class="chip-tag primary">🇮🇹 Włochy (Ekspert)</span>
|
||||
<span class="chip-tag primary">🇬🇷 Grecja & Cyklady</span>
|
||||
<span class="chip-tag primary">🇪🇸 Hiszpania & Andaluzja</span>
|
||||
<span class="chip-tag">🇭🇷 Chorwacja</span>
|
||||
<span class="chip-tag">🇳🇴 Norwegia (Fiordy)</span>
|
||||
<span class="chip-tag">🇦🇹 Austria</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sekcja: Języki Obce -->
|
||||
<div class="section-card">
|
||||
<div class="section-title">
|
||||
<span><i class='bx bx-message-dots text-primary me-1'></i> Języki</span>
|
||||
<a href="profile-edit.php#jezyki" class="text-muted" style="font-size: 0.75rem;"><i class='bx bx-pencil'></i></a>
|
||||
</div>
|
||||
<div class="d-flex flex-column gap-2">
|
||||
<div class="d-flex justify-content-between align-items-center p-2 rounded-3" style="background: #f8f9fd;">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span style="font-size: 1.1rem;">🇵🇱</span>
|
||||
<span class="fw-bold" style="font-size: 0.84rem;">Polski</span>
|
||||
</div>
|
||||
<span class="badge bg-light text-dark" style="font-size: 0.72rem;">Ojczysty</span>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center p-2 rounded-3" style="background: #f8f9fd;">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span style="font-size: 1.1rem;">🇬🇧</span>
|
||||
<span class="fw-bold" style="font-size: 0.84rem;">Angielski</span>
|
||||
</div>
|
||||
<span class="badge bg-primary-subtle text-primary" style="font-size: 0.72rem;">C1 (Biegły)</span>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center p-2 rounded-3" style="background: #f8f9fd;">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span style="font-size: 1.1rem;">🇮🇹</span>
|
||||
<span class="fw-bold" style="font-size: 0.84rem;">Włoski</span>
|
||||
</div>
|
||||
<span class="badge bg-primary-subtle text-primary" style="font-size: 0.72rem;">B2 (Płynny)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sekcja: Tagi & Specjalizacje -->
|
||||
<div class="section-card">
|
||||
<div class="section-title">
|
||||
<span><i class='bx bx-purchase-tag-alt text-primary me-1'></i> Specjalizacje & Tagi</span>
|
||||
<a href="profile-edit.php#tagi" class="text-muted" style="font-size: 0.75rem;"><i class='bx bx-pencil'></i></a>
|
||||
</div>
|
||||
<div class="d-flex flex-wrap">
|
||||
<span class="chip-tag"><i class='bx bx-bus'></i> Wycieczki objazdowe</span>
|
||||
<span class="chip-tag"><i class='bx bx-walk'></i> Trekking & góry</span>
|
||||
<span class="chip-tag"><i class='bx bx-buildings'></i> Przewodnik miejski (Rzym, Florencja)</span>
|
||||
<span class="chip-tag"><i class='bx bx-book-open'></i> Grupy młodzieżowe / szkolne</span>
|
||||
<span class="chip-tag"><i class='bx bx-diamond'></i> Wyjazdy VIP / Incentive</span>
|
||||
<span class="chip-tag"><i class='bx bx-wine'></i> Enoturystyka & kulinaria</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sekcja: Kursy & Certyfikaty -->
|
||||
<div class="section-card">
|
||||
<div class="section-title">
|
||||
<span><i class='bx bx-award text-primary me-1'></i> Certyfikaty i Szkolenia</span>
|
||||
<a href="courses.php" class="text-primary fw-bold" style="font-size: 0.75rem;">Zobacz ofertę szkoleń →</a>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center gap-3 p-2 rounded-3 mb-2" style="background: #f8f9fd;">
|
||||
<div class="d-flex align-items-center justify-content-center rounded-circle bg-success-subtle text-success" style="width: 36px; height: 36px;">
|
||||
<i class='bx bx-badge-check fs-4'></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div class="fw-bold" style="font-size: 0.84rem; color: var(--dark-navy);">Superpilot Academy 2026</div>
|
||||
<small class="text-muted" style="font-size: 0.72rem;">Certyfikat Pilotażu Europy Południowej</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center gap-3 p-2 rounded-3" style="background: #f8f9fd;">
|
||||
<div class="d-flex align-items-center justify-content-center rounded-circle bg-primary-subtle text-primary" style="width: 36px; height: 36px;">
|
||||
<i class='bx bx-plus-medical fs-5'></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div class="fw-bold" style="font-size: 0.84rem; color: var(--dark-navy);">Kwalifikowana Pierwsza Pomoc (KPP)</div>
|
||||
<small class="text-muted" style="font-size: 0.72rem;">Ważny do: 04.2028</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Przycisk edycji na dole -->
|
||||
<div class="mb-4">
|
||||
<a href="profile-edit.php" class="btn-primary-custom">
|
||||
<i class='bx bx-edit'></i> Przejdź do edycji danych profilu
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div><!-- /.app-content -->
|
||||
|
||||
<?php include 'footer.php'; ?>
|
||||
Reference in New Issue
Block a user