{"id":4017,"date":"2026-05-24T13:10:29","date_gmt":"2026-05-24T10:10:29","guid":{"rendered":"https:\/\/marinaplatforms.com\/?page_id=4017"},"modified":"2026-05-24T13:10:29","modified_gmt":"2026-05-24T10:10:29","slug":"app-test","status":"publish","type":"page","link":"https:\/\/marinaplatforms.com\/ar\/app-test\/","title":{"rendered":"app test"},"content":{"rendered":"<p>&nbsp;<\/p>\n<style>\n*{box-sizing:border-box;margin:0;padding:0}<br \/>\nhtml,body{height:100%;overflow:hidden;font-family:'Cairo',sans-serif;background:#080608;color:#c8b890}<br \/>\n.app{display:flex;height:100vh}<br \/>\n.sidebar{width:268px;min-width:268px;background:#0c0a08;border-left:1px solid #1c1610;display:flex;flex-direction:column;overflow:hidden}<br \/>\n.sb-top{padding:14px 16px 10px;border-bottom:1px solid #181210;flex-shrink:0}<br \/>\n.sb-top h1{font-size:14px;font-weight:600;color:#d4aa60;letter-spacing:.04em}<br \/>\n.sb-top p{font-size:10px;color:#50402a;margin-top:2px;letter-spacing:.08em}<br \/>\n.sb-body{flex:1;overflow-y:auto;padding-bottom:8px}<br \/>\n.sb-body::-webkit-scrollbar{width:3px}<br \/>\n.sb-body::-webkit-scrollbar-thumb{background:#2a1e10;border-radius:2px}<br \/>\n.grp{border-bottom:1px solid #14100a}<br \/>\n.grp-lbl{font-size:9px;font-weight:600;color:#604830;letter-spacing:.12em;text-transform:uppercase;padding:10px 14px 6px;display:flex;align-items:center;gap:6px}<br \/>\n.grp-lbl span{opacity:.5}<br \/>\n.choices{display:flex;flex-direction:column;gap:2px;padding:0 8px 8px}<br \/>\n.choice{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:7px;border:1px solid transparent;cursor:pointer;background:transparent;transition:all .12s;width:100%;text-align:right}<br \/>\n.choice:hover{background:#12100c;border-color:#201810}<br \/>\n.choice.on{background:#16120c;border-color:#b8880a}<br \/>\n.swatch{width:36px;height:36px;border-radius:5px;flex-shrink:0;border:1px solid #201808;overflow:hidden}<br \/>\n.cn{font-size:12px;color:#b89860;font-weight:500;line-height:1.3}<br \/>\n.cs{font-size:10px;color:#483820;margin-top:1px}<br \/>\n.choice.on .cn{color:#d8b870}<br \/>\n.tick{width:5px;height:5px;border-radius:50%;background:#c8900a;flex-shrink:0;margin-left:auto;opacity:0;transition:.12s}<br \/>\n.choice.on .tick{opacity:1}<br \/>\n.main{flex:1;display:flex;flex-direction:column;background:#050404;min-width:0}<br \/>\n.canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}<br \/>\n.canvas-wrap::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 30%, #12100c 0%, #050404 100%)}<br \/>\n#cv{position:relative;z-index:1;display:block}<br \/>\n.botbar{background:#0c0a08;border-top:1px solid #14100a;padding:9px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0}<br \/>\n.tags{display:flex;gap:5px;flex-wrap:wrap}<br \/>\n.tag{font-size:10px;padding:3px 8px;border-radius:20px;background:#121008;border:1px solid #1e1608;color:#60482a}<br \/>\n.tag b{color:#b8a060;font-weight:500}<br \/>\n.bts{display:flex;gap:6px}<br \/>\n.b1{font-size:11px;padding:5px 12px;border-radius:6px;border:1px solid #201a10;background:transparent;color:#706048;cursor:pointer;font-family:'Cairo',sans-serif;transition:.12s}<br \/>\n.b1:hover{background:#141008;color:#a08040}<br \/>\n.b2{font-size:11px;font-weight:600;padding:5px 14px;border-radius:6px;border:none;background:linear-gradient(135deg,#905008,#c87010);color:#fff0d0;cursor:pointer;font-family:'Cairo',sans-serif;letter-spacing:.03em}<br \/>\n.b2:hover{filter:brightness(1.1)}<br \/>\n<\/style>\n<p>&nbsp;<\/p>\n<div class=\"app\">\n<div class=\"main\">\n<div class=\"canvas-wrap\"><\/div>\n<div class=\"botbar\">\n<div class=\"tags\">\n<div class=\"tag\">\u0627\u0644\u062c\u062f\u0631\u0627\u0646: <b id=\"tw\">\u0623\u0644\u0648\u0627\u062d \u062e\u0634\u0628 \u0628\u0644\u0648\u0637<\/b><\/div>\n<div class=\"tag\">\u0625\u0636\u0627\u0621\u0629: <b id=\"tl\">\u0630\u0647\u0628\u064a \u062f\u0627\u0641\u0626 2700K<\/b><\/div>\n<div class=\"tag\">\u0623\u0631\u0636\u064a\u0629: <b id=\"tf\">\u0631\u062e\u0627\u0645 \u0643\u0631\u064a\u0645\u064a<\/b><\/div>\n<div class=\"tag\">\u0633\u0642\u0641: <b id=\"tc\">\u0630\u0647\u0628\u064a \u0645\u0637\u0641\u064a<\/b><\/div>\n<\/div>\n<div class=\"bts\"><button class=\"b1\">\u2193 \u062d\u0641\u0638 \u0627\u0644\u0635\u0648\u0631\u0629<\/button><br \/>\n<button class=\"b2\">\u0637\u0644\u0628 \u0639\u0631\u0636 \u0633\u0639\u0631 \u203a<\/button><\/div>\n<\/div>\n<\/div>\n<div class=\"sidebar\">\n<div class=\"sb-top\">\n<h1>\u2726 \u0643\u0628\u064a\u0646\u0629 \u0627\u0644\u0645\u0635\u0639\u062f \u0627\u0644\u0641\u0627\u062e\u0631\u0629<\/h1>\n<p>LUXURY ELEVATOR CONFIGURATOR<\/p>\n<\/div>\n<div class=\"sb-body\">\n<div class=\"grp\">\n<div class=\"grp-lbl\">\u2756 \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u062c\u062f\u0631\u0627\u0646<\/div>\n<div class=\"choices\"><button class=\"choice on\" data-g=\"wall\" data-v=\"oak_slat\"><\/button><button class=\"choice on\" data-g=\"wall\" data-v=\"oak_slat\"><br \/>\n<canvas id=\"p0\" class=\"swatch\" width=\"36\" height=\"36\"><\/canvas><\/button><\/p>\n<div>\n<div class=\"cn\">\u0623\u0644\u0648\u0627\u062d \u062e\u0634\u0628 \u0628\u0644\u0648\u0637<\/div>\n<div class=\"cs\">Oak Staggered Slats<\/div>\n<\/div>\n<div class=\"tick\"><\/div>\n<p>&nbsp;<\/p>\n<p><button class=\"choice\" data-g=\"wall\" data-v=\"walnut_slat\"><\/button><button class=\"choice\" data-g=\"wall\" data-v=\"walnut_slat\"><br \/>\n<canvas id=\"p1\" class=\"swatch\" width=\"36\" height=\"36\"><\/canvas><\/button><\/p>\n<div>\n<div class=\"cn\">\u0623\u0644\u0648\u0627\u062d \u0648\u0627\u0644\u0646\u0627\u062a \u062f\u0627\u0643\u0646<\/div>\n<div class=\"cs\">Dark Walnut Slats<\/div>\n<\/div>\n<div class=\"tick\"><\/div>\n<p>&nbsp;<\/p>\n<p><button class=\"choice\" data-g=\"wall\" data-v=\"gold_ss\"><\/button><button class=\"choice\" data-g=\"wall\" data-v=\"gold_ss\"><br \/>\n<canvas id=\"p2\" class=\"swatch\" width=\"36\" height=\"36\"><\/canvas><\/button><\/p>\n<div>\n<div class=\"cn\">\u0633\u062a\u0627\u0646\u0644\u0633 \u0630\u0647\u0628\u064a<\/div>\n<div class=\"cs\">Brushed Gold PVD<\/div>\n<\/div>\n<div class=\"tick\"><\/div>\n<p>&nbsp;<\/p>\n<p><button class=\"choice\" data-g=\"wall\" data-v=\"mirror_ss\"><\/button><button class=\"choice\" data-g=\"wall\" data-v=\"mirror_ss\"><br \/>\n<canvas id=\"p3\" class=\"swatch\" width=\"36\" height=\"36\"><\/canvas><\/button><\/p>\n<div>\n<div class=\"cn\">\u0645\u0631\u0627\u064a\u0627 \u0628\u0648\u0644\u064a\u0634<\/div>\n<div class=\"cs\">Mirror Polished Steel<\/div>\n<\/div>\n<div class=\"tick\"><\/div>\n<p>&nbsp;<\/p>\n<p><button class=\"choice\" data-g=\"wall\" data-v=\"travertine\"><\/button><button class=\"choice\" data-g=\"wall\" data-v=\"travertine\"><br \/>\n<canvas id=\"p4\" class=\"swatch\" width=\"36\" height=\"36\"><\/canvas><\/button><\/p>\n<div>\n<div class=\"cn\">\u062d\u062c\u0631 \u062a\u0631\u0627\u0641\u0631\u062a\u064a\u0646<\/div>\n<div class=\"cs\">Natural Travertine<\/div>\n<\/div>\n<div class=\"tick\"><\/div>\n<p>&nbsp;<\/p>\n<\/div>\n<\/div>\n<div class=\"grp\">\n<div class=\"grp-lbl\">\u2756 \u0644\u0648\u0646 \u0627\u0644\u0625\u0636\u0627\u0621\u0629<\/div>\n<div class=\"choices\">\n<div class=\"swatch\" style=\"background: #0e0800; display: flex; align-items: center; justify-content: center;\">\n<div style=\"width: 5px; height: 28px; border-radius: 3px; background: linear-gradient(#ffe090,#d07010); box-shadow: 0 0 8px #ff8800;\"><\/div>\n<\/div>\n<div>\n<div class=\"cn\">\u0630\u0647\u0628\u064a \u062f\u0627\u0641\u0626 2700K<\/div>\n<div class=\"cs\">Warm Gold LED Strip<\/div>\n<\/div>\n<div class=\"tick\"><\/div>\n<p>&nbsp;<\/p>\n<div class=\"swatch\" style=\"background: #060810; display: flex; align-items: center; justify-content: center;\">\n<div style=\"width: 5px; height: 28px; border-radius: 3px; background: linear-gradient(#e0f0ff,#6090d0); box-shadow: 0 0 8px #80b8ff;\"><\/div>\n<\/div>\n<div>\n<div class=\"cn\">\u0623\u0628\u064a\u0636 \u0646\u064a\u0648\u062a\u0631\u0627\u0644 4000K<\/div>\n<div class=\"cs\">Neutral White LED<\/div>\n<\/div>\n<div class=\"tick\"><\/div>\n<p>&nbsp;<\/p>\n<div class=\"swatch\" style=\"background: #100608; display: flex; align-items: center; justify-content: center;\">\n<div style=\"width: 5px; height: 28px; border-radius: 3px; background: linear-gradient(#ffc0a0,#d04830); box-shadow: 0 0 8px #ff7050;\"><\/div>\n<\/div>\n<div>\n<div class=\"cn\">\u0631\u0648\u0632 \u062c\u0648\u0644\u062f<\/div>\n<div class=\"cs\">Rose Gold Accent<\/div>\n<\/div>\n<div class=\"tick\"><\/div>\n<p>&nbsp;<\/p>\n<div class=\"swatch\" style=\"background: #101010;\"><\/div>\n<div>\n<div class=\"cn\">\u0628\u062f\u0648\u0646 \u0634\u0631\u0627\u0626\u0637<\/div>\n<div class=\"cs\">Spotlights Only<\/div>\n<\/div>\n<div class=\"tick\"><\/div>\n<p>&nbsp;<\/p>\n<\/div>\n<\/div>\n<div class=\"grp\">\n<div class=\"grp-lbl\">\u2756 \u0627\u0644\u0623\u0631\u0636\u064a\u0629<\/div>\n<div class=\"choices\"><button class=\"choice on\" data-g=\"floor\" data-v=\"cream_marble\"><\/button><button class=\"choice on\" data-g=\"floor\" data-v=\"cream_marble\"><br \/>\n<canvas id=\"p5\" class=\"swatch\" width=\"36\" height=\"36\"><\/canvas><\/button><\/p>\n<div>\n<div class=\"cn\">\u0631\u062e\u0627\u0645 \u0643\u0631\u064a\u0645\u064a<\/div>\n<div class=\"cs\">Cream Marble<\/div>\n<\/div>\n<div class=\"tick\"><\/div>\n<p>&nbsp;<\/p>\n<p><button class=\"choice\" data-g=\"floor\" data-v=\"nero_marble\"><\/button><button class=\"choice\" data-g=\"floor\" data-v=\"nero_marble\"><br \/>\n<canvas id=\"p6\" class=\"swatch\" width=\"36\" height=\"36\"><\/canvas><\/button><\/p>\n<div>\n<div class=\"cn\">\u0631\u062e\u0627\u0645 \u0623\u0633\u0648\u062f<\/div>\n<div class=\"cs\">Nero Marquina<\/div>\n<\/div>\n<div class=\"tick\"><\/div>\n<p>&nbsp;<\/p>\n<p><button class=\"choice\" data-g=\"floor\" data-v=\"oak_hbone\"><\/button><button class=\"choice\" data-g=\"floor\" data-v=\"oak_hbone\"><br \/>\n<canvas id=\"p7\" class=\"swatch\" width=\"36\" height=\"36\"><\/canvas><\/button><\/p>\n<div>\n<div class=\"cn\">\u0628\u0627\u0631\u0643\u064a\u0647 \u0647\u064a\u0631\u064a\u0646\u062c\u0628\u0648\u0646<\/div>\n<div class=\"cs\">Oak Herringbone<\/div>\n<\/div>\n<div class=\"tick\"><\/div>\n<p>&nbsp;<\/p>\n<p><button class=\"choice\" data-g=\"floor\" data-v=\"black_granite\"><\/button><button class=\"choice\" data-g=\"floor\" data-v=\"black_granite\"><br \/>\n<canvas id=\"p8\" class=\"swatch\" width=\"36\" height=\"36\"><\/canvas><\/button><\/p>\n<div>\n<div class=\"cn\">\u062c\u0631\u0627\u0646\u064a\u062a \u0623\u0633\u0648\u062f<\/div>\n<div class=\"cs\">Black Galaxy Granite<\/div>\n<\/div>\n<div class=\"tick\"><\/div>\n<p>&nbsp;<\/p>\n<\/div>\n<\/div>\n<div class=\"grp\">\n<div class=\"grp-lbl\">\u2756 \u0627\u0644\u0633\u0642\u0641<\/div>\n<div class=\"choices\">\n<div class=\"swatch\" style=\"background: linear-gradient(135deg,#a07008,#e0b030,#806008);\"><\/div>\n<div>\n<div class=\"cn\">\u0630\u0647\u0628\u064a \u0645\u0637\u0641\u064a<\/div>\n<div class=\"cs\">Satin Gold Panel<\/div>\n<\/div>\n<div class=\"tick\"><\/div>\n<p>&nbsp;<\/p>\n<div class=\"swatch\" style=\"background: linear-gradient(180deg,#c8e0f8,#90c0e8);\"><\/div>\n<div>\n<div class=\"cn\">\u0628\u0627\u0643 \u0644\u0627\u064a\u062a<\/div>\n<div class=\"cs\">Frosted Backlit Panel<\/div>\n<\/div>\n<div class=\"tick\"><\/div>\n<p>&nbsp;<\/p>\n<p><button class=\"choice\" data-g=\"ceil\" data-v=\"wood\"><\/button><button class=\"choice\" data-g=\"ceil\" data-v=\"wood\"><br \/>\n<canvas id=\"p9\" class=\"swatch\" width=\"36\" height=\"36\"><\/canvas><\/button><\/p>\n<div>\n<div class=\"cn\">\u0641\u064a\u0646\u064a\u0631 \u062e\u0634\u0628\u064a<\/div>\n<div class=\"cs\">Wood Veneer Panels<\/div>\n<\/div>\n<div class=\"tick\"><\/div>\n<p>&nbsp;<\/p>\n<div class=\"swatch\" style=\"background: linear-gradient(135deg,#141414,#282828,#101010);\"><\/div>\n<div>\n<div class=\"cn\">\u0645\u0639\u062f\u0646 \u062f\u0627\u0643\u0646<\/div>\n<div class=\"cs\">Dark Brushed Metal<\/div>\n<\/div>\n<div class=\"tick\"><\/div>\n<p>&nbsp;<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!-- sb-body --><\/p>\n<\/div>\n<p><!-- sidebar --><\/p>\n<\/div>\n<p><!-- app --><\/p>\n<p><script>\n\"use strict\";<\/p>\n<p>let S={wall:'oak_slat',light:'warm',floor:'cream_marble',ceil:'gold'};\nconst cv=document.getElementById('cv');\nconst ctx=cv.getContext('2d');<\/p>\n<p>function initCanvas() {\n  cv.width = 700;\n  cv.height = 750;\n}\ninitCanvas();<\/p>\n<p>\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/  NOISE SYSTEM\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst PERM=(()=>{const a=[];for(let i=0;i<256;i++)a[i]=i;for(let i=255;i>0;i--){const j=Math.floor(Math.random()*(i+1));[a[i],a[j]]=[a[j],a[i]];}return a;})();\nfunction fade(t){return t*t*t*(t*(t*6-15)+10);}\nfunction lerp(a,b,t){return a+(b-a)*t;}\nfunction grad(hash,x,y){const h=hash&3;const u=h<2?x:y,v=h<2?y:x;return((h&#038;1)?-u:u)+((h&#038;2)?-v:v);}\nfunction noise2(x,y){\n  const X=Math.floor(x)&#038;255,Y=Math.floor(y)&#038;255;\n  x-=Math.floor(x);y-=Math.floor(y);\n  const u=fade(x),v=fade(y);\n  const a=PERM[X]+Y,aa=PERM[a],ab=PERM[a+1],b=PERM[X+1]+Y,ba=PERM[b],bb=PERM[b+1];\n  return lerp(lerp(grad(PERM[aa],x,y),grad(PERM[ba],x-1,y),u),lerp(grad(PERM[ab],x,y-1),grad(PERM[bb],x-1,y-1),u),v);\n}\nfunction fbm(x,y,oct=5){let v=0,a=0.5,f=1;for(let i=0;i<oct;i++){v+=a*noise2(x*f,y*f);a*=0.5;f*=2;}return v;}\n\nfunction mkc(w,h){const c=document.createElement('canvas');c.width=w;c.height=h;return c;}\n\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/  TEXTURE GENERATORS\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction genOakSlat(W=512,H=512,dark=false){\n  const c=mkc(W,H),g=c.getContext('2d');\n  g.fillStyle=dark?'#0c0806':'#120e08';g.fillRect(0,0,W,H);\n  const bw=dark?20:22, gap=dark?6:7;\n  const count=Math.ceil(W\/(bw+gap))+1;\n  const seed=dark?77:42;\n  function srnd(i){let x=Math.sin(i*seed+1.3)*43758;return x-Math.floor(x);}\n  for(let i=0;i<count;i++){ const x=i*(bw+gap); const variety=srnd(i); const topFrac = variety>0.5 ? variety*0.55 : 0.4+variety*0.45;\n    const topY=topFrac*H;\n    const slatH=H-topY+10;\n    const baseR=dark?(60+variety*25):(110+variety*40);\n    const baseG=dark?(35+variety*15):(70+variety*25);\n    const baseB=dark?(12+variety*8):(20+variety*12);\n    const fg=g.createLinearGradient(x,0,x+bw,0);\n    fg.addColorStop(0,`rgba(0,0,0,0.55)`);\n    fg.addColorStop(0.12,`rgb(${baseR*0.7|0},${baseG*0.7|0},${baseB*0.7|0})`);\n    fg.addColorStop(0.35,`rgb(${baseR},${baseG},${baseB})`);\n    fg.addColorStop(0.55,`rgb(${Math.min(255,baseR*1.25)|0},${Math.min(255,baseG*1.2)|0},${Math.min(255,baseB*1.1)|0})`);\n    fg.addColorStop(0.8,`rgb(${baseR*0.85|0},${baseG*0.85|0},${baseB*0.85|0})`);\n    fg.addColorStop(1,`rgba(0,0,0,0.45)`);\n    g.fillStyle=fg;g.fillRect(x,topY,bw,slatH);\n    const imgd=g.getImageData(x,topY,bw,slatH);\n    const d=imgd.data;\n    for(let py=0;py<slatH;py++){\n      for(let px=0;px<bw;px++){\n        const nx=px\/bw*1.5+i*0.3;const ny=py\/slatH*8;\n        const n=fbm(nx,ny,4)*0.5+0.5;const n2=noise2(nx*3,ny*0.5)*0.5+0.5;\n        const grainAmt=(n*0.6+n2*0.4-0.5)*60;const idx=(py*bw+px)*4;\n        d[idx]=Math.min(255,Math.max(0,d[idx]+grainAmt));\n        d[idx+1]=Math.min(255,Math.max(0,d[idx+1]+grainAmt*0.65));\n        d[idx+2]=Math.min(255,Math.max(0,d[idx+2]+grainAmt*0.3));\n      }\n    }\n    g.putImageData(imgd,x,topY);\n    const tfh=6;const tfg=g.createLinearGradient(0,topY-tfh,0,topY);\n    tfg.addColorStop(0,`rgba(${Math.min(255,baseR*1.5)|0},${Math.min(255,baseG*1.4)|0},${Math.min(255,baseB*1.2)|0},0.9)`);\n    tfg.addColorStop(1,`rgba(${baseR},${baseG},${baseB},0.3)`);\n    g.fillStyle=tfg;g.fillRect(x,topY-tfh,bw,tfh);\n    g.fillStyle='rgba(0,0,0,0.6)';g.fillRect(x,topY,bw,3);\n    g.fillStyle='rgba(0,0,0,0.55)';g.fillRect(x,topY,2,slatH);\n    g.fillStyle='rgba(255,200,80,0.06)';g.fillRect(x+bw-2,topY,2,slatH);\n  }\n  return c;\n}\n\nfunction genGoldSS(W=512,H=512){\n  const c=mkc(W,H),g=c.getContext('2d');g.fillStyle='#a87010';g.fillRect(0,0,W,H);\n  const imgd=g.getImageData(0,0,W,H);const d=imgd.data;\n  for(let y=0;y<H;y++){\n    for(let x=0;x<W;x++){\n      const n=fbm(x\/W*0.3,y\/H*80,3)*0.5+0.5;const n2=noise2(x\/W*0.1,y\/H*200)*0.5+0.5;\n      const streak=(n*0.7+n2*0.3-0.5)*70;const idx=(y*W+x)*4;\n      d[idx]=Math.min(255,Math.max(0,d[idx]+streak));\n      d[idx+1]=Math.min(255,Math.max(0,d[idx+1]+streak*0.7));\n      d[idx+2]=Math.min(255,Math.max(0,d[idx+2]+streak*0.15));\n    }\n  }\n  g.putImageData(imgd,0,0);\n  const sg=g.createLinearGradient(0,0,W,0);\n  sg.addColorStop(0,'rgba(0,0,0,0.35)');sg.addColorStop(0.25,'rgba(255,200,60,0.22)');\n  sg.addColorStop(0.5,'rgba(255,240,130,0.3)');sg.addColorStop(0.75,'rgba(255,200,60,0.18)');\n  sg.addColorStop(1,'rgba(0,0,0,0.3)');g.fillStyle=sg;g.fillRect(0,0,W,H);\n  return c;\n}\n\nfunction genMirrorSS(W=512,H=512){\n  const c=mkc(W,H),g=c.getContext('2d');g.fillStyle='#9ab4c8';g.fillRect(0,0,W,H);\n  const imgd=g.getImageData(0,0,W,H);const d=imgd.data;\n  for(let y=0;y<H;y++){\n    for(let x=0;x<W;x++){\n      const n=fbm(x\/W*2,y\/H*2,5)*0.5+0.5;const n2=fbm(x\/W*0.5+10,y\/H*0.5+10,3)*0.5+0.5;\n      const v=(n*0.6+n2*0.4-0.5)*80;const idx=(y*W+x)*4;\n      d[idx]=Math.min(255,Math.max(0,d[idx]+v*1.1));d[idx+1]=Math.min(255,Math.max(0,d[idx+1]+v));d[idx+2]=Math.min(255,Math.max(0,d[idx+2]+v*0.9));\n    }\n  }\n  g.putImageData(imgd,0,0);\n  for(let i=0;i<4;i++){\n    const cx2=W*(0.2+i*0.2), cy2=H*(0.3+Math.sin(i)*0.2);\n    const rg=g.createRadialGradient(cx2,cy2,0,cx2,cy2,W*0.4);\n    rg.addColorStop(0,'rgba(255,255,255,0.3)');rg.addColorStop(1,'rgba(255,255,255,0)');\n    g.fillStyle=rg;g.fillRect(0,0,W,H);\n  }\n  return c;\n}\n\nfunction genTravertine(W=512,H=512){\n  const c=mkc(W,H),g=c.getContext('2d');g.fillStyle='#d8c8a8';g.fillRect(0,0,W,H);\n  const imgd=g.getImageData(0,0,W,H);const d=imgd.data;\n  for(let y=0;y<H;y++){\n    for(let x=0;x<W;x++){ const n=fbm(x\/W*3,y\/H*3,6)*0.5+0.5;const n2=fbm(x\/W*8+5,y\/H*8+5,4)*0.5+0.5; const holes=fbm(x\/W*15,y\/H*15,3)*0.5+0.5; const v=(n*0.5+n2*0.35-0.4)*60;const holeV=holes>0.78?-30:0;const idx=(y*W+x)*4;\n      d[idx]=Math.min(255,Math.max(0,d[idx]+v+holeV));d[idx+1]=Math.min(255,Math.max(0,d[idx+1]+v*0.9+holeV));d[idx+2]=Math.min(255,Math.max(0,d[idx+2]+v*0.65+holeV));\n    }\n  }\n  g.putImageData(imgd,0,0);\n  return c;\n}<\/p>\n<p>function genCreamMarble(W=512,H=512){\n  const c=mkc(W,H),g=c.getContext('2d');g.fillStyle='#e4dac4';g.fillRect(0,0,W,H);\n  const imgd=g.getImageData(0,0,W,H);const d=imgd.data;\n  for(let y=0;y<H;y++){\n    for(let x=0;x<W;x++){\n      const n=fbm(x\/W*1.5,y\/H*1.5,6)*0.5+0.5;const v=(n-0.5)*45;const idx=(y*W+x)*4;\n      d[idx]=Math.min(255,Math.max(0,d[idx]+v));d[idx+1]=Math.min(255,Math.max(0,d[idx+1]+v*0.9));d[idx+2]=Math.min(255,Math.max(0,d[idx+2]+v*0.7));\n    }\n  }\n  g.putImageData(imgd,0,0);\n  for(let i=0;i<20;i++){\n    const sx=Math.random()*W,sy=Math.random()*H,angle=Math.random()*Math.PI;\n    g.save();g.translate(sx,sy);g.rotate(angle);\n    const len=80+Math.random()*180;const vc=Math.random();\n    g.strokeStyle=`rgba(${150+vc*40|0},${125+vc*30|0},${85+vc*25|0},${0.15+Math.random()*0.3})`;\n    g.lineWidth=0.4+Math.random()*1.8;g.beginPath();g.moveTo(0,0);\n    let cx2=0,cy2=0;\n    for(let j=0;j<len;j+=6){cx2+=6;cy2=Math.sin(j*0.08)*10+fbm(j*0.05,i)*8;g.lineTo(cx2,cy2);}\n    g.stroke();g.restore();\n  }\n  return c;\n}\n\nfunction genNeroMarble(W=512,H=512){\n  const c=mkc(W,H),g=c.getContext('2d');g.fillStyle='#101010';g.fillRect(0,0,W,H);\n  for(let i=0;i<18;i++){\n    const sx=Math.random()*W,sy=Math.random()*H,angle=Math.random()*Math.PI;\n    g.save();g.translate(sx,sy);g.rotate(angle);const len=60+Math.random()*200;\n    g.strokeStyle=`rgba(${200+Math.random()*55|0},${200+Math.random()*55|0},${210+Math.random()*45|0},${0.4+Math.random()*0.5})`;\n    g.lineWidth=0.3+Math.random()*1.5;g.beginPath();g.moveTo(0,0);\n    let cx2=0;for(let j=0;j<len;j+=5){cx2+=5;g.lineTo(cx2,Math.sin(j*0.09)*7+Math.random()*3-1.5);}\n    g.stroke();g.restore();\n  }\n  return c;\n}\n\nfunction genHerringbone(W=256,H=256){\n  const c=mkc(W,H),g=c.getContext('2d');g.fillStyle='#6a4020';g.fillRect(0,0,W,H);\n  const pw=14,ph=56;const cols=['#7a4828','#8a5530','#9a6038','#7a4522','#8a5228'];\n  function plank(x,y,rot,ci){\n    g.save();g.translate(x+pw\/2,y+ph\/2);g.rotate(rot);\n    const bc=cols[ci%cols.length];\n    g.fillStyle=bc;g.fillRect(-pw\/2,-ph\/2,pw,ph);\n    g.strokeStyle='rgba(0,0,0,0.4)';g.lineWidth=0.8;g.strokeRect(-pw\/2,-ph\/2,pw,ph);g.restore();\n  }\n  let ci=0;\n  for(let row=-1;row<H\/ph*2+1;row++){\n    for(let col=-1;col<W\/pw*2+1;col++){\n      if((row+col)%2===0){plank(col*pw,row*ph,0,ci++);}\n      else{plank(col*pw-ph\/2+pw\/2,row*ph-ph\/2+pw\/2,Math.PI\/2,ci++);}\n    }\n  }\n  return c;\n}\n\nfunction genBlackGranite(W=256,H=256){\n  const c=mkc(W,H),g=c.getContext('2d');g.fillStyle='#0e0e12';g.fillRect(0,0,W,H);\n  for(let i=0;i<500;i++){ g.fillStyle=Math.random()>0.8?'#ffaa00':'#444';\n    g.fillRect(Math.random()*W,Math.random()*H,1.5,1.5);\n  }\n  return c;\n}<\/p>\n<p>function genWoodVeneer(W=256,H=64){\n  const c=mkc(W,H),g=c.getContext('2d');g.fillStyle='#6a3b18';g.fillRect(0,0,W,H);\n  return c;\n}<\/p>\n<p>\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/  TEXTURE INITIALIZATION\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nlet TEX={};\nfunction buildTex(){\n  const p=(src,rep='repeat')=>ctx.createPattern(src,rep);\n  TEX.oak_slat    = p(genOakSlat(512,512,false));\n  TEX.walnut_slat = p(genOakSlat(512,512,true));\n  TEX.gold_ss     = p(genGoldSS(256,256));\n  TEX.mirror_ss   = p(genMirrorSS(256,256));\n  TEX.travertine  = p(genTravertine(512,512));\n  TEX.cream_marble= p(genCreamMarble(512,512));\n  TEX.nero_marble = p(genNeroMarble(512,512));\n  TEX.oak_hbone   = p(genHerringbone(256,256));\n  TEX.black_granite=p(genBlackGranite(256,256));\n  TEX.wood_veneer = p(genWoodVeneer(256,64));<\/p>\n<p>  const pairs=[\n    ['p0',genOakSlat(36,36,false)],['p1',genOakSlat(36,36,true)],\n    ['p2',genGoldSS(36,36)],['p3',genMirrorSS(36,36)],['p4',genTravertine(36,36)],\n    ['p5',genCreamMarble(36,36)],['p6',genNeroMarble(36,36)],\n    ['p7',genHerringbone(36,36)],['p8',genBlackGranite(36,36)],['p9',genWoodVeneer(36,36)]\n  ];\n  pairs.forEach(([id,src])=>{\n    const el=document.getElementById(id);if(!el)return;\n    const c=el.getContext('2d');c.drawImage(src,0,0,36,36);\n  });\n}<\/p>\n<p>const LC={\n  warm: {r:255,g:140,b:20,  strip:'#ff8800',core:'rgba(255,250,200,0.9)',glow:(a)=>`rgba(255,150,20,${a})`},\n  cool: {r:150,g:200,b:255, strip:'#90c8ff',core:'rgba(220,240,255,0.9)',glow:(a)=>`rgba(140,200,255,${a})`},\n  rose: {r:255,g:100,b:70,  strip:'#ff6844',core:'rgba(255,200,170,0.9)',glow:(a)=>`rgba(255,110,70,${a})`},\n  none: {r:80, g:70, b:55,  strip:null,      core:'rgba(200,190,160,0.7)',glow:(a)=>`rgba(90,80,60,${a})`}\n};<\/p>\n<p>\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/  CORE DRAW FUNCTIONS\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction poly(pts){\n  ctx.beginPath();ctx.moveTo(pts[0].x,pts[0].y);\n  for(let i=1;i<pts.length;i++)ctx.lineTo(pts[i].x,pts[i].y); ctx.closePath(); } function drawCeiling(TL,TR,IL,IR,BX,BY,BW,lc){ ctx.save();poly([TL,TR,IR,IL]);ctx.clip(); if(S.ceil==='gold'){ const cg=ctx.createLinearGradient(TL.x,TL.y,IL.x,IL.y); cg.addColorStop(0,'#7a5008');cg.addColorStop(1,'#8a6010'); ctx.fillStyle=cg;poly([TL,TR,IR,IL]);ctx.fill(); } else if(S.ceil==='backlit'){ ctx.fillStyle='#a0c0e8';poly([TL,TR,IR,IL]);ctx.fill(); } else if(S.ceil==='wood'){ ctx.fillStyle=TEX.wood_veneer;poly([TL,TR,IR,IL]);ctx.fill(); } else { ctx.fillStyle='#222';poly([TL,TR,IR,IL]);ctx.fill(); } \/\/ Spotlights simulation const spots=[BX+BW*0.22, BX+BW*0.5, BX+BW*0.78]; spots.forEach(sx=>{\n    const sy=BY-18;\n    ctx.fillStyle='#0e0e0e';ctx.beginPath();ctx.ellipse(sx,sy,16,7,0,0,Math.PI*2);ctx.fill();\n    const hg=ctx.createRadialGradient(sx,sy,0,sx,sy,60);\n    hg.addColorStop(0,lc.glow(0.4));hg.addColorStop(1,'rgba(0,0,0,0)');\n    ctx.fillStyle=hg;ctx.beginPath();ctx.arc(sx,sy,60,0,Math.PI*2);ctx.fill();\n  });\n  ctx.restore();\n}<\/p>\n<p>function drawBackWall(BX,BY,BW,BH,lc){\n  ctx.save();ctx.rect(BX,BY,BW,BH);ctx.clip();\n  ctx.fillStyle=TEX[S.wall];ctx.fillRect(BX,BY,BW,BH);<\/p>\n<p>  \/\/ LED Ambient strips\n  if(lc.strip){\n    [BX+10, BX+BW-10].forEach(x=>{\n      const wg=ctx.createLinearGradient(x,0,x+(x===BX+10?80:-80),0);\n      wg.addColorStop(0,lc.glow(0.6));wg.addColorStop(1,'rgba(0,0,0,0)');\n      ctx.fillStyle=wg;ctx.fillRect(x-(x===BX+10?0:80),BY,80,BH);<\/p>\n<p>      ctx.fillStyle=lc.core;ctx.fillRect(x-2,BY,4,BH);\n    });\n  }\n  ctx.restore();\n}<\/p>\n<p>function drawWallSide(side,T,B,IB,I,lc){\n  ctx.save();poly([T,B,IB,I]);ctx.clip();\n  ctx.fillStyle=TEX[S.wall];ctx.fillRect(Math.min(T.x,I.x),T.y,Math.abs(T.x-I.x)+200,B.y-T.y);<\/p>\n<p>  const g=ctx.createLinearGradient(T.x,0,I.x,0);\n  g.addColorStop(0,'rgba(0,0,0,0.6)');g.addColorStop(1,'rgba(0,0,0,0.1)');\n  ctx.fillStyle=g;poly([T,B,IB,I]);ctx.fill();\n  ctx.restore();\n}<\/p>\n<p>function drawFloor(ILB,IRB,BR,BL,BX,BY,BW,lc){\n  ctx.save();poly([ILB,IRB,BR,BL]);ctx.clip();\n  ctx.fillStyle=TEX[S.floor];ctx.fillRect(BX,BY,BW+200,BR.y-BY+100);<\/p>\n<p>  const g=ctx.createLinearGradient(0,BY,0,BL.y);\n  g.addColorStop(0,'rgba(0,0,0,0.4)');g.addColorStop(1,'rgba(0,0,0,0)');\n  ctx.fillStyle=g;poly([ILB,IRB,BR,BL]);ctx.fill();\n  ctx.restore();\n}<\/p>\n<p>function drawCornerLines(IL,IR,ILB,IRB,TL,TR,BL,BR){\n  ctx.strokeStyle='rgba(0,0,0,0.7)';ctx.lineWidth=2;\n  ctx.beginPath();\n  ctx.moveTo(IL.x,IL.y);ctx.lineTo(ILB.x,ILB.y);\n  ctx.moveTo(IR.x,IR.y);ctx.lineTo(IRB.x,IRB.y);\n  ctx.stroke();\n}<\/p>\n<p>function drawHandrail(BX,BY,BW,BH,TL,BL,IL,ILB,TR,BR,IR,IRB){\n  const hy=BY+BH*0.6;ctx.save();\n  const hg=ctx.createLinearGradient(BX,0,BX+BW,0);\n  hg.addColorStop(0,'#444');hg.addColorStop(0.5,'#eee');hg.addColorStop(1,'#444');\n  ctx.fillStyle=hg;ctx.fillRect(BX+20,hy,BW-40,12);\n  ctx.restore();\n}<\/p>\n<p>function drawFrame(FX,FY,FW,FH,lc){\n  ctx.strokeStyle='#1c1610';ctx.lineWidth=8;\n  ctx.strokeRect(FX,FY,FW,FH);\n}<\/p>\n<p>function drawOuterFloor(BL,BR,FX,FW,FY,CH){\n  ctx.fillStyle='#030202';ctx.fillRect(0,FY,cv.width,CH-FY);\n}<\/p>\n<p>function drawPanel(IR,IRB){\n  const px=IR.x-50, py=IR.y+80;\n  ctx.fillStyle='rgba(30,25,20,0.9)';ctx.fillRect(px,py,35,160);\n  ctx.fillStyle='#ffaa00';\n  for(let i=0;i<4;i++){ ctx.beginPath();ctx.arc(px+17,py+30+i*35,5,0,Math.PI*2);ctx.fill(); } } function drawLightWash(BX,BY,BW,BH,lc,CW,CH){ const lg=ctx.createRadialGradient(CW\/2,CH\/2,10,CW\/2,CH\/2,CW*0.6); lg.addColorStop(0,lc.glow(0.15));lg.addColorStop(1,'rgba(0,0,0,0)'); ctx.fillStyle=lg;ctx.fillRect(0,0,CW,CH); } \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 \/\/ RENDER ENGINE OVERSEER \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 function draw(){ const CW=cv.width,CH=cv.height; ctx.clearRect(0,0,CW,CH); const lc=LC[S.light]; const FX=Math.floor(CW*0.05), FY=Math.floor(CH*0.03); const FW=Math.floor(CW*0.9), FH=Math.floor(CH*0.95); const BX=Math.floor(CW*0.21), BY=Math.floor(CH*0.15); const BW=Math.floor(CW*0.58), BH=Math.floor(CH*0.60); const TL={x:FX,y:FY}, TR={x:FX+FW,y:FY}; const BL={x:FX,y:FY+FH}, BR={x:FX+FW,y:FY+FH}; const IL={x:BX,y:BY}, IR={x:BX+BW,y:BY}; const ILB={x:BX,y:BY+BH}, IRB={x:BX+BW,y:BY+BH}; drawCeiling(TL,TR,IL,IR,BX,BY,BW,lc); drawBackWall(BX,BY,BW,BH,lc); drawWallSide('left',TL,BL,ILB,IL,lc); drawWallSide('right',TR,BR,IRB,IR,lc); drawFloor(ILB,IRB,BR,BL,BX,BY+BH,BW,lc); drawCornerLines(IL,IR,ILB,IRB,TL,TR,BL,BR); drawHandrail(BX,BY,BW,BH,TL,BL,IL,ILB,TR,BR,IR,IRB); drawFrame(FX,FY,FW,FH,lc); drawOuterFloor(BL,BR,FX,FW,FY+FH,CH); drawPanel(IR,IRB); drawLightWash(BX,BY,BW,BH,lc,CW,CH); } \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 \/\/ INTERACTIVE ACTIONS \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 window.pick = function(btn, group) { const grp = btn.closest('.grp'); grp.querySelectorAll('.choice').forEach(b => b.classList.remove('on'));\n  btn.classList.add('on');<\/p>\n<p>  const val = btn.getAttribute('data-v');\n  S[group] = val;<\/p>\n<p>  \/\/ Update Bottom Text Labels\n  const labelEl = btn.querySelector('.cn').innerText;\n  if (group === 'wall') document.getElementById('tw').innerText = labelEl;\n  if (group === 'light') document.getElementById('tl').innerText = labelEl;\n  if (group === 'floor') document.getElementById('tf').innerText = labelEl;\n  if (group === 'ceil') document.getElementById('tc').innerText = labelEl;<\/p>\n<p>  draw();\n};<\/p>\n<p>window.save = function() {\n  const link = document.createElement('a');\n  link.download = `elevator_${S.wall}_${S.floor}.png`;\n  link.href = cv.toDataURL();\n  link.click();\n};<\/p>\n<p>\/\/ Start application\nwindow.onload = () => {\n  buildTex();\n  draw();\n};\n<\/script><\/p>","protected":false},"excerpt":{"rendered":"<p>&nbsp; &nbsp; \u0627\u0644\u062c\u062f\u0631\u0627\u0646: \u0623\u0644\u0648\u0627\u062d \u062e\u0634\u0628 \u0628\u0644\u0648\u0637 \u0625\u0636\u0627\u0621\u0629: \u0630\u0647\u0628\u064a \u062f\u0627\u0641\u0626 2700K \u0623\u0631\u0636\u064a\u0629: \u0631\u062e\u0627\u0645 \u0643\u0631\u064a\u0645\u064a \u0633\u0642\u0641: \u0630\u0647\u0628\u064a \u0645\u0637\u0641\u064a \u2193 \u062d\u0641\u0638 \u0627\u0644\u0635\u0648\u0631\u0629 \u0637\u0644\u0628 \u0639\u0631\u0636 \u0633\u0639\u0631 \u203a \u2726 \u0643\u0628\u064a\u0646\u0629 \u0627\u0644\u0645\u0635\u0639\u062f \u0627\u0644\u0641\u0627\u062e\u0631\u0629 LUXURY ELEVATOR CONFIGURATOR \u2756 \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u062c\u062f\u0631\u0627\u0646 \u0623\u0644\u0648\u0627\u062d \u062e\u0634\u0628 \u0628\u0644\u0648\u0637 Oak Staggered Slats &nbsp; \u0623\u0644\u0648\u0627\u062d \u0648\u0627\u0644\u0646\u0627\u062a \u062f\u0627\u0643\u0646 Dark Walnut Slats &nbsp; \u0633\u062a\u0627\u0646\u0644\u0633 \u0630\u0647\u0628\u064a Brushed Gold PVD &nbsp; \u0645\u0631\u0627\u064a\u0627 \u0628\u0648\u0644\u064a\u0634&#8230;<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4017","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/marinaplatforms.com\/ar\/wp-json\/wp\/v2\/pages\/4017","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marinaplatforms.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/marinaplatforms.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/marinaplatforms.com\/ar\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/marinaplatforms.com\/ar\/wp-json\/wp\/v2\/comments?post=4017"}],"version-history":[{"count":3,"href":"https:\/\/marinaplatforms.com\/ar\/wp-json\/wp\/v2\/pages\/4017\/revisions"}],"predecessor-version":[{"id":4020,"href":"https:\/\/marinaplatforms.com\/ar\/wp-json\/wp\/v2\/pages\/4017\/revisions\/4020"}],"wp:attachment":[{"href":"https:\/\/marinaplatforms.com\/ar\/wp-json\/wp\/v2\/media?parent=4017"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}