Baza pilotow #1
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,188 @@
|
||||
<?php
|
||||
$enablePrototypeComments = true;
|
||||
$pageTitle = 'TravelLeader - Kalendarz Dostępności';
|
||||
include 'header.php';
|
||||
?>
|
||||
|
||||
<div class="app-content">
|
||||
|
||||
<!-- Nagłówek widoku dostępności -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div>
|
||||
<h5 class="fw-bold mb-0" style="color: var(--dark-navy);">Dostępność Pilota</h5>
|
||||
<small class="text-muted" style="font-size: 0.78rem;">Zarządzaj terminami dla biur podróży</small>
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm btn-primary-custom py-1 px-3" style="width: auto; font-size: 0.8rem;" data-bs-toggle="modal" data-bs-target="#addUnavailableModal">
|
||||
<i class='bx bx-plus'></i> Dodaj blokadę
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Główna karta kalendarza -->
|
||||
<div class="section-card">
|
||||
<div class="calendar-month-header">
|
||||
<button class="btn btn-sm btn-light rounded-circle p-2 d-flex align-items-center"><i class='bx bx-chevron-left fs-5'></i></button>
|
||||
<h6 class="fw-bold mb-0" style="color: var(--dark-navy); font-size: 1rem;">Wrzesień 2027</h6>
|
||||
<button class="btn btn-sm btn-light rounded-circle p-2 d-flex align-items-center"><i class='bx bx-chevron-right fs-5'></i></button>
|
||||
</div>
|
||||
|
||||
<!-- Siatka kalendarza -->
|
||||
<div class="calendar-grid mb-2">
|
||||
<div class="calendar-day-header">Pn</div>
|
||||
<div class="calendar-day-header">Wt</div>
|
||||
<div class="calendar-day-header">Śr</div>
|
||||
<div class="calendar-day-header">Cz</div>
|
||||
<div class="calendar-day-header">Pt</div>
|
||||
<div class="calendar-day-header">Sb</div>
|
||||
<div class="calendar-day-header">Nd</div>
|
||||
|
||||
<!-- Dni poprzedniego miesiąca -->
|
||||
<div class="calendar-day-cell other-month">30</div>
|
||||
<div class="calendar-day-cell other-month">31</div>
|
||||
|
||||
<!-- Dni września -->
|
||||
<div class="calendar-day-cell blocked-day" title="Urlop prywatny">1</div>
|
||||
<div class="calendar-day-cell blocked-day" title="Urlop prywatny">2</div>
|
||||
<div class="calendar-day-cell blocked-day" title="Urlop prywatny">3</div>
|
||||
<div class="calendar-day-cell blocked-day" title="Urlop prywatny">4</div>
|
||||
<div class="calendar-day-cell free-day">5 <span class="calendar-day-dot bg-success"></span></div>
|
||||
|
||||
<div class="calendar-day-cell free-day">6 <span class="calendar-day-dot bg-success"></span></div>
|
||||
<div class="calendar-day-cell free-day">7 <span class="calendar-day-dot bg-success"></span></div>
|
||||
<div class="calendar-day-cell free-day">8 <span class="calendar-day-dot bg-success"></span></div>
|
||||
<div class="calendar-day-cell free-day">9 <span class="calendar-day-dot bg-success"></span></div>
|
||||
<div class="calendar-day-cell free-day">10 <span class="calendar-day-dot bg-success"></span></div>
|
||||
<div class="calendar-day-cell free-day">11 <span class="calendar-day-dot bg-success"></span></div>
|
||||
<div class="calendar-day-cell free-day">12 <span class="calendar-day-dot bg-success"></span></div>
|
||||
|
||||
<div class="calendar-day-cell free-day">13 <span class="calendar-day-dot bg-success"></span></div>
|
||||
<div class="calendar-day-cell free-day">14 <span class="calendar-day-dot bg-success"></span></div>
|
||||
<div class="calendar-day-cell free-day">15 <span class="calendar-day-dot bg-success"></span></div>
|
||||
|
||||
<!-- Wycieczka z systemu: 16-24.09.2027 -->
|
||||
<div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">16 <span class="calendar-day-dot bg-primary"></span></div>
|
||||
<div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">17 <span class="calendar-day-dot bg-primary"></span></div>
|
||||
<div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">18 <span class="calendar-day-dot bg-primary"></span></div>
|
||||
<div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">19 <span class="calendar-day-dot bg-primary"></span></div>
|
||||
|
||||
<div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">20 <span class="calendar-day-dot bg-primary"></span></div>
|
||||
<div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">21 <span class="calendar-day-dot bg-primary"></span></div>
|
||||
<div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">22 <span class="calendar-day-dot bg-primary"></span></div>
|
||||
<div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">23 <span class="calendar-day-dot bg-primary"></span></div>
|
||||
<div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">24 <span class="calendar-day-dot bg-primary"></span></div>
|
||||
|
||||
<div class="calendar-day-cell free-day">25 <span class="calendar-day-dot bg-success"></span></div>
|
||||
<div class="calendar-day-cell free-day">26 <span class="calendar-day-dot bg-success"></span></div>
|
||||
|
||||
<div class="calendar-day-cell free-day">27 <span class="calendar-day-dot bg-success"></span></div>
|
||||
<div class="calendar-day-cell free-day">28 <span class="calendar-day-dot bg-success"></span></div>
|
||||
<div class="calendar-day-cell free-day">29 <span class="calendar-day-dot bg-success"></span></div>
|
||||
<div class="calendar-day-cell free-day">30 <span class="calendar-day-dot bg-success"></span></div>
|
||||
<div class="calendar-day-cell other-month">1</div>
|
||||
<div class="calendar-day-cell other-month">2</div>
|
||||
<div class="calendar-day-cell other-month">3</div>
|
||||
</div>
|
||||
|
||||
<!-- Legenda -->
|
||||
<div class="calendar-legend">
|
||||
<div class="legend-item">
|
||||
<div class="legend-color-box" style="background-color: var(--primary);"></div>
|
||||
<span>Wycieczka potwierdzona</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color-box" style="background-color: #ef4444;"></div>
|
||||
<span>Niedostępny / Urlop</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color-box" style="background-color: #22c55e;"></div>
|
||||
<span>Dostępny dla biur</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lista wpisów w wybranym miesiącu -->
|
||||
<h6 class="fw-bold mb-2 mt-3" style="color: var(--dark-navy); font-size: 0.9rem;">Wydarzenia we Wrześniu 2027</h6>
|
||||
|
||||
<!-- Wycieczka potwierdzona -->
|
||||
<div class="card border-0 rounded-4 p-3 mb-2 shadow-sm" style="background: #ffffff; border-left: 4px solid var(--primary) !important;">
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
<span class="badge mb-1" style="background: #eff0fe; color: var(--primary); font-size: 0.72rem;">Wycieczka przypisana</span>
|
||||
<h6 class="fw-bold mb-1" style="font-size: 0.92rem; color: var(--dark-navy);">12 oskar prod (Włochy)</h6>
|
||||
<small class="text-muted d-block" style="font-size: 0.76rem;"><i class='bx bx-time-five'></i> 16 - 24 Września 2027 (9 dni)</small>
|
||||
</div>
|
||||
<a href="index.php" class="btn btn-sm btn-outline-primary py-1 px-2" style="font-size: 0.75rem;">Wycieczka ></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Prywatna niedostępność -->
|
||||
<div class="card border-0 rounded-4 p-3 mb-3 shadow-sm" style="background: #ffffff; border-left: 4px solid #ef4444 !important;">
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
<span class="badge mb-1" style="background: #fee2e2; color: #ef4444; font-size: 0.72rem;">Niedostępność pilota</span>
|
||||
<h6 class="fw-bold mb-1" style="font-size: 0.92rem; color: var(--dark-navy);">Urlop prywatny / sprawy rodzinne</h6>
|
||||
<small class="text-muted d-block" style="font-size: 0.76rem;"><i class='bx bx-time-five'></i> 01 - 04 Września 2027 (4 dni)</small>
|
||||
</div>
|
||||
<button class="btn btn-sm btn-outline-danger py-1 px-2" style="font-size: 0.75rem;" onclick="confirm('Czy chcesz usunąć tę blokadę terminu?')"><i class='bx bx-trash'></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Informacja o integracji z bazą biur -->
|
||||
<div class="p-3 rounded-4" style="background-color: #f1f3fa;">
|
||||
<div class="d-flex align-items-center gap-2 mb-1">
|
||||
<i class='bx bx-info-circle text-primary fs-5'></i>
|
||||
<span class="fw-bold" style="font-size: 0.82rem; color: var(--dark-navy);">Jak działa to dla biur podróży?</span>
|
||||
</div>
|
||||
<p class="text-muted mb-0" style="font-size: 0.75rem; line-height: 1.4;">
|
||||
Wyszukiwarka w aplikacji webowej pozwala pracownikowi biura wybrać np. „Termin: 05-15 Wrz 2027 + Kraj: Włochy”. Twój profil pojawi się na szczycie wyników, ponieważ zaznaczyłeś te dni jako wolne!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div><!-- /.app-content -->
|
||||
|
||||
<!-- Modal dodawania niedostępności -->
|
||||
<div class="modal fade" id="addUnavailableModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content rounded-4 border-0">
|
||||
<div class="modal-header border-bottom">
|
||||
<h6 class="modal-title fw-bold" style="color: var(--dark-navy);">Zgłoś niedostępność / Urlop</h6>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zamknij"></button>
|
||||
</div>
|
||||
<div class="modal-body p-3">
|
||||
<div class="mb-3">
|
||||
<label class="form-label-custom">Powód niedostępności</label>
|
||||
<select class="form-select form-control-custom">
|
||||
<option selected>Urlop prywatny</option>
|
||||
<option>Zlecenie poza systemem</option>
|
||||
<option>Szkolenie / Egzamin</option>
|
||||
<option>Sprawy zdrowotne</option>
|
||||
<option>Inny powód</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="row g-2 mb-3">
|
||||
<div class="col-6">
|
||||
<label class="form-label-custom">Data od</label>
|
||||
<input type="date" class="form-control-custom" value="2027-10-01">
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="form-label-custom">Data do</label>
|
||||
<input type="date" class="form-control-custom" value="2027-10-08">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label class="form-label-custom">Notatka prywatna (opcjonalnie)</label>
|
||||
<textarea class="form-control-custom" rows="2" placeholder="Widoczna tylko dla Ciebie..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer border-top p-2">
|
||||
<button type="button" class="btn btn-secondary-custom py-2 flex-grow-1" data-bs-dismiss="modal">Anuluj</button>
|
||||
<button type="button" class="btn-primary-custom py-2 flex-grow-1" data-bs-dismiss="modal" onclick="alert('Pomyślnie zablokowano termin w kalendarzu. Biura nie będą wysyłać zapytań na ten okres.');">
|
||||
Zapisz termin
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php include 'footer.php'; ?>
|
||||
@@ -0,0 +1,174 @@
|
||||
<?php
|
||||
$enablePrototypeComments = true;
|
||||
$pageTitle = 'TravelLeader - Szkolenia i Certyfikaty';
|
||||
include 'header.php';
|
||||
?>
|
||||
|
||||
<div class="app-content">
|
||||
|
||||
<!-- Nagłówek szkoleń (Czysty, minimalistyczny, bez zbędnych odznak) -->
|
||||
<div class="mb-3">
|
||||
<h5 class="fw-bold mb-0" style="color: var(--dark-navy);">Szkolenia & Certyfikaty</h5>
|
||||
<small class="text-muted" style="font-size: 0.76rem;">Kursy podnoszące rangę profilu w bazie biur podróży</small>
|
||||
</div>
|
||||
|
||||
<!-- Przełącznik zakładek (Segmented control) -->
|
||||
<div class="d-flex p-1 rounded-3 mb-3" style="background: #eef1f8;">
|
||||
<button type="button" id="tabCoursesBtn" class="btn btn-sm flex-fill fw-bold rounded-2 py-1" style="font-size: 0.78rem; background: white; color: var(--primary); box-shadow: 0 1px 4px rgba(0,0,0,0.06);" onclick="switchCourseTab('courses');">
|
||||
Dostępne kursy (3)
|
||||
</button>
|
||||
<button type="button" id="tabCertsBtn" class="btn btn-sm flex-fill fw-bold rounded-2 py-1 text-muted" style="font-size: 0.78rem;" onclick="switchCourseTab('certs');">
|
||||
Moje certyfikaty (2)
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- SEKCJA 1: Dostępne kursy (Czyste karty, bez wielopoziomowych pięter) -->
|
||||
<div id="sectionCourses">
|
||||
|
||||
<!-- Kurs 1 -->
|
||||
<div class="section-card mb-2 p-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||
<span class="badge" style="background: #eff0fe; color: var(--primary); font-size: 0.68rem; font-weight: 700;">
|
||||
WŁOCHY
|
||||
</span>
|
||||
<span class="fw-bold text-dark" style="font-size: 0.82rem;">199 PLN</span>
|
||||
</div>
|
||||
|
||||
<h6 class="fw-bold mb-1" style="font-size: 0.9rem; color: var(--dark-navy);">
|
||||
Włochy Północne & Dolomity 2027
|
||||
</h6>
|
||||
<p class="text-muted mb-2" style="font-size: 0.75rem; line-height: 1.35;">
|
||||
Prowadzący: Janek. Warsztaty z logistyki autokarowej, stref ZTL i nowych szlaków.
|
||||
</p>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center pt-2 border-top">
|
||||
<small class="text-muted" style="font-size: 0.72rem;">
|
||||
<i class='bx bx-calendar'></i> 24.10 • 4h online
|
||||
</small>
|
||||
<button class="btn btn-sm btn-primary-custom py-1 px-3" style="width: auto; font-size: 0.74rem;" onclick="alert('Zapis na szkolenie przez TravelPay.');">
|
||||
Zapisz się >
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Kurs 2 -->
|
||||
<div class="section-card mb-2 p-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||
<span class="badge bg-warning-subtle text-warning-emphasis" style="font-size: 0.68rem; font-weight: 700;">
|
||||
RAINBOW TOURS
|
||||
</span>
|
||||
<span class="badge bg-success-subtle text-success fw-bold" style="font-size: 0.68rem;">BEZPŁATNE</span>
|
||||
</div>
|
||||
|
||||
<h6 class="fw-bold mb-1" style="font-size: 0.9rem; color: var(--dark-navy);">
|
||||
Standardy obsługi imprez objazdowych
|
||||
</h6>
|
||||
<p class="text-muted mb-2" style="font-size: 0.75rem; line-height: 1.35;">
|
||||
Szkolenie produktowe biura podróży dla pilotów szukających kontraktów na sezon.
|
||||
</p>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center pt-2 border-top">
|
||||
<small class="text-muted" style="font-size: 0.72rem;">
|
||||
<i class='bx bx-video'></i> VOD • 2h
|
||||
</small>
|
||||
<button class="btn btn-sm btn-secondary-custom py-1 px-3" style="width: auto; font-size: 0.74rem;" onclick="alert('Dostęp do materiałów VOD został odblokowany.');">
|
||||
Dołącz >
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Kurs 3 -->
|
||||
<div class="section-card mb-3 p-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||
<span class="badge bg-light text-muted" style="font-size: 0.68rem; font-weight: 700;">
|
||||
PRAWO & PROCEDURY
|
||||
</span>
|
||||
<span class="fw-bold text-dark" style="font-size: 0.82rem;">149 PLN</span>
|
||||
</div>
|
||||
|
||||
<h6 class="fw-bold mb-1" style="font-size: 0.9rem; color: var(--dark-navy);">
|
||||
Prawo w turystyce & reklamacje
|
||||
</h6>
|
||||
<p class="text-muted mb-2" style="font-size: 0.75rem; line-height: 1.35;">
|
||||
Procedury awaryjne, ubezpieczenia i rozwiązywanie trudnych sytuacji z turystami.
|
||||
</p>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center pt-2 border-top">
|
||||
<small class="text-muted" style="font-size: 0.72rem;">
|
||||
<i class='bx bx-calendar'></i> 12.11 • Webinar
|
||||
</small>
|
||||
<button class="btn btn-sm btn-primary-custom py-1 px-3" style="width: auto; font-size: 0.74rem;" onclick="alert('Zapis na webinar.');">
|
||||
Zapisz się >
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- SEKCJA 2: Moje certyfikaty (Ukryta domyślnie, przełączana zakładką) -->
|
||||
<div id="sectionCerts" class="d-none">
|
||||
|
||||
<div class="section-card mb-2 p-3">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<div class="d-flex align-items-center justify-content-center rounded-circle bg-success-subtle text-success" style="width: 38px; height: 38px; flex-shrink: 0;">
|
||||
<i class='bx bx-badge-check fs-4'></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="fw-bold mb-0" style="font-size: 0.86rem; color: var(--dark-navy);">Superpilot: Europa Południowa</h6>
|
||||
<small class="text-muted" style="font-size: 0.72rem;">Weryfikacja TravelLeader • Dodano do profilu</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-card mb-3 p-3">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<div class="d-flex align-items-center justify-content-center rounded-circle bg-primary-subtle text-primary" style="width: 38px; height: 38px; flex-shrink: 0;">
|
||||
<i class='bx bx-plus-medical fs-5'></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="fw-bold mb-0" style="font-size: 0.86rem; color: var(--dark-navy);">Pierwsza Pomoc (KPP)</h6>
|
||||
<small class="text-muted" style="font-size: 0.72rem;">Certyfikat ważny do: Kwiecień 2028</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-3 rounded-3 text-center" style="background: #f8f9fd;">
|
||||
<small class="text-muted" style="font-size: 0.74rem;">
|
||||
Wszystkie zdobyte certyfikaty są automatycznie widoczne dla biur podróży w Twojej wizytówce.
|
||||
</small>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div><!-- /.app-content -->
|
||||
|
||||
<script>
|
||||
function switchCourseTab(tab) {
|
||||
const coursesSection = document.getElementById('sectionCourses');
|
||||
const certsSection = document.getElementById('sectionCerts');
|
||||
const coursesBtn = document.getElementById('tabCoursesBtn');
|
||||
const certsBtn = document.getElementById('tabCertsBtn');
|
||||
|
||||
if (tab === 'courses') {
|
||||
coursesSection.classList.remove('d-none');
|
||||
certsSection.classList.add('d-none');
|
||||
coursesBtn.style.background = 'white';
|
||||
coursesBtn.style.color = 'var(--primary)';
|
||||
coursesBtn.style.boxShadow = '0 1px 4px rgba(0,0,0,0.06)';
|
||||
certsBtn.style.background = 'transparent';
|
||||
certsBtn.style.color = 'var(--text-muted)';
|
||||
certsBtn.style.boxShadow = 'none';
|
||||
} else {
|
||||
coursesSection.classList.add('d-none');
|
||||
certsSection.classList.remove('d-none');
|
||||
certsBtn.style.background = 'white';
|
||||
certsBtn.style.color = 'var(--primary)';
|
||||
certsBtn.style.boxShadow = '0 1px 4px rgba(0,0,0,0.06)';
|
||||
coursesBtn.style.background = 'transparent';
|
||||
coursesBtn.style.color = 'var(--text-muted)';
|
||||
coursesBtn.style.boxShadow = 'none';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<?php include 'footer.php'; ?>
|
||||
@@ -0,0 +1,40 @@
|
||||
<?php
|
||||
$currentPage = basename($_SERVER['PHP_SELF'], '.php');
|
||||
?>
|
||||
<!-- Dolna belka nawigacyjna (Bottom Navigation Bar - zawsze widoczna na dole) -->
|
||||
<nav class="bottom-nav-bar">
|
||||
<a href="index.php" class="bottom-nav-item <?= in_array($currentPage, ['index', 'trip-details']) ? 'active' : '' ?>">
|
||||
<i class='bx <?= in_array($currentPage, ['index', 'trip-details']) ? 'bxs-compass' : 'bx-compass' ?>'></i>
|
||||
<span>Wycieczki</span>
|
||||
</a>
|
||||
|
||||
<a href="availability.php" class="bottom-nav-item <?= $currentPage === 'availability' ? 'active' : '' ?>">
|
||||
<i class='bx <?= $currentPage === 'availability' ? 'bxs-calendar' : 'bx-calendar' ?>'></i>
|
||||
<span>Dostępność</span>
|
||||
</a>
|
||||
|
||||
<a href="courses.php" class="bottom-nav-item <?= $currentPage === 'courses' ? 'active' : '' ?>">
|
||||
<i class='bx <?= $currentPage === 'courses' ? 'bxs-book-open' : 'bx-book-open' ?>'></i>
|
||||
<span>Szkolenia</span>
|
||||
</a>
|
||||
|
||||
<a href="profile.php" class="bottom-nav-item <?= in_array($currentPage, ['profile', 'profile-edit']) ? 'active' : '' ?>">
|
||||
<i class='bx <?= in_array($currentPage, ['profile', 'profile-edit']) ? 'bxs-user-pin' : 'bx-user' ?>'></i>
|
||||
<span>Mój Profil</span>
|
||||
<span class="nav-indicator" title="Profil wymaga uzupełnienia"></span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
</div><!-- /.phone-screen -->
|
||||
</div><!-- /.phone-viewport-wrapper -->
|
||||
|
||||
<!-- Lokalne skrypty Bootstrap (z projektu Magico, bez jsdelivr) -->
|
||||
<script src="../../assets/vendor/js/bootstrap.js"></script>
|
||||
|
||||
<!-- Magico Feedback JS -->
|
||||
<?php if (!empty($enablePrototypeComments)): ?>
|
||||
<script src="../../assets/js/comments.js"></script>
|
||||
<?php endif; ?>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,67 @@
|
||||
<?php
|
||||
$currentPage = basename($_SERVER['PHP_SELF'], '.php');
|
||||
if (!isset($pageTitle)) {
|
||||
$pageTitle = 'TravelLeader - Aplikacja Pilota';
|
||||
}
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
<title><?= htmlspecialchars($pageTitle) ?></title>
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Lokalne assety (Boxicons + Core CSS z projektu Magico, bez jsdelivr) -->
|
||||
<link rel="stylesheet" href="../../assets/vendor/fonts/boxicons.css">
|
||||
<link rel="stylesheet" href="../../assets/vendor/css/core.css">
|
||||
|
||||
<!-- Stylistyka aplikacji mobilnej TravelLeader -->
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
|
||||
<!-- Magico Comments -->
|
||||
<?php if (!empty($enablePrototypeComments)): ?>
|
||||
<link rel="stylesheet" href="../../assets/css/comments.css">
|
||||
<?php endif; ?>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone-viewport-wrapper">
|
||||
<div class="phone-screen">
|
||||
|
||||
<!-- Pasek stanu telefonu (Widoczny w ramce na desktopie, ukryty na mobile) -->
|
||||
<div class="phone-status-bar">
|
||||
<span>9:05</span>
|
||||
<div class="icons">
|
||||
<span class="badge bg-secondary" style="font-size: 0.6rem; padding: 1px 4px;">VPN</span>
|
||||
<i class='bx bx-wifi'></i>
|
||||
<i class='bx bx-signal-5'></i>
|
||||
<span style="font-size: 0.72rem; display: inline-flex; align-items: center; gap: 2px;">
|
||||
46 <i class='bx bxs-battery-charging' style="font-size: 1rem;"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nagłówek aplikacji TravelLeader -->
|
||||
<header class="app-header">
|
||||
<a href="index.php" class="brand-logo-area">
|
||||
<div class="brand-icon-box">
|
||||
<i class='bx bx-compass'></i>
|
||||
</div>
|
||||
<div class="brand-name">Travel<span style="color: #2b304f;">Leader</span></div>
|
||||
</a>
|
||||
|
||||
<a href="profile.php" class="header-user-profile" title="Przejdź do profilu">
|
||||
<div class="header-user-info">
|
||||
<div class="header-user-email">oskar@magico.pl</div>
|
||||
<div class="header-user-role">Pilot Wycieczek</div>
|
||||
</div>
|
||||
<div class="header-avatar">
|
||||
<i class='bx bx-user'></i>
|
||||
</div>
|
||||
</a>
|
||||
</header>
|
||||
@@ -0,0 +1,322 @@
|
||||
<?php
|
||||
$enablePrototypeComments = true;
|
||||
$pageTitle = 'TravelLeader - Wycieczki i Zlecenia';
|
||||
include 'header.php';
|
||||
?>
|
||||
|
||||
<!-- Systemowa wstążka profilu (Edge-to-edge pod nagłówkiem, nie koliduje z wyszukiwarką) -->
|
||||
<div class="system-ribbon-bar">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span class="ribbon-badge">45%</span>
|
||||
<div class="ribbon-text">
|
||||
<span class="fw-bold">Profil w bazie</span>
|
||||
<span class="ribbon-sub"> • Uzupełnij dane dla biur</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<a href="profile.php" class="btn-ribbon-action">
|
||||
Dokończ >
|
||||
</a>
|
||||
<button type="button" class="btn-ribbon-close" onclick="this.closest('.system-ribbon-bar').style.display='none';" title="Zamknij powiadomienie">
|
||||
<i class='bx bx-x'></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="app-content">
|
||||
|
||||
<!-- Wyszukiwarka i filtr zakresu dat (odtworzone ze zrzutu ekranu) -->
|
||||
<div class="search-filter-card">
|
||||
<div class="search-filter-icon">
|
||||
<i class='bx bx-search'></i>
|
||||
</div>
|
||||
<div class="search-filter-text flex-grow-1">
|
||||
<h6>Wycieczki</h6>
|
||||
<small>
|
||||
<i class='bx bx-calendar'></i> 18 wrz 2026 → 18 wrz 2027
|
||||
</small>
|
||||
</div>
|
||||
<i class='bx bx-chevron-down text-muted fs-4'></i>
|
||||
</div>
|
||||
|
||||
<!-- Pasek zakładek i przełącznik widoku (Lista vs Kalendarz wycieczek) -->
|
||||
<div class="trips-tabs-bar">
|
||||
<div class="nav-pills-custom">
|
||||
<a href="#" class="nav-pill-item active">
|
||||
<i class='bx bx-home-alt-2'></i>
|
||||
<span>Bieżące</span>
|
||||
<span class="badge-count">1</span>
|
||||
</a>
|
||||
<a href="#" class="nav-pill-item">
|
||||
<i class='bx bx-history'></i>
|
||||
<span>Historia</span>
|
||||
<span class="badge-count">0</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Przełącznik Lista / Kalendarz w obrębie wycieczek -->
|
||||
<div class="view-toggle-group">
|
||||
<button type="button" id="btnListView" class="view-toggle-btn active" title="Widok listy" onclick="switchTripsView('list');">
|
||||
<i class='bx bx-list-ul'></i>
|
||||
</button>
|
||||
<button type="button" id="btnCalendarView" class="view-toggle-btn" title="Widok kalendarza" onclick="switchTripsView('calendar');">
|
||||
<i class='bx bx-calendar'></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- WIDOK 1: LISTA WYCIECZEK -->
|
||||
<div id="tripsListView">
|
||||
<div class="trip-card">
|
||||
<div class="trip-card-header">
|
||||
<div class="d-flex align-items-center flex-grow-1">
|
||||
<div class="trip-id-badge">12</div>
|
||||
<div class="trip-title-area">
|
||||
<h5 class="trip-title">oskar prod</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="trip-status-pill">
|
||||
<span class="badge-status">Planowana</span>
|
||||
<div class="status-subtext">za 363 dni</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dane wycieczki -->
|
||||
<div class="trip-info-row">
|
||||
<i class='bx bx-calendar'></i>
|
||||
<span>16-24.09.2027</span>
|
||||
</div>
|
||||
|
||||
<div class="trip-info-row">
|
||||
<i class='bx bx-group'></i>
|
||||
<span>24 / 0</span>
|
||||
</div>
|
||||
|
||||
<div class="trip-info-row">
|
||||
<i class='bx bx-map'></i>
|
||||
<span class="text-muted">Brak danych</span>
|
||||
</div>
|
||||
|
||||
<!-- Stopka karty -->
|
||||
<div class="trip-card-footer">
|
||||
<div class="trip-code">
|
||||
<i class='bx bx-briefcase-alt'></i>
|
||||
<span>123osk123</span>
|
||||
</div>
|
||||
|
||||
<a href="#" class="btn-details" onclick="openTripBottomSheet('16 WRZEŚNIA 2027'); return false;">
|
||||
Szczegóły >
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- WIDOK 2: KALENDARZ WYCIECZEK (Odtworzony 1:1 ze zrzutu ekranu) -->
|
||||
<div id="tripsCalendarView" class="d-none">
|
||||
<div class="trips-calendar-container">
|
||||
|
||||
<!-- Nagłówek miesiąca -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-3 px-1">
|
||||
<button type="button" class="btn btn-sm btn-light rounded-circle p-1" onclick="alert('Przejdź do Sierpnia 2027');"><i class='bx bx-chevron-left fs-5'></i></button>
|
||||
<div class="month-title-header mb-0">WRZESIEŃ 2027</div>
|
||||
<button type="button" class="btn btn-sm btn-light rounded-circle p-1" onclick="alert('Przejdź do Października 2027');"><i class='bx bx-chevron-right fs-5'></i></button>
|
||||
</div>
|
||||
|
||||
<table class="calendar-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Pn</th>
|
||||
<th>Wt</th>
|
||||
<th>Śr</th>
|
||||
<th>Cz</th>
|
||||
<th>Pt</th>
|
||||
<th>So</th>
|
||||
<th>Nd</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Tydzień 1 -->
|
||||
<tr>
|
||||
<td class="other-month"><span class="day-number">30</span></td>
|
||||
<td class="other-month"><span class="day-number">31</span></td>
|
||||
<td><span class="day-number">1</span></td>
|
||||
<td><span class="day-number">2</span></td>
|
||||
<td><span class="day-number">3</span></td>
|
||||
<td><span class="day-number">4</span></td>
|
||||
<td><span class="day-number">5</span></td>
|
||||
</tr>
|
||||
<!-- Tydzień 2 -->
|
||||
<tr>
|
||||
<td><span class="day-number">6</span></td>
|
||||
<td><span class="day-number">7</span></td>
|
||||
<td><span class="day-number">8</span></td>
|
||||
<td><span class="day-number">9</span></td>
|
||||
<td><span class="day-number">10</span></td>
|
||||
<td><span class="day-number">11</span></td>
|
||||
<td><span class="day-number">12</span></td>
|
||||
</tr>
|
||||
<!-- Tydzień 3: Początek wycieczki 16-19 września -->
|
||||
<tr>
|
||||
<td><span class="day-number">13</span></td>
|
||||
<td><span class="day-number">14</span></td>
|
||||
<td><span class="day-number">15</span></td>
|
||||
<td onclick="openTripBottomSheet('16 WRZEŚNIA 2027');">
|
||||
<span class="day-number fw-bold text-primary">16</span>
|
||||
<span class="trip-ribbon-bar trip-ribbon-start">oskar prod</span>
|
||||
</td>
|
||||
<td onclick="openTripBottomSheet('17 WRZEŚNIA 2027');">
|
||||
<span class="day-number fw-bold text-primary">17</span>
|
||||
<span class="trip-ribbon-bar"> </span>
|
||||
</td>
|
||||
<td onclick="openTripBottomSheet('18 WRZEŚNIA 2027');">
|
||||
<span class="day-number fw-bold text-primary">18</span>
|
||||
<span class="trip-ribbon-bar"> </span>
|
||||
</td>
|
||||
<td onclick="openTripBottomSheet('19 WRZEŚNIA 2027');">
|
||||
<span class="day-number fw-bold text-primary">19</span>
|
||||
<span class="trip-ribbon-bar"> </span>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Tydzień 4: Ciąg dalszy wycieczki 20-24 września -->
|
||||
<tr>
|
||||
<td onclick="openTripBottomSheet('20 WRZEŚNIA 2027');">
|
||||
<span class="day-number fw-bold text-primary">20</span>
|
||||
<span class="trip-ribbon-bar">oskar prod</span>
|
||||
</td>
|
||||
<td onclick="openTripBottomSheet('21 WRZEŚNIA 2027');">
|
||||
<span class="day-number fw-bold text-primary">21</span>
|
||||
<span class="trip-ribbon-bar"> </span>
|
||||
</td>
|
||||
<td onclick="openTripBottomSheet('22 WRZEŚNIA 2027');">
|
||||
<span class="day-number fw-bold text-primary">22</span>
|
||||
<span class="trip-ribbon-bar"> </span>
|
||||
</td>
|
||||
<td onclick="openTripBottomSheet('23 WRZEŚNIA 2027');">
|
||||
<span class="day-number fw-bold text-primary">23</span>
|
||||
<span class="trip-ribbon-bar"> </span>
|
||||
</td>
|
||||
<td onclick="openTripBottomSheet('24 WRZEŚNIA 2027');">
|
||||
<span class="day-number fw-bold text-primary">24</span>
|
||||
<span class="trip-ribbon-bar trip-ribbon-end"> </span>
|
||||
</td>
|
||||
<td><span class="day-number">25</span></td>
|
||||
<td><span class="day-number">26</span></td>
|
||||
</tr>
|
||||
<!-- Tydzień 5 -->
|
||||
<tr>
|
||||
<td><span class="day-number">27</span></td>
|
||||
<td><span class="day-number">28</span></td>
|
||||
<td><span class="day-number">29</span></td>
|
||||
<td><span class="day-number">30</span></td>
|
||||
<td class="other-month"><span class="day-number">1</span></td>
|
||||
<td class="other-month"><span class="day-number">2</span></td>
|
||||
<td class="other-month"><span class="day-number">3</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="mt-3 pt-2 border-top d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted" style="font-size: 0.72rem;">
|
||||
<i class='bx bxs-circle text-primary' style="font-size: 0.6rem;"></i> Zaznaczony termin wycieczki (16-24 Wrz)
|
||||
</small>
|
||||
<a href="availability.php" class="text-primary fw-bold text-decoration-none" style="font-size: 0.72rem;">
|
||||
Kalendarz dostępności →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /.app-content -->
|
||||
|
||||
<!-- BOTTOM SHEET MODAL (Odtworzony 1:1 ze zrzutu ekranu) -->
|
||||
<div id="tripSheetBackdrop" class="bottom-sheet-backdrop" onclick="closeTripBottomSheet();"></div>
|
||||
<div id="tripBottomSheet" class="bottom-sheet-content">
|
||||
<div class="sheet-drag-handle"></div>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<div>
|
||||
<div class="text-uppercase fw-bold text-muted" style="font-size: 0.68rem; letter-spacing: 0.5px;">WYBRANY DZIEŃ</div>
|
||||
<h5 class="fw-bold mb-0" id="sheetSelectedDate" style="color: var(--dark-navy); font-size: 1.15rem;">16 WRZEŚNIA 2027</h5>
|
||||
</div>
|
||||
<button type="button" class="btn-close" style="font-size: 0.75rem;" onclick="closeTripBottomSheet();" aria-label="Zamknij"></button>
|
||||
</div>
|
||||
|
||||
<!-- Karta wycieczki wewnątrz Bottom Sheet -->
|
||||
<div class="trip-card mb-0 shadow-none border mt-3">
|
||||
<div class="trip-card-header">
|
||||
<div class="d-flex align-items-center flex-grow-1">
|
||||
<div class="trip-id-badge">12</div>
|
||||
<div class="trip-title-area">
|
||||
<h5 class="trip-title">oskar prod</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="trip-status-pill">
|
||||
<span class="badge-status">Planowana</span>
|
||||
<div class="status-subtext">za 363 dni</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="trip-info-row">
|
||||
<i class='bx bx-calendar'></i>
|
||||
<span>16-24.09.2027</span>
|
||||
</div>
|
||||
|
||||
<div class="trip-info-row">
|
||||
<i class='bx bx-group'></i>
|
||||
<span>24 / 0</span>
|
||||
</div>
|
||||
|
||||
<div class="trip-info-row">
|
||||
<i class='bx bx-map'></i>
|
||||
<span class="text-muted">Brak danych</span>
|
||||
</div>
|
||||
|
||||
<div class="trip-card-footer">
|
||||
<div class="trip-code">
|
||||
<i class='bx bx-briefcase-alt'></i>
|
||||
<span>123osk123</span>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn-details" onclick="alert('Otwieranie pełnych szczegółów wycieczki 12 oskar prod');">
|
||||
Szczegóły >
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function switchTripsView(view) {
|
||||
const listView = document.getElementById('tripsListView');
|
||||
const calView = document.getElementById('tripsCalendarView');
|
||||
const btnList = document.getElementById('btnListView');
|
||||
const btnCal = document.getElementById('btnCalendarView');
|
||||
|
||||
if (view === 'calendar') {
|
||||
listView.classList.add('d-none');
|
||||
calView.classList.remove('d-none');
|
||||
btnCal.classList.add('active');
|
||||
btnList.classList.remove('active');
|
||||
} else {
|
||||
listView.classList.remove('d-none');
|
||||
calView.classList.add('d-none');
|
||||
btnList.classList.add('active');
|
||||
btnCal.classList.remove('active');
|
||||
}
|
||||
}
|
||||
|
||||
function openTripBottomSheet(dateTitle) {
|
||||
document.getElementById('sheetSelectedDate').innerText = dateTitle;
|
||||
document.getElementById('tripSheetBackdrop').classList.add('active');
|
||||
document.getElementById('tripBottomSheet').classList.add('active');
|
||||
}
|
||||
|
||||
function closeTripBottomSheet() {
|
||||
document.getElementById('tripSheetBackdrop').classList.remove('active');
|
||||
document.getElementById('tripBottomSheet').classList.remove('active');
|
||||
}
|
||||
</script>
|
||||
|
||||
<?php include 'footer.php'; ?>
|
||||
@@ -0,0 +1,269 @@
|
||||
<?php
|
||||
$enablePrototypeComments = true;
|
||||
$pageTitle = 'TravelLeader - Edycja Profilu';
|
||||
include 'header.php';
|
||||
?>
|
||||
|
||||
<div class="app-content">
|
||||
|
||||
<!-- Pasek powrotu -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<a href="profile.php" class="text-decoration-none d-flex align-items-center gap-1 text-muted" style="font-size: 0.85rem; font-weight: 600;">
|
||||
<i class='bx bx-arrow-back fs-5'></i> Powrót do profilu
|
||||
</a>
|
||||
<button type="button" class="btn btn-sm btn-primary-custom py-1 px-3" style="width: auto; font-size: 0.8rem;" onclick="saveProfile();">
|
||||
<i class='bx bx-check'></i> Zapisz
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h5 class="fw-bold mb-3" style="color: var(--dark-navy);">Edycja Profilu</h5>
|
||||
|
||||
<!-- Toast powiadomienie o zapisie -->
|
||||
<div id="saveToast" class="alert alert-success d-none rounded-3 shadow-sm py-2 px-3 mb-3 d-flex align-items-center justify-content-between" style="font-size: 0.82rem;">
|
||||
<span><i class='bx bx-check-circle me-1'></i> Profil zaktualizowany! Zmiany widoczne dla biur.</span>
|
||||
<a href="profile.php" class="fw-bold text-success text-decoration-underline ms-2">Zobacz</a>
|
||||
</div>
|
||||
|
||||
<!-- 0. Nowoczesny, kompaktowy przełącznik widoczności (Pill card) -->
|
||||
<div class="visibility-status-pill-card mb-3">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span class="status-indicator-dot active" id="visibilityDot"></span>
|
||||
<div>
|
||||
<span class="fw-bold" style="font-size: 0.84rem; color: var(--dark-navy);" id="visibilityTitle">
|
||||
Widoczny w bazie biur podróży
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-check form-switch m-0">
|
||||
<input class="form-check-input" type="checkbox" id="visibilitySwitch" checked style="cursor: pointer; transform: scale(1.15);" onchange="toggleVisibility(this);">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 1. Zdjęcie profilowe & Wideo-Wizytówka -->
|
||||
<div class="section-card mb-3">
|
||||
<div class="section-title">
|
||||
<span><i class='bx bx-image text-primary me-1'></i> Zdjęcie i Wideo</span>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center gap-3 mb-3">
|
||||
<div class="profile-avatar-img d-flex align-items-center justify-content-center" style="width: 60px; height: 60px; background: linear-gradient(135deg, #4f46e5, #7c3aed); color: white; font-size: 1.4rem; font-weight: 800; flex-shrink: 0;">
|
||||
OK
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" class="btn btn-sm btn-outline-primary rounded-pill py-1 px-3" style="font-size: 0.76rem;" onclick="alert('Wybierz zdjęcie z telefonu.');">
|
||||
<i class='bx bx-camera'></i> Zmień zdjęcie profilowe
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label-custom">Link do wideo-autoprezentacji</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-light border-end-0 py-1"><i class='bx bxl-youtube text-danger'></i></span>
|
||||
<input type="text" class="form-control form-control-custom" value="https://youtu.be/oskar-pilot-intro" placeholder="YouTube, Vimeo...">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label-custom">Zdjęcia ze szlaków i wypraw</label>
|
||||
<div class="d-flex gap-2">
|
||||
<div class="media-thumbnail d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; background: #eff0fe; color: var(--primary); cursor: pointer;" onclick="alert('Wybierz kolejne zdjęcia');">
|
||||
<i class='bx bx-plus fs-4'></i>
|
||||
</div>
|
||||
<div class="media-thumbnail d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; background: #60a5fa; color: white;">
|
||||
<i class='bx bx-landscape fs-4'></i>
|
||||
</div>
|
||||
<div class="media-thumbnail d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; background: #f59e0b; color: white;">
|
||||
<i class='bx bx-camera fs-4'></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. Dane podstawowe & Autoprezentacja -->
|
||||
<div class="section-card mb-3" id="bio">
|
||||
<div class="section-title">
|
||||
<span><i class='bx bx-user text-primary me-1'></i> Dane podstawowe & O mnie</span>
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label class="form-label-custom">Imię i Nazwisko</label>
|
||||
<input type="text" class="form-control-custom" value="Oskar Kaczmarek">
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label class="form-label-custom">Tytuł zawodowy / Slogan</label>
|
||||
<input type="text" class="form-control-custom" value="Licencjonowany Pilot Wycieczek & Przewodnik">
|
||||
</div>
|
||||
|
||||
<div class="row g-2 mb-2">
|
||||
<div class="col-6">
|
||||
<label class="form-label-custom">Rok rozpoczęcia</label>
|
||||
<input type="number" id="startYearInput" class="form-control-custom" value="2019" min="1970" max="2026" oninput="updateExpYears();">
|
||||
<small class="text-primary fw-bold d-block mt-1" id="expCalculatedHint" style="font-size: 0.72rem;">
|
||||
<i class='bx bx-check'></i> Staż: 7 lat
|
||||
</small>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="form-label-custom">Miasto bazowe</label>
|
||||
<input type="text" class="form-control-custom" value="Warszawa / Rzym">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-1">
|
||||
<label class="form-label-custom">Opis autoprezentacji dla biur</label>
|
||||
<textarea class="form-control-custom" rows="3">Pasjonat kultury śródziemnomorskiej z wykształceniem historycznym. Od 2019 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.</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. Destynacje i Obsługiwane Kraje -->
|
||||
<div class="section-card mb-3" id="destynacje">
|
||||
<div class="section-title">
|
||||
<span><i class='bx bx-map-pin text-primary me-1'></i> Obsługiwane kraje</span>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-wrap gap-1 mb-2" id="countryChips">
|
||||
<span class="chip-tag primary" onclick="this.classList.toggle('primary')">🇮🇹 Włochy</span>
|
||||
<span class="chip-tag primary" onclick="this.classList.toggle('primary')">🇬🇷 Grecja</span>
|
||||
<span class="chip-tag primary" onclick="this.classList.toggle('primary')">🇪🇸 Hiszpania</span>
|
||||
<span class="chip-tag primary" onclick="this.classList.toggle('primary')">🇭🇷 Chorwacja</span>
|
||||
<span class="chip-tag primary" onclick="this.classList.toggle('primary')">🇳🇴 Norwegia</span>
|
||||
<span class="chip-tag primary" onclick="this.classList.toggle('primary')">🇦🇹 Austria</span>
|
||||
<span class="chip-tag" onclick="this.classList.toggle('primary')">🇵🇹 Portugalia</span>
|
||||
<span class="chip-tag" onclick="this.classList.toggle('primary')">🇹🇷 Turcja</span>
|
||||
<span class="chip-tag" onclick="this.classList.toggle('primary')">🇫🇷 Francja</span>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="text" id="newCountryInput" class="form-control form-control-custom py-1" placeholder="Wpisz inny kraj...">
|
||||
<button class="btn btn-outline-primary py-1 px-3" type="button" onclick="addNewCountry();" style="border-radius: var(--radius-sm); margin-left: 6px; font-size: 0.78rem;">
|
||||
+ Dodaj
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 4. Języki Obce -->
|
||||
<div class="section-card mb-3" id="jezyki">
|
||||
<div class="section-title">
|
||||
<span><i class='bx bx-chat text-primary me-1'></i> Języki</span>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column gap-2 mb-2">
|
||||
<div class="row g-2 align-items-center">
|
||||
<div class="col-7">
|
||||
<input type="text" class="form-control-custom" value="Polski" readonly>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<select class="form-select form-control-custom py-1">
|
||||
<option selected>Ojczysty</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-2 align-items-center">
|
||||
<div class="col-7">
|
||||
<input type="text" class="form-control-custom" value="Angielski">
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<select class="form-select form-control-custom py-1">
|
||||
<option>B1 (Średni)</option>
|
||||
<option>B2 (Płynny)</option>
|
||||
<option selected>C1 (Biegły)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-2 align-items-center">
|
||||
<div class="col-7">
|
||||
<input type="text" class="form-control-custom" value="Włoski">
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<select class="form-select form-control-custom py-1">
|
||||
<option>B1 (Średni)</option>
|
||||
<option selected>B2 (Płynny)</option>
|
||||
<option>C1 (Biegły)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-sm btn-light w-100 rounded-3 py-1 text-muted" style="font-size: 0.76rem;" onclick="alert('Dodaj kolejny język');">
|
||||
+ Dodaj język
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 5. Tagi & Specjalizacje -->
|
||||
<div class="section-card mb-4" id="tagi">
|
||||
<div class="section-title">
|
||||
<span><i class='bx bx-purchase-tag text-primary me-1'></i> Tagi & Specjalizacje</span>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-wrap gap-1">
|
||||
<span class="chip-tag primary" onclick="this.classList.toggle('primary')"><i class='bx bx-check'></i> Objazdówki</span>
|
||||
<span class="chip-tag primary" onclick="this.classList.toggle('primary')"><i class='bx bx-check'></i> Trekking & góry</span>
|
||||
<span class="chip-tag primary" onclick="this.classList.toggle('primary')"><i class='bx bx-check'></i> Przewodnik miejski</span>
|
||||
<span class="chip-tag primary" onclick="this.classList.toggle('primary')"><i class='bx bx-check'></i> Grupy szkolne</span>
|
||||
<span class="chip-tag primary" onclick="this.classList.toggle('primary')"><i class='bx bx-check'></i> VIP / Incentive</span>
|
||||
<span class="chip-tag" onclick="this.classList.toggle('primary')"><i class='bx bx-check'></i> Narty</span>
|
||||
<span class="chip-tag" onclick="this.classList.toggle('primary')"><i class='bx bx-check'></i> Rejsy</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zapisz -->
|
||||
<div class="mb-4">
|
||||
<button type="button" class="btn-primary-custom" onclick="saveProfile();">
|
||||
<i class='bx bx-save'></i> Zapisz profil publiczny
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div><!-- /.app-content -->
|
||||
|
||||
<script>
|
||||
function updateExpYears() {
|
||||
const startYear = parseInt(document.getElementById('startYearInput').value, 10);
|
||||
const currentYear = new Date().getFullYear();
|
||||
const hint = document.getElementById('expCalculatedHint');
|
||||
if (!isNaN(startYear) && startYear > 1950 && startYear <= currentYear) {
|
||||
const years = currentYear - startYear;
|
||||
hint.innerHTML = `<i class='bx bx-check'></i> Staż: ${years} ${years === 1 ? 'rok' : (years < 5 ? 'lata' : 'lat')}`;
|
||||
hint.className = 'text-primary fw-bold d-block mt-1';
|
||||
} else {
|
||||
hint.innerHTML = `<i class='bx bx-info-circle'></i> Podaj prawidłowy rok`;
|
||||
hint.className = 'text-danger fw-bold d-block mt-1';
|
||||
}
|
||||
}
|
||||
|
||||
function toggleVisibility(checkbox) {
|
||||
const dot = document.getElementById('visibilityDot');
|
||||
const title = document.getElementById('visibilityTitle');
|
||||
if (checkbox.checked) {
|
||||
dot.className = 'status-indicator-dot active';
|
||||
title.innerHTML = 'Widoczny w bazie biur podróży';
|
||||
} else {
|
||||
dot.className = 'status-indicator-dot';
|
||||
title.innerHTML = 'Profil ukryty w bazie biur';
|
||||
}
|
||||
}
|
||||
|
||||
function saveProfile() {
|
||||
const toast = document.getElementById('saveToast');
|
||||
toast.classList.remove('d-none');
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
|
||||
function addNewCountry() {
|
||||
const input = document.getElementById('newCountryInput');
|
||||
const val = input.value.trim();
|
||||
if (val) {
|
||||
const container = document.getElementById('countryChips');
|
||||
const span = document.createElement('span');
|
||||
span.className = 'chip-tag primary';
|
||||
span.innerHTML = '🌍 ' + val;
|
||||
span.onclick = function() { this.classList.toggle('primary'); };
|
||||
container.appendChild(span);
|
||||
input.value = '';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<?php include 'footer.php'; ?>
|
||||
@@ -0,0 +1,221 @@
|
||||
<?php
|
||||
$enablePrototypeComments = true;
|
||||
$pageTitle = 'TravelLeader - Opinie Biur Podróży';
|
||||
include 'header.php';
|
||||
?>
|
||||
|
||||
<div class="app-content">
|
||||
|
||||
<!-- Pasek powrotu -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<a href="profile.php" class="text-decoration-none d-flex align-items-center gap-1 text-muted" style="font-size: 0.85rem; font-weight: 600;">
|
||||
<i class='bx bx-arrow-back fs-5'></i> Powrót do profilu
|
||||
</a>
|
||||
<span class="badge bg-light text-muted" style="font-size: 0.72rem;">Zweryfikowane przez Travel Manager</span>
|
||||
</div>
|
||||
|
||||
<!-- Podsumowanie ocen (Rating Summary Hero) -->
|
||||
<div class="section-card text-center mb-3">
|
||||
<div class="d-flex align-items-center justify-content-center gap-2 mb-1">
|
||||
<h2 class="fw-bold mb-0" style="color: var(--dark-navy); font-size: 2.2rem;">4.9</h2>
|
||||
<div class="text-start">
|
||||
<div class="text-warning" style="font-size: 1.1rem; line-height: 1;">
|
||||
<i class='bx bxs-star'></i><i class='bx bxs-star'></i><i class='bx bxs-star'></i><i class='bx bxs-star'></i><i class='bx bxs-star-half'></i>
|
||||
</div>
|
||||
<small class="text-muted" style="font-size: 0.72rem;">na podstawie 18 ocen</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-muted mb-3" style="font-size: 0.76rem;">100% biur poleca tego pilota na kolejne wyjazdy</div>
|
||||
|
||||
<!-- Rozbicie gwiazdek -->
|
||||
<div class="d-flex flex-column gap-1" style="max-width: 260px; margin: 0 auto; font-size: 0.72rem;">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span style="width: 24px;">5★</span>
|
||||
<div class="progress flex-grow-1" style="height: 6px;">
|
||||
<div class="progress-bar bg-warning" style="width: 89%;"></div>
|
||||
</div>
|
||||
<span class="text-muted" style="width: 20px;">16</span>
|
||||
</div>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span style="width: 24px;">4★</span>
|
||||
<div class="progress flex-grow-1" style="height: 6px;">
|
||||
<div class="progress-bar bg-warning" style="width: 11%;"></div>
|
||||
</div>
|
||||
<span class="text-muted" style="width: 20px;">2</span>
|
||||
</div>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span style="width: 24px;">3★</span>
|
||||
<div class="progress flex-grow-1" style="height: 6px;">
|
||||
<div class="progress-bar bg-warning" style="width: 0%;"></div>
|
||||
</div>
|
||||
<span class="text-muted" style="width: 20px;">0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filtry opinii -->
|
||||
<div class="d-flex gap-2 overflow-x-auto pb-2 mb-3" style="white-space: nowrap;">
|
||||
<button class="nav-pill-item active" style="font-size: 0.78rem; padding: 5px 12px;">Wszystkie (18)</button>
|
||||
<button class="nav-pill-item" style="font-size: 0.78rem; padding: 5px 12px;">Włochy (12)</button>
|
||||
<button class="nav-pill-item" style="font-size: 0.78rem; padding: 5px 12px;">Hiszpania (4)</button>
|
||||
<button class="nav-pill-item" style="font-size: 0.78rem; padding: 5px 12px;">Grecja (2)</button>
|
||||
</div>
|
||||
|
||||
<h6 class="fw-bold mb-3" style="color: var(--dark-navy); font-size: 0.9rem;">Opinie od Biur Podróży</h6>
|
||||
|
||||
<!-- Opinia 1 (Z już dodaną odpowiedzią pilota) -->
|
||||
<div class="section-card mb-3">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<div class="rounded-circle d-flex align-items-center justify-content-center bg-primary-subtle text-primary fw-bold" style="width: 34px; height: 34px; font-size: 0.8rem;">
|
||||
AL
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="fw-bold mb-0" style="font-size: 0.86rem; color: var(--dark-navy);">Biuro Podróży Almatur</h6>
|
||||
<small class="text-muted" style="font-size: 0.7rem;">Wycieczka: Klasyczne Włochy • Maj 2026</small>
|
||||
</div>
|
||||
</div>
|
||||
<span class="badge bg-warning-subtle text-warning fw-bold" style="font-size: 0.72rem;">
|
||||
<i class='bx bxs-star'></i> 5.0
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p class="mb-3 text-secondary" style="font-size: 0.82rem; line-height: 1.45;">
|
||||
"Pan Oskar prowadził 8-dniowy objazd po Włoszech. Klienci byli zachwyceni jego wiedzą i empatią. Brak jakichkolwiek problemów organizacyjnych. Bardzo chętnie zarezerwujemy kolejne terminy na jesień."
|
||||
</p>
|
||||
|
||||
<!-- Odpowiedź pilota (Już opublikowana) -->
|
||||
<div class="p-3 rounded-3" style="background-color: #f6f7fe; border-left: 3px solid var(--primary);">
|
||||
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||
<div class="d-flex align-items-center gap-1">
|
||||
<i class='bx bx-reply text-primary'></i>
|
||||
<span class="fw-bold" style="font-size: 0.76rem; color: var(--primary);">Twoja odpowiedź jako pilot</span>
|
||||
</div>
|
||||
<small class="text-muted" style="font-size: 0.68rem;">3 dni temu</small>
|
||||
</div>
|
||||
<p class="mb-0 text-secondary" style="font-size: 0.78rem; line-height: 1.4;">
|
||||
Dziękuję serdecznie za zaufanie! Współpraca z koordynatorem trasy i grupą układała się wzorowo. Do zobaczenia na kolejnych wyjazdach!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Opinia 2 (Z możliwością dodania odpowiedzi przez formularz) -->
|
||||
<div class="section-card mb-3" id="reviewCard2">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<div class="rounded-circle d-flex align-items-center justify-content-center bg-info-subtle text-info fw-bold" style="width: 34px; height: 34px; font-size: 0.8rem;">
|
||||
LT
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="fw-bold mb-0" style="font-size: 0.86rem; color: var(--dark-navy);">Logos Tour Warszawa</h6>
|
||||
<small class="text-muted" style="font-size: 0.7rem;">Wycieczka: Andaluzja & Gibraltar • Kwiecień 2026</small>
|
||||
</div>
|
||||
</div>
|
||||
<span class="badge bg-warning-subtle text-warning fw-bold" style="font-size: 0.72rem;">
|
||||
<i class='bx bxs-star'></i> 4.8
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p class="mb-2 text-secondary" style="font-size: 0.82rem; line-height: 1.45;">
|
||||
"Świetny kontakt telefoniczny i regularne raportowanie przebiegu trasy do centrali biura. Grupa bardzo zadowolona z realizacji programu mimo trudnych warunków pogodowych w górach."
|
||||
</p>
|
||||
|
||||
<!-- Przycisk / formularz odpowiedzi -->
|
||||
<div id="replyArea2">
|
||||
<button type="button" class="btn btn-sm btn-outline-primary rounded-pill py-1 px-3 mt-1" style="font-size: 0.74rem;" onclick="toggleReplyBox(2);">
|
||||
<i class='bx bx-reply'></i> Odpowiedz na opinię
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="replyForm2" class="d-none mt-2 p-3 rounded-3" style="background-color: #f8f9fd; border: 1px solid var(--border-color);">
|
||||
<label class="form-label-custom mb-1" style="font-size: 0.76rem;">Napisz publiczną odpowiedź do biura:</label>
|
||||
<textarea id="replyText2" class="form-control-custom mb-2" rows="2" placeholder="Podziękuj za współpracę lub odnieś się do szczegółów wycieczki..."></textarea>
|
||||
<div class="d-flex justify-content-end gap-2">
|
||||
<button type="button" class="btn btn-sm btn-light rounded-pill py-1 px-3" style="font-size: 0.72rem;" onclick="toggleReplyBox(2);">Anuluj</button>
|
||||
<button type="button" class="btn btn-sm btn-primary rounded-pill py-1 px-3" style="font-size: 0.72rem;" onclick="publishReply(2);">Opublikuj odpowiedź</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Opinia 3 -->
|
||||
<div class="section-card mb-4" id="reviewCard3">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<div class="rounded-circle d-flex align-items-center justify-content-center bg-success-subtle text-success fw-bold" style="width: 34px; height: 34px; font-size: 0.8rem;">
|
||||
RT
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="fw-bold mb-0" style="font-size: 0.86rem; color: var(--dark-navy);">Rainbow Tours</h6>
|
||||
<small class="text-muted" style="font-size: 0.7rem;">Wycieczka: Sycylia w pigułce • Wrzesień 2025</small>
|
||||
</div>
|
||||
</div>
|
||||
<span class="badge bg-warning-subtle text-warning fw-bold" style="font-size: 0.72rem;">
|
||||
<i class='bx bxs-star'></i> 5.0
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p class="mb-2 text-secondary" style="font-size: 0.82rem; line-height: 1.45;">
|
||||
"Wzorowy pilotaż i panowanie nad 45-osobową grupą. Zero opóźnień, kierowcy autokaru chwalili dyscyplinę i profesjonalizm pilota."
|
||||
</p>
|
||||
|
||||
<!-- Przycisk odpowiedzi -->
|
||||
<div id="replyArea3">
|
||||
<button type="button" class="btn btn-sm btn-outline-primary rounded-pill py-1 px-3 mt-1" style="font-size: 0.74rem;" onclick="toggleReplyBox(3);">
|
||||
<i class='bx bx-reply'></i> Odpowiedz na opinię
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="replyForm3" class="d-none mt-2 p-3 rounded-3" style="background-color: #f8f9fd; border: 1px solid var(--border-color);">
|
||||
<label class="form-label-custom mb-1" style="font-size: 0.76rem;">Napisz publiczną odpowiedź do biura:</label>
|
||||
<textarea id="replyText3" class="form-control-custom mb-2" rows="2" placeholder="Podziękuj za współpracę..."></textarea>
|
||||
<div class="d-flex justify-content-end gap-2">
|
||||
<button type="button" class="btn btn-sm btn-light rounded-pill py-1 px-3" style="font-size: 0.72rem;" onclick="toggleReplyBox(3);">Anuluj</button>
|
||||
<button type="button" class="btn btn-sm btn-primary rounded-pill py-1 px-3" style="font-size: 0.72rem;" onclick="publishReply(3);">Opublikuj odpowiedź</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /.app-content -->
|
||||
|
||||
<script>
|
||||
function toggleReplyBox(id) {
|
||||
const form = document.getElementById('replyForm' + id);
|
||||
const area = document.getElementById('replyArea' + id);
|
||||
if (form.classList.contains('d-none')) {
|
||||
form.classList.remove('d-none');
|
||||
area.classList.add('d-none');
|
||||
} else {
|
||||
form.classList.add('d-none');
|
||||
area.classList.remove('d-none');
|
||||
}
|
||||
}
|
||||
|
||||
function publishReply(id) {
|
||||
const textInput = document.getElementById('replyText' + id);
|
||||
const val = textInput.value.trim();
|
||||
if (!val) {
|
||||
alert('Wpisz treść odpowiedzi przed publikacją.');
|
||||
return;
|
||||
}
|
||||
|
||||
const form = document.getElementById('replyForm' + id);
|
||||
form.classList.add('d-none');
|
||||
|
||||
const replyArea = document.getElementById('replyArea' + id);
|
||||
replyArea.innerHTML = `
|
||||
<div class="p-3 rounded-3 mt-2" style="background-color: #f6f7fe; border-left: 3px solid var(--primary);">
|
||||
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||
<div class="d-flex align-items-center gap-1">
|
||||
<i class='bx bx-reply text-primary'></i>
|
||||
<span class="fw-bold" style="font-size: 0.76rem; color: var(--primary);">Twoja odpowiedź jako pilot</span>
|
||||
</div>
|
||||
<small class="text-muted" style="font-size: 0.68rem;">Przed chwilą</small>
|
||||
</div>
|
||||
<p class="mb-0 text-secondary" style="font-size: 0.78rem; line-height: 1.4;">${val}</p>
|
||||
</div>
|
||||
`;
|
||||
replyArea.classList.remove('d-none');
|
||||
}
|
||||
</script>
|
||||
|
||||
<?php include 'footer.php'; ?>
|
||||
@@ -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