[+] About page

bun.lock

@@ -28,6 +28,8 @@
       "devDependencies": {
         "@eslint/compat": "^1.4.0",
         "@eslint/js": "^9.38.0",
+        "@fontsource/darumadrop-one": "^5.2.8",
+        "@iconify-json/mdi": "^1.2.3",
         "@sveltejs/adapter-auto": "^7.0.0",
         "@sveltejs/kit": "^2.47.1",
         "@sveltejs/vite-plugin-svelte": "^6.2.1",
@@ -144,6 +146,8 @@
 
     "@eslint/plugin-kit": ["@eslint/plugin-kit@0.4.1", "", { "dependencies": { "@eslint/core": "^0.17.0", "levn": "^0.4.1" } }, "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA=="],
 
+    "@fontsource/darumadrop-one": ["@fontsource/darumadrop-one@5.2.8", "", {}, "sha512-pN0RVFzd3cCpG3cQOeFLDZJ/2W/HMQR9KtCNhwHOMhEndsSiR1Dnk0e1qj/v8xzVTu+Q3/ZyTc0sYvIDj3z36A=="],
+
     "@fontsource/roboto": ["@fontsource/roboto@5.2.8", "", {}, "sha512-oh9g4Cg3loVMz9MWeKWfDI+ooxxG1aRVetkiKIb2ESS2rrryGecQ/y4pAj4z5A5ebyw450dYRi/c4k/I3UBhHA=="],
 
     "@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="],
