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/CreateMessageCheck.tsx b/src/components/CreateMessageCheck.tsx index 98ca5f2..067d75c 100644 --- a/src/components/CreateMessageCheck.tsx +++ b/src/components/CreateMessageCheck.tsx @@ -68,14 +68,16 @@ const buttonStyle = css` border-radius: 0.5rem; width: 7.5rem; height: 7.25rem; + display: flex; text-align: center; + justify-content: center; a { display: block; color: var(--color-black); text-decoration: none; - padding: 2rem 1.5rem; font-size: 1rem; + padding: 2.9rem 1rem; } `; @@ -84,6 +86,7 @@ const sendButtonStyle = css` a { color: var(--color-white); + padding: 2.1rem 1.5rem; } `; @@ -131,11 +134,7 @@ export const CreateMessageCheck = () => {
- - 気持ちを -
- 追加する - + つくり直す
diff --git a/src/components/CreateMessageSelect.tsx b/src/components/CreateMessageSelect.tsx index 17ef122..1c955d2 100644 --- a/src/components/CreateMessageSelect.tsx +++ b/src/components/CreateMessageSelect.tsx @@ -142,7 +142,7 @@ export const CreateMessageSelect = async () => { ))}
- 確認 + 決定
diff --git a/src/components/CreateMessageTop.tsx b/src/components/CreateMessageTop.tsx index f6f9b85..5a304f9 100644 --- a/src/components/CreateMessageTop.tsx +++ b/src/components/CreateMessageTop.tsx @@ -1,29 +1,45 @@ -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; + height: 75vh; display: flex; justify-content: center; - margin-top: 3rem; img { - height: calc(100% - 11rem); + height: calc(100% - 7rem); + margin-top: 4rem; } `; const buttonStyle = css` - position: absolute; - bottom: 4rem; background-color: var(--color-base); border-radius: 0.5rem; + width: 7.5rem; + height: 7.25rem; + display: flex; + text-align: center; + justify-content: center; a { display: block; color: var(--color-black); text-decoration: none; - padding: 2rem 1.5rem; font-size: 1rem; + padding: 2.1rem 1rem; } `; @@ -34,9 +50,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 +

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

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

+

+ ※音が鳴ります +

+
+
); };