Merge pull request #28 from ut-code/top2

ボックスに変更

Author: MokeMoke13151105

vulnerable-web/index.html

@@ -15,52 +15,24 @@ <h1>Browser-Hack</h1>
     <a href="./shopping/index.html">ミッション1～ミッション4に挑戦！</a>
     <a href="./reservation/index.html">最後のミッションに挑戦！</a>
 
-    <!-- ▼▼ ここを追加：モーダルを開くボタン ▼▼ -->
-    <button id="openPopup" class="popup-button">注意事項</button>
-    <!-- ▲▲ ここまで追加 ▲▲ -->
-  </main>
-
-  <footer>
-    <p>©2025 ut.code();</p>
-  </footer>
-
-  <!-- ▼▼ ここを追加：モーダル本体 ▼▼ -->
-  <div id="overlay" class="overlay">
-    <div class="popup">
+   
+    <div class="info-box-static">
       <h2>注意事項</h2>
-      <p>このサイトではマニュアルを参照します。手元で見ながら進めましょう。</p>
+      <p style="font-weight: bold;">このサイトではマニュアルを参照します。手元で見ながら進めましょう。</p>
+      <br>
       <h2>拡張機能の開き方</h2>
       <p>
         右上の「パズルのピースのアイコン」を押し、「ブラウザハック入門ミッション」を選択してください。 
       </p>
       <br>
       <h2>リセットの仕方</h2>
       <p>もし表示されたミッションがミッション1でないときは、「ミッションをリセット」を押してください。</p>
-      
-      <button id="closePopup" class="close-button">閉じる</button>
-    </div>
   </div>
-  <!-- ▲▲ ここまで追加 ▲▲ -->
-
-  <!-- ▼▼ ここを追加：スクリプト ▼▼ -->
-  <script>
-    const openBtn = document.getElementById("openPopup");
-    const closeBtn = document.getElementById("closePopup");
-    const overlay = document.getElementById("overlay");
-
-    openBtn.addEventListener("click", () => {
-      overlay.classList.add("active");
-    });
+ 
+  </main>
 
-    closeBtn.addEventListener("click", () => {
-      overlay.classList.remove("active");
-    });
+  <footer>
+    <p>©2025 ut.code();</p>
+  </footer>
 
-    overlay.addEventListener("click", (e) => {
-      if (e.target === overlay) overlay.classList.remove("active");
-    });
-  </script>
-  <!-- ▲▲ 追加ここまで ▲▲ -->
 
-</body>
-</html>

vulnerable-web/style.css

@@ -70,7 +70,7 @@ footer {
   font-size: 0.95rem;
 }
 
-/* ▼▼ ここから追加 ▼▼ */
+
 
 .popup-button {
   margin-top: 1rem;
@@ -90,7 +90,7 @@ footer {
   transform: translateY(-3px);
 }
 
-/* モーダル */
+
 .overlay {
   position: fixed;
   inset: 0;
@@ -138,6 +138,37 @@ footer {
   font-weight: bold;
 }
 
+.info-box-static {
+  width: 90%;
+  max-width: 600px;
+  padding: 1.4rem 1.6rem;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 14px;
+  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
+  backdrop-filter: blur(6px);
+  animation: fadeIn 0.8s ease;
+  line-height: 1.6;
+}
+
+.info-box-static h2 {
+  margin-top: 0;
+  font-size: 1.4rem;
+  color: #333;
+}
+
+.info-box-static p {
+  margin: 0.6rem 0;
+  font-size: 1rem;
+  color: #444;
+}
+
+.info-box-static code {
+  background: #efefef;
+  padding: 2px 4px;
+  border-radius: 6px;
+  font-size: 0.9em;
+}
+
 @keyframes popupFade {
   from {
     opacity: 0;
@@ -149,4 +180,4 @@ footer {
   }
 }
 
-/* ▲▲ 追加ここまで ▲▲ */
+