Skip to content

Add static “Connect your tools” visual mock #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
NguyenCuong1989 merged 1 commit into from
Mar 1, 2026
+164 −0
Merged

Add static “Connect your tools” visual mock #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,3 +130,11 @@ We're excited to have you join us early in the Copilot CLI journey.
This is an early-stage preview, and we're building quickly. Expect frequent updates--please keep your client up to date for the latest features and fixes!

Your insights are invaluable! Open issue in this repo, join Discussions, and run `/feedback` from the CLI to submit a confidential feedback survey!

## 🎨 Design mock: "Connect your tools"

A static recreation of the Linear-style integration visual from the `WWW-3` issue is available at:

- `examples/connect-your-tools.html`

Open it locally in a browser to preview the gradient background and icon lockup.
156 changes: 156 additions & 0 deletions examples/connect-your-tools.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Connect your tools</title>
<style>
:root {
--bg-left: #6b46db;
--bg-mid: #9e56b0;
--bg-right: #ef6e68;
--icon-white: #f4f4f5;
--icon-accent: #b3569a;
}

* {
box-sizing: border-box;
}

body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
background: linear-gradient(120deg, var(--bg-left) 10%, var(--bg-mid) 52%, var(--bg-right) 95%);
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.icons {
display: flex;
align-items: center;
justify-content: center;
gap: 54px;
transform: translateY(12px);
}

.circle {
width: 154px;
aspect-ratio: 1;
border-radius: 50%;
background: var(--icon-white);
position: relative;
}

.linear-mark {
overflow: hidden;
}

.stripe {
position: absolute;
width: 16px;
height: 104px;
background: linear-gradient(120deg, #c65fa4, #a24c9d);
border-radius: 10px;
transform: rotate(-46deg);
left: 44px;
bottom: -8px;
}

.stripe.s2 {
left: 65px;
}

.stripe.s3 {
left: 86px;
}

.stripe.s4 {
left: 107px;
}

.mask {
position: absolute;
width: 128px;
height: 128px;
border-radius: 50%;
bottom: -64px;
left: -64px;
background: linear-gradient(120deg, var(--bg-left) 0%, var(--bg-mid) 60%);
}

.plus {
display: grid;
place-items: center;
}

.plus::before,
.plus::after {
content: "";
position: absolute;
background: var(--icon-accent);
border-radius: 8px;
}

.plus::before {
width: 66px;
height: 18px;
}

.plus::after {
width: 18px;
height: 66px;
}

@media (max-width: 680px) {
.icons {
gap: 26px;
transform: none;
}

.circle {
width: 120px;
}

.stripe {
height: 82px;
width: 12px;
left: 34px;
}

.stripe.s2 { left: 50px; }
.stripe.s3 { left: 66px; }
.stripe.s4 { left: 82px; }

.mask {
width: 98px;
height: 98px;
bottom: -50px;
left: -50px;
}

.plus::before {
width: 52px;
height: 14px;
}

.plus::after {
width: 14px;
height: 52px;
}
}
</style>
</head>
<body>
<main class="icons" aria-label="Linear and add integration symbols">
<div class="circle linear-mark" aria-hidden="true">
<span class="stripe"></span>
<span class="stripe s2"></span>
<span class="stripe s3"></span>
<span class="stripe s4"></span>
<span class="mask"></span>
</div>
<div class="circle plus" aria-hidden="true"></div>
Comment on lines +145 to +153
Copy link
Copy Markdown

@sourcery-ai sourcery-ai bot Feb 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (bug_risk): Cách dùng ARIA trên

có thể gây nhầm lẫn cho người dùng trình đọc màn hình vì đây là một landmark nhưng chỉ chứa nội dung trang trí.

Vì tất cả phần tử con đều aria-hidden và chỉ mang tính trang trí, landmark main này cuối cùng không có nội dung có thể truy cập được nhưng vẫn bị thông báo với công cụ hỗ trợ. Nếu phần này chỉ mang tính trang trí, hãy dùng một container không phải landmark (ví dụ: div hoặc figure) với aria-hidden="true" trên wrapper. Nếu nó cần truyền tải thông tin, hãy hiển thị nội dung văn bản có ý nghĩa hoặc dùng role="img" với aria-label trên một phần tử không phải landmark.

Original comment in English

issue (bug_risk): ARIA usage on

may confuse screen reader users because it's a landmark with only decorative content.

Because all children are aria-hidden and purely decorative, this main landmark ends up containing no accessible content while still being announced to assistive tech. If this is decorative, use a non-landmark container (e.g., a div or figure) with aria-hidden="true" on the wrapper. If it should convey information, expose meaningful text or use role="img" with an aria-label on a non-landmark element instead.

</main>
</body>
</html>