Skip to content

Commit 9084a6d

Browse files
Wolfe-JamWolfe-Jam
committed
🏎️ Major UX & Brand Improvements - Fixed icon overlay, added championship tagline, implemented No Code Grading for non-dev pages, enhanced UI spacing and brand positioning
1 parent 94c22b6 commit 9084a6d

4 files changed

Lines changed: 180 additions & 119 deletions

File tree

‎faf-simple-extension/content-script.js‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// 🏎️⚡️ FAF Extension - Content Script with Wappalyzer-style Analysis
1+
// 🏎️⚡️ FAF Extension - Content Script with F1-Inspired Omni Data Synthesizer
22

33
console.log('🏎️ FAF content script loading...');
44

@@ -13,25 +13,25 @@ document.head.appendChild(script2);
1313

1414
// Wait for scripts to load then initialize
1515
setTimeout(() => {
16-
console.log('🏎️ FAF content script ready with Wappalyzer-style detection');
16+
console.log('🏎️ FAF content script ready with F1-Inspired Omni Data Synthesizer');
1717
}, 100);
1818

1919
// Listen for messages from popup
2020
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
2121
if (request.action === 'analyze') {
22-
console.log('🔍 Starting Wappalyzer-style analysis...');
22+
console.log('🔍 Starting F1-Inspired Omni Data synthesis...');
2323

24-
const analysis = performWappalyzerAnalysis();
24+
const analysis = performF1OmniDataSynthesis();
2525
console.log('✅ Analysis complete:', analysis);
2626

2727
sendResponse(analysis);
2828
}
2929
return true; // Keep message channel open for async response
3030
});
3131

32-
function performWappalyzerAnalysis() {
32+
function performF1OmniDataSynthesis() {
3333
try {
34-
// Use the Wappalyzer-style analyzer
34+
// Use the F1-Inspired Omni Data Synthesizer
3535
const analyzer = new window.FAFAnalyzer();
3636
const result = analyzer.analyze();
3737

@@ -42,23 +42,30 @@ function performWappalyzerAnalysis() {
4242
confidence: result.confidence,
4343
url: window.location.href,
4444
timestamp: new Date().toISOString(),
45-
method: 'Wappalyzer-style Detection'
45+
method: 'F1-Inspired Omni Data Synthesizer'
4646
};
4747
} catch (error) {
4848
console.error('❌ Analyzer failed, falling back to simple detection:', error);
4949
return performFallbackAnalysis();
5050
}
5151
}
5252

53-
// Fallback to simple analysis if Wappalyzer-style fails
53+
// Fallback to simple analysis if F1 Omni Data Synthesis fails
5454
function performFallbackAnalysis() {
5555
const url = window.location.href;
5656
let platform = 'Unknown';
5757
let score = 30;
5858
let details = ['⚠️ Using fallback detection'];
5959

60-
// Simple URL-based detection
61-
if (url.includes('github.com')) {
60+
// Chrome internal pages and other non-development environments
61+
if (url.startsWith('chrome://') || url.startsWith('chrome-extension://') ||
62+
url.includes('chrome.google.com/webstore')) {
63+
platform = 'Browser Interface';
64+
score = null; // No score for non-development pages
65+
details = ['⛔️ No Code Grading available', '🌐 Administrative interface detected', '💡 FAF specializes in development environments'];
66+
}
67+
// Simple URL-based detection for development sites
68+
else if (url.includes('github.com')) {
6269
platform = 'GitHub';
6370
score = 70;
6471
details.push('🐙 GitHub repository detected');

‎faf-simple-extension/popup.html‎

Lines changed: 70 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,14 @@
44
<meta charset="utf-8">
55
<style>
66
:root {
7-
--faf-orange: #ff6b35;
8-
--faf-orange-dark: #e55a00;
9-
--faf-cyan: #00ffff;
10-
--faf-green: #00bf63;
11-
--theme-bg: #FEFCF8;
12-
--theme-bg-secondary: #ffffff;
13-
--theme-text: #1a1a1a;
14-
--theme-text-secondary: #666666;
15-
--theme-border: #e5e5e5;
16-
--theme-border-light: rgba(229, 229, 229, 0.5);
17-
--shadow-color: rgba(0, 0, 0, 0.1);
18-
--shadow-color-strong: rgba(0, 0, 0, 0.15);
7+
--cli-cream: #fefcf8;
8+
--cli-black: #1a1a1a;
9+
--cli-gray: #666666;
10+
--cli-gray-light: #999999;
11+
--cli-green: #00bf63;
12+
--cli-black-btn: #2a2a2a;
13+
--cli-border: #e5e5e5;
14+
--cli-white: #ffffff;
1915
}
2016

2117
* {
@@ -25,18 +21,23 @@
2521
}
2622

2723
body {
28-
width: 340px;
24+
width: 420px;
25+
height: 640px;
2926
font-family: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
30-
background: var(--theme-bg);
31-
color: var(--theme-text);
27+
background: var(--cli-cream);
28+
color: var(--cli-black);
29+
overflow: hidden;
30+
display: flex;
31+
flex-direction: column;
3232
}
3333

3434
.header {
35-
padding: 20px;
36-
background: linear-gradient(135deg, var(--faf-orange) 0%, var(--faf-orange-dark) 100%);
37-
color: white;
35+
padding: 16px 24px;
36+
background: var(--cli-black);
37+
color: var(--cli-white);
3838
text-align: center;
3939
position: relative;
40+
flex-shrink: 0;
4041
}
4142

4243
.header::after {
@@ -46,7 +47,7 @@
4647
left: 0;
4748
right: 0;
4849
height: 3px;
49-
background: linear-gradient(90deg, var(--faf-cyan), var(--faf-green));
50+
background: var(--cli-green);
5051
}
5152

5253
.header h1 {
@@ -63,101 +64,108 @@
6364
}
6465

6566
.content {
66-
padding: 24px 20px;
67+
padding: 18px 24px;
68+
flex: 1;
69+
display: flex;
70+
flex-direction: column;
71+
overflow: hidden;
6772
}
6873

6974
.score-section {
7075
text-align: center;
71-
margin-bottom: 24px;
76+
margin-bottom: 16px;
77+
flex-shrink: 0;
7278
}
7379

7480
.score-label {
7581
font-size: 11px;
7682
text-transform: uppercase;
7783
letter-spacing: 1px;
78-
color: var(--theme-text-secondary);
79-
margin-bottom: 12px;
84+
color: var(--cli-gray);
85+
margin-bottom: 8px;
8086
font-weight: 600;
8187
}
8288

8389
.score {
84-
font-size: 64px;
90+
font-size: 48px;
8591
font-weight: 900;
8692
letter-spacing: -2px;
8793
line-height: 0.9;
88-
margin-bottom: 12px;
89-
background: linear-gradient(135deg, var(--faf-orange) 0%, var(--faf-cyan) 100%);
90-
background-clip: text;
91-
-webkit-background-clip: text;
92-
-webkit-text-fill-color: transparent;
94+
margin-bottom: 8px;
95+
color: var(--cli-green);
9396
}
9497

9598
.grade {
9699
display: inline-block;
97100
padding: 6px 12px;
98-
background: var(--theme-text);
101+
background: var(--cli-green);
99102
color: white;
100103
font-size: 14px;
101104
font-weight: 700;
102105
border-radius: 6px;
103106
letter-spacing: 1px;
104-
margin-bottom: 24px;
107+
margin-bottom: 16px;
105108
}
106109

107110
.details {
108-
font-size: 12px;
109-
line-height: 1.7;
110-
color: var(--theme-text-secondary);
111-
background: var(--theme-bg-secondary);
112-
border: 1px solid var(--theme-border-light);
113-
border-radius: 12px;
111+
font-size: 13px;
112+
line-height: 1.6;
113+
color: var(--cli-gray);
114+
background: var(--cli-white);
115+
border: 1px solid var(--cli-border);
116+
border-radius: 8px;
114117
padding: 16px;
115-
margin-bottom: 20px;
116-
box-shadow: 0 2px 4px var(--shadow-color);
118+
margin-bottom: 16px;
119+
flex: 1;
120+
overflow-y: auto;
117121
}
118122

119123
.details strong {
120-
color: var(--theme-text);
124+
color: var(--cli-black);
121125
font-weight: 600;
122126
}
123127

124128
button {
125129
width: 100%;
126-
padding: 16px 20px;
127-
background: linear-gradient(135deg, var(--faf-orange) 0%, var(--faf-orange-dark) 100%);
130+
padding: 12px 20px;
131+
background: var(--cli-green);
128132
color: white;
129133
border: none;
130-
border-radius: 12px;
134+
border-radius: 8px;
131135
font-size: 14px;
132136
font-weight: 700;
133137
cursor: pointer;
134138
font-family: inherit;
135139
letter-spacing: -0.3px;
136-
transition: all 0.2s ease;
137-
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
140+
transition: opacity 0.2s ease;
141+
flex-shrink: 0;
138142
}
139143

140144
button:hover {
141-
transform: translateY(-2px);
142-
box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);
145+
opacity: 0.9;
143146
}
144147

145148
button:active {
146-
transform: translateY(-1px);
149+
opacity: 0.8;
147150
}
148151

149152
.loading {
150153
text-align: center;
151-
padding: 60px 20px;
152-
color: var(--theme-text-secondary);
154+
padding: 40px 24px;
155+
color: var(--cli-gray);
153156
font-size: 14px;
157+
flex: 1;
158+
display: flex;
159+
flex-direction: column;
160+
justify-content: center;
161+
align-items: center;
154162
}
155163

156164
.loading-spinner {
157165
width: 32px;
158166
height: 32px;
159-
border: 3px solid var(--theme-border);
160-
border-top-color: var(--faf-orange);
167+
border: 3px solid var(--cli-border);
168+
border-top-color: var(--cli-green);
161169
border-radius: 50%;
162170
animation: spin 1s ease-in-out infinite;
163171
margin: 0 auto 16px;
@@ -169,23 +177,15 @@
169177

170178
/* High score celebration for 90%+ */
171179
.score.champion {
172-
animation: championGlow 2s ease-in-out infinite;
173-
}
174-
175-
@keyframes championGlow {
176-
0%, 100% {
177-
filter: drop-shadow(0 0 10px var(--faf-cyan));
178-
}
179-
50% {
180-
filter: drop-shadow(0 0 20px var(--faf-cyan));
181-
}
180+
color: var(--cli-green);
181+
font-weight: 900;
182182
}
183183
</style>
184184
</head>
185185
<body>
186186
<div class="header">
187-
<h1>FAF Context Analyzer</h1>
188-
<div class="subtitle">AI-Ready Context Extraction</div>
187+
<h1>.faf AI-CONTEXT card</h1>
188+
<div class="subtitle">AI-Readiness Evaluation</div>
189189
</div>
190190

191191
<div id="loading" class="loading">
@@ -195,14 +195,18 @@ <h1>FAF Context Analyzer</h1>
195195

196196
<div id="results" class="content" style="display: none;">
197197
<div class="score-section">
198-
<div class="score-label">CONTEXT SCORE ⚡️</div>
198+
<div class="score-label">AI-Context ⚡️READY Score</div>
199199
<div id="score" class="score">--</div>
200200
<div id="grade" class="grade">-</div>
201201
</div>
202202

203203
<div id="details" class="details"></div>
204204

205-
<button id="download">📊 Generate Report</button>
205+
<button id="download">📊 GENERATE FREE REPORT</button>
206+
207+
<div style="text-align: center; margin-top: 12px; padding-top: 2rem; font-size: 12px; color: var(--cli-gray); font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 4px;">
208+
.faf <img src="orange-smiley-16 Background Removed.png" style="width: 28px; height: 28px; vertical-align: middle;"> Make your AI happy!
209+
</div>
206210
</div>
207211

208212
<script src="popup.js"></script>

0 commit comments

Comments
 (0)