diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 392 |
1 files changed, 152 insertions, 240 deletions
@@ -3,296 +3,208 @@ <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>run - script runner</title> + <title>run — script runner</title> <style> - * { - margin: 0; - padding: 0; - box-sizing: border-box; - } body { - font-family: - -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - "Helvetica Neue", Arial, sans-serif; - background: #0d1117; - color: #e6edf3; + margin: 0; min-height: 100vh; display: flex; - flex-direction: column; align-items: center; justify-content: center; - padding: 2rem; + background: #ffffe8; + font-family: "Times New Roman", Times, serif; + padding: 24px; } - .card { - background: #161b22; - border: 1px solid #30363d; - border-radius: 16px; - padding: 3rem 2.8rem; - max-width: 720px; + + .box { + max-width: 640px; width: 100%; - text-align: center; + background: #fffff0; + border: 3px ridge #808080; + padding: 32px 36px; } + h1 { - font-size: 3rem; - font-weight: 800; - letter-spacing: -0.03em; - color: #e6edf3; - } - h1 span { - color: #f85149; + font-size: 42px; + font-weight: normal; + margin: 0 0 2px 0; + letter-spacing: 2px; } + .tagline { - font-size: 1.1rem; - color: #8b949e; - margin: 0.5rem 0 1.5rem; + font-size: 16px; font-style: italic; + color: #555; + margin: 0 0 20px 0; + border-bottom: 1px solid #ccc; + padding-bottom: 12px; } - .desc { - font-size: 0.95rem; - line-height: 1.6; - color: #8b949e; - margin-bottom: 2rem; - } - .desc code { - background: #21262d; - color: #e6edf3; - padding: 0.15em 0.5em; - border-radius: 4px; - font-size: 0.85em; - } - .install-box { - background: #0d1117; - border: 1px solid #30363d; - border-radius: 12px; - padding: 1.5rem; - text-align: left; - margin-bottom: 1.5rem; - } - .install-box .label { - color: #8b949e; - font-size: 0.75rem; - text-transform: uppercase; - letter-spacing: 0.05em; - margin-bottom: 0.75rem; - display: block; - } - .install-box code { - display: block; - font-family: - "JetBrains Mono", "Fira Code", "Cascadia Code", "Consolas", - monospace; - font-size: 1rem; - line-height: 1.8; - padding: 0.25rem 0; + + h2 { + font-size: 18px; + font-weight: bold; + margin: 18px 0 8px 0; + color: #333; } - .install-box code .prompt { - color: #3fb950; + h2:first-of-type { + margin-top: 0; } - .install-box code .comment { - color: #8b949e; + + p { + font-size: 15px; + line-height: 1.6; + margin: 6px 0; + color: #222; } - .install-box code .highlight { - color: #58a6ff; + + code, + tt { + font-family: "Courier New", Courier, monospace; + font-size: 14px; } - .os-tabs { + + .lang-grid { display: flex; - gap: 0.5rem; - margin-bottom: 1rem; - justify-content: center; + flex-wrap: wrap; + gap: 4px 10px; + margin: 8px 0 12px 0; } - .os-tab { - padding: 0.4rem 1.2rem; - border-radius: 8px; - border: 1px solid #30363d; - background: transparent; - color: #8b949e; - font-size: 0.85rem; - cursor: pointer; - transition: all 0.15s; - font-family: inherit; + .lang-grid span { + background: #eee; + border: 1px solid #bbb; + padding: 2px 8px; + font-size: 13px; + font-family: "Courier New", monospace; } - .os-tab.active { - background: #1f6feb; + + .cmd-box { + background: #222; + color: #00dd00; + font-family: "Courier New", monospace; + font-size: 13px; + padding: 10px 14px; + border: 2px inset #808080; + margin: 6px 0 10px 0; + overflow-x: auto; + white-space: nowrap; + line-height: 1.7; + } + .cmd-box .prompt { + color: #00dd00; + } + .cmd-box .comment { + color: #888; + } + .cmd-box .highlight { + color: #ffff00; + } + .cmd-box .hl2 { + color: #00ddff; + } + .cmd-box .label { color: #fff; - border-color: #1f6feb; - } - .os-tab:hover { - border-color: #8b949e; - color: #e6edf3; - } - .usage-box { - background: #0d1117; - border: 1px solid #30363d; - border-radius: 10px; - padding: 1.2rem 1.5rem; - text-align: left; - margin-top: 0.5rem; - } - .usage-box .label { - color: #8b949e; - font-size: 0.75rem; - text-transform: uppercase; - letter-spacing: 0.05em; - margin-bottom: 0.5rem; - display: block; - } - .usage-box code { - display: block; - font-family: - "JetBrains Mono", "Fira Code", "Cascadia Code", "Consolas", - monospace; - font-size: 0.9rem; - line-height: 1.8; - } - .usage-box code .prompt { - color: #3fb950; - } - .usage-box code .comment { - color: #8b949e; - } - .usage-box code .highlight { - color: #d2a8ff; + font-weight: bold; + margin-bottom: 2px; } + .footer { - margin-top: 2rem; - font-size: 0.8rem; - color: #484f58; + margin-top: 18px; + padding-top: 10px; + border-top: 1px solid #ccc; + font-size: 13px; + color: #666; } .footer a { - color: #58a6ff; - text-decoration: none; + color: #222; + text-decoration: underline; } .footer a:hover { - text-decoration: underline; + color: #888; } - @media (max-width: 600px) { - .card { - padding: 2rem 1.5rem; + @media (max-width: 500px) { + .box { + padding: 20px 16px; } h1 { - font-size: 2rem; - } - .install-box code { - font-size: 0.85rem; + font-size: 30px; } } </style> </head> <body> - <div class="card"> - <h1> - <span id="prefix">./</span><span>run</span - ><span id="suffix">.sh</span> - </h1> + <div class="box"> + <h1>run</h1> <p class="tagline">Screw "make", I just want a script runner</p> - <p class="desc"> - Drop any script into <code>.run/src/bin/</code> — Rust, C#, - Python, Shell, Ruby, Go, etc.<br /> - One command to list, one command to run. No Makefile, no config. + + <h2>What is this?</h2> + <p> + A cross-platform script runner. Drop any script into + <tt>.run/src/bin/</tt> and run it by name. No makefiles, no + justfiles, no config. </p> - <div class="os-tabs"> - <button class="os-tab active" onclick="switchOS('linux')"> - Linux / macOS - </button> - <button class="os-tab" onclick="switchOS('windows')"> - Windows - </button> + <div class="lang-grid"> + <span>[Rust] .rs</span> + <span>[C#] .cs</span> + <span>[Python] .py</span> + <span>[Ruby] .rb</span> + <span>[Perl] .pl</span> + <span>[Go] .go</span> + <span>[Zig] .zig</span> + <span>[Nim] .nim</span> + <span>[Shell] .sh</span> + <span>[Binary] (no ext)</span> + <span>[PowerShell] .ps1</span> + <span>[Binary] .exe</span> </div> - <div class="install-box" id="install-linux"> - <span class="label">Install</span> - <code - ><span class="prompt">$</span> curl -fsSL - https://catilgrass.github.io/run/install.sh | bash</code - > - <code><span class="prompt">$</span> chmod +x run.sh</code> + <h2>Install</h2> + + <div class="cmd-box"> + <span class="label">:: Linux</span><br /> + <span class="prompt">$</span> curl -fsSL + https://catilgrass.github.io/run/install.sh | bash<br /> + <span class="prompt">$</span> chmod +x run.sh </div> - <div class="install-box" id="install-windows" style="display: none"> - <span class="label">Install</span> - <code - ><span class="prompt">PS></span> iwr -useb - https://catilgrass.github.io/run/install.ps1 | iex</code - > + <div class="cmd-box"> + <span class="label">:: Windows</span><br /> + <span class="prompt">PS></span> iwr -useb + https://catilgrass.github.io/run/install.ps1 | iex </div> - <div class="usage-box" id="usage-linux"> - <span class="label">Usage</span> - <code - ><span class="prompt">$</span> ./run.sh - <span class="comment"># list all scripts</span></code - > - <code - ><span class="prompt">$</span> ./run.sh - <span class="highlight">hello</span> - <span class="comment"># run by name</span></code - > - <code - ><span class="prompt">$</span> ./run.sh - <span class="highlight">3</span> - <span class="comment"># run by number</span></code - > - <code - ><span class="prompt">$</span> ./run.sh - <span class="highlight">3 Hello World</span> - <span class="comment"># with arguments</span></code + <p> + <i + >Or grab it manually from + <a href="https://github.com/catilgrass/run">GitHub</a>.</i > + </p> + + <h2>Usage</h2> + + <div class="cmd-box"> + <span class="prompt">$</span> ./run.sh + <span class="comment"># list all scripts</span><br /> + <span class="prompt">$</span> ./run.sh + <span class="highlight">myscript</span> + <span class="comment"># run by name</span><br /> + <span class="prompt">$</span> ./run.sh + <span class="highlight">3</span> + <span class="comment"># run by number</span><br /> + <span class="prompt">$</span> ./run.sh + <span class="highlight">3</span> + <span class="hl2">Hello World</span> + <span class="comment"># with arguments</span> </div> - <div class="usage-box" id="usage-windows" style="display: none"> - <span class="label">Usage</span> - <code - ><span class="prompt">PS></span> .\run.ps1 - <span class="comment"># list all scripts</span></code - > - <code - ><span class="prompt">PS></span> .\run.ps1 - <span class="highlight">hello</span> - <span class="comment"># run by name</span></code - > - <code - ><span class="prompt">PS></span> .\run.ps1 - <span class="highlight">3</span> - <span class="comment"># run by number</span></code - > - <code - ><span class="prompt">PS></span> .\run.ps1 - <span class="highlight">3 Hello World</span> - <span class="comment"># with arguments</span></code + + <div class="footer"> + <a href="https://github.com/catilgrass/run">GitHub</a> + · + <a href="https://github.com/catilgrass/run/blob/master/LICENSE" + >WTFPL</a > </div> </div> - - <div class="footer"> - <a href="https://github.com/catilgrass/run">GitHub</a> · - <a href="https://github.com/catilgrass/run/blob/master/LICENSE" - >WTFPL</a - > - </div> - - <script> - function switchOS(os) { - document - .querySelectorAll(".os-tab") - .forEach((t) => t.classList.remove("active")); - document - .querySelectorAll(".install-box") - .forEach((b) => (b.style.display = "none")); - document - .querySelectorAll(".usage-box") - .forEach((b) => (b.style.display = "none")); - document - .querySelector(`.os-tab[onclick*="${os}"]`) - .classList.add("active"); - document.getElementById(`install-${os}`).style.display = - "block"; - document.getElementById(`usage-${os}`).style.display = "block"; - document.getElementById("prefix").textContent = - os === "windows" ? ".\\" : "./"; - document.getElementById("suffix").textContent = - os === "windows" ? ".ps1" : ".sh"; - } - </script> </body> </html> |