<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Outfit:wght@400;700&display=swap" rel="stylesheet"><style>:root{--bg:#f4f1e9;--card:#ffffff;--ink:#000000;--sub:#5c5c5c;--gold:#BEAF86;--line:#ddd6c4;}*{box-sizing:border-box}.azawrap{font-family:'Montserrat','Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--ink);}.wrap{max-width:1100px;margin:0auto;padding:28px20px60px;}h1{font-size:26px;font-weight:800;margin:004px;}.tag{color:var(--sub);margin:0024px;font-size:14px;}.panel{background:var(--card);border:1pxsolidvar(--line);border-radius:14px;padding:22px;box-shadow:02px10pxrgba(0,48,73,.08);}.controls{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;}label{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);margin-bottom:6px;}input[type=text]{font-size:17px;font-family:inherit;padding:10px14px;border:1pxsolidvar(--line);border-radius:9px;width:220px;outline:none;}input[type=text]:focus{border-color:var(--ink);}.toggle{display:flex;border:1pxsolidvar(--line);border-radius:9px;overflow:hidden;}.togglebutton{font-size:14px;font-family:inherit;padding:10px18px;border:0;background:#fff;cursor:pointer;color:var(--sub);}.togglebutton.on{background:var(--ink);color:#fff;font-weight:700;}.hint{font-size:11px;color:var(--sub);margin-top:4px;}.go{font-size:15px;font-weight:700;font-family:inherit;padding:11px26px;border:0;border-radius:9px;background:var(--ink);color:#fff;cursor:pointer;}.go:hover{opacity:.92;}.dl{font-size:14px;font-weight:700;font-family:inherit;padding:10px22px;border:1.5pxsolidvar(--ink);border-radius:9px;background:#fff;color:var(--ink);cursor:pointer;display:none;}.msg{margin-top:16px;font-size:15px;display:none;padding:14px16px;border-radius:9px;}.msg.err{display:block;background:#fbeaea;border:1pxsolid#e8b4b4;color:#8a2020;}.stage{margin-top:26px;display:none;text-align:center;}canvas{max-width:100%;height:auto;max-height:82vh;border-radius:12px;box-shadow:08px30pxrgba(0,48,73,.22);}.foot{margin-top:22px;font-size:13px;color:var(--sub);line-height:1.5;max-width:760px;}</style>
<div class="wrap azawrap">
<h1>Arizona Award Generator</h1>
<p class="tag">Enter an Agent ID, pick a period and format, and download a personalized crystal-award photo.</p>
<div class="panel">
<div class="controls">
<div>
<label for="aid">Agent ID</label>
<input type="text" id="aid" placeholder="e.g. AB123" autocomplete="off" spellcheck="false">
</div>
<div>
<label>Period</label>
<div class="toggle">
<button id="btnQ2" class="on" type="button">Quarterly (Q2 2026)</button>
<button id="btnYTD" type="button">2026 YTD</button>
<button id="btnLTM" type="button">Last 12 Months</button>
</div>
</div>
<div>
<label>Ranked By</label>
<div class="toggle">
<button id="btnUnits" class="on" type="button">Units</button>
<button id="btnVol" type="button">Dollar Volume</button>
</div>
<div class="hint">auto-selects your better rank</div>
</div>
<div>
<label>Format</label>
<div class="toggle">
<button id="btnPost" class="on" type="button">Post (1:1)</button>
<button id="btnStory" type="button">Story (9:16)</button>
</div>
</div>
<button class="go" id="btnGo" type="button">Generate Graphic</button>
<button class="dl" id="btnDl" type="button">Download PNG</button>
</div>
<div class="msg" id="msg"></div>
</div>
<div class="stage" id="stage">
<canvas id="cv" width="1080" height="1080"></canvas>
</div>
<div class="panel" id="fixPanel" style="display:none;margin-top:26px;">
<div style="font-size:16px;font-weight:700;margin-bottom:4px;">Doesn't look right? Enter your actual numbers / brokerage here.</div>
<p class="tag" style="margin-bottom:16px;">Your graphic is rebuilt instantly with your corrected figures — rank and percentile are re-computed automatically against all <span id="fixN"></span> ranked agents.</p>
<div class="controls">
<div id="fNameWrap">
<label for="fName">Name(s) on Award</label>
<input type="text" id="fName" placeholder="e.g. KENNY & KAREN KLAUS" autocomplete="off" style="width:260px;">
</div>
<div>
<label for="fUnits" id="fuLabel">Units</label>
<input type="text" id="fUnits" placeholder="e.g. 46.5" autocomplete="off" style="width:150px;">
</div>
<div>
<label for="fVol" id="fvLabel">Dollar Volume</label>
<input type="text" id="fVol" placeholder="e.g. $19,585,929 or 19.6M" autocomplete="off" style="width:210px;">
</div>
<div>
<label for="fOff">Current Brokerage</label>
<input type="text" id="fOff" placeholder="e.g. Real Broker" autocomplete="off" style="width:240px;">
</div>
<button class="go" id="btnFix" type="button">Apply & Regenerate</button>
<button class="dl" id="btnFixReset" type="button" style="display:inline-block;">Reset</button>
</div>
<div class="msg" id="fixMsg"></div>
</div>
<p class="foot"><strong>Note on ranks:</strong> Institutional, iBuyer, new-build, and non-agent records (Opendoor, builder sales offices, etc.) are removed before ranking, then all remaining Arizona agents are renumbered 1..N. The "Ranked By" switch starts on whichever of your two ranks (units or dollar volume) is better — flip it to show the other.</p>
<p class="foot"><strong>Disclaimer:</strong> If you believe your numbers are incomplete, use the correction fields above — your graphic will be rebuilt with your actual production figures.</p>
</div>
<script>
function AZBOOT(t){const e=t.N,n=t=>document.getElementById(t),l=t=>t.toLocaleString("en-US"),o={q2:{btn:"btnQ2",label:"Q2 2026",plabel:"Q2 2026 PRODUCTION",file:"Q2-2026",u:9,v:10,ur:3,vr:4,pct:5,su:"qu",sv:"qv"},ytd:{btn:"btnYTD",label:"2026 YTD",plabel:"2026 YTD PRODUCTION",file:"YTD-2026",u:16,v:17,ur:13,vr:14,pct:15,su:"yu",sv:"yv"},ltm:{btn:"btnLTM",label:"Last 12 Months",plabel:"LAST 12 MONTHS",file:"LTM",u:11,v:12,ur:6,vr:7,pct:8,su:"lu",sv:"lv"}};t.hasYTD||(n("btnYTD").style.display="none"),n("fNameWrap").style.display="none";let s="q2",a="post",i="units",r=!1,c=null;const u=new Map;for(const e of t.rows)u.set(String(e[0]).trim().toUpperCase(),e);const d={post:{img:new Image,ready:!1,cw:1080,ch:1080,sx:0,sy:0,sw:1080,sh:1080,dx:0,dy:0,dw:1080,dh:1080},story:{img:new Image,ready:!1,cw:1080,ch:1920,sx:0,sy:0,sw:1080,sh:1080,dx:0,dy:420,dw:1080,dh:1080}};function f(){return void 0!==document.fonts&&document.fonts.load?Promise.all(["400 24px","700 44px"].map(t=>document.fonts.load(t+" Outfit"))).catch(()=>{}):Promise.resolve()}d.post.img.onload=()=>{d.post.ready=!0,c&&"post"===a&&N(c)},d.story.img.onload=()=>{d.story.ready=!0,c&&"story"===a&&N(c)},d.post.img.crossOrigin="anonymous",d.post.img.src="/s/plate_post.jpg",d.story.img.crossOrigin="anonymous",d.story.img.src="/s/plate_story.jpg",f();const m={q2:{units:null,vol:null},ytd:{units:null,vol:null},ltm:{units:null,vol:null},office:null,name:null},p={qu:[],qv:[],lu:[],lv:[],yu:[],yv:[]};for(const e of t.rows)p.qu.push(e[9]),p.qv.push(e[10]),p.lu.push(e[11]),p.lv.push(e[12]),t.hasYTD&&(p.yu.push(e[16]),p.yv.push(e[17]));for(const t in p)p[t].sort((t,e)=>t-e);function y(t,e){let n=0,l=t.length;for(;n<l;){const o=n+l>>1;t[o]<=e?n=o+1:l=o}return t.length-n+1}function g(t){const e=parseFloat(String(t).replace(/,/g,"").trim());return isFinite(e)&&e>=0?e:null}function v(t){const e=String(t).replace(/[$,\s]/g,"").match(/^([\d.]+)([kKmM])?$/);if(!e)return null;let n=parseFloat(e[1]);return!isFinite(n)||n<0?null:(e[2]&&(n*="k"===e[2].toLowerCase()?1e3:1e6),n)}function b(){const t=o[s].label;n("fuLabel").textContent=t+" Units",n("fvLabel").textContent=t+" Dollar Volume";const e=m[s];n("fUnits").value=null===e.units?"":e.units,n("fVol").value=null===e.vol?"":e.vol,n("fOff").value=null===m.office?"":m.office,n("fName").value=null===m.name?"":m.name,n("fixMsg").style.display="none"}function h(t,e){i=t,void 0!==e&&(r=e),n("btnUnits").classList.toggle("on","units"===i),n("btnVol").classList.toggle("on","vol"===i)}function x(t){s=t;for(const e in o)n(o[e].btn).classList.toggle("on",e===t);r=!1,b(),c&&N(c)}function w(){const t=n("aid").value.trim().toUpperCase(),e=n("msg");if(!t)return e.className="msg err",e.textContent="Please enter an Agent ID.",void(e.style.display="block");const l=u.get(t);if(!l)return c=null,n("stage").style.display="none",n("btnDl").style.display="none",n("fixPanel").style.display="none",e.className="msg err",e.textContent="Agent ID not found. If you believe your numbers are incomplete, contact us and we will create an updated graphic using your actual production figures.",void(e.style.display="block");e.style.display="none",c=l,r=!1,b(),f().then(()=>N(l)),N(l)}n("btnFix").onclick=()=>{const t=n("fixMsg"),e=n("fUnits").value.trim(),l=n("fVol").value.trim(),o=n("fOff").value.trim();return e||l||o?e&&null===g(e)?(t.className="msg err",t.textContent="Units must be a number (half credits like 46.5 are fine).",void(t.style.display="block")):l&&null===v(l)?(t.className="msg err",t.textContent="Volume must be a dollar amount - e.g. 19585929, $19,585,929, or 19.6M.",void(t.style.display="block")):(t.style.display="none",m[s].units=e||null,m[s].vol=l||null,m.office=o||null,r=!1,void(c&&N(c))):(t.className="msg err",t.textContent="Enter at least one correction (units, volume, or brokerage).",void(t.style.display="block"))},n("btnFixReset").onclick=()=>{m[s]={units:null,vol:null},m.office=null,m.name=null,b(),r=!1,c&&N(c)},n("btnQ2").onclick=()=>x("q2"),n("btnYTD").onclick=()=>x("ytd"),n("btnLTM").onclick=()=>x("ltm"),n("btnUnits").onclick=()=>{h("units",!0),c&&N(c)},n("btnVol").onclick=()=>{h("vol",!0),c&&N(c)},n("btnPost").onclick=()=>{a="post",n("btnPost").classList.add("on"),n("btnStory").classList.remove("on"),c&&N(c)},n("btnStory").onclick=()=>{a="story",n("btnStory").classList.add("on"),n("btnPost").classList.remove("on"),c&&N(c)},n("btnGo").onclick=w,n("aid").addEventListener("keydown",t=>{"Enter"===t.key&&w()}),n("btnDl").onclick=()=>{const t=document.createElement("a"),e=(c?c[1]:"agent").replace(/[^A-Za-z0-9]+/g,"_"),l=m[s],r=null!==l.units||null!==l.vol||null!==m.office?"_CORRECTED":"",u="post"===a?"Post":"Story",d="vol"===i?"Volume":"Units";t.download="AZ_Award_"+e+"_"+o[s].file+"_"+d+"_"+u+r+".png",t.href=n("cv").toDataURL("image/png"),t.click()};const _=408,k=1080,T=1080,O={name:{y:287,size:53,bold:!0,ls:2,max:380},office:{y:345,size:29,bold:!1,ls:2,max:380},period:{y:427,size:27,bold:!1,ls:2,max:380},prod:{y:512,size:27,bold:!1,ls:2,max:385},rank:{y:572,size:27,bold:!1,ls:2,max:380},pct:{y:627,size:25,bold:!1,ls:2,max:385}},I=document.createElement("canvas");I.width=k,I.height=T;const L=I.getContext("2d");function S(t,e,n){let l=0;for(const o of e)l+=t.measureText(o).width+n;return l-n}function C(t,e,n){if(!e)return;let l=n.size;do{if(t.font=(n.bold?"700 ":"400 ")+l+"px 'Outfit'",S(t,e,n.ls)<=n.max)break;l-=1}while(l>12);!function(t,e,n,l,o){let s=n-S(t,e,o)/2;for(const n of e)t.fillText(n,s,l),s+=t.measureText(n).width+o}(t,e,_,n.y,n.ls)}function N(t){const c=d[a],u=n("cv"),f=u.getContext("2d");if(!c.ready)return void setTimeout(()=>N(t),120);u.width===c.cw&&u.height===c.ch||(u.width=c.cw,u.height=c.ch);const b=t[1],x=o[s],w=m[s],_=null!==m.office?m.office:t[2];let S=t[x.u],U=t[x.v],D=t[x.ur],M=t[x.vr];null!==w.units&&(S=g(w.units),D=y(p[x.su],S)),null!==w.vol&&(U=v(w.vol),M=y(p[x.sv],U));const A=null!==w.vol?Math.round(M/e*100*100)/100:t[x.pct];r||h(M<=D?"vol":"units");const R="vol"===i?"#"+l(M)+" IN VOLUME":"#"+l(D)+" IN UNITS",E=x.plabel;var F,P;L.clearRect(0,0,k,T),L.fillStyle="#f7f9fc",L.textBaseline="middle",C(L,b.toUpperCase(),O.name),C(L,_.toUpperCase(),O.office),C(L,E,O.period),C(L,(F=S,(Number.isInteger(F)?l(F):F.toFixed(1))+" UNITS · "+function(t){if(t>=1e6){const e=t/1e6;return"$"+(e>=100?Math.round(e):e.toFixed(1).replace(/\.0$/,""))+"M"}return"$"+Math.round(t/1e3)+"K"}(U)+" VOLUME"),O.prod),C(L,R,O.rank),C(L,"TOP "+(P=A,Math.max(.01,P).toFixed(2).replace(/0$/,"")+"% OF ")+l(e)+" ARIZONA AGENTS",O.pct);const q=c.dw/c.sw;f.clearRect(0,0,c.cw,c.ch),f.drawImage(c.img,0,0),f.save(),f.beginPath(),f.rect(c.dx,c.dy,c.dw,c.dh),f.clip(),f.globalAlpha=.45,f.filter="blur("+(3*q).toFixed(2)+"px) brightness(0)",f.drawImage(I,c.sx,c.sy,c.sw,c.sh,c.dx,c.dy+2*q,c.dw,c.dh),f.globalAlpha=.22,f.filter="blur("+(2.5*q).toFixed(2)+"px)",f.drawImage(I,c.sx,c.sy,c.sw,c.sh,c.dx,c.dy,c.dw,c.dh),f.globalAlpha=.9,f.filter="blur("+(.4*q).toFixed(2)+"px)",f.drawImage(I,c.sx,c.sy,c.sw,c.sh,c.dx,c.dy,c.dw,c.dh),f.restore(),n("stage").style.display="block",n("btnDl").style.display="inline-block",n("fixN").textContent=l(e)}}!function(){var t=new Image;t.crossOrigin="anonymous",t.onload=async function(){var e=document.createElement("canvas");e.width=t.width,e.height=t.height;var n=e.getContext("2d");n.drawImage(t,0,0);var l,o=n.getImageData(0,0,e.width,e.height).data,s=new Uint8Array(e.width*e.height*3),a=0;for(l=0;l<o.length;l+=4)s[a++]=o[l],s[a++]=o[l+1],s[a++]=o[l+2];var i=16777216*s[0]+65536*s[1]+256*s[2]+s[3],r=await new Response(new Blob([s.slice(4,4+i)]).stream().pipeThrough(new DecompressionStream("gzip"))).text();AZBOOT(JSON.parse(r))},t.onerror=function(){var t=document.getElementById("msg");t.className="msg err",t.textContent="Data failed to load - please refresh.",t.style.display="block"},t.src="/s/award_data.png"}();
</script>
