diff --git a/src/components/responsive/homePC/index.module.css b/src/components/responsive/homePC/index.module.css index ec68ad2..a8edab9 100644 --- a/src/components/responsive/homePC/index.module.css +++ b/src/components/responsive/homePC/index.module.css @@ -38,7 +38,8 @@ } .background-logo { - opacity: 0.2; + opacity: 0.1; + position: absolute; top: 50%; left: 24%; @@ -159,3 +160,23 @@ li { font-size: 32px; z-index: 10; } + +.text{ + font-size: 24px; + color: #212121; + padding: 24px; + font-family: Yuji Syuku, sans-serif; + line-height: 1.5; + font-weight: 400; + font-style: normal; + position: absolute; + bottom: 10px; + text-align: left; +} + +.white-box{ + width: 50%; + height: 30%; + background-color: #fff; + opacity: 0.4; +} diff --git a/src/components/responsive/homePC/index.tsx b/src/components/responsive/homePC/index.tsx index 7cb53cd..76c80b1 100644 --- a/src/components/responsive/homePC/index.tsx +++ b/src/components/responsive/homePC/index.tsx @@ -5,6 +5,7 @@ import { copyStringToClipboard } from "../../../utils/copyClipBoard"; import { requestPermission } from "../../../utils/permission"; import QRCodeGenerator from "../../QRCodeGenerator"; import { DefaultButton } from "../../ui/Button"; +import Rule from "../../ui/Rule"; import TextButton from "../../ui/TextButton"; import styles from "./index.module.css"; @@ -75,6 +76,10 @@ function HomePC() { 射的へ向かう + +
+ +
diff --git a/src/components/responsive/homeSP/index.module.css b/src/components/responsive/homeSP/index.module.css index d206a1a..86e7af8 100644 --- a/src/components/responsive/homeSP/index.module.css +++ b/src/components/responsive/homeSP/index.module.css @@ -62,3 +62,16 @@ li { padding: 12px 0; font-size: 18px; } + +.text{ + font-size: 16px; + color: #212121; + padding: 24px; + font-family: Yuji Syuku, sans-serif; + line-height: 1.5; + font-weight: 400; + font-style: normal; + position: absolute; + bottom: 10px; + text-align: left; +} \ No newline at end of file diff --git a/src/components/responsive/homeSP/index.tsx b/src/components/responsive/homeSP/index.tsx index 1bdd2df..78d8ba0 100644 --- a/src/components/responsive/homeSP/index.tsx +++ b/src/components/responsive/homeSP/index.tsx @@ -2,6 +2,7 @@ import { useNavigate } from "react-router-dom"; import { useSocketRefStore } from "../../../store"; import { requestPermission } from "../../../utils/permission"; import { DefaultButton } from "../../ui/Button"; +import Rule from "../../ui/Rule"; import styles from "./index.module.css"; function HomeSP() { @@ -59,8 +60,11 @@ function HomeSP() { height="380" />
+
+ +
- + 射的へ向かう
diff --git a/src/components/ui/Rule/index.tsx b/src/components/ui/Rule/index.tsx new file mode 100644 index 0000000..1f77951 --- /dev/null +++ b/src/components/ui/Rule/index.tsx @@ -0,0 +1,16 @@ +function Rule() { + return ( +
+

〜ルール〜

+

+ 1,画面にスマホを向け、ポインタの位置を確認(1回につき3発のコルク玉が渡されます) +
+ 2,狙いを目掛けてスマホのトリガーボタンを押すと当たればGetです +
+ 3,結果はぜひSNSでポストしてね +

+
+ ); +} + +export default Rule;