poprawki dla bazy pilotów web, modul zaproszen w apce mobile
This commit is contained in:
oskarn
@@ -0,0 +1,176 @@
|
||||
<!-- 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 Galerii (Lightbox Pro - Czysty & Nowoczesny UX) -->
|
||||
<div class="modal fade" id="photoLightboxModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-xl">
|
||||
<div class="modal-content gallery-modal-content text-white">
|
||||
<!-- Górny minimalistyczny pasek: Filtry po lewej, licznik i zamknięcie po prawej -->
|
||||
<div class="modal-header border-0 py-3 px-3 px-md-4 d-flex align-items-center justify-content-between">
|
||||
<div class="modal-gallery-filters" id="modalGalleryFilters">
|
||||
<button type="button" class="modal-filter-btn active" data-filter="all">Wszystkie <span class="count">6</span></button>
|
||||
<button type="button" class="modal-filter-btn" data-filter="wlochy">🇮🇹 Włochy <span class="count">3</span></button>
|
||||
<button type="button" class="modal-filter-btn" data-filter="hiszpania">🇪🇸 Hiszpania <span class="count">2</span></button>
|
||||
<button type="button" class="modal-filter-btn" data-filter="grecja">🇬🇷 Grecja <span class="count">1</span></button>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<span class="text-white-50 small fw-semibold" id="galleryModalCounter" style="font-size: 0.82rem; letter-spacing: 0.04em;">1 / 6</span>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Główna scena ze zdjęciem -->
|
||||
<div class="modal-body p-0 px-3 px-md-4 pb-3">
|
||||
<div class="gallery-stage mb-2">
|
||||
<button type="button" class="gallery-nav-btn prev" id="galleryBtnPrev" title="Poprzednie (strzałka w lewo)">
|
||||
<i class='bx bx-chevron-left'></i>
|
||||
</button>
|
||||
<img id="galleryModalImg" src="" alt="Zdjęcie z trasy" class="img-fluid">
|
||||
<button type="button" class="gallery-nav-btn next" id="galleryBtnNext" title="Następne (strzałka w prawo)">
|
||||
<i class='bx bx-chevron-right'></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Zwięzły, jednoliniowy podpis kadru -->
|
||||
<div class="d-flex align-items-center justify-content-between flex-wrap gap-2 py-2 px-1">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span class="badge bg-primary-subtle text-primary border border-primary-subtle px-2 py-1" id="galleryModalCountryBadge" style="font-size: 0.72rem;">🇮🇹 Włochy</span>
|
||||
<span class="fw-semibold text-white" id="galleryModalTitle" style="font-size: 0.92rem;">Tytuł zdjęcia</span>
|
||||
</div>
|
||||
<span class="text-white-50 small" id="galleryModalSub" style="font-size: 0.78rem;">Wrzesień 2026</span>
|
||||
</div>
|
||||
|
||||
<!-- Dolna taśma miniaturek (Filmstrip) -->
|
||||
<div class="modal-gallery-thumbs" id="modalGalleryThumbs">
|
||||
<!-- Generowane dynamicznie przez JS w zależności od aktywnego filtra -->
|
||||
</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