Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor booking page UI with improved UX flow

Browse source 
Enhances booking experience with multi-step interactive interface
Adds responsive design and dynamic step navigation
Improves user interaction with floating next button and sidebar updates

Implements comprehensive booking flow with step-by-step progression
This commit is contained in:
Janus C. H. Knudsen 2026-01-01 19:57:05 +01:00
parent 11338012cd
commit dacdf5d153
3 changed files with 4071 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

134
wwwroot/poc-indstillinger.html
View file

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Indstillinger - Salon Beauty</title>
<title>Indstillinger - KARINA KNUDSEN®</title>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/regular/style.css" />
<style>
@ -935,6 +935,68 @@
display: flex;
flex-wrap: wrap;
gap: 8px;
position: relative;
}
/* Onboarding popover */
#variablesHint[popover] {
margin: 0;
border: none;
padding: 0;
background: transparent;
overflow: visible;
inset: unset;
}
#variablesHint[popover]:popover-open {
display: block;
}
swp-onboarding-hint {
display: flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
color: white;
padding: 12px 16px;
border-radius: 10px;
font-size: 13px;
font-weight: 500;
line-height: 1.4;
white-space: nowrap;
box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
}
swp-onboarding-hint i.ph-lightbulb {
font-size: 18px;
}
swp-onboarding-hint::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 8px solid transparent;
border-top-color: #8b5cf6;
}
swp-onboarding-hint swp-hint-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
margin-left: 4px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
cursor: pointer;
font-size: 12px;
transition: background 150ms ease;
}
swp-onboarding-hint swp-hint-close:hover {
background: rgba(255, 255, 255, 0.3);
}
swp-variable-tag {
@ -1313,7 +1375,7 @@
<swp-edit-section>
<swp-edit-row>
<swp-edit-label>Virksomhedsnavn</swp-edit-label>
<swp-edit-value contenteditable="true">Salon Beauty</swp-edit-value>
<swp-edit-value contenteditable="true">KARINA KNUDSEN®</swp-edit-value>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label>CVR-nummer</swp-edit-label>
@ -1644,7 +1706,7 @@
<swp-edit-section>
<swp-edit-row>
<swp-edit-label>Firmanavn (juridisk)</swp-edit-label>
<swp-edit-value contenteditable="true">Salon Beauty ApS</swp-edit-value>
<swp-edit-value contenteditable="true">KARINA KNUDSEN® ApS</swp-edit-value>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label>CVR-nummer</swp-edit-label>
@ -1964,7 +2026,7 @@ Vil du ændre din tid? {booking_link}</swp-message-editor>
<swp-message-section>
<swp-message-section-title>Indsæt variabel</swp-message-section-title>
<swp-variables-grid>
<swp-variables-grid id="smsVariablesGrid">
<swp-variable-tag data-var="{kunde_navn}"><i class="ph ph-user"></i> kunde_navn</swp-variable-tag>
<swp-variable-tag data-var="{behandling}"><i class="ph ph-scissors"></i> behandling</swp-variable-tag>
<swp-variable-tag data-var="{dato}"><i class="ph ph-calendar"></i> dato</swp-variable-tag>
@ -1985,7 +2047,7 @@ Vil du ændre din tid? {booking_link}</swp-message-editor>
<span class="highlight" data-var="{behandling}">Dameklip + Føn</span><br>
<span class="highlight" data-var="{dato}">Torsdag d. 2. januar</span> kl. <span class="highlight" data-var="{tid}">14:30</span><br><br>
Hos <span class="highlight" data-var="{medarbejder}">Maria</span><br>
<span class="highlight" data-var="{firma_navn}">Salon Beauty</span>, <span class="highlight" data-var="{firma_adresse}">Hovedgaden 123</span><br><br>
<span class="highlight" data-var="{firma_navn}">KARINA KNUDSEN®</span>, <span class="highlight" data-var="{firma_adresse}">Hovedgaden 123</span><br><br>
Vil du ændre din tid? <span class="highlight" data-var="{booking_link}">book.plantempus.dk/x7k2</span>
</swp-message-preview>
<swp-preview-meta>
@ -2026,7 +2088,7 @@ Vil du ændre din tid? {booking_link}</swp-message-editor>
<swp-edit-section>
<swp-edit-row>
<swp-edit-label>Email emne</swp-edit-label>
<swp-edit-value contenteditable="true" id="emailSubject">Din tid hos Salon Beauty er bekræftet</swp-edit-value>
<swp-edit-value contenteditable="true" id="emailSubject">Din tid hos KARINA KNUDSEN® er bekræftet</swp-edit-value>
</swp-edit-row>
<swp-edit-row>
@ -2076,7 +2138,7 @@ Vil du ændre din tid? {booking_link}</swp-message-editor>
<swp-email-header id="emailPreviewHeader">
<swp-email-logo>SB</swp-email-logo>
<h2 id="emailPreviewHeadline">Tid bekræftet!</h2>
<p>Salon Beauty</p>
<p>KARINA KNUDSEN®</p>
</swp-email-header>
<swp-email-body>
@ -2113,7 +2175,7 @@ Vil du ændre din tid? {booking_link}</swp-message-editor>
</swp-email-body>
<swp-email-footer>
<swp-email-footer-logo>Salon Beauty</swp-email-footer-logo>
<swp-email-footer-logo>KARINA KNUDSEN®</swp-email-footer-logo>
<p>Hovedgaden 123, 2100 København Ø</p>
<p>Tlf: 70 20 30 40 · <a href="#">info@salonbeauty.dk</a></p>
<p style="margin-top: 12px; font-size: 11px;">
@ -2134,6 +2196,15 @@ Vil du ændre din tid? {booking_link}</swp-message-editor>
</swp-drawer-footer>
</swp-drawer>
<!-- Onboarding Popover -->
<div id="variablesHint" popover="manual">
<swp-onboarding-hint>
<i class="ph ph-lightbulb"></i>
<span>Klik for at indsætte, hold musen over for at se i preview</span>
<swp-hint-close><i class="ph ph-x"></i></swp-hint-close>
</swp-onboarding-hint>
</div>
<script>
// Tab switching
document.querySelectorAll('swp-tab').forEach(tab => {
@ -2180,12 +2251,47 @@ Vil du ændre din tid? {booking_link}</swp-message-editor>
smsDrawer.classList.add('open');
smsOverlay.classList.add('open');
document.body.style.overflow = 'hidden';
// Show onboarding hint if not seen before
if (!localStorage.getItem('variablesHintSeen')) {
setTimeout(() => {
showVariablesHint();
}, 600);
}
}
function showVariablesHint() {
const hint = document.getElementById('variablesHint');
const anchor = document.getElementById('smsVariablesGrid');
if (!hint || !anchor) return;
const anchorRect = anchor.getBoundingClientRect();
hint.style.position = 'fixed';
hint.style.top = `${anchorRect.top - 60}px`;
hint.style.left = `${anchorRect.left - 80}px`;
hint.showPopover();
}
function hideVariablesHint() {
const hint = document.getElementById('variablesHint');
if (hint) {
hint.hidePopover();
localStorage.setItem('variablesHintSeen', 'true');
}
}
function closeSmsDrawer() {
smsDrawer.classList.remove('open');
smsOverlay.classList.remove('open');
document.body.style.overflow = '';
// Hide hint without marking as seen (will show again next time)
const hint = document.getElementById('variablesHint');
if (hint) {
try { hint.hidePopover(); } catch(e) {}
}
}
document.getElementById('drawerClose').addEventListener('click', closeSmsDrawer);
@ -2298,6 +2404,9 @@ Vil du ændre din tid? {booking_link}</swp-message-editor>
const varText = tag.dataset.var;
const editor = document.getElementById('messageEditor');
// Dismiss onboarding hint on first click
hideVariablesHint();
const selection = window.getSelection();
if (selection.rangeCount > 0) {
const range = selection.getRangeAt(0);
@ -2348,6 +2457,15 @@ Vil du ændre din tid? {booking_link}</swp-message-editor>
});
});
// ==========================================
// ONBOARDING HINT CLOSE
// ==========================================
document.querySelectorAll('swp-hint-close').forEach(closeBtn => {
closeBtn.addEventListener('click', () => {
hideVariablesHint();
});
});
// ==========================================
// ESCAPE KEY
// ==========================================