ai/card
ai/card
1
0
Fork 0
Code

Compare commits

base: ai:674e0060fb5fa666037a11fb9af7925b7bb08b7b
Branches Tags
ai:main
..
compare: ai:110e1b2d54f9c29ea4142cb72b3fdc396727a50f
Branches Tags
ai:main

No commits in common. "674e0060fb5fa666037a11fb9af7925b7bb08b7b" and "110e1b2d54f9c29ea4142cb72b3fdc396727a50f" have entirely different histories.
674e0060fb ... 110e1b2d54

2 changed files with 210 additions and 71 deletions
Show Stats Expand all files Collapse all files

2
public

@ -1 +1 @@
Subproject commit 77f615901cfb5d9b07a29c122643192aa3c2b89a Subproject commit abba2f3b7b37e44afeb301f958caf9b39ed19657

279
src/App.vue
View File

@ -63,27 +63,56 @@
<button v-on:click="cardoriginstatus" class="card_origin_status"><span class="icon-ai"></span></button> <button v-if="cards.data.filter((v) => v.skill == '3d' && (v.card >= 0 && v.card <= 14 || v.card == 64))[0]" v-on:click="glb_status = !glb_status" class="unity"><i class="fa-solid fa-cube" id="vrm_button"></i></button> <button v-if="model == true || cards.data.filter((v) => v.skill == 'model').length >= 1" v-on:click="vrmviewer"><i class="fa-solid fa-gamepad"></i></button> <button v-if="game == true" v-on:click="term_status = !term_status"><i class="fa-solid fa-terminal"></i></button> <button v-on:click="cardoriginstatus" class="card_origin_status"><span class="icon-ai"></span></button> <button v-if="cards.data.filter((v) => v.skill == '3d' && (v.card >= 0 && v.card <= 14 || v.card == 64))[0]" v-on:click="glb_status = !glb_status" class="unity"><i class="fa-solid fa-cube" id="vrm_button"></i></button> <button v-if="model == true || cards.data.filter((v) => v.skill == 'model').length >= 1" v-on:click="vrmviewer"><i class="fa-solid fa-gamepad"></i></button> <button v-if="game == true" v-on:click="term_status = !term_status"><i class="fa-solid fa-terminal"></i></button>
</div> </div>
<!--
1st first
2nd second
3rd third
4th fourth
5th fifth
6th sixth
7th seventh
8th eighth
-->
<span class="card-fav" v-if="card_origin_status"> <span class="card-fav" v-if="card_origin_status">
<span class="card-fav" v-for="k in cards.data"> <span class="card-fav" v-for="k in cards.data">
<tr class="card-status-first" v-if="k.status == 'first' || k.status == 'second' || k.status == 'second' || k.status == 'third' || k.status == 'fourth' || k.status == 'fifth' || k.status == 'sixth' || k.status == 'yui'" > <tr class="card-status-first" v-if="k.status == 'first' && k.card !== null" >
<span class="card-wrapper"> <span class="card-wrapper">
<span class="reflection"> <span class="reflection">
<img :src='"/card/card_" + k.card + ".webp"' class="card"> <img :src='"/card/card_" + k.card + ".webp"' class="card">
</span> </span>
<span :class="'card pattern-' + k.status"></span> <span class="card pattern"></span>
<span :class="'card color-' + k.status"></span> <span class="card color"></span>
<span :class="'card highlight-' + k.status"></span> <span class="card highlight"></span>
</span>
</tr>
<tr class="card-status-first" v-else-if="k.status == 'second' && k.card !== null">
<span class="card-wrapper">
<span class="reflection">
<img :src='"/card/card_" + k.card + ".webp"' class="card">
</span>
<span class="card pattern-s"></span>
<span class="card color-s"></span>
<span class="card highlight-s"></span>
</span>
</tr>
<tr class="card-status-first" v-else-if="k.status == 'third' && k.card !== null">
<span class="card-wrapper">
<span class="reflection">
<img :src='"/card/card_" + k.card + ".webp"' class="card">
</span>
<span class="card pattern-t"></span>
<span class="card color-t"></span>
<span class="card highlight-t"></span>
</span>
</tr>
<tr class="card-status-first" v-else-if="k.status == 'fourth' && k.card !== null">
<span class="card-wrapper">
<span class="reflection">
<img :src='"/card/card_" + k.card + ".webp"' class="card">
</span>
<span class="card pattern-f"></span>
<span class="card color-f"></span>
<span class="card highlight-f"></span>
</span>
</tr>
<tr class="card-status-first" v-else-if="k.status == 'yui' && k.card !== null">
<span class="card-wrapper">
<span class="reflection">
<img :src='"/card/card_" + k.card + ".webp"' class="card">
</span>
<span class="card pattern-yui"></span>
<span class="card color-yui"></span>
<span class="card highlight-yui"></span>
</span> </span>
</tr> </tr>
</span> </span>
@ -126,6 +155,10 @@
<iframe :src="'https://term.syui.ai?user=' + username + '&did=' + did + '&id=' + id" allowfullscreen frameborder="0"></iframe> <iframe :src="'https://term.syui.ai?user=' + username + '&did=' + did + '&id=' + id" allowfullscreen frameborder="0"></iframe>
</div> </div>
<!--
first(ファースト) second(セカンド) third(サード) fourth(フォース) fifth(フィフス) sixth(スィクスス) seventh(セヴンス) eighth(エイトス) ninth(ナインス) tenth(テンス) eleventh(イレヴンス) twelfth(トウェルフス) thirteenth(サーティーンス) fifteenth(フィフティーンス) sixteenth(スィクスティーンス) seventeenth(セヴンティーンス) eighteenth(エイティーンス) nineteenth(ナインティーンス) twentieth(トウィンティイス)
-->
<span class="menu-right-top" v-if="cards.data.find((v) => v.card == 43)"> <span class="menu-right-top" v-if="cards.data.find((v) => v.card == 43)">
<button v-on:click="book_user = !book_user">book</button> <button v-on:click="book_user = !book_user">book</button>
</span> </span>
@ -150,16 +183,80 @@
{{ ii = cards.data.find((v) => v.id == user_fav) }} {{ ii = cards.data.find((v) => v.id == user_fav) }}
</span> </span>
<thead v-if="ii.status == 'first' && ii.card !== null" class="card-fav">
<thead v-if="ii.status == 'first' || ii.status == 'second' || ii.status == 'second' || ii.status == 'third' || ii.status == 'fourth' || ii.status == 'fifth' || ii.status == 'sixth' || ii.status == 'yui'" class="card-fav">
<tr class="card-status-first"> <tr class="card-status-first">
<span class="card-wrapper"> <span class="card-wrapper">
<span class="reflection"> <span class="reflection">
<img :src='"/card/card_" + ii.card + ".webp"' class="card"> <img :src='"/card/card_" + ii.card + ".webp"' class="card">
</span> </span>
<span :class="'card pattern-' + ii.status"></span> <span class="card pattern"></span>
<span :class="'card color-' + ii.status"></span> <span class="card color"></span>
<span :class="'card highlight-' + ii.status"></span> <span class="card highlight"></span>
</span>
</tr>
</thead>
<thead v-else-if="ii.status == 'second' && ii.card !== null" class="card-fav">
<tr class="card-status-first">
<span class="card-wrapper">
<span class="reflection">
<img :src='"/card/card_" + ii.card + ".webp"' class="card">
</span>
<span class="card pattern-s"></span>
<span class="card color-s"></span>
<span class="card highlight-s"></span>
</span>
</tr>
</thead>
<thead v-else-if="ii.status == 'third' && ii.card !== null" class="card-fav">
<tr class="card-status-first">
<span class="card-wrapper">
<span class="reflection">
<img :src='"/card/card_" + ii.card + ".webp"' class="card">
</span>
<span class="card pattern-t"></span>
<span class="card color-t"></span>
<span class="card highlight-t"></span>
</span>
</tr>
</thead>
<thead v-else-if="ii.status == 'yui' && ii.card !== null" class="card-fav">
<tr class="card-status-first">
<span class="card-wrapper">
<span class="reflection">
<img :src='"/card/card_" + ii.card + ".webp"' class="card">
</span>
<span class="card pattern-yui"></span>
<span class="card color-yui"></span>
<span class="card highlight-yui"></span>
</span>
</tr>
</thead>
<thead v-else-if="ii.status == 'fourth' && ii.card !== null" class="card-fav">
<tr class="card-status-first">
<span class="card-wrapper">
<span class="reflection">
<img :src='"/card/card_" + ii.card + ".webp"' class="card">
</span>
<span class="card pattern-f"></span>
<span class="card color-f"></span>
<span class="card highlight-f"></span>
</span>
</tr>
</thead>
<thead v-else-if="ii.status == 'fifth' && ii.card !== null" class="card-fav">
<tr class="card-status-first">
<span class="card-wrapper">
<span class="reflection">
<img :src='"/card/card_" + ii.card + ".webp"' class="card">
</span>
<span class="card pattern-fifth"></span>
<span class="card color-fifth"></span>
<span class="card highlight-fifth"></span>
</span> </span>
</tr> </tr>
</thead> </thead>
@ -1278,6 +1375,60 @@ span.card-fav-su {
display:none; display:none;
} }
span.pattern-s {
background: repeating-radial-gradient(circle at -150% -25%, #000, #777 3px, #000 3px);
background-position: 50% 50%;
background-size: 120% 120%;
mix-blend-mode: color-dodge;
opacity: 0.3;
}
span.color-s {
background: linear-gradient(115deg, transparent 20%, #000 30%, transparent 48% 52%, #000 70%, transparent);
background-position: 50% 50%;
background-size: 200% 200%;
mix-blend-mode: overlay;
}
span.card-wrapper:hover > span.pattern-s {
background-position: calc(50% + (var(--ratio-x) * -50%)) calc(50% + (var(--ratio-y) * -50%));
}
span.card-wrapper:hover > span.color-s {
background-position: calc(50% + (var(--ratio-x) * -50%)) calc(50% + (var(--ratio-y) * -50%));
}
span.card-wrapper:hover > span.highlight-s {
background-repeat: no-repeat;
}
span.pattern-t {
background: repeating-radial-gradient(circle at -150% -25%, #c71585, #777 3px, #ffff00 3px);
background-position: 50% 50%;
background-size: 120% 120%;
mix-blend-mode: color-dodge;
opacity: 0.3;
}
span.color-t {
background: linear-gradient(115deg, transparent 20%, #c71585 30%, transparent 48% 52%, #c71585 70%, transparent);
background-position: 50% 50%;
background-size: 200% 200%;
mix-blend-mode: overlay;
}
span.card-wrapper:hover > span.pattern-t {
background-position: calc(50% + (var(--ratio-x) * -50%)) calc(50% + (var(--ratio-y) * -50%));
}
span.card-wrapper:hover > span.color-t {
background-position: calc(50% + (var(--ratio-x) * -50%)) calc(50% + (var(--ratio-y) * -50%));
}
span.card-wrapper:hover > span.highlight-t {
background-repeat: no-repeat;
}
span.pattern-yui { span.pattern-yui {
background: repeating-radial-gradient(circle at -150% -25%, #ffff00, #000 3px, #ffff00 3px); background: repeating-radial-gradient(circle at -150% -25%, #ffff00, #000 3px, #ffff00 3px);
background-position: 50% 50%; background-position: 50% 50%;
@ -1293,7 +1444,19 @@ span.color-yui {
mix-blend-mode: overlay; mix-blend-mode: overlay;
} }
span.pattern-first { span.card-wrapper:hover > span.pattern-yui {
background-position: calc(50% + (var(--ratio-x) * -50%)) calc(50% + (var(--ratio-y) * -50%));
}
span.card-wrapper:hover > span.color-yui {
background-position: calc(50% + (var(--ratio-x) * -50%)) calc(50% + (var(--ratio-y) * -50%));
}
span.card-wrapper:hover > span.highlight-yui {
background-repeat: no-repeat;
}
span.pattern-f {
background: repeating-radial-gradient(circle at -150% -25%, #000, #32cd32 3px, #1e90ff 3px); background: repeating-radial-gradient(circle at -150% -25%, #000, #32cd32 3px, #1e90ff 3px);
background-position: 50% 50%; background-position: 50% 50%;
background-size: 120% 120%; background-size: 120% 120%;
@ -1301,56 +1464,19 @@ span.pattern-first {
opacity: 0.3; opacity: 0.3;
} }
span.color-first { span.color-f {
background: linear-gradient(115deg, transparent 20%, #00ffff 30%, transparent 48% 52%, #40e0d0 70%, transparent); background: linear-gradient(115deg, transparent 20%, #00ffff 30%, transparent 48% 52%, #40e0d0 70%, transparent);
background-position: 50% 50%; background-position: 50% 50%;
background-size: 200% 200%; background-size: 200% 200%;
mix-blend-mode: overlay; mix-blend-mode: overlay;
} }
span.pattern-second { span.card-wrapper:hover > span.pattern-f {
background: repeating-radial-gradient(circle at -150% -25%, #000, #777 3px, #000 3px); background-position: calc(50% + (var(--ratio-x) * -50%)) calc(50% + (var(--ratio-y) * -50%));
background-position: 50% 50%;
background-size: 120% 120%;
mix-blend-mode: color-dodge;
opacity: 0.3;
} }
span.color-second { span.card-wrapper:hover > span.color-f {
background: linear-gradient(115deg, transparent 20%, #000 30%, transparent 48% 52%, #000 70%, transparent); background-position: calc(50% + (var(--ratio-x) * -50%)) calc(50% + (var(--ratio-y) * -50%));
background-position: 50% 50%;
background-size: 200% 200%;
mix-blend-mode: overlay;
}
span.pattern-third {
background: repeating-radial-gradient(circle at -150% -25%, #c71585, #777 3px, #ffff00 3px);
background-position: 50% 50%;
background-size: 120% 120%;
mix-blend-mode: color-dodge;
opacity: 0.3;
}
span.color-third {
background: linear-gradient(115deg, transparent 20%, #c71585 30%, transparent 48% 52%, #c71585 70%, transparent);
background-position: 50% 50%;
background-size: 200% 200%;
mix-blend-mode: overlay;
}
span.pattern-fourth {
background: repeating-radial-gradient(circle at -150% -25%, #fff, #777 3px, #fff 3px);
background-position: 50% 50%;
background-size: 120% 120%;
mix-blend-mode: color-dodge;
opacity: 0.3;
}
span.color-fourth {
background: linear-gradient(115deg, transparent 20%, #40A4BF 30%, transparent 48% 52%, #404FBF 70%, transparent);
background-position: 50% 50%;
background-size: 200% 200%;
mix-blend-mode: overlay;
} }
span.pattern-fifth { span.pattern-fifth {
@ -1368,30 +1494,43 @@ span.color-fifth {
mix-blend-mode: overlay; mix-blend-mode: overlay;
} }
span.pattern-sixth { span.card-wrapper:hover > span.pattern-fifth {
background: repeating-radial-gradient(circle at center, #f1f1f1, #313131 3px, #fff700 3px); background-position: calc(50% + (var(--ratio-x) * -50%)) calc(50% + (var(--ratio-y) * -50%));
}
span.card-wrapper:hover > span.color-fifth {
background-position: calc(50% + (var(--ratio-x) * -50%)) calc(50% + (var(--ratio-y) * -50%));
}
span.card-wrapper:hover > span.highlight-yui {
background-repeat: no-repeat;
}
span.pattern {
background: repeating-radial-gradient(circle at -150% -25%, #fff, #777 3px, #fff 3px);
background-position: 50% 50%; background-position: 50% 50%;
background-size: 120% 120%; background-size: 120% 120%;
mix-blend-mode: color-dodge; mix-blend-mode: color-dodge;
opacity: 0.3; opacity: 0.3;
} }
span.color-sixth { span.color {
background: linear-gradient(115deg, transparent 20%, #f1f1f1 30%, transparent 48% 52%, #313131 70%, transparent); background: linear-gradient(115deg, transparent 20%, #40A4BF 30%, transparent 48% 52%, #404FBF 70%, transparent);
background-position: 50% 50%; background-position: 50% 50%;
background-size: 200% 200%; background-size: 200% 200%;
mix-blend-mode: overlay; mix-blend-mode: overlay;
} }
span.card-wrapper:hover > span.pattern-yui,span.card-wrapper:hover > span.pattern-first,span.card-wrapper:hover > span.pattern-second,span.card-wrapper:hover > span.pattern-third,span.card-wrapper:hover > span.pattern-fourth,span.card-wrapper:hover > span.pattern-fifth,span.card-wrapper:hover > span.pattern-sixth { span.card-wrapper:hover > span.pattern {
background-position: calc(50% + (var(--ratio-x) * -50%)) calc(50% + (var(--ratio-y) * -50%)); background-position: calc(50% + (var(--ratio-x) * -50%)) calc(50% + (var(--ratio-y) * -50%));
} }
span.card-wrapper:hover > span.color-yui,span.card-wrapper:hover > span.color-first,span.card-wrapper:hover > span.color-second,span.card-wrapper:hover > span.color-third,span.card-wrapper:hover > span.color-fourth,span.card-wrapper:hover > span.color-fifth,span.card-wrapper:hover > span.color-sixth { span.card-wrapper:hover > span.color {
background-position: calc(50% + (var(--ratio-x) * -50%)) calc(50% + (var(--ratio-y) * -50%)); background-position: calc(50% + (var(--ratio-x) * -50%)) calc(50% + (var(--ratio-y) * -50%));
} }
span.card-wrapper:hover > span.highlight-yui,span.card-wrapper:hover > span.highlight-first,span.card-wrapper:hover > span.highlight-second,span.card-wrapper:hover > span.highlight-third,span.card-wrapper:hover > span.highlight-fourth,span.card-wrapper:hover > span.highlight-fifth,span.card-wrapper:hover > span.highlight-sixth { span.card-wrapper:hover > span.highlight {
background: radial-gradient(circle at calc(var(--ratio-x) * 100%) calc(var(--ratio-y) * 100%), hsl(0 0% 100% / 0.2), transparent 50%);
background-repeat: no-repeat; background-repeat: no-repeat;
} }