109 lines
14 KiB
HTML
109 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<script src="./support.js"></script>
|
|
</head>
|
|
<body>
|
|
<x-dc>
|
|
<div style="width:100%;display:flex;flex-direction:column;align-items:center;gap:20px">
|
|
<div style="width:{{ w }};max-width:100%;background:var(--ui-bg);border:{{ border }};padding:{{ pad }};display:flex;flex-direction:column;gap:24px;font-family:'IBM Plex Sans',sans-serif;color:var(--ui-text)">
|
|
<svg width="32" height="32" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="{{ edge }}" fill-rule="evenodd" d="M0 0h16v16H0zM.5 .5v15h15V.5z"></path><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg>
|
|
<sc-if value="{{ s.spinner }}" hint-placeholder-val="{{ false }}">
|
|
<div role="status" style="display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 0;text-align:center"><span aria-hidden="true" style="display:inline-block;width:32px;height:32px;background-color:var(--ui-text-highlighted);-webkit-mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat"></span><span style="font:600 20px/28px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ s.spinner }}</span><span style="color:var(--ui-text-muted);font-size:14px">This only takes a moment.</span></div>
|
|
</sc-if>
|
|
<sc-if value="{{ s.title }}" hint-placeholder-val="{{ true }}">
|
|
<div style="display:flex;flex-direction:column;gap:6px"><span style="font:600 20px/28px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ s.title }}</span><sc-if value="{{ s.desc }}"><span style="color:var(--ui-text-muted);font-size:14px;line-height:22px;text-wrap:pretty">{{ s.desc }}</span></sc-if></div>
|
|
</sc-if>
|
|
<sc-if value="{{ notice }}">
|
|
<div style="display:flex;gap:10px;padding:12px 14px;background:{{ notice.bg }};color:{{ notice.fg }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;margin-top:2px;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ notice.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ notice.icon }}.svg') center / contain no-repeat"></span><div style="flex:1;display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:20px"><span style="font-weight:600">{{ notice.title }}</span><sc-if value="{{ notice.text }}"><span style="color:var(--ui-text-toned);text-wrap:pretty">{{ notice.text }}</span></sc-if></div></div>
|
|
</sc-if>
|
|
<sc-if value="{{ result }}">
|
|
<div style="display:flex;flex-direction:column;gap:16px">
|
|
<span style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:{{ result.bg }};color:{{ result.fg }}"><span aria-hidden="true" style="display:inline-block;width:22px;height:22px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ result.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ result.icon }}.svg') center / contain no-repeat"></span></span>
|
|
<div style="display:flex;flex-direction:column;gap:6px"><span style="font:600 20px/28px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ result.title }}</span><span style="color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">{{ result.text }}</span><sc-if value="{{ result.note }}"><span style="color:var(--ui-text-muted);font-size:13px;line-height:20px;text-wrap:pretty">{{ result.note }}</span></sc-if></div>
|
|
<div style="display:flex;flex-direction:column;gap:8px">
|
|
<sc-for list="{{ result.actions }}" as="a" hint-placeholder-count="1">
|
|
<span data-act="{{ a.act }}" style="height:{{ btnH }};display:flex;align-items:center;justify-content:center;font-weight:500;font-size:14px;background:{{ a.bg }};color:{{ a.fg }};border:{{ a.bd }}">{{ a.t }}</span>
|
|
</sc-for>
|
|
</div>
|
|
</div>
|
|
</sc-if>
|
|
<sc-if value="{{ hasForm }}">
|
|
<div style="display:flex;flex-direction:column;gap:18px">
|
|
<sc-for list="{{ fields }}" as="f" hint-placeholder-count="2">
|
|
<div style="display:flex;flex-direction:column;gap:6px">
|
|
<div style="display:flex;justify-content:space-between;gap:8px;font-size:13px"><span style="font-weight:500;color:var(--ui-text-highlighted)">{{ f.label }}</span><sc-if value="{{ f.count }}"><span style="font:400 12px 'IBM Plex Mono',monospace;color:{{ f.countFg }}">{{ f.count }}</span></sc-if><sc-if value="{{ f.link }}"><span data-act="forgot" style="color:var(--ui-text-toned);text-decoration:underline;text-underline-offset:3px">{{ f.link }}</span></sc-if></div>
|
|
<div style="height:{{ inH }};padding:0 4px 0 10px;display:flex;align-items:center;gap:8px;border:1px solid {{ f.bd }};box-shadow:{{ f.sh }};background:{{ f.bg }};font-size:{{ inF }}">
|
|
<span style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:{{ f.fg }};letter-spacing:{{ f.ls }}">{{ f.shownValue }}</span>
|
|
<sc-if value="{{ f.pw }}"><span style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ f.eye }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ f.eye }}.svg') center / contain no-repeat"></span></span></sc-if>
|
|
</div>
|
|
<sc-if value="{{ f.err }}"><span style="display:flex;gap:6px;align-items:center;color:var(--ui-error);font-size:12px;line-height:18px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/circle-alert.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-alert.svg') center / contain no-repeat"></span>{{ f.err }}</span></sc-if>
|
|
<sc-if value="{{ f.help }}"><span style="color:var(--ui-text-muted);font-size:12px;line-height:18px">{{ f.help }}</span></sc-if>
|
|
<sc-for list="{{ f.hints }}" as="h" hint-placeholder-count="0">
|
|
<span style="display:flex;gap:8px;align-items:center;font-size:12px;line-height:18px;color:{{ h.fg }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ h.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ h.icon }}.svg') center / contain no-repeat"></span><span style="color:{{ h.tfg }}">{{ h.t }}</span></span>
|
|
</sc-for>
|
|
</div>
|
|
</sc-for>
|
|
<span data-act="submit" style="height:{{ btnH }};display:flex;align-items:center;justify-content:center;gap:8px;font-weight:500;font-size:14px;background:var(--ui-primary);color:var(--ui-bg);opacity:{{ submitOpacity }}"><sc-if value="{{ s.submit.loading }}"><span aria-hidden="true" style="display:inline-block;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat"></span></sc-if>{{ s.submit.t }}</span>
|
|
<sc-if value="{{ s.below }}"><span data-act="below" style="align-self:center;color:var(--ui-text-toned);font-size:13px;text-decoration:underline;text-underline-offset:3px">{{ s.below }}</span></sc-if>
|
|
</div>
|
|
</sc-if>
|
|
</div>
|
|
<sc-if value="{{ hasFooter }}">
|
|
<div style="width:{{ w }};max-width:100%;padding:{{ footPad }};display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--ui-text-muted)">
|
|
<span style="display:flex;gap:6px;flex-wrap:wrap;align-items:center"><sc-if value="{{ s.footer }}"><span>{{ s.footer.pre }}</span><span data-act="footer" style="color:var(--ui-text-highlighted);font-weight:500;text-decoration:underline;text-underline-offset:3px">{{ s.footer.link }}</span></sc-if><sc-if value="{{ s.pending }}"><span style="height:20px;padding:0 6px;display:inline-flex;align-items:center;border:1px dashed var(--ui-border-accented);color:var(--ui-text-toned);font:500 11px 'IBM Plex Mono',monospace">API pending</span></sc-if></span>
|
|
<span style="position:relative;display:flex;align-items:center;gap:8px"><sc-if value="{{ langOpen }}"><div role="menu" aria-label="Language" style="position:absolute;right:0;bottom:36px;z-index:10;width:168px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop);padding:4px"><sc-for list="{{ langSeg }}" as="m" hint-placeholder-count="2"><div data-act="{{ m.act }}" lang="{{ m.code }}" role="menuitemradio" aria-checked="{{ m.on }}" style="height:{{ optH }};padding:0 8px;display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--ui-text-highlighted)">{{ m.t }}<span aria-hidden="true" style="display:inline-block;width:16px;height:16px;background-color:currentColor;opacity:{{ m.op }};-webkit-mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat"></span></div></sc-for></div></sc-if><span data-act="langmenu" role="button" aria-haspopup="menu" aria-expanded="{{ langOpen }}" aria-label="Language: {{ langName }}" style="height:{{ chipH }};padding:0 8px;display:flex;align-items:center;gap:6px;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned);background:{{ langBg }}"><span aria-hidden="true" style="display:inline-block;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/languages.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/languages.svg') center / contain no-repeat"></span>{{ langName }}</span><span style="height:{{ chipH }};padding:0 8px;display:flex;align-items:center;gap:6px;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/monitor.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/monitor.svg') center / contain no-repeat"></span>System</span></span>
|
|
</div>
|
|
</sc-if>
|
|
</div>
|
|
</x-dc>
|
|
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":480,"height":620},"s":{"editor":null,"tsType":"object"},"lang":{"editor":"enum","options":["en","fr"],"default":"en","tsType":"string"},"langOpen":{"editor":"boolean","default":false,"tsType":"boolean"},"mobile":{"editor":"boolean","default":false,"tsType":"boolean"}}">
|
|
class Component extends DCLogic {
|
|
renderVals() {
|
|
const s = this.props.s || {}
|
|
const m = !!this.props.mobile
|
|
const lang = this.props.lang || s.lang || 'en'
|
|
const tone = t => ({ bg: 'var(--rc-' + t + '-soft)', fg: 'var(--ui-' + t + ')' })
|
|
const notice = s.notice ? { ...s.notice, ...tone(s.notice.tone) } : null
|
|
const result = s.result ? { ...s.result, ...tone(s.result.tone), actions: (s.result.actions || []).map((a, i) => i === 0 && !a.secondary ? { act: 'result-' + i, t: a.t, bg: 'var(--ui-primary)', fg: 'var(--ui-bg)', bd: '1px solid var(--ui-primary)' } : { act: 'result-' + i, t: a.t, bg: 'var(--ui-bg)', fg: 'var(--ui-text-highlighted)', bd: '1px solid var(--ui-border-accented)' }) } : null
|
|
const dis = s.submit && (s.submit.loading || s.submit.disabled)
|
|
const fields = (s.fields || []).map(f => {
|
|
const has = f.value != null && f.value !== ''
|
|
const masked = f.pw && !f.shown && has
|
|
return {
|
|
...f,
|
|
shownValue: has ? (masked ? '•'.repeat(Math.min(f.value.length, 16)) : f.value) : (f.ph || ''),
|
|
fg: dis || f.ro ? 'var(--ui-text-dimmed)' : has ? 'var(--ui-text-highlighted)' : 'var(--ui-text-muted)',
|
|
ls: masked ? '2px' : 'normal',
|
|
bd: f.err ? 'var(--ui-error)' : f.focus ? 'var(--ui-primary)' : f.ro || dis ? 'var(--ui-border)' : 'var(--ui-border-accented)',
|
|
sh: f.err ? 'inset 0 0 0 1px var(--ui-error)' : f.focus ? 'inset 0 0 0 1px var(--ui-primary)' : 'none',
|
|
bg: f.ro || dis ? 'var(--ui-bg-elevated)' : 'var(--ui-bg)',
|
|
eye: f.shown ? 'eye-off' : 'eye',
|
|
countFg: f.countErr ? 'var(--ui-error)' : 'var(--ui-text-muted)',
|
|
hints: (f.hints || []).map(h => ({ t: h.t, icon: h.s === 'met' ? 'check' : h.s === 'err' ? 'circle-alert' : 'circle', fg: h.s === 'met' ? 'var(--ui-success)' : h.s === 'err' ? 'var(--ui-error)' : 'var(--ui-text-muted)', tfg: h.s === 'met' ? 'var(--ui-text)' : h.s === 'err' ? 'var(--ui-error)' : 'var(--ui-text-muted)' }))
|
|
}
|
|
})
|
|
return {
|
|
s, notice, result, fields,
|
|
hasForm: fields.length > 0 && !!s.submit,
|
|
hasFooter: true,
|
|
langOpen: !!(this.props.langOpen ?? s.langOpen), langName: lang === 'fr' ? 'Français' : 'English', langBg: this.props.langOpen ?? s.langOpen ? 'var(--ui-bg-elevated)' : 'transparent', chipH: m ? '44px' : '28px', optH: m ? '44px' : '32px',
|
|
langSeg: [['en','English'],['fr','Français']].map(([k,t]) => ({ act: 'lang-' + k, code: k, t, on: lang === k, op: lang === k ? 1 : 0 })),
|
|
submitOpacity: s.submit && s.submit.disabled && !s.submit.loading ? '0.4' : '1',
|
|
w: m ? '100%' : '400px',
|
|
border: m ? '0' : '1px solid var(--ui-border)',
|
|
pad: m ? '8px 20px 0' : '40px',
|
|
footPad: m ? '0 20px 24px' : '0',
|
|
btnH: m ? '44px' : '40px',
|
|
inH: m ? '44px' : '40px',
|
|
inF: m ? '16px' : '14px',
|
|
edge: 'transparent'
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|