feat(superpilot-web): wdrozenie webowej bazy pilotow z profilem, wyszukiwarka i zleceniami
- Wyszukiwarka ofert w stylu Pracuj.pl z multiselectem destynacji i filtrem bazy pilota - Przeprojektowany profil pilota zgodny ze standardem UX/UI 2026 i aplikacja mobile - Spokojny, ustrukturyzowany modal rezerwacji i zapytań ofertowych (booking-modal) - Panel zleceń i zapytań ofertowych biura (inquiries.php) powiazany z awatarem profilu - Integracja linku do Superpilota w menu glownym Travel Managera
This commit is contained in:
oskarn
@@ -0,0 +1,148 @@
|
||||
<!-- Reusable Modals -->
|
||||
<?php include __DIR__ . '/booking-modal.php'; ?>
|
||||
<?php include __DIR__ . '/sos-modal.php'; ?>
|
||||
|
||||
<!-- Modal Wideo-Wizytówki Pilota (Autoprezentacja) -->
|
||||
<div class="modal fade" id="videoPitchModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content border-0 shadow-lg" style="border-radius: var(--sp-radius-md); overflow: hidden; background: #0f172a; color: white;">
|
||||
|
||||
<div class="modal-header border-0 pb-0">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span class="badge bg-danger rounded-pill" style="font-size: 0.7rem;">WIDEO AUTOPREZENTACJA</span>
|
||||
<h6 class="modal-title fw-bold text-white mb-0" id="videoModalPilotName">Oskar Kaczmarek</h6>
|
||||
<span class="text-white-50 small" id="videoModalLength">(1:15 min)</span>
|
||||
</div>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body p-4 text-center">
|
||||
|
||||
<!-- Ekran symulowanego wideo playera -->
|
||||
<div class="position-relative rounded-3 overflow-hidden d-flex flex-column align-items-center justify-content-center p-5 mb-3" style="background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); min-height: 320px; border: 1px solid rgba(255,255,255,0.1);">
|
||||
|
||||
<!-- Próbka audio/video avatara -->
|
||||
<div class="rounded-circle d-flex align-items-center justify-content-center mb-3 shadow-lg" style="width: 84px; height: 84px; background: linear-gradient(135deg, var(--sp-primary) 0%, var(--sp-violet) 100%); font-size: 2.2rem; font-weight: 800;">
|
||||
OK
|
||||
</div>
|
||||
|
||||
<h5 class="fw-bold text-white mb-1">„Buongiorno! Nazywam się Oskar Kaczmarek...”</h5>
|
||||
<p class="text-white-50 small mb-3" style="max-width: 520px;">
|
||||
Posłuchaj próbki autoprezentacji: dykcja, prezencja, płynne przejście na język włoski i angielski, opanowanie i entuzjazm do pracy z grupami wycieczkowymi.
|
||||
</p>
|
||||
|
||||
<!-- Pasek postępu odtwarzacza -->
|
||||
<div class="w-100 progress bg-dark" style="height: 6px; max-width: 480px;">
|
||||
<div id="videoMockProgress" class="progress-bar bg-primary" style="width: 45%;"></div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between text-white-50 small mt-1 w-100" style="max-width: 480px; font-size: 0.72rem;">
|
||||
<span>0:34</span>
|
||||
<span>1:15</span>
|
||||
</div>
|
||||
|
||||
<!-- Fale dźwiękowe w tle -->
|
||||
<div class="d-flex align-items-center gap-1 mt-3">
|
||||
<span class="badge bg-label-primary px-3 py-1 rounded-pill"><i class='bx bx-volume-full'></i> Dźwięk HD</span>
|
||||
<span class="badge bg-label-success px-3 py-1 rounded-pill"><i class='bx bx-check-shield'></i> Zweryfikowany przez Superpilot</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Podsumowanie kompetencji zweryfikowanych w wideo -->
|
||||
<div class="row g-2 text-start">
|
||||
<div class="col-md-4">
|
||||
<div class="p-2 rounded bg-white bg-opacity-10">
|
||||
<div class="text-success small fw-bold"><i class='bx bx-check'></i> Język Włoski</div>
|
||||
<small class="text-white-50" style="font-size: 0.74rem;">Płynna wymowa i słownictwo branżowe</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-2 rounded bg-white bg-opacity-10">
|
||||
<div class="text-success small fw-bold"><i class='bx bx-check'></i> Dyplomacja & Grupa</div>
|
||||
<small class="text-white-50" style="font-size: 0.74rem;">Naturalne podejście do trudnych sytuacji</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-2 rounded bg-white bg-opacity-10">
|
||||
<div class="text-success small fw-bold"><i class='bx bx-check'></i> Prezencja Osobista</div>
|
||||
<small class="text-white-50" style="font-size: 0.74rem;">Wysoka kultura osobista, schludność</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="modal-footer border-0 pt-0 pb-4 px-4 justify-content-between">
|
||||
<button type="button" class="btn btn-outline-light btn-sm" data-bs-dismiss="modal">Zamknij</button>
|
||||
<button type="button" class="btn btn-superpilot" onclick="bootstrap.Modal.getInstance(document.getElementById('videoPitchModal')).hide(); openBookingModal('1', 'Oskar Kaczmarek', '16.09.2027 - 24.09.2027');">
|
||||
<i class='bx bx-calendar-check'></i> Zarezerwuj pilota po obejrzeniu
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Podglądu Zdjęć ze Szlaków (Lightbox) -->
|
||||
<div class="modal fade" id="photoLightboxModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content border-0 shadow-lg bg-dark text-white" style="border-radius: var(--sp-radius-md); overflow: hidden;">
|
||||
<div class="modal-header border-0 pb-0">
|
||||
<h6 class="modal-title fw-bold text-white mb-0" id="lightboxTitle">Zdjęcie z trasy</h6>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
|
||||
</div>
|
||||
<div class="modal-body p-4 text-center">
|
||||
<div class="rounded-3 d-flex align-items-center justify-content-center p-5 mb-2" id="lightboxPlaceholder" style="min-height: 380px; background: linear-gradient(135deg, #1e293b, #334155); color: white;">
|
||||
<div class="text-center">
|
||||
<i class='bx bx-landscape' style="font-size: 4rem; opacity: 0.8;"></i>
|
||||
<h5 class="fw-bold mt-2" id="lightboxSubtext">Florencja & Toskania — Grupa objazdowa Almatur</h5>
|
||||
<p class="text-white-50 small">Fotografia wykonana podczas realizacji programu autokarowego • Wrzesień 2026</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stopka desktopowa -->
|
||||
<footer class="content-footer footer bg-white border-top py-3 mt-5">
|
||||
<div class="container-xxl d-flex flex-wrap justify-content-between align-items-center py-2 flex-md-row flex-column">
|
||||
<div class="mb-2 mb-md-0 small text-muted">
|
||||
© <?= date('Y') ?> <strong>Superpilot</strong> — Ekosystem TravelManager & PrzezMorze dla Biur Podróży.
|
||||
</div>
|
||||
<div class="d-flex align-items-center gap-3 small">
|
||||
<span class="text-success fw-semibold"><i class='bx bx-shield-quarter'></i> Certyfikacja Superpilot Academy</span>
|
||||
<a href="courses.php" class="text-secondary text-decoration-none">Programy Szkoleń</a>
|
||||
<a href="../travelleader-mobile/profile.php" target="_blank" class="text-primary text-decoration-none">Aplikacja Mobilna Pilota</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div class="content-backdrop fade"></div>
|
||||
</div><!-- /.content-wrapper -->
|
||||
</div><!-- /.layout-page -->
|
||||
</div><!-- /.layout-container -->
|
||||
</div><!-- /.layout-wrapper -->
|
||||
|
||||
<!-- Sneat Core JS -->
|
||||
<script src="<?= $basePath ?>/assets/vendor/libs/jquery/jquery.js"></script>
|
||||
<script src="<?= $basePath ?>/assets/vendor/libs/popper/popper.js"></script>
|
||||
<script src="<?= $basePath ?>/assets/vendor/js/bootstrap.js"></script>
|
||||
<script src="<?= $basePath ?>/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
|
||||
<script src="<?= $basePath ?>/assets/vendor/libs/hammer/hammer.js"></script>
|
||||
<script src="<?= $basePath ?>/assets/vendor/js/menu.js"></script>
|
||||
<script src="<?= $basePath ?>/assets/js/main.js"></script>
|
||||
|
||||
<!-- Superpilot Custom JS -->
|
||||
<script src="assets/js/superpilot.js"></script>
|
||||
|
||||
<!-- Magico Prototype Comments -->
|
||||
<?php if (!empty($enablePrototypeComments)): ?>
|
||||
<script>
|
||||
const MAGICO_BASE_URL = <?= json_encode($basePath); ?>;
|
||||
</script>
|
||||
<script src="<?= $basePath ?>/assets/js/comments.js"></script>
|
||||
<?php endif; ?>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user