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

170
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):** **Before (WRONG):**
``` ```
*|or|competitor1|+|or|competitor2|-|or|client *|or|competitor1|+|or|competitor2|-|or|client
@ -13,38 +13,36 @@
-|or|client|+|or|competitor1|+|or|competitor2 -|or|client|+|or|competitor1|+|or|competitor2
``` ```
### 2. **Removed Unnecessary Complexity** ### 2. Removed Unnecessary Complexity
- ❌ Removed "At Least One Competitor" tab - Removed "At Least One Competitor" tab
- ❌ Removed "All Competitors Have" tab - Removed "All Competitors Have" tab
- ✅ **Just show: Informational Gap Keywords (Intent=1)** - **Just show: Informational Gap Keywords (Intent=1)**
### 3. **Added phrase_this Validation** ### 3. Added phrase_this Validation
- ✅ Checkbox enabled by default - Checkbox enabled by default
- ✅ Each keyword hits: `https://api.semrush.com/?type=phrase_this&phrase=KEYWORD&export_columns=In` - Each keyword hits: `https://api.semrush.com/?type=phrase_this&phrase=KEYWORD&export_columns=In`
- ✅ Cost: 10 units per keyword - Cost: 10 units per keyword
- ✅ Shows in Network tab - Shows in Network tab
### 4. **Simplified Output** ### 4. Simplified Output
- ✅ Domain Metrics (kept) - Domain Metrics (kept)
- ✅ Informational Gap Keywords only - Informational Gap Keywords only
- ✅ API Usage Report with phrase_this breakdown - API Usage Report with phrase_this breakdown
- ❌ No complex tabs or multiple views - 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 GET /api/semrush/?type=domain_domains
&domains=-|or|evendigit.com|+|or|infidigit.com|+|or|ignitevisibility.com &domains=-|or|evendigit.com|+|or|infidigit.com|+|or|ignitevisibility.com
&display_limit=100 &display_limit=100
@ -52,73 +50,73 @@ GET /api/semrush/?type=domain_domains
Response: 68 keywords (all intents) Response: 68 keywords (all intents)
Cost: 680 units Cost: 680 units
↓ ```
┌──────────────────────────────────────────────┐
│ STEP 2: phrase_this API Validation │ **STEP 2: phrase_this API Validation (EACH keyword validated)**
│ (EACH keyword validated) │
└──────────────────────────────────────────────┘
For EACH of the 68 keywords: For EACH of the 68 keywords:
1. GET /api/semrush/?type=phrase_this&phrase=seo+tips&export_columns=In 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 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 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) ... (65 more API calls)
```
Total phrase_this calls: 68 Total phrase_this calls: 68
Cost: 68 × 10 = 680 units Cost: 68 × 10 = 680 units
Result: 46 keywords with Intent=1 Result: 46 keywords with Intent=1
↓ ```
┌──────────────────────────────────────────────┐
│ STEP 3: Fetch Domain Metrics │ **STEP 3: Fetch Domain Metrics**
└──────────────────────────────────────────────┘
Parallel calls for 3 domains: Parallel calls for 3 domains:
- domain_ranks (3 calls × 10 = 30 units) - domain_ranks (3 calls × 10 = 30 units)
- backlinks_overview (3 calls × 10 = 30 units) - backlinks_overview (3 calls × 10 = 30 units)
- backlinks_refdomains (3 calls × 100 = 300 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
``` ```
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: When you run with `validateWithPhrasethis=true`, you'll see:
```bash ```bash
══════════════════════════════════════════════════════════ ══════════════════════════════════════════════════════════
🔍 PHRASE_THIS API VALIDATION - Intent Verification PHRASE_THIS API VALIDATION - Intent Verification
══════════════════════════════════════════════════════════ ══════════════════════════════════════════════════════════
📊 Keywords to validate: 68 Keywords to validate: 68
💰 Cost: 68 keywords × 10 units = 680 units Cost: 68 keywords × 10 units = 680 units
💵 Estimated: $0.0340 Estimated: $0.0340
🔍 API: https://api.semrush.com/?type=phrase_this&phrase=KEYWORD&export_columns=In API: https://api.semrush.com/?type=phrase_this&phrase=KEYWORD&export_columns=In
══════════════════════════════════════════════════════════ ══════════════════════════════════════════════════════════
[BATCH 1/7] Validating keywords 1-10... [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=*** URL: /api/semrush/?type=phrase_this&phrase=seo+tips&database=us&export_columns=In&key=***
Cost: 10 units Cost: 10 units
Response: Intent = 1 Response: Intent = 1
[RESULT] "seo tips" - Intent: Informational (1) ✅ INFORMATIONAL [RESULT] "seo tips" - Intent: Informational (1) [INFORMATIONAL]
✅ "seo tips" → Intent=1 (Informational) - KEPT [KEPT] "seo tips" → Intent=1 (Informational)
❌ "buy seo tools" → Intent=3 (Transactional) - FILTERED OUT [FILTERED] "buy seo tools" → Intent=3 (Transactional)
✅ "seo guide" → Intent=1 (Informational) - KEPT [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) ... (batches 2-7)
══════════════════════════════════════════════════════════ ══════════════════════════════════════════════════════════
📊 VALIDATION COMPLETE VALIDATION COMPLETE
══════════════════════════════════════════════════════════ ══════════════════════════════════════════════════════════
📥 Keywords received: 68 Keywords received: 68
🔍 API calls made: 68 API calls made: 68
✅ Keywords validated (Intent=1): 46 Keywords validated (Intent=1): 46
❌ Keywords filtered out: 22 Keywords filtered out: 22
💰 Total units consumed: 680 units Total units consumed: 680 units
💵 Total cost: $0.0340 Total cost: $0.0340
══════════════════════════════════════════════════════════ ══════════════════════════════════════════════════════════
``` ```
--- ---
## 🌐 Network Tab - You'll See ## Network Tab - You'll See
``` ```
Name Status Type Size 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 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 3. **Domain Metrics** - Authority Score, Traffic, Keywords, Backlinks
4. **No unnecessary tabs** - Clean, single view 4. **No unnecessary tabs** - Clean, single view
--- ---
## 🚀 Ready to Test! ## Ready to Test
1. **Refresh browser** (Cmd+Shift+R) 1. **Refresh browser** (Cmd+Shift+R)
2. **Fill form:** 2. **Fill form:**
@ -192,10 +190,10 @@ backlinks_overview?target=evendigit.com&... 200 xhr 245B
- Competitor 1: `infidigit.com` - Competitor 1: `infidigit.com`
- Competitor 2: `ignitevisibility.com` - Competitor 2: `ignitevisibility.com`
- Display Limit: `100` - Display Limit: `100`
- ✅ **Validate with phrase_this** (checked by default) - **Validate with phrase_this** (checked by default)
3. **Open Network tab** 3. **Open Network tab**
4. **Click "Run Unified Analysis"** 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 { .app {
min-height: 100vh; min-height: 100vh;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); background: #f5f5f5;
padding: 20px; padding: 20px;
} }
.app-header { .app-header {
text-align: center; text-align: center;
color: white; color: #1a1a1a;
margin-bottom: 40px; margin-bottom: 40px;
animation: fadeInDown 0.6s ease-out; animation: fadeInDown 0.6s ease-out;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: #ffffff;
padding: 40px 20px; padding: 40px 20px;
border-radius: 16px; 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 { .app-header h1 {
@ -57,17 +58,17 @@
} }
.mode-btn:hover:not(:disabled) { .mode-btn:hover:not(:disabled) {
border-color: #667eea; border-color: #1a1a1a;
color: #667eea; color: #1a1a1a;
transform: translateY(-2px); 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 { .mode-btn.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: #1a1a1a;
border-color: #667eea; border-color: #1a1a1a;
color: white; 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); transform: translateY(-2px);
} }
@ -79,7 +80,7 @@
.mode-btn.active:hover { .mode-btn.active:hover {
transform: translateY(-3px); 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 { .progress-container {
@ -102,7 +103,7 @@
.progress-fill { .progress-fill {
height: 100%; height: 100%;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); background: #1a1a1a;
border-radius: 4px; border-radius: 4px;
transition: width 0.3s ease; transition: width 0.3s ease;
} }

14
src/components/KeywordForm.css
View File

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

148
src/components/UnifiedAnalysis.css
View File

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

25
src/components/UnifiedAnalysis.jsx
View File

@ -284,12 +284,13 @@ function UnifiedAnalysis({ analysisData }) {
{/* API Usage Report */} {/* API Usage Report */}
{apiUsage && ( {apiUsage && (
<div style={{ <div style={{
background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)', background: '#1a1a1a',
borderRadius: '12px', borderRadius: '12px',
padding: '24px', padding: '24px',
marginBottom: '32px', marginBottom: '32px',
color: 'white', 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' }}> <h3 style={{ margin: '0 0 16px 0', fontSize: '20px', fontWeight: '700' }}>
📊 API Usage & Cost Report 📊 API Usage & Cost Report
@ -308,8 +309,9 @@ function UnifiedAnalysis({ analysisData }) {
<div style={{ <div style={{
marginTop: '16px', marginTop: '16px',
padding: '12px', padding: '12px',
background: 'rgba(255,255,255,0.15)', background: 'rgba(255,255,255,0.2)',
borderRadius: '8px' 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 <strong>🔍 phrase_this Validation:</strong> {apiUsage.breakdown.phrase_this.calls || 0} API calls, {apiUsage.breakdown.phrase_this.units?.toLocaleString() || 0} units consumed
</div> </div>
@ -346,17 +348,17 @@ function UnifiedAnalysis({ analysisData }) {
<div className="warning-message" style={{ <div className="warning-message" style={{
padding: '16px 20px', padding: '16px 20px',
marginBottom: '24px', marginBottom: '24px',
backgroundColor: '#fef3c7', backgroundColor: '#f5f5f5',
border: '1px solid #fbbf24', border: '2px solid #1a1a1a',
borderRadius: '8px', borderRadius: '8px',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
gap: '12px' gap: '12px'
}}> }}>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"> <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> </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. No keyword opportunities found. All competitors may have similar keyword profiles to your client.
</span> </span>
</div> </div>
@ -365,12 +367,13 @@ function UnifiedAnalysis({ analysisData }) {
{/* Simplified Header - Just Informational Keywords */} {/* Simplified Header - Just Informational Keywords */}
{hasKeywordOpportunities && ( {hasKeywordOpportunities && (
<div style={{ <div style={{
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', background: '#1a1a1a',
padding: '20px 24px', padding: '20px 24px',
borderRadius: '12px', borderRadius: '12px',
color: 'white', color: 'white',
marginBottom: '20px', 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 style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '16px' }}>
<div> <div>
@ -785,7 +788,7 @@ function UnifiedAnalysis({ analysisData }) {
{hookpilotModal.status === 'sending' && ( {hookpilotModal.status === 'sending' && (
<p className="hookpilot-subtext"> <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> </p>
)} )}

2
src/index.css
View File

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