feat: BRAND-NEW OSCAR Node #5

packages/frontend/assets/oscar/LICENSE_OSCAR_BRANDING

@@ -0,0 +1,16 @@
+LICENSE
+-------
+
+Copyright (c) by 도록 (@DK_DK42)
+
+- entrance-1.png
+- entrance-2.png
+- entrance-3.png
+
+위 3개의 파일은 도록 (@DK_DK42) 님의 창작물로, 저작권으로 보호됩니다.
+
+OSCAR Node #4 및 oscar.surf, オスカー。의 자체 캐릭터 디자인이 포함되어 있으며, 사전 승인 없는 무단 재배포, 재사용, 변조, 수정 등은 엄격히 금지됩니다.
+
+위 사항을 위반할 경우 저작권법에 의해 법적 처벌을 받을 수 있음을 유념해주시기 바랍니다.
+
+본 코드를 이용하시는 경우, 해당 애셋을 제거하실 것을 권장드리는 바입니다.

packages/frontend/src/components/MkFeaturedPhotos.vue

@@ -4,11 +4,19 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div v-if="instance" :class="$style.root" :style="{ backgroundImage: `url(${ instance.backgroundImageUrl })` }"></div>
+<div v-if="instance && !special" :class="$style.root" :style="{ backgroundImage: `url(${ instance.backgroundImageUrl })` }"></div>
+<div v-else-if="instance && special" :class="$style.root" :style="{ backgroundImage: `url(${ entranceBackground })` }"></div>
 </template>
 
 <script lang="ts" setup>
 import { instance } from '@/instance.js';
+import entranceBackground from '/client-assets/oscar/entrance-3.png';
+
+const props = withDefaults(defineProps<{
+	special: boolean;
+}>(), {
+	special: false,
+});
 </script>
 
 <style lang="scss" module>

packages/frontend/src/pages/welcome.entrance.a.vue

@@ -41,7 +41,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import XTimeline from './welcome.timeline.vue';
-import MarqueeText from '@/components/MkMarquee.vue';
+// import MarqueeText from '@/components/MkMarquee.vue';
 import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
 import misskeysvg from '/client-assets/misskey.svg';
 import { misskeyApiGet } from '@/scripts/misskey-api.js';

packages/frontend/src/pages/welcome.entrance.special.vue

@@ -5,14 +5,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div v-if="meta" class="rsqzvsbo">
-	<MkFeaturedPhotos class="bg"/>
+	<MkFeaturedPhotos class="bg" special/>
 	<XTimeline class="tl"/>
+	<img :src="entranceTide" class="extra-1"/>
 	<div class="shape1"></div>
 	<div class="shape2"></div>
-	<img class="extra-2" src="/client-assets/entrance-extra-2.png"/>
+	<img :src="entranceBackground" class="extra-2"/>
-	<img class="extra-1" src="/client-assets/entrance-extra-1.png"/>
+	<img :src="entranceCharacter" class="extra-1"/>
 	<div class="logo-wrapper">
-		<img src="/client-assets/entrance-extra-3.png" class="misskey"/>
+		<div class="powered-by">Powered by</div>
+		<img :src="misskeysvg" class="misskey"/>
 	</div>
 	<div class="emojis">
 		<MkEmoji :normal="true" :noStyle="true" emoji="👍"/>
@@ -24,15 +26,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div class="contents">
 		<MkVisitorDashboard/>
 	</div>
+	<!--
 	<div v-if="instances && instances.length > 0" class="federation">
 		<MarqueeText :duration="40">
 			<MkA v-for="instance in instances" :key="instance.id" :class="$style.federationInstance" :to="`/instance-info/${instance.host}`" behavior="window">
-				<!--<MkInstanceCardMini :instance="instance"/>-->
+				<MkInstanceCardMini :instance="instance"/>
 				<img v-if="instance.iconUrl" class="icon" :src="getInstanceIcon(instance)" alt=""/>
 				<span class="name _monospace">{{ instance.host }}</span>
 			</MkA>
 		</MarqueeText>
 	</div>
+	-->
 </div>
 </template>
 
@@ -40,12 +44,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import XTimeline from './welcome.timeline.vue';
-import MarqueeText from '@/components/MkMarquee.vue';
+// import MarqueeText from '@/components/MkMarquee.vue';
 import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
 import { misskeyApiGet } from '@/scripts/misskey-api.js';
 import MkVisitorDashboard from '@/components/MkVisitorDashboard.vue';
 import { getProxiedImageUrl } from '@/scripts/media-proxy.js';
 import { instance as meta } from '@/instance.js';
+import misskeysvg from '/client-assets/misskey.svg';
+import entranceCharacter from '/client-assets/oscar/entrance-1.png';
+import entranceTide from '/client-assets/oscar/entrance-2.png';
+import entranceBackground from '/client-assets/oscar/entrance-3.png';
 
 const instances = ref<Misskey.entities.FederationInstance[]>();
 
@@ -126,7 +134,7 @@ misskeyApiGet('federation/instances', {
 		}
 
 		> .misskey {
-			width: 240px;
+			width: 140px;
 			@media (max-width: 450px) {
 				width: 130px;
 			}
@@ -196,13 +204,13 @@ misskeyApiGet('federation/instances', {
 	bottom: 0;
 	left: 0;
 	width: 100vw;
-	height: 90vh;
+	height: 95vh;
 	object-fit: contain;
 	pointer-events: none;
 
 	@media (max-width: 1200px) {
 		width: auto;
-		height: 70vh;
+		height: 80vh;
 		left: auto;
 		right: 0;
 	}

packages/frontend/src/pages/welcome.vue

@@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import XSetup from './welcome.setup.vue';
-import XEntrance from './welcome.entrance.a.vue';
+import XEntrance from './welcome.entrance.special.vue';
 import { instanceName } from '@/config.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { fetchInstance } from '@/instance.js';