Spaces:
Sleeping
Sleeping
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CALL'VANTAGE — Command Center</title> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;600;700&family=DM+Mono:wght@400&display=swap'); | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| :root { | |
| --navy: #0A1628; | |
| --navy-light: #111d32; | |
| --navy-mid: #162340; | |
| --electric: #00A8E8; | |
| --electric-light: #4DC9F6; | |
| --gold: #C9A84C; | |
| --gold-light: #E8D48B; | |
| --white: #F8F9FA; | |
| --grey: #8b949e; | |
| --grey-dark: #484f58; | |
| --success: #2ECC71; | |
| --warning: #F39C12; | |
| --danger: #E74C3C; | |
| --sidebar-w: 260px; | |
| --topbar-h: 60px; | |
| } | |
| body { | |
| font-family: 'Inter', 'Segoe UI', sans-serif; | |
| background: var(--navy); | |
| color: var(--white); | |
| min-height: 100vh; | |
| overflow: hidden; | |
| } | |
| /* ══════════════════════════════════════════════ | |
| TOP BAR — Presidential Header | |
| ══════════════════════════════════════════════ */ | |
| .topbar { | |
| position: fixed; | |
| top: 0; left: 0; right: 0; | |
| height: var(--topbar-h); | |
| background: linear-gradient(135deg, rgba(10,22,40,0.98), rgba(22,35,64,0.98)); | |
| border-bottom: 1px solid rgba(201,168,76,0.2); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 28px; | |
| z-index: 300; | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| } | |
| .topbar-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| } | |
| .topbar-brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| cursor: pointer; | |
| } | |
| .topbar-brand:hover .brand-name { color: var(--gold); } | |
| .brand-icon { | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 8px; | |
| background: linear-gradient(135deg, var(--gold), #b8943e); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-family: 'Playfair Display', serif; | |
| font-weight: 700; | |
| font-size: 16px; | |
| color: var(--navy); | |
| box-shadow: 0 2px 12px rgba(201,168,76,0.3); | |
| } | |
| .brand-name { | |
| font-family: 'Playfair Display', Georgia, serif; | |
| font-size: 20px; | |
| font-weight: 700; | |
| letter-spacing: 3px; | |
| transition: color 0.2s; | |
| } | |
| .brand-name span { color: var(--gold); } | |
| .topbar-status { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 4px 14px; | |
| border-radius: 20px; | |
| background: rgba(46,204,113,0.1); | |
| border: 1px solid rgba(46,204,113,0.25); | |
| font-size: 11px; | |
| font-weight: 500; | |
| color: var(--success); | |
| letter-spacing: 1px; | |
| } | |
| .status-dot { | |
| width: 7px; height: 7px; | |
| border-radius: 50%; | |
| background: var(--success); | |
| animation: pulse-dot 2s infinite; | |
| } | |
| @keyframes pulse-dot { | |
| 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(46,204,113,0.4); } | |
| 50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(46,204,113,0); } | |
| } | |
| .topbar-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| } | |
| .topbar-date { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 12px; | |
| color: var(--grey); | |
| letter-spacing: 1px; | |
| } | |
| .topbar-user { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 4px 12px 4px 4px; | |
| border-radius: 8px; | |
| background: rgba(255,255,255,0.05); | |
| border: 1px solid rgba(255,255,255,0.08); | |
| } | |
| .user-avatar { | |
| width: 30px; height: 30px; | |
| border-radius: 6px; | |
| background: linear-gradient(135deg, var(--electric), #0077B6); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 700; | |
| font-size: 12px; | |
| color: #fff; | |
| } | |
| .user-info { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .user-name { font-size: 12px; font-weight: 600; } | |
| .user-role { font-size: 9px; color: var(--gold); letter-spacing: 1px; text-transform: uppercase; } | |
| /* ── Back button (module view) ── */ | |
| .back-btn { | |
| display: none; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 6px 16px; | |
| background: rgba(201,168,76,0.12); | |
| border: 1px solid rgba(201,168,76,0.3); | |
| color: var(--gold); | |
| font-size: 12px; | |
| font-weight: 600; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| font-family: 'Inter', sans-serif; | |
| transition: all 0.2s; | |
| letter-spacing: 0.5px; | |
| } | |
| .back-btn:hover { background: var(--gold); color: var(--navy); } | |
| .back-btn.visible { display: flex; } | |
| .module-label { | |
| display: none; | |
| font-size: 13px; | |
| color: var(--electric); | |
| font-weight: 500; | |
| letter-spacing: 0.5px; | |
| padding: 4px 12px; | |
| background: rgba(0,168,232,0.08); | |
| border-radius: 6px; | |
| } | |
| .module-label.visible { display: block; } | |
| /* ══════════════════════════════════════════════ | |
| SIDEBAR — Navigation Laterale | |
| ══════════════════════════════════════════════ */ | |
| .sidebar { | |
| position: fixed; | |
| left: 0; | |
| top: var(--topbar-h); | |
| bottom: 0; | |
| width: var(--sidebar-w); | |
| background: var(--navy-light); | |
| border-right: 1px solid rgba(255,255,255,0.06); | |
| overflow-y: auto; | |
| z-index: 200; | |
| padding: 20px 0; | |
| transition: transform 0.3s ease; | |
| } | |
| .sidebar::-webkit-scrollbar { width: 3px; } | |
| .sidebar::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.2); border-radius: 3px; } | |
| .sidebar-section { | |
| padding: 0 16px; | |
| margin-bottom: 24px; | |
| } | |
| .sidebar-section-title { | |
| font-size: 9px; | |
| letter-spacing: 3px; | |
| text-transform: uppercase; | |
| color: var(--grey-dark); | |
| margin-bottom: 10px; | |
| padding: 0 12px; | |
| font-weight: 600; | |
| } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 9px 12px; | |
| border-radius: 8px; | |
| font-size: 13px; | |
| color: var(--grey); | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| font-weight: 400; | |
| position: relative; | |
| } | |
| .nav-item:hover { | |
| background: rgba(255,255,255,0.04); | |
| color: var(--white); | |
| } | |
| .nav-item.active { | |
| background: rgba(0,168,232,0.1); | |
| color: var(--electric); | |
| font-weight: 500; | |
| } | |
| .nav-item.active::before { | |
| content: ''; | |
| position: absolute; | |
| left: -16px; | |
| top: 6px; bottom: 6px; | |
| width: 3px; | |
| background: var(--electric); | |
| border-radius: 0 3px 3px 0; | |
| } | |
| .nav-icon { | |
| font-size: 16px; | |
| width: 22px; | |
| text-align: center; | |
| flex-shrink: 0; | |
| } | |
| .nav-badge { | |
| margin-left: auto; | |
| font-size: 9px; | |
| padding: 2px 7px; | |
| border-radius: 10px; | |
| font-weight: 700; | |
| letter-spacing: 0.5px; | |
| } | |
| .badge-gold { background: rgba(201,168,76,0.15); color: var(--gold); } | |
| .badge-green { background: rgba(46,204,113,0.15); color: var(--success); } | |
| .badge-blue { background: rgba(0,168,232,0.15); color: var(--electric); } | |
| .sidebar-divider { | |
| height: 1px; | |
| background: rgba(255,255,255,0.05); | |
| margin: 12px 16px; | |
| } | |
| /* Quick links at bottom */ | |
| .sidebar-footer { | |
| padding: 16px; | |
| border-top: 1px solid rgba(255,255,255,0.05); | |
| margin-top: auto; | |
| } | |
| .sidebar-footer a { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 6px 12px; | |
| font-size: 11px; | |
| color: var(--grey-dark); | |
| text-decoration: none; | |
| border-radius: 6px; | |
| transition: all 0.15s; | |
| } | |
| .sidebar-footer a:hover { color: var(--grey); background: rgba(255,255,255,0.03); } | |
| /* ══════════════════════════════════════════════ | |
| MAIN AREA — Dashboard + Modules | |
| ══════════════════════════════════════════════ */ | |
| .main { | |
| margin-left: var(--sidebar-w); | |
| margin-top: var(--topbar-h); | |
| height: calc(100vh - var(--topbar-h)); | |
| overflow-y: auto; | |
| transition: opacity 0.25s ease; | |
| } | |
| .main.hidden { display: none; } | |
| .main::-webkit-scrollbar { width: 6px; } | |
| .main::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.15); border-radius: 6px; } | |
| .main-inner { | |
| max-width: 1100px; | |
| padding: 32px 40px 60px; | |
| } | |
| /* ── DASHBOARD KPIs ── */ | |
| .dashboard-header { | |
| margin-bottom: 36px; | |
| } | |
| .dashboard-greeting { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 28px; | |
| font-weight: 600; | |
| margin-bottom: 4px; | |
| } | |
| .dashboard-greeting span { color: var(--gold); } | |
| .dashboard-subtitle { | |
| font-size: 13px; | |
| color: var(--grey); | |
| font-weight: 300; | |
| } | |
| .kpi-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 16px; | |
| margin-bottom: 40px; | |
| } | |
| .kpi-card { | |
| background: linear-gradient(145deg, var(--navy-mid), var(--navy-light)); | |
| border: 1px solid rgba(255,255,255,0.06); | |
| border-radius: 12px; | |
| padding: 20px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .kpi-card::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; right: 0; | |
| width: 80px; height: 80px; | |
| border-radius: 50%; | |
| opacity: 0.03; | |
| } | |
| .kpi-card:nth-child(1)::after { background: var(--electric); } | |
| .kpi-card:nth-child(2)::after { background: var(--gold); } | |
| .kpi-card:nth-child(3)::after { background: var(--success); } | |
| .kpi-card:nth-child(4)::after { background: var(--danger); } | |
| .kpi-label { | |
| font-size: 10px; | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| color: var(--grey); | |
| margin-bottom: 8px; | |
| font-weight: 500; | |
| } | |
| .kpi-value { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 32px; | |
| font-weight: 400; | |
| line-height: 1; | |
| margin-bottom: 6px; | |
| } | |
| .kpi-card:nth-child(1) .kpi-value { color: var(--electric); } | |
| .kpi-card:nth-child(2) .kpi-value { color: var(--gold); } | |
| .kpi-card:nth-child(3) .kpi-value { color: var(--success); } | |
| .kpi-card:nth-child(4) .kpi-value { color: var(--warning); } | |
| .kpi-trend { | |
| font-size: 11px; | |
| color: var(--grey-dark); | |
| } | |
| .kpi-trend .up { color: var(--success); } | |
| .kpi-trend .down { color: var(--danger); } | |
| /* ── SECTION TITLES ── */ | |
| .section-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 20px; | |
| } | |
| .section-title { | |
| font-size: 10px; | |
| letter-spacing: 4px; | |
| text-transform: uppercase; | |
| color: var(--grey-dark); | |
| font-weight: 600; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .section-title::after { | |
| content: ''; | |
| flex: 1; | |
| height: 1px; | |
| background: rgba(255,255,255,0.06); | |
| min-width: 40px; | |
| } | |
| .section-count { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 10px; | |
| color: var(--grey-dark); | |
| background: rgba(255,255,255,0.04); | |
| padding: 2px 8px; | |
| border-radius: 10px; | |
| } | |
| /* ── MODULE CARDS ── */ | |
| .cards-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 16px; | |
| margin-bottom: 44px; | |
| } | |
| .card { | |
| background: var(--navy-mid); | |
| border-radius: 12px; | |
| padding: 24px 20px; | |
| border: 1px solid rgba(255,255,255,0.05); | |
| transition: all 0.25s ease; | |
| cursor: pointer; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; | |
| width: 3px; height: 0; | |
| transition: height 0.3s ease; | |
| border-radius: 0 0 3px 0; | |
| } | |
| .card:hover { | |
| border-color: rgba(201,168,76,0.3); | |
| transform: translateY(-3px); | |
| box-shadow: 0 12px 40px rgba(0,0,0,0.3); | |
| } | |
| .card:hover::before { height: 100%; } | |
| .card.cat-brand::before { background: var(--gold); } | |
| .card.cat-sales::before { background: var(--electric); } | |
| .card.cat-social::before { background: #9b59b6; } | |
| .card.cat-legal::before { background: var(--success); } | |
| .card.cat-web::before { background: var(--warning); } | |
| .card-top { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 14px; | |
| } | |
| .card-icon { | |
| width: 40px; height: 40px; | |
| border-radius: 10px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 20px; | |
| } | |
| .cat-brand .card-icon { background: rgba(201,168,76,0.1); } | |
| .cat-sales .card-icon { background: rgba(0,168,232,0.1); } | |
| .cat-social .card-icon { background: rgba(155,89,182,0.1); } | |
| .cat-legal .card-icon { background: rgba(46,204,113,0.1); } | |
| .cat-web .card-icon { background: rgba(243,156,18,0.1); } | |
| .card-tag { | |
| font-size: 9px; | |
| padding: 3px 8px; | |
| border-radius: 6px; | |
| letter-spacing: 1px; | |
| text-transform: uppercase; | |
| font-weight: 700; | |
| } | |
| .tag-ready { background: rgba(46,204,113,0.12); color: var(--success); } | |
| .tag-live { background: rgba(0,168,232,0.12); color: var(--electric); } | |
| .tag-config { background: rgba(243,156,18,0.12); color: var(--warning); } | |
| .card-title { | |
| font-size: 14px; | |
| font-weight: 600; | |
| margin-bottom: 6px; | |
| letter-spacing: 0.3px; | |
| } | |
| .card-desc { | |
| font-size: 11px; | |
| color: var(--grey); | |
| line-height: 1.6; | |
| } | |
| .card-arrow { | |
| position: absolute; | |
| bottom: 16px; | |
| right: 16px; | |
| font-size: 14px; | |
| color: var(--grey-dark); | |
| opacity: 0; | |
| transition: all 0.25s; | |
| transform: translateX(-4px); | |
| } | |
| .card:hover .card-arrow { | |
| opacity: 1; | |
| transform: translateX(0); | |
| color: var(--gold); | |
| } | |
| /* ══════════════════════════════════════════════ | |
| IFRAME (Module Viewer) | |
| ══════════════════════════════════════════════ */ | |
| .module-frame { | |
| display: none; | |
| margin-top: var(--topbar-h); | |
| margin-left: 0; | |
| width: 100%; | |
| height: calc(100vh - var(--topbar-h)); | |
| border: none; | |
| } | |
| .module-frame.visible { | |
| display: block; | |
| } | |
| /* ══════════════════════════════════════════════ | |
| FOOTER | |
| ══════════════════════════════════════════════ */ | |
| .footer { | |
| text-align: center; | |
| padding: 24px 40px; | |
| font-size: 11px; | |
| color: var(--grey-dark); | |
| border-top: 1px solid rgba(255,255,255,0.04); | |
| } | |
| .footer a { color: var(--gold); text-decoration: none; } | |
| .footer a:hover { text-decoration: underline; } | |
| /* ══════════════════════════════════════════════ | |
| RESPONSIVE | |
| ══════════════════════════════════════════════ */ | |
| @media (max-width: 1024px) { | |
| .kpi-grid { grid-template-columns: repeat(2, 1fr); } | |
| .cards-grid { grid-template-columns: repeat(2, 1fr); } | |
| } | |
| @media (max-width: 768px) { | |
| .sidebar { transform: translateX(-100%); } | |
| .main { margin-left: 0; } | |
| .kpi-grid { grid-template-columns: 1fr 1fr; } | |
| .cards-grid { grid-template-columns: 1fr; } | |
| .topbar-date, .topbar-status { display: none; } | |
| .brand-name { font-size: 16px; letter-spacing: 2px; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- ═══════ TOP BAR ═══════ --> | |
| <div class="topbar"> | |
| <div class="topbar-left"> | |
| <div class="topbar-brand" onclick="showHub()"> | |
| <div class="brand-icon">CV</div> | |
| <div class="brand-name">CALL<span>'</span>VANTAGE</div> | |
| </div> | |
| <div class="topbar-status"> | |
| <div class="status-dot"></div> | |
| SYSTEMES ACTIFS | |
| </div> | |
| <button class="back-btn" id="backBtn" onclick="showHub()">← Command Center</button> | |
| <span class="module-label" id="moduleLabel"></span> | |
| </div> | |
| <div class="topbar-right"> | |
| <span class="topbar-date" id="topbarDate"></span> | |
| <div class="topbar-user"> | |
| <div class="user-avatar">IA</div> | |
| <div class="user-info"> | |
| <span class="user-name">Issam Afif</span> | |
| <span class="user-role">Fondateur</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ═══════ SIDEBAR ═══════ --> | |
| <div class="sidebar" id="sidebar"> | |
| <div class="sidebar-section"> | |
| <div class="sidebar-section-title">Tableau de bord</div> | |
| <div class="nav-item active" onclick="scrollToSection('dashboard')"> | |
| <span class="nav-icon">📊</span> Vue d'ensemble | |
| </div> | |
| </div> | |
| <div class="sidebar-section"> | |
| <div class="sidebar-section-title">Operations</div> | |
| <div class="nav-item" onclick="scrollToSection('sales')"> | |
| <span class="nav-icon">🎯</span> Prospection | |
| <span class="nav-badge badge-gold">6</span> | |
| </div> | |
| <div class="nav-item" onclick="scrollToSection('brand')"> | |
| <span class="nav-icon">🎨</span> Marque | |
| <span class="nav-badge badge-blue">3</span> | |
| </div> | |
| <div class="nav-item" onclick="scrollToSection('social')"> | |
| <span class="nav-icon">📱</span> Reseaux Sociaux | |
| <span class="nav-badge badge-blue">3</span> | |
| </div> | |
| <div class="nav-item" onclick="scrollToSection('legal')"> | |
| <span class="nav-icon">⚖</span> Juridique | |
| <span class="nav-badge badge-green">3</span> | |
| </div> | |
| </div> | |
| <div class="sidebar-divider"></div> | |
| <div class="sidebar-section"> | |
| <div class="sidebar-section-title">Infrastructure</div> | |
| <div class="nav-item" onclick="scrollToSection('web')"> | |
| <span class="nav-icon">🌐</span> Site & VPS | |
| <span class="nav-badge badge-green">3</span> | |
| </div> | |
| </div> | |
| <div class="sidebar-divider"></div> | |
| <div class="sidebar-footer"> | |
| <a href="https://github.com/issamafif0505-debug/CallVantage-Brand" target="_blank"> | |
| <span>💻</span> GitHub Repo | |
| </a> | |
| <a href="https://docs.google.com/spreadsheets/d/1FyKBtcF86zMrNfxMwGLSsUWnBOOOWhMvtEXpea_uvqs/" target="_blank"> | |
| <span>📊</span> CRM Google Sheet | |
| </a> | |
| </div> | |
| </div> | |
| <!-- ═══════ MAIN CONTENT ═══════ --> | |
| <div class="main" id="mainContent"> | |
| <div class="main-inner"> | |
| <!-- ── DASHBOARD HEADER ── --> | |
| <div class="dashboard-header" id="dashboard"> | |
| <div class="dashboard-greeting">Bienvenue, <span>Issam</span></div> | |
| <div class="dashboard-subtitle">Command Center CALL'VANTAGE — tous vos outils, une seule interface.</div> | |
| </div> | |
| <!-- ── KPIs ── --> | |
| <div class="kpi-grid"> | |
| <div class="kpi-card"> | |
| <div class="kpi-label">Modules Actifs</div> | |
| <div class="kpi-value">18</div> | |
| <div class="kpi-trend">Tous operationnels</div> | |
| </div> | |
| <div class="kpi-card"> | |
| <div class="kpi-label">Partenaires Cibles</div> | |
| <div class="kpi-value">14</div> | |
| <div class="kpi-trend">Courtiers enrichis <span class="up">▲</span></div> | |
| </div> | |
| <div class="kpi-card"> | |
| <div class="kpi-label">Workflows N8N</div> | |
| <div class="kpi-value">3</div> | |
| <div class="kpi-trend">VPS 76.13.38.126</div> | |
| </div> | |
| <div class="kpi-card"> | |
| <div class="kpi-label">Emails en File</div> | |
| <div class="kpi-value">0</div> | |
| <div class="kpi-trend">Sequence prete ✓</div> | |
| </div> | |
| </div> | |
| <!-- ══ PROSPECTION ══ --> | |
| <div id="sales"> | |
| <div class="section-header"> | |
| <div class="section-title">Commercial & Prospection</div> | |
| <span class="section-count">6 modules</span> | |
| </div> | |
| <div class="cards-grid"> | |
| <div class="card cat-sales" onclick="loadModule('/prospection/module-acquisition.html', 'Acquisition Partenaires')"> | |
| <div class="card-top"> | |
| <div class="card-icon">🎯</div> | |
| <span class="card-tag tag-ready">Pret</span> | |
| </div> | |
| <div class="card-title">Acquisition Partenaires</div> | |
| <div class="card-desc">Cibles enrichies, emails, LinkedIn, script appel, calculateur ROI, pipeline tracker.</div> | |
| <span class="card-arrow">→</span> | |
| </div> | |
| <div class="card cat-sales" onclick="loadModule('/prospection/kit-commercial.html', 'Kit Prospection')"> | |
| <div class="card-top"> | |
| <div class="card-icon">📧</div> | |
| <span class="card-tag tag-ready">Pret</span> | |
| </div> | |
| <div class="card-title">Kit Prospection</div> | |
| <div class="card-desc">Emails froids, sequences LinkedIn, pitchs, one-pager A4, 17 courtiers cibles.</div> | |
| <span class="card-arrow">→</span> | |
| </div> | |
| <div class="card cat-sales" onclick="loadModule('/templates/email-prospection.html', 'Templates Emails')"> | |
| <div class="card-top"> | |
| <div class="card-icon">✉</div> | |
| <span class="card-tag tag-ready">Pret</span> | |
| </div> | |
| <div class="card-title">Templates Emails</div> | |
| <div class="card-desc">Sequence 3 emails B2B : cold email, follow-up J+7, relance J+14. Boutons copier.</div> | |
| <span class="card-arrow">→</span> | |
| </div> | |
| <div class="card cat-sales" onclick="loadModule('/scripts-appel/script-principal.html', 'Scripts d\'Appel')"> | |
| <div class="card-top"> | |
| <div class="card-icon">📞</div> | |
| <span class="card-tag tag-ready">Pret</span> | |
| </div> | |
| <div class="card-title">Scripts d'Appel</div> | |
| <div class="card-desc">Script interactif HTML, guide objections avec recherche, codes NAF par tier.</div> | |
| <span class="card-arrow">→</span> | |
| </div> | |
| <div class="card cat-sales" onclick="loadModule('/scripts-appel/objections.html', 'Guide Objections')"> | |
| <div class="card-top"> | |
| <div class="card-icon">📋</div> | |
| <span class="card-tag tag-ready">Pret</span> | |
| </div> | |
| <div class="card-title">Guide Objections</div> | |
| <div class="card-desc">16 objections avec reponses et recherche instantanee. Codes NAF par tier.</div> | |
| <span class="card-arrow">→</span> | |
| </div> | |
| <div class="card cat-sales" onclick="loadModule('/prospection/tarification.html', 'Grille Tarifaire')"> | |
| <div class="card-top"> | |
| <div class="card-icon">💰</div> | |
| <span class="card-tag tag-ready">Pret</span> | |
| </div> | |
| <div class="card-title">Grille Tarifaire</div> | |
| <div class="card-desc">3 formules, remises volume, comparatif concurrentiel, estimateur de prix.</div> | |
| <span class="card-arrow">→</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ══ MARQUE ══ --> | |
| <div id="brand"> | |
| <div class="section-header"> | |
| <div class="section-title">Identite de Marque</div> | |
| <span class="section-count">3 modules</span> | |
| </div> | |
| <div class="cards-grid"> | |
| <div class="card cat-brand" onclick="loadModule('/brand/assets/preview-conceptF.html', 'Logo — Concept F')"> | |
| <div class="card-top"> | |
| <div class="card-icon">🎨</div> | |
| <span class="card-tag tag-ready">Final</span> | |
| </div> | |
| <div class="card-title">Logo — Concept F</div> | |
| <div class="card-desc">Sceau monogramme CV. Heritage Bias + Trust Heuristic. 5 variantes SVG.</div> | |
| <span class="card-arrow">→</span> | |
| </div> | |
| <div class="card cat-brand" onclick="loadModule('/brand/brand-guide.html', 'Brand Guide')"> | |
| <div class="card-top"> | |
| <div class="card-icon">📖</div> | |
| <span class="card-tag tag-ready">Pret</span> | |
| </div> | |
| <div class="card-title">Brand Guide</div> | |
| <div class="card-desc">Logo, palette, typographie, principes psychologiques, ton de voix.</div> | |
| <span class="card-arrow">→</span> | |
| </div> | |
| <div class="card cat-brand" onclick="loadModule('/templates/signature-email.html', 'Templates & Assets')"> | |
| <div class="card-top"> | |
| <div class="card-icon">📦</div> | |
| <span class="card-tag tag-ready">Pret</span> | |
| </div> | |
| <div class="card-title">Templates & Assets</div> | |
| <div class="card-desc">Signature email, carte de visite 85x55mm, templates posts sociaux.</div> | |
| <span class="card-arrow">→</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ══ RESEAUX SOCIAUX ══ --> | |
| <div id="social"> | |
| <div class="section-header"> | |
| <div class="section-title">Reseaux Sociaux</div> | |
| <span class="section-count">4 modules</span> | |
| </div> | |
| <div class="cards-grid"> | |
| <div class="card cat-social" onclick="loadModule('/social-media/kit-recrutement-fb-insta.html', 'Kit Recrutement FB & IG')"> | |
| <div class="card-top"> | |
| <div class="card-icon">🎯</div> | |
| <span class="card-tag tag-ready">Pret</span> | |
| </div> | |
| <div class="card-title">Kit Recrutement</div> | |
| <div class="card-desc">Facebook & Instagram : bios, 6 posts recrutement, stories, grille salaire, calendrier pub.</div> | |
| <span class="card-arrow">→</span> | |
| </div> | |
| <div class="card cat-social" onclick="loadModule('/social-media/linkedin/', 'LinkedIn')"> | |
| <div class="card-top"> | |
| <div class="card-icon">📱</div> | |
| <span class="card-tag tag-ready">Pret</span> | |
| </div> | |
| <div class="card-title">LinkedIn</div> | |
| <div class="card-desc">10 posts prets, banniere 1584x396px, texte A Propos optimise SEO.</div> | |
| <span class="card-arrow">→</span> | |
| </div> | |
| <div class="card cat-social" onclick="loadModule('/social-media/instagram/', 'Instagram & Facebook')"> | |
| <div class="card-top"> | |
| <div class="card-icon">📷</div> | |
| <span class="card-tag tag-ready">Pret</span> | |
| </div> | |
| <div class="card-title">Instagram & Facebook</div> | |
| <div class="card-desc">Bannieres, bios, posts FB + Instagram avec hashtags et stories.</div> | |
| <span class="card-arrow">→</span> | |
| </div> | |
| <div class="card cat-social" onclick="loadModule('/templates/template-post-social.html', 'Templates Posts')"> | |
| <div class="card-top"> | |
| <div class="card-icon">🎬</div> | |
| <span class="card-tag tag-ready">Pret</span> | |
| </div> | |
| <div class="card-title">Templates Posts</div> | |
| <div class="card-desc">Templates posts sociaux + script video LinkedIn 60s. Hook, probleme, CTA.</div> | |
| <span class="card-arrow">→</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ══ JURIDIQUE ══ --> | |
| <div id="legal"> | |
| <div class="section-header"> | |
| <div class="section-title">Juridique & Templates</div> | |
| <span class="section-count">3 modules</span> | |
| </div> | |
| <div class="cards-grid"> | |
| <div class="card cat-legal" onclick="loadModule('/juridique/', 'Documents Juridiques')"> | |
| <div class="card-top"> | |
| <div class="card-icon">⚖</div> | |
| <span class="card-tag tag-ready">Pret</span> | |
| </div> | |
| <div class="card-title">Documents Juridiques</div> | |
| <div class="card-desc">CGV, contrat courtier, contrat apporteur affaires, mentions legales.</div> | |
| <span class="card-arrow">→</span> | |
| </div> | |
| <div class="card cat-legal" onclick="loadModule('/templates/signature-email.html', 'Signature Email')"> | |
| <div class="card-top"> | |
| <div class="card-icon">✉</div> | |
| <span class="card-tag tag-ready">Pret</span> | |
| </div> | |
| <div class="card-title">Signature Email</div> | |
| <div class="card-desc">Template HTML responsive — logo, coordonnees, WhatsApp.</div> | |
| <span class="card-arrow">→</span> | |
| </div> | |
| <div class="card cat-legal" onclick="loadModule('/templates/carte-visite.html', 'Carte de Visite')"> | |
| <div class="card-top"> | |
| <div class="card-icon">📇</div> | |
| <span class="card-tag tag-ready">Pret</span> | |
| </div> | |
| <div class="card-title">Carte de Visite</div> | |
| <div class="card-desc">Design premium recto/verso 85x55mm, pret a imprimer (PDF).</div> | |
| <span class="card-arrow">→</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ══ SITE & VPS ══ --> | |
| <div id="web"> | |
| <div class="section-header"> | |
| <div class="section-title">Site Web & Infrastructure</div> | |
| <span class="section-count">3 modules</span> | |
| </div> | |
| <div class="cards-grid"> | |
| <div class="card cat-web" onclick="loadModule('/site/', 'Site CALL\'VANTAGE')"> | |
| <div class="card-top"> | |
| <div class="card-icon">🌐</div> | |
| <span class="card-tag tag-live">En ligne</span> | |
| </div> | |
| <div class="card-title">Site CALL'VANTAGE</div> | |
| <div class="card-desc">Site vitrine Next.js — hero, tarifs, processus, garantie, contact.</div> | |
| <span class="card-arrow">→</span> | |
| </div> | |
| <a class="card cat-web" href="https://github.com/issamafif0505-debug/CallVantage-Brand/tree/master/vps" target="_blank"> | |
| <div class="card-top"> | |
| <div class="card-icon">🖥</div> | |
| <span class="card-tag tag-config">VPS</span> | |
| </div> | |
| <div class="card-title">VPS Stack</div> | |
| <div class="card-desc">Docker : N8N, WordPress, OpenClaw, MySQL, Nginx SSL.</div> | |
| <span class="card-arrow">→</span> | |
| </a> | |
| <a class="card cat-web" href="https://github.com/issamafif0505-debug/CallVantage-Brand" target="_blank"> | |
| <div class="card-top"> | |
| <div class="card-icon">💻</div> | |
| <span class="card-tag tag-live">Public</span> | |
| </div> | |
| <div class="card-title">GitHub Repo</div> | |
| <div class="card-desc">Code source complet — 50+ fichiers, toutes les phases du projet.</div> | |
| <span class="card-arrow">→</span> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| CALL'VANTAGE © 2026 — Issam Afif, Fondateur — Marrakech, Maroc<br> | |
| <a href="https://github.com/issamafif0505-debug/CallVantage-Brand">GitHub</a> · | |
| <a href="https://callvantage-hub.web.app">Firebase</a> · | |
| <a href="https://issam0505-callvantage-hub.hf.space">HuggingFace</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ═══════ MODULE VIEWER (iframe) ═══════ --> | |
| <iframe class="module-frame" id="moduleFrame"></iframe> | |
| <!-- ═══════ JAVASCRIPT ═══════ --> | |
| <script> | |
| var mainContent = document.getElementById('mainContent'); | |
| var sidebar = document.getElementById('sidebar'); | |
| var moduleFrame = document.getElementById('moduleFrame'); | |
| var backBtn = document.getElementById('backBtn'); | |
| var moduleLabel = document.getElementById('moduleLabel'); | |
| // Date display | |
| (function() { | |
| var d = new Date(); | |
| var days = ['DIM','LUN','MAR','MER','JEU','VEN','SAM']; | |
| var months = ['JAN','FEV','MAR','AVR','MAI','JUN','JUL','AOU','SEP','OCT','NOV','DEC']; | |
| document.getElementById('topbarDate').textContent = | |
| days[d.getDay()] + ' ' + d.getDate() + ' ' + months[d.getMonth()] + ' ' + d.getFullYear() + | |
| ' — ' + String(d.getHours()).padStart(2,'0') + ':' + String(d.getMinutes()).padStart(2,'0'); | |
| })(); | |
| function loadModule(url, title) { | |
| mainContent.classList.add('hidden'); | |
| sidebar.style.display = 'none'; | |
| moduleFrame.classList.add('visible'); | |
| moduleFrame.style.marginLeft = '0'; | |
| moduleFrame.src = url; | |
| backBtn.classList.add('visible'); | |
| moduleLabel.classList.add('visible'); | |
| moduleLabel.textContent = title; | |
| document.title = "CALL'VANTAGE — " + title; | |
| } | |
| function showHub() { | |
| mainContent.classList.remove('hidden'); | |
| sidebar.style.display = ''; | |
| moduleFrame.classList.remove('visible'); | |
| moduleFrame.src = ''; | |
| backBtn.classList.remove('visible'); | |
| moduleLabel.classList.remove('visible'); | |
| moduleLabel.textContent = ''; | |
| document.title = "CALL'VANTAGE — Command Center"; | |
| mainContent.scrollTop = 0; | |
| } | |
| function scrollToSection(id) { | |
| var el = document.getElementById(id); | |
| if (el) { | |
| // If in module view, go back to hub first | |
| if (moduleFrame.classList.contains('visible')) showHub(); | |
| el.scrollIntoView({ behavior: 'smooth', block: 'start' }); | |
| } | |
| // Update active nav | |
| document.querySelectorAll('.nav-item').forEach(function(n) { n.classList.remove('active'); }); | |
| event.currentTarget.classList.add('active'); | |
| } | |
| // Keyboard: Escape returns to hub | |
| document.addEventListener('keydown', function(e) { | |
| if (e.key === 'Escape' && moduleFrame.classList.contains('visible')) { | |
| showHub(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |