| 1 | <!doctype html> |
| 2 | <html> |
| 3 | <head> |
| 4 | <meta charset="utf-8" /> |
| 5 | <title>Terminal</title> |
| 6 | <link rel="stylesheet" href="_card.css" /> |
| 7 | <style> |
| 8 | .term { |
| 9 | background: var(--alc-bg-code); |
| 10 | border: 1px solid var(--alc-hairline); |
| 11 | border-radius: 8px; |
| 12 | overflow: hidden; |
| 13 | box-shadow: var(--alc-shadow); |
| 14 | } |
| 15 | .bar { |
| 16 | display: flex; |
| 17 | align-items: center; |
| 18 | gap: 6px; |
| 19 | padding: 10px 14px; |
| 20 | border-bottom: 1px solid rgba(232, 220, 192, 0.1); |
| 21 | background: rgba(255, 255, 255, 0.02); |
| 22 | } |
| 23 | .dot { |
| 24 | width: 10px; |
| 25 | height: 10px; |
| 26 | border-radius: 50%; |
| 27 | } |
| 28 | .pre { |
| 29 | font-family: var(--alc-font-mono); |
| 30 | font-size: 13px; |
| 31 | line-height: 1.75; |
| 32 | color: var(--alc-code-var); |
| 33 | padding: 16px 18px; |
| 34 | margin: 0; |
| 35 | } |
| 36 | .g { |
| 37 | color: #d4f26a; |
| 38 | font-weight: 500; |
| 39 | } /* electric spring green */ |
| 40 | .tick { |
| 41 | color: #d4f26a; |
| 42 | font-weight: 700; |
| 43 | } |
| 44 | .y { |
| 45 | color: #ffe38a; |
| 46 | } /* bright honey */ |
| 47 | .d { |
| 48 | color: #d6c79a; |
| 49 | } /* bright warm tan */ |
| 50 | .b { |
| 51 | color: #ffffff; |
| 52 | font-weight: 600; |
| 53 | } /* pure white */ |
| 54 | .u { |
| 55 | text-decoration: underline; |
| 56 | color: #ffffff; |
| 57 | font-weight: 600; |
| 58 | } |
| 59 | .c { |
| 60 | color: #c5efa8; |
| 61 | } /* bright mint */ |
| 62 | </style> |
| 63 | </head> |
| 64 | <body> |
| 65 | <div class="card"> |
| 66 | <div class="term"> |
| 67 | <div class="bar"> |
| 68 | <span class="dot" style="background: var(--alc-danger)"></span> |
| 69 | <span class="dot" style="background: var(--alc-warn)"></span> |
| 70 | <span class="dot" style="background: var(--alc-accent-bright)"></span> |
| 71 | <span |
| 72 | style=" |
| 73 | font-family: var(--alc-font-mono); |
| 74 | font-size: 11px; |
| 75 | color: var(--alc-code-comment); |
| 76 | margin-left: 10px; |
| 77 | " |
| 78 | >~/my-app</span |
| 79 | > |
| 80 | </div> |
| 81 | <pre class="pre"><span class="d">$</span> alchemy deploy --stage prod |
| 82 | |
| 83 | <span class="u">Plan</span>: <span class="y">2 to create</span> |
| 84 | |
| 85 | <span class="g">+</span> <span class="b">Bucket</span> <span class="d">(Cloudflare.R2Bucket)</span> |
| 86 | <span class="g">+</span> <span class="b">Worker</span> <span class="d">(Cloudflare.Worker)</span> <span class="c">(1 bindings)</span> |
| 87 | <span class="g">+</span> <span class="c">Bucket</span> |
| 88 | |
| 89 | <span class="tick">✓</span> <span class="b">Bucket</span> <span class="d">(Cloudflare.R2Bucket)</span> <span class="g">created</span> |
| 90 | <span class="tick">✓</span> <span class="b">Worker</span> <span class="d">(Cloudflare.Worker)</span> <span class="g">created</span></pre> |
| 91 | </div> |
| 92 | </div> |
| 93 | </body> |
| 94 | </html> |