From a96dd6aa313f19cc0eb3e2096be77ed80ea61ca9 Mon Sep 17 00:00:00 2001 From: Daniel Fosco Date: Tue, 15 Apr 2025 09:33:53 +0200 Subject: [PATCH 1/8] Restyle prompt generator Add local primer-css dependency Add dark-mode support Change generated URL element to an input --- index.html | 285 +++++++++++++++++++++++++--------------------- primer@21.5.1.css | 22 ++++ 2 files changed, 180 insertions(+), 127 deletions(-) create mode 100644 primer@21.5.1.css diff --git a/index.html b/index.html index 128d670..96da602 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,13 @@ - + + - GitHub Copilot URL Formatter + GitHub Copilot - Prompt URL Generator - + + @@ -84,142 +86,171 @@ from { opacity: 1; } to { opacity: 0; } } + + .stack { display: flex; flex-direction: column; gap: 16px; } + + .gap--1 { gap: 0; * + * { margin-top: -1px } } + .gap-0 { gap: 0 } + .gap-2 { gap: 2px } + .gap-4 { gap: 4px } + .gap-8 { gap: 8px } + .gap-16 { gap: 16px } + .gap-24 { gap: 24px } + .gap-32 { gap: 32px } + .gap-40 { gap: 40px } + + .color-border-emphasis { border-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus)) !important } + + section, header, footer { + position: relative; + &::before { + content: '×'; + transform: rotate(45deg); + display: block; + position: absolute; + top: -15px; + left: 6.5px; + height: 1px; + font-size: 24px; + opacity: 0.5 + } + &::after { + content: '×'; + transform: rotate(45deg); + display: block; + position: absolute; + top: -15px; + right: -21.5px; + height: 1px; + font-size: 24px; + opacity: 0.5 + } + } + + header, footer, section { + &::before, &::after { + /* color: var(--fgColor-muted, var(--color-fg-subtle)) ; */ + } + } + - -
-
-
- - - -
-
-

Copilot URL Formatter

-
-

- Type your prompt below and we'll create a shareable URL. -

+ +
+
+
+ +
+
+

Copilot Prompt URL Generator

+

+ Create a shareable URL to run a prompt on GitHub Copilot +

+
- -
-
-

- - - - Select Model -

+
+ +
+
+

+ Prompt +

+
-
-

Choose which model to use for your prompt:

- + +
+ + +
+
+

+ Select Model +

+
-
+ + - -
-
-
-

- - - - Create Your Prompt -

-
-
- -
-
-
+ - -
-
-

- - - - Generated URL -

+
+
+

+ Generated URL +

-
-
https://github.com/copilot?model=&prompt=
- +
+
-
+ +
- -
-
-

- - - - Choose a Button Style -

-
-
-

Select a branded "Open in Copilot" button to use in your GitHub README:

- -
-
-
- Light theme button -
Light (Regular)
-
-
- Light theme small button -
Light (Small)
-
-
-
-
- Dark theme button -
Dark (Regular)
-
-
- Dark theme small button -
Dark (Small)
-
-
-
- - + + +
+
+

+ Choose a button style +

+
-
+
+
+
+ Light theme button +
Light (Regular)
+
+
+ Light theme small button +
Light (Small)
+
+
+
+
+ Dark theme button +
Dark (Regular)
+
+
+ Dark theme small button +
Dark (Small)
+
+
+
+ + + - -
-

Made with ❤️ for GitHub Copilot

-
-
+ +
+

Made with ❤️ for GitHub Copilot

+
+
- -
URL copied to clipboard!
+ +
URL copied to clipboard!
+