Upload index.html

index.html

@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1"/>
 <title>Lava Lamp</title>
 <style>
   html,body{margin:0;height:100%;background:#05030a;display:flex;align-items:center;justify-content:center;overflow:hidden}
@@ -9,7 +10,7 @@
 </style>
 </head>
 <body>
-<canvas id="c"></canvas>
+<canvas id="c" tabindex="0" aria-label="Animated lava lamp. Press space to toggle colour mode; use left and right arrow keys to adjust the wax amount."></canvas>
 <script>
 "use strict";
 // polyfill for older browsers (ctx.roundRect) so the lamp never crashes
@@ -97,10 +98,17 @@ canvas.addEventListener('pointermove',e=>{const p=canvasXY(e);ledHover=overLED(p
 const endSlDrag=e=>{if(slDrag){slDrag=false;try{canvas.releasePointerCapture(e.pointerId);}catch(_){}}};
 canvas.addEventListener('pointerup',endSlDrag);
 canvas.addEventListener('pointercancel',endSlDrag);
+// keyboard: space/enter toggles the light, arrows adjust wax (same maths as dragging)
+canvas.addEventListener('keydown',e=>{
+  if(e.code==='Space'||e.code==='Enter'){RGB_MODE=!RGB_MODE;e.preventDefault();}
+  else if(e.code==='ArrowRight'||e.code==='ArrowUp'){setWaxFromX(SL.x-SL.w/2+Math.min(1,slF+0.06)*SL.w);e.preventDefault();}
+  else if(e.code==='ArrowLeft'||e.code==='ArrowDown'){setWaxFromX(SL.x-SL.w/2+Math.max(0,slF-0.06)*SL.w);e.preventDefault();}
+});
 
 // ---- clickable LED: toggles a slow RGB colour cycle on the whole lamp ----
 let RGB_MODE=false,rgbMix=0,hue=140;        // mix eases 0(default) <-> 1(full RGB)
-const HUE_SPEED=360/16;                     // one full colour cycle every ~16 s
+const RM=matchMedia('(prefers-reduced-motion: reduce)').matches;   // respect OS motion setting
+const HUE_SPEED=(360/16)*(RM?0.5:1);        // one full colour cycle every ~16 s (slower for reduced motion)
 const DEF_L={r:255,g:90,b:45};              // the lamp's original warm colour
 const LED_POS={x:CX,y:H-52};
 let ledHover=false;
@@ -119,7 +127,7 @@ let LIGHT={...DEF_L},LUM_L=1;               // effective lamp colour, updated ea
 
 // ---- physics (px units) ----
 let time=0,last=performance.now();
-const SIM_SPEED=0.55;                  // slow, heavy wax (scales all motion + transitions)
+const SIM_SPEED=0.55*(RM?0.5:1);       // slow, heavy wax (scales all motion + transitions)
 const easeIO=t=>t<0.5?4*t*t*t:1-Math.pow(-2*t+2,3)/2;
 const lerp=(a,b,t)=>a+(b-a)*t;
 const ABS_DUR=1.6,BUD_DUR=2.6;                            // merge/split transition durations (s)
@@ -429,11 +437,11 @@ function drawGlass(){
   refl.addColorStop(1,'rgba(255,255,255,0)');
   ctx.fillStyle=refl;
   ctx.beginPath();
-  // curved highlight on the left side
-  ctx.moveTo(CX-MAX_HW*0.75,LIQ_TOP+20);
-  ctx.quadraticCurveTo(CX-MAX_HW*0.55,(LIQ_TOP+LIQ_BOT)/2,CX-MAX_HW*0.68,LIQ_BOT-30);
-  ctx.lineTo(CX-MAX_HW*0.45,LIQ_BOT-20);
-  ctx.quadraticCurveTo(CX-MAX_HW*0.35,(LIQ_TOP+LIQ_BOT)/2,CX-MAX_HW*0.52,LIQ_TOP+30);
+  // curved highlight on the left side (flipped: now faces left "(" with a touch more curve)
+  ctx.moveTo(CX-MAX_HW*0.35,LIQ_TOP+20);
+  ctx.quadraticCurveTo(CX-MAX_HW*0.60,(LIQ_TOP+LIQ_BOT)/2,CX-MAX_HW*0.42,LIQ_BOT-30);
+  ctx.lineTo(CX-MAX_HW*0.65,LIQ_BOT-20);
+  ctx.quadraticCurveTo(CX-MAX_HW*0.80,(LIQ_TOP+LIQ_BOT)/2,CX-MAX_HW*0.58,LIQ_TOP+30);
   ctx.closePath();
   ctx.fill();
   // subtle right-side reflection