42 lines
3.7 KiB
JavaScript
42 lines
3.7 KiB
JavaScript
|
|
/* WEVAL Sovereign UX Library v1.0
|
|
* 25 premium effects ready to wire into any canvas/HTML page
|
|
* Source: meeting-rooms + enterprise-model (battle-tested)
|
|
* Inspired by: Apple, Figma, Linear, Vercel
|
|
* Cost: 0 EUR - fully sovereign
|
|
*/
|
|
const WEVAL_UX = {
|
|
version: '1.0',
|
|
effects: 25,
|
|
|
|
// Canvas effects
|
|
canvas: {
|
|
breathing: (ctx,tk,px) => { var s=1+Math.sin(tk*0.04+px*0.01)*0.02; ctx.scale(s,s); },
|
|
hoverGlow: (ctx,cl) => { ctx.shadowColor=cl; ctx.shadowBlur=22; ctx.shadowOffsetY=2; },
|
|
hoverRing: (ctx,cl,tk) => { ctx.strokeStyle=cl+'50'; ctx.lineWidth=0.5; var r=16+Math.sin(tk*0.1)*3; ctx.beginPath(); ctx.arc(0,0,r,0,6.28); ctx.stroke(); },
|
|
greenDot: (ctx,x,y) => { ctx.fillStyle='#22c55e'; ctx.beginPath(); ctx.arc(x,y,3,0,6.28); ctx.fill(); ctx.strokeStyle='#fff'; ctx.lineWidth=1; ctx.beginPath(); ctx.arc(x,y,3,0,6.28); ctx.stroke(); },
|
|
namePill: (ctx,name,y) => { var w=ctx.measureText(name).width; ctx.fillStyle='#ffffff90'; ctx.beginPath(); ctx.roundRect(-w/2-3,y-5,w+6,10,[3]); ctx.fill(); },
|
|
agentShadow: (ctx) => { ctx.save(); ctx.globalAlpha=0.08; ctx.fillStyle='#000'; ctx.beginPath(); ctx.ellipse(0,14,8,2.5,0,0,6.28); ctx.fill(); ctx.restore(); },
|
|
depthShadow: (ctx) => { ctx.shadowColor='#00000012'; ctx.shadowBlur=20; ctx.shadowOffsetY=8; },
|
|
cornerGlow: (ctx,x,y,w,cl) => { ctx.save(); ctx.globalAlpha=0.06; var g=ctx.createRadialGradient(x,y,0,x,y,80); g.addColorStop(0,cl); g.addColorStop(1,'#ffffff00'); ctx.fillStyle=g; ctx.fillRect(x,y,80,80); ctx.restore(); },
|
|
gridDots: (ctx,x,y,w,h,cl) => { ctx.save(); ctx.globalAlpha=0.04; ctx.fillStyle=cl; for(var gx=x+10;gx<x+w;gx+=16)for(var gy=y+50;gy<y+h-30;gy+=16){ctx.beginPath();ctx.arc(gx,gy,0.6,0,6.28);ctx.fill();} ctx.restore(); },
|
|
tableReflect: (ctx,cx,cy,tw,th) => { ctx.globalAlpha=0.06; ctx.fillStyle='#8a7560'; ctx.beginPath(); ctx.ellipse(cx,cy+10,tw*0.85,th*0.35,0,0,6.28); ctx.fill(); ctx.globalAlpha=1; },
|
|
bezierPulse: (ctx,sx,sy,dx,dy,cl,tk) => { var t=(tk*0.008)%1; var bx=Math.pow(1-t,3)*sx+3*Math.pow(1-t,2)*t*sx+3*(1-t)*t*t*dx+Math.pow(t,3)*dx; var by=Math.pow(1-t,3)*sy+3*Math.pow(1-t,2)*t*(sy+30)+3*(1-t)*t*t*(dy-30)+Math.pow(t,3)*dy; ctx.fillStyle=cl; ctx.beginPath(); ctx.arc(bx,by,2.5,0,6.28); ctx.fill(); },
|
|
ambient: (ctx,x,y,w,h,cl,tk) => { ctx.save(); ctx.globalAlpha=0.15; for(var i=0;i<6;i++){var px=x+20+Math.sin(tk*0.02+i*1.1)*(w*0.4)+w*0.3;var py=y+30+Math.cos(tk*0.015+i*0.8)*(h*0.2)+h*0.3;ctx.fillStyle=cl;ctx.beginPath();ctx.arc(px,py,1.5+Math.sin(tk*0.05+i)*0.5,0,6.28);ctx.fill();} ctx.restore(); },
|
|
liveBar: (ctx,x,y,h,cl,tk) => { var w=3+Math.sin(tk*0.06)*1.5; ctx.fillStyle=cl; ctx.beginPath(); ctx.roundRect(x,y+8,w,h-16,3); ctx.fill(); },
|
|
},
|
|
|
|
// CSS effects
|
|
css: {
|
|
glassmorphism: 'background:rgba(255,255,255,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)',
|
|
darkGlass: 'background:rgba(30,41,59,0.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)',
|
|
},
|
|
|
|
// HTML components
|
|
html: {
|
|
minimap: (rooms,W,H,isDark) => `<canvas id="minimap" width="160" height="90" style="position:fixed;bottom:30px;left:8px;border-radius:6px;border:0.5px solid ${isDark?'#475569':'#cbd5e1'};background:${isDark?'#1e293bdd':'#ffffffdd'}"></canvas>`,
|
|
searchInput: '<input placeholder="Rechercher..." style="font:11px system-ui;padding:2px 6px;border:1px solid #c8d8e8;border-radius:4px;width:100px;background:#fff8">',
|
|
exportBtn: '<button onclick="var a=document.createElement(\x27a\x27);a.href=document.querySelector(\x27canvas\x27).toDataURL();a.download=\x27export.png\x27;a.click()" style="padding:4px 8px;border-radius:6px;border:1px solid #6366f1;font-size:11px;background:#6366f1;color:#fff;cursor:pointer">Export</button>',
|
|
}
|
|
};
|