add visuals & design page

2025-09-11 19:10:54 +02:00
parent 250ed0c84a
commit 116d15d1ce
26 changed files with 376 additions and 12 deletions
--- a/app/components/gameBox.vue
+++ b/app/components/gameBox.vue
@@ -0,0 +1,126 @@
+<template>
+  <div class="w-96 m-6">
+    <atropos-component class="atropos game-box atropos-rotate-touch-scroll-y" rotate-touch="scroll-y" rotate-x-max="24"
+      rotate-y-max="24">
+
+      <div class="atropos-inner relative">
+        <div class="game-box-bg bg-gradient-to-t from-slate-800 to-zinc-900 h-96 relative" data-atropos-offset="-8" />
+        <img :src="id + '/object.png'" data-atropos-offset="-3" class="absolute bottom-0 inset-0 h-96 object-cover">
+        <img :src="id + '/name.png'" data-atropos-offset="0" class="absolute inset-0 self-end justify-self-end p-4">
+        <img src="/logo.svg" data-atropos-offset="0" width="70%"
+          class="logo absolute inset-0 self-center justify-self-center">
+        <!-- <img src="/play.svg" width="20%" class="absolute play"> -->
+      </div>
+      <span class="game-box-t" />
+      <span class="game-box-r" />
+      <span class="game-box-b" />
+      <span class="game-box-l" />
+    </atropos-component>
+  </div>
+</template>
+
+<script setup>
+const id = 'ES01A'
+</script>
+
+<style>
+.game-box .logo {
+  filter: drop-shadow(4px 4px 0 rgb(0 0 0 / 0.8));
+}
+
+.game-box {
+  --side-color: #004297;
+  --side-size: 32px;
+  aspect-ratio: 526 / 656;
+}
+
+.atropos-rotate {
+  position: relative;
+}
+
+.game-box .atropos-rotate:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: calc(100% + 8px);
+  height: calc(100% + 16px);
+  top: -8px;
+  background: #086ef4;
+  z-index: 1;
+}
+
+.atropos-inner {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  transform-style: preserve-3d;
+  transform: translateZ(0);
+  display: block;
+  z-index: 1;
+  position: relative;
+}
+
+.game-box-t,
+.game-box-r,
+.game-box-b,
+.game-box-l {
+  transform-style: preserve-3d;
+  backface-visibility: hidden;
+  position: absolute;
+  /* display: none; */
+}
+
+.game-box-t {
+  width: calc(100% + 8px);
+  height: var(--side-size);
+  background: var(--side-color);
+  left: 0;
+  top: -8px;
+  transform: translate3d(0, 0, -32px) rotateX(90deg);
+  transform-origin: center top;
+  top: -8px;
+  transform: translateZ(-32px) rotateX(90deg);
+  transform-origin: center top;
+}
+
+.game-box-b {
+  width: calc(100% + 8px);
+  height: var(--side-size);
+  background: var(--side-color);
+  left: 0;
+  bottom: -8px;
+  transform: translate3d(0, 0, -32px) rotateX(-90deg);
+  transform-origin: center bottom;
+}
+
+.game-box-r {
+  width: var(--side-size);
+  height: calc(100% + 16px);
+  background: var(--side-color);
+  right: -8px;
+  top: -8px;
+  transform: translate3d(0, 0, -32px) rotateY(90deg);
+  transform-origin: right center;
+}
+
+.game-box-l {
+  width: var(--side-size);
+  height: calc(100% + 16px);
+  background: var(--side-color);
+  left: 0px;
+  top: -8px;
+  transform: translate3d(0, 0, -32px) rotateY(-90deg);
+  transform-origin: left center;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 10.4%;
+    background: #a5a5a5;
+    left: 0;
+    top: 9px;
+  }
+}
+</style>