@@ -156,6 +160,8 @@
 
     "@iconify-json/material-symbols": ["@iconify-json/material-symbols@1.2.46", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-cNWdSAa5Z3f0TlqdCt28rmeYWGKwe68J1ORdyHyqC4D6H7CWiVKBJXV3TDTocOQVDO372bz+cmsFeo4+pbRy+A=="],
 
+    "@iconify-json/mdi": ["@iconify-json/mdi@1.2.3", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-O3cLwbDOK7NNDf2ihaQOH5F9JglnulNDFV7WprU2dSoZu3h3cWH//h74uQAB87brHmvFVxIOkuBX2sZSzYhScg=="],
+
     "@iconify-json/svg-spinners": ["@iconify-json/svg-spinners@1.2.4", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-ayn0pogFPwJA1WFZpDnoq9/hjDxN+keeCMyThaX4d3gSJ3y0mdKUxIA/b1YXWGtY9wVtZmxwcvOIeEieG4+JNg=="],
 
     "@iconify/types": ["@iconify/types@2.0.0", "", {}, "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="],

package.json

@@ -15,6 +15,8 @@
 	"devDependencies": {
 		"@eslint/compat": "^1.4.0",
 		"@eslint/js": "^9.38.0",
+		"@fontsource/darumadrop-one": "^5.2.8",
+		"@iconify-json/mdi": "^1.2.3",
 		"@sveltejs/adapter-auto": "^7.0.0",
 		"@sveltejs/kit": "^2.47.1",
 		"@sveltejs/vite-plugin-svelte": "^6.2.1",

src/lib/ui/appbar/AppBar.svelte

@@ -8,19 +8,20 @@
     onclick: () => void
   }
 
-  let { title, sub, account, right, children, moreIcon }: {
+  let { title, sub, account, right, children, moreIcon, gradient }: {
     title?: string
     sub?: string
     account?: () => void
     right?: Icon[]
     children?: any
     moreIcon?: string
+    gradient?: boolean
   } = $props()
 
   let showMenu = $state(false)
 </script>
 
-<div class="hbox h-64px">
+<div class="hbox h-64px" class:appbar-gradient={gradient}>
   {#if account}
     <IconButton icon="i-material-symbols:account-circle" onclick={account} aria-label="Account" />
   {:else}
@@ -51,3 +52,14 @@
     </div>
   </div>
 {/if}
+
+<style lang="sass">
+  .appbar-gradient
+    background: linear-gradient(180deg, rgba(var(--m3-scheme-surface) / 1), transparent)
+    z-index: 100
+  @media (prefers-color-scheme: dark)
+    .appbar-gradient
+      background: linear-gradient(180deg, rgba(var(--m3-scheme-surface) / 0.2), transparent)
+      // background: none
+      // mix-blend-mode: overlay
+</style>

src/routes/about/+page.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+  import AppBar from "$lib/ui/appbar/AppBar.svelte"
+  import Button from "$lib/ui/Button.svelte"
+  import "@fontsource/darumadrop-one"
+
+  // Generate 20 random lines of hiragana
+  const hiragana = "あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん"
+  function genRandomLines() {
+    const lines = []
+    for (let i = 0; i < 20; i++) {
+      lines.push(hiragana.split('').sort(() => Math.random() - 0.5).join(''))
+    }
+    return lines
+  }
+
+  const randomLines = genRandomLines()
+  const spinningMics = 10
+</script>
+
+<AppBar title="About" right={[
+  {
+    icon: 'i-mdi:github',
+    onclick: () => window.open('https://github.com/MaigoLabs/amaoke.app', '_blank')
+  }
+]} gradient></AppBar>
+
+<!-- <div class="gradient2"></div> -->
+
+<div class="cbox vbox overflow-hidden! absolute inset-0">
+  <div class="gradient1"></div>
+  <div class="gradient2"></div>
+  <div class="vbox justify-center items-center text-center relative z-10">
+    <div class="cbox absolute inset-0 z-5">
+      <div class="size-360px rounded-full opacity-70 gradient-center"></div>
+    </div>
+    <div class="z-10">
+      <div class="app-name text-32px">アマオケ</div>
+      <div class="m3-font-body-medium mfg-on-surface-variant">FOSS 1.0.0</div>
+      <div class="m3-font-body-medium mfg-on-surface">
+        Made with ♥ and 🔮 by <br>
+        <a href="https://maigo.dev" target="_blank" class="mfg-primary">MaigoLabs</a> 2025
+      </div>
+    </div>
+    <div class="cbox absolute inset-0 z-5 spin-circle opacity-50 pointer-events-none">
+      {#each Array(spinningMics) as _, i}
+        <div class="size-300px rounded-full absolute" style:transform={`rotate(${i * 360 / spinningMics}deg)`}>
+          <div class="rotate--140 text-24px">🎤</div>
+        </div>
+      {/each}
+    </div>
+  </div>
+  <!-- <div class="h-64px w-full"> </div> -->
+  <div class="vbox absolute overflow-hidden">
+    {#each randomLines as line}
+      <div class="mfg-on-surface mix-blend-color-burn opacity-07 truncate text-48px rotate--15 pointer-events-none line-height-64px tracking-8px kana-line">{line}</div>
+    {/each}
+  </div>
+</div>
+
+<!-- <div class="p-content py-16px">
+  <Button big href="https://github.com/MaigoLabs/amaoke.app">GitHub</Button>
+</div> -->
+
+<style lang="sass">
+  
+// @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Darumadrop+One&family=Hachi+Maru+Pop&family=Kiwi+Maru&family=Livvic:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,900&family=M+PLUS+Rounded+1c&family=Quicksand:wght@300..700&family=Rampart+One&family=Stick&family=Yuji+Boku&family=Zen+Maru+Gothic&display=swap')
+
+.app-name
+  // font-family: "Yuji Boku"
+  font-family: "Darumadrop One"
+  font-size: 48px
+
+.gradient1,.gradient2
+  --size: calc(max(100vw, 100vh) * 1.5) 
+  position: absolute
+  width: 200vw
+  height: 200vh
+  border-radius: 50%
+
+.gradient1
+  // Radial gradient from D9C5F7 100% to FFFFFF 0%
+  background: radial-gradient(50% 50%, rgba(217,197,247,1), rgba(255,255,255,0))
+  bottom: 0
+  left: 0
+
+.gradient2
+  // Radial gradient from F7C5C5 100% to FFFFFF 0%
+  background: radial-gradient(50% 50%, rgba(247,197,197,1), rgba(255,255,255,0))
+  right: 0
+  top: 0
+
+.gradient-center
+  background: radial-gradient(50% 50%, rgba(255,255,255,1), rgba(255,255,255,0))
+
+@media (prefers-color-scheme: dark)
+  .gradient-center
+    background: radial-gradient(50% 50%, rgba(0,0,0,1), rgba(0,0,0,0))
+    opacity: 0.1
+
+  .kana-line
+    opacity: 0.2
+
+.spin-circle
+  animation: spin 30s linear infinite
+
+@keyframes spin
+  from
+    transform: rotate(360deg)
+  to
+    transform: rotate(0deg)
+</style>