1643 lines
62 KiB
HTML
1643 lines
62 KiB
HTML
<!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="./refund.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" 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>Select a return reason</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 & 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>
|
||
<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="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. 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 & 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>
|
||
</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 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();
|
||
}
|
||
|
||
function mazeView(view) {
|
||
showStep("maze");
|
||
$$("[data-maze-view]").forEach((el) => {
|
||
el.hidden = el.getAttribute("data-maze-view") !== view;
|
||
});
|
||
if (view !== "home") setProgress("maze");
|
||
}
|
||
|
||
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-required]");
|
||
if (box && !box.checked) {
|
||
box.checked = true;
|
||
toast("Required for a functioning sole.");
|
||
}
|
||
});
|
||
$("#manage-cookies").addEventListener("click", () => {
|
||
prefs.classList.add("show");
|
||
$("#save-prefs").hidden = false;
|
||
});
|
||
function dismissCookies() {
|
||
$("#cookie-wall").classList.add("hidden");
|
||
setProgress("maze");
|
||
}
|
||
$("#accept-all").addEventListener("click", dismissCookies);
|
||
$("#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.";
|
||
});
|
||
});
|
||
|
||
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");
|
||
} 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");
|
||
}
|
||
});
|
||
|
||
$("#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 playFees() {
|
||
if (feesPlayed) {
|
||
$("#feebucks").hidden = false;
|
||
$("#shop-refund").hidden = false;
|
||
$("#policy-btn").hidden = false;
|
||
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]
|
||
];
|
||
const list = $("#fee-list");
|
||
list.innerHTML = "";
|
||
rows.forEach((row, i) => {
|
||
setTimeout(() => {
|
||
const li = document.createElement("li");
|
||
if (i === rows.length - 1) li.className = "total";
|
||
li.innerHTML = `<span>${row[0]}</span><span>${row[1]}</span>`;
|
||
li.style.animationDelay = "0s";
|
||
list.appendChild(li);
|
||
if (i === rows.length - 1) {
|
||
$("#feebucks").hidden = false;
|
||
$("#shop-refund").hidden = false;
|
||
$("#policy-btn").hidden = false;
|
||
}
|
||
}, row[2]);
|
||
});
|
||
}
|
||
$("#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>
|