PageSourceSearch

https://11secondclub.com/login

html 11secondclub.com collected 2026-10-01 11:43:06 UTC 31,325 bytes, 486 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="utf-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>11 Second Club - Login</title>
7    <meta name="description" content="Log in to your 11 Second Club account to enter competitions, vote, and connect with animators." />
8            <link rel="canonical" href="https://www.11secondclub.com/login" />
9        <!-- Open Graph -->
10    <meta property="og:title" content="11 Second Club - Login" />
11    <meta property="og:description" content="Log in to your 11 Second Club account to enter competitions, vote, and connect with animators." />
12    <meta property="og:type" content="website" />
13    <meta property="og:url" content="https://www.11secondclub.com/login" />
14    <meta property="og:image" content="https://www.11secondclub.com/images/logo.png" />
15    <meta property="og:site_name" content="11 Second Club" />
16    <!-- Twitter Card -->
17    <meta name="twitter:card" content="summary_large_image" />
18    <meta name="twitter:title" content="11 Second Club - Login" />
19    <meta name="twitter:description" content="Log in to your 11 Second Club account to enter competitions, vote, and connect with animators." />
20    <meta name="twitter:image" content="https://www.11secondclub.com/images/logo.png" />
21            <link rel="alternate" type="application/atom+xml" title="11 Second Club Atom Feed" href="https://www.11secondclub.com/rss" />
22    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
23    <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png" />
24    <!-- Tailwind CSS (pre-built) -->
25    <link rel="stylesheet" href="/css/tailwind.min.css?20260512a" type="text/css" media="screen" />
26    <!-- CSS -->
27    <link rel="stylesheet" href="/css/app.css?20260512a" type="text/css" media="screen" />
28    <link rel="stylesheet" href="/css/video_player.css?20260512a" type="text/css" media="screen" />
29    <link rel="stylesheet" href="/css/gamification.css?20260512a" type="text/css" media="screen" />
30    <!-- Self-hosted jQuery + UI (pinned, with SRI). Previously pulled from
31         ajax.googleapis.com with no integrity attributes — if the CDN went
32         down or served tampered bytes, the site broke. Local with SRI means
33         a byte mismatch fails closed and a CDN outage can't touch us. -->
34    
34<script src="/js/jquery-3.7.1.min.js?20260512a"
35            integrity="sha384-1H217gwSVyLSIfaLxHbE7dRb3v4mYCKbpQvzx0cegeju1MVsGrX5xXxAvs/HgeFs"
36            crossorigin="anonymous"></script>
36
37    
37<script src="/js/jquery-ui-1.14.1.min.js?20260512a"
38            integrity="sha384-SStJQoPipVtHHnIgUfDI+jTAbSyU+HMbhwt2XRRNpLIRFg9VguopT6Y4+cdOlkqg"
39            crossorigin="anonymous"></script>
39
40    
40<script src="/js/common.js?20260512a" defer></script>
40
41    
41<script src="/js/video_player.js?20260512a" defer></script>
41
42</head>
43<body class="bg-11sc-gray font-gill text-white mx-auto max-w-site min-h-screen"><a href="https://11secondclub.com/cdn-cgi/content?id=gEumTLFPYPx8VL9eB12k90yfnKWJPHNdlS5ch023.i8-1790854985.7936304-1.2.1.1-NDVBb_JexmOvqrtJbNyfI826IeC0EFiJa43n.nHt5oHwwAPwx40My_Pp_C2YlPgI" aria-hidden="true" rel="nofollow noopener" style="display: none !important; visibility: hidden !important"></a>
44<div id="header" class="relative mx-auto max-w-site border-t-4 border-x-4 border-white">
45    <div id="banner" class="relative z-20 w-full h-[171px] bg-[url('/css/images/background-top.png')] bg-no-repeat bg-top bg-center">
46        <a href="/">
47            <picture>
48                <source type="image/webp" srcset="/images/logo.webp 1x, /images/[email protected] 2x">
49                <img src="/images/logo.png"
50                     alt="11 Second Club Logo"
51                     class="absolute left-5 top-[2px] w-[324px] h-[161px] no_margin transparent"
52                     id="logo" />
53            </picture>
54        </a>
55        <!-- Film strip winners (hidden on mobile). Only the first frame
56             carries the descriptive alt text; the other five are presentational
57             (same link target) and use alt="" so screen readers don't read the
58             same label six times in a row. -->
59        <a href="/competitions/august26/winner/" class="hidden md:block"><img src="/images/winner/1.png?v=august26" alt="August 2026 Competition winner — &#039;Dolio - The Lottery Man&#039; by Tanakrit Chanrungrueang" class="absolute transparent no_margin" id="winner_1" /></a>
60        <a href="/competitions/august26/winner/" class="hidden md:block" aria-hidden="true" tabindex="-1"><img src="/images/winner/2.png?v=august26" alt="" class="absolute transparent no_margin" id="winner_2" /></a>
61        <a href="/competitions/august26/winner/" class="hidden md:block" aria-hidden="true" tabindex="-1"><img src="/images/winner/3.png?v=august26" alt="" class="absolute transparent no_margin" id="winner_3" /></a>
62        <a href="/competitions/august26/winner/" class="hidden md:block" aria-hidden="true" tabindex="-1"><img src="/images/winner/4.png?v=august26" alt="" class="absolute transparent no_margin" id="winner_4" /></a>
63        <a href="/competitions/august26/winner/" class="hidden md:block" aria-hidden="true" tabindex="-1"><img src="/images/winner/5.png?v=august26" alt="" class="absolute transparent no_margin" id="winner_5" /></a>
64        <a href="/competitions/august26/winner/" class="hidden md:block" aria-hidden="true" tabindex="-1"><img src="/images/winner/6.png?v=august26" alt="" class="absolute transparent no_margin" id="winner_6" /></a>
65    </div>
66    <div id="nav" class="relative z-20 w-full bg-[url('/css/images/nav.gif')] bg-repeat-x bg-top bg-center text-white">
67        <div class="flex items-center justify-between h-[46px]">
68            <!-- Nav links. On mobile (when hamburger open), overlay the subnav
69                 and page content with a solid dark background instead of
70                 inline-expanding through the page — the parent #nav background
71                 is bg-repeat-x and only paints the 46px header strip, so an
72                 inline-expanded mobile menu was transparent below 46px and
73                 the subnav banner bled through. -->
74            <div id="nav_links" class="hidden md:flex flex-col md:flex-row md:items-center w-full md:w-auto pl-4 md:pl-5 overflow-hidden absolute md:relative top-[46px] md:top-auto left-0 md:left-auto right-0 md:right-auto bg-11sc-dark md:bg-transparent z-30 md:z-auto pb-3 md:pb-0 shadow-lg md:shadow-none">
75                <a href="/" class="block whitespace-nowrap px-2.5 py-2 md:py-0 text-lg md:text-base md:leading-[46px] hover:text-[#C20000] transition-colors text-[#C20000]">Home</a>
76                <a href="/vote/september26/" class="block whitespace-nowrap px-2.5 py-2 md:py-0 text-lg md:text-base md:leading-[46px] hover:text-[#C20000] transition-colors">Vote</a>                <a href="/competitions/current/" class="block whitespace-nowrap px-2.5 py-2 md:py-0 text-lg md:text-base md:leading-[46px] hover:text-[#C20000] transition-colors">Competition</a>
77                <a href="/competitions/" class="block whitespace-nowrap px-2.5 py-2 md:py-0 text-lg md:text-base md:leading-[46px] hover:text-[#C20000] transition-colors">Archives</a>
78                <a href="/forum/" class="block whitespace-nowrap px-2.5 py-2 md:py-0 text-lg md:text-base md:leading-[46px] hover:text-[#C20000] transition-colors">Forums</a>
79                <a href="/resources/" class="block whitespace-nowrap px-2.5 py-2 md:py-0 text-lg md:text-base md:leading-[46px] hover:text-[#C20000] transition-colors">Resources</a>
80                <a href="/FAQ" class="block whitespace-nowrap px-2.5 py-2 md:py-0 text-lg md:text-base md:leading-[46px] hover:text-[#C20000] transition-colors">FAQ</a>
81                                <!-- Mobile-only auth links -->
82                <div class="md:hidden border-t border-white/20 mt-2 pt-2 pb-3 px-4 whitespace-normal">
83                                            <div class="flex gap-3 text-sm">
84                            <a href="/login" class="text-11sc-gold hover:text-yellow-400 font-semibold">Login</a>
85                            <a href="/join" class="text-11sc-gold hover:text-yellow-400 font-semibold">Join Up</a>
86                        </div>
87                                    </div>
88                            </div>
89
90                        <!-- Desktop auth -->
91            <div id="nav_login" class="hidden md:block text-right text-sm leading-tight mr-4 shrink-0 whitespace-nowrap">
92                                    <div><a href="/login" class="hover:text-11sc-gold">Login</a> &#124; <a href="/join" class="hover:text-11sc-gold">Join Up</a></div>
93                            </div>
94            
95            <!-- Mobile hamburger -->
96            <button id="hamburger" class="md:hidden absolute right-3 top-2 z-30 p-2 text-white" aria-label="Toggle navigation" aria-expanded="false">
97                <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
98                    <path id="hamburger-open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
99                    <path id="hamburger-close" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
100                </svg>
101            </button>
102        </div>
103    </div>
104        <div id="subnav" class="bg-11sc-dark">
105        <div class="flex flex-wrap items-center justify-center gap-x-4 gap-y-2 px-4 py-2.5 text-sm">
106            <!-- Countdown -->
107            <div id="countdown" class="flex items-center gap-1.5">
108                <div class="flex items-baseline gap-0.5">
109                    <span id="remaining-days" class="text-11sc-gold font-bold text-lg leading-none">30</span><span class="text-gray-400 text-xs">d</span>
110                </div>
111                <div class="flex items-baseline gap-0.5">
112                    <span id="remaining-hours" class="text-11sc-gold font-bold text-lg leading-none">16</span><span class="text-gray-400 text-xs">h</span>
113                </div>
114                <div class="flex items-baseline gap-0.5">
115                    <span id="remaining-minutes" class="text-11sc-gold font-bold text-lg leading-none">16</span><span class="text-gray-400 text-xs">m</span>
116                </div>
117                <div class="flex items-baseline gap-0.5">
118                    <span id="remaining-seconds" class="text-11sc-gold font-bold text-lg leading-none">55</span><span class="text-gray-400 text-xs">s</span>
119                </div>
120            </div>
121
122            <span class="text-gray-500">remaining in the</span>
123            <a href="/competitions/october26/" class="text-white font-semibold hover:text-11sc-gold transition-colors">October Competition</a>
124
125                        <span class="text-gray-600 hidden sm:inline">|</span>
126            <button onclick="var p=this.querySelector('audio');p.paused?p.play():p.pause()" class="inline-flex items-center gap-1.5 px-3 py-1 bg-white/10 rounded-full text-xs font-semibold hover:bg-white/20 transition-colors cursor-pointer">
127                <svg class="w-3.5 h-3.5 text-11sc-gold" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
128                <audio src="https&#x3A;&#x2F;&#x2F;d15spcjuouqbbb.cloudfront.net&#x2F;files&#x2F;october26.mp3&#x3F;Expires&#x3D;1790858585&amp;Signature&#x3D;fakwO0alqNtLGDaXvjCDqq3LgFrTm-X4rvP7jllUC84aJ2ZFcXg8kxWNakIHEdRbRgm9KVc2H4o8VwvqwvcYbMLYp4KPA3yIN6nxvdYnCp81Qhr5NtxjSWYH1KBuoOhxKslsEZN&#x7E;Ht83tY6EEoAiFaz4Vz2ZLMFLHZ2MMYrqzrhjO&#x7E;uDUG1Gop6PC8mBTDlqCFj69CcZpLagRBcsxEdoOK9VE74459ehENAnBmyE74ZOmPYLlzhVvzGwwUYmfyMdB6mPKvSc53UeUicb6-Lz0vN39nS4oN0muO7WYVpYMCnZDvxAyvsGFMY6ZQi1D8qd&#x7E;aE&#x7E;VxP0cVpmMnhKqag0jA__&amp;Key-Pair-Id&#x3D;KCFKLPKRCACJ6" hidden preload="metadata"
129                    ontimeupdate="this.parentElement.querySelector('.audio-label').textContent=Math.max(Math.round(this.duration)-Math.floor(this.currentTime),1)+'s'"
130                    onended="this.parentElement.querySelector('.audio-label').textContent='Preview Audio'"
131                    onpause="this.parentElement.querySelector('.audio-label').textContent='Preview Audio'"></audio>
132                <span class="audio-label" style="pointer-events:none">Preview Audio</span>
133            </button>
134                    </div>
135    </div>
136        
136<script type="text/javascript">
137        TargetDate = new Date("11/01/2026 4:00:00 AM UTC");
138        </script>
138
139    
139<script type="text/javascript" src="/js/countdown.js"></script>
139</div><!-- close #header -->
140
141<div id="content" class="container relative mx-auto bg-11sc-bg max-w-site pt-5 border-x-4 border-white min-h-[850px]">
142<div class="px-5 lg:px-10 py-6 ">
143	<div class="max-w-md mx-auto">
144		<div class="bg-11sc-dark rounded-xl p-6 shadow-lg">
145			<h2 class="text-xl font-bold uppercase text-11sc-gold text-center mb-4">Login</h2>
146												<form name="login" id="login_form" method="post" action="/login">
147				<input type="hidden" name="csrf_test_name" value="c81354e5f5d1e96c06d305156dc5a65ed28953476fdb3cf14b2009be70e708c9">				<div class="space-y-3">
148					<div>
149						<label for="username" class="block text-sm font-semibold mb-1">Username</label>
150						<input type="text" name="username" id="username" maxlength="25" value="" class="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white text-sm" />
151					</div>
152					<div>
153						<label for="password" class="block text-sm font-semibold mb-1">Password</label>
154						<input type="password" name="password" id="password" maxlength="72" value="" class="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white text-sm" />
155					</div>
156					<button type="submit" name="login" id="login" class="w-full py-3 bg-11sc-gold text-11sc-dark font-bold rounded-lg hover:bg-yellow-400 transition-colors uppercase tracking-wide">Login</button>
157				</div>
158			</form>
159			<div class="mt-4 text-sm text-center text-gray-400">
160				<p><a href="/login/forgot" class="text-11sc-gold hover:text-yellow-400">Forgot your username or password?</a></p>
161				<p class="mt-1">Not a member? <a href="/join/" class="text-11sc-gold hover:text-yellow-400">Join the club!</a></p>
162			</div>
163		</div>
164	</div>
165</div>
166</div><!-- close #content -->
167<footer class="bg-11sc-light text-11sc-dark px-5 lg:px-10 py-3 border-x-4 border-b-4 border-white relative lg:min-h-[100px] lg:flex lg:items-end">
168    <div class="flex flex-col sm:flex-row justify-between items-center text-sm gap-2 w-full lg:pr-28">
169        <div>&copy; 2007-2026 Yellowbrick Learning Inc</div>
170        <div class="flex items-center gap-3">
171            <a href="https://x.com/11SecondClub" target="_blank" rel="noopener" aria-label="11 Second Club on X" style="color:#000">
172                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
173            </a>
174            <a href="https://bsky.app/profile/11secondclub.com" target="_blank" rel="noopener" aria-label="11 Second Club on Bluesky" style="color:#1185fe" onmouseover="this.style.color='#0a6cd1'" onmouseout="this.style.color='#1185fe'">
175                <svg class="w-4 h-4" viewBox="0 0 568 501" fill="currentColor" aria-hidden="true"><path d="M123.121 33.664C188.241 82.553 258.281 181.68 284 234.873c25.719-53.192 95.759-152.32 160.879-201.21C491.866-1.611 568-28.906 568 57.947c0 17.346-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.748C507.222 323.8 536.444 388.56 473.333 453.32c-119.86 122.992-172.272-30.859-185.702-70.281-2.462-7.227-3.614-10.608-3.631-7.733-.017-2.875-1.169.506-3.631 7.733-13.43 39.422-65.842 193.273-185.702 70.281-63.111-64.76-33.89-129.52 31.986-149.071-65.72 11.185-139.6-7.295-159.875-79.748C9.945 203.659 0 75.291 0 57.946 0-28.906 76.135-1.612 123.121 33.664Z"/></svg>
176            </a>
177            <a href="https://www.tiktok.com/@11secondclubofficial" target="_blank" rel="noopener" aria-label="11 Second Club on TikTok" style="color:#000">
178                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5.8 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1.84-.1z"/></svg>
179            </a>
180            <span>|</span>
181            <a href="/contributors" class="text-11sc-dark underline hover:text-11sc-red transition-colors">About Us</a>
182            <span>|</span>
183            <a href="/privacy" class="text-11sc-dark underline hover:text-11sc-red transition-colors">Privacy Policy</a>
184        </div>
185    </div>
186            <!-- pointer-events:none on the wrap so clicks through empty
187         transparent regions fall through to whatever's underneath
188         (footer links, late-page cards). The avatar + bubble
189         restore pointer-events:auto so they still accept their
190         own clicks (dismiss button, hover on Clocky etc). -->
191        <div id="clocky-wrap" class="clocky-wrap hidden lg:block" data-api="/api/clocky" data-class="general" data-side="right" data-deadline="" style="position:absolute;bottom:0;right:30px;width:540px;display:flex;justify-content:flex-end;cursor:default;pointer-events:none;">
192        <!-- Speech Bubble (dismissible — Stephen reported it overlapped
193             Save buttons and other CTAs in various views. Dismissal is
194             per-message-text: localStorage keys by a text hash so a new
195             bubble reappears even if the user dismissed a prior one.) -->
196        <div id="clocky-bubble" class="clocky-bubble" style="position:absolute;bottom:60px;right:40px;background:#fff;border-radius:14px;padding:10px 24px 10px 14px;box-shadow:0 3px 12px rgba(0,0,0,0.15);width:max-content;max-width:480px;min-width:100px;font-size:14px;line-height:1.4;color:#333;white-space:normal;z-index:2;pointer-events:auto;">
197            <span class="clocky-bubble-text">Wooooo!</span>
198            <button type="button" id="clocky-bubble-close" aria-label="Dismiss Clocky's message" style="position:absolute;top:2px;right:4px;background:none;border:0;padding:2px 6px;color:#888;font-size:16px;line-height:1;cursor:pointer;font-weight:bold;">&times;</button>
199            <div style="position:absolute;bottom:-8px;right:14px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #fff;" class="clocky-bubble-tail"></div>
200        </div>
201        <!-- Clocky -->
202        <div id="clocky-clock" class="clocky-clock" style="position:relative;z-index:1;pointer-events:auto;">
203                        <picture>
204                <source type="image/webp" srcset="/images/clocky_faceless.webp 1x, /images/[email protected] 2x">
205                <img src="/images/clocky_faceless.png"
206                     srcset="/images/clocky_faceless.png 1x, /images/[email protected] 2x"
207                     alt="Clocky"
208                     style="width:80px;height:auto;display:block;">
209            </picture>
210                    </div>
211    </div>
212    
212<script>
213    (function(){
214        // Hash the bubble text so dismissing one message doesn't
215        // permanently hide future messages.
216        var bubble = document.getElementById('clocky-bubble');
217        var closeBtn = document.getElementById('clocky-bubble-close');
218        var tail = bubble ? bubble.querySelector('.clocky-bubble-tail') : null;
219        if (!bubble || !closeBtn) return;
220        var text = (bubble.querySelector('.clocky-bubble-text').textContent || '').trim();
221        // Simple 32-bit hash; collision risk is OK for dismissal keying.
222        var hash = 0;
223        for (var i = 0; i < text.length; i++) { hash = ((hash << 5) - hash) + text.charCodeAt(i); hash |= 0; }
224        var key = 'clocky-dismissed-' + hash;
225        // Dismisses expire after 24h — a quote the user closed
226        // earlier re-appears on the next day instead of staying
227        // permanently hidden. Jon hit this on the archive page
228        // where the same quote rotated in and silently stayed
229        // dismissed.
230        var DISMISS_TTL_MS = 24 * 60 * 60 * 1000;
231        try {
232            var storedAt = parseInt(localStorage.getItem(key) || '0', 10);
233            if (storedAt && (Date.now() - storedAt) < DISMISS_TTL_MS) {
234                bubble.style.display = 'none';
235                if (tail) tail.style.display = 'none';
236            } else if (storedAt) {
237                localStorage.removeItem(key);
238            }
239        } catch (e) { /* localStorage disabled; show bubble anyway */ }
240        closeBtn.addEventListener('click', function(){
241            bubble.style.display = 'none';
242            if (tail) tail.style.display = 'none';
243            try { localStorage.setItem(key, String(Date.now())); } catch (e) {}
244        });
245    })();
246    </script>
246
247    
247<script src="/js/clocky.js"></script>
247
248    </footer>
249<div id="achievement-toast-container" class="achievement-toast-container"></div>
250<script>
251(function() {
252    var container = document.getElementById('achievement-toast-container');
253    var checked = false;
254
255    // Check once after page load
256    setTimeout(function() {
257        if (checked) return;
258        checked = true;
259        fetch('/api/notifications/achievements')
260            .then(function(r) { return r.json(); })
261            .then(function(data) {
262                if (!data.achievements || data.achievements.length === 0) return;
263                data.achievements.forEach(function(a, i) {
264                    setTimeout(function() { showToast(a); }, i * 1200);
265                });
266                // Mark as notified. keepalive: true so the POST survives
267                // a page navigation that happens during the toast animation
268                // sequence. Without it the cancel-on-navigation race left
269                // user_achievements.notified = 0, and the same toast
270                // re-fired on every subsequent page load — Stephen hit
271                // this with the Clocky's Friend unlock.
272                fetch('/api/notifications/achievements/seen', { method: 'POST', keepalive: true });
273            });
274    }, 1500);
275
276    function showToast(achievement) {
277        var toast = document.createElement('div');
278        toast.className = 'achievement-toast' + (achievement.is_hidden ? ' achievement-toast-rare' : '');
279
280        var icon = document.createElement('span');
281        icon.className = 'achievement-toast-icon';
282        icon.textContent = getIcon(achievement.icon);
283        toast.appendChild(icon);
284
285        var body = document.createElement('div');
286        body.className = 'achievement-toast-body';
287
288        var title = document.createElement('div');
289        title.className = 'achievement-toast-title';
290        title.textContent = 'Achievement Unlocked!';
291        body.appendChild(title);
292
293        var name = document.createElement('div');
294        name.className = 'achievement-toast-name';
295        // For repeatable achievements (count > 1), append the ×N suffix
296        // so "Power Voter" turns into "Power Voter ×3" on the toast.
297        var displayName = achievement.name;
298        if (achievement.count && achievement.count > 1) {
299            displayName += ' ×' + achievement.count;
300        }
301        name.textContent = displayName;
302        body.appendChild(name);
303
304        var xp = document.createElement('div');
305        xp.className = 'achievement-toast-xp';
306        xp.textContent = '+' + achievement.xp_reward + ' XP';
307        body.appendChild(xp);
308
309        toast.appendChild(body);
310        container.appendChild(toast);
311
312        // Trigger animation
313        requestAnimationFrame(function() {
314            toast.classList.add('achievement-toast-show');
315        });
316
317        // Auto-dismiss after 5s
318        setTimeout(function() {
319            toast.classList.remove('achievement-toast-show');
320            toast.classList.add('achievement-toast-hide');
321            setTimeout(function() {
322                if (toast.parentNode) toast.parentNode.removeChild(toast);
323            }, 400);
324        }, 5000);
325
326        // Click to dismiss
327        toast.addEventListener('click', function() {
328            toast.classList.remove('achievement-toast-show');
329            toast.classList.add('achievement-toast-hide');
330            setTimeout(function() {
331                if (toast.parentNode) toast.parentNode.removeChild(toast);
332            }, 400);
333        });
334    }
335
336    function getIcon(iconName) {
337        var icons = {
338            'film': '\ud83c\udfac', 'star': '\u2b50', 'comment': '\ud83d\udcac',
339            'chat': '\ud83d\udde3', 'user': '\ud83d\udc64', 'trophy': '\ud83c\udfc6',
340            'medal': '\ud83c\udfc5', 'crown': '\ud83d\udc51', 'fire': '\ud83d\udd25',
341            'rocket': '\ud83d\ude80', 'horse': '\ud83c\udfc7', 'ballot': '\ud83d\uddf3',
342            'lightning': '\u26a1', 'shield': '\ud83d\udee1', 'diamond': '\ud83d\udc8e',
343            'heart': '\u2764', 'eye': '\ud83d\udc41', 'users': '\ud83d\udc65',
344            'gift': '\ud83c\udf81', 'moon': '\ud83c\udf19', 'clock': '\u23f0',
345            'sun': '\u2600', 'book': '\ud83d\udcda', 'globe': '\ud83c\udf0d',
346            'zap': '\u26a1', 'clover': '\ud83c\udf40', 'pencil': '\u270f',
347            'refresh': '\ud83d\udd04', 'theater': '\ud83c\udfad', 'boomerang': '\ud83e\ude83',
348            'megaphone': '\ud83d\udce3', 'clocky': '\u23f0', 'pillar': '\ud83c\udfdb'
349        };
350        return icons[iconName] || '\u2b50';
351    }
352})();
353</script>
vendor: 1 bytes, line 353
353
354<script type="application/ld+json">
355{
356  "@context": "https://schema.org",
357  "@type": "Organization",
358  "name": "11 Second Club",
359  "url": "https://www.11secondclub.com",
360  "logo": "https://www.11secondclub.com/images/logo.png",
361  "description": "Monthly character animation competition open to everyone",
362  "foundingDate": "2007",
363  "parentOrganization": {"@type": "Organization", "name": "Animation Mentor", "url": "https://www.animationmentor.com"}
364}
365</script>
vendor: 1 bytes, line 365
365
366<script type="application/ld+json">
367{
368  "@context": "https://schema.org",
369  "@type": "WebSite",
370  "name": "11 Second Club",
371  "url": "https://www.11secondclub.com"
372}
373</script>
vendor: 1 bytes, line 373
373
374<script>
375(function() {
376    var clicks = 0, playing = false, animTimer = null, resetTimer = null;
377    var link1 = document.querySelector('#winner_1').parentElement;
378    var frame1 = document.getElementById('winner_1');
379    if (!link1 || !frame1) return;
380    var winnerHref = link1.getAttribute('href');
381
382    link1.addEventListener('click', function(e) {
383        e.preventDefault();
384        if (playing) return;
385
386        clicks++;
387
388        clearTimeout(resetTimer);
389        resetTimer = setTimeout(function() {
390            if (!playing && clicks < 11) {
391                window.location.href = winnerHref;
392            }
393            clicks = 0;
394        }, 2000);
395
396        if (clicks >= 5) {
397            frame1.style.transition = 'filter 0.15s';
398            frame1.style.filter = 'brightness(' + (1 + clicks * 0.08) + ')';
399            setTimeout(function() { frame1.style.filter = ''; }, 150);
400        }
401
402        if (clicks < 11) return;
403
404        clearTimeout(resetTimer);
405        clicks = 0;
406        playing = true;
407
408        fetch('/api/notifications/easter-egg', {
409            method: 'POST',
410            headers: {'Content-Type': 'application/json'},
411            body: JSON.stringify({slug: 'flipbook'})
412        });
413
414        var frames = [];
415        for (var i = 1; i <= 6; i++) {
416            var f = document.getElementById('winner_' + i);
417            if (f) frames.push(f);
418        }
419        if (frames.length === 0) { playing = false; return; }
420
421        var allLinks = [];
422        frames.forEach(function(f) {
423            var a = f.parentElement;
424            if (a && a.tagName === 'A') {
425                a.addEventListener('click', blockClick);
426                allLinks.push(a);
427            }
428        });
429        function blockClick(ev) { ev.preventDefault(); }
430
431        var originals = frames.map(function(f) {
432            return { opacity: f.style.opacity, filter: f.style.filter, transition: f.style.transition, zIndex: f.style.zIndex };
433        });
434
435        frames.forEach(function(f) {
436            f.style.transition = 'opacity 0.08s, filter 0.08s';
437            f.style.opacity = '0.3';
438            f.style.filter = 'brightness(0.5)';
439        });
440
441        var current = 0, direction = 1, cycles = 0;
442        var totalCycles = 11;
443
444        animTimer = setInterval(function() {
445            frames.forEach(function(f) {
446                f.style.opacity = '0.3';
447                f.style.filter = 'brightness(0.5)';
448                f.style.zIndex = '';
449            });
450
451            frames[current].style.opacity = '1';
452            frames[current].style.filter = 'brightness(1.3) drop-shadow(0 0 8px #E9B753)';
453            frames[current].style.zIndex = '100';
454
455            current += direction;
456            if (current >= frames.length) {
457                current = frames.length - 2;
458                direction = -1;
459                cycles++;
460            } else if (current < 0) {
461                current = 1;
462                direction = 1;
463                cycles++;
464            }
465
466            if (cycles >= totalCycles) {
467                clearInterval(animTimer);
468                frames.forEach(function(f, i) {
469                    f.style.transition = 'opacity 0.4s, filter 0.4s';
470                    f.style.opacity = originals[i].opacity || '';
471                    f.style.filter = originals[i].filter || '';
472                    f.style.zIndex = originals[i].zIndex || '';
473                });
474                setTimeout(function() {
475                    frames.forEach(function(f) { f.style.transition = ''; });
476                    allLinks.forEach(function(a) { a.removeEventListener('click', blockClick); });
477                    playing = false;
478                }, 500);
479            }
480        }, 100);
481    });
482})();
483</script>
vendor: 1 bytes, line 483
483
484<script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a43b352d388e10b0',t:'MTc5MDg1NDk4NQ=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
484<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"078236eb4e964ed0af8a18fe17385e8d","r":1,"spa":2}' crossorigin="anonymous"></script>
484
485</body>
486</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.