From 5d8a0ea7925c7ba507d2e8a63085597e2c1f3128 Mon Sep 17 00:00:00 2001 From: okonakona <2240057@ecc.ac.jp> Date: Wed, 29 Oct 2025 02:21:04 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=E3=83=AC=E3=82=A4=E3=82=A2=E3=82=A6?= =?UTF-8?q?=E3=83=88=E5=AE=9F=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 2 + src/assets/eye.svg | 1 + src/assets/eyeOff.svg | 1 + src/pages/Login/page.tsx | 45 ++++++++-- src/pages/Login/style.module.css | 61 ++++++++++++-- src/pages/Signup/page.tsx | 125 ++++++++++++++++++++++++++++ src/pages/Signup/style.module.css | 131 ++++++++++++++++++++++++++++++ 7 files changed, 356 insertions(+), 10 deletions(-) create mode 100644 src/assets/eye.svg create mode 100644 src/assets/eyeOff.svg create mode 100644 src/pages/Signup/page.tsx create mode 100644 src/pages/Signup/style.module.css diff --git a/src/App.tsx b/src/App.tsx index 43d408b..a368a49 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -15,6 +15,7 @@ import CreateProblem from './pages/CreateProblem' import CreateProblemDetail from './pages/CreateProblem/detail' import Header from './components/Header/Header' import Admin from './pages/Admin' +import Signup from './pages/Signup/page' const MainLayout: React.FC = () => { const [state, setState] = useState(true) @@ -40,6 +41,7 @@ const router = createBrowserRouter( createRoutesFromElements( <> } /> + } /> }> } /> } /> diff --git a/src/assets/eye.svg b/src/assets/eye.svg new file mode 100644 index 0000000..6462b65 --- /dev/null +++ b/src/assets/eye.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/eyeOff.svg b/src/assets/eyeOff.svg new file mode 100644 index 0000000..f1d2ac0 --- /dev/null +++ b/src/assets/eyeOff.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/Login/page.tsx b/src/pages/Login/page.tsx index 1cd0770..e0185ae 100644 --- a/src/pages/Login/page.tsx +++ b/src/pages/Login/page.tsx @@ -1,8 +1,18 @@ import styles from './style.module.css' import logo from '../../assets/w2cLogo.svg' +import eyeIcon from '../../assets/eye.svg' +import eyeOffIcon from '../../assets/eyeOff.svg' import { Button } from '@/stories/Button' +import { useState } from 'react' +import { Link } from 'react-router-dom' export default function Login() { + const [showPassword, setShowPassword] = useState(false) + + const togglePassword = () => { + setShowPassword((prev) => !prev) + } + return ( <>
@@ -19,20 +29,45 @@ export default function Login() {
- - + +
+ + パスワード表示切り替え +
diff --git a/src/pages/Login/style.module.css b/src/pages/Login/style.module.css index 25888cf..479c518 100644 --- a/src/pages/Login/style.module.css +++ b/src/pages/Login/style.module.css @@ -1,3 +1,4 @@ +/* ログイン・サインイン共通部分あり */ .loginBg { width: 100%; height: 100vh; @@ -23,6 +24,7 @@ flex-direction: column; align-items: center; justify-content: center; + filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)); form { width: 100%; @@ -40,7 +42,7 @@ >p { color: white; - font-size: 32px; + font-size: 2.6rem; font-weight: bold; } .input { @@ -50,24 +52,73 @@ label { color: white; - margin: 4px 0; + margin: 7px 0; + font-size: 1.3rem; + font-weight: 500; + span{ + font-size: 1rem; + color: var(--gray); + + } + } input { width: 100%; - height: 40px; + height: 55px; border-radius: 8px; border: none; padding-left: 1rem; + font-size: 1.5rem; + } + ::placeholder{ + color: var(--grayText); } + + } + .passwordField { + position: relative; + display: flex; + align-items: center; } + + .passwordField input { + width: 100%; + padding-right: 60px; + } + + .eyeIcon { + position: absolute; + right: 20px; + width: 32px; + height: 32px; + cursor: pointer; + opacity: 0.7; + transition: opacity 0.2s; + } + + .eyeIcon:hover { + opacity: 1; + } + } .BtnWrap { + text-align: center; + button{ + color: #FFFFFF; + font-size: 1.5rem; + background: linear-gradient(90deg, #FFA322 0%, #FF7253 100%); + height: 55px; + width: 400px; + border: solid 0.7px #FFFFFF; + filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)); + } p { - margin-top: 8px; + margin-top: 20px; + font-size: 1rem; color: white; text-decoration: underline; } } } } -} \ No newline at end of file +} diff --git a/src/pages/Signup/page.tsx b/src/pages/Signup/page.tsx new file mode 100644 index 0000000..14c71e2 --- /dev/null +++ b/src/pages/Signup/page.tsx @@ -0,0 +1,125 @@ +import styles from './style.module.css' +import logo from '../../assets/w2cLogo.svg' +import eyeIcon from '../../assets/eye.svg' +import eyeOffIcon from '../../assets/eyeOff.svg' +import { Button } from '@/stories/Button' +import { useState } from 'react' +import { Link } from 'react-router-dom' + +export default function Signup() { + const [showPassword, setShowPassword] = useState(false) + + const togglePassword = () => { + setShowPassword((prev) => !prev) + } + + return ( + <> +
+

+ W2Cロゴ +

+

+ 学校のメールアドレスを入力してください +

+
+
+
+

新規登録

+
+ + +
+
+ +
+ + パスワード表示切り替え +
+
+
+ +
+ + パスワード表示切り替え +
+
+
+ + +
+
+ + +
+
+
+
+
+
+
+ + ) +} diff --git a/src/pages/Signup/style.module.css b/src/pages/Signup/style.module.css new file mode 100644 index 0000000..a92ec5b --- /dev/null +++ b/src/pages/Signup/style.module.css @@ -0,0 +1,131 @@ +/* ログイン・サインイン共通部分あり */ +.loginBg { + width: 100%; + min-height: 100vh; + background: linear-gradient( to top, #E3F9FB, #87DBF9); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + + h1{ + margin-top: 100px; + } + + .errorMes { + color: #D53B1C; + font-weight: bold; + margin-top: 16px; + } + + .loginForm { + margin-top: 16px; + width: 50%; + height: 60%; + padding: 35px 0; + background-color: #86A0A6; + border-radius: 16px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)); + margin-bottom: 100px; + + form { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + + .inputWrap { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + + >p { + color: white; + font-size: 2.6rem; + font-weight: bold; + } + .input { + width: 85%; + display: flex; + flex-direction: column; + + label { + color: white; + margin: 7px 0; + font-size: 1.3rem; + font-weight: 500; + span{ + font-size: 1rem; + color: var(--gray); + + } + + } + input { + width: 100%; + height: 55px; + border-radius: 8px; + border: none; + padding-left: 1rem; + font-size: 1.5rem; + } + ::placeholder{ + color: var(--grayText); + } + + } + .passwordField { + position: relative; + display: flex; + align-items: center; + } + + .passwordField input { + width: 100%; + padding-right: 60px; + } + + .eyeIcon { + position: absolute; + right: 20px; + width: 32px; + height: 32px; + cursor: pointer; + opacity: 0.7; + transition: opacity 0.2s; + } + + .eyeIcon:hover { + opacity: 1; + } + + } + .BtnWrap { + text-align: center; + button{ + color: #FFFFFF; + font-size: 1.5rem; + background: linear-gradient(90deg, #FFA322 0%, #FF7253 100%); + height: 55px; + width: 400px; + margin-top: 95px; + border: solid 0.7px #FFFFFF; + filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)); + } + p { + margin-top: 20px; + font-size: 1rem; + color: white; + text-decoration: underline; + } + } + } + } +}