commit 0601f946c8e4c66270fee8d997fa312de6816b93
parent 98985aebfdf5f33de226c9d219e92eb764fc176e
Author: Sunny <122193933+Sunny-JP@users.noreply.github.com>
Date: Fri, 21 Mar 2025 13:23:33 +0900
Dev 7 (#19)
* adjust player style
* add screensaver
* adjust albumlist
* add contants of enquiries
* move a message
Diffstat:
6 files changed, 115 insertions(+), 11 deletions(-)
diff --git a/src/App.vue b/src/App.vue
@@ -1,6 +1,8 @@
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import Player from "./components/Player.vue";
+import { screenSaver } from "./screen-saver";
+
const MenuButton = ref(false);
const closeMenu = (event: Event) => {
@@ -12,6 +14,7 @@ const closeMenu = (event: Event) => {
onMounted(() => {
window.addEventListener("click", closeMenu);
+ screenSaver();
});
onBeforeUnmount(() => {
@@ -43,6 +46,8 @@ onBeforeUnmount(() => {
</div>
</nav>
</header>
+ <div id="screenSaver" class="screen-saver">
+ </div>
<router-view />
<Player/>
</template>
diff --git a/src/components/About.vue b/src/components/About.vue
@@ -1,5 +1,6 @@
<template>
<div class="page">
<h1>About</h1>
+ 曲タイトルをクリックするとPlayer表示を切り替えられるよ
</div>
</template>
\ No newline at end of file
diff --git a/src/components/AlbumList.vue b/src/components/AlbumList.vue
@@ -14,23 +14,48 @@ function add_play_album(albumIndex: number) {
<template>
<div class="page">
<h1>Album List</h1>
- 曲タイトルをクリックするとPlayer表示を切り替えられるよ
- <div v-for="(AlbumList, index) in AlbumList">
- <button
- v-on:click="add_play_album(index)" class="button_album">
- <img :src=AlbumList.albumArt alt="" sizes="" srcset="">
- AlbumTitle: {{ AlbumList.albumTitle.ja }}
- </button>
+ <div class="album-container">
+ <div v-for="(AlbumList, index) in AlbumList">
+ <button
+ v-on:click="add_play_album(index)" class="button_album">
+ <img :src=AlbumList.albumArt alt="" sizes="" srcset="">
+ <div class="album-title">{{ AlbumList.albumTitle.ja }}</div>
+ </button>
+ </div>
</div>
</div>
</template>
<style scoped>
+.album-container {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: clamp(1px, 1vw, 10px);
+}
+
.button_album {
- background: #4c4c4c;
+ font-family: "Poppins", "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
+ font-size: clamp(1.5px, calc(3vw - 1px), 15px);
+ background: #000000;
color: #ffffff;
- border: none;
+ border: #404040 solid 2px;
padding: 5px;
+ width: 30vw;
+ max-width: 200px;
cursor: pointer;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.button_album img {
+ width: 100%;
+ height: auto;
+}
+
+.album-title {
+ margin-top: 5px;
+ text-align: center;
}
</style>
\ No newline at end of file
diff --git a/src/components/Enquiries.vue b/src/components/Enquiries.vue
@@ -1,5 +1,15 @@
<template>
<div class="page">
<h1>お問い合わせ</h1>
+ <!-- URLは仮のものです -->
+ <iframe class="enquiries" src="https://docs.google.com/forms/d/e/1FAIpQLSd8s1R7Tvz4ZuguqhmZS0cUHpLHmm1DJus-pwVr6LR0XYRJMA/viewform?embedded=true">読み込んでいます…</iframe>
</div>
-</template>-
\ No newline at end of file
+</template>
+
+<style scoped>
+.enquiries {
+ width: calc(100vw - 35px);
+ height: 75vh;
+ border: none;
+}
+</style>+
\ No newline at end of file
diff --git a/src/screen-saver.ts b/src/screen-saver.ts
@@ -0,0 +1,39 @@
+export function screenSaver(): void {
+ let screenSaverTimeout: ReturnType<typeof setTimeout> | undefined;
+ const screenSaverElement = document.getElementById('screenSaver') as HTMLElement | null;
+
+ // No-operation standby time
+ const INACTIVITY_TIME = 60000; // ms
+
+ // Show screensaver
+ function showScreenSaver(): void {
+ if (screenSaverElement) {
+ screenSaverElement.style.display = 'flex';
+ }
+ }
+
+ // Hide screensaver
+ function hideScreenSaver(): void {
+ if (screenSaverElement) {
+ screenSaverElement.style.display = 'none';
+ }
+ }
+
+ // Detects user operation and resets timer
+ function resetInactivityTimer(): void {
+ hideScreenSaver();
+ if (screenSaverTimeout) {
+ clearTimeout(screenSaverTimeout);
+ }
+ screenSaverTimeout = setTimeout(showScreenSaver, INACTIVITY_TIME);
+ }
+
+ // Monitoring user operation events
+ window.addEventListener('mousemove', resetInactivityTimer);
+ window.addEventListener('keydown', resetInactivityTimer);
+ window.addEventListener('click', resetInactivityTimer);
+ window.addEventListener('scroll', resetInactivityTimer);
+
+ // Initial timer setting
+ resetInactivityTimer();
+}
diff --git a/src/style.css b/src/style.css
@@ -166,4 +166,28 @@ body {
max-width: 500px;
height: 100%;
aspect-ratio: 1/1;
+}
+
+
+/* screen saver */
+.screen-saver {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.66);
+ z-index: 9999;
+ display: none;
+ animation: screenSaverAnm 2s ease forwards;
+}
+
+@keyframes screenSaverAnm {
+ 0% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ }
}
\ No newline at end of file
