diff --git a/assets/css/dbn-tools-redesign.css b/assets/css/dbn-tools-redesign.css index 051a83d..4a13bed 100644 --- a/assets/css/dbn-tools-redesign.css +++ b/assets/css/dbn-tools-redesign.css @@ -877,3 +877,122 @@ body[data-active-tool='citations'] .results { padding: 0.55rem 1rem; } } + +/* ── Landing page card footer (Tool info + MCP pill) ──────────── */ +.lt-card__footer { + display: flex; + align-items: center; + gap: 0.6rem; + flex-wrap: wrap; + margin-top: 1rem; + padding-top: 0.75rem; + border-top: 1px solid rgba(0, 32, 91, 0.08); +} +.lt-card__footer-link--primary { + font-family: ui-monospace, 'IBM Plex Mono', monospace; + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--dbn-blue); + text-decoration: none; +} +.lt-card__footer-link--primary:hover { color: var(--dbn-red); } +.lt-card__mcp-pill { + font-family: ui-monospace, 'IBM Plex Mono', monospace; + font-size: 0.64rem; + background: #f1f5f9; + border: 1px solid #e2e8f0; + color: #64748b; + padding: 2px 8px; + border-radius: 4px; + cursor: pointer; + white-space: nowrap; + margin-left: auto; + transition: background 0.15s; +} +.lt-card__mcp-pill:hover { background: #e2e8f0; } + +/* ── Preview page MCP section ─────────────────────────────────── */ +.lt-preview-mcp { + background: #f8fafc; + border-top: 1px solid #e5e7eb; + border-bottom: 1px solid #e5e7eb; + padding: 3rem 1.5rem; +} +.lt-preview-mcp__inner { + max-width: 760px; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 1.25rem; +} +.lt-preview-mcp__head { + display: flex; + align-items: flex-start; + gap: 1rem; +} +.lt-preview-mcp__icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; margin-top: 0.15rem; } +.lt-preview-mcp__title { + font-size: 1.25rem; + font-weight: 700; + color: var(--dbn-blue); + margin: 0 0 0.25rem; +} +.lt-preview-mcp__sub { font-size: 0.9rem; color: #6b7280; margin: 0; } +.lt-preview-mcp__slug-row { + display: flex; + align-items: center; + gap: 0.75rem; + background: #fff; + border: 1px solid #e5e7eb; + border-radius: 8px; + padding: 0.7rem 1rem; + flex-wrap: wrap; +} +.lt-preview-mcp__slug-label { font-size: 0.8rem; color: #6b7280; flex-shrink: 0; } +.lt-preview-mcp__slug { + font-family: ui-monospace, 'IBM Plex Mono', monospace; + font-size: 0.9rem; + color: var(--dbn-blue); + font-weight: 600; + flex: 1; +} +.lt-preview-mcp__copy { + padding: 0.3rem 0.85rem; + background: var(--dbn-blue); + color: #fff; + border: none; + border-radius: 5px; + font-size: 0.78rem; + font-weight: 600; + cursor: pointer; + flex-shrink: 0; + transition: background 0.15s; +} +.lt-preview-mcp__copy:hover { background: var(--dbn-soft-blue); } +.lt-preview-mcp__snippet { display: flex; flex-direction: column; gap: 0.4rem; } +.lt-preview-mcp__snippet-label { + font-family: ui-monospace, 'IBM Plex Mono', monospace; + font-size: 0.7rem; + color: #9ca3af; + text-transform: uppercase; + letter-spacing: 0.06em; +} +.lt-preview-mcp__pre { + background: #1e293b; + color: #e2e8f0; + font-family: ui-monospace, 'IBM Plex Mono', monospace; + font-size: 0.82rem; + line-height: 1.65; + padding: 1.1rem 1.25rem; + border-radius: 8px; + overflow-x: auto; + margin: 0; +} +.lt-preview-mcp__note { + font-size: 0.82rem; + color: #9ca3af; + margin: 0; +} +.lt-preview-mcp__note a { color: var(--dbn-blue); } diff --git a/dashboard.php b/dashboard.php index 1c523da..121e191 100644 --- a/dashboard.php +++ b/dashboard.php @@ -125,6 +125,7 @@ $dashL = [ 'guide_link' => 'Guide', 'tech_link' => 'Technical', 'open_tool' => 'Open tool', + 'tool_info' => 'Tool info', ], 'no' => [ 'acct_header' => 'Konto', @@ -152,6 +153,7 @@ $dashL = [ 'guide_link' => 'Guide', 'tech_link' => 'Teknisk', 'open_tool' => 'Åpne verktøy', + 'tool_info' => 'Verktøyinfo', ], 'uk' => [ 'acct_header' => 'Обліковий запис', @@ -179,6 +181,7 @@ $dashL = [ 'guide_link' => 'Посібник', 'tech_link' => 'Технічний', 'open_tool' => 'Відкрити', + 'tool_info' => 'Про інструмент', ], 'pl' => [ 'acct_header' => 'Konto', @@ -206,6 +209,7 @@ $dashL = [ 'guide_link' => 'Poradnik', 'tech_link' => 'Techniczny', 'open_tool' => 'Otwórz', + 'tool_info' => 'Info', ], ]; $dl = $dashL[$uiLang] ?? $dashL['en']; @@ -462,9 +466,12 @@ window.DBN_TOOLS_LANG = = json_encode($uiLang, JSON_UNESCAPED_UNICODE) ?>;
= htmlspecialchars($item['description']) ?>
- $item): ?> - + $item): + $previewUrl = 'preview.php?tool=' . urlencode($slug) . ($uiLang !== 'en' ? '&lang=' . urlencode($uiLang) : ''); + $mcpSlug = $toolMcpSlugs[$slug] ?? null; +?> += htmlspecialchars($item['badge']) ?>
= htmlspecialchars($item['description']) ?>
- = htmlspecialchars(dbnToolsT('learn_more', $uiLang)) ?> += $uiLang === 'no' ? 'Bruk dette verktøyet direkte fra Claude Desktop, Claude Code eller Cursor.' : 'Use this tool directly from Claude Desktop, Claude Code, or Cursor.' ?>
+= htmlspecialchars($toolMcpSlug) ?>
+
+ claude_desktop_config.json
+{
+ "mcpServers": {
+ "dbn-tools": {
+ "command": "npx",
+ "args": ["-y", "@dobetternorge/mcp"],
+ "env": { "DBN_API_TOKEN": "YOUR_TOKEN" }
+ }
+ }
+}
+ + = $uiLang === 'no' + ? 'API-token krever Plus- eller Pro-plan. Logg inn for å generere token og se full oppsettsguide.' + : 'API tokens require a Plus or Pro plan. Log in to generate a token and view the full setup guide.' ?> +
+Do Better Norge members