Skip to content

Commit 8b09f24

Browse files
MokeMoke13151105MokeMoke13151105
committed
sessionストレージに変更
1 parent f7c09d6 commit 8b09f24

File tree

4 files changed

+206
-52
lines changed

4 files changed

+206
-52
lines changed

‎src/sidepanel/App.css‎

Lines changed: 77 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,105 @@
1+
/* Enhanced Styling for a More Vibrant Look */
2+
3+
:root {
4+
--primary: #ff6ac1;
5+
--secondary: #6a9bff;
6+
--bg-gradient: linear-gradient(135deg, #ffe1f0, #dfe9ff);
7+
--card-bg: rgba(255, 255, 255, 0.85);
8+
--success: #00c853;
9+
--fail: #d50000;
10+
}
11+
12+
body {
13+
background: var(--bg-gradient);
14+
font-family: 'Nunito', sans-serif;
15+
}
16+
117
#root {
218
max-width: 1280px;
319
margin: 0 auto;
420
padding: 2rem;
521
text-align: center;
22+
animation: fadeIn 0.8s ease-in-out;
623
}
724

8-
.logo {
9-
height: 6em;
10-
padding: 1.5em;
11-
will-change: filter;
12-
transition: filter 300ms;
13-
}
14-
.logo:hover {
15-
filter: drop-shadow(0 0 2em #646cffaa);
25+
@keyframes fadeIn {
26+
from { opacity: 0; transform: translateY(10px); }
27+
to { opacity: 1; transform: translateY(0); }
1628
}
17-
.logo.react:hover {
18-
filter: drop-shadow(0 0 2em #61dafbaa);
29+
30+
.container {
31+
padding: 1.5rem;
32+
text-align: center;
33+
backdrop-filter: blur(10px);
34+
border-radius: 16px;
35+
background: var(--card-bg);
36+
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
1937
}
2038

21-
@keyframes logo-spin {
22-
from {
23-
transform: rotate(0deg);
24-
}
25-
to {
26-
transform: rotate(360deg);
27-
}
39+
h2 {
40+
font-size: 2rem;
41+
font-weight: 700;
42+
color: var(--primary);
43+
margin-bottom: 1rem;
44+
text-shadow: 0 1px 3px rgba(0,0,0,0.15);
2845
}
2946

30-
@media (prefers-reduced-motion: no-preference) {
31-
a:nth-of-type(2) .logo {
32-
animation: logo-spin infinite 20s linear;
33-
}
47+
.problem {
48+
font-size: 1.2em;
49+
margin-bottom: 0.8rem;
50+
color: #444;
3451
}
3552

36-
.card {
37-
padding: 2em;
53+
.hint {
54+
font-size: 0.95em;
55+
opacity: 0.8;
56+
color: #333;
57+
margin-top: 0.4rem;
3858
}
3959

40-
.read-the-docs {
41-
color: #888;
60+
.result-ok {
61+
font-weight: bold;
62+
font-size: 2rem;
63+
margin-top: 1rem;
64+
padding: 0.2rem;
65+
color: var(--success);
66+
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
4267
}
4368

44-
.container {
45-
padding: 1rem;
46-
text-align: center;
69+
.result-ng {
70+
font-weight: bold;
71+
font-size: 2rem;
72+
margin-top: 1rem;
73+
padding: 0.2rem;
74+
color: var(--fail);
4775
}
4876

49-
.reset-button {
50-
margin-top: 2rem;
51-
padding: 4px 8px;
52-
font-size: 0.8em;
53-
background-color: #666;
54-
color: white;
77+
button {
78+
padding: 0.6rem 1.2rem;
5579
border: none;
56-
border-radius: 4px;
80+
border-radius: 8px;
5781
cursor: pointer;
82+
background: var(--secondary);
83+
color: white;
84+
font-weight: bold;
85+
transition: all 0.2s ease-in-out;
86+
box-shadow: 0 3px 12px rgba(0,0,0,0.15);
5887
}
5988

60-
.reset-button:hover {
89+
button:hover {
90+
transform: scale(1.05);
91+
background: #4f7df5;
92+
}
93+
94+
.reset-button {
95+
margin-top: 2rem;
96+
padding: 6px 14px;
97+
font-size: 0.85em;
6198
background-color: #888;
99+
border-radius: 6px;
62100
}
63101

64-
.problem {
65-
font-size: 1.2em;
102+
.reset-button:hover {
103+
background-color: #666;
104+
transform: scale(1.05);
66105
}
67-
.result-ok {
68-
font-weight: bold;
69-
font-size: 2rem;
70-
margin-top: 1rem;
71-
padding: 0.1rem;
72-
border: none;
73-
background-color: none;
74-
color: #ff0000;
75-
}

‎vulnerable-web/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,53 @@ <h1>Browser-Hack</h1>
1414
<main>
1515
<a href="./shopping/index.html">ミッション1～ミッション4に挑戦！</a>
1616
<a href="./reservation/index.html">最後のミッションに挑戦！</a>
17+
18+
<!-- ▼▼ ここを追加：モーダルを開くボタン ▼▼ -->
19+
<button id="openPopup" class="popup-button">注意事項</button>
20+
<!-- ▲▲ ここまで追加 ▲▲ -->
1721
</main>
1822

1923
<footer>
2024
<p>©2025 ut.code();</p>
2125
</footer>
26+
27+
<!-- ▼▼ ここを追加：モーダル本体 ▼▼ -->
28+
<div id="overlay" class="overlay">
29+
<div class="popup">
30+
<h2>注意事項</h2>
31+
<p>このサイトではマニュアルを参照します。手元で見ながら進めましょう。</p>
32+
<h2>拡張機能の開き方</h2>
33+
<p>
34+
右上の「パズルのピースのアイコン」を押し、「ブラウザハック入門ミッション」を選択してください。
35+
</p>
36+
<br>
37+
<h2>リセットの仕方</h2>
38+
<p>もし表示されたミッションがミッション1でないときは、「ミッションをリセット」を押してください。</p>
39+
40+
<button id="closePopup" class="close-button">閉じる</button>
41+
</div>
42+
</div>
43+
<!-- ▲▲ ここまで追加 ▲▲ -->
44+
45+
<!-- ▼▼ ここを追加：スクリプト ▼▼ -->
46+
<script>
47+
const openBtn = document.getElementById("openPopup");
48+
const closeBtn = document.getElementById("closePopup");
49+
const overlay = document.getElementById("overlay");
50+
51+
openBtn.addEventListener("click", () => {
52+
overlay.classList.add("active");
53+
});
54+
55+
closeBtn.addEventListener("click", () => {
56+
overlay.classList.remove("active");
57+
});
58+
59+
overlay.addEventListener("click", (e) => {
60+
if (e.target === overlay) overlay.classList.remove("active");
61+
});
62+
</script>
63+
<!-- ▲▲ 追加ここまで ▲▲ -->
64+
2265
</body>
2366
</html>

‎vulnerable-web/reservation/script.mjs‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,13 @@ function initAdminPage() {
4040
});
4141

4242
toggleBtn?.addEventListener("click", () => {
43-
const current = localStorage.getItem("ticketOpen") === "true";
44-
localStorage.setItem("ticketOpen", (!current).toString());
43+
const current = sessionStorage.getItem("ticketOpen") === "true";
44+
sessionStorage.setItem("ticketOpen", (!current).toString());
4545
updateTicketStateText();
4646
});
4747

4848
function updateTicketStateText() {
49-
const open = localStorage.getItem("ticketOpen") === "true";
49+
const open = sessionStorage.getItem("ticketOpen") === "true";
5050
ticketState.textContent = open
5151
? "現在チケット予約は解禁中です。"
5252
: "現在チケット予約は停止中です。";
@@ -58,7 +58,7 @@ function initAdminPage() {
5858

5959
// --- 一般ページ処理 ---
6060
function initUserPage() {
61-
const open = localStorage.getItem("ticketOpen") === "true";
61+
const open = sessionStorage.getItem("ticketOpen") === "true";
6262
const ticketStatus = document.getElementById("ticket-status");
6363
const ticketForm = document.getElementById("ticket-form");
6464

‎vulnerable-web/style.css‎

Lines changed: 82 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,4 +68,85 @@ footer {
6868
text-align: center;
6969
padding: 1.5rem;
7070
font-size: 0.95rem;
71-
}
71+
}
72+
73+
/* ▼▼ ここから追加 ▼▼ */
74+
75+
.popup-button {
76+
margin-top: 1rem;
77+
padding: 0.8rem 1.2rem;
78+
font-size: 1rem;
79+
font-weight: bold;
80+
border: none;
81+
border-radius: 10px;
82+
background: #ff9f43;
83+
color: #fff;
84+
cursor: pointer;
85+
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
86+
transition: 0.2s;
87+
}
88+
89+
.popup-button:hover {
90+
transform: translateY(-3px);
91+
}
92+
93+
/* モーダル */
94+
.overlay {
95+
position: fixed;
96+
inset: 0;
97+
background: rgba(0,0,0,0.4);
98+
display: none;
99+
justify-content: center;
100+
align-items: center;
101+
padding: 20px;
102+
}
103+
104+
.overlay.active {
105+
display: flex;
106+
}
107+
108+
.popup {
109+
background: #fff;
110+
max-width: 420px;
111+
width: 90%;
112+
padding: 1.8rem;
113+
border-radius: 14px;
114+
box-shadow: 0 10px 28px rgba(0,0,0,0.25);
115+
animation: popupFade 0.25s ease;
116+
}
117+
118+
.popup h2 {
119+
margin-top: 0;
120+
margin-bottom: 1rem;
121+
font-size: 1.4rem;
122+
color: #444;
123+
}
124+
125+
.popup p {
126+
line-height: 1.6;
127+
margin-bottom: 1.4rem;
128+
}
129+
130+
.close-button {
131+
background: #6a85ff;
132+
color: #fff;
133+
padding: 0.7rem 1.2rem;
134+
border: none;
135+
border-radius: 10px;
136+
font-size: 1rem;
137+
cursor: pointer;
138+
font-weight: bold;
139+
}
140+
141+
@keyframes popupFade {
142+
from {
143+
opacity: 0;
144+
transform: translateY(12px);
145+
}
146+
to {
147+
opacity: 1;
148+
transform: translateY(0);
149+
}
150+
}
151+
152+
/* ▲▲ 追加ここまで ▲▲ */

0 commit comments

Comments
 (0)