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 â 'Dolio - The Lottery Man' 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> | <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://d15spcjuouqbbb.cloudfront.net/files/october26.mp3?Expires=1790858585&Signature=fakwO0alqNtLGDaXvjCDqq3LgFrTm-X4rvP7jllUC84aJ2ZFcXg8kxWNakIHEdRbRgm9KVc2H4o8VwvqwvcYbMLYp4KPA3yIN6nxvdYnCp81Qhr5NtxjSWYH1KBuoOhxKslsEZN~Ht83tY6EEoAiFaz4Vz2ZLMFLHZ2MMYrqzrhjO~uDUG1Gop6PC8mBTDlqCFj69CcZpLagRBcsxEdoOK9VE74459ehENAnBmyE74ZOmPYLlzhVvzGwwUYmfyMdB6mPKvSc53UeUicb6-Lz0vN39nS4oN0muO7WYVpYMCnZDvxAyvsGFMY6ZQi1D8qd~aE~VxP0cVpmMnhKqag0jA__&Key-Pair-Id=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>© 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;">×</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.