From 950c03a64f2b93e61f408e26c60af81c971e52e4 Mon Sep 17 00:00:00 2001 From: elizabeth Date: Wed, 25 Sep 2024 19:00:00 +0100 Subject: [PATCH] update: add stage --- addictiveColor/script.js | 12 ++++--- portal/index.html | 27 +++++++++++++++ portal/style.css | 73 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 108 insertions(+), 4 deletions(-) create mode 100644 portal/index.html create mode 100644 portal/style.css diff --git a/addictiveColor/script.js b/addictiveColor/script.js index ec5a6b6..604d502 100644 --- a/addictiveColor/script.js +++ b/addictiveColor/script.js @@ -53,10 +53,14 @@ const main = () => { function animateColor (element, id) { id = id || 0; - const rgb = [0, 0, 0]; - // change r,g, and b value to 255 every second - rgb[Math.floor((Date.now() / 1000 + id) % 3)] = 255; - + // const rgb = [0, 0, 0]; + // // change r,g, and b value to 255 every second + // rgb[Math.floor((Date.now() / 1000 + id) % 3)] = 255; + + const r = Math.floor(Math.random() * 255) + 1; + const g = Math.floor(Math.random() * 255) + 1; + const b = Math.floor(Math.random() * 255) + 1; + const rgb = [r, g, b]; element.animate({ offest: 0.5, diff --git a/portal/index.html b/portal/index.html new file mode 100644 index 0000000..7cec95e --- /dev/null +++ b/portal/index.html @@ -0,0 +1,27 @@ + + + + + + + Document + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/portal/style.css b/portal/style.css new file mode 100644 index 0000000..eadadc9 --- /dev/null +++ b/portal/style.css @@ -0,0 +1,73 @@ +article.container { + perspective: 2600px; +} + +.container { + perspective-origin: 50% -1400px; +} + +.stage { + margin: 0 auto; + transform-style: preserve-3d; + transform: rotateY(-45deg); + width: 460px; +} + +.stage div { + position: absolute; + transform-style: preserve-3d; +} + +.stage .back-left { + background-color: #6b522b; + border-left: 6px solid #574625; + border-top: 6px solid #8a683d; + height: 120px; + width: 500px; + transform: rotateY(90deg) translateX(-256px); +} + +.stage .back-right { + background-color: #9c7442; + border-right: 6px solid #78552c; + border-top: 6px solid #b5854a; + height: 120px; + transform: translateX(253px) translateZ(3px); + width: 446px; +} + +.stage .platform-left { + background-color: #bcb3a8; + border-bottom: 6px solid #857964; + height: 220px; + transform: rotateX(90deg) translateY(396px) translateX(253px) translateZ(-13px); + width: 446px; +} +.stage .platform-right { + background-color: #bcb3a8; + border-bottom: 6px solid #847660; + border-right: 6px solid #554c3d; + height: 164px; + transform: rotateX(90deg) translateY(88px) translateX(253px) translateZ(-41px); + width: 446px; +} + +.stage .pit-left { + background-color: #4d4233; + height: 800px; + transform: translate3D(254px, 125px, 285px); + width: 447px; +} +.stage .pit-right { + background-color: #847660; + height: 800px; + + transform: translate3D(254px, 125px, 173px); + width: 451px; +} +.stage .pit-back { + background-color: #6b522b; + height: 220px; + transform: rotateY(90deg) translate3D(-200px, 87px, 168px); + width: 170px; +} \ No newline at end of file