URLGuard/learn-more.html at main · AdityaP700/URLGuard · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!-- privacyguard/learn-more.html -->
<!DOCTYPE html>
<html>
<head>
  <title>About PrivacyGuard</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
  <link rel="stylesheet" href="learn-more.css">
</head>
<body>
  <div class="container">
    <div class="main-card">
      <header class="header">
        <h1>PrivacyGuard</h1>
        <p>Advanced Web Protection & Anti-Phishing Shield</p>
      </header>

      <div class="content">
        <div class="intro">
          <p>Intelligent website analysis to keep you safe from phishing attacks and malicious content.</p>
          <button class="toggle-btn" id="toggleBtn">Learn How It Works</button>
        </div>

        <div class="details" id="details">
          <div class="section">
            <h3>Protection Levels</h3>
            <div class="alert-grid">
              <div class="alert-card safe">
                <div>
                  <span class="alert-indicator safe"></span>
                  <strong>Safe</strong>
                </div>
                <p>Verified secure sites or your trusted whitelist</p>
              </div>
              <div class="alert-card warning">
                <div>
                  <span class="alert-indicator warning"></span>
                  <strong>Caution</strong>
                </div>
                <p>HTTP connections or suspicious features detected</p>
              </div>
              <div class="alert-card danger">
                <div>
                  <span class="alert-indicator danger"></span>
                  <strong>High Risk</strong>
                </div>
                <p>Potential phishing or malware threats identified</p>
              </div>
            </div>
          </div>

          <div class="section">
            <h3>Key Features</h3>
            <ul class="features-list">
              <li>Real-time phishing detection</li>
              <li>Local data processing for privacy</li>
              <li>Customizable whitelist management</li>
              <li>Advanced threat analysis</li>
              <li>Zero data collection policy</li>
            </ul>
          </div>
        </div>

        <div class="privacy-note">
          <strong>Privacy First</strong>
          <p>All analysis happens locally on your device. Your browsing data never leaves your computer.</p>
        </div>

        <div class="action-buttons">
          <button class="action-btn btn-safe" id="safeBtn">
            <span></span> Mark as Safe
          </button>
          <button class="action-btn btn-proceed" id="proceedBtn">
            <span></span> Proceed Anyway
          </button>
          <button class="action-btn btn-block" id="blockBtn">
            <span></span> Block Site
          </button>
          <button class="action-btn btn-info" id="infoBtn">
            <span></span> More Info
          </button>
        </div>
      </div>
    </div>
  </div>
  <script src="learn-more.js"></script>
</body>
</html>