435d9f11b7
Introduces comprehensive online booking feature with: - Localization support for booking settings - ViewComponents for booking URL, settings, company info, hours, and preview - Responsive preview with device toggle functionality - Integrated with settings page and translation files Enhances application's online booking configuration interface
130 lines
6.1 KiB
Text
130 lines
6.1 KiB
Text
<swp-online-booking-preview-container>
|
|
<swp-preview-header>
|
|
<swp-preview-title>
|
|
<i class="ph ph-eye"></i>
|
|
<span localize="onlineBooking.preview.title">Preview</span>
|
|
</swp-preview-title>
|
|
<swp-device-toggle>
|
|
<swp-device-btn class="active" data-device="desktop" title="Desktop">
|
|
<i class="ph ph-desktop"></i>
|
|
</swp-device-btn>
|
|
<swp-device-btn data-device="tablet" title="Tablet">
|
|
<i class="ph ph-device-tablet"></i>
|
|
</swp-device-btn>
|
|
<swp-device-btn data-device="mobile" title="Mobil">
|
|
<i class="ph ph-device-mobile"></i>
|
|
</swp-device-btn>
|
|
</swp-device-toggle>
|
|
</swp-preview-header>
|
|
|
|
<swp-preview-frame data-device="desktop">
|
|
<swp-preview-content>
|
|
<!-- Placeholder booking UI -->
|
|
<swp-booking-demo>
|
|
<swp-booking-demo-header>
|
|
<swp-booking-demo-logo>SB</swp-booking-demo-logo>
|
|
<swp-booking-demo-info>
|
|
<h2>Salon Beauty</h2>
|
|
<p>Hovedgaden 123, 2100 København Ø</p>
|
|
</swp-booking-demo-info>
|
|
</swp-booking-demo-header>
|
|
|
|
<swp-booking-demo-section>
|
|
<h3>Vælg service</h3>
|
|
<swp-booking-demo-services>
|
|
<swp-booking-demo-service class="selected">
|
|
<span class="name">Dame klip</span>
|
|
<span class="meta">45 min · 450 kr</span>
|
|
</swp-booking-demo-service>
|
|
<swp-booking-demo-service>
|
|
<span class="name">Herre klip</span>
|
|
<span class="meta">30 min · 350 kr</span>
|
|
</swp-booking-demo-service>
|
|
<swp-booking-demo-service>
|
|
<span class="name">Farvning</span>
|
|
<span class="meta">90 min · 850 kr</span>
|
|
</swp-booking-demo-service>
|
|
<swp-booking-demo-service>
|
|
<span class="name">Balayage</span>
|
|
<span class="meta">120 min · 1.450 kr</span>
|
|
</swp-booking-demo-service>
|
|
</swp-booking-demo-services>
|
|
</swp-booking-demo-section>
|
|
|
|
<swp-booking-demo-section>
|
|
<h3>Vælg medarbejder</h3>
|
|
<swp-booking-demo-employees>
|
|
<swp-booking-demo-employee class="selected">
|
|
<swp-avatar class="size-sm">MJ</swp-avatar>
|
|
<span>Maria Jensen</span>
|
|
</swp-booking-demo-employee>
|
|
<swp-booking-demo-employee>
|
|
<swp-avatar class="size-sm purple">AH</swp-avatar>
|
|
<span>Anna Hansen</span>
|
|
</swp-booking-demo-employee>
|
|
<swp-booking-demo-employee>
|
|
<swp-avatar class="size-sm blue">LP</swp-avatar>
|
|
<span>Louise Petersen</span>
|
|
</swp-booking-demo-employee>
|
|
</swp-booking-demo-employees>
|
|
</swp-booking-demo-section>
|
|
|
|
<swp-booking-demo-section>
|
|
<h3>Vælg dato og tid</h3>
|
|
<swp-booking-demo-calendar>
|
|
<swp-booking-demo-month>Januar 2026</swp-booking-demo-month>
|
|
<swp-booking-demo-days>
|
|
<span class="day-header">Ma</span>
|
|
<span class="day-header">Ti</span>
|
|
<span class="day-header">On</span>
|
|
<span class="day-header">To</span>
|
|
<span class="day-header">Fr</span>
|
|
<span class="day-header">Lø</span>
|
|
<span class="day-header">Sø</span>
|
|
<span class="day other">27</span>
|
|
<span class="day other">28</span>
|
|
<span class="day other">29</span>
|
|
<span class="day other">30</span>
|
|
<span class="day other">31</span>
|
|
<span class="day">1</span>
|
|
<span class="day">2</span>
|
|
<span class="day">3</span>
|
|
<span class="day">4</span>
|
|
<span class="day">5</span>
|
|
<span class="day">6</span>
|
|
<span class="day">7</span>
|
|
<span class="day">8</span>
|
|
<span class="day">9</span>
|
|
<span class="day">10</span>
|
|
<span class="day">11</span>
|
|
<span class="day">12</span>
|
|
<span class="day">13</span>
|
|
<span class="day selected">14</span>
|
|
<span class="day">15</span>
|
|
<span class="day">16</span>
|
|
</swp-booking-demo-days>
|
|
</swp-booking-demo-calendar>
|
|
</swp-booking-demo-section>
|
|
|
|
<swp-booking-demo-footer>
|
|
<swp-btn class="primary full-width">Book tid</swp-btn>
|
|
</swp-booking-demo-footer>
|
|
</swp-booking-demo>
|
|
</swp-preview-content>
|
|
</swp-preview-frame>
|
|
</swp-online-booking-preview-container>
|
|
|
|
<script>
|
|
(function() {
|
|
const deviceBtns = document.querySelectorAll('swp-device-btn');
|
|
const previewFrame = document.querySelector('swp-preview-frame');
|
|
|
|
deviceBtns.forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
deviceBtns.forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
previewFrame.setAttribute('data-device', btn.getAttribute('data-device'));
|
|
});
|
|
});
|
|
})();
|
|
</script>
|