52 lines
2.4 KiB
HTML
52 lines
2.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Agent Market (demo)</title>
|
|
<link rel="stylesheet" href="/static/styles.css">
|
|
<style id="user-css"></style>
|
|
</head>
|
|
<body>
|
|
<!-- Protected: the test banner, the agent badge and the checkout/fee panels can't be restyled by themes. -->
|
|
<div class="testbar" data-protected>TEST DEMO: all listings are fake and payments run in test mode. No real money moves.</div>
|
|
<header class="top">
|
|
<div class="brand"><span class="logo">◆</span> <span id="logoText">Agent Market</span></div>
|
|
<nav>
|
|
<button class="link" data-say="show me everything">Browse</button>
|
|
<button class="link" data-event="sell">Sell</button>
|
|
<a class="link" href="/agent.json" target="_blank">For agents</a>
|
|
<button class="link" id="resetLook" title="Restore the default look">Reset look</button>
|
|
<span id="agentBadge" class="badge" data-protected>agent: …</span>
|
|
</nav>
|
|
</header>
|
|
|
|
<main id="page">
|
|
<section class="hero-sec" data-section="hero">
|
|
<h1 id="headline">A marketplace you can just talk to.</h1>
|
|
<p id="subhead">Tell the agent what you want. It searches, compares, lists your stuff and runs the checkout, right here on the page. You can also restyle the whole page from the chat.</p>
|
|
</section>
|
|
<div class="chips" data-section="chips" id="chips"></div>
|
|
<ul class="facts" data-section="bullets" id="bullets"></ul>
|
|
<section id="stage" data-section="results" aria-live="polite"></section>
|
|
<footer class="foot" data-section="footer" id="footer">Agent Market demo · fake test data · test-mode payments · <a href="/openapi.json" target="_blank">open API</a></footer>
|
|
</main>
|
|
|
|
<button id="chatLauncher" class="launcher" aria-label="Open the market agent">💬 Ask the agent</button>
|
|
<aside id="chat" class="chat hidden" aria-label="Market agent chat">
|
|
<div class="chat-head">
|
|
<div><b>Market Guide</b><div class="sub" id="chatMode">AI agent</div></div>
|
|
<button id="chatClose" aria-label="Close">✕</button>
|
|
</div>
|
|
<div id="log" class="log"></div>
|
|
<form id="chatForm" class="chat-form">
|
|
<input id="chatInput" autocomplete="off" placeholder="e.g. find a bike, or: make it look retro">
|
|
<button>Send</button>
|
|
</form>
|
|
</aside>
|
|
<div id="toasts"></div>
|
|
<script src="/static/theme.js"></script>
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|