root
113616b039
Release / release (push) Successful in 3m19s
Stash the full claude.ai/design output (12 JSX variants — brutalist, classic, cli, compact, fluent-live, glass, hero-live, minimal, sketches, studio, wizard-live, workshop — plus shared hooks and a standalone HTML preview) for reference when we get to the Wails frontend in Phase 6/7. Source archive: C:\Users\root\Downloads\app(1).zip (~1MB). Not wired into any build target yet — current GUI is the temporary MessageBox stub. Pulling these in is the goal of the Wails phase. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
157 lines
6.7 KiB
HTML
157 lines
6.7 KiB
HTML
<!doctype html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<title>Drover-Go — round 2 (dark only)</title>
|
|
<style>
|
|
html, body { margin: 0; padding: 0; background: #f0eee9; font-family: -apple-system, "Segoe UI", system-ui, sans-serif; }
|
|
</style>
|
|
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
|
|
<script type="text/babel" src="design-canvas.jsx"></script>
|
|
<script type="text/babel" src="drover-shared.jsx"></script>
|
|
<script type="text/babel" src="drover-compact.jsx"></script>
|
|
<script type="text/babel" src="drover-cli.jsx"></script>
|
|
<script type="text/babel" src="drover-studio.jsx"></script>
|
|
<script type="text/babel" src="drover-workshop.jsx"></script>
|
|
|
|
<script type="text/babel">
|
|
// Patch useDrover to record latest D per slot id (for preset driving).
|
|
if (!window.__drvSlots) {
|
|
const orig = window.useDrover;
|
|
window.__drvSlots = new Map();
|
|
window.useDrover = function(initial) {
|
|
const D = orig(initial);
|
|
const slot = (initial && initial.__slot) || null;
|
|
React.useEffect(() => { if (slot) window.__drvSlots.set(slot, D); });
|
|
return D;
|
|
};
|
|
}
|
|
|
|
function PresetHost({ Component, preset }) {
|
|
const slot = React.useId();
|
|
React.useEffect(() => {
|
|
let cancelled = false;
|
|
const wait = () => new Promise(r => requestAnimationFrame(r));
|
|
(async () => {
|
|
await wait(); await wait();
|
|
const D = window.__drvSlots.get(slot);
|
|
if (!D || cancelled) return;
|
|
if (preset === 'idle') return;
|
|
if (preset === 'checking') { D.runCheck(); return; }
|
|
const waitChecked = async () => {
|
|
for (let i = 0; i < 60 && !cancelled; i++) {
|
|
await new Promise(r => setTimeout(r, 200));
|
|
if (window.__drvSlots.get(slot)?.phase === 'checked') break;
|
|
}
|
|
};
|
|
if (preset === 'passed') { D.runCheck(); await waitChecked(); return; }
|
|
if (preset === 'auth-passed') {
|
|
D.update({ auth: true, login: 'drover', password: 'secret123' });
|
|
await wait();
|
|
window.__drvSlots.get(slot)?.runCheck();
|
|
await waitChecked(); return;
|
|
}
|
|
if (preset === 'failed') {
|
|
D.setScenario?.('udpFail'); await wait();
|
|
window.__drvSlots.get(slot)?.runCheck();
|
|
await waitChecked(); return;
|
|
}
|
|
if (preset === 'active') {
|
|
D.runCheck(); await waitChecked(); await wait();
|
|
window.__drvSlots.get(slot)?.startProxy?.();
|
|
await new Promise(r => setTimeout(r, 1500));
|
|
return;
|
|
}
|
|
if (preset === 'active-warn') {
|
|
D.setScenario?.('udpFail'); await wait();
|
|
window.__drvSlots.get(slot)?.runCheck(); await waitChecked(); await wait();
|
|
window.__drvSlots.get(slot)?.startProxy?.();
|
|
await new Promise(r => setTimeout(r, 1500));
|
|
return;
|
|
}
|
|
})();
|
|
return () => { cancelled = true; window.__drvSlots.delete(slot); };
|
|
}, [preset, slot]);
|
|
return <Component initial={{ __slot: slot }} />;
|
|
}
|
|
|
|
function ReasoningCard() {
|
|
return (
|
|
<div style={{
|
|
width: 540, padding: '16px 18px', background: '#ffffff',
|
|
border: '1px solid rgba(0,0,0,0.08)', borderRadius: 10,
|
|
fontSize: 13, lineHeight: 1.55, color: '#2a251f',
|
|
}}>
|
|
<div style={{ fontWeight: 700, marginBottom: 4 }}>Drover-Go · round 2</div>
|
|
<div style={{ color: '#5c5650' }}>
|
|
Только dark. 4 новых направления, более сдержанных и функциональных:
|
|
Compact Pro (плотный, мониторинговый), CLI (терминал/фосфор),
|
|
Studio (Linear-ish, спокойный), Workshop (industrial slate + amber).
|
|
Каждый — 6 состояний: idle → checking → all-passed → with-auth → UDP-failed → active → active-warn.
|
|
Отметь, какие нравятся — расширим в light + tweaks.
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function App() {
|
|
const { DesignCanvas, DCSection, DCArtboard } = window;
|
|
const W = 480, H = 640;
|
|
const variants = [
|
|
{ id: 'compact', Component: window.CompactWindow,
|
|
title: '1 · Compact Pro', subtitle: 'Плотный, мониторинговый. Wireshark-ish. Минимум воздуха.' },
|
|
{ id: 'cli', Component: window.CliWindow,
|
|
title: '2 · Cyber CLI', subtitle: 'Фосфорный терминал. CRT-сканлайны. Всё через `> command --flag`.' },
|
|
{ id: 'studio', Component: window.StudioWindow,
|
|
title: '3 · Studio', subtitle: 'Современный, calm, Linear-ish. Тонкие карты, синий accent.' },
|
|
{ id: 'workshop', Component: window.WorkshopWindow,
|
|
title: '4 · Workshop', subtitle: 'Industrial slate + amber. Шильдики, лево-акцентный border.' },
|
|
];
|
|
const presets = [
|
|
{ id: 'idle', label: 'idle' },
|
|
{ id: 'checking', label: 'checking…' },
|
|
{ id: 'passed', label: 'all passed' },
|
|
{ id: 'auth-passed', label: 'with auth · passed' },
|
|
{ id: 'failed', label: 'UDP failed' },
|
|
{ id: 'active', label: 'active proxy' },
|
|
{ id: 'active-warn', label: 'active · UDP warn' },
|
|
];
|
|
|
|
return (
|
|
<DesignCanvas>
|
|
<DCSection id="intro" title="About" subtitle="Round 2 — dark only">
|
|
<DCArtboard id="intro-card" label="reasoning" width={540} height={150}>
|
|
<ReasoningCard/>
|
|
</DCArtboard>
|
|
</DCSection>
|
|
{variants.map(v => (
|
|
<DCSection key={v.id} id={v.id} title={v.title} subtitle={v.subtitle}>
|
|
{presets.map(p => (
|
|
<DCArtboard key={p.id} id={`${v.id}-${p.id}`} label={p.label} width={W} height={H}>
|
|
<PresetHost Component={v.Component} preset={p.id}/>
|
|
</DCArtboard>
|
|
))}
|
|
</DCSection>
|
|
))}
|
|
</DesignCanvas>
|
|
);
|
|
}
|
|
|
|
function tryMount() {
|
|
if (window.CompactWindow && window.CliWindow && window.StudioWindow && window.WorkshopWindow && window.DesignCanvas) {
|
|
ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
|
|
} else {
|
|
setTimeout(tryMount, 50);
|
|
}
|
|
}
|
|
tryMount();
|
|
</script>
|
|
</body>
|
|
</html>
|