diff --git a/public/audio/ice.mp3 b/public/audio/ice.mp3 new file mode 100644 index 0000000..e80848b Binary files /dev/null and b/public/audio/ice.mp3 differ diff --git a/public/images/cocktail-glass-empty.svg b/public/images/cocktail-glass-empty.svg new file mode 100644 index 0000000..11bef5f --- /dev/null +++ b/public/images/cocktail-glass-empty.svg @@ -0,0 +1,168 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/cocktail-glass.svg b/public/images/cocktail-glass.svg index 11bef5f..87c73f3 100644 --- a/public/images/cocktail-glass.svg +++ b/public/images/cocktail-glass.svg @@ -117,28 +117,28 @@ diff --git a/src/components/CreateMessageTop.tsx b/src/components/CreateMessageTop.tsx index f6f9b85..e85fe32 100644 --- a/src/components/CreateMessageTop.tsx +++ b/src/components/CreateMessageTop.tsx @@ -1,6 +1,19 @@ -import { css } from "@hono/hono/css"; +import { css, keyframes } from "@hono/hono/css"; import { WithHTML } from "../layout/WithHTML.tsx"; +const fadeIn = keyframes` + from { + opacity: 0; + } + to{ + opacity: 1; + } +`; + +const fadeAnimation = css` + animation: ${fadeIn} 3s forwards; +`; + const imageStyle = css` height: 85vh; display: flex; @@ -34,9 +47,19 @@ const buttonStyle = css` export const CreateMessageTop = () => { return ( -
+
+
- empty glass + empty glass
diff --git a/src/components/router.tsx b/src/components/router.tsx index 746c7ba..5da4f50 100644 --- a/src/components/router.tsx +++ b/src/components/router.tsx @@ -1,4 +1,6 @@ import { Hono } from "@hono/hono"; + +import { Home } from "../pages/Home.tsx"; import { CreateMessageTop } from "./CreateMessageTop.tsx"; import { CreateMessageSelect } from "./CreateMessageSelect.tsx"; import { CreateMessageCheck } from "./CreateMessageCheck.tsx"; @@ -10,6 +12,7 @@ import { CreateMessageCheck } from "./CreateMessageCheck.tsx"; export const createMessage = new Hono(); createMessage - .get("/", (ctx) => ctx.html()) + .get("/", (ctx) => ctx.html()) + .get("/create", (ctx) => ctx.html()) .get("/select", (ctx) => ctx.html()) .get("/check", (ctx) => ctx.html()); diff --git a/src/layout/WithHTML.tsx b/src/layout/WithHTML.tsx index 301d61f..322f062 100644 --- a/src/layout/WithHTML.tsx +++ b/src/layout/WithHTML.tsx @@ -8,6 +8,9 @@ const layoutStyle = css` padding: 0; box-sizing: border-box; + --font-jp: "Noto Serif JP", serif; + --font-en: "Cormorant Garamond", serif; + --color-black: #000000; --color-white: #ffffff; --color-main: #443d3a; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index a915e43..15acbb2 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,5 +1,124 @@ +import { css, keyframes } from "@hono/hono/css"; import { WithHTML } from "../layout/WithHTML.tsx"; +const bound = keyframes` + 0% { + top: -4rem; + opacity: 0; + } + 10% { + opacity: 1; + } + 50% { + top: 0; + opacity: 1; + } + 75% { + top: -1rem; + opacity: 1; + } + 100% { + top: 0; + opacity: 1; + } +`; + +const titleAnimation = css` + font-family: var(--font-en); + font-size: 1.75rem; + margin: 3.5rem 0; + text-align: center; + letter-spacing: 3px; + + span { + position: relative; + opacity: 0; + animation: 0.8s ease-out forwards ${bound}; + } + + #after-space { + margin-right: 0.5rem; + } + + span:nth-child(1) { + animation-delay: 0.1s; + } + + span:nth-child(2) { + animation-delay: 0.2s; + } + + span:nth-child(3) { + animation-delay: 0.3s; + } + + span:nth-child(4) { + animation-delay: 0.4s; + } + + span:nth-child(5) { + animation-delay: 0.5s; + } + + span:nth-child(6) { + animation-delay: 0.6s; + } + + span:nth-child(7) { + animation-delay: 0.7s; + } + + span:nth-child(8) { + animation-delay: 0.8s; + } + + span:nth-child(9) { + animation-delay: 1.2s; + } + + span:nth-child(10) { + animation-delay: 1.3s; + } + + span:nth-child(11) { + animation-delay: 1.4s; + } + + span:nth-child(12) { + animation-delay: 1.5s; + } + + span:nth-child(13) { + animation-delay: 1.6s; + } + + span:nth-child(14) { + animation-delay: 1.7s; + } + + span:nth-child(15) { + animation-delay: 1.8s; + } +`; + +const imageStyle = css` + height: calc(100svh - 15rem); + display: flex; + align-items: center; + justify-content: center; + + img { + height: calc(100svh - 15rem); + max-height: calc(820px - 15rem); + } +`; + +const noteStyle = css` + font-size: 0.8rem; + margin-top: 1rem; + text-align: center; +`; + /** * ホーム画面を返す */ @@ -7,7 +126,36 @@ import { WithHTML } from "../layout/WithHTML.tsx"; export const Home = () => { return ( -
+
+

+ C + o + c + k + t + a + i + l + M + e + s + s + a + g + e +

+
+ + カクテルグラス + +
+
+

グラスをクリックではじめる

+

+ ※音が鳴ります +

+
+
); };