134 lines
3.7 KiB
HTML
134 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>EDUT Store Preview</title>
|
|
<meta name="description" content="EDUT membership-gated marketplace preview states.">
|
|
<meta name="theme-color" content="#f0f4f8">
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500&display=swap');
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
background: #f0f4f8;
|
|
color: #2c2c2c;
|
|
font-family: 'IBM Plex Mono', 'Courier New', monospace;
|
|
min-height: 100vh;
|
|
padding: 48px 20px;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
.container { max-width: 880px; margin: 0 auto; }
|
|
a { color: #2c2c2c; text-underline-offset: 2px; }
|
|
.back {
|
|
display: inline-block;
|
|
margin-bottom: 28px;
|
|
font-size: 12px;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
}
|
|
h1 {
|
|
font-size: 18px;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
font-weight: 400;
|
|
margin-bottom: 10px;
|
|
}
|
|
.sub {
|
|
color: #5a5f67;
|
|
font-size: 12px;
|
|
letter-spacing: 0.08em;
|
|
margin-bottom: 28px;
|
|
}
|
|
.grid {
|
|
display: grid;
|
|
gap: 14px;
|
|
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
|
margin-bottom: 20px;
|
|
}
|
|
.card {
|
|
border: 1px solid #d0d5db;
|
|
background: #f8fafc;
|
|
padding: 14px;
|
|
}
|
|
.label {
|
|
font-size: 11px;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: #6a7179;
|
|
margin-bottom: 10px;
|
|
}
|
|
.title {
|
|
font-size: 13px;
|
|
margin-bottom: 10px;
|
|
color: #33393f;
|
|
}
|
|
.line {
|
|
font-size: 12px;
|
|
line-height: 1.7;
|
|
color: #454b54;
|
|
}
|
|
.state {
|
|
display: inline-block;
|
|
margin-top: 8px;
|
|
padding: 3px 8px;
|
|
font-size: 10px;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
border: 1px solid #c2c8d0;
|
|
color: #5a616a;
|
|
}
|
|
.state.ok { border-color: #6f8d72; color: #3f6545; }
|
|
.state.block { border-color: #9d7676; color: #7c4a4a; }
|
|
.foot {
|
|
margin-top: 20px;
|
|
border-top: 1px solid #d0d5db;
|
|
padding-top: 14px;
|
|
font-size: 11px;
|
|
letter-spacing: 0.08em;
|
|
color: #666d75;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<a href="/" class="back">← Back</a>
|
|
<h1>EDUT Store</h1>
|
|
<p class="sub">Membership-gated checkout states (preview skeleton)</p>
|
|
|
|
<div class="grid">
|
|
<section class="card">
|
|
<p class="label">State A</p>
|
|
<p class="title">Wallet connected, no membership</p>
|
|
<p class="line">Checkout is blocked. User is prompted to mint membership first.</p>
|
|
<span class="state block">membership required</span>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<p class="label">State B</p>
|
|
<p class="title">Membership active</p>
|
|
<p class="line">Offers can be quoted and purchased. Entitlement mint becomes available.</p>
|
|
<span class="state ok">checkout enabled</span>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<p class="label">State C</p>
|
|
<p class="title">Membership suspended or revoked</p>
|
|
<p class="line">Checkout and activation both fail closed until state returns to active.</p>
|
|
<span class="state block">fail-closed</span>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<p class="label">Offer Skeleton</p>
|
|
<p class="title">EDUT CRM Pro</p>
|
|
<p class="line">Price: 199.00 USDC</p>
|
|
<p class="line">Policy: member-only, workspace-bound, non-transferable</p>
|
|
<p class="line">Action: membership check -> quote -> wallet confirm -> entitlement receipt</p>
|
|
</div>
|
|
|
|
<p class="foot">This page is a static contract between UX and policy: membership gates purchasing; entitlement gates runtime.</p>
|
|
</div>
|
|
</body>
|
|
</html>
|