Moving away from Azure Devops #1
3 changed files with 4071 additions and 8 deletions
2381
wwwroot/poc-booking-v2.html
Normal file
2381
wwwroot/poc-booking-v2.html
Normal file
File diff suppressed because it is too large
Load diff
1564
wwwroot/poc-booking.html
Normal file
1564
wwwroot/poc-booking.html
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<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 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" />
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/regular/style.css" />
|
||||||
<style>
|
<style>
|
||||||
|
|
@ -935,6 +935,68 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 8px;
|
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 {
|
swp-variable-tag {
|
||||||
|
|
@ -1313,7 +1375,7 @@
|
||||||
<swp-edit-section>
|
<swp-edit-section>
|
||||||
<swp-edit-row>
|
<swp-edit-row>
|
||||||
<swp-edit-label>Virksomhedsnavn</swp-edit-label>
|
<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-row>
|
<swp-edit-row>
|
||||||
<swp-edit-label>CVR-nummer</swp-edit-label>
|
<swp-edit-label>CVR-nummer</swp-edit-label>
|
||||||
|
|
@ -1644,7 +1706,7 @@
|
||||||
<swp-edit-section>
|
<swp-edit-section>
|
||||||
<swp-edit-row>
|
<swp-edit-row>
|
||||||
<swp-edit-label>Firmanavn (juridisk)</swp-edit-label>
|
<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-row>
|
<swp-edit-row>
|
||||||
<swp-edit-label>CVR-nummer</swp-edit-label>
|
<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>
|
||||||
<swp-message-section-title>Indsæt variabel</swp-message-section-title>
|
<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="{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="{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>
|
<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="{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>
|
<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>
|
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>
|
Vil du ændre din tid? <span class="highlight" data-var="{booking_link}">book.plantempus.dk/x7k2</span>
|
||||||
</swp-message-preview>
|
</swp-message-preview>
|
||||||
<swp-preview-meta>
|
<swp-preview-meta>
|
||||||
|
|
@ -2026,7 +2088,7 @@ Vil du ændre din tid? {booking_link}</swp-message-editor>
|
||||||
<swp-edit-section>
|
<swp-edit-section>
|
||||||
<swp-edit-row>
|
<swp-edit-row>
|
||||||
<swp-edit-label>Email emne</swp-edit-label>
|
<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>
|
||||||
|
|
||||||
<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-header id="emailPreviewHeader">
|
||||||
<swp-email-logo>SB</swp-email-logo>
|
<swp-email-logo>SB</swp-email-logo>
|
||||||
<h2 id="emailPreviewHeadline">Tid bekræftet!</h2>
|
<h2 id="emailPreviewHeadline">Tid bekræftet!</h2>
|
||||||
<p>Salon Beauty</p>
|
<p>KARINA KNUDSEN®</p>
|
||||||
</swp-email-header>
|
</swp-email-header>
|
||||||
|
|
||||||
<swp-email-body>
|
<swp-email-body>
|
||||||
|
|
@ -2113,7 +2175,7 @@ Vil du ændre din tid? {booking_link}</swp-message-editor>
|
||||||
</swp-email-body>
|
</swp-email-body>
|
||||||
|
|
||||||
<swp-email-footer>
|
<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>Hovedgaden 123, 2100 København Ø</p>
|
||||||
<p>Tlf: 70 20 30 40 · <a href="#">info@salonbeauty.dk</a></p>
|
<p>Tlf: 70 20 30 40 · <a href="#">info@salonbeauty.dk</a></p>
|
||||||
<p style="margin-top: 12px; font-size: 11px;">
|
<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-footer>
|
||||||
</swp-drawer>
|
</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>
|
<script>
|
||||||
// Tab switching
|
// Tab switching
|
||||||
document.querySelectorAll('swp-tab').forEach(tab => {
|
document.querySelectorAll('swp-tab').forEach(tab => {
|
||||||
|
|
@ -2180,12 +2251,47 @@ Vil du ændre din tid? {booking_link}</swp-message-editor>
|
||||||
smsDrawer.classList.add('open');
|
smsDrawer.classList.add('open');
|
||||||
smsOverlay.classList.add('open');
|
smsOverlay.classList.add('open');
|
||||||
document.body.style.overflow = 'hidden';
|
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() {
|
function closeSmsDrawer() {
|
||||||
smsDrawer.classList.remove('open');
|
smsDrawer.classList.remove('open');
|
||||||
smsOverlay.classList.remove('open');
|
smsOverlay.classList.remove('open');
|
||||||
document.body.style.overflow = '';
|
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);
|
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 varText = tag.dataset.var;
|
||||||
const editor = document.getElementById('messageEditor');
|
const editor = document.getElementById('messageEditor');
|
||||||
|
|
||||||
|
// Dismiss onboarding hint on first click
|
||||||
|
hideVariablesHint();
|
||||||
|
|
||||||
const selection = window.getSelection();
|
const selection = window.getSelection();
|
||||||
if (selection.rangeCount > 0) {
|
if (selection.rangeCount > 0) {
|
||||||
const range = selection.getRangeAt(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
|
// ESCAPE KEY
|
||||||
// ==========================================
|
// ==========================================
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue