mirror of
https://github.com/direct-img/direct-img.link.git
synced 2026-10-15 17:27:54 +00:00
multipleof4andClaude Opus 5.5
7c7d9b70bc
Redraws the mascot as a shaded robot with a glossy visor, sad LED face and a chest counter stuck at $0, keeps the original text and adds "So far, $0 has been donated to direct-img.link." The card is larger with bigger text and less empty space. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
153 lines
8.7 KiB
HTML
153 lines
8.7 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&family=VT323&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: #f5f0e6; font-family: Figtree, sans-serif; color: #23263a; }
|
|
svg.layer { position: absolute; inset: 0; }
|
|
|
|
.card {
|
|
position: absolute; left: 292px; top: 10px; width: 592px; height: 356px; padding: 16px 24px 0 26px;
|
|
background: #fffdf8; border: 2.5px solid #23263a; border-radius: 16px; box-shadow: 6px 6px 0 #23263a;
|
|
}
|
|
.tag {
|
|
display: inline-flex; align-items: center; gap: 7px; padding: 3px 12px 3px 10px; border-radius: 999px;
|
|
background: #fde2dc; border: 2px solid #23263a; font-weight: 800; font-size: 12.5px; letter-spacing: 1.3px;
|
|
}
|
|
.tag svg { width: 13px; height: 13px; }
|
|
h1 { margin: 6px 0 4px; font: 800 44px/1.04 "Bricolage Grotesque", sans-serif; letter-spacing: -.8px; }
|
|
p { color: #454a5c; font-weight: 500; font-size: 16px; line-height: 1.36; }
|
|
ul { list-style: none; margin: 7px 0 0; }
|
|
li { display: flex; align-items: center; gap: 10px; margin: 3px 0; font-weight: 700; font-size: 17px; }
|
|
li svg { flex: none; width: 20px; height: 20px; }
|
|
.so-far { margin: 8px 0 0; font-weight: 700; font-size: 17px; }
|
|
.so-far b { padding: 0 6px; background: #f6c945; border: 2px solid #23263a; border-radius: 6px; font-weight: 800; }
|
|
.cta { position: absolute; left: 26px; bottom: 16px; display: flex; align-items: center; gap: 20px; }
|
|
.btn {
|
|
display: inline-flex; align-items: center; gap: 10px; padding: 10px 22px 11px 18px; border-radius: 12px; white-space: nowrap;
|
|
background: #e5533d; border: 2.5px solid #23263a; box-shadow: 4px 4px 0 #23263a;
|
|
color: #fff; font: 800 25px/1 "Bricolage Grotesque", sans-serif; letter-spacing: -.3px;
|
|
}
|
|
.btn svg { width: 22px; height: 22px; }
|
|
.alt { color: #5d6173; font-weight: 500; font-size: 15px; line-height: 1.3; }
|
|
.alt b { color: #e5533d; 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="#e3d9c5"/>
|
|
|
|
<!-- Robot. Its antenna tip is the logo's link and its chest a donation counter stuck at $0. -->
|
|
<g stroke="#23263a" stroke-width="3" stroke-linejoin="round" stroke-linecap="round">
|
|
<!-- Legs and boots -->
|
|
<rect x="109" y="300" width="18" height="30" rx="5" fill="#3a4157"/>
|
|
<rect x="169" y="300" width="18" height="30" rx="5" fill="#3a4157"/>
|
|
<g clip-path="url(#cBoots)" stroke="none">
|
|
<rect x="90" y="316" width="116" height="40" fill="#d6d9e4"/>
|
|
<use href="#bootL" fill="#fbfbfd" transform="translate(-5 -6)"/><use href="#bootR" fill="#fbfbfd" 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="#fbfbfd" stroke-width="14"/>
|
|
<circle cx="70" cy="254" r="9" fill="#3a4157"/>
|
|
<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="#3a4157"/>
|
|
<circle cx="88" cy="206" r="14" fill="#3a4157"/>
|
|
</g>
|
|
<g>
|
|
<path d="M212 214 226 254M226 254 230 292" stroke-width="20"/>
|
|
<path d="M212 214 226 254M226 254 230 292" stroke="#fbfbfd" stroke-width="14"/>
|
|
<circle cx="226" cy="254" r="9" fill="#3a4157"/>
|
|
<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="#3a4157"/>
|
|
<circle cx="208" cy="206" r="14" fill="#3a4157"/>
|
|
</g>
|
|
|
|
<!-- Body -->
|
|
<g clip-path="url(#cBody)" stroke="none">
|
|
<rect x="80" y="170" width="140" height="150" fill="#d6d9e4"/>
|
|
<use href="#body" fill="#fbfbfd" transform="translate(-8 -7)"/>
|
|
</g>
|
|
<use href="#body" fill="none"/>
|
|
<path d="M92 288H204" stroke-width="2.2"/>
|
|
<rect x="110" y="206" width="76" height="48" rx="10" fill="#1d2233"/>
|
|
<text x="148" y="244" fill="#ffc94a" stroke="none" font-family="VT323" font-size="44" text-anchor="middle">$0</text>
|
|
<rect x="130" y="264" width="36" height="9" rx="4.5" fill="#1d2233"/>
|
|
<g fill="#23263a" 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="#3a4157"/>
|
|
<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="#0070f3" 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="#ff7a45"/>
|
|
<!-- Ear pods -->
|
|
<rect x="46" y="82" width="22" height="54" rx="9" fill="#ff7a45"/>
|
|
<rect x="228" y="82" width="22" height="54" rx="9" fill="#ff7a45"/>
|
|
<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="#d6d9e4"/>
|
|
<use href="#head" fill="#fbfbfd" 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="#1d2233"/>
|
|
<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="#6ee7ff" 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="#6ee7ff" stroke-width="3.2"/>
|
|
<g fill="#23263a" stroke="none"><circle cx="76" cy="160" r="2.4"/><circle cx="220" cy="160" r="2.4"/></g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
|
|
<div class="card">
|
|
<div class="tag"><svg viewBox="0 0 26 25" fill="#e5533d"><use href="#heart"/></svg>SEARCH LIMIT REACHED</div>
|
|
<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="#e5533d"><use href="#heart"/></svg>Images we've already found still load as usual</li>
|
|
<li><svg viewBox="0 0 24 24" fill="none" stroke="#0070f3" 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="#f6c945" stroke="#23263a" stroke-width="1.6" stroke-linejoin="round"><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>
|