golemandClaude Opus 5.5
ac734aa3db
docs/amo/README.md holds a paste-ready summary, description and screenshot captions for the 1.3 listing. The copy covers the address bar, right-click, keyboard shortcut and toolbar button, says the extension is small on purpose, and follows the "filled in, never sent" copy rule. A cat joke replaces the programmer joke. The five 1280x800 images are the options page's drawings, enlarged by docs/amo/screenshots.html and rendered with headless Firefox. The README explains how to regenerate them. docs/ stays out of the package. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
131 lines
3.9 KiB
HTML
131 lines
3.9 KiB
HTML
<!doctype html>
|
||
<!-- Renders the options page drawings as 1280x800 images for the
|
||
addons.mozilla.org listing. Open with a #fragment (#1-address-bar) to
|
||
show one image; without one, every image is shown in order.
|
||
README.md in this folder explains how to regenerate them. Keep the
|
||
markup in step with the drawings in options/options.html. -->
|
||
<meta charset="utf-8" />
|
||
<title>Add-ons listing images</title>
|
||
<link rel="stylesheet" href="../../options/options.css" />
|
||
<style>
|
||
body {
|
||
max-width: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.shot {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 1280px;
|
||
height: 800px;
|
||
}
|
||
|
||
body:has(.shot:target) .shot:not(:target) {
|
||
display: none;
|
||
}
|
||
|
||
/* zoom re-lays the drawing out at the larger size, so text stays sharp. */
|
||
.stage {
|
||
width: 24rem;
|
||
zoom: 2.6;
|
||
}
|
||
|
||
.stage-wide {
|
||
width: 26rem;
|
||
zoom: 2.4;
|
||
}
|
||
|
||
.stage .drawing {
|
||
margin: 0;
|
||
max-width: none;
|
||
}
|
||
|
||
.stage .drawing-keycaps {
|
||
padding-top: 0.5rem;
|
||
}
|
||
</style>
|
||
|
||
<section class="shot" id="1-address-bar">
|
||
<div class="stage stage-wide">
|
||
<div class="drawing">
|
||
<div class="drawing-urlbar">
|
||
<span class="drawing-chip"><img src="../../icons/powered-by-openai-icon-128x128.png" alt="" />ChatGPT</span>
|
||
<span class="drawing-typed">why does my cat knock things over?</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="shot" id="2-right-click">
|
||
<div class="stage">
|
||
<div class="drawing">
|
||
<p class="drawing-page">Nobody knows <mark>why cats knock things over</mark>…</p>
|
||
<div class="drawing-menu">
|
||
<div>Copy</div>
|
||
<div>Select All</div>
|
||
<hr />
|
||
<div class="drawing-menu-active"><img src="../../icons/powered-by-openai-icon-128x128.png" alt="" />Ask ChatGPT</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="shot" id="3-keyboard">
|
||
<div class="stage">
|
||
<div class="drawing">
|
||
<p class="drawing-page">Cats sleep for <mark>sixteen hours a day</mark>.</p>
|
||
<div class="drawing-keycaps">
|
||
<kbd class="drawing-key">Alt</kbd>+<kbd class="drawing-key">Shift</kbd>+<kbd class="drawing-key">G</kbd>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="shot" id="4-toolbar">
|
||
<div class="stage">
|
||
<div class="drawing">
|
||
<div class="drawing-toolbar">
|
||
<span class="drawing-address">example.com</span>
|
||
<span class="drawing-button">
|
||
<svg viewBox="0 0 16 16"><path d="M2 5.5h3a2 2 0 1 1 3.2 0h3.3v2.8a2 2 0 1 1 0 3.2v3H2z" /></svg>
|
||
</span>
|
||
<span class="drawing-button drawing-button-hover">
|
||
<img src="../../icons/powered-by-openai-icon-128x128.png" alt="" />
|
||
<svg class="drawing-pointer" viewBox="0 0 12 18"><path d="M1 1v14.5l3.6-3.4 2.6 5.6 2.2-1-2.6-5.5H11z" /></svg>
|
||
</span>
|
||
<span class="drawing-button">
|
||
<svg viewBox="0 0 16 16"><path d="M3 4.5h10M3 8h10M3 11.5h10" /></svg>
|
||
</span>
|
||
<span class="drawing-tooltip">Ask ChatGPT</span>
|
||
</div>
|
||
<p class="drawing-content"><mark>Why cats sit in every box</mark></p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="shot" id="5-advanced-menu">
|
||
<div class="stage">
|
||
<div class="drawing">
|
||
<div class="drawing-menus">
|
||
<div class="drawing-menu">
|
||
<div>Copy</div>
|
||
<div>Select All</div>
|
||
<hr />
|
||
<div class="drawing-menu-active"><img src="../../icons/powered-by-openai-icon-128x128.png" alt="" />Ask ChatGPT<span class="drawing-submenu-arrow">›</span></div>
|
||
</div>
|
||
<div class="drawing-menu drawing-submenu">
|
||
<div>Ask normally</div>
|
||
<hr />
|
||
<div class="drawing-menu-active">Explain</div>
|
||
<div>Summarize</div>
|
||
<div>Debug code</div>
|
||
<div>Translate…</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|