Merge pull request #19 from ut-code/lv4Tolv5

shirokuma222 · web-flow · commit 1d7d28ca6f03 · 2025-11-15T09:34:39.000+09:00
Lv4tolv5
diff --git a/src/sidepanel/App.tsx b/src/sidepanel/App.tsx
@@ -173,6 +173,15 @@ function App() {
           {!result && <p className="hint">ヒント：sourcesに割引コードが書かれているかも</p>}
         </div>
       )}
+
+      {step === 3 && (
+        <div>
+          <h2>問題5</h2>
+          <p>一つ目のレビューを、CSSを使って非表示にしてみよう！</p>
+          {result && <div className={result.ok ? "result-ok" : "result-ng"}><h3>判定: {result.ok ? '正解！' : '不正解'}</h3><p>{result.details}</p>{result.ok && <p>次の問題へ進みます...</p>}</div>}
+          {!result && <p className="hint">ヒント：DevToolsのスタイルパネルで <code>display: none;</code> を追加してみよう。</p>}
+        </div>
+      )}
     </div>
   )
 }
diff --git a/vulnerable-web/style.css b/vulnerable-web/style.css
@@ -0,0 +1,71 @@
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  background: linear-gradient(135deg, #a8e0ff, #8ec5fc, #e0c3fc);
+  color: #333;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  animation: fadeIn 1.2s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+header {
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(6px);
+  border-bottom: 1px solid rgba(255,255,255,0.4);
+  padding: 1.5rem 2rem;
+  text-align: center;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+}
+
+header h1 {
+  margin: 0;
+  font-size: 2rem;
+  color: #444;
+  letter-spacing: 1px;
+}
+
+main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem;
+  gap: 1.5rem;
+}
+
+main a {
+  width: 90%;
+  max-width: 480px;
+  padding: 1.1rem 1.5rem;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #6a85ff, #8f6aff);
+  color: #fff;
+  text-decoration: none;
+  text-align: center;
+  font-size: 1.2rem;
+  font-weight: bold;
+  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+main a:hover {
+  transform: translateY(-4px) scale(1.03);
+  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+}
+
+footer {
+  color: #fff;
+  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
+  text-align: center;
+  padding: 1.5rem;
+  font-size: 0.95rem;
+}
diff --git a/vulnerable-web/top.html b/vulnerable-web/top.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>TOP</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body class="admin">
+  <header>
+    <h1>Top Page</h1>
+  </header>
+
+  <main>
+    <a href="./shopping/index.html">問題1~問題4を解く</a>
+    <a href="./reservation/index.html">最後の問題を解く</a>
+  </main>
+
+  <footer>
+    <p>©2025 ut.code();</p>
+  </footer>
+</body>
+</html>
