feat: complete TASK-WP0-03 browser gate

2026-07-27 18:23:20 +08:00
parent dbe3e73b91
commit 878788b1e2
25 changed files with 3227 additions and 21 deletions
@@ -0,0 +1,212 @@
+:root {
+  color: #111111;
+  background: #ffffff;
+  font-family: "Segoe UI", Arial, sans-serif;
+  font-synthesis: none;
+  letter-spacing: 0;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+html,
+body {
+  min-height: 100%;
+  margin: 0;
+}
+
+body {
+  min-height: 100vh;
+  display: grid;
+  grid-template-rows: 10px minmax(0, 1fr) 48px;
+  background: #ffffff;
+}
+
+.top-rule {
+  background: #eaff00;
+}
+
+main {
+  display: grid;
+  place-items: center;
+  padding: 32px 24px;
+}
+
+.gate {
+  width: min(700px, 100%);
+}
+
+.wordmark {
+  margin-bottom: 16px;
+  font-size: 34px;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.code {
+  display: inline-block;
+  padding: 6px 9px;
+  color: #eaff00;
+  background: #111111;
+  font-family: Consolas, monospace;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+h1 {
+  margin: 18px 0 12px;
+  font-size: 38px;
+  line-height: 1.15;
+  font-weight: 900;
+}
+
+.description {
+  margin: 0;
+  color: #555555;
+  font-size: 15px;
+  line-height: 1.7;
+}
+
+.detection {
+  min-height: 120px;
+  margin-top: 20px;
+  padding: 14px 16px;
+  border: 1px solid #111111;
+  background: #f5f5f5;
+}
+
+dl {
+  margin: 0;
+}
+
+dl > div {
+  min-height: 30px;
+  display: grid;
+  grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr);
+  gap: 16px;
+  align-items: center;
+}
+
+dt {
+  color: #666666;
+  font-size: 12px;
+}
+
+dd {
+  min-width: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+  text-align: right;
+  font-family: Consolas, monospace;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.danger,
+.no-bypass {
+  color: #b42318;
+}
+
+details {
+  margin-top: 14px;
+  border: 1px solid #c7c7c7;
+  padding: 14px 16px;
+}
+
+summary {
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+details p {
+  margin: 12px 0 0;
+  color: #444444;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+code {
+  font-family: Consolas, monospace;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 14px;
+}
+
+button {
+  min-width: 170px;
+  min-height: 44px;
+  border: 1px solid #111111;
+  border-radius: 0;
+  padding: 0 16px;
+  color: #111111;
+  background: #eaff00;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+button.secondary {
+  background: #ffffff;
+}
+
+button:focus-visible,
+summary:focus-visible {
+  outline: 3px solid #0067c0;
+  outline-offset: 3px;
+}
+
+.no-bypass {
+  margin: 14px 0 0;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+footer {
+  display: grid;
+  place-items: center;
+  color: #eaff00;
+  background: #111111;
+  font-family: Consolas, monospace;
+  font-size: 10px;
+  font-weight: 700;
+}
+
+@media (max-width: 560px) {
+  body {
+    grid-template-rows: 8px auto 48px;
+  }
+
+  main {
+    padding: 24px 16px;
+  }
+
+  h1 {
+    font-size: 30px;
+  }
+
+  dl > div {
+    grid-template-columns: 1fr;
+    gap: 2px;
+    padding: 5px 0;
+  }
+
+  dd {
+    text-align: left;
+  }
+
+  .actions,
+  button {
+    width: 100%;
+  }
+}