fixed styling

2026-09-04 21:14:31 +08:00
1 changed files with 59 additions and 22 deletions
@@ -17,23 +17,57 @@ _PAGE = """<!DOCTYPE html>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>What Is My IP Address? - {site}</title>
 <style>
-  body {{ font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-         margin: 2rem auto; max-width: 52rem; padding: 0 1rem; color: #222; }}
-  h1 {{ font-size: 1.5rem; }}
-  h2 {{ font-size: 1.15rem; margin-top: 2rem; border-bottom: 1px solid #ddd;
-       padding-bottom: .3rem; }}
-  table {{ border-collapse: collapse; width: 100%; }}
-  td, th {{ border: 1px solid #ddd; padding: .4rem .6rem; text-align: left;
+  body {{
+          font-family: Arial, sans-serif;
+          font-size: 13px;
+          border: 1px solid black;
+          font-style: normal;
+          font-weight: normal;
+          margin: 2rem auto;
+          max-width: 52rem;
+          padding: 0 1rem;
+          color: #333;
+  }}
+  h1 a {{
+    font-size: 20px;
+    font-weight: 200;
+    margin: 10px;
+    letter-spacing: 1px;
+    text-decoration: none;
+    color: #555;
+  }}
+  h2 {{
+    height: 30px;
+    line-height: 30px;
+    font-size: 18px;
+    margin: 0 5px;
+    padding-left: 5px;
+    font-weight: 200;
+  }}
+  div.cli-wrap {{
+      padding-top: 20px;
+  }}
+  table {{ border-collapse: collapse; width: 100%; line-height: 20px; }}
+  td, th {{ border: 1px solid black; padding: .4rem .6rem; text-align: left;
           vertical-align: top; }}
-  td:first-child {{ font-weight: 600; white-space: nowrap; width: 12rem; }}
-  code, pre {{ background: #f5f5f5; }}
-  pre {{ padding: .8rem; overflow-x: auto; border: 1px solid #e2e2e2; }}
-  footer {{ margin-top: 3rem; color: #777; font-size: .85rem; }}
+  td:first-child {{ white-space: nowrap; width: 12rem; }}
+  code, pre {{ background: #f5f5f5; margin: 0px; }}
+  pre {{ padding: .8rem; overflow-x: auto; border: 1px solid #e2e2e2; overflow-x: hidden; }}
+  footer {{
+    background: #777;
+    height: 20px;
+    line-height: 20px;
+    color: #ddd;
+    text-align: center;
+    margin-top: 15px;
+    border-top: none;
+  }}
 </style>
 </head>
 <body>
-<h1>What Is My IP Address? - {site}</h1>
+<h1><a>What Is My IP Address? - {site}</a></h1>

+<div>
 <h2>Your Connection</h2>
 <table>
  <tr><td>IP Address</td><td>{ip_addr}</td></tr>
@@ -46,34 +80,36 @@ _PAGE = """<!DOCTYPE html>
  <tr><td>Charset</td><td>{charset}</td></tr>
  <tr><td>X-Forwarded-For</td><td>{forwarded}</td></tr>
 </table>
+</div>

+<div class="cli-wrap">
 <h2>Command Line Interface</h2>
 <pre>$ curl {site}
-&#8658; {ip_addr}
+{ip_addr}

 $ curl {site}/ip
-&#8658; {ip_addr}
+{ip_addr}

 $ curl {site}/ua
-&#8658; {user_agent}
+{user_agent}

 $ curl {site}/lang
-&#8658; {language}
+{language}

 $ curl {site}/encoding
-&#8658; {encoding}
+{encoding}

 $ curl {site}/mime
-&#8658; {mime}
+{mime}

 $ curl {site}/charset
-&#8658; {charset}
+{charset}

 $ curl {site}/forwarded
-&#8658; {forwarded}
+{forwarded}

 $ curl {site}/all
-&#8658; ip_addr: {ip_addr}
+ip_addr: {ip_addr}
  remote_host: {remote_host}
  user_agent: {user_agent}
  port: {port}
@@ -89,7 +125,8 @@ $ curl {site}/all
  forwarded: {forwarded}

 $ curl {site}/all.json
-&#8658; {all_json}</pre>
+{all_json}</pre>
+</div>

 <footer>&copy; {year} {site}</footer>
 </body>