jassim/Keyword-research-analysis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui changes

Browse Source
This commit is contained in:
jassim 2025-11-05 11:57:23 +05:30
parent c2fe1a3ca6
commit 94b41532c7
6 changed files with 193 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

180
SIMPLIFIED_FLOW.md
View File

@ -1,8 +1,8 @@
# ✅ SIMPLIFIED FLOW - Informational Keywords Only
# SIMPLIFIED FLOW - Informational Keywords Only
## 🎯 What Changed
## What Changed
### 1. **Fixed Domain Format** (Critical!)
### 1. Fixed Domain Format (Critical)
**Before (WRONG):**
```
*|or|competitor1|+|or|competitor2|-|or|client
@ -13,38 +13,36 @@
-|or|client|+|or|competitor1|+|or|competitor2
```
### 2. **Removed Unnecessary Complexity**
- ❌ Removed "At Least One Competitor" tab
- ❌ Removed "All Competitors Have" tab
- ✅ **Just show: Informational Gap Keywords (Intent=1)**
### 2. Removed Unnecessary Complexity
- Removed "At Least One Competitor" tab
- Removed "All Competitors Have" tab
- **Just show: Informational Gap Keywords (Intent=1)**
### 3. **Added phrase_this Validation**
- ✅ Checkbox enabled by default
- ✅ Each keyword hits: `https://api.semrush.com/?type=phrase_this&phrase=KEYWORD&export_columns=In`
- ✅ Cost: 10 units per keyword
- ✅ Shows in Network tab
### 3. Added phrase_this Validation
- Checkbox enabled by default
- Each keyword hits: `https://api.semrush.com/?type=phrase_this&phrase=KEYWORD&export_columns=In`
- Cost: 10 units per keyword
- Shows in Network tab
### 4. **Simplified Output**
- ✅ Domain Metrics (kept)
- ✅ Informational Gap Keywords only
- ✅ API Usage Report with phrase_this breakdown
- ❌ No complex tabs or multiple views
### 4. Simplified Output
- Domain Metrics (kept)
- Informational Gap Keywords only
- API Usage Report with phrase_this breakdown
- No complex tabs or multiple views
---
## 🔄 Complete Flow (Simplified)
## Complete Flow (Simplified)
**USER FILLS FORM**
- Client: evendigit.com
- Competitor 1: infidigit.com
- Competitor 2: ignitevisibility.com
- Display Limit: 100
- Validate with phrase_this (checked)
**STEP 1: domain_domains API Call**
```
USER FILLS FORM
├─ Client: evendigit.com
├─ Competitor 1: infidigit.com
├─ Competitor 2: ignitevisibility.com
├─ Display Limit: 100
└─ ✅ Validate with phrase_this (checked)
↓
┌──────────────────────────────────────────────┐
│ STEP 1: domain_domains API Call │
└──────────────────────────────────────────────┘
GET /api/semrush/?type=domain_domains
&domains=-|or|evendigit.com|+|or|infidigit.com|+|or|ignitevisibility.com
&display_limit=100
@ -52,73 +50,73 @@ GET /api/semrush/?type=domain_domains
Response: 68 keywords (all intents)
Cost: 680 units
↓
┌──────────────────────────────────────────────┐
│ STEP 2: phrase_this API Validation │
│ (EACH keyword validated) │
└──────────────────────────────────────────────┘
```
**STEP 2: phrase_this API Validation (EACH keyword validated)**
For EACH of the 68 keywords:
1. GET /api/semrush/?type=phrase_this&phrase=seo+tips&export_columns=In
Response: Intent=1 → ✅ KEEP
Response: Intent=1 → KEEP
2. GET /api/semrush/?type=phrase_this&phrase=buy+seo+tools&export_columns=In
Response: Intent=3 → ❌ REMOVE
Response: Intent=3 → REMOVE
3. GET /api/semrush/?type=phrase_this&phrase=seo+guide&export_columns=In
Response: Intent=1 → ✅ KEEP
Response: Intent=1 → KEEP
... (65 more API calls)
```
Total phrase_this calls: 68
Cost: 68 × 10 = 680 units
Result: 46 keywords with Intent=1
↓
┌──────────────────────────────────────────────┐
│ STEP 3: Fetch Domain Metrics │
└──────────────────────────────────────────────┘
Parallel calls for 3 domains:
- domain_ranks (3 calls × 10 = 30 units)
- backlinks_overview (3 calls × 10 = 30 units)
- backlinks_refdomains (3 calls × 100 = 300 units)
Cost: 360 units
↓
┌──────────────────────────────────────────────┐
│ STEP 4: Display Results │
└──────────────────────────────────────────────┘
📊 API Usage Report
├─ Total Units: 1,720
├─ Cost: $0.086
└─ phrase_this: 68 calls, 680 units
🎯 Informational Gap Keywords: 46
├─ Keywords competitors have, client doesn't
└─ All verified as Intent=1 (Informational)
📍 Domain Metrics (3 domains)
├─ Client: evendigit.com
│ ├─ Authority Score: 29
│ ├─ Organic Traffic: 73
│ └─ Organic Keywords: 641
├─ Competitor 1: infidigit.com
└─ Competitor 2: ignitevisibility.com
```
**STEP 3: Fetch Domain Metrics**
Parallel calls for 3 domains:
- domain_ranks (3 calls × 10 = 30 units)
- backlinks_overview (3 calls × 10 = 30 units)
- backlinks_refdomains (3 calls × 100 = 300 units)
```
Cost: 360 units
```
**STEP 4: Display Results**
API Usage Report
- Total Units: 1,720
- Cost: $0.086
- phrase_this: 68 calls, 680 units
Informational Gap Keywords: 46
- Keywords competitors have, client doesn't
- All verified as Intent=1 (Informational)
Domain Metrics (3 domains)
- Client: evendigit.com
- Authority Score: 29
- Organic Traffic: 73
- Organic Keywords: 641
- Competitor 1: infidigit.com
- Competitor 2: ignitevisibility.com
---
## 🧪 Console Output Example
## Console Output Example
When you run with `validateWithPhrasethis=true`, you'll see:
```bash
══════════════════════════════════════════════════════════
🔍 PHRASE_THIS API VALIDATION - Intent Verification
PHRASE_THIS API VALIDATION - Intent Verification
══════════════════════════════════════════════════════════
📊 Keywords to validate: 68
💰 Cost: 68 keywords × 10 units = 680 units
💵 Estimated: $0.0340
🔍 API: https://api.semrush.com/?type=phrase_this&phrase=KEYWORD&export_columns=In
Keywords to validate: 68
Cost: 68 keywords × 10 units = 680 units
Estimated: $0.0340
API: https://api.semrush.com/?type=phrase_this&phrase=KEYWORD&export_columns=In
══════════════════════════════════════════════════════════
[BATCH 1/7] Validating keywords 1-10...
@ -131,31 +129,31 @@ When you run with `validateWithPhrasethis=true`, you'll see:
URL: /api/semrush/?type=phrase_this&phrase=seo+tips&database=us&export_columns=In&key=***
Cost: 10 units
Response: Intent = 1
[RESULT] "seo tips" - Intent: Informational (1) ✅ INFORMATIONAL
[RESULT] "seo tips" - Intent: Informational (1) [INFORMATIONAL]
✅ "seo tips" → Intent=1 (Informational) - KEPT
❌ "buy seo tools" → Intent=3 (Transactional) - FILTERED OUT
✅ "seo guide" → Intent=1 (Informational) - KEPT
[KEPT] "seo tips" → Intent=1 (Informational)
[FILTERED] "buy seo tools" → Intent=3 (Transactional)
[KEPT] "seo guide" → Intent=1 (Informational)
[BATCH 1] ✅ Complete: 7/10 keywords are Informational
[BATCH 1] Complete: 7/10 keywords are Informational
... (batches 2-7)
══════════════════════════════════════════════════════════
📊 VALIDATION COMPLETE
VALIDATION COMPLETE
══════════════════════════════════════════════════════════
📥 Keywords received: 68
🔍 API calls made: 68
✅ Keywords validated (Intent=1): 46
❌ Keywords filtered out: 22
💰 Total units consumed: 680 units
💵 Total cost: $0.0340
Keywords received: 68
API calls made: 68
Keywords validated (Intent=1): 46
Keywords filtered out: 22
Total units consumed: 680 units
Total cost: $0.0340
══════════════════════════════════════════════════════════
```
---
## 🌐 Network Tab - You'll See
## Network Tab - You'll See
```
Name Status Type Size
@ -175,16 +173,16 @@ backlinks_overview?target=evendigit.com&... 200 xhr 245B
---
## ✅ What You Get
## What You Get
1. **API Usage Report** - Shows total units, cost, and phrase_this breakdown
2. **Informational Gap Keywords** - ONLY Intent=1 keywords (simplified!)
2. **Informational Gap Keywords** - ONLY Intent=1 keywords (simplified)
3. **Domain Metrics** - Authority Score, Traffic, Keywords, Backlinks
4. **No unnecessary tabs** - Clean, single view
---
## 🚀 Ready to Test!
## Ready to Test
1. **Refresh browser** (Cmd+Shift+R)
2. **Fill form:**
@ -192,10 +190,10 @@ backlinks_overview?target=evendigit.com&... 200 xhr 245B
- Competitor 1: `infidigit.com`
- Competitor 2: `ignitevisibility.com`
- Display Limit: `100`
- ✅ **Validate with phrase_this** (checked by default)
- **Validate with phrase_this** (checked by default)
3. **Open Network tab**
4. **Click "Run Unified Analysis"**
5. **Watch phrase_this calls appear!** 🎉
5. **Watch phrase_this calls appear**
Each keyword will hit the phrase_this API and you'll see it in the Network tab!
Each keyword will hit the phrase_this API and you'll see it in the Network tab.

25
src/App.css
View File

@ -1,18 +1,19 @@
.app {
min-height: 100vh;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
background: #f5f5f5;
padding: 20px;
}
.app-header {
text-align: center;
color: white;
color: #1a1a1a;
margin-bottom: 40px;
animation: fadeInDown 0.6s ease-out;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background: #ffffff;
padding: 40px 20px;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
border: 2px solid #1a1a1a;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.app-header h1 {
@ -57,17 +58,17 @@
}
.mode-btn:hover:not(:disabled) {
border-color: #667eea;
color: #667eea;
border-color: #1a1a1a;
color: #1a1a1a;
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(102, 126, 234, 0.15);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.mode-btn.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-color: #667eea;
background: #1a1a1a;
border-color: #1a1a1a;
color: white;
box-shadow: 0 6px 12px rgba(102, 126, 234, 0.3);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
transform: translateY(-2px);
}
@ -79,7 +80,7 @@
.mode-btn.active:hover {
transform: translateY(-3px);
box-shadow: 0 8px 16px rgba(102, 126, 234, 0.4);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}
.progress-container {
@ -102,7 +103,7 @@
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
background: #1a1a1a;
border-radius: 4px;
transition: width 0.3s ease;
}

14
src/components/KeywordForm.css
View File

@ -26,10 +26,10 @@
.form-section h2 {
font-size: clamp(1.25rem, 3vw, 1.5rem);
color: #333;
color: #1a1a1a;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #667eea;
border-bottom: 2px solid #1a1a1a;
}
.form-section h3 {
@ -69,8 +69,8 @@
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
border-color: #1a1a1a;
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}
.form-group input:disabled,
@ -89,9 +89,9 @@
.submit-btn {
width: 100%;
padding: 16px 24px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background: #1a1a1a;
color: white;
border: none;
border: 2px solid #1a1a1a;
border-radius: 10px;
font-size: 1.1rem;
font-weight: 600;
@ -106,7 +106,7 @@
.submit-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.submit-btn:active:not(:disabled) {

148
src/components/UnifiedAnalysis.css
View File

@ -3,7 +3,7 @@
margin: 0 auto;
padding: 32px 24px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background: #f5f5f5;
min-height: 100vh;
}
@ -25,10 +25,7 @@
margin: 0 0 8px 0;
font-size: 32px;
font-weight: 800;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: #1a1a1a;
}
.header-content p {
@ -50,15 +47,15 @@
align-items: center;
gap: 10px;
padding: 14px 24px;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
border: none;
background: #1a1a1a;
border: 2px solid #1a1a1a;
border-radius: 10px;
color: white;
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
@ -78,8 +75,8 @@
.hookpilot-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
background: linear-gradient(135deg, #059669 0%, #047857 100%);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
background: #000000;
}
.hookpilot-btn:hover:not(:disabled)::before {
@ -97,13 +94,13 @@
}
.hookpilot-btn.sending {
background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
background: #4a4a4a;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.hookpilot-btn.success {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
background: #1a1a1a;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
animation: successPulse 0.6s ease-out;
}
@ -143,8 +140,8 @@
align-items: center;
gap: 8px;
padding: 12px 20px;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
background: #1a1a1a;
border: 2px solid #1a1a1a;
border-radius: 8px;
color: white;
font-weight: 500;
@ -153,8 +150,9 @@
}
.export-btn:hover {
background: rgba(255, 255, 255, 0.3);
background: #000000;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.hookpilot-status {
@ -218,9 +216,9 @@
}
.tab-btn.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background: #1a1a1a;
color: white;
box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.tab-count {
@ -320,7 +318,7 @@
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background: #1a1a1a;
border-radius: 12px;
color: white;
}
@ -381,10 +379,7 @@
margin: 0 0 32px 0;
font-size: 28px;
font-weight: 800;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: #1a1a1a;
display: flex;
align-items: center;
gap: 12px;
@ -410,9 +405,9 @@
}
.metric-card:hover {
box-shadow: 0 20px 60px rgba(102, 126, 234, 0.25);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
transform: translateY(-6px);
border-color: rgba(102, 126, 234, 0.5);
border-color: #1a1a1a;
}
.metric-card:active {
@ -420,13 +415,13 @@
}
.metric-card.client-card {
background: linear-gradient(135deg, rgba(219, 234, 254, 0.95) 0%, rgba(191, 219, 254, 0.95) 100%);
border: 2px solid rgba(59, 130, 246, 0.3);
background: #ffffff;
border: 2px solid #1a1a1a;
}
.metric-card.client-card:hover {
border-color: rgba(59, 130, 246, 0.6);
box-shadow: 0 20px 60px rgba(59, 130, 246, 0.3);
border-color: #000000;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.metric-card.competitor-card {
@ -434,8 +429,8 @@
}
.metric-card.competitor-card:hover {
border-color: rgba(139, 92, 246, 0.5);
box-shadow: 0 20px 60px rgba(139, 92, 246, 0.2);
border-color: #4a4a4a;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
/* Card Header */
@ -444,14 +439,14 @@
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
border-bottom: 2px solid rgba(102, 126, 234, 0.1);
background: #f5f5f5;
border-bottom: 2px solid #e0e0e0;
transition: background-color 0.2s ease;
}
.metric-card.client-card .card-header {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.1) 100%);
border-bottom: 2px solid rgba(59, 130, 246, 0.2);
background: #e8e8e8;
border-bottom: 2px solid #1a1a1a;
}
.metric-card .card-header h4 {
@ -499,12 +494,12 @@
}
.client-badge {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
background: #1a1a1a;
color: white;
}
.competitor-badge {
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
background: #4a4a4a;
color: white;
}
@ -526,15 +521,15 @@
}
.metric-item:hover {
border-color: rgba(102, 126, 234, 0.3);
border-color: #1a1a1a;
background: white;
}
.stage-item {
margin-top: 12px;
padding: 18px 20px;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
border: 2px solid rgba(102, 126, 234, 0.2);
background: #f5f5f5;
border: 2px solid #d0d0d0;
}
.metric-values {
@ -570,10 +565,7 @@
.metric-value {
font-size: 24px;
font-weight: 800;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: #1a1a1a;
}
.stage-badge {
@ -675,10 +667,7 @@
margin: 0;
font-size: 26px;
font-weight: 800;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: #1a1a1a;
}
.keywords-controls {
@ -744,7 +733,7 @@
align-items: center;
gap: 10px;
padding: 14px 20px;
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
background: #f5f5f5;
border-radius: 10px;
border: 1px solid #d1d5db;
transition: all 0.2s ease;
@ -793,7 +782,7 @@
}
.keywords-table th {
background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
background: #f5f5f5;
padding: 16px 20px;
text-align: left;
font-weight: 600;
@ -1058,8 +1047,8 @@
.items-per-page-select:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
border-color: #1a1a1a;
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}
.pagination-controls {
@ -1121,14 +1110,14 @@
}
.pagination-page-btn.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background: #1a1a1a;
color: white;
border-color: #667eea;
box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
border-color: #1a1a1a;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.pagination-page-btn.active:hover {
background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
background: #000000;
transform: translateY(-1px);
}
@ -1265,8 +1254,8 @@
justify-content: space-between;
align-items: center;
padding: 32px 40px;
border-bottom: 2px solid rgba(102, 126, 234, 0.15);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-bottom: 2px solid #e0e0e0;
background: #1a1a1a;
color: white;
}
@ -1327,7 +1316,7 @@
font-weight: 700;
color: #1f2937;
padding-bottom: 12px;
border-bottom: 2px solid rgba(102, 126, 234, 0.15);
border-bottom: 2px solid #e0e0e0;
}
.modal-table-wrapper {
@ -1354,7 +1343,7 @@
color: #4b5563;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 2px solid rgba(102, 126, 234, 0.2);
border-bottom: 2px solid #e0e0e0;
}
.modal-table td {
@ -1379,11 +1368,11 @@
/* Card header hover effect */
.metric-card .card-header:hover {
background: rgba(102, 126, 234, 0.12);
background: #e8e8e8;
}
.metric-card.client-card .card-header:hover {
background: rgba(59, 130, 246, 0.2);
background: #d8d8d8;
}
/* Animations */
@ -1516,18 +1505,19 @@
padding: 12px 32px;
font-size: 15px;
font-weight: 600;
border: none;
border: 2px solid #1a1a1a;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
background: #1a1a1a;
color: white;
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.hookpilot-modal-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
background: #000000;
}
.hookpilot-modal-btn:active {
@ -1536,42 +1526,42 @@
/* Success state styling */
.hookpilot-modal-content.hookpilot-success .hookpilot-modal-header {
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
border-bottom: 2px solid #10b981;
background: #ffffff;
border-bottom: 2px solid #1a1a1a;
}
.hookpilot-modal-content.hookpilot-success .hookpilot-modal-header h3 {
color: #065f46;
color: #1a1a1a;
}
/* Error state styling */
.hookpilot-modal-content.hookpilot-error .hookpilot-modal-header {
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
border-bottom: 2px solid #ef4444;
background: #ffffff;
border-bottom: 2px solid #1a1a1a;
}
.hookpilot-modal-content.hookpilot-error .hookpilot-modal-header h3 {
color: #991b1b;
color: #1a1a1a;
}
/* Warning state styling */
.hookpilot-modal-content.hookpilot-warning .hookpilot-modal-header {
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
border-bottom: 2px solid #f59e0b;
background: #ffffff;
border-bottom: 2px solid #1a1a1a;
}
.hookpilot-modal-content.hookpilot-warning .hookpilot-modal-header h3 {
color: #92400e;
color: #1a1a1a;
}
/* Sending state styling */
.hookpilot-modal-content.hookpilot-sending .hookpilot-modal-header {
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
border-bottom: 2px solid #3b82f6;
background: #f5f5f5;
border-bottom: 2px solid #1a1a1a;
}
.hookpilot-modal-content.hookpilot-sending .hookpilot-modal-header h3 {
color: #1e40af;
color: #1a1a1a;
}
/* Responsive adjustments */

25
src/components/UnifiedAnalysis.jsx
View File

@ -284,12 +284,13 @@ function UnifiedAnalysis({ analysisData }) {
{/* API Usage Report */}
{apiUsage && (
<div style={{
background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
background: '#1a1a1a',
borderRadius: '12px',
padding: '24px',
marginBottom: '32px',
color: 'white',
boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
border: '2px solid #1a1a1a'
}}>
<h3 style={{ margin: '0 0 16px 0', fontSize: '20px', fontWeight: '700' }}>
📊 API Usage & Cost Report
@ -308,8 +309,9 @@ function UnifiedAnalysis({ analysisData }) {
<div style={{
marginTop: '16px',
padding: '12px',
background: 'rgba(255,255,255,0.15)',
borderRadius: '8px'
background: 'rgba(255,255,255,0.2)',
borderRadius: '8px',
border: '1px solid rgba(255,255,255,0.3)'
}}>
<strong>🔍 phrase_this Validation:</strong> {apiUsage.breakdown.phrase_this.calls || 0} API calls, {apiUsage.breakdown.phrase_this.units?.toLocaleString() || 0} units consumed
</div>
@ -346,17 +348,17 @@ function UnifiedAnalysis({ analysisData }) {
<div className="warning-message" style={{
padding: '16px 20px',
marginBottom: '24px',
backgroundColor: '#fef3c7',
border: '1px solid #fbbf24',
backgroundColor: '#f5f5f5',
border: '2px solid #1a1a1a',
borderRadius: '8px',
display: 'flex',
alignItems: 'center',
gap: '12px'
}}>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M10 18a8 8 0 100-16 8 8 0 000 16zM9 9a1 1 0 012 0v4a1 1 0 11-2 0V9zm1-4a1 1 0 100 2 1 1 0 000-2z" fill="#f59e0b"/>
<path d="M10 18a8 8 0 100-16 8 8 0 000 16zM9 9a1 1 0 012 0v4a1 1 0 11-2 0V9zm1-4a1 1 0 100 2 1 1 0 000-2z" fill="#1a1a1a"/>
</svg>
<span style={{ color: '#92400e', fontWeight: '500' }}>
<span style={{ color: '#1a1a1a', fontWeight: '500' }}>
No keyword opportunities found. All competitors may have similar keyword profiles to your client.
</span>
</div>
@ -365,12 +367,13 @@ function UnifiedAnalysis({ analysisData }) {
{/* Simplified Header - Just Informational Keywords */}
{hasKeywordOpportunities && (
<div style={{
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
background: '#1a1a1a',
padding: '20px 24px',
borderRadius: '12px',
color: 'white',
marginBottom: '20px',
boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
border: '2px solid #1a1a1a'
}}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '16px' }}>
<div>
@ -785,7 +788,7 @@ function UnifiedAnalysis({ analysisData }) {
{hookpilotModal.status === 'sending' && (
<p className="hookpilot-subtext">
You will be notified once the operation completes or if any issues occur.
Sending to Hookpilot... You will get an email once completed or if any issues occur.
</p>
)}

2
src/index.css
View File

@ -10,7 +10,7 @@ body {
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background: #f5f5f5;
min-height: 100vh;
padding: 20px;
}