phishvision-extension/popup.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body { width: 300px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 16px; background-color: #0f172a; color: #f8fafc; text-align: center; }
    h2 { margin-top: 0; font-size: 18px; color: #38bdf8; margin-bottom: 8px;}
    p { font-size: 12px; color: #94a3b8; margin-bottom: 20px;}
    button { width: 100%; padding: 12px; background-color: #ef4444; color: #fff; border: none; border-radius: 6px; font-weight: bold; font-size: 14px; cursor: pointer; transition: background 0.2s; }
    button:hover { background-color: #dc2626; }
    button:disabled { background-color: #475569; color: #94a3b8; cursor: not-allowed; }
    #result { margin-top: 16px; padding: 12px; border-radius: 6px; font-weight: bold; font-size: 14px; display: none; }
    .safe { background-color: #059669; color: #ecfdf5; }
    .malicious { background-color: #b91c1c; color: #fef2f2; }
    #status { margin-top: 8px; font-size: 12px; color: #cbd5e1; }
    #details { margin-top: 8px; font-size: 11px; color: #94a3b8; text-align: left; }
  </style>
</head>
<body>
  <h2>PhishVision Sentinel</h2>
  <p>Protect yourself from fake login pages</p>
  
  <button id="scanBtn">Scan This Page</button>
  
  <div id="status"></div>
  <div id="result"></div>
  <div id="details"></div>

  <script src="popup.js"></script>
</body>
</html>