From 8767cd544d0e48d92f4765276fc105d6cd41d868 Mon Sep 17 00:00:00 2001
From: yequari <yequari@32bit.cafe>
Date: Tue, 26 Sep 2023 21:21:18 -0700
Subject: [PATCH] too many shapes

---
 css/counter.css | 71 ++++++++++++++++++++++++++++++++++++++++++++++---
 css/shelf.css   |  6 ++---
 css/style.css   |  3 +++
 js/elements.js  | 19 +++++++++++--
 4 files changed, 91 insertions(+), 8 deletions(-)

diff --git a/css/counter.css b/css/counter.css
index 06f3d89..cf3419e 100644
--- a/css/counter.css
+++ b/css/counter.css
@@ -1,6 +1,71 @@
 .wrapper {
-    width: 100%;
-    height: 400px;
+    width: 800px;
+    height: 300px;
     display: block;
-    background-color: aqua;
+    margin: none;
+}
+
+.counter {
+    width: 100%;
+    height: 100%;
+    display: block;
+    perspective: 1200px; /* determines size of the overall element in the final transform */
+    backface-visibility: visible;
+    transform-style: preserve-3d;
+    perspective-origin: 50% 50%;
+    transform: translateZ(-100px) rotateX(-30deg);
+}
+
+.face {
+    width: 800px;
+    height: 300px;
+    display: block;
+    position: absolute;
+}
+
+.vert-side {
+    width: 200px;
+    height: 300px;
+    display: block;
+    position: absolute;
+    left: 300px;
+}
+
+.horiz-side {
+    width: 800px;
+    height: 200px;
+    display: block;
+    position: absolute;
+    top: 50px;
+}
+
+.top-shelf {
+    background-color: #666666;
+    transform: rotateX(90deg) translateZ(150px);
+}
+
+.bottom-shelf {
+    background-color: #666666;
+    transform: rotateX(-90deg) translateZ(150px);
+}
+
+.right-shelf {
+    background-color: #333333;
+    transform: rotateY(90deg) translateZ(400px);
+    right: 0;
+}
+
+.left-shelf {
+    background-color: #333333;
+    transform: rotateY(-90deg) translateZ(400px);
+}
+
+.front-shelf {
+    background: rgba(255,255,255,0.3);
+    transform: translateZ(100px);
+}
+
+.back-shelf {
+    background: rgba(255,255,255,0.8);
+    transform: rotateY(180deg) translateZ(100px);
 }
\ No newline at end of file
diff --git a/css/shelf.css b/css/shelf.css
index de2b524..6d2eb7f 100644
--- a/css/shelf.css
+++ b/css/shelf.css
@@ -26,6 +26,7 @@
     height: 100px;
     display: block;
     position: absolute;
+    left: 100px;
 }
 .top-shelf {
     background-color: #DAA06D;
@@ -39,13 +40,12 @@
 
 .right-shelf {
     background-color: #6F4E37;
-    transform: rotateY(90deg) translateZ(50px);
-    right: 0;
+    transform: rotateY(90deg) translateZ(150px);
 }
 
 .left-shelf {
     background-color: #6F4E37;
-    transform: rotateY(-90deg) translateZ(50px);
+    transform: rotateY(-90deg) translateZ(150px);
 }
 
 .front-shelf {
diff --git a/css/style.css b/css/style.css
index 04616a7..b48ee6f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -9,6 +9,8 @@ body {
     background: url(../images/d7YslGq.gif);
     line-height: 1.6;
     font-size: 16px;
+    margin: 0;
+    padding: 0;
 }
 
 header {
@@ -21,6 +23,7 @@ h1,h2,h3 {
 .container {
     background-color: white;
     width: 85%;
+    height: 100vh;
     padding: 20px 50px;
     margin: 0 auto;
 }
diff --git a/js/elements.js b/js/elements.js
index c2a2fa9..486af81 100644
--- a/js/elements.js
+++ b/js/elements.js
@@ -44,9 +44,24 @@ class ShopCounter extends HTMLElement {
         
         const wrapper = document.createElement("span");
         wrapper.setAttribute("class", "wrapper");
-        const shelf = document.createElement("span")
-        shelf.setAttribute("class", "counter")
+        const counter = document.createElement("span")
+        counter.setAttribute("class", "counter")
 
+        const topshelf = counter.appendChild(document.createElement("div"));
+        topshelf.setAttribute("class", "top-shelf horiz-side");
+        const bottomshelf = counter.appendChild(document.createElement("div"));
+        bottomshelf.setAttribute("class", "bottom-shelf horiz-side");
+        const leftshelf = counter.appendChild(document.createElement("div"));
+        leftshelf.setAttribute("class", "left-shelf vert-side");
+        const rightshelf = counter.appendChild(document.createElement("div"));
+        rightshelf.setAttribute("class", "right-shelf vert-side");
+        const back = counter.appendChild(document.createElement("div"));
+        back.setAttribute("class", "back-shelf face");
+        const front = counter.appendChild(document.createElement("div"));
+        front.setAttribute("class", "front-shelf face");
+
+
+        wrapper.appendChild(counter);
         shadow.appendChild(wrapper);
         shadow.appendChild(style);