diff --git a/site/css/index.css b/site/css/index.css index 85632f3..87506c3 100644 --- a/site/css/index.css +++ b/site/css/index.css @@ -226,7 +226,7 @@ } .feat-card { - padding: 22px; + padding: 20px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--bg1); @@ -246,7 +246,7 @@ display: flex; align-items: center; justify-content: center; - margin-bottom: 14px; + margin-bottom: 12px; font-size: 16px; background: var(--bg0); border: 1px solid var(--border); @@ -272,9 +272,9 @@ } .feat-card h3 { - font-size: 15px; + font-size: 14px; font-weight: 600; - margin-bottom: 6px; + margin-bottom: 4px; letter-spacing: -0.01em; } @@ -284,73 +284,122 @@ line-height: 1.55; } -.feat-tags { - display: flex; - gap: 5px; - margin-top: 12px; - flex-wrap: wrap; +.feat-card p a { + color: var(--t1); + font-weight: 500; + text-decoration: none; } -.feat-tag { - padding: 2px 7px; - border-radius: 3px; - font-family: var(--font-mono); - font-size: 10px; - background: var(--bg0); - color: var(--t3); - border: 1px solid var(--border); +.feat-card p a:hover { + color: var(--accent); + text-decoration: underline; } -/* How it works */ -.steps { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); - gap: 12px; - margin-top: 40px; +/* How it works panel */ +.how .section-header { + text-align: center; } -.step { - text-align: left; - padding: 24px 20px; - border: 1px solid var(--border); +.how .section-desc { + margin: 0 auto; +} + +.how-panel { + max-width: 720px; + margin: 36px auto 0; border-radius: var(--radius-lg); + border: 1px solid var(--border); background: var(--bg0); + overflow: hidden; } -.step-num { +.how-panel-accent { + display: flex; + align-items: center; + gap: 10px; + padding: 9px 16px; + background: var(--bg2); + border-bottom: 1px solid var(--border); font-family: var(--font-mono); - font-size: 12px; + font-size: 11px; + color: var(--t3); +} + +.how-panel-accent::before { + content: '● ● ●'; + letter-spacing: 3px; + font-size: 7px; + color: var(--t3); + opacity: 0.6; + flex-shrink: 0; +} + +.how-panel-accent::after { + content: '127.0.0.1:3847 / quick start'; + color: var(--t3); +} + +.how-spec-list { + list-style: none; + margin: 0; + padding: 0; + counter-reset: how-step; +} + +.how-spec { + display: flex; + align-items: flex-start; + gap: 14px; + padding: 16px 22px; + border-bottom: 1px solid var(--border); + counter-increment: how-step; +} + +.how-spec:last-child { + border-bottom: none; +} + +.how-spec-num { + font-family: var(--font-mono); + font-size: 11px; font-weight: 600; - color: var(--t1); - margin-bottom: 12px; - letter-spacing: 0.05em; + color: var(--t3); + letter-spacing: 0.04em; + flex-shrink: 0; + width: 20px; + padding-top: 1px; } -.step-num::before { - content: '0'; +.how-spec-body { + flex: 1; + min-width: 0; } -.step h4 { - font-size: 14px; +.how-spec-body strong { + display: block; + font-size: 13px; font-weight: 600; - margin-bottom: 8px; - letter-spacing: -0.01em; + color: var(--t1); + margin-bottom: 2px; + line-height: 1.35; } -.step p { +.how-spec-body span { + display: block; font-size: 13px; color: var(--t2); line-height: 1.55; } -.step code { - font-family: var(--font-mono); - background: var(--bg2); - padding: 1px 5px; - border-radius: 3px; - font-size: 11px; +.how-spec-body a { color: var(--t1); - border: 1px solid var(--border); + font-weight: 500; + text-decoration: none; +} + +.how-spec-body a:hover { + color: var(--accent); + text-decoration: underline; } /* Security panel */ @@ -396,34 +445,25 @@ color: var(--t3); } -.security-panel-grid { - display: grid; - grid-template-columns: 1fr 1fr; +.security-spec-list { + list-style: none; + margin: 0; + padding: 0; } -.security-block { - padding: 20px 22px; - border-right: 1px solid var(--border); +.security-spec { + display: flex; + align-items: flex-start; + gap: 14px; + padding: 16px 22px; border-bottom: 1px solid var(--border); } -.security-block:nth-child(2n) { - border-right: none; -} - -.security-block--wide { - grid-column: 1 / -1; - border-right: none; -} - -.security-block-head { - display: flex; - align-items: center; - gap: 10px; - margin-bottom: 12px; +.security-spec:last-child { + border-bottom: none; } -.security-block-icon { +.security-spec-icon { width: 28px; height: 28px; border-radius: var(--radius); @@ -436,59 +476,28 @@ color: var(--t2); } -.security-block-icon.blue, -.security-block-icon.green, -.security-block-icon.purple, -.security-block-icon.orange { - background: var(--bg0); - border: 1px solid var(--border); - color: var(--t2); -} - -.security-block h3 { - font-family: var(--font-mono); - font-size: 12px; - font-weight: 600; - color: var(--t1); - margin: 0; -} - -.security-list { - list-style: none; - margin: 0; - padding: 0; - display: flex; - flex-direction: column; - gap: 10px; -} - -.security-block--wide .security-list { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 12px 24px; -} - -.security-list li { - font-size: 13px; - line-height: 1.45; +.security-spec-body { + flex: 1; + min-width: 0; } -.security-list strong { +.security-spec-body strong { display: block; font-size: 13px; font-weight: 600; color: var(--t1); margin-bottom: 2px; + line-height: 1.35; } -.security-list span { +.security-spec-body span { display: block; - font-size: 12px; - color: var(--t3); - line-height: 1.45; + font-size: 13px; + color: var(--t2); + line-height: 1.55; } -.security-list code { +.security-spec-body code { font-family: var(--font-mono); font-size: 11px; padding: 1px 4px; @@ -496,57 +505,12 @@ background: var(--bg2); color: var(--t1); border: 1px solid var(--border); + font-weight: 500; } -.security-hub { - display: flex; - align-items: flex-start; - gap: 12px; - padding: 14px 22px; - background: var(--bg1); - border-top: 1px solid var(--border); -} - -.security-hub-icon { - width: 28px; - height: 28px; - border-radius: var(--radius); - background: var(--bg0); - border: 1px solid var(--border); - color: var(--t2); - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; -} - -.security-hub-text { - flex: 1; - min-width: 0; -} - -.security-hub-text strong { - display: block; - font-size: 13px; - font-weight: 600; - color: var(--t1); - margin-bottom: 2px; -} - -.security-hub-text span { - display: block; +.security-spec-body strong code { font-size: 12px; - color: var(--t3); - line-height: 1.45; -} - -.security-hub-tag { - display: inline-block; - font-family: var(--font-mono); - font-size: 10px; - font-weight: 500; - color: var(--t3); - margin-top: 4px; + padding: 0 4px; } /* Editors */ @@ -710,25 +674,12 @@ grid-template-columns: 1fr 1fr; } - .steps { - grid-template-columns: 1fr; - } - - .security-panel-grid { - grid-template-columns: 1fr; - } - - .security-block { - border-right: none; - } - - .security-block--wide .security-list { - grid-template-columns: 1fr; + .how-spec { + padding: 14px 18px; } - .security-hub { - flex-direction: column; - gap: 10px; + .security-spec { + padding: 14px 18px; } .editor-logos { diff --git a/site/index.html b/site/index.html index e0d4a39..3d7396f 100644 --- a/site/index.html +++ b/site/index.html @@ -351,56 +351,50 @@

Everything you need. Nothing you d
- +

Project Dashboard

-

One view for all your repositories. Works great with one GitHub account, and supports multiple accounts when you need it.

-
1+ accountsSearchFiltersPinnedAliases
+

All repos in one view. Search, filter, pin. One or many GitHub accounts.

- +
-

Clone Anything (by URL)

-

Paste any GitHub repo URL, choose which account key to use, and clone into your organized structure. Optional custom local folder name included.

-
Clone by URLAccount selectName collisions handled
+

Clone by URL

+

Paste any GitHub repo URL, pick an account, clone into your structure.

- +

Full Git Workflow

-

Commit, push, pull (with rebase), branch, revert, plus diff (staged/worktree), stash, and discard actions in one Git modal.

-
DiffStashDiscardUnpushed
+

Commit, push, pull, branch, diff, stash, and discard. All in one modal.

- +
-

Needs-Attention Panel

-

Instantly see dirty repos, staged changes, and ahead/behind status. Optional dormant detection flags repos with no recent activity.

-
DirtyAhead/BehindDormant badge
+

Needs-Attention

+

Dirty repos, staged changes, ahead/behind, and dormant flags at a glance.

- +

Transfer & Migrate

-

Transfer repos between accounts and migrate existing local repos into the organized structure. GitDock updates remotes for your SSH host aliases.

-
TransferMigrateSafe checks
+

Move repos between accounts or migrate locals into GitDock's structure.

- +

Multi-machine Hub

-

Optional central view for multiple machines. See the Hub section for overview, sync issues, and per-machine repo browsing.

-
HubOverviewSync issues
+

Optional view across machines. See the Hub section below.

@@ -436,34 +430,45 @@

Repos with search & filters

-
+
-
+

How it works

Up and running in minutes.

-

No cloud. No subscription. Git + GitHub CLI (gh) + SSH on your machine. The standalone zip does not require Node.js.

+

Download, connect your account, manage repos. No cloud, no subscription.

-
-
-
1
-

Download and run

-

Get the release zip from Download (or clone the repo). Run the app; it opens at localhost:3847. On first launch, choose a workspace folder.

-
-
-
2
-

Add GitHub account(s)

-

In the dashboard, use Add Account and the setup guide: SSH key, verify SSH, and a GitHub token. gh auth login is optional if you connect with a PAT.

-
-
-
3
-

Manage repos fast

-

Search, pin, clone (including by URL), pull/fetch/commit/push, transfer, and open repos in your editor, all from one dashboard.

-
-
-
4
-

Connect to the Hub

-

Using several machines? In the dashboard, set the Hub URL and API key, then restart. Open the Hub in the browser to see all machines and sync status in one place.

-
+
+ +
    +
  1. + +
    + Download and run + Get the zip from Download, run it, choose a workspace folder. +
    +
    2. +
  2. + +
    + Add your account + SSH + token via the guided setup in the dashboard. +
    +
    3. +
  3. + +
    + Manage repos + Search, clone, commit, push. All from one place. +
    +
    4. +
  4. + +
    + Hub optional + Connect multiple machines when you need a central view. +
    +
    5. +
@@ -474,48 +479,40 @@

Connect to the Hub

Security first

Your data stays on your machine. Period.

-

Local-only by design, with strict input and path controls.

+

Local-only server. Your tokens never leave your machine.

-
-
-
- -

Network

+
    +
  • + +
    + 127.0.0.1 only + Nothing exposed to your network.
    -
      -
    • Local-only serverBinds to 127.0.0.1 only. Other IPs are rejected.
      • -
    -
-
-
- -

Application

+ +
  • + +
    + Tokens stay local + gh keyring or OS store. Never in config.json.
    -
      -
    • Input & path hardeningSanitized repo names, branches, paths, and messages; traversal protection on every file operation.
      • -
    -
    • -
    -
    - -

    Credentials

    + +
  • + +
    + Input hardened + Sanitized paths and names. Traversal blocked on every file op.
    -
      -
    • Tokens stay localNot in config.json. gh keyring or optional PAT (session or OS store). Never sent to GitDock.
      • -
    • Serialized API callsgh queued per account, no races when switching accounts.
      • -
    -
    • -
    -
    - -
    - Hub (optional) - Metadata only: repo names, branch, ahead/behind. No source code, no tokens. - Only if you enable it -
    -
    + +
  • + +
    + Hub optional + Metadata only if you enable it. No source code, no tokens. +
    +
    • +
    diff --git a/site/js/common.js b/site/js/common.js index 097023f..5e3c474 100644 --- a/site/js/common.js +++ b/site/js/common.js @@ -1,5 +1,5 @@ // Stagger: assign incremental delay to grid children -document.querySelectorAll('.pain-grid, .features-grid, .security-panel-grid, .steps').forEach(function (grid) { +document.querySelectorAll('.pain-grid, .features-grid, .how-spec-list, .security-spec-list').forEach(function (grid) { grid.querySelectorAll('.fade-in').forEach(function (child, i) { child.style.setProperty('--stagger', i * 0.06 + 's'); });