mirror of
https://github.com/direct-img/direct-img.link.git
synced 2026-10-15 09:17:54 +00:00
Feat: Redesign donate.webp with a new robot and a $0 donated note
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>
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 52 KiB |
+102
-155
@@ -7,199 +7,146 @@
|
||||
<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">
|
||||
<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: #f7efe2; font-family: Nunito, sans-serif; }
|
||||
body { position: relative; background: #f5f0e6; font-family: Figtree, sans-serif; color: #23263a; }
|
||||
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);
|
||||
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;
|
||||
}
|
||||
.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;
|
||||
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: 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; }
|
||||
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: 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);
|
||||
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: 21px; height: 21px; }
|
||||
.alt { color: #7a7f8a; font-size: 13px; line-height: 1.35; }
|
||||
.alt b { color: #cf4743; font-weight: 800; }
|
||||
.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>
|
||||
|
||||
<!-- Background paper, the mascot and floating hearts -->
|
||||
<svg class="layer back" width="900" height="382" viewBox="0 0 900 382">
|
||||
<svg class="layer" 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>
|
||||
<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>
|
||||
|
||||
<!-- 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"/>
|
||||
<ellipse cx="148" cy="352" rx="96" ry="9" fill="#e3d9c5"/>
|
||||
|
||||
<!-- 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"/>
|
||||
<!-- 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>
|
||||
</g>
|
||||
<use href="#bootL" fill="none"/><use href="#bootR" fill="none"/>
|
||||
<path d="M94 350H142M154 350H202" stroke-width="6"/>
|
||||
|
||||
<!-- Ground shadow -->
|
||||
<ellipse cx="160" cy="348" rx="150" ry="9" fill="#7a5532" opacity=".13"/>
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
<!-- Neck -->
|
||||
<rect x="132" y="168" width="32" height="24" rx="6" fill="#3a4157"/>
|
||||
<path d="M134 176H162M134 184H162" stroke-width="2"/>
|
||||
|
||||
<!-- 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"/>
|
||||
<!-- 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="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>
|
||||
<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="#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>
|
||||
<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>
|
||||
|
||||
<!-- 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