Real-Time-Website-UI-UX-Analyzer/overlay.html at main · 06navdeep06/Real-Time-Website-UI-UX-Analyzer · 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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UI/UX Analyzer Overlay</title>
    <link rel="stylesheet" href="overlay.css">
</head>
<body>
    <div class="ux-overlay" id="ux-overlay">
        <div class="ux-header">
            <div class="ux-title">
                <h3>UI/UX Analyzer</h3>
                <span class="ux-subtitle">Live UX + UI diagnostics</span>
            </div>
            <button class="ux-close" id="ux-close" aria-label="Close">×</button>
        </div>

        <div class="ux-content">
            <!-- UX Score Section -->
            <div class="ux-score-section">
                <div class="score-display">
                    <div class="score-number" id="ux-score">100</div>
                    <div class="score-label">UX SCORE</div>
                </div>
                <div class="score-status" id="score-status">Excellent</div>
            </div>

            <!-- Performance Metrics -->
            <div class="ux-section">
                <h4>Performance Metrics</h4>
                <div class="metrics-grid">
                    <div class="metric">
                        <span class="metric-label">Page Load</span>
                        <span class="metric-value" id="page-load-time">0ms</span>
                    </div>
                    <div class="metric">
                        <span class="metric-label">LCP</span>
                        <span class="metric-value" id="lcp">0ms</span>
                    </div>
                    <div class="metric">
                        <span class="metric-label">INP</span>
                        <span class="metric-value" id="inp">0ms</span>
                    </div>
                    <div class="metric">
                        <span class="metric-label">CLS</span>
                        <span class="metric-value" id="cls">0</span>
                    </div>
                </div>
            </div>

            <!-- UI Score Section -->
            <div class="ui-score-section">
                <div class="score-display">
                    <div class="score-number ui-score-number" id="ui-score">--</div>
                    <div class="score-label">UI SCORE</div>
                </div>
                <div class="score-status" id="ui-score-status">Analyzing...</div>
            </div>

            <!-- UI Metrics -->
            <div class="ux-section">
                <h4>UI Metrics</h4>
                <div class="metrics-grid">
                    <div class="metric">
                        <span class="metric-label">Visual Consistency</span>
                        <span class="metric-value" id="visual-consistency">--</span>
                    </div>
                    <div class="metric">
                        <span class="metric-label">Readability</span>
                        <span class="metric-value" id="readability">--</span>
                    </div>
                    <div class="metric">
                        <span class="metric-label">Responsiveness</span>
                        <span class="metric-value" id="responsiveness">--</span>
                    </div>
                    <div class="metric">
                        <span class="metric-label">Color Contrast</span>
                        <span class="metric-value" id="color-contrast">--</span>
                    </div>
                </div>
            </div>

            <!-- Broken Elements -->
            <div class="ux-section">
                <h4>Interactive Elements</h4>
                <div class="broken-summary">
                    <div class="metric">
                        <span class="metric-label">Issues Found</span>
                        <span class="metric-value" id="broken-count">0</span>
                    </div>
                </div>
                <div class="broken-list" id="broken-list">
                    <div class="broken-item">Analyzing page...</div>
                </div>
            </div>

            <!-- Actions -->
            <div class="ux-actions">
                <button class="ux-button ux-button-primary" id="refresh-btn">
                    <span class="button-icon">↻</span>
                    Refresh
                </button>
                <button class="ux-button ux-button-secondary" id="toggle-highlights">
                    <span class="button-icon">👁</span>
                    Highlights
                </button>
            </div>
        </div>
    </div>
    <div class="ux-watermark">Made by: Quazar</div>
    <script src="overlay.js"></script>
</body>
</html>