mirror of
https://github.com/direct-img/direct-img.link.git
synced 2026-10-15 17:27:54 +00:00
multipleof4andClaude Opus 5.5
25c00edd14
Drops the "Search limit reached" badge, the card and button borders, and the $0 counter on the robot (its chest shows the logo again). Uses only white, black and grays, and spends the freed space on larger text. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
143 lines
8.0 KiB
HTML
143 lines
8.0 KiB
HTML
<!doctype html>
|
|
<!--
|
|
Source of assets/donate.webp, served when Brave and Bing are both out of searches. Render at 900x382 with:
|
|
chrome --headless --no-sandbox --hide-scrollbars --force-device-scale-factor=1 --window-size=900,382 --virtual-time-budget=8000 --screenshot=donate.png design/donate.html
|
|
ffmpeg -i donate.png -c:v libwebp -quality 90 -compression_level 6 assets/donate.webp
|
|
-->
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,800&family=Figtree:wght@500;700;800&display=block" rel="stylesheet">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
html, body { width: 900px; height: 382px; overflow: hidden; }
|
|
body { position: relative; background: #fff; font-family: Figtree, sans-serif; color: #111; }
|
|
svg.layer { position: absolute; inset: 0; }
|
|
|
|
.text { position: absolute; left: 300px; top: 16px; width: 588px; height: 350px; }
|
|
h1 { margin: 0 0 6px; font: 800 54px/1.04 "Bricolage Grotesque", sans-serif; letter-spacing: -1px; }
|
|
p { color: #444; font-weight: 500; font-size: 19px; line-height: 1.32; }
|
|
ul { list-style: none; margin: 14px 0 0; }
|
|
li { display: flex; align-items: center; gap: 11px; margin: 7px 0; font-weight: 700; font-size: 19.5px; }
|
|
li svg { flex: none; width: 22px; height: 22px; }
|
|
.so-far { margin: 12px 0 0; font-weight: 700; font-size: 19.5px; }
|
|
.so-far b { padding: 1px 7px; background: #e6e6e6; border-radius: 6px; font-weight: 800; }
|
|
.cta { position: absolute; left: 0; bottom: 0; display: flex; align-items: center; gap: 20px; }
|
|
.btn {
|
|
display: inline-flex; align-items: center; gap: 11px; padding: 12px 24px 13px 20px; border-radius: 12px; white-space: nowrap;
|
|
background: #111; color: #fff; font: 800 27px/1 "Bricolage Grotesque", sans-serif; letter-spacing: -.3px;
|
|
}
|
|
.btn svg { width: 23px; height: 23px; }
|
|
.alt { color: #666; font-weight: 500; font-size: 17.5px; line-height: 1.3; }
|
|
.alt b { color: #111; font-weight: 800; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<svg class="layer" width="900" height="382" viewBox="0 0 900 382">
|
|
<defs>
|
|
<symbol id="heart" viewBox="-13 -13 26 25"><path d="M0 10C-14 0-14-12-6-12-2-12 0-9 0-7 0-9 2-12 6-12 14-12 14 0 0 10Z"/></symbol>
|
|
<path id="link" d="M-2-4h-3a4 4 0 0 0 0 8h3M2-4h3a4 4 0 0 1 0 8H2M-4 0h8"/>
|
|
<!-- White shell parts: drawn in the shade color, then lit by the same shape nudged up-left and clipped to it -->
|
|
<rect id="head" x="60" y="44" width="176" height="130" rx="50"/>
|
|
<path id="body" d="M98 190Q148 176 198 190 210 194 210 208L206 290Q205 314 182 314H114Q91 314 90 290L86 208Q86 194 98 190Z"/>
|
|
<path id="bootL" d="M96 350V342Q96 322 118 322 140 322 140 342V350Z"/>
|
|
<path id="bootR" d="M156 350V342Q156 322 178 322 200 322 200 342V350Z"/>
|
|
<clipPath id="cHead"><use href="#head"/></clipPath>
|
|
<clipPath id="cBody"><use href="#body"/></clipPath>
|
|
<clipPath id="cBoots"><use href="#bootL"/><use href="#bootR"/></clipPath>
|
|
</defs>
|
|
|
|
<ellipse cx="148" cy="352" rx="96" ry="9" fill="#ececec"/>
|
|
|
|
<!-- Robot. Its antenna tip is the logo's link and its chest the logo. -->
|
|
<g stroke="#111" stroke-width="3" stroke-linejoin="round" stroke-linecap="round">
|
|
<!-- Legs and boots -->
|
|
<rect x="109" y="300" width="18" height="30" rx="5" fill="#3d3d3d"/>
|
|
<rect x="169" y="300" width="18" height="30" rx="5" fill="#3d3d3d"/>
|
|
<g clip-path="url(#cBoots)" stroke="none">
|
|
<rect x="90" y="316" width="116" height="40" fill="#d9d9d9"/>
|
|
<use href="#bootL" fill="#fff" transform="translate(-5 -6)"/><use href="#bootR" fill="#fff" transform="translate(-5 -6)"/>
|
|
</g>
|
|
<use href="#bootL" fill="none"/><use href="#bootR" fill="none"/>
|
|
<path d="M94 350H142M154 350H202" stroke-width="6"/>
|
|
|
|
<!-- Arms hang down: shoulder ball, upper arm, elbow, forearm, three-finger hand -->
|
|
<g>
|
|
<path d="M84 214 70 254M70 254 66 292" stroke-width="20"/>
|
|
<path d="M84 214 70 254M70 254 66 292" stroke="#fff" stroke-width="14"/>
|
|
<circle cx="70" cy="254" r="9" fill="#3d3d3d"/>
|
|
<path d="M54 300Q56 290 66 290 76 290 78 300L80 312 74 312 72 304 70 316 64 316 62 304 58 312 52 312Z" fill="#3d3d3d"/>
|
|
<circle cx="88" cy="206" r="14" fill="#3d3d3d"/>
|
|
</g>
|
|
<g>
|
|
<path d="M212 214 226 254M226 254 230 292" stroke-width="20"/>
|
|
<path d="M212 214 226 254M226 254 230 292" stroke="#fff" stroke-width="14"/>
|
|
<circle cx="226" cy="254" r="9" fill="#3d3d3d"/>
|
|
<path d="M242 300Q240 290 230 290 220 290 218 300L216 312 222 312 224 304 226 316 232 316 234 304 238 312 244 312Z" fill="#3d3d3d"/>
|
|
<circle cx="208" cy="206" r="14" fill="#3d3d3d"/>
|
|
</g>
|
|
|
|
<!-- Body -->
|
|
<g clip-path="url(#cBody)" stroke="none">
|
|
<rect x="80" y="170" width="140" height="150" fill="#d9d9d9"/>
|
|
<use href="#body" fill="#fff" transform="translate(-8 -7)"/>
|
|
</g>
|
|
<use href="#body" fill="none"/>
|
|
<path d="M92 288H204" stroke-width="2.2"/>
|
|
<rect x="124" y="214" width="48" height="48" rx="13" fill="#fff" stroke-width="3.6"/>
|
|
<path d="M133 262 141 242.5l8 11.2 4-5.6 10.4 4" fill="none" stroke-width="3.6"/>
|
|
<use href="#link" fill="none" stroke-width="2" transform="translate(157 231) rotate(-45) scale(.95)"/>
|
|
<g fill="#111" stroke="none"><circle cx="102" cy="300" r="2.4"/><circle cx="194" cy="300" r="2.4"/></g>
|
|
|
|
<!-- Neck -->
|
|
<rect x="132" y="168" width="32" height="24" rx="6" fill="#3d3d3d"/>
|
|
<path d="M134 176H162M134 184H162" stroke-width="2"/>
|
|
|
|
<!-- Head, tilted down to one side -->
|
|
<g transform="rotate(-8 148 176)">
|
|
<path d="M148 44V32C148 20 158 14 168 18" fill="none"/>
|
|
<use href="#link" fill="none" stroke="#111" stroke-width="2.6" transform="translate(176 26) rotate(40) scale(2.2)"/>
|
|
<rect x="138" y="36" width="20" height="10" rx="3" fill="#9a9a9a"/>
|
|
<!-- Ear pods -->
|
|
<rect x="46" y="82" width="22" height="54" rx="9" fill="#9a9a9a"/>
|
|
<rect x="228" y="82" width="22" height="54" rx="9" fill="#9a9a9a"/>
|
|
<path d="M53 98V120M61 98V120M235 98V120M243 98V120" stroke-width="2.2"/>
|
|
<!-- Shell -->
|
|
<g clip-path="url(#cHead)" stroke="none">
|
|
<rect x="56" y="40" width="184" height="140" fill="#d9d9d9"/>
|
|
<use href="#head" fill="#fff" transform="translate(-9 -9)"/>
|
|
</g>
|
|
<use href="#head" fill="none"/>
|
|
<!-- Visor with a reflection -->
|
|
<rect x="78" y="64" width="140" height="90" rx="34" fill="#1a1a1a"/>
|
|
<path d="M92 96C94 80 104 72 120 70H132C114 74 104 82 100 98Z" fill="#fff" stroke="none" opacity=".18"/>
|
|
<!-- Sad LED face: lids slope down to the outside, a small frown -->
|
|
<g fill="#f2f2f2" stroke="none">
|
|
<path d="M110 108 132 100V118A11 11 0 0 1 110 118Z"/>
|
|
<path d="M186 108 164 100V118A11 11 0 0 0 186 118Z"/>
|
|
</g>
|
|
<path d="M137 141Q148 133 159 141" fill="none" stroke="#f2f2f2" stroke-width="3.2"/>
|
|
<g fill="#111" stroke="none"><circle cx="76" cy="160" r="2.4"/><circle cx="220" cy="160" r="2.4"/></g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
|
|
<div class="text">
|
|
<h1>We've hit our limits</h1>
|
|
<p>direct-img.link is free and runs on donations. Every new search costs us money, and we've used up our budget. Our backup search is turning us away too, so we can't find new images right now.</p>
|
|
<ul>
|
|
<li><svg viewBox="0 0 26 25" fill="#111"><use href="#heart"/></svg>Images we've already found still load as usual</li>
|
|
<li><svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12a8 8 0 1 1-2.3-5.7M20 4v4.5h-4.5"/></svg>This resets on its own, so check back later</li>
|
|
<li><svg viewBox="0 0 24 24" fill="#111"><path d="M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.5L12 17.3l-5.9 3.2 1.3-6.5L2.5 9.4l6.6-.8Z"/></svg>Donations raise the limits for everyone</li>
|
|
</ul>
|
|
<div class="so-far">So far, <b>$0</b> has been donated to direct-img.link.</div>
|
|
<div class="cta">
|
|
<div class="btn"><svg viewBox="0 0 26 25" fill="#fff"><use href="#heart"/></svg>Donate at direct-img.link</div>
|
|
<div class="alt">Every bit helps.<br><b>Thank you!</b></div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|