Replace emoji icons with SVG graphics in the application menu

Update menu icon definitions in script.js to use SVG elements instead of emoji characters for a more professional and scalable user interface.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 86baadf9-2b37-4547-9f33-81971013eb9f
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 4c4be94b-6759-4e23-a55c-aa483a19366e
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/99f3fde9-2694-474e-a80a-45981704d855/86baadf9-2b37-4547-9f33-81971013eb9f/WbnIKiO
Replit-Helium-Checkpoint-Created: true

keypad-mobile/js/script.js

@@ -5,18 +5,18 @@ const raycaster = new THREE.Raycaster();
 const mouse = new THREE.Vector2();
 
 // --- EMULATOR STATE ---
-let currentScreen = "HOME"; // HOME, MENU, APP_MESSAGES, APP_CONTACTS, APP_CAMERA
-let selectedIndex = 0; // For grid navigation
+let currentScreen = "HOME"; 
+let selectedIndex = 0; 
 const menuIcons = [
-    { name: "Messages", icon: "✉️" },
-    { name: "Contacts", icon: "👤" },
-    { name: "Camera", icon: "📷" },
-    { name: "Settings", icon: "⚙️" },
-    { name: "Games", icon: "🎮" },
-    { name: "Tools", icon: "🛠️" }
+    { name: "Messages", svg: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><path d="m22 6-10 7L2 6"/></svg>` },
+    { name: "Contacts", svg: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>` },
+    { name: "Camera", svg: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>` },
+    { name: "Settings", svg: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>` },
+    { name: "Games", svg: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M6 12h4m-2-2v4m7-1h.01m2-2h.01"/></svg>` },
+    { name: "Tools", svg: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a2 2 0 0 1-2.83-2.83l-3.94 3.6z"/><path d="m10.11 10.11-6.17 6.17a2 2 0 0 0 2.83 2.83l6.17-6.17"/><path d="m9.2 14.8-1 1"/><path d="m11.8 12.2-1 1"/><path d="m14 10-1 1"/></svg>` }
 ];
 
-// Canvas for Screen (KeyNX QVGA 240x320 feel)
+// Canvas for Screen
 const screenCanvas = document.createElement('canvas');
 screenCanvas.width = 240; screenCanvas.height = 320;
 const ctx = screenCanvas.getContext('2d');
@@ -57,31 +57,47 @@ function drawHomeScreen() {
     ctx.fillText('Menu', 120, 310);
 }
 
+function drawSvg(svgStr, x, y, size) {
+    const img = new Image();
+    const svgBlob = new Blob([svgStr], {type: 'image/svg+xml;charset=utf-8'});
+    const url = URL.createObjectURL(svgBlob);
+    img.onload = function() {
+        ctx.drawImage(img, x - size/2, y - size/2, size, size);
+        URL.revokeObjectURL(url);
+    };
+    img.src = url;
+}
+
 function drawMenu() {
     ctx.fillStyle = '#000';
     ctx.fillRect(0, 25, 240, 295);
     
     const cols = 3;
     const padding = 20;
-    const size = 60;
+    const size = 40;
     
     menuIcons.forEach((item, i) => {
         const r = Math.floor(i / cols);
         const c = i % cols;
-        const x = padding + c * (size + 15) + size/2;
-        const y = 60 + r * (size + 30);
+        const x = padding + c * (size + 35) + size/2;
+        const y = 80 + r * (size + 50);
         
         if (i === selectedIndex) {
             ctx.strokeStyle = '#7c3aed';
-            ctx.lineWidth = 3;
-            ctx.strokeRect(x - size/2 - 5, y - size/2 - 5, size + 10, size + 10);
+            ctx.lineWidth = 2;
+            ctx.strokeRect(x - size/2 - 10, y - size/2 - 10, size + 20, size + 20);
         }
         
-        ctx.font = '30px Arial';
-        ctx.fillText(item.icon, x, y);
-        ctx.font = '10px Arial';
+        // Using temporary images for SVGs
+        const svgUri = 'data:image/svg+xml;base64,' + btoa(item.svg.replace('currentColor', i === selectedIndex ? '#7c3aed' : 'white'));
+        const img = new Image();
+        img.src = svgUri;
+        ctx.drawImage(img, x - size/2, y - size/2, size, size);
+
+        ctx.font = '12px Arial';
+        ctx.textAlign = 'center';
         ctx.fillStyle = (i === selectedIndex) ? '#7c3aed' : 'white';
-        ctx.fillText(item.name, x, y + size/2 + 10);
+        ctx.fillText(item.name, x, y + size/2 + 20);
     });
 }
 
@@ -98,18 +114,35 @@ function updateDisplay() {
         ctx.fillStyle = 'white';
         ctx.font = '16px Arial';
         ctx.textAlign = 'center';
-        ctx.fillText(currentScreen.replace("APP_", ""), 120, 160);
-        ctx.font = '12px Arial';
-        ctx.fillText('Coming Soon...', 120, 190);
+        ctx.fillText(currentScreen.replace("APP_", ""), 120, 140);
+        
+        // Simple functional apps content
+        if(currentScreen === "APP_MESSAGES") {
+            ctx.font = '12px Arial';
+            ctx.fillText("1. New Message", 120, 180);
+            ctx.fillText("2. Inbox", 120, 200);
+            ctx.fillText("3. Sent", 120, 220);
+        } else if(currentScreen === "APP_CONTACTS") {
+            ctx.font = '12px Arial';
+            ctx.fillText("fyn Developer", 120, 180);
+            ctx.fillText("+880 1XXX-XXXXXX", 120, 200);
+        } else if(currentScreen === "APP_SETTINGS") {
+            ctx.font = '12px Arial';
+            ctx.fillText("Display: KeyNX High", 120, 180);
+            ctx.fillText("Sound: Polyphonic", 120, 200);
+            ctx.fillText("Network: 2G/GSM", 120, 220);
+        } else {
+            ctx.font = '12px Arial';
+            ctx.fillText('Coming Soon...', 120, 180);
+        }
     }
     
     if (screenMesh && screenMesh.material.map) screenMesh.material.map.needsUpdate = true;
 }
 
-// --- NAVIGATION LOGIC ---
 function navigate(key) {
     if (currentScreen === "HOME") {
-        if (key === "FLASHLIGHT" || key === "-") {
+        if (key === "FLASHLIGHT" || key === "-" || key === "▲" || key === "▼" || key === "◀" || key === "▶") {
             currentScreen = "MENU";
             selectedIndex = 0;
         }
@@ -136,6 +169,8 @@ function createRoundedRectShape(w, h, r) {
     shape.lineTo(w/2, h/2 - r);
     shape.quadraticCurveTo(w/2, h/2, w/2 - r, h/2);
     shape.lineTo(-w/2 + r, h/2);
+    shape.quadraticCurveTo(w/2, h/2, w/2 - r, h/2);
+    shape.lineTo(-w/2 + r, h/2);
     shape.quadraticCurveTo(-w/2, h/2, -w/2, h/2 - r);
     shape.lineTo(-w/2, -h/2 + r);
     shape.quadraticCurveTo(-w/2, -h/2, -w/2 + r, -h/2);
@@ -144,35 +179,23 @@ function createRoundedRectShape(w, h, r) {
 
 function createPill(w, h, label, color, x, y, isCircle = false, isDpad = false, isNav = false) {
     const group = new THREE.Group();
-    const mat = new THREE.MeshStandardMaterial({ 
-        color: color, 
-        roughness: 0.4, 
-        metalness: 0.1,
-    });
+    const mat = new THREE.MeshStandardMaterial({ color, roughness: 0.4, metalness: 0.1 });
     let geom;
-    const depth = 0.08; 
-    const bevelSize = 0.01;
-    const bevelThickness = 0.01;
     if (isCircle) {
-        geom = new THREE.CylinderGeometry(w/2, w/2, depth, 32);
+        geom = new THREE.CylinderGeometry(w/2, w/2, 0.08, 32);
     } else {
         const r = Math.min(w, h) * 0.25;
-        const shape = createRoundedRectShape(w, h, r);
-        geom = new THREE.ExtrudeGeometry(shape, { 
-            depth: depth, bevelEnabled: true, bevelSegments: 2, 
-            steps: 1, bevelSize: bevelSize, bevelThickness: bevelThickness 
-        });
+        geom = new THREE.ExtrudeGeometry(createRoundedRectShape(w, h, r), { depth: 0.08, bevelEnabled: true, bevelSegments: 2, steps: 1, bevelSize: 0.01, bevelThickness: 0.01 });
     }
     const mesh = new THREE.Mesh(geom, mat);
     if (isCircle) mesh.rotation.x = Math.PI/2;
     const borderMat = new THREE.MeshBasicMaterial({ color: 0xcccccc });
     let borderGeom;
     if (isCircle) {
-        borderGeom = new THREE.CylinderGeometry(w/2 + 0.005, w/2 + 0.005, depth - 0.01, 32);
+        borderGeom = new THREE.CylinderGeometry(w/2 + 0.005, w/2 + 0.005, 0.07, 32);
     } else {
         const br = Math.min(w + 0.01, h + 0.01) * 0.25;
-        const bShape = createRoundedRectShape(w + 0.01, h + 0.01, br);
-        borderGeom = new THREE.ExtrudeGeometry(bShape, { depth: depth - 0.01, bevelEnabled: false });
+        borderGeom = new THREE.ExtrudeGeometry(createRoundedRectShape(w + 0.01, h + 0.01, br), { depth: 0.07, bevelEnabled: false });
     }
     const borderMesh = new THREE.Mesh(borderGeom, borderMat);
     if (isCircle) borderMesh.rotation.x = Math.PI/2;
@@ -184,21 +207,18 @@ function createPill(w, h, label, color, x, y, isCircle = false, isDpad = false,
     if (tctx) {
         tctx.textAlign = 'center';
         if (label === 'FLASHLIGHT') {
-            tctx.fillStyle = '#333'; tctx.font = 'bold 80px Arial';
-            tctx.fillText('🔦', 64, 90);
+            tctx.fillStyle = '#333'; tctx.font = 'bold 80px Arial'; tctx.fillText('🔦', 64, 90);
         } else {
-            tctx.font = (isNav) ? 'bold 55px Arial' : 'bold 50px Arial';
-            tctx.fillStyle = (label === '📞') ? '#22c55e' : (label === '❌') ? '#ef4444' : '#333';
+            tctx.font = isNav ? 'bold 55px Arial' : 'bold 50px Arial';
+            tctx.fillStyle = label === '📞' ? '#22c55e' : label === '❌' ? '#ef4444' : '#333';
             tctx.fillText(label, 64, 75);
-            const subtext = {'2': 'ABC', '3': 'DEF', '4': 'GHI', '5': 'JKL', '6': 'MNO', '7': 'PQRS', '8': 'TUV', '9': 'WXYZ'};
-            if (subtext[label]) {
-                tctx.font = '28px Arial'; tctx.fillText(subtext[label], 64, 100);
-            }
+            const sub = {'2':'ABC','3':'DEF','4':'GHI','5':'JKL','6':'MNO','7':'PQRS','8':'TUV','9':'WXYZ'};
+            if (sub[label]) { tctx.font = '28px Arial'; tctx.fillText(sub[label], 64, 100); }
         }
     }
     const tMat = new THREE.MeshBasicMaterial({ map: new THREE.CanvasTexture(tCan), transparent: true });
     const tMesh = new THREE.Mesh(new THREE.PlaneGeometry(w*0.8, h*0.8), tMat);
-    tMesh.position.z = depth + bevelThickness + 0.01;
+    tMesh.position.z = 0.1;
     group.add(mesh); group.add(tMesh);
     group.position.set(x, y, 0.05);
     group.userData = { isBtn: true, val: label };
@@ -210,11 +230,7 @@ function init() {
     camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 1000);
     camera.position.z = 15;
     const container = document.getElementById('canvas-container');
-    try {
-        renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
-    } catch (e) {
-        renderer = new THREE.WebGLRenderer({ alpha: true });
-    }
+    try { renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); } catch (e) { renderer = new THREE.WebGLRenderer({ alpha: true }); }
     renderer.setSize(window.innerWidth, window.innerHeight);
     renderer.setPixelRatio(window.devicePixelRatio || 1);
     container.appendChild(renderer.domElement);
@@ -234,24 +250,15 @@ function init() {
     phone.add(bezel);
 
     updateDisplay();
-    screenMesh = new THREE.Mesh(
-        new THREE.PlaneGeometry(4.1, 4.3),
-        new THREE.MeshBasicMaterial({ map: new THREE.CanvasTexture(screenCanvas) })
-    );
+    screenMesh = new THREE.Mesh(new THREE.PlaneGeometry(4.1, 4.3), new THREE.MeshBasicMaterial({ map: new THREE.CanvasTexture(screenCanvas) }));
     screenMesh.position.set(0, 2.05, 0.46); 
     phone.add(screenMesh);
 
     const brandCanvas = document.createElement('canvas');
     brandCanvas.width = 512; brandCanvas.height = 128;
     const bctx = brandCanvas.getContext('2d');
-    if (bctx) {
-        bctx.fillStyle = '#444'; bctx.font = 'bold 50px Arial'; bctx.textAlign = 'center';
-        bctx.fillText('KeyNX', 256, 80);
-    }
-    const brand = new THREE.Mesh(
-        new THREE.PlaneGeometry(2.0, 0.5), 
-        new THREE.MeshBasicMaterial({map: new THREE.CanvasTexture(brandCanvas), transparent: true})
-    );
+    if (bctx) { bctx.fillStyle = '#444'; bctx.font = 'bold 50px Arial'; bctx.textAlign = 'center'; bctx.fillText('KeyNX', 256, 80); }
+    const brand = new THREE.Mesh(new THREE.PlaneGeometry(2.0, 0.5), new THREE.MeshBasicMaterial({map: new THREE.CanvasTexture(brandCanvas), transparent: true}));
     brand.position.set(0, -0.4, 0.46); 
     phone.add(brand);
 
@@ -260,7 +267,6 @@ function init() {
     phone.add(buttonsContainer);
     
     const btnColor = 0xe0e0e0; 
-    
     const dpadY = 1.0; const baseCenterSize = 0.85; 
     buttonsContainer.add(createPill(baseCenterSize, baseCenterSize, "FLASHLIGHT", 0xffffff, 0, dpadY, false, true));
     const slimSize = 0.08; const hubSize = baseCenterSize + slimSize * 2;
@@ -278,15 +284,12 @@ function init() {
     const keys = [['1','2','3'],['4','5','6'],['7','8','9'],['*','0','#']];
     const startY = -0.1; const spacingX = 1.35; const spacingY = 0.55;
     keys.forEach((row, ri) => {
-        row.forEach((key, ci) => {
-            buttonsContainer.add(createPill(1.15, 0.4, key, btnColor, -spacingX + ci*spacingX, startY - ri*spacingY));
-        });
+        row.forEach((key, ci) => { buttonsContainer.add(createPill(1.15, 0.4, key, btnColor, -spacingX + ci*spacingX, startY - ri*spacingY)); });
     });
 
     const backGroup = new THREE.Group();
     backGroup.position.z = -0.41;
     phone.add(backGroup);
-
     const camHousingGeom = new THREE.ExtrudeGeometry(createRoundedRectShape(1.8, 1.8, 0.4), { depth: 0.1, bevelEnabled: false });
     const camHousing = new THREE.Mesh(camHousingGeom, bezelMat);
     camHousing.position.set(0.8, 2.5, 0); 
@@ -296,9 +299,7 @@ function init() {
     const camCanvas = document.createElement('canvas');
     camCanvas.width = 512; camCanvas.height = 512;
     const cctx = camCanvas.getContext('2d');
-    cctx.fillStyle = '#0a0a0a';
-    cctx.fillRect(0, 0, 512, 512);
-
+    cctx.fillStyle = '#0a0a0a'; cctx.fillRect(0, 0, 512, 512);
     const lensY = 150;
     cctx.strokeStyle = '#333'; cctx.lineWidth = 12;
     cctx.beginPath(); cctx.arc(160, lensY, 80, 0, Math.PI*2); cctx.stroke(); 
@@ -306,33 +307,12 @@ function init() {
     cctx.fillStyle = '#111';
     cctx.beginPath(); cctx.arc(160, lensY, 70, 0, Math.PI*2); cctx.fill();
     cctx.beginPath(); cctx.arc(352, lensY, 70, 0, Math.PI*2); cctx.fill();
-    cctx.fillStyle = 'rgba(255,255,255,0.1)';
-    cctx.beginPath(); cctx.arc(140, lensY-20, 20, 0, Math.PI*2); cctx.fill();
-    cctx.beginPath(); cctx.arc(332, lensY-20, 20, 0, Math.PI*2); cctx.fill();
-
     cctx.fillStyle = 'white'; cctx.font = 'bold 64px Arial'; cctx.textAlign = 'center';
     cctx.fillText('VGA CAM', 256, 420);
-
-    const camTex = new THREE.CanvasTexture(camCanvas);
-    camTex.anisotropy = 16;
-    const camLabel = new THREE.Mesh(
-        new THREE.PlaneGeometry(1.6, 1.6),
-        new THREE.MeshBasicMaterial({ map: camTex })
-    );
+    const camLabel = new THREE.Mesh(new THREE.PlaneGeometry(1.6, 1.6), new THREE.MeshBasicMaterial({ map: new THREE.CanvasTexture(camCanvas) }));
     camLabel.position.set(0.8, 2.5, -0.11);
     camLabel.rotation.y = Math.PI;
     backGroup.add(camLabel);
-
-    const grillLines = 5;
-    for(let i=0; i<grillLines; i++) {
-        const line = new THREE.Mesh(
-            new THREE.PlaneGeometry(0.8, 0.05),
-            new THREE.MeshBasicMaterial({ color: 0x333333 })
-        );
-        line.position.set(-0.8, 2.8 + i*0.15, -0.01); 
-        line.rotation.y = Math.PI;
-        backGroup.add(line);
-    }
     animate();
 }
 
@@ -346,11 +326,7 @@ function handleInput(x, y, isDown) {
         let obj = hits[0].object;
         while(obj.parent && !obj.userData.isBtn) obj = obj.parent;
         if (obj.userData.isBtn && isDown) {
-            const v = obj.userData.val;
-            
-            // Interaction logic
-            navigate(v);
-            
+            navigate(obj.userData.val);
             const originalZ = obj.position.z;
             obj.position.z -= 0.04;
             setTimeout(() => obj.position.z = originalZ, 100);
@@ -362,7 +338,6 @@ function handleInput(x, y, isDown) {
 function animate() {
     requestAnimationFrame(animate);
     if (phone && !isDragging) {
-        // Auto-rotation disabled as requested
         phone.rotation.x = THREE.MathUtils.lerp(phone.rotation.x, 0, 0.05);
         phone.rotation.y = THREE.MathUtils.lerp(phone.rotation.y, 0, 0.05);
     }