Files
direct-img.link/index.html
T
multipleof4andClaude Opus 5.5 023f4d132c Feat: Add GoatCounter analytics, Terms & Privacy pages, prompt copy button
- Update AI system prompt example (README + index)
- Add copy button for the prompt on the index page
- Add GoatCounter to homepage; report image hits server-side via
  waitUntil (optional GOATCOUNTER_URL/GOATCOUNTER_TOKEN)
- Add TERMS.md and PRIVACY.md, linked in the index footer
- Remove dead c.planetrenox.com tracker

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-26 08:51:48 -07:00

111 lines
6.9 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>direct-img.link | Live images in markdown</title>
<meta name="description" content="Embed live images in markdown powered by search. No APIs, no tokens, just search.">
<link rel="icon" href="/assets/favicon.ico" sizes="16x16 32x32 48x48"><link rel="icon" href="/assets/logo.svg" type="image/svg+xml">
<script data-goatcounter="https://direct-img.goatcounter.com/count"
async src="//gc.zgo.at/count.js"></script>
<style>
:root{--bg:#fff;--text:#1a1a1a;--text-muted:#666;--accent:#0070f3;--warning:#eb5757;--code-bg:#f5f5f5;--border:#eaeaea;--radius:8px;}
*{box-sizing:border-box;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.6;color:var(--text);background-color:var(--bg);margin:0;display:flex;flex-direction:column;align-items:center;}
main{max-width:680px;width:100%;padding:80px 24px;}
h1{font-size:2.5rem;font-weight:800;letter-spacing:-0.02em;margin-bottom:8px;}
p.tagline{font-size:1.25rem;color:var(--text-muted);margin-bottom:32px;}
.status-notice{padding:20px;background:#fff5f5;border:1px solid #ffe0e0;border-radius:var(--radius);margin-bottom:48px;}
.status-notice p{margin:0;font-size:1rem;}
.status-notice strong{color:var(--warning);}
.donate{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:12px;}
.btc-address{font-family:monospace;background:rgba(0,0,0,0.05);padding:4px 8px;border-radius:4px;font-size:0.85rem;word-break:break-all;display:inline-block;}
section{margin-bottom:48px;}
h2{font-size:1.5rem;font-weight:700;margin-bottom:16px;border-bottom:1px solid var(--border);padding-bottom:8px;}
pre{background:var(--code-bg);padding:16px;border-radius:var(--radius);overflow-x:auto;font-size:0.9rem;border:1px solid var(--border);}
.copy-wrap{position:relative;}
.copy-wrap pre{white-space:pre-wrap;padding-right:72px;}
.copy{position:absolute;top:8px;right:8px;font:inherit;font-size:0.75rem;font-weight:600;padding:4px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text-muted);cursor:pointer;}
.copy:hover{color:var(--accent);border-color:var(--accent);}
code{font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;}
table{width:100%;border-collapse:collapse;margin:16px 0;font-size:0.9rem;}
th,td{text-align:left;padding:12px;border-bottom:1px solid var(--border);}
th{color:var(--text-muted);font-weight:600;}
.card{border:1px solid var(--border);padding:16px;border-radius:var(--radius);}
.card h3{margin:0 0 8px 0;font-size:1rem;}
.card p{margin:0;font-size:0.9rem;color:var(--text-muted);}
footer{width:100%;max-width:680px;padding:40px 24px;border-top:1px solid var(--border);color:var(--text-muted);font-size:0.9rem;display:flex;justify-content:space-between;margin-top:auto;}
a{color:var(--accent);text-decoration:none;} a:hover{text-decoration:underline;}
@media(max-width:600px){h1{font-size:2rem;}}
</style>
</head>
<body>
<main>
<h1>direct-img.link</h1>
<p class="tagline">Live images in markdown, powered by search.</p>
<section class="status-notice">
<p>This service is <strong>free</strong> to use. However, search API and server costs are high. Without community donations, <strong>this project will die quickly.</strong></p>
<p style="margin-top:10px;">If we receive significant donations, we will <strong>increase the daily search limits</strong> for everyone.</p>
<div class="donate">
<iframe src="https://github.com/sponsors/multipleof4/button" title="Sponsor multipleof4" height="32" width="114" style="border:0;border-radius:6px;"></iframe>
<div class="btc-address">BTC: bc1q3d975cd57205dx6mz05s2g27xujxsc3q0nlv59</div>
</div>
</section>
<section>
<h2>For AI System Prompts</h2>
<p>Add this to your system instructions:</p>
<div class="copy-wrap">
<button class="copy" onclick="copyPrompt(this)">Copy</button>
<pre><code id="prompt">When writing markdown, embed relevant images/gifs using direct-img.link — a free image search proxy that returns images directly from a URL. But keep it entertaining, for example use it to show reaction faces, girl, or fun, not technical.
Example structure:
![Cat Gif](https://direct-img.link/cat+gif)
Use images to complement your responses, powered by Brave.</code></pre>
</div>
</section>
<section>
<h2>Usage</h2>
<p>Embed directly in your markdown files:</p>
<pre><code>![orange cat](https://direct-img.link/orange+cat)</code></pre>
<p style="font-size:0.85rem;margin-top:12px;color:var(--text-muted);">* Note: Literal dots (.) and slashes (/) are rejected to prevent bot abuse. Use <code>%2E</code> or <code>%2F</code> if your query requires them.</p>
</section>
<section>
<h2>Rate Limits</h2>
<table>
<thead>
<tr><th>Scope</th><th>Limit</th><th>Action</th></tr>
</thead>
<tbody>
<tr><td>Burst</td><td>~10 req/10s per IP</td><td>HTTP 429 (~10s)</td></tr>
<tr><td>New Searches</td><td>20 per day per IP</td><td>Limit image served</td></tr>
</tbody>
</table>
<p style="font-size:0.85rem;color:var(--text-muted);">* Cached images don't count toward the daily limit and keep loading after you hit it. The burst limit applies to all image requests and is enforced approximately. The daily limit resets at 00:00 UTC.</p>
</section>
<section>
<div class="card">
<h3>Caching</h3>
<p>Images are cached for 90 days. Subsequent requests for the same query are served instantly. Failed searches are remembered for 24 hours.</p>
</div>
</section>
</main>
<footer>
<div>Built for the AI era.</div>
<div><a href="https://github.com/direct-img/direct-img.link/blob/main/TERMS.md">Terms</a> · <a href="https://github.com/direct-img/direct-img.link/blob/main/PRIVACY.md">Privacy</a> · <a href="https://github.com/direct-img/direct-img.link">GitHub</a></div>
</footer>
<script>
const copyPrompt=b=>{
const p=document.getElementById('prompt');
(navigator.clipboard?.writeText(p.textContent)??Promise.reject()).then(()=>{
b.textContent='Copied!';
setTimeout(()=>b.textContent='Copy',1500);
},()=>getSelection().selectAllChildren(p));
};
</script>
</body>
</html>