Marcos Paulo
44 lines
1.5 KiB
HTML
44 lines
1.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Guardrails — Hands-on Rules</title>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<header>
|
|
<div><span>HANDS-ON / RULES</span><h1>Guardrails</h1></div>
|
|
<p>Toggle rules. Same task, different coverage.</p>
|
|
</header>
|
|
|
|
<section aria-labelledby="rules-heading">
|
|
<div class="section-head"><h2 id="rules-heading">Rule sources</h2><span id="rule-count">0 / 5 active</span></div>
|
|
<div id="rule-list" class="rule-list"></div>
|
|
</section>
|
|
|
|
<section aria-labelledby="prompt-heading">
|
|
<div class="section-head"><h2 id="prompt-heading">Prompt diff</h2>
|
|
<div class="lang-switch" role="group" aria-label="Language">
|
|
<button type="button" data-lang="en" aria-pressed="true">EN</button>
|
|
<button type="button" data-lang="pt" aria-pressed="false">PT</button>
|
|
</div>
|
|
</div>
|
|
<div class="prompt-grid">
|
|
<article class="prompt-card" data-side="naive">
|
|
<header><span>NAIVE</span><h3>Plain prompt</h3></header>
|
|
<pre id="prompt-naive"></pre>
|
|
</article>
|
|
<article class="prompt-card" data-side="ruled">
|
|
<header><span>RULED</span><h3>With guardrails</h3></header>
|
|
<pre id="prompt-ruled"></pre>
|
|
<button id="copy-btn" type="button">Copy ruled prompt</button>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<script src="app.js" defer></script>
|
|
</body>
|
|
</html>
|