a.tolmachev
239 lines
11 KiB
HTML
239 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Crank — New Operation</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="../../css/variables.css">
|
|
<link rel="stylesheet" href="../../css/layout.css">
|
|
<link rel="stylesheet" href="../../css/wizard.css">
|
|
<link rel="stylesheet" href="../../css/pages.css">
|
|
<script>try{if(!localStorage.getItem('crank_user'))window.location.replace('../login.html');}catch(e){}</script>
|
|
<script src="../../js/config.js"></script>
|
|
<script src="../../js/i18n.js"></script>
|
|
<script src="../../js/workspace.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ═══════════════════ NAVBAR ═══════════════════ -->
|
|
<nav class="navbar">
|
|
<a href="../../index.html" class="nav-logo">
|
|
<div class="nav-logo-mark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="white"><path fill-rule="evenodd" d="M 10.000,1.800 L 12.287,3.962 L 15.408,3.557 L 15.987,6.650 L 18.750,8.157 L 17.400,11.000 L 18.750,13.843 L 15.987,15.350 L 15.408,18.443 L 12.287,18.038 L 10.000,20.200 L 7.713,18.038 L 4.592,18.443 L 4.013,15.350 L 1.250,13.843 L 2.600,11.000 L 1.250,8.157 L 4.013,6.650 L 4.592,3.557 L 7.713,3.962 Z M 12.800,11.000 A 2.8 2.8 0 1 0 7.200,11.000 A 2.8 2.8 0 1 0 12.800,11.000 Z"/><path fill-rule="evenodd" d="M 11.791,15.604 Q 16.083,17.179 21.375,21.154 A 2.00 2.00 0 1 1 23.625,17.846 Q 19.782,15.610 14.940,10.973 Z M 24.300,19.500 A 1.8 1.8 0 1 0 20.700,19.500 A 1.8 1.8 0 1 0 24.300,19.500 Z"/><path d="M 10.0,9.7 L 11.3,11.0 L 10.0,12.3 L 8.7,11.0 Z" fill="rgba(0,0,0,0.3)"/></svg></div>
|
|
<span class="nav-logo-text">Crank</span>
|
|
</a>
|
|
|
|
<!-- Workspace switcher -->
|
|
<div class="ws-switcher" id="ws-switcher">
|
|
<button class="ws-switcher-trigger" onclick="toggleWsSwitcher(event)">
|
|
<div class="ws-dot" id="ws-dot">A</div>
|
|
<span class="ws-current-name" id="ws-current-name">acme-workspace</span>
|
|
<svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6l4 4 4-4"/></svg>
|
|
</button>
|
|
<div class="ws-dropdown" id="ws-dropdown" style="display:none">
|
|
<div class="ws-dropdown-label">Your workspaces</div>
|
|
<div id="ws-dropdown-list"></div>
|
|
<div class="ws-dropdown-footer">
|
|
<button class="ws-dropdown-create" onclick="window.location.href='../workspace-setup.html?mode=create'">
|
|
<svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M8 3v10M3 8h10"/></svg>
|
|
Create workspace
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-links">
|
|
<a href="../../index.html" class="nav-link active" data-i18n="nav.operations">Operations</a>
|
|
<a href="../agents.html" class="nav-link" data-i18n="nav.agents">Agents</a>
|
|
<a href="../api-keys.html" class="nav-link" data-i18n="nav.apikeys">API Keys</a>
|
|
<a href="../logs.html" class="nav-link" data-i18n="nav.logs">Logs</a>
|
|
<a href="../usage.html" class="nav-link" data-i18n="nav.usage">Usage</a>
|
|
</div>
|
|
|
|
<div class="nav-right">
|
|
<button class="nav-hamburger" aria-label="Menu"><span></span><span></span><span></span></button>
|
|
|
|
<div class="nav-kbd">
|
|
<svg width="12" height="12"><use href="../../icons/general/grid.svg#icon"/></svg>
|
|
<span>⌘K</span>
|
|
</div>
|
|
|
|
<button class="nav-icon-btn" title="Notifications">
|
|
<svg width="15" height="15"><use href="../../icons/general/bell.svg#icon"/></svg>
|
|
</button>
|
|
|
|
<div class="nav-divider"></div>
|
|
|
|
<div class="user-menu">
|
|
<div class="nav-avatar" title="Account">AT</div>
|
|
<div class="user-dropdown">
|
|
<div class="user-dropdown-header">
|
|
<div class="user-dropdown-name">Operator</div>
|
|
<div class="user-dropdown-role">Admin · acme-workspace</div>
|
|
</div>
|
|
<button class="user-dropdown-item" data-action="settings-link">
|
|
<svg width="13" height="13"><use href="../../icons/general/settings.svg#icon"/></svg>
|
|
<span data-i18n="nav.settings">Settings</span>
|
|
</button>
|
|
<div class="dropdown-divider"></div>
|
|
<button class="user-dropdown-item danger" data-action="logout">
|
|
<svg width="13" height="13"><use href="../../icons/general/logout.svg#icon"/></svg>
|
|
<span data-i18n="nav.logout">Log out</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="mobile-nav">
|
|
<a href="../../index.html" class="mobile-nav-link active" data-i18n="nav.operations">Operations</a>
|
|
<a href="../agents.html" class="mobile-nav-link" data-i18n="nav.agents">Agents</a>
|
|
<a href="../api-keys.html" class="mobile-nav-link" data-i18n="nav.apikeys">API Keys</a>
|
|
<a href="../logs.html" class="mobile-nav-link" data-i18n="nav.logs">Logs</a>
|
|
<a href="../usage.html" class="mobile-nav-link" data-i18n="nav.usage">Usage</a>
|
|
</div>
|
|
|
|
<!-- ═══════════════════ WIZARD SHELL ═══════════════════ -->
|
|
<div class="wizard-shell">
|
|
|
|
<!-- ══ TOP PROGRESS STRIP ══ -->
|
|
<div class="progress-strip">
|
|
<button class="back-to-catalog-btn" id="back-to-catalog" title="Back to catalog">
|
|
<svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor"><path d="M9.78 12.78a.75.75 0 01-1.06 0L4.47 8.53a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L6.06 8l3.72 3.72a.75.75 0 010 1.06z"/></svg>
|
|
Operations
|
|
</button>
|
|
<div class="progress-divider"></div>
|
|
<span class="progress-label">Create operation</span>
|
|
<div class="progress-bar-wrap">
|
|
<div class="progress-bar-fill"></div>
|
|
</div>
|
|
<span class="progress-pct">20%</span>
|
|
<button class="progress-close" title="Exit wizard" aria-label="Exit wizard">
|
|
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
|
|
<line x1="1" y1="1" x2="11" y2="11"/><line x1="11" y1="1" x2="1" y2="11"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- ══ WIZARD BODY ══ -->
|
|
<div class="wizard-body">
|
|
|
|
<!-- ── Step sidebar ── -->
|
|
<div class="step-sidebar">
|
|
<div class="step-sidebar-card">
|
|
|
|
<div class="step-sidebar-header">
|
|
<div class="step-sidebar-logo-mark">M</div>
|
|
<div class="step-sidebar-brand">
|
|
Create <span>operation</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step-sidebar-body">
|
|
<div class="step-sidebar-section-label">Progress</div>
|
|
|
|
<div class="steps-list">
|
|
|
|
<div class="step-item active">
|
|
<div class="step-indicator">1</div>
|
|
<div class="step-content">
|
|
<div class="step-number">Step 1</div>
|
|
<div class="step-name">Protocol</div>
|
|
<div class="step-status-text">In progress</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step-item pending">
|
|
<div class="step-indicator">2</div>
|
|
<div class="step-content">
|
|
<div class="step-number">Step 2</div>
|
|
<div class="step-name">Upstream target</div>
|
|
<div class="step-status-text">Not started</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step-item pending" id="sidebar-step-3">
|
|
<div class="step-indicator">3</div>
|
|
<div class="step-content">
|
|
<div class="step-number">Step 3</div>
|
|
<div class="step-name" id="sidebar-step-3-name">Request config</div>
|
|
<div class="step-status-text">Not started</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step-item pending">
|
|
<div class="step-indicator">4</div>
|
|
<div class="step-content">
|
|
<div class="step-number">Step 4</div>
|
|
<div class="step-name">Tool config</div>
|
|
<div class="step-status-text">Not started</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step-item pending">
|
|
<div class="step-indicator">5</div>
|
|
<div class="step-content">
|
|
<div class="step-number">Step 5</div>
|
|
<div class="step-name">Mapping</div>
|
|
<div class="step-status-text">Not started</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /steps-list -->
|
|
|
|
<div class="sidebar-help" style="margin-top: 20px;">
|
|
<div class="sidebar-help-title">
|
|
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="8" cy="8" r="7"/>
|
|
<path d="M8 12v-4M8 5v-.5"/>
|
|
</svg>
|
|
Need help?
|
|
</div>
|
|
<div class="sidebar-help-text">
|
|
Unsure which protocol to choose? Read the
|
|
<a href="#" class="sidebar-help-link">protocol comparison guide →</a>
|
|
</div>
|
|
</div>
|
|
</div><!-- /step-sidebar-body -->
|
|
</div><!-- /step-sidebar-card -->
|
|
</div><!-- /step-sidebar -->
|
|
|
|
<!-- ── Main step panel ── -->
|
|
<div class="wizard-main"><div id="step-panel-container"><!-- steps loaded dynamically --></div></div>
|
|
</div><!-- /wizard-body -->
|
|
|
|
<!-- ══ BOTTOM ACTION BAR ══ -->
|
|
<div class="action-bar" role="toolbar" aria-label="Wizard navigation">
|
|
<div class="action-bar-inner">
|
|
|
|
<button class="btn btn-back" type="button" disabled style="opacity: 0.35; cursor: not-allowed;">
|
|
<svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor">
|
|
<path d="M9.78 12.78a.75.75 0 01-1.06 0L4.47 8.53a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L6.06 8l3.72 3.72a.75.75 0 010 1.06z"/>
|
|
</svg>
|
|
Back
|
|
</button>
|
|
|
|
<button class="btn-save-draft" type="button">Save draft</button>
|
|
|
|
<div class="action-bar-spacer"></div>
|
|
|
|
<span class="step-counter">Step <strong>1</strong> of 5</span>
|
|
|
|
<button id="btn-continue" class="btn btn-continue" type="button">
|
|
Continue
|
|
<svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor">
|
|
<path d="M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z"/>
|
|
</svg>
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /wizard-shell -->
|
|
|
|
<script src="../../js/wizard.js"></script>
|
|
<script src="../../js/nav.js"></script>
|
|
|
|
</body>
|
|
</html>
|