diff --git a/index.html b/index.html index d9d75b1..a380c8b 100644 --- a/index.html +++ b/index.html @@ -91,20 +91,50 @@ /* Success message animation */ .success-message { + display: flex; + align-items: center; + justify-content: center; position: fixed; + gap: 8px; bottom: 20px; left: 50%; transform: translateX(-50%); opacity: 0; - transition: opacity 0.3s ease; + transition: opacity 0.25s ease; pointer-events: none; z-index: 100; + font-size: 16px; + background-color: var(--color-success-subtle); + color: var(--color-success-fg); + padding: 12px; + border-radius: 6px; + border: 1px solid; + border-color: var(--color-success-fg); + box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); + } + + @media screen and (max-width: 768px) { + .success-message { + bottom: 0; + width: 100vw; + border: none; + border-top: 1px solid; + padding: 16px; + border-radius: 0; + justify-content: center; + text-align: center; + box-shadow: 1px 0px 8px rgba(0, 0, 0, 0.2); + + & svg { + display: none; + } + } } .success-message.visible { opacity: 1; - animation: fadeOutAfterDelay 2s ease-in forwards; - animation-delay: 1s; + animation: fadeOutAfterDelay 1s ease-in forwards; + animation-delay: 2s; } @keyframes fadeOutAfterDelay { @@ -155,6 +185,14 @@ } } + footer { + border: 1px solid var(--color-border-default); + border-top: 0px; + } + i { + font-style: normal; + white-space: nowrap; + } @@ -164,9 +202,9 @@
-

Copilot Prompt URL Generator

-

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

Copilot Prompt URL Generator

+

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

@@ -187,13 +225,12 @@

- Select Model + Model

- +