From 8afae1cff1ade5e7b71750b603a87293f629f999 Mon Sep 17 00:00:00 2001
From: Naz <naz293097@gmail.com>
Date: Wed, 16 Sep 2026 10:08:21 +0000
Subject: [PATCH] =?UTF-8?q?v4:=20=D0=B8=D1=81=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D1=8B=20=D1=86=D0=B2=D0=B5=D1=82=D0=B0=20?=
 =?UTF-8?q?=D0=BA=D1=83=D0=B1=D0=B8=D0=BA=D0=BE=D0=B2=20-=20=D0=BA=D0=B0?=
 =?UTF-8?q?=D0=B6=D0=B4=D1=8B=D0=B9=20=D0=BF=D0=BE=D0=BB=D1=83=D1=87=D0=B0?=
 =?UTF-8?q?=D0=B5=D1=82=20=D0=BF=D1=80=D0=B0=D0=B2=D0=B8=D0=BB=D1=8C=D0=BD?=
 =?UTF-8?q?=D1=8B=D0=B5=20=D0=B3=D1=80=D0=B0=D0=BD=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 8eafba8..c3c4ff4 100644
--- a/index.html
+++ b/index.html
@@ -64,6 +64,7 @@
   .face-orange { background: #f97316; }
   .face-blue   { background: #3b82f6; }
   .face-green  { background: #22c55e; }
+  .face-black  { background: #1a1a1a; }
   
   .face-front  { transform: rotateY(0deg) translateZ(48px); }
   .face-back   { transform: rotateY(180deg) translateZ(48px); }
@@ -332,7 +333,18 @@ let isDragging = false;
 let lastMouseX = 0;
 let lastMouseY = 0;
 
-function createCubie(x, y, z) {
+function getCubieColors(x, y, z) {
+  const colors = {};
+  if (z === 1) colors.front = COLORS.RED;
+  if (z === -1) colors.back = COLORS.ORANGE;
+  if (x === 1) colors.right = COLORS.BLUE;
+  if (x === -1) colors.left = COLORS.GREEN;
+  if (y === 1) colors.top = COLORS.WHITE;
+  if (y === -1) colors.bottom = COLORS.YELLOW;
+  return colors;
+}
+
+function createCubie(x, y, z, colors) {
   const cubie = document.createElement('div');
   cubie.className = 'cubie';
   cubie.dataset.x = x;
@@ -341,7 +353,8 @@ function createCubie(x, y, z) {
   
   FACES.forEach(face => {
     const faceEl = document.createElement('div');
-    faceEl.className = `face face-${face} face-${FACE_COLORS[face]}`;
+    const colorName = colors[face] || 'black';
+    faceEl.className = `face face-${face} face-${colorName}`;
     if (face === 'front')  faceEl.style.transform = 'rotateY(0deg) translateZ(48px)';
     if (face === 'back')   faceEl.style.transform = 'rotateY(180deg) translateZ(48px)';
     if (face === 'right')  faceEl.style.transform = 'rotateY(90deg) translateZ(48px)';
@@ -372,11 +385,12 @@ function initCube() {
     for (let y = -1; y <= 1; y++) {
       cube[x + 1][y + 1] = [];
       for (let z = -1; z <= 1; z++) {
-        const cubie = createCubie(x, y, z);
+        const colors = getCubieColors(x, y, z);
+        const cubie = createCubie(x, y, z, colors);
         cube[x + 1][y + 1][z + 1] = {
           element: cubie,
           x, y, z,
-          colors: { ...FACE_COLORS }
+          colors: { ...colors }
         };
         cubeEl.appendChild(cubie);
       }