Skip to content

Commit 13273de

Browse files
kubodayokubodayo
authored
Merge branch 'develop' into FE-79
2 parents a0c3b7e + 066f6aa commit 13273de

File tree

19 files changed

+760
-164
lines changed

19 files changed

+760
-164
lines changed

‎frontend/public/Image/aresira_logo.png‎

14.9 KB
Loading

‎frontend/src/App.css‎

Lines changed: 146 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,162 @@
1-
/* Mobile-first layout styles */
2-
.container {
1+
/* 全体の背景コンテナ */
2+
.app-background {
3+
min-height: 100vh;
34
display: flex;
4-
flex-direction: column;
5-
align-items: center;
65
justify-content: center;
7-
min-height: 100vh;
8-
padding: 2rem;
9-
padding-bottom: 15vh;
10-
/* Shift optical center upwards */
11-
box-sizing: border-box;
12-
text-align: center;
13-
background-color: #f8f9fa;
14-
/* Light background for cleaner look, or dark if preferred */
6+
align-items: center;
7+
padding: 24px;
8+
9+
/* ベースは優しいクリーム色 */
10+
background-color: #fff8e1;
11+
12+
/* はみ出たオーロラを隠す＆カードとの重なりを制御 */
13+
position: relative;
14+
overflow: hidden;
1515
}
1616

17-
/* Adjust root to ensure full height */
18-
#root {
19-
min-height: 100vh;
20-
margin: 0;
21-
padding: 0;
17+
/* メインコンテンツのカード */
18+
.title-card {
19+
border-radius: 16px !important;
20+
/* 背景をほんの少しだけ透かすと、後ろのオーロラと馴染んで超リッチになります */
21+
background-color: rgba(255, 255, 255, 0.9) !important;
22+
backdrop-filter: blur(10px);
23+
/* すりガラス効果 */
24+
text-align: center;
25+
max-width: 480px;
2226
width: 100%;
27+
padding: 48px 32px !important;
28+
box-shadow: 0 8px 32px rgba(237, 108, 2, 0.15) !important;
29+
margin: 0 !important;
30+
31+
/* カードをオーロラより手前に持ってくる */
32+
position: relative;
33+
z-index: 10;
34+
}
35+
36+
/* =========================================
37+
オーロラ（Mesh Gradient）のアニメーション設定
38+
========================================= */
39+
40+
.aurora-blob {
41+
position: absolute;
42+
border-radius: 50%;
43+
/* 魔法のステータス：ここで色を強烈にぼかして「にじみ」を作る */
44+
filter: blur(80px);
45+
opacity: 0.7;
46+
z-index: 1;
47+
48+
/* ゆったりと呼吸するように動かすアニメーション */
49+
animation: float-aurora 15s infinite alternate ease-in-out;
50+
}
51+
52+
/* 色と配置をそれぞれ変えて複雑な混ざり合いを作る */
53+
54+
/* 1つ目：左上の明るいオレンジ */
55+
.aurora-1 {
56+
top: -10%;
57+
left: -10%;
58+
width: 50vw;
59+
height: 50vw;
60+
background-color: #ffb74d;
61+
animation-delay: 0s;
2362
}
2463

25-
.title {
26-
font-size: 2.5rem;
27-
font-weight: bold;
28-
margin-bottom: 4rem;
29-
/* Increased spacing to separate title */
30-
color: #333;
31-
line-height: 1.2;
64+
/* 2つ目：右下の少し濃いオレンジ */
65+
.aurora-2 {
66+
bottom: -20%;
67+
right: -10%;
68+
width: 60vw;
69+
height: 60vw;
70+
background-color: #ff9800;
71+
animation-delay: -5s;
72+
/* 動きのタイミングをズラす */
3273
}
3374

34-
/* Dark mode support for title if needed, based on index.css */
35-
@media (prefers-color-scheme: dark) {
36-
.container {
37-
background-color: #242424;
75+
/* 3つ目：右上の少しピンクがかった温かい色（深みを出す隠し味） */
76+
.aurora-3 {
77+
top: 20%;
78+
right: 20%;
79+
width: 40vw;
80+
height: 40vw;
81+
background-color: #ff8a65;
82+
animation-delay: -10s;
83+
}
84+
85+
/* オーロラがゆっくり揺らぐアニメーションキーフレーム */
86+
@keyframes float-aurora {
87+
0% {
88+
transform: translate(0, 0) scale(1);
89+
}
90+
91+
33% {
92+
transform: translate(5vw, -5vh) scale(1.1);
93+
}
94+
95+
66% {
96+
transform: translate(-5vw, 5vh) scale(0.9);
3897
}
3998

40-
.title {
41-
color: rgba(255, 255, 255, 0.87);
99+
100% {
100+
transform: translate(0, 0) scale(1);
42101
}
43102
}
44103

45-
.button-group {
104+
/* =========================================
105+
タイトルロゴとボタン（先ほどと同じ）
106+
========================================= */
107+
108+
.title-logo-area {
109+
display: flex;
110+
justify-content: center;
111+
align-items: center;
112+
margin-bottom: 40px;
113+
width: 100%;
114+
}
115+
116+
.title-logo-img {
46117
width: 100%;
47-
max-width: 320px;
48-
/* Max width for button container on larger screens */
118+
max-width: 360px;
119+
height: auto;
120+
filter: drop-shadow(0px 4px 8px rgba(237, 108, 2, 0.2));
121+
}
122+
123+
.title-button-group {
124+
display: flex;
125+
flex-direction: column;
126+
align-items: center;
127+
gap: 20px;
128+
width: 100%;
129+
}
130+
131+
.title-base-button {
132+
width: 100% !important;
133+
max-width: 320px !important;
134+
min-height: 56px !important;
135+
font-weight: bold !important;
136+
border-radius: 30px !important;
137+
text-transform: none !important;
138+
box-shadow: none !important;
139+
transition: all 0.2s ease !important;
140+
}
141+
142+
.btn-start {
143+
font-size: 1.1rem !important;
144+
background-color: #f57c00 !important;
145+
color: white !important;
146+
}
147+
148+
.btn-start:hover {
149+
background-color: #e65100 !important;
150+
transform: scale(1.02);
151+
}
152+
153+
.btn-story {
154+
font-size: 1rem !important;
155+
color: #f57c00 !important;
156+
border: 1.5px solid #f57c00 !important;
157+
}
158+
159+
.btn-story:hover {
160+
background-color: rgba(245, 124, 0, 0.05) !important;
161+
border: 1.5px solid #e65100 !important;
49162
}

‎frontend/src/App.tsx‎

Lines changed: 34 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,45 @@
11
import { useNavigate } from "react-router-dom";
22
import Button from "@mui/material/Button";
3-
import Stack from "@mui/material/Stack";
3+
import Paper from "@mui/material/Paper";
44
import "./App.css";
55

66
function App() {
77
const navigate = useNavigate();
88

99
return (
10-
<div className="container">
11-
<h1 className="title">偏見で遊ぼう（仮）</h1>
12-
<Stack
13-
spacing={3}
14-
direction="column"
15-
className="button-group"
16-
alignItems="center"
17-
>
18-
<Button
19-
variant="contained"
20-
size="large"
21-
onClick={() => navigate("/solo")}
22-
sx={{
23-
width: "300px",
24-
minHeight: "60px",
25-
fontWeight: "bold",
26-
fontSize: "1.2rem",
27-
backgroundColor: "#ff9800", // Lighter Orange
28-
"&:hover": {
29-
backgroundColor: "#f57c00",
30-
},
31-
}}
32-
>
33-
スタート
34-
</Button>
35-
<Button
36-
variant="outlined"
37-
size="large"
38-
onClick={() => navigate("/board")}
39-
sx={{
40-
width: "300px",
41-
minHeight: "60px",
42-
fontWeight: "bold",
43-
fontSize: "1rem", // Reduced font size to fit text
44-
color: "#ed6c02", // Orange
45-
borderColor: "#ed6c02",
46-
"&:hover": {
47-
borderColor: "#e65100",
48-
backgroundColor: "rgba(237, 108, 2, 0.04)",
49-
},
50-
}}
51-
>
52-
共有されたストーリーを見る
53-
</Button>
54-
</Stack>
10+
<div className="app-background">
11+
{/* ▼ オーロラ背景用の色の塊（これをCSSで強烈にぼかします） ▼ */}
12+
<div className="aurora-blob aurora-1"></div>
13+
<div className="aurora-blob aurora-2"></div>
14+
<div className="aurora-blob aurora-3"></div>
15+
{/* ▲ ここまで背景装飾 ▲ */}
16+
17+
<Paper elevation={0} className="title-card">
18+
<div className="title-logo-area">
19+
<img
20+
src="/Image/aresira_logo.png"
21+
alt="あれちゃう？知らんけど"
22+
className="title-logo-img"
23+
/>
24+
</div>
25+
26+
<div className="title-button-group">
27+
<Button
28+
variant="contained"
29+
onClick={() => navigate("/solo")}
30+
className="title-base-button btn-start"
31+
>
32+
スタート
33+
</Button>
34+
<Button
35+
variant="outlined"
36+
onClick={() => navigate("/board")}
37+
className="title-base-button btn-story"
38+
>
39+
共有されたストーリー見る
40+
</Button>
41+
</div>
42+
</Paper>
5543
</div>
5644
);
5745
}

‎frontend/src/Board/Board.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -179,4 +179,4 @@
179179
font-size: 11px;
180180
margin-bottom: 2px;
181181
}
182-
}
182+
}

0 commit comments

Comments
 (0)