mirror of
https://github.com/direct-img/direct-img.link.git
synced 2026-10-15 09:17:54 +00:00
Feat: Redraw donate.webp in code with a sad direct-img robot mascot
Replaces the AI-generated image with a papercraft-style one drawn in HTML/SVG (design/donate.html, rendered with headless Chrome). The mascot's head is the logo's frame, its antenna the logo's link and its chest the logo itself. It explains why searches stopped, that cached images still load, that it resets on its own, and asks for donations at direct-img.link. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 45 KiB |
@@ -0,0 +1,205 @@
|
||||
<!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=Fredoka:wght@600&family=Nunito:wght@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: #f7efe2; font-family: Nunito, sans-serif; }
|
||||
svg.layer { position: absolute; inset: 0; }
|
||||
.back { z-index: 1; }
|
||||
.card { z-index: 2; }
|
||||
.front { z-index: 3; pointer-events: none; }
|
||||
.grain { z-index: 4; pointer-events: none; mix-blend-mode: multiply; opacity: .22; }
|
||||
|
||||
.card {
|
||||
position: absolute; left: 352px; top: 21px; width: 526px; height: 338px;
|
||||
padding: 24px 30px 0 32px; background: #fffdf8; border-radius: 5px; transform: rotate(-1deg);
|
||||
box-shadow: 0 2px 0 rgba(90, 60, 30, .07), 0 12px 24px rgba(90, 60, 30, .2);
|
||||
}
|
||||
.tape { position: absolute; width: 92px; height: 26px; opacity: .85; }
|
||||
.tape.l { top: -10px; left: -26px; transform: rotate(-32deg); background: repeating-linear-gradient(45deg, #f2c35e 0 7px, #f6d48a 7px 14px); }
|
||||
.tape.r { top: -12px; right: 44px; transform: rotate(6deg); background: repeating-linear-gradient(-45deg, #7cc8bf 0 7px, #a6dbd4 7px 14px); }
|
||||
|
||||
.tag {
|
||||
display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border-radius: 999px;
|
||||
background: #fde4df; color: #cf4743; font: 800 11.5px/1.2 Nunito, sans-serif; letter-spacing: 1.3px;
|
||||
}
|
||||
.tag svg { width: 13px; height: 13px; }
|
||||
h1 { margin: 9px 0 7px; color: #2b3a55; font: 600 35px/1.05 Fredoka, sans-serif; letter-spacing: -.3px; }
|
||||
p { color: #555b68; font-size: 14.5px; line-height: 1.45; max-width: 462px; }
|
||||
ul { list-style: none; margin: 11px 0 16px; }
|
||||
li { display: flex; align-items: center; gap: 10px; margin: 6px 0; color: #3d4352; font-size: 14.5px; }
|
||||
li svg { flex: none; width: 19px; height: 19px; }
|
||||
.cta { display: flex; align-items: center; gap: 16px; }
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; gap: 9px; padding: 10px 22px 11px 18px; border-radius: 999px; white-space: nowrap;
|
||||
background: #dc4c48; color: #fff; font: 600 23px/1 Fredoka, sans-serif; letter-spacing: .2px;
|
||||
box-shadow: 0 3px 0 #b5393a, 0 9px 16px rgba(200, 70, 60, .28);
|
||||
}
|
||||
.btn svg { width: 21px; height: 21px; }
|
||||
.alt { color: #7a7f8a; font-size: 13px; line-height: 1.35; }
|
||||
.alt b { color: #cf4743; font-weight: 800; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Background paper, the mascot and floating hearts -->
|
||||
<svg class="layer back" width="900" height="382" viewBox="0 0 900 382">
|
||||
<defs>
|
||||
<!-- Cut-paper look: slightly rough edges plus a soft shadow under each piece -->
|
||||
<filter id="paper" x="-20%" y="-20%" width="140%" height="150%">
|
||||
<feTurbulence type="fractalNoise" baseFrequency=".04" numOctaves="2" seed="7" result="n"/>
|
||||
<feDisplacementMap in="SourceGraphic" in2="n" scale="2.2" xChannelSelector="R" yChannelSelector="G" result="d"/>
|
||||
<feDropShadow in="d" dx="0" dy="2.5" stdDeviation="1.8" flood-color="#5a3d22" flood-opacity=".3"/>
|
||||
</filter>
|
||||
<filter id="soft" x="-10%" y="-30%" width="120%" height="160%">
|
||||
<feDropShadow dx="0" dy="-2" stdDeviation="3" flood-color="#5a3d22" flood-opacity=".12"/>
|
||||
</filter>
|
||||
<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>
|
||||
<!-- Heart with a dashed "stitched" edge -->
|
||||
<symbol id="stitched" 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"/>
|
||||
<path d="M0 6.6C-10.3-.6-10.3-9.4-5.2-9.4-2.4-9.4 0-7.2 0-4.8 0-7.2 2.4-9.4 5.2-9.4 10.3-9.4 10.3-.6 0 6.6Z" fill="none" stroke="#fff" stroke-width=".9" stroke-dasharray="1.6 1.4" opacity=".75"/>
|
||||
</symbol>
|
||||
</defs>
|
||||
|
||||
<!-- Paper hills -->
|
||||
<path filter="url(#soft)" fill="#f1dac4" d="M0 298C120 278 220 330 340 308 480 284 600 330 720 302 800 288 860 298 900 294V382H0Z"/>
|
||||
<path filter="url(#soft)" fill="#eac6a9" d="M0 342C100 326 200 354 330 338 470 322 620 356 760 336 830 328 880 334 900 331V382H0Z"/>
|
||||
|
||||
<!-- Confetti -->
|
||||
<g opacity=".85">
|
||||
<circle cx="36" cy="92" r="3.5" fill="#4fb3a9"/><circle cx="214" cy="30" r="3" fill="#ef6f6c"/>
|
||||
<circle cx="330" cy="120" r="3" fill="#f2b84b"/><circle cx="20" cy="240" r="3" fill="#ef6f6c"/>
|
||||
<circle cx="300" cy="300" r="3.5" fill="#4fb3a9"/><circle cx="90" cy="18" r="2.5" fill="#f59fb0"/>
|
||||
<path d="M318 168l2.4 5.6 5.6 2.4-5.6 2.4-2.4 5.6-2.4-5.6-5.6-2.4 5.6-2.4Z" fill="#f2b84b"/>
|
||||
<path d="M58 158l2 4.6 4.6 2-4.6 2-2 4.6-2-4.6-4.6-2 4.6-2Z" fill="#7cc8bf"/>
|
||||
</g>
|
||||
|
||||
<!-- Floating hearts -->
|
||||
<g filter="url(#paper)">
|
||||
<use href="#stitched" x="18" y="30" width="30" height="30" fill="#f2b84b" transform="rotate(-14 33 45)"/>
|
||||
<use href="#stitched" x="112" y="34" width="26" height="26" fill="#ef6f6c" transform="rotate(-8 125 47)"/>
|
||||
<use href="#stitched" x="52" y="196" width="22" height="22" fill="#f59fb0" transform="rotate(12 63 207)"/>
|
||||
<use href="#stitched" x="300" y="196" width="22" height="22" fill="#f59fb0" transform="rotate(-10 311 207)"/>
|
||||
<use href="#stitched" x="306" y="26" width="20" height="20" fill="#f2b84b" transform="rotate(16 316 36)"/>
|
||||
<use href="#stitched" x="16" y="124" width="18" height="18" fill="#7cc8bf" transform="rotate(-6 25 133)"/>
|
||||
</g>
|
||||
|
||||
<!-- A heart patched with a bandage -->
|
||||
<g filter="url(#paper)" transform="rotate(12 285 118)">
|
||||
<use href="#stitched" x="258" y="90" width="56" height="56" fill="#ef6f6c"/>
|
||||
<g transform="rotate(-38 286 117)">
|
||||
<rect x="264" y="110" width="44" height="14" rx="7" fill="#f3d6b0"/>
|
||||
<rect x="279" y="110" width="14" height="14" fill="#e9c393"/>
|
||||
<circle cx="270" cy="117" r="1.1" fill="#d9ad7a"/><circle cx="302" cy="117" r="1.1" fill="#d9ad7a"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Ground shadow -->
|
||||
<ellipse cx="160" cy="348" rx="150" ry="9" fill="#7a5532" opacity=".13"/>
|
||||
|
||||
<!-- Donation jar, almost empty -->
|
||||
<g filter="url(#paper)">
|
||||
<rect x="24" y="281" width="56" height="62" rx="12" fill="#cfe8ea"/>
|
||||
<rect x="31" y="289" width="7" height="42" rx="3.5" fill="#fff" opacity=".75"/>
|
||||
<circle cx="61" cy="333" r="8" fill="#f2b84b"/><circle cx="61" cy="333" r="5" fill="none" stroke="#d99a2b" stroke-width="1.5"/>
|
||||
<use href="#heart" x="41" y="295" width="24" height="24" fill="#ef6f6c"/>
|
||||
<rect x="20" y="270" width="64" height="13" rx="4" fill="#f2b84b"/>
|
||||
<rect x="40" y="274" width="24" height="4" rx="2" fill="#7a5532"/>
|
||||
</g>
|
||||
|
||||
<!-- The direct-img mascot: its head is the logo's frame and its antenna the logo's link -->
|
||||
<g filter="url(#paper)">
|
||||
<!-- Feet and legs -->
|
||||
<rect x="127" y="298" width="24" height="36" rx="10" fill="#3c9b91"/>
|
||||
<rect x="189" y="298" width="24" height="36" rx="10" fill="#3c9b91"/>
|
||||
<ellipse cx="137" cy="336" rx="27" ry="13" fill="#2b3a55"/>
|
||||
<ellipse cx="203" cy="336" rx="27" ry="13" fill="#2b3a55"/>
|
||||
<!-- Arms: one resting on the jar, one holding up a heart -->
|
||||
<path d="M116 244C98 248 88 256 82 266" fill="none" stroke="#3c9b91" stroke-width="18" stroke-linecap="round"/>
|
||||
<path d="M224 244C244 252 256 262 262 276" fill="none" stroke="#3c9b91" stroke-width="18" stroke-linecap="round"/>
|
||||
<!-- Body with the logo's mountain on its chest -->
|
||||
<rect x="108" y="222" width="124" height="92" rx="24" fill="#4fb3a9"/>
|
||||
<svg x="138" y="236" width="64" height="64" viewBox="0 0 64 64" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="7" y="7" width="50" height="50" rx="13" fill="#fffaf2" stroke="#2b3a55" stroke-width="4.5"/>
|
||||
<path d="M19 57 29 32l10 14 5-7 13 5" stroke="#2b3a55" stroke-width="4.5"/>
|
||||
<path d="M-2-4h-3a4 4 0 0 0 0 8h3M2-4h3a4 4 0 0 1 0 8H2M-4 0h8" stroke="#0070f3" stroke-width="2.5" transform="translate(42 22) rotate(-45)"/>
|
||||
</svg>
|
||||
<circle cx="82" cy="268" r="11" fill="#2b3a55"/>
|
||||
<use href="#stitched" x="240" y="230" width="52" height="52" fill="#ef6f6c" transform="rotate(8 266 256)"/>
|
||||
<circle cx="264" cy="280" r="11" fill="#2b3a55"/>
|
||||
<!-- Neck, ear bolts and head -->
|
||||
<rect x="156" y="210" width="28" height="16" rx="4" fill="#2b3a55"/>
|
||||
<circle cx="94" cy="161" r="11" fill="#f2b84b"/>
|
||||
<circle cx="246" cy="161" r="11" fill="#f2b84b"/>
|
||||
<rect x="100" y="108" width="140" height="106" rx="30" fill="#fffaf2" stroke="#2b3a55" stroke-width="8"/>
|
||||
<!-- Drooping antenna with the link as its tip -->
|
||||
<path d="M170 104C170 90 175 80 187 74" fill="none" stroke="#2b3a55" stroke-width="5" stroke-linecap="round"/>
|
||||
<path d="M-2-4h-3a4 4 0 0 0 0 8h3M2-4h3a4 4 0 0 1 0 8H2M-4 0h8" fill="none" stroke="#0070f3" stroke-width="2.6" stroke-linecap="round" transform="translate(196 67) rotate(-25) scale(2.3)"/>
|
||||
</g>
|
||||
|
||||
<!-- Sad face -->
|
||||
<g stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M134 139 154 132M186 132 206 139" stroke="#2b3a55" stroke-width="5"/>
|
||||
<ellipse cx="146" cy="159" rx="9.5" ry="11.5" fill="#2b3a55"/>
|
||||
<ellipse cx="194" cy="159" rx="9.5" ry="11.5" fill="#2b3a55"/>
|
||||
<path d="M134 153 158 147V142H134ZM182 147 206 153V142H182Z" fill="#fffaf2"/>
|
||||
<circle cx="149" cy="160" r="3" fill="#fff"/><circle cx="197" cy="160" r="3" fill="#fff"/>
|
||||
<path d="M140 176C136 183 135 187 139 190 143 193 147 189 146 185 145 182 142 179 140 176Z" fill="#7cc4f2"/>
|
||||
<path d="M139.5 184.5C139 186.5 140 188 141.5 188.3" fill="none" stroke="#fff" stroke-width="1.3" opacity=".8"/>
|
||||
<path d="M158 197Q170 188 182 197" fill="none" stroke="#2b3a55" stroke-width="5"/>
|
||||
<ellipse cx="127" cy="184" rx="9" ry="5" fill="#f4a6a0" opacity=".8"/>
|
||||
<ellipse cx="213" cy="184" rx="9" ry="5" fill="#f4a6a0" opacity=".8"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<div class="card">
|
||||
<div class="tape l"></div><div class="tape r"></div>
|
||||
<div class="tag"><svg viewBox="0 0 26 25" fill="#cf4743"><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="#ef6f6c"><use href="#heart"/></svg>Images we've already found still load as usual</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="#3c9b91" stroke-width="2.6" 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="#f2b84b"><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="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>
|
||||
|
||||
<!-- Hearts tucked over the card's corners -->
|
||||
<svg class="layer front" width="900" height="382" viewBox="0 0 900 382">
|
||||
<defs>
|
||||
<filter id="paper2" x="-20%" y="-20%" width="140%" height="150%">
|
||||
<feTurbulence type="fractalNoise" baseFrequency=".04" numOctaves="2" seed="3" result="n"/>
|
||||
<feDisplacementMap in="SourceGraphic" in2="n" scale="2.2" xChannelSelector="R" yChannelSelector="G" result="d"/>
|
||||
<feDropShadow in="d" dx="0" dy="2.5" stdDeviation="1.8" flood-color="#5a3d22" flood-opacity=".3"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g filter="url(#paper2)">
|
||||
<use href="#stitched" x="848" y="4" width="40" height="40" fill="#ef6f6c" transform="rotate(18 868 24)"/>
|
||||
<use href="#stitched" x="832" y="330" width="30" height="30" fill="#f59fb0" transform="rotate(-14 847 345)"/>
|
||||
<use href="#stitched" x="336" y="340" width="24" height="24" fill="#f2b84b" transform="rotate(10 348 352)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<!-- Paper grain over everything -->
|
||||
<svg class="layer grain" width="900" height="382">
|
||||
<filter id="grain"><feTurbulence type="fractalNoise" baseFrequency=".85" numOctaves="3" stitchTiles="stitch"/><feColorMatrix values="0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .18 0 0 0 .6 0"/></filter>
|
||||
<rect width="100%" height="100%" filter="url(#grain)"/>
|
||||
</svg>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user