valere/evilspins
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

add visuals & design page
All checks were successful
Deploy App / deploy (push) Successful in 1m27s
Details

Browse Source
This commit is contained in:
valere
2025-09-11 19:10:54 +02:00
parent 250ed0c84a
commit 116d15d1ce
26 changed files with 376 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
app/components/theObject.vue Normal file
View File

@@ -0,0 +1,103 @@
<template>
<h1 class="flex items-center justify-center min-h-screen">
<atropos-component class="my-atropos">
<span class="game-box-t" />
<span class="game-box-r" />
<span class="game-box-b" />
<span class="game-box-l" />
<div class="game-box-bg bg-gradient-to-t from-slate-800 to-zinc-900 h-60" data-atropos-offset="-8" />
<img :src="id + '/object.png'" data-atropos-offset="-3" class="absolute inset-0 object-cover">
<img :src="id + '/name.png'" data-atropos-offset="0" class="absolute inset-0 object-cover">
<img src="/logo.svg" data-atropos-offset="0" width="70%" class="logo absolute inset-0">
<img src="/play.svg" width="20%" class="absolute play">
</atropos-component>
</h1>
</template>
<script setup>
const id = 'ES01A'
</script>
<style>
/* .atropos-inner,
.game-box-bg {
width: 300px;
height: 300px;
} */
.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;
}
.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;
}
}
.atropos-rotate {
position: relative;
}
.atropos-rotate:before {
content: "";
position: absolute;
left: 0;
width: calc(100% + 8px);
height: calc(100% + 16px);
top: -8px;
background: #086ef4;
z-index: 1;
}
</style>