refund/index.html
Matthew Deville 74e4f60cc7 wipp
2026-09-04 16:47:44 +02:00

1727 lines
66 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
document.documentElement.setAttribute(
"data-theme",
typeof window.matchMedia === "function" && window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light"
);
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Refund my order</title>
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--radius-circle: 50%;
--radius-pill: 100rem;
--radius-card: 1rem;
--radius-default: 0.75rem;
--color-primary-100: #5b44eb;
--color-primary-200: #8161ef;
--color-primary-400: #9a7ef3;
--color-primary-500: #b8a4f6;
--color-primary-600: #d5c9f9;
--color-primary-700: #efe9fc;
--color-grayscale-0: #1f2225;
--color-grayscale-100: #282b2f;
--color-grayscale-150: #2f3136;
--color-grayscale-200: #37393e;
--color-grayscale-300: #43464b;
--color-grayscale-400: #626466;
--color-grayscale-500: #828386;
--color-grayscale-600: #d1d1d7;
--color-grayscale-700: #ededf6;
--color-grayscale-800: #f9f9ff;
--color-grayscale-900: #fff;
--color-error-500: #c7425c;
--color-error-600: #df667e;
--color-warning-400: #685568;
--color-warning-600: #f5c9f5;
--color-warning-700: #fbdcfb;
--color-success-500: #4d8165;
--color-amber: #e79c13;
--color-overlay: rgba(0, 0, 0, 50%);
--color-shadow: rgba(0, 0, 0, 8%);
--semantic-interactive: var(--color-primary-100);
--semantic-interactive-hover: var(--color-primary-400);
--semantic-shadow: var(--color-shadow);
--semantic-overlay: var(--color-overlay);
--semantic-text-secondary: var(--color-grayscale-500);
--semantic-text-on-color: var(--color-grayscale-900);
--semantic-text-placeholder: var(--color-grayscale-600);
--semantic-text-error: var(--color-error-500);
--semantic-border-focus: var(--color-primary-100);
--semantic-border-error: var(--color-error-500);
--components-button-primary: var(--color-primary-100);
--components-button-primary-hover: var(--color-primary-200);
--components-button-dangerous: var(--color-error-500);
--components-button-dangerous-hover: var(--color-error-600);
--semantic-background: var(--color-grayscale-800);
--semantic-layer-01: var(--color-grayscale-700);
--semantic-layer-02: var(--color-grayscale-900);
--semantic-layer-03: var(--color-grayscale-700);
--semantic-border-strong-01: var(--color-grayscale-600);
--semantic-border-strong-02: var(--color-grayscale-700);
--semantic-border-strong-03: var(--color-grayscale-700);
--semantic-text-primary: var(--color-grayscale-100);
--semantic-text-highlight: var(--color-grayscale-0);
--semantic-text-user: var(--color-primary-200);
--components-button-secondary: var(--color-grayscale-700);
--components-button-secondary-hover: var(--color-grayscale-600);
--components-button-disabled: var(--color-grayscale-700);
--components-field: var(--color-grayscale-900);
--components-field-hover: var(--color-grayscale-800);
--keep: var(--color-primary-100);
--keep-hover: var(--color-primary-200);
--keep-text: var(--color-grayscale-900);
--amber: var(--color-amber);
--warn: var(--color-error-500);
--muted: var(--color-grayscale-500);
--tiny: var(--color-grayscale-500);
--line: var(--color-grayscale-700);
--paper: var(--color-grayscale-900);
--ink: var(--color-grayscale-0);
--navy: var(--color-grayscale-0);
--navy-2: var(--color-grayscale-100);
--link: var(--color-primary-100);
--shadow: 0 4px 24px var(--color-shadow);
--radius: var(--radius-card);
}
[data-theme="dark"] {
--semantic-background: var(--color-grayscale-100);
--semantic-layer-01: var(--color-grayscale-0);
--semantic-layer-02: var(--color-grayscale-200);
--semantic-layer-03: var(--color-grayscale-300);
--semantic-border-strong-01: var(--color-grayscale-200);
--semantic-border-strong-02: var(--color-grayscale-200);
--semantic-border-strong-03: var(--color-grayscale-300);
--semantic-text-primary: var(--color-grayscale-600);
--semantic-text-placeholder: var(--color-grayscale-400);
--semantic-text-highlight: var(--color-grayscale-800);
--semantic-text-user: var(--color-primary-500);
--components-button-secondary: var(--color-grayscale-300);
--components-button-secondary-hover: var(--color-grayscale-400);
--components-button-disabled: var(--color-grayscale-300);
--components-field: var(--color-grayscale-0);
--components-field-hover: var(--color-grayscale-100);
--paper: var(--color-grayscale-200);
--ink: var(--color-grayscale-800);
--navy: var(--color-grayscale-800);
--navy-2: var(--color-grayscale-600);
--line: var(--color-grayscale-300);
--muted: var(--color-grayscale-500);
--tiny: var(--color-grayscale-400);
}
* { box-sizing: border-box; margin: 0; }
html {
-webkit-text-size-adjust: 100%;
height: 100%;
}
body {
min-width: 320px;
min-height: 100%;
min-height: 100dvh;
display: flex;
flex-direction: column;
font-family: Inter, ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 24px;
color: var(--semantic-text-primary);
background-color: var(--semantic-background);
-webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
img { max-width: 100%; display: block; }
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 1rem;
z-index: 20;
}
@media screen and (min-width: 48rem) {
.site-header { padding: 2rem 4rem; gap: 1rem; }
}
.logo {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--semantic-text-highlight);
text-decoration: none;
white-space: nowrap;
}
.logo h3 {
margin: 0;
font-size: 20px;
line-height: 28px;
font-weight: 600;
}
.logo img { width: 32px; height: 32px; border-radius: 8px; }
.header-search {
flex: 1;
min-width: 0;
max-width: 28rem;
}
.header-search input {
width: 100%;
height: 2.5rem;
border: 1px solid var(--semantic-border-strong-03);
border-radius: var(--radius-pill);
padding: 0 1.25rem;
background: var(--components-field);
color: var(--semantic-text-user);
}
.header-search input::placeholder {
font-style: italic;
color: var(--semantic-text-placeholder);
}
.header-search input:focus {
outline: none;
border-color: var(--semantic-border-focus);
}
.header-nav {
display: flex;
gap: 0.5rem;
align-items: center;
}
.header-nav button, .ghost {
background: var(--components-button-secondary);
color: var(--semantic-text-primary);
border: 0;
padding: 6px 1rem;
border-radius: var(--radius-pill);
font-weight: 600;
font-size: 13px;
}
.header-nav button:hover, .ghost:hover {
background: var(--components-button-secondary-hover);
}
.theme-toggle {
width: 2.5rem;
height: 2.5rem;
border: 0;
border-radius: var(--radius-circle);
background: var(--components-button-secondary);
color: var(--semantic-text-primary);
font-size: 1rem;
box-shadow: 0 4px 24px var(--semantic-overlay);
}
.wrap {
flex: 1 0 auto;
width: 100%;
margin: 0;
padding: 0 1rem 6rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
@media screen and (min-width: 48rem) {
.wrap { padding: 0 4rem 8rem; gap: 1.5rem; }
}
.progress {
display: none;
background: var(--semantic-layer-02);
border: 1px solid var(--semantic-border-strong-02);
border-radius: var(--radius-card);
padding: 1rem 1.5rem;
}
.progress.show { display: block; }
.progress-top {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 13px;
color: var(--semantic-text-secondary);
margin-bottom: 8px;
}
.bar {
height: 8px;
background: var(--semantic-layer-03);
border-radius: var(--radius-pill);
overflow: hidden;
}
.bar > i {
display: block;
height: 100%;
width: 8%;
background: var(--color-primary-100);
transition: width .45s ease;
}
.panel { display: none; }
.panel.active { display: block; }
.card {
background: var(--semantic-layer-02);
border: 1px solid var(--semantic-border-strong-02);
border-radius: var(--radius-card);
padding: 1.5rem;
}
.card + .card { margin-top: 1rem; }
h1, h2, h3 { font-family: inherit; margin: 0 0 0.5rem; color: var(--semantic-text-highlight); }
h1 { font-size: 36px; line-height: 48px; font-weight: 700; }
h2 { font-size: 24px; line-height: 32px; font-weight: 700; }
h3 { font-size: 20px; line-height: 28px; font-weight: 600; }
p { color: var(--semantic-text-primary); line-height: 24px; font-size: 15px; margin: 0 0 0.75rem; }
.muted { color: var(--semantic-text-secondary); }
.tiny {
font-size: 11px;
line-height: 16px;
color: var(--tiny);
font-weight: 600;
text-decoration: underline;
background: none;
border: 0;
padding: 12px 8px;
min-height: 44px;
}
.tiny:hover { color: var(--semantic-text-primary); }
.btn-keep {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 2.5rem;
border: 1px solid transparent;
border-radius: var(--radius-pill);
background: var(--components-button-primary);
color: var(--keep-text);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.65px;
text-transform: uppercase;
padding: 0.5rem 2rem;
}
.btn-keep:hover { background: var(--components-button-primary-hover); }
.btn-keep.secondary {
background: transparent;
color: var(--components-button-primary);
border: 1px solid var(--components-button-primary);
margin-top: 10px;
}
.btn-keep.secondary:hover {
border-color: var(--components-button-primary-hover);
color: var(--components-button-primary-hover);
background: transparent;
}
.btn-amber {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 2.5rem;
border: 0;
border-radius: var(--radius-pill);
background: var(--color-amber);
color: var(--color-grayscale-0);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.65px;
text-transform: uppercase;
margin-bottom: 10px;
padding: 0.5rem 2rem;
}
.btn-navy {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 2.5rem;
border: 1px solid transparent;
border-radius: var(--radius-pill);
background: var(--components-button-secondary);
color: var(--semantic-text-primary);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.65px;
text-transform: uppercase;
padding: 0.5rem 2rem;
}
.btn-navy:hover { background: var(--components-button-secondary-hover); }
.btn-ghost {
width: 100%;
min-height: 2.5rem;
border: 1px solid var(--semantic-icon-primary, var(--semantic-text-primary));
background: transparent;
border-radius: var(--radius-pill);
color: var(--semantic-text-primary);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.65px;
text-transform: uppercase;
}
.hero {
display: grid;
grid-template-columns: 140px 1fr;
gap: 1.5rem;
align-items: center;
}
.sneaker {
width: 140px;
height: 140px;
border-radius: var(--radius-card);
background: var(--semantic-layer-03);
display: grid;
place-items: center;
border: 1px solid var(--semantic-border-strong-03);
}
.sneaker img { width: 110px; height: auto; }
.slip {
border: 1px solid var(--semantic-border-strong-03);
background: var(--semantic-layer-03);
border-radius: var(--radius-default);
padding: 0.75rem 1rem;
font-size: 13px;
color: var(--semantic-text-secondary);
}
.slip strong { color: var(--semantic-text-highlight); }
.article-list { display: grid; gap: 0.5rem; }
.article {
display: block;
width: 100%;
text-align: left;
border: 1px solid var(--semantic-border-strong-03);
background: var(--semantic-layer-03);
border-radius: var(--radius-card);
padding: 0.75rem 1rem;
font-weight: 600;
font-size: 15px;
color: var(--semantic-text-highlight);
}
.article.decoy {
background: var(--color-primary-700);
border-color: var(--color-primary-500);
}
[data-theme="dark"] .article.decoy {
background: color-mix(in srgb, transparent 75%, var(--semantic-interactive));
border-color: var(--semantic-interactive);
}
.crumb { font-size: 13px; color: var(--semantic-text-secondary); margin-bottom: 12px; }
.crumb button {
background: none;
border: 0;
color: var(--semantic-interactive);
padding: 0;
font-weight: 600;
}
.field { margin: 12px 0; }
.field label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--semantic-text-highlight); }
.field input, .field select, .field textarea {
width: 100%;
height: 2.5rem;
border: 1px solid var(--semantic-border-strong-03);
border-radius: var(--radius-pill);
padding: 0 1.25rem;
background: var(--components-field);
color: var(--semantic-text-user);
}
.field input:focus {
outline: none;
border-color: var(--semantic-border-focus);
}
.hint { font-size: 13px; color: var(--semantic-text-secondary); margin-top: 4px; }
.error { color: var(--semantic-text-error); font-weight: 600; font-size: 13px; min-height: 1.2em; }
.disabled-guest { opacity: .45; }
.captcha-box {
display: flex;
align-items: center;
gap: 12px;
border: 1px solid var(--semantic-border-strong-03);
border-radius: var(--radius-card);
padding: 10px;
background: var(--semantic-layer-03);
}
.spin-shoe {
width: 56px;
height: 56px;
display: grid;
place-items: center;
}
.spin-shoe img { width: 48px; height: auto; transform-origin: 50% 50%; }
.ticker {
overflow: hidden;
white-space: nowrap;
background: var(--color-primary-700);
border: 1px solid var(--color-primary-500);
border-radius: var(--radius-pill);
padding: 8px 0;
margin: 12px 0 18px;
color: var(--color-primary-100);
font-weight: 600;
font-size: 13px;
}
.ticker-track {
display: inline-block;
animation: marquee 18s linear infinite;
}
@keyframes marquee { to { transform: translateX(-50%); } }
.choices { display: grid; gap: 10px; margin: 16px 0; }
.choice {
display: flex;
gap: 10px;
align-items: flex-start;
border: 1px solid var(--semantic-border-strong-03);
border-radius: var(--radius-card);
padding: 12px;
background: var(--semantic-layer-02);
color: var(--semantic-text-primary);
cursor: pointer;
}
.choice:has(input:checked) {
border-color: var(--semantic-interactive);
background: color-mix(in srgb, var(--semantic-interactive) 10%, var(--semantic-layer-02));
}
.choice.pre:has(input:checked) {
border-color: var(--semantic-border-error);
background: color-mix(in srgb, var(--semantic-border-error) 8%, var(--semantic-layer-02));
}
.choice .fee {
display: inline-block;
margin-left: 0.35rem;
padding: 0.1rem 0.45rem;
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--semantic-border-error) 14%, var(--semantic-layer-02));
color: var(--semantic-text-error);
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.choice.locked {
opacity: .55;
cursor: not-allowed;
}
.choice input { margin-top: 3px; }
.checklist { display: grid; gap: 8px; margin: 12px 0; }
.check {
display: flex;
gap: 10px;
align-items: center;
background: var(--semantic-layer-03);
border-radius: var(--radius-default);
padding: 10px 12px;
color: var(--semantic-text-primary);
}
.urgency {
display: flex;
justify-content: space-between;
gap: 10px;
background: var(--color-warning-700);
border: 1px solid var(--color-warning-400);
color: var(--color-warning-400);
border-radius: var(--radius-card);
padding: 12px 14px;
font-weight: 600;
margin-bottom: 14px;
}
.chat {
background: var(--semantic-layer-03);
border: 1px solid var(--semantic-border-strong-02);
border-radius: var(--radius-card);
min-height: 280px;
max-height: 360px;
overflow: auto;
padding: 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
.bubble {
max-width: 85%;
padding: 10px 12px;
border-radius: var(--radius-card);
line-height: 1.4;
font-size: 15px;
}
.bubble.bot {
background: var(--semantic-layer-02);
border: 1px solid var(--semantic-border-strong-03);
align-self: flex-start;
}
.bubble.me {
background: var(--semantic-interactive);
color: var(--semantic-text-on-color);
align-self: flex-end;
}
.chat-form { display: flex; gap: 8px; margin-top: 10px; }
.chat-form input {
flex: 1;
height: 2.5rem;
border: 1px solid var(--semantic-border-strong-03);
border-radius: var(--radius-pill);
padding: 0 1.25rem;
background: var(--components-field);
color: var(--semantic-text-user);
}
.method-keep {
border: 2px solid var(--semantic-interactive);
background: color-mix(in srgb, var(--semantic-interactive) 12%, var(--semantic-layer-02));
border-radius: var(--radius-card);
padding: 22px;
text-align: center;
margin-bottom: 28px;
color: var(--semantic-text-primary);
}
.method-keep h2 {
font-size: 24px;
color: var(--semantic-text-highlight);
}
.method-keep p {
color: var(--semantic-text-primary);
}
.orig-pay {
display: block;
margin: 40px auto 8px;
font-size: 10px;
color: var(--semantic-text-disabled-01, var(--color-grayscale-600));
background: none;
border: 1px dashed var(--semantic-border-strong-02);
padding: 14px;
min-height: 44px;
text-decoration: line-through;
}
.orig-pay.unlocked {
text-decoration: none;
color: var(--semantic-text-secondary);
border-style: solid;
}
.sig {
width: 100%;
height: 140px;
border: 1px dashed var(--semantic-border-strong-01);
border-radius: var(--radius-card);
background: var(--components-field);
touch-action: none;
cursor: crosshair;
}
.fees li {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid var(--semantic-border-strong-02);
opacity: 0;
transform: translateY(8px);
animation: in .5s forwards;
color: var(--semantic-text-primary);
}
.fees { list-style: none; padding: 0; }
.fees .total { font-weight: 700; font-size: 17px; color: var(--semantic-text-error); }
@keyframes in { to { opacity: 1; transform: none; } }
.cookie-wall {
position: fixed;
inset: 0;
z-index: 50;
background: var(--semantic-overlay);
display: flex;
align-items: flex-end;
justify-content: center;
padding: 0;
}
@media screen and (min-width: 48rem) {
.cookie-wall {
align-items: center;
padding: 1.5rem;
}
}
.cookie-wall.hidden { display: none; }
.cookie-card {
width: min(48rem, 100%);
background: var(--semantic-background);
border: 1px solid var(--semantic-border-strong-02);
border-radius: var(--radius-card) var(--radius-card) 0 0;
padding: 1.5rem;
max-height: min(88vh, 740px);
overflow: auto;
}
@media screen and (min-width: 48rem) {
.cookie-card { border-radius: var(--radius-card); }
}
.prefs { display: none; margin: 12px 0; max-height: 240px; overflow: auto; border: 1px solid var(--semantic-border-strong-02); border-radius: var(--radius-card); padding: 8px; background: var(--semantic-layer-02); }
.prefs.show { display: block; }
.pref {
display: flex;
justify-content: space-between;
gap: 8px;
align-items: center;
font-size: 13px;
padding: 8px;
border-bottom: 1px solid var(--semantic-border-strong-03);
color: var(--semantic-text-primary);
}
.toast {
position: fixed;
left: 50%;
bottom: 18px;
transform: translateX(-50%);
background: var(--color-grayscale-0);
color: var(--color-grayscale-900);
padding: 10px 14px;
border-radius: var(--radius-pill);
z-index: 80;
display: none;
font-weight: 600;
font-size: 13px;
}
.toast.show { display: block; }
.site-footer {
margin-top: auto;
flex-shrink: 0;
padding: 2rem 1rem 5rem;
font-size: 13px;
color: var(--semantic-text-secondary);
}
.site-footer .inner { width: 100%; }
@media screen and (min-width: 48rem) {
.site-footer { padding-left: 4rem; padding-right: 4rem; }
}
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 16px; }
.foot-links button, .site-footer a {
background: none;
border: 0;
color: var(--semantic-text-primary);
padding: 8px 0;
min-height: 44px;
font-weight: 600;
}
.colors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.swatch {
border: 1px solid var(--semantic-border-strong-03);
background: var(--semantic-layer-03);
border-radius: var(--radius-card);
padding: 18px 8px;
min-height: 72px;
color: var(--semantic-text-primary);
}
.sticky-help {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 15;
display: flex;
align-items: center;
gap: 0.5rem;
border: 0;
border-radius: var(--radius-pill);
background: var(--components-button-secondary);
color: var(--semantic-text-primary);
box-shadow: 0 4px 24px var(--semantic-overlay);
padding: 0.75rem 1rem;
font-weight: 600;
font-size: 17px;
}
@media screen and (min-width: 48rem) {
.sticky-help { bottom: 3rem; }
}
@media (max-width: 680px) {
.hero { grid-template-columns: 1fr; }
.header-nav span { display: none; }
.header-search { display: none; }
h1 { font-size: 24px; line-height: 32px; }
}
</style>
</head>
<body>
<header class="site-header">
<a class="logo" href="./index.html">
<img src="assets/favicon.svg" width="32" height="32" alt="">
<h3>Refund my order</h3>
</a>
<form class="header-search" id="search-form">
<input type="search" placeholder="Search shoes, not refunds" aria-label="Search">
</form>
<nav class="header-nav">
<button type="button" data-maze="track">Track</button>
<button type="button" data-keep data-keep-from="maze">Buy again</button>
<button type="button" class="ghost" id="cart-btn" data-keep data-keep-from="maze">Cart (2)</button>
<button type="button" class="theme-toggle" id="theme-toggle" aria-label="Switch color theme">◐</button>
</nav>
</header>
<div class="wrap">
<div class="progress" id="progress">
<div class="progress-top">
<span id="progress-label">Return completeness: 8%</span>
<span id="progress-eta">Est. 4–6 business weeks</span>
</div>
<div class="bar"><i id="progress-bar"></i></div>
</div>
<section class="panel active" data-step="maze" id="maze-panel">
<div data-maze-view="home">
<div class="card">
<div class="hero">
<div class="sneaker" aria-hidden="true">
<img src="assets/sneaker.svg" alt="" width="110" height="110">
</div>
<div>
<p class="muted" style="margin:0 0 4px">Your recent order</p>
<h1>AeroGlide 9000 — Midnight Fog</h1>
<p style="margin:0 0 8px"><strong>$129.99</strong> · Size 42 · Delivered yesterday, probably</p>
<div class="slip">
Packing slip (keep forever)<br>
Order <strong>#SM-8849-2011</strong> · Ship ZIP <strong>90210</strong><br>
Return window: “a reasonable amount of time”
</div>
</div>
</div>
</div>
<div class="card">
<h2>How can we help you stay?</h2>
<p class="muted">Looking for returns? They’re in a perfectly reasonable place.</p>
<div class="article-list">
<button class="article decoy" type="button" data-maze="status">Refund</button>
<button class="article" type="button" data-maze="track">Where is my package? (it’s already there)</button>
<button class="article" type="button" data-keep data-keep-from="maze">Write a 5-star review</button>
</div>
</div>
</div>
<div data-maze-view="help" hidden>
<p class="crumb"><button type="button" data-maze="home">Home</button> / Help Center</p>
<div class="card">
<h2>Help Center</h2>
<p>Most answers are about keeping what you already love.</p>
<div class="article-list">
<button class="article" type="button" data-maze="faqs">FAQs</button>
<button class="article" type="button" data-maze="track">Shipping emotions</button>
<button class="article decoy" type="button" data-maze="status">Check refund status</button>
</div>
</div>
</div>
<div data-maze-view="faqs" hidden>
<p class="crumb"><button type="button" data-maze="help">Help</button> / FAQs</p>
<div class="card">
<h2>Frequently Affirmed Questions</h2>
<div class="article-list">
<button class="article" type="button" data-maze="after">After your purchase</button>
<button class="article" type="button" data-maze="home">Before you had doubts</button>
<button class="article" type="button" data-keep data-keep-from="maze">How to style Midnight Fog</button>
</div>
</div>
</div>
<div data-maze-view="after" hidden>
<p class="crumb"><button type="button" data-maze="faqs">FAQs</button> / After your purchase</p>
<div class="card">
<h2>After your purchase</h2>
<button class="article decoy" type="button" data-maze="status">Check refund status</button>
<p style="margin:18px 0 0">
<button class="tiny" type="button" data-go="lookup">Start a return</button>
</p>
<p class="hint">Also see: gift wrapping, laces, and our award-winning loyalty spiral.</p>
</div>
</div>
<div data-maze-view="track" hidden>
<p class="crumb"><button type="button" data-maze="home">Home</button> / Track</p>
<div class="card">
<h2>Your shoes have arrived in your life</h2>
<p>Delivered to a porch that exists, spiritually. Tracking is complete. Returns are a different department, located in Help.</p>
<button class="btn-keep" type="button" data-keep data-keep-from="maze">Great, I’ll wear them</button>
<p><button class="tiny" type="button" data-maze="help">I still need help</button></p>
</div>
</div>
<div data-maze-view="status" hidden>
<p class="crumb"><button type="button" data-maze="home">Home</button> / Refund status</p>
<div class="card">
<p class="muted" style="margin:0 0 4px">Request RF-8849-2011</p>
<h2>Refund request received</h2>
<p>Status: <strong>Under review</strong> — typically 3–5 business days.</p>
<div class="slip">
Order #SM-8849-2011 · AeroGlide 9000 — Midnight Fog<br>
Your place in the review queue is held only while this page stays idle. Additional clicks restart the timer.
</div>
<button class="btn-keep" type="button" data-keep data-keep-from="maze">Leave it with us — we’ll notify you</button>
<p><button class="tiny" type="button" data-keep data-keep-from="maze">Cancel this request and keep shopping</button></p>
<p><button class="tiny" type="button" data-maze="help">Continue anyway (resets review to day 0)</button></p>
<p class="hint">No further action needed — unless you’d like to wait longer.</p>
</div>
</div>
</section>
<section class="panel" data-step="lookup">
<div class="card">
<h2>Find the order that wants to leave</h2>
<p class="muted">For your security, guest refunds are decorative.</p>
<button class="btn-ghost disabled-guest" type="button" id="guest-refund">Continue as guest</button>
<p class="error" id="guest-error"></p>
<hr style="border:0;border-top:1px solid var(--line);margin:18px 0">
<div class="field">
<label for="order-id">Order number</label>
<input id="order-id" autocomplete="off" placeholder="as printed on the universe">
<p class="hint">Must match the packing slip, including the # and dashes.</p>
</div>
<div class="field">
<label for="zip">Shipping ZIP</label>
<input id="zip" inputmode="numeric" autocomplete="off" placeholder="The glamorous one">
</div>
<div class="field">
<label>Human check</label>
<div class="captcha-box">
<div class="spin-shoe" id="spin-shoe" aria-hidden="true">
<img src="assets/sneaker.svg" alt="" width="48" height="48" id="spin-svg">
</div>
<div>
<strong>Click Verify when the shoe points left.</strong>
<p class="hint" style="margin:0">Right-facing shoes are still shopping.</p>
</div>
<button class="btn-navy" type="button" id="captcha-btn" style="width:auto;padding:0 14px">Verify</button>
</div>
<p class="error" id="captcha-error"></p>
</div>
<button class="btn-navy" type="button" id="lookup-btn">Look up order</button>
<p class="error" id="lookup-error"></p>
<p><button class="tiny" type="button" data-keep data-keep-from="lookup">Never mind, they fit in my soul</button></p>
</div>
</section>
<section class="panel" data-step="shame">
<div class="card">
<h1>These AeroGlides have already started bonding with your arches.</h1>
<p>Returning them now would interrupt a scientifically implied relationship.</p>
<div class="ticker"><div class="ticker-track" id="ticker-text">2,847 customers chose to keep their shoes today · 14 people are hugging their insoles · 2,847 customers chose to keep their shoes today · 14 people are hugging their insoles · </div></div>
<button class="btn-keep" type="button" data-keep data-keep-from="shame">Keep my AeroGlides (smart)</button>
<p style="text-align:center;margin:18px 0 0">
<button class="tiny" type="button" data-go="reason">I don’t like nice things</button>
</p>
</div>
</section>
<section class="panel" data-step="reason">
<div class="card">
<h2>Why are you like this ?</h2>
<p class="muted">Required before we can continue. Some reasons include fees; others are unavailable from this screen.</p>
<p class="error" id="reason-error"></p>
<div class="choices" role="radiogroup" aria-label="Return reason">
<label class="choice pre">
<input type="radio" name="reason" value="mind" checked>
<span><strong>Changed my mind</strong><span class="fee">50% restocking fee</span></span>
</label>
<label class="choice">
<input type="radio" name="reason" value="double">
<span>I do not wish to not keep these shoes</span>
</label>
<label class="choice locked">
<input type="radio" name="reason" value="defect" disabled>
<span><strong>Defective</strong> — photo evidence required first (that’s the next step, which you can’t reach from here)</span>
</label>
<label class="choice">
<input type="radio" name="reason" value="quick">
<span>Arrived too quickly; I wasn’t emotionally ready</span>
</label>
<label class="choice">
<input type="radio" name="reason" value="size">
<span>Wrong size (the box said 42, my feet said “maybe”)</span>
</label>
<label class="choice">
<input type="radio" name="reason" value="listed">
<span>Not as described (they are, in fact, shoes)</span>
</label>
</div>
<button class="btn-navy" type="button" id="reason-btn">Continue</button>
<p style="text-align:center;margin:14px 0 0">
<button class="tiny" type="button" data-keep data-keep-from="reason">Never mind — I’ll keep them</button>
</p>
</div>
</section>
<section class="panel" data-step="photos">
<div class="card" id="photo-card">
<h2>Prove the shoes still exist</h2>
<p>Upload a JPEG named <strong>RETURN_SHOE_LEFT.jpg</strong> and confirm laboratory conditions.</p>
<div class="checklist" id="photo-checks">
<label class="check"><input type="checkbox" class="cond"> Original box, unfolded along factory creases</label>
<label class="check"><input type="checkbox" class="cond"> Tags attached, spiritually</label>
<label class="check"><input type="checkbox" class="cond"> Humidity under 40%</label>
<label class="check"><input type="checkbox" class="cond"> Photographed in museum lighting</label>
<label class="check"><input type="checkbox" class="cond"> Left shoe facing west</label>
<label class="check"><input type="checkbox" class="cond"> Soul of the shoe is intact</label>
</div>
<div class="field">
<label for="photo-file">Condition photos (6 angles, 1 file)</label>
<input id="photo-file" type="file" accept="image/jpeg,.jpg,.jpeg">
</div>
<p class="error" id="photo-error"></p>
<p id="sample-wrap" hidden>
<button class="tiny" type="button" id="sample-photo">Use our sample photo (everyone does)</button>
</p>
<button class="btn-navy" type="button" id="photo-btn">Submit evidence</button>
<p><button class="tiny" type="button" data-keep data-keep-from="photos">They look fine in this lighting. I’ll keep them.</button></p>
</div>
</section>
<section class="panel" data-step="retain">
<div class="card" id="retain-main">
<div class="urgency">
<span>Return window expires in <span id="countdown">3:00</span></span>
<span>Only 2 slots left today</span>
</div>
<h2>Wait. Special loyalty offers.</h2>
<p>Customers who continue usually regret the cardio.</p>
<button class="btn-amber" type="button" data-keep data-keep-from="retain">Keep them &amp; take 20% off your next identical pair</button>
<button class="btn-keep" type="button" id="exchange-btn">Exchange for a different color</button>
<button class="btn-ghost" type="button" id="pause-btn" style="margin-top:10px">Pause return for 30 days</button>
<div style="height: 280px"></div>
<p style="text-align:center">
<button class="tiny" type="button" data-go="chat">continue cancellation</button>
</p>
</div>
<div class="card" id="retain-colors" hidden>
<h2>Pick a color you don’t already own</h2>
<div class="colors">
<button class="swatch" type="button" data-color>Midnight Fog — you already own this</button>
<button class="swatch" type="button" data-color>Storm Drain — out of stock</button>
<button class="swatch" type="button" data-color>Concrete Poem — out of stock</button>
<button class="swatch" type="button" data-color>Charcoal Adjacent — out of stock</button>
<button class="swatch" type="button" data-color>Black but marketing — out of stock</button>
<button class="swatch" type="button" data-color>Foggy Midnight — out of stock</button>
</div>
<p class="error" id="color-error"></p>
<p><button class="tiny" type="button" id="color-back">Back to offers</button></p>
</div>
</section>
<section class="panel" data-step="chat">
<div class="card">
<h2>SoleBot is here to retain you</h2>
<p class="muted">Phone alternative: call Tuesday 3:00–3:15am, GMT-12, ask for Brenda.</p>
<div class="chat" id="chat-log"></div>
<form class="chat-form" id="chat-form">
<input id="chat-input" autocomplete="off" placeholder="Type a totally normal request">
<button class="btn-navy" type="submit" style="width:auto;padding:0 16px">Send</button>
</form>
</div>
</section>
<section class="panel" data-step="method">
<div class="card">
<div class="method-keep">
<h2>Instant SoleBucks (recommended)</h2>
<p>Available in 0 seconds. Never expires, except when it does.</p>
<button class="btn-keep" type="button" data-keep data-keep-from="method">Get SoleBucks now</button>
</div>
<label class="check"><input type="checkbox" id="protect" checked> Add $9.99 return protection (pre-selected because you care)</label>
<p class="hint">Protection continues automatically so you’re never unprotected.</p>
<label class="check"><input type="checkbox" id="sock" checked> Also return the free mystery sock (voids eligibility)</label>
<p class="error" id="method-error"></p>
<button class="orig-pay" type="button" id="orig-pay">original payment method</button>
<p class="hint">Some customers report this button looks broken. That’s branding.</p>
</div>
</section>
<section class="panel" data-step="legalese">
<div class="card">
<h2>Almost a refund</h2>
<label class="check"><input type="checkbox" id="donate" checked> I agree this return is a donation to our warehouse</label>
<label class="check"><input type="checkbox" id="authorize"> I do not not authorize a refund</label>
<div class="field">
<label>Sign slowly, with your full legal name, as it appears on the box</label>
<canvas class="sig" id="sig" width="800" height="280"></canvas>
<p class="hint">Fast scribbles are interpreted as enthusiasm for the product.</p>
</div>
<p class="error" id="legal-error"></p>
<button class="btn-navy" type="button" id="legal-btn">Submit my little protest</button>
<button class="btn-keep secondary" type="button" data-keep data-keep-from="legalese">Donate the shoes instead</button>
</div>
</section>
<section class="panel" data-step="fees">
<div class="card">
<h1>Refund approved!</h1>
<p class="muted">We value your time, which is why the math is a surprise.</p>
<ul class="fees" id="fee-list"></ul>
<p id="feebucks" hidden>Issued as <strong>SoleBucks</strong> expiring in 24 hours. They cannot be combined with themselves.</p>
<button class="btn-keep" type="button" id="shop-refund" hidden>Shop the refund</button>
<p><button class="tiny" type="button" id="cancel-sub" hidden>Cancel SolePlus protection</button></p>
<p><button class="tiny" type="button" id="policy-btn" hidden>Download 47-page policy PDF</button></p>
<pre id="policy" hidden style="white-space:pre-wrap;font-size:.75rem;color:var(--muted);max-height:200px;overflow:auto;background:var(--semantic-layer-03);padding:12px;border-radius:var(--radius-card)">MANAGE MY ORDER RETURN POLICY (abridged from 47 pages)
§1. A return is a conversation, not a right.
§2. Restocking is 35% or the amount required to reach seventeen cents, whichever is funnier.
§3. Return shipping is paid by the shoes' former friend.
§4. The sustainability levy funds a PDF about sustainability.
§5. Processing covers the cost of processing the processing fee.
§6. SoleBucks are not money, credit, or usable.
§7. By existing on this page you agree you enjoyed the AeroGlides.
§8. Return protection renews monthly at $9.99. Removing it from a return does not remove it from you. Cancellation is available in the Help Center.
§9. This document is satire. Real stores should not do this. See deceptive.design.
(Pages 3–46 intentionally left difficult.)</pre>
</div>
</section>
<section class="panel" data-step="kept">
<div class="card">
<h1>A wise choice.</h1>
<p>Your AeroGlide 9000s remain in a committed relationship with your feet. A second pair is being considered by our warehouse, as a precaution.</p>
<button class="btn-keep" type="button" id="still-going">I’m not done</button>
</div>
</section>
</div>
<footer class="site-footer">
<div class="inner">
<div class="foot-links">
<button type="button" data-maze="help">Help</button>
<button type="button" data-keep data-keep-from="maze">Careers</button>
<button type="button" data-keep data-keep-from="maze">Investors</button>
<button type="button" data-maze="home">Store locator (online only)</button>
<a href="https://www.deceptive.design/types" target="_blank" rel="noopener">Pattern glossary</a>
</div>
</div>
</footer>
<button type="button" class="sticky-help" data-maze="help">Help</button>
<div class="cookie-wall" id="cookie-wall" role="dialog" aria-modal="true" aria-labelledby="cookie-title">
<div class="cookie-card">
<h2 id="cookie-title">We value your privacy almost as much as your insole data</h2>
<p>To provide shoes, we need cookies, telemetry, and a light personality profile.</p>
<button class="btn-keep" type="button" id="accept-all">Accept all &amp; shop</button>
<p style="text-align:center;margin:8px 0 0">
<button class="tiny" type="button" id="manage-cookies">Manage</button>
</p>
<div class="prefs" id="prefs"></div>
<button class="btn-ghost" type="button" id="save-prefs" hidden>Save preferences</button>
<p style="text-align:center;margin:8px 0 0">
<button class="tiny" type="button" id="reject-all" hidden>Reject all non-essential</button>
</p>
</div>
</div>
<div class="toast" id="toast"></div>
<script>
(function () {
const ORDER = "#SM-8849-2011";
const ZIP = "90210";
const PASSPHRASE = "i really want a refund";
const STEPS = ["maze", "lookup", "shame", "reason", "photos", "retain", "chat", "method", "legalese", "fees"];
const PROGRESS = {
maze: [8, "Est. 4–6 business weeks"],
lookup: [14, "Est. 3–5 business weeks"],
shame: [31, "Est. 11 business days"],
reason: [22, "Recalculating…"],
photos: [40, "Est. 9 business days"],
retain: [41, "Offer processing"],
chat: [55, "Brenda is on another line"],
method: [62, "Selecting a worse option"],
legalese: [70, "Legal is stretching"],
fees: [100, "Complete"],
kept: [99, "Relationship saved"]
};
let step = "maze";
let keepFrom = "maze";
let captchaOk = false;
let shoeAngle = 0;
let photoFails = 0;
let sampleArmed = false;
let chatFails = 0;
let countdown = 180;
let countTimer = null;
let origUnlocked = false;
const $ = (sel, root) => (root || document).querySelector(sel);
const $$ = (sel, root) => Array.from((root || document).querySelectorAll(sel));
(function initTheme() {
const preferred = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
document.documentElement.setAttribute("data-theme", preferred);
$("#theme-toggle").addEventListener("click", () => {
const next = document.documentElement.getAttribute("data-theme") === "dark" ? "light" : "dark";
document.documentElement.setAttribute("data-theme", next);
});
})();
function toast(msg) {
const el = $("#toast");
el.textContent = msg;
el.classList.add("show");
clearTimeout(toast._t);
toast._t = setTimeout(() => el.classList.remove("show"), 2400);
}
function setProgress(name) {
const box = $("#progress");
if (name === "maze" && !$("#cookie-wall").classList.contains("hidden")) {
box.classList.remove("show");
return;
}
box.classList.add("show");
const [pct, eta] = PROGRESS[name] || [8, ""];
$("#progress-bar").style.width = pct + "%";
$("#progress-label").textContent = "Return completeness: " + pct + "%";
$("#progress-eta").textContent = eta;
}
let cart = 2;
function bumpCart(msg) {
cart += 1;
$("#cart-btn").textContent = "Cart (" + cart + ")";
if (msg) toast(msg);
}
let keepCount = 2847;
function bumpTicker() {
keepCount += Math.floor(Math.random() * 5) + 1;
const line = keepCount.toLocaleString() + " customers chose to keep their shoes today · 14 people are hugging their insoles · ";
const el = $("#ticker-text");
if (el) el.textContent = line + line;
}
function showStep(name) {
step = name;
$$(".panel").forEach((p) => p.classList.toggle("active", p.dataset.step === name));
setProgress(name);
window.scrollTo({ top: 0, behavior: "smooth" });
if (name === "retain") startCountdown();
else stopCountdown();
if (name === "chat") bootChat();
if (name === "fees") playFees();
if (name === "shame") bumpTicker();
if (name === "kept") bumpCart("Our warehouse added a precautionary second pair.");
resetIdle();
}
function mazeView(view) {
showStep("maze");
$$("[data-maze-view]").forEach((el) => {
el.hidden = el.getAttribute("data-maze-view") !== view;
});
if (view !== "home") setProgress("maze");
}
const IDLE_MS = 90000;
const IDLE_SAFE = ["maze", "kept", "fees"];
let idleTimer = null;
function resetIdle() {
clearTimeout(idleTimer);
if (IDLE_SAFE.indexOf(step) !== -1) return;
idleTimer = setTimeout(expireSession, IDLE_MS);
}
function expireSession() {
$("#order-id").value = "";
$("#zip").value = "";
$("#lookup-error").textContent = "";
$("#guest-error").textContent = "";
$("#captcha-error").textContent = "";
captchaOk = false;
$$(".cond").forEach((c) => { c.checked = false; });
$("#photo-file").value = "";
$("#photo-error").textContent = "";
sampleArmed = false;
sctx.clearRect(0, 0, sig.width, sig.height);
totalLen = 0;
drawMs = 0;
$("#donate").checked = true;
$("#authorize").checked = false;
$("#legal-error").textContent = "";
mazeView("home");
toast("Session expired for your security. Your progress was not saved.");
}
["pointerdown", "keydown", "wheel", "touchstart"].forEach((evt) => {
window.addEventListener(evt, resetIdle, { passive: true });
});
document.addEventListener("click", (e) => {
const go = e.target.closest("[data-go]");
if (go) showStep(go.getAttribute("data-go"));
const maze = e.target.closest("[data-maze]");
if (maze && $("#cookie-wall").classList.contains("hidden")) {
mazeView(maze.getAttribute("data-maze"));
}
const keep = e.target.closest("[data-keep]");
if (keep) {
keepFrom = keep.getAttribute("data-keep-from") || step;
showStep("kept");
}
});
$("#search-form").addEventListener("submit", (e) => {
e.preventDefault();
toast("No results for “refund”. Showing best sellers.");
});
const prefNames = [
"Strictly necessary checkout pixels",
"Strictly necessary marketing",
"Strictly necessary partner auctions",
"Shoe telemetry (stride length)",
"Gait data shared with partners",
"Insole moisture analytics",
"Ads about shoes you just bought",
"Cross-device sole graph",
"Sell adjacent foot size to friends",
"Emotional arch profiling",
"Warehouse loyalty scoring",
"Return-intent suppression model",
"Midnight Fog lookalike audiences",
"Left-foot vs right-foot politics",
"Laces as a service analytics",
"Porch-camera vibe check",
"Cart abandonment lullabies",
"Store-credit conversion nudges",
"Confirmshaming A/B tests",
"Fake urgency entropy",
"Social proof fabrication budget",
"Roach motel depth research",
"Brenda chatbot retention scripts",
"ZIP code prestige ranking",
"Packing-slip nostalgia",
"Mystery sock personalization",
"Sustainability levy storytelling",
"Restocking-fee elasticity",
"Captcha dizziness studies",
"Signature-pad friction science",
"SoleBucks decay curves",
"Review-gunning for keepers",
"Buy-again one-click traps",
"Help-center labyrinth heatmaps",
"Tiny-link click-through shame",
"Pre-checked donation capture",
"Double-negative comprehension",
"Humidity checkbox honesty",
"West-facing shoe cosmology",
"Arches bonding narrative",
"Customer-of-the-day ticker",
"Pause-to-reset countdown IP",
"Exchange-to-nowhere funnel",
"Original-payment camouflage",
"Seventeen-cent rounding art",
"PDF policy unreadability"
];
const prefs = $("#prefs");
prefNames.forEach((name, i) => {
const row = document.createElement("label");
row.className = "pref";
const required = i < 3;
row.innerHTML = `<span>${name}${required ? " *" : ""}</span><input type="checkbox" data-pref="${i}" ${required ? "data-required" : ""} checked>`;
prefs.appendChild(row);
});
prefs.addEventListener("change", (e) => {
const box = e.target.closest("input[data-pref]");
if (!box || box.checked) return;
if (box.hasAttribute("data-required")) {
box.checked = true;
toast("Required for a functioning sole.");
return;
}
setTimeout(() => {
const dormant = $$("input[data-pref]", prefs).filter((b) => b !== box && !b.checked);
if (dormant.length) dormant[Math.floor(Math.random() * dormant.length)].checked = true;
}, 800);
});
$("#manage-cookies").addEventListener("click", () => {
prefs.classList.add("show");
$("#save-prefs").hidden = false;
$("#reject-all").hidden = false;
});
$("#reject-all").addEventListener("click", () => {
const boxes = $$("input[data-pref]", prefs);
boxes.forEach((b) => { b.checked = false; });
toast("Reject all applied.");
setTimeout(() => {
boxes.forEach((b) => { if (b.hasAttribute("data-required")) b.checked = true; });
const optional = boxes.filter((b) => !b.hasAttribute("data-required"));
for (let i = 0; i < 4 && optional.length; i += 1) {
optional.splice(Math.floor(Math.random() * optional.length), 1)[0].checked = true;
}
toast("3 strictly necessary and 4 essential items were retained.");
}, 900);
});
function dismissCookies() {
$("#cookie-wall").classList.add("hidden");
setProgress("maze");
}
$("#accept-all").addEventListener("click", () => {
dismissCookies();
bumpCart("Added a starter pair to your cart.");
});
$("#save-prefs").addEventListener("click", dismissCookies);
$("#guest-refund").addEventListener("click", () => {
$("#guest-error").textContent = "Guest refunds are disabled for your security, and ours.";
});
(function spin() {
shoeAngle = (shoeAngle + 2.4) % 360;
$("#spin-svg").style.transform = "rotate(" + shoeAngle + "deg)";
requestAnimationFrame(spin);
})();
$("#captcha-btn").addEventListener("click", () => {
const facingLeft = shoeAngle > 145 && shoeAngle < 215;
if (facingLeft) {
captchaOk = true;
$("#captcha-error").textContent = "Verified. That shoe was leaving.";
} else {
captchaOk = false;
$("#captcha-error").textContent = "Try again. That was a right shoe.";
}
});
$("#lookup-btn").addEventListener("click", () => {
const id = $("#order-id").value.trim();
const zip = $("#zip").value.trim();
if (!captchaOk) {
$("#lookup-error").textContent = "The shoe still thinks you’re a robot.";
return;
}
if (id !== ORDER || zip !== ZIP) {
$("#lookup-error").textContent = "We couldn’t find an order that wants to leave.";
return;
}
$("#lookup-error").textContent = "";
showStep("shame");
});
const guilt = [
"Most people stay and save money, dignity, and arch support.",
"Are you sure? They’ve already started bonding.",
"Changing your mind is a restocking event."
];
$("#reason-btn").addEventListener("click", () => {
const val = ($("input[name=reason]:checked") || {}).value;
if (val === "double") {
keepFrom = "reason";
showStep("kept");
return;
}
if (val === "mind" || val === "quick" || val === "listed") {
$("#reason-error").textContent = guilt[Math.floor(Math.random() * guilt.length)];
$("#progress-bar").style.width = "16%";
$("#progress-label").textContent = "Return completeness: 16%";
return;
}
if (val === "size") {
$("#reason-error").textContent = "";
showStep("photos");
return;
}
$("#reason-error").textContent = "Please select a reason we like less.";
});
function photoValid(file) {
if (!file) return false;
const name = file.name === "RETURN_SHOE_LEFT.jpg";
const type = file.type === "image/jpeg" || /\.jpe?g$/i.test(file.name);
return name && type;
}
$("#photo-file").addEventListener("change", () => {
sampleArmed = false;
const file = $("#photo-file").files[0];
if (file && !photoValid(file)) {
photoFails += 1;
$("#photo-error").textContent = "We only accept JPEG files named RETURN_SHOE_LEFT.jpg.";
if (photoFails >= 2) $("#sample-wrap").hidden = false;
}
});
$("#sample-photo").addEventListener("click", () => {
const canvas = document.createElement("canvas");
canvas.width = 240;
canvas.height = 160;
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#1e293b";
ctx.fillRect(0, 0, 240, 160);
ctx.fillStyle = "#86efac";
ctx.fillRect(40, 90, 150, 24);
ctx.fillStyle = "#e2e8f0";
ctx.beginPath();
ctx.ellipse(120, 80, 70, 28, -0.4, 0, Math.PI * 2);
ctx.fill();
canvas.toBlob((blob) => {
const file = new File([blob], "RETURN_SHOE_LEFT.jpg", { type: "image/jpeg" });
const dt = new DataTransfer();
dt.items.add(file);
$("#photo-file").files = dt.files;
sampleArmed = true;
$("#photo-error").textContent = "Sample attached. The left shoe has been photographed by legal.";
}, "image/jpeg");
});
$("#photo-card").addEventListener("scroll", uncheckSome, true);
window.addEventListener("scroll", uncheckSome, { passive: true });
let lastUncheck = 0;
function uncheckSome() {
if (step !== "photos") return;
const now = Date.now();
if (now - lastUncheck < 1200) return;
lastUncheck = now;
const boxes = $$(".cond").filter((c) => c.checked);
if (!boxes.length) return;
boxes[Math.floor(Math.random() * boxes.length)].checked = false;
toast("Condition changed while you weren’t looking.");
}
$("#photo-btn").addEventListener("click", () => {
const all = $$(".cond").every((c) => c.checked);
const file = $("#photo-file").files[0];
if (!all || (!photoValid(file) && !sampleArmed)) {
photoFails += 1;
if (photoFails >= 2) $("#sample-wrap").hidden = false;
$("#photo-error").textContent = !all
? "Every laboratory condition must remain checked simultaneously."
: "We only accept JPEG files named RETURN_SHOE_LEFT.jpg.";
return;
}
showStep("retain");
});
function startCountdown() {
stopCountdown();
countdown = 180;
renderCount();
countTimer = setInterval(() => {
countdown -= 1;
if (countdown <= 0) countdown = 180;
renderCount();
}, 1000);
}
function stopCountdown() {
clearInterval(countTimer);
countTimer = null;
}
function renderCount() {
const m = Math.floor(countdown / 60);
const s = String(countdown % 60).padStart(2, "0");
$("#countdown").textContent = m + ":" + s;
}
document.addEventListener("visibilitychange", () => {
if (document.hidden && step === "retain") {
countdown = 180;
toast("You paused. The window reset for your convenience.");
}
});
$("#pause-btn").addEventListener("click", () => {
countdown = 180;
renderCount();
toast("Return paused. The countdown has been refreshed.");
});
$("#exchange-btn").addEventListener("click", () => {
$("#retain-main").hidden = true;
$("#retain-colors").hidden = false;
});
$("#color-back").addEventListener("click", () => {
$("#retain-colors").hidden = true;
$("#retain-main").hidden = false;
});
$$("[data-color]").forEach((btn) => {
btn.addEventListener("click", () => {
$("#color-error").textContent = btn.textContent.includes("already")
? "You already own Midnight Fog. That’s the problem."
: "Out of stock in every warehouse including the imaginary one.";
bumpCart("Reserved the in-stock alternative in your cart.");
});
});
const chatLog = $("#chat-log");
function addBubble(text, who) {
const b = document.createElement("div");
b.className = "bubble " + who;
b.textContent = text;
chatLog.appendChild(b);
chatLog.scrollTop = chatLog.scrollHeight;
}
function bootChat() {
if (chatLog.dataset.ready) return;
chatLog.dataset.ready = "1";
addBubble("Hi, I’m SoleBot! I can help you keep your shoes. What would you like to reorder?", "bot");
}
$("#chat-form").addEventListener("submit", (e) => {
e.preventDefault();
const raw = $("#chat-input").value;
const msg = raw.trim();
if (!msg) return;
$("#chat-input").value = "";
addBubble(msg, "me");
const lower = msg.toLowerCase();
if (lower === PASSPHRASE && chatFails >= 3) {
addBubble("Fine. A specialist will pretend to listen. Continue.", "bot");
setTimeout(() => showStep("method"), 700);
return;
}
chatFails += 1;
if (/refund|return|cancel|money back/.test(lower)) {
addBubble("Great, I’ve added another pair to your cart. Midnight Fog looks lonely without a backup.", "bot");
bumpCart();
} else if (/brenda|phone|human|agent/.test(lower)) {
addBubble("Brenda is available Tuesday 3:00–3:15am GMT-12. Please hold until then.", "bot");
} else {
addBubble("I heard “keep”. Confirming keep.", "bot");
}
if (chatFails === 3) {
addBubble("If you really mean it, type exactly: I really want a refund", "bot");
}
});
$("#protect").addEventListener("change", () => {
if (!$("#protect").checked) {
$("#method-error").textContent = "Removed from this return. Your monthly protection plan is unaffected.";
}
});
$("#orig-pay").addEventListener("click", () => {
if ($("#sock").checked) {
$("#method-error").textContent = "Returning the mystery sock voids eligibility. Uncheck to continue existing.";
return;
}
if ($("#protect").checked) {
$("#method-error").textContent = "Return protection is still on, which protects us.";
return;
}
origUnlocked = true;
$("#orig-pay").classList.add("unlocked");
$("#orig-pay").textContent = "original payment method (still not recommended)";
showStep("legalese");
});
const sig = $("#sig");
const sctx = sig.getContext("2d");
let drawing = false;
let totalLen = 0;
let drawMs = 0;
let strokeStart = 0;
let last = null;
function pt(e) {
const r = sig.getBoundingClientRect();
const src = e.touches ? e.touches[0] : e;
return { x: (src.clientX - r.left) * (sig.width / r.width), y: (src.clientY - r.top) * (sig.height / r.height) };
}
function startDraw(e) {
e.preventDefault();
drawing = true;
last = pt(e);
strokeStart = performance.now();
}
function moveDraw(e) {
if (!drawing) return;
e.preventDefault();
const p = pt(e);
sctx.strokeStyle = document.documentElement.getAttribute("data-theme") === "dark" ? "#fff" : "#1f2225";
sctx.lineWidth = 3;
sctx.lineCap = "round";
sctx.beginPath();
sctx.moveTo(last.x, last.y);
sctx.lineTo(p.x, p.y);
sctx.stroke();
totalLen += Math.hypot(p.x - last.x, p.y - last.y);
last = p;
}
function endDraw() {
if (drawing) drawMs += performance.now() - strokeStart;
drawing = false;
last = null;
}
sig.addEventListener("pointerdown", startDraw);
sig.addEventListener("pointermove", moveDraw);
window.addEventListener("pointerup", endDraw);
$("#legal-btn").addEventListener("click", () => {
if ($("#donate").checked) {
$("#legal-error").textContent = "You still agreed this is a donation. Uncheck that gift.";
return;
}
if (!$("#authorize").checked) {
$("#legal-error").textContent = "Please confirm you do not not authorize a refund.";
return;
}
const speed = totalLen / Math.max(drawMs, 1) * 1000;
if (drawMs < 2000 || totalLen < 380) {
$("#legal-error").textContent = "Please sign your full legal name, slowly.";
return;
}
if (speed > 420) {
$("#legal-error").textContent = "That looks like a scribble. Use your boarding-school cursive.";
return;
}
showStep("fees");
});
let feesPlayed = false;
function revealFeeExtras() {
$("#feebucks").hidden = false;
$("#shop-refund").hidden = false;
$("#cancel-sub").hidden = false;
$("#policy-btn").hidden = false;
}
function playFees() {
if (feesPlayed) {
revealFeeExtras();
return;
}
feesPlayed = true;
const rows = [
["Order", "$129.99", 0, ""],
["Restocking (35%)", "−$45.50", 400, ""],
["Return shipping", "−$14.99", 900, ""],
["Inspection / sustainability levy", "−$8.99", 1400, ""],
["Processing", "−$60.34", 1900, ""],
["Amount due to you", "$0.17", 2500, "total"],
["SolePlus protection (payment 1 of 12)", "−$9.99", 3400, ""],
["Net position", "You owe $9.82", 4100, "total"]
];
const list = $("#fee-list");
list.innerHTML = "";
rows.forEach((row, i) => {
setTimeout(() => {
const li = document.createElement("li");
li.className = row[3];
li.innerHTML = `<span>${row[0]}</span><span>${row[1]}</span>`;
li.style.animationDelay = "0s";
list.appendChild(li);
if (i === rows.length - 1) revealFeeExtras();
}, row[2]);
});
}
$("#cancel-sub").addEventListener("click", () => {
toast("Cancellation of SolePlus is handled by the Help Center.");
setTimeout(() => mazeView("help"), 900);
});
$("#shop-refund").addEventListener("click", () => {
toast("Your $0.17 bought return-shipping insurance. Balance: $0.00.");
$("#shop-refund").textContent = "Balance: $0.00";
});
$("#policy-btn").addEventListener("click", () => {
$("#policy").hidden = !$("#policy").hidden;
});
$("#still-going").addEventListener("click", () => {
showStep(keepFrom);
if (keepFrom === "maze") mazeView("home");
});
})();
</script>
</body>
</html>