252 lines
13 KiB
JavaScript
252 lines
13 KiB
JavaScript
const fs = require('fs');
|
|
const path = require('path');
|
|
|
|
const targetPath = path.join(__dirname, 'src/views/pages/marketing/targetologist/components/CampaignPrediction.vue');
|
|
let content = fs.readFileSync(targetPath, 'utf8');
|
|
|
|
const newStyle = `<style scoped>
|
|
/* ═══════════════════════════════════════════
|
|
PREMIUM 3D BASE
|
|
═══════════════════════════════════════════ */
|
|
.cp-section {
|
|
padding: 0;
|
|
font-family: 'Onest', sans-serif;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════
|
|
SKELETON & EMPTY STATE
|
|
═══════════════════════════════════════════ */
|
|
.cp-skeleton-page {
|
|
display: flex; flex-direction: column; gap: 20px;
|
|
}
|
|
.cp-skeleton-card {
|
|
background: #fff;
|
|
border: 1px solid rgba(45, 123, 255, 0.08);
|
|
border-radius: 20px;
|
|
padding: 24px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
|
|
}
|
|
.cp-skeleton-circle, .cp-skeleton-line, .cp-skeleton-label {
|
|
background: linear-gradient(90deg, #F8FAFC 25%, #F1F5F9 50%, #F8FAFC 75%);
|
|
background-size: 200% 100%;
|
|
animation: cp-shimmer 1.5s infinite linear;
|
|
}
|
|
.cp-skeleton-circle { width: 80px; height: 80px; border-radius: 50%; margin-bottom: 20px; }
|
|
.cp-skeleton-line { height: 12px; border-radius: 6px; margin-bottom: 12px; }
|
|
.cp-skeleton-label { width: 120px; height: 12px; border-radius: 6px; margin-bottom: 24px; }
|
|
.w-60 { width: 60%; } .w-40 { width: 40%; } .w-80 { width: 80%; } .w-70 { width: 70%; } .w-full { width: 100%; }
|
|
|
|
@keyframes cp-shimmer {
|
|
0% { background-position: -200% 0; }
|
|
100% { background-position: 200% 0; }
|
|
}
|
|
|
|
.cp-empty-state {
|
|
display: flex; flex-direction: column; align-items: center; gap: 20px;
|
|
padding: 100px 24px;
|
|
background: #fff;
|
|
border-radius: 24px;
|
|
border: 1px dashed rgba(45, 123, 255, 0.2);
|
|
box-shadow: 0 10px 40px rgba(15,23,42,0.02);
|
|
text-align: center;
|
|
}
|
|
.cp-empty-state__orb {
|
|
position: relative; width: 100px; height: 100px;
|
|
}
|
|
.cp-empty-state__orb-ring {
|
|
position: absolute; inset: -10px; border-radius: 50%;
|
|
border: 2px dashed rgba(45, 123, 255, 0.15);
|
|
animation: cp-spin 20s linear infinite;
|
|
}
|
|
@keyframes cp-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
|
.cp-empty-state__icon {
|
|
width: 100%; height: 100%; border-radius: 20px;
|
|
background: linear-gradient(135deg, #2D7BFF, #1E60FF);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 40px; color: #fff;
|
|
box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 8px 16px rgba(45,123,255,0.3);
|
|
}
|
|
.cp-empty-state__title { font-size: 24px; font-weight: 900; color: #0F172A; margin: 0; }
|
|
.cp-empty-state__desc { font-size: 15px; color: #64748B; max-width: 400px; line-height: 1.6; }
|
|
|
|
.cp-btn-glow {
|
|
position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px;
|
|
padding: 16px 32px; border-radius: 14px; border: none;
|
|
background: linear-gradient(135deg, #2D7BFF, #1a6bff); color: #fff;
|
|
font-size: 15px; font-weight: 800; cursor: pointer;
|
|
box-shadow: inset 0 2px 4px rgba(255,255,255,0.3), 0 8px 24px rgba(45, 123, 255, 0.3);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.cp-btn-glow:hover:not(:disabled) { transform: translateY(-3px); box-shadow: inset 0 2px 4px rgba(255,255,255,0.3), 0 16px 36px rgba(45, 123, 255, 0.4); }
|
|
.cp-btn-glow:disabled { opacity: 0.5; filter: grayscale(1); }
|
|
|
|
/* ═══════════════════════════════════════════
|
|
PREMIUM 3D CARDS
|
|
═══════════════════════════════════════════ */
|
|
.cp-card {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(15, 23, 42, 0.05);
|
|
border-radius: 24px;
|
|
padding: 28px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
|
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.02);
|
|
}
|
|
.cp-card:hover {
|
|
box-shadow: 0 16px 40px rgba(45, 123, 255, 0.06);
|
|
transform: translateY(-4px);
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
.cp-card__header {
|
|
display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; position: relative; z-index: 1;
|
|
}
|
|
.cp-card__label {
|
|
display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: #64748B;
|
|
}
|
|
.cp-card__label-dot {
|
|
width: 6px; height: 6px; border-radius: 50%; background: #2D7BFF;
|
|
box-shadow: 0 0 10px rgba(45, 123, 255, 0.6); animation: cp-dot-pulse 2s infinite;
|
|
}
|
|
.cp-card__label--success .cp-card__label-dot { background: #10B981; box-shadow: 0 0 10px rgba(16, 185, 129, 0.6); }
|
|
.cp-card__label--warning .cp-card__label-dot { background: #F59E0B; box-shadow: 0 0 10px rgba(245, 158, 11, 0.6); }
|
|
|
|
.cp-card__badge {
|
|
font-size: 11px; font-weight: 800; padding: 4px 12px; border-radius: 100px;
|
|
background: rgba(45, 123, 255, 0.08); color: #2D7BFF;
|
|
}
|
|
.cp-card__badge--success { background: rgba(16, 185, 129, 0.08); color: #10B981; }
|
|
.cp-card__badge--warning { background: rgba(245, 158, 11, 0.08); color: #F59E0B; }
|
|
.cp-card__count { font-size: 12px; font-weight: 700; color: #94A3B8; }
|
|
|
|
/* ═══════════════════════════════════════════
|
|
SCORE GAUGE - TRUE 3D
|
|
═══════════════════════════════════════════ */
|
|
.cp-hero { display: grid; gap: 20px; grid-template-columns: 1fr; margin-bottom: 20px; }
|
|
@media (min-width: 768px) { .cp-hero { grid-template-columns: 420px 1fr; } }
|
|
|
|
.cp-score-card { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; }
|
|
.cp-gauge-container { position: relative; width: 200px; height: 200px; margin-bottom: 20px; }
|
|
.cp-gauge { position: absolute; inset: -10px; width: 220px; height: 220px; }
|
|
|
|
.cp-gauge-center {
|
|
position: absolute; inset: 15px; background: #fff; border-radius: 50%;
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
box-shadow:
|
|
inset 0 4px 8px rgba(0,0,0,0.05),
|
|
0 8px 16px rgba(45,123,255,0.1);
|
|
}
|
|
.cp-gauge-value {
|
|
font-size: 56px; font-weight: 900; line-height: 1; letter-spacing: -0.04em;
|
|
background: linear-gradient(135deg, #2D7BFF, #10B981);
|
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
|
filter: drop-shadow(0 4px 8px rgba(45,123,255,0.2));
|
|
}
|
|
.cp-gauge-max { font-size: 15px; font-weight: 800; color: #94A3B8; margin-top: 4px; }
|
|
|
|
.cp-score-meta { display: flex; flex-direction: column; align-items: center; gap: 8px; }
|
|
.cp-score-label { font-size: 18px; font-weight: 900; }
|
|
.cp-score-confidence { font-size: 13.5px; color: #64748B; font-weight: 700; display: flex; align-items: center; gap: 6px; }
|
|
|
|
/* ═══════════════════════════════════════════
|
|
PREMIUM METRICS GRID
|
|
═══════════════════════════════════════════ */
|
|
.cp-metrics-card { display: flex; flex-direction: column; }
|
|
.cp-metrics-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
|
|
@media (min-width: 1024px) { .cp-metrics-grid { grid-template-columns: repeat(3, 1fr); } }
|
|
|
|
.cp-metric-card {
|
|
background: #fff; border: 1px solid rgba(15, 23, 42, 0.04);
|
|
border-radius: 20px; padding: 24px; position: relative; overflow: hidden;
|
|
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02);
|
|
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
.cp-metric-card:hover {
|
|
transform: translateY(-4px); box-shadow: 0 12px 24px rgba(45, 123, 255, 0.08);
|
|
}
|
|
.cp-metric-card__header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
|
|
.cp-metric-icon {
|
|
width: 44px; height: 44px; border-radius: 12px;
|
|
background: linear-gradient(135deg, rgba(45,123,255,0.1), rgba(45,123,255,0.02));
|
|
color: #2D7BFF; display: flex; align-items: center; justify-content: center; font-size: 18px;
|
|
box-shadow: inset 0 2px 4px rgba(255,255,255,0.5);
|
|
}
|
|
.cp-metric-name { font-size: 12px; font-weight: 800; color: #64748B; text-transform: uppercase; letter-spacing: 0.08em; }
|
|
.cp-metric-value { font-size: 18px; font-weight: 900; color: #0F172A; margin-bottom: 14px; }
|
|
|
|
.cp-metric-bar { height: 8px; border-radius: 100px; background: rgba(15, 23, 42, 0.04); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); }
|
|
.cp-metric-bar-fill {
|
|
height: 100%; border-radius: 100px;
|
|
background: linear-gradient(90deg, #2D7BFF, #10B981);
|
|
box-shadow: 0 2px 4px rgba(45, 123, 255, 0.3);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════
|
|
AI RECOMMENDATIONS BENTO
|
|
═══════════════════════════════════════════ */
|
|
.cp-rec-carousel { display: flex; flex-direction: column; gap: 16px; }
|
|
.cp-rec-card {
|
|
padding: 24px; background: #fff; border: 1px solid rgba(45, 123, 255, 0.08); border-radius: 20px;
|
|
transition: all 0.3s; box-shadow: 0 4px 12px rgba(0,0,0,0.02);
|
|
}
|
|
.cp-rec-card:hover { transform: translateX(6px); border-color: rgba(45, 123, 255, 0.2); box-shadow: 0 12px 32px rgba(45, 123, 255, 0.06); }
|
|
.cp-rec-header { display: flex; gap: 10px; margin-bottom: 14px; }
|
|
.cp-rec-title { font-size: 16px; font-weight: 900; color: #0F172A; margin-bottom: 8px; }
|
|
.cp-rec-desc { font-size: 14px; color: #475569; line-height: 1.6; margin-bottom: 16px; font-weight: 500; }
|
|
.cp-rec-impact {
|
|
display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; color: #10B981;
|
|
padding: 8px 16px; background: rgba(16, 185, 129, 0.08); border-radius: 12px;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════
|
|
GRID & UTILS
|
|
═══════════════════════════════════════════ */
|
|
.cp-grid-3 { display: grid; gap: 20px; grid-template-columns: 1fr; }
|
|
@media (min-width: 768px) { .cp-grid-3 { grid-template-columns: repeat(3, 1fr); } }
|
|
|
|
.cp-insight-card { display: flex; flex-direction: column; gap: 14px; }
|
|
.cp-insight-card__icon {
|
|
width: 48px; height: 48px; border-radius: 14px;
|
|
display: flex; align-items: center; justify-content: center; font-size: 20px;
|
|
box-shadow: inset 0 2px 4px rgba(255,255,255,0.5);
|
|
}
|
|
.cp-insight-text { font-size: 15px; color: #0F172A; font-weight: 700; }
|
|
|
|
.cp-budget-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); margin-top: 10px; }
|
|
.cp-budget-block { padding: 20px; background: #f8fafc; border-radius: 16px; border: 1px solid rgba(15,23,42,0.04); }
|
|
.cp-cpl-badge {
|
|
display: flex; align-items: center; gap: 16px; margin-top: 24px; padding: 20px;
|
|
background: linear-gradient(135deg, rgba(16, 185, 129, 0.06), rgba(16, 185, 129, 0.02));
|
|
border: 1px solid rgba(16, 185, 129, 0.15); border-radius: 16px;
|
|
}
|
|
|
|
.cp-competitive-layout { display: flex; flex-direction: row; gap: 32px; align-items: center; }
|
|
.cp-advantage-list { display: flex; flex-direction: column; gap: 12px; }
|
|
.cp-advantage-item { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; font-weight: 600; color: #334155; }
|
|
.cp-advantage-icon { color: #2D7BFF; font-size: 16px; margin-top: 2px; }
|
|
.cp-market-saturation { padding: 20px; border-radius: 16px; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.02); border: 1px solid rgba(45,123,255,0.08); }
|
|
|
|
.cp-check-list, .cp-warning-list { display: flex; flex-direction: column; gap: 12px; list-style:none; padding:0; margin:0; }
|
|
.cp-check-item, .cp-warning-item { display: flex; gap: 12px; font-size: 14px; font-weight: 600; color: #334155; line-height: 1.6; }
|
|
.cp-check-icon, .cp-warning-icon { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items:center; justify-content:center; }
|
|
.cp-check-icon { background: rgba(16,185,129,0.1); color: #10B981; } .cp-warning-icon { background: rgba(245,158,11,0.1); color: #F59E0B; }
|
|
|
|
.mb-4 { margin-bottom: 24px; }
|
|
.cp-grid-2 { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); }
|
|
</style>`;
|
|
|
|
const startIndex = content.indexOf('<style scoped>');
|
|
const endIndex = content.indexOf('</style>') + '</style>'.length;
|
|
|
|
if (startIndex !== -1 && endIndex !== -1) {
|
|
const updatedContent = content.substring(0, startIndex) + newStyle + content.substring(endIndex);
|
|
fs.writeFileSync(targetPath, updatedContent);
|
|
console.log('CampaignPrediction CSS updated successfully!');
|
|
} else {
|
|
console.log('Could not find style tag.');
|
|
}
|