First build
Some checks failed
Client Admin / build-deploy (push) Failing after 8s
Client Client / build-deploy (push) Failing after 3s
Client Registration / build-deploy (push) Failing after 20s
Client Tech / build-deploy (push) Failing after 1s
Client Home / build-deploy (push) Successful in 14s
Some checks failed
Client Admin / build-deploy (push) Failing after 8s
Client Client / build-deploy (push) Failing after 3s
Client Registration / build-deploy (push) Failing after 20s
Client Tech / build-deploy (push) Failing after 1s
Client Home / build-deploy (push) Successful in 14s
This commit is contained in:
Grae Jones
6
Client-Home/.babelrc
Normal file
6
Client-Home/.babelrc
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"presets": [
|
||||
"@babel/preset-env",
|
||||
["@babel/preset-react", { "runtime": "automatic" }]
|
||||
]
|
||||
}
|
||||
BIN
Client-Home/Home.zip
Normal file
BIN
Client-Home/Home.zip
Normal file
Binary file not shown.
2
Client-Home/dist/bundle.js
vendored
Normal file
2
Client-Home/dist/bundle.js
vendored
Normal file
File diff suppressed because one or more lines are too long
39
Client-Home/dist/bundle.js.LICENSE.txt
vendored
Normal file
39
Client-Home/dist/bundle.js.LICENSE.txt
vendored
Normal file
@@ -0,0 +1,39 @@
|
||||
/**
|
||||
* @license React
|
||||
* react-dom.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* react-jsx-runtime.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* react.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* scheduler.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
1
Client-Home/dist/index.html
vendored
Normal file
1
Client-Home/dist/index.html
vendored
Normal file
@@ -0,0 +1 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>AdPlatform</title><link rel="preconnect" href="https://fonts.googleapis.com"/><link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"/><script defer="defer" src="/bundle.js"></script></head><body><div id="root"></div></body></html>
|
||||
7212
Client-Home/package-lock.json
generated
Normal file
7212
Client-Home/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
25
Client-Home/package.json
Normal file
25
Client-Home/package.json
Normal file
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"name": "adplatform-brochure",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "webpack serve --mode development",
|
||||
"build": "webpack --mode production"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.24.0",
|
||||
"@babel/preset-env": "^7.24.0",
|
||||
"@babel/preset-react": "^7.23.0",
|
||||
"babel-loader": "^9.1.3",
|
||||
"css-loader": "^6.10.0",
|
||||
"html-webpack-plugin": "^5.6.0",
|
||||
"style-loader": "^3.3.4",
|
||||
"webpack": "^5.90.0",
|
||||
"webpack-cli": "^5.1.4",
|
||||
"webpack-dev-server": "^5.0.0"
|
||||
}
|
||||
}
|
||||
13
Client-Home/public/index.html
Normal file
13
Client-Home/public/index.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>AdPlatform</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
6
Client-Home/src/App.jsx
Normal file
6
Client-Home/src/App.jsx
Normal file
@@ -0,0 +1,6 @@
|
||||
import React from 'react';
|
||||
import LandingPage from './components/LandingPage';
|
||||
|
||||
export default function App() {
|
||||
return <LandingPage />;
|
||||
}
|
||||
67
Client-Home/src/components/LandingPage.jsx
Normal file
67
Client-Home/src/components/LandingPage.jsx
Normal file
@@ -0,0 +1,67 @@
|
||||
import React from 'react';
|
||||
import { APP_URL, REGISTRATION_URL } from '../config';
|
||||
|
||||
export default function LandingPage() {
|
||||
const goLogin = () => {
|
||||
window.location.href = APP_URL;
|
||||
};
|
||||
|
||||
const goRegister = () => {
|
||||
window.location.href = REGISTRATION_URL;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="landing-page">
|
||||
<div className="landing-header">
|
||||
<div className="landing-logo">
|
||||
<div className="landing-logo-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="landing-logo-text">AdPlatform</span>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: 10 }}>
|
||||
<button className="btn" onClick={goRegister}>Register</button>
|
||||
<button className="btn btn-primary" onClick={goLogin}>Login</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="landing-hero">
|
||||
<h1>Take Control of Your Advertising</h1>
|
||||
<h2 className="landing-subtitle">Launch and Manage Your Ad Campaigns</h2>
|
||||
<p>A simple, self-service platform to create, launch, and optimize campaigns across multiple channels — backed by expert guidance.</p>
|
||||
|
||||
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center' }}>
|
||||
<button className="btn btn-primary btn-lg" onClick={goLogin}>Login</button>
|
||||
<button className="btn btn-lg" onClick={goRegister}>Register</button>
|
||||
</div>
|
||||
|
||||
<div className="landing-features">
|
||||
<div className="feature-card">
|
||||
<div className="feature-card-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>
|
||||
</div>
|
||||
<h3>Campaign Management</h3>
|
||||
<p>Create and manage search, display, and video campaigns with an intuitive interface.</p>
|
||||
</div>
|
||||
<div className="feature-card">
|
||||
<div className="feature-card-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
|
||||
</div>
|
||||
<h3>Performance Reporting</h3>
|
||||
<p>Track impressions, clicks, conversions, and spend with real-time reporting dashboards.</p>
|
||||
</div>
|
||||
<div className="feature-card">
|
||||
<div className="feature-card-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /></svg>
|
||||
</div>
|
||||
<h3>Managed by Experts</h3>
|
||||
<p>Your campaigns run under our agency account with professional oversight and support.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
10
Client-Home/src/config.js
Normal file
10
Client-Home/src/config.js
Normal file
@@ -0,0 +1,10 @@
|
||||
// Brochure-site link targets.
|
||||
//
|
||||
// Update these two values for your environments.
|
||||
// - APP_URL: the URL that should open the *app* (direct entry / dashboard).
|
||||
// - REGISTRATION_URL: the URL to your external registration experience.
|
||||
//
|
||||
// Tip: keep these as full absolute URLs.
|
||||
|
||||
export const APP_URL = 'https://adpclient.usimdev.com/';
|
||||
export const REGISTRATION_URL = 'https://adpregist.usimdev.com/';
|
||||
6
Client-Home/src/index.js
Normal file
6
Client-Home/src/index.js
Normal file
@@ -0,0 +1,6 @@
|
||||
import React from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import App from './App';
|
||||
import './styles/app.css';
|
||||
|
||||
createRoot(document.getElementById('root')).render(<App />);
|
||||
742
Client-Home/src/styles/app.css
Normal file
742
Client-Home/src/styles/app.css
Normal file
@@ -0,0 +1,742 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
|
||||
|
||||
:root {
|
||||
--color-primary: #2563eb;
|
||||
--color-primary-dark: #1e40af;
|
||||
--color-primary-light: #eff6ff;
|
||||
--color-primary-hover: #1d4ed8;
|
||||
--color-success: #059669;
|
||||
--color-success-light: #ecfdf5;
|
||||
--color-warning: #d97706;
|
||||
--color-warning-light: #fffbeb;
|
||||
--color-danger: #dc2626;
|
||||
--color-danger-light: #fef2f2;
|
||||
--color-text: #111827;
|
||||
--color-text-secondary: #374151;
|
||||
--color-text-muted: #9ca3af;
|
||||
--color-bg: #f8f9fb;
|
||||
--color-bg-elevated: #ffffff;
|
||||
--color-bg-subtle: #f3f4f6;
|
||||
--color-bg-muted: #e5e7eb;
|
||||
--color-border: #e5e7eb;
|
||||
--color-border-light: #f3f4f6;
|
||||
--sidebar-width: 260px;
|
||||
--sidebar-collapsed: 72px;
|
||||
--topbar-height: 56px;
|
||||
--font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-xl: 16px;
|
||||
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
|
||||
--transition-fast: 0.15s ease;
|
||||
--transition-normal: 0.25s ease;
|
||||
}
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;line-height:1.5}
|
||||
.mono{font-family:var(--font-mono);font-size:13px}
|
||||
|
||||
/* Landing */
|
||||
.landing-page{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#f8f9fb 0%,#eff6ff 100%)}
|
||||
.landing-header{padding:20px 40px;display:flex;align-items:center;justify-content:space-between}
|
||||
.landing-logo{display:flex;align-items:center;gap:12px}
|
||||
.landing-logo-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));border-radius:var(--radius-md);color:white}
|
||||
.landing-logo-icon svg{width:22px;height:22px}
|
||||
.landing-logo-text{font-size:20px;font-weight:700;color:var(--color-text)}
|
||||
.landing-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 40px}
|
||||
.landing-hero h1{font-size:42px;font-weight:700;color:var(--color-text);margin-bottom:8px;letter-spacing:-0.5px}
|
||||
.landing-hero .landing-subtitle{font-size:24px;font-weight:400;color:var(--color-text-secondary);margin-bottom:16px;letter-spacing:-0.3px}
|
||||
.landing-hero p{font-size:18px;color:var(--color-text-secondary);max-width:520px;margin-bottom:40px}
|
||||
.landing-features{display:flex;gap:24px;margin-top:60px;max-width:800px}
|
||||
.feature-card{flex:1;padding:24px;background:var(--color-bg-elevated);border-radius:var(--radius-lg);border:1px solid var(--color-border);box-shadow:var(--shadow-sm)}
|
||||
.feature-card-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--color-primary-light);border-radius:var(--radius-md);color:var(--color-primary);margin-bottom:16px}
|
||||
.feature-card-icon svg{width:22px;height:22px}
|
||||
.feature-card h3{font-size:16px;font-weight:600;margin-bottom:8px}
|
||||
.feature-card p{font-size:14px;color:var(--color-text-muted);line-height:1.6}
|
||||
|
||||
/* Status Pages */
|
||||
.status-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--color-bg);padding:20px}
|
||||
.status-card{max-width:440px;width:100%;padding:48px 40px;background:var(--color-bg-elevated);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);text-align:center}
|
||||
.status-icon{font-size:48px;margin-bottom:20px}
|
||||
.status-icon.error{color:var(--color-danger)}
|
||||
.status-card h2{font-size:22px;font-weight:700;margin-bottom:12px}
|
||||
.status-card p{font-size:14px;color:var(--color-text-secondary);margin-bottom:8px;line-height:1.6}
|
||||
.error-text{color:var(--color-danger);background:var(--color-danger-light);padding:12px 16px;border-radius:var(--radius-md);margin:16px 0;font-size:13px}
|
||||
.status-actions{display:flex;flex-direction:column;gap:10px;margin-top:24px}
|
||||
|
||||
/* Loading */
|
||||
.loading-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;color:var(--color-text-muted);font-size:14px}
|
||||
.loading-spinner{width:36px;height:36px;border:3px solid var(--color-bg-muted);border-top-color:var(--color-primary);border-radius:50%;animation:spin 0.8s linear infinite}
|
||||
@keyframes spin{to{transform:rotate(360deg)}}
|
||||
|
||||
/* Platform Layout */
|
||||
.platform{display:flex;height:100vh;overflow:hidden}
|
||||
.platform.sidebar-collapsed .main-area{margin-left:var(--sidebar-collapsed)}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-width);background:var(--color-bg-elevated);border-right:1px solid var(--color-border);display:flex;flex-direction:column;transition:width var(--transition-normal);z-index:100}
|
||||
.sidebar.collapsed{width:var(--sidebar-collapsed)}
|
||||
.sidebar-header{padding:20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--color-border-light)}
|
||||
.logo{display:flex;align-items:center;gap:12px}
|
||||
.logo-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-primary) 0%,#1e40af 100%);border-radius:var(--radius-md);color:white;flex-shrink:0}
|
||||
.logo-icon svg{width:22px;height:22px}
|
||||
.logo-text{font-size:18px;font-weight:600;color:var(--color-text);letter-spacing:-0.3px}
|
||||
.collapse-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--color-text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast)}
|
||||
.collapse-btn:hover{background:var(--color-bg-subtle);color:var(--color-text)}
|
||||
.collapse-btn svg{width:18px;height:18px}
|
||||
.sidebar-nav{flex:1;padding:16px 12px;overflow-y:auto}
|
||||
.nav-section{margin-bottom:24px}
|
||||
.nav-label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--color-text-muted);padding:0 12px;margin-bottom:8px}
|
||||
.nav-list{list-style:none}
|
||||
.nav-item{width:100%;display:flex;align-items:center;gap:12px;padding:10px 12px;background:none;border:none;border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:14px;font-weight:500;cursor:pointer;transition:all var(--transition-fast);text-align:left}
|
||||
.nav-item:hover{background:var(--color-bg-subtle);color:var(--color-text)}
|
||||
.nav-item.active{background:var(--color-primary-light);color:var(--color-primary)}
|
||||
.nav-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
|
||||
.nav-icon svg{width:20px;height:20px}
|
||||
.sidebar-footer{padding:16px 12px;border-top:1px solid var(--color-border-light)}
|
||||
.sidebar-brand{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--color-text-muted)}
|
||||
.sidebar-brand strong{color:var(--color-text-secondary)}
|
||||
|
||||
/* Main Area */
|
||||
.main-area{flex:1;margin-left:var(--sidebar-width);min-height:0;display:flex;flex-direction:column;transition:margin-left var(--transition-normal)}
|
||||
|
||||
/* Top Bar */
|
||||
.top-bar{height:var(--topbar-height);padding:0 32px;display:flex;align-items:center;justify-content:space-between;background:var(--color-bg-elevated);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:50}
|
||||
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:14px}
|
||||
.breadcrumb-item{color:var(--color-text-muted)}
|
||||
.breadcrumb-separator{color:var(--color-border)}
|
||||
.breadcrumb-current{color:var(--color-text);font-weight:600}
|
||||
.top-bar-actions{display:flex;align-items:center;gap:16px}
|
||||
.client-badge{padding:4px 12px;background:var(--color-primary-light);color:var(--color-primary);border-radius:20px;font-size:12px;font-weight:600}
|
||||
.user-menu{position:relative}
|
||||
.user-menu-trigger{display:flex;align-items:center;gap:10px;padding:6px 10px;background:none;border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}
|
||||
.user-menu-trigger:hover{background:var(--color-bg-subtle);border-color:var(--color-border)}
|
||||
.user-avatar{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--color-primary);color:white;border-radius:50%;font-size:13px;font-weight:600}
|
||||
.user-name{font-size:13px;font-weight:500;color:var(--color-text)}
|
||||
.user-dropdown{position:absolute;right:0;top:100%;margin-top:8px;width:220px;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:8px;z-index:200}
|
||||
.user-dropdown-item{width:100%;display:flex;align-items:center;gap:10px;padding:8px 12px;background:none;border:none;border-radius:var(--radius-sm);font-size:13px;color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast);text-align:left}
|
||||
.user-dropdown-item:hover{background:var(--color-bg-subtle);color:var(--color-text)}
|
||||
.user-dropdown-item.danger{color:var(--color-danger)}
|
||||
.user-dropdown-item.danger:hover{background:var(--color-danger-light)}
|
||||
.user-dropdown-divider{height:1px;background:var(--color-border-light);margin:6px 0}
|
||||
|
||||
/* Content Area */
|
||||
.content-area{flex:1;padding:32px;display:flex;flex-direction:column;min-height:0;overflow:auto}
|
||||
.view-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
|
||||
.view-header h1{font-size:28px;font-weight:700;letter-spacing:-0.3px}
|
||||
.view-subtitle{font-size:14px;color:var(--color-text-muted);margin-top:4px}
|
||||
|
||||
/* Stats Grid */
|
||||
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:28px}
|
||||
.stat-card{padding:24px;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg)}
|
||||
.stat-label{font-size:13px;font-weight:500;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.3px;margin-bottom:8px}
|
||||
.stat-value{font-size:28px;font-weight:700;color:var(--color-text)}
|
||||
.stat-value.text-green{color:var(--color-success)}
|
||||
.stat-value.text-red{color:var(--color-danger)}
|
||||
.stat-value.text-blue{color:var(--color-primary)}
|
||||
|
||||
/* Content Cards */
|
||||
.content-card{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}
|
||||
.content-card-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--color-border-light)}
|
||||
.content-card-header h3{font-size:16px;font-weight:600}
|
||||
.content-card-body{padding:0}
|
||||
.content-card-body.padded{padding:24px}
|
||||
|
||||
/* Data Table */
|
||||
.data-table{width:100%;border-collapse:collapse}
|
||||
.data-table th{text-align:left;padding:12px 20px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--color-text-muted);background:var(--color-bg-subtle);border-bottom:1px solid var(--color-border)}
|
||||
.data-table td{padding:14px 20px;font-size:14px;border-bottom:1px solid var(--color-border-light)}
|
||||
.data-table tr:last-child td{border-bottom:none}
|
||||
.data-table tr:hover td{background:var(--color-bg-subtle);cursor:pointer}
|
||||
|
||||
/* Campaign Rows */
|
||||
.campaign-row{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--color-border-light);cursor:pointer;transition:background var(--transition-fast)}
|
||||
.campaign-row:hover{background:var(--color-bg-subtle)}
|
||||
.campaign-row:last-child{border-bottom:none}
|
||||
.campaign-info{display:flex;flex-direction:column;gap:2px}
|
||||
.campaign-name{font-size:14px;font-weight:500;color:var(--color-text)}
|
||||
.campaign-type{font-size:12px;color:var(--color-text-muted)}
|
||||
|
||||
/* Status Badges */
|
||||
.status-badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;text-transform:capitalize}
|
||||
.status-badge.status-enabled,.status-badge.status-active{background:var(--color-success-light);color:var(--color-success)}
|
||||
.status-badge.status-paused{background:var(--color-warning-light);color:var(--color-warning)}
|
||||
.status-badge.status-removed,.status-badge.status-disabled,.status-badge.status-cancelled{background:var(--color-danger-light);color:var(--color-danger)}
|
||||
.status-badge.status-draft{background:var(--color-bg-subtle);color:var(--color-text-muted)}
|
||||
.status-badge.status-in-review,.status-badge.status-scheduled,.status-badge.status-staged{background:var(--color-primary-light);color:var(--color-primary)}
|
||||
.status-badge.status-completed{background:var(--color-bg-subtle);color:var(--color-text-secondary)}
|
||||
.status-badge.status-action-needed,.status-badge.status-error{background:var(--color-danger-light);color:var(--color-danger)}
|
||||
.status-badge.status-pending{background:var(--color-primary-light);color:var(--color-primary)}
|
||||
|
||||
/* Campaign Cards */
|
||||
.campaign-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
|
||||
.campaign-card{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:20px;cursor:pointer;transition:border-color 0.15s,box-shadow 0.15s}
|
||||
.campaign-card:hover{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}
|
||||
.campaign-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
|
||||
.campaign-card-title{font-size:15px;font-weight:600;color:var(--color-text);line-height:1.3;flex:1;margin-right:12px}
|
||||
.campaign-card-body{display:flex;flex-direction:column;gap:10px}
|
||||
.campaign-card-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--color-text-muted)}
|
||||
.campaign-card-meta span{display:inline-flex;align-items:center;gap:4px}
|
||||
.campaign-card-meta svg{opacity:0.6}
|
||||
.campaign-card-channels{display:flex;gap:6px;flex-wrap:wrap}
|
||||
.channel-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600;background:var(--color-bg-subtle);color:var(--color-text-secondary);text-transform:capitalize}
|
||||
.campaign-card-actions{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--color-border-light)}
|
||||
.campaign-card-actions .btn{font-size:12px;padding:5px 12px}
|
||||
|
||||
/* Filter Tabs */
|
||||
.filter-tabs{display:flex;gap:2px;padding:3px;background:var(--color-bg-subtle);border-radius:var(--radius-md);width:fit-content;border:1px solid var(--color-border-light)}
|
||||
.filter-tab{padding:7px 14px;border-radius:calc(var(--radius-md) - 2px);font-size:13px;font-weight:500;color:var(--color-text-muted);background:none;border:none;cursor:pointer;transition:all 0.15s;white-space:nowrap}
|
||||
.filter-tab:hover{color:var(--color-text-secondary);background:rgba(0,0,0,0.03)}
|
||||
.filter-tab.active{background:var(--color-bg-elevated);color:var(--color-text);box-shadow:0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.04);font-weight:600}
|
||||
.filter-tab .tab-count{display:inline-flex;align-items:center;justify-content:center;margin-left:6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;font-size:11px;font-weight:600;background:var(--color-bg-muted);color:var(--color-text-muted)}
|
||||
.filter-tab.active .tab-count{background:var(--color-primary);color:white}
|
||||
|
||||
/* Search Box */
|
||||
.search-box{position:relative;margin-left:auto}
|
||||
.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none;display:flex}
|
||||
.search-input{width:240px;padding:8px 12px 8px 36px;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:13px;font-family:var(--font-sans);color:var(--color-text);transition:border-color var(--transition-fast),box-shadow var(--transition-fast),width var(--transition-normal)}
|
||||
.search-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(37,99,235,0.1);width:300px}
|
||||
.search-input::placeholder{color:var(--color-text-muted)}
|
||||
.search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--color-text-muted);padding:2px;display:flex;align-items:center;border-radius:var(--radius-sm)}
|
||||
.search-clear:hover{color:var(--color-text-secondary);background:var(--color-bg-subtle)}
|
||||
|
||||
/* Draft Section */
|
||||
.drafts-section{margin-bottom:24px}
|
||||
.drafts-section h3{font-size:14px;font-weight:600;color:var(--color-text-secondary);margin-bottom:12px}
|
||||
.draft-cards{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px}
|
||||
.draft-card{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--color-bg-elevated);border:1px dashed var(--color-warning);border-radius:var(--radius-md);cursor:pointer;white-space:nowrap;min-width:220px;transition:border-color 0.15s,background 0.15s}
|
||||
.draft-card:hover{background:var(--color-warning-light);border-color:var(--color-warning)}
|
||||
.draft-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-sm);background:var(--color-warning-light);flex-shrink:0}
|
||||
.draft-info{flex:1;min-width:0}
|
||||
.draft-name{font-size:13px;font-weight:600;color:var(--color-text);overflow:hidden;text-overflow:ellipsis}
|
||||
.draft-meta{font-size:11px;color:var(--color-text-muted);margin-top:2px}
|
||||
.draft-actions{display:flex;gap:4px;flex-shrink:0}
|
||||
.draft-actions button{background:none;border:none;padding:4px;cursor:pointer;color:var(--color-text-muted);border-radius:var(--radius-sm);transition:background 0.15s,color 0.15s}
|
||||
.draft-actions button:hover{background:var(--color-bg-subtle);color:var(--color-text-secondary)}
|
||||
.draft-actions button.danger:hover{background:var(--color-danger-light);color:var(--color-danger)}
|
||||
|
||||
/* Campaigns Toolbar */
|
||||
.campaigns-toolbar{display:flex;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap}
|
||||
.campaigns-toolbar .filter-tabs{margin-bottom:0}
|
||||
|
||||
/* Detail Panel */
|
||||
.detail-panel{position:fixed;right:0;top:0;bottom:0;width:420px;background:var(--color-bg-elevated);border-left:1px solid var(--color-border);box-shadow:var(--shadow-lg);z-index:150;display:flex;flex-direction:column;animation:slideIn 0.25s ease}
|
||||
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
|
||||
.detail-panel-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--color-border)}
|
||||
.detail-panel-header h3{font-size:18px;font-weight:600}
|
||||
.detail-panel-body{flex:1;overflow-y:auto;padding:24px}
|
||||
.detail-section{margin-bottom:28px}
|
||||
.detail-section h4{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--color-text-muted);margin-bottom:16px}
|
||||
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
|
||||
.detail-item{display:flex;flex-direction:column;gap:4px}
|
||||
.detail-label{font-size:12px;color:var(--color-text-muted)}
|
||||
.detail-value{font-size:14px;font-weight:500;color:var(--color-text)}
|
||||
.detail-panel-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.3);z-index:140;animation:fadeIn 0.2s ease}
|
||||
.detail-actions{display:flex;gap:8px;flex-wrap:wrap}
|
||||
.detail-actions .btn{gap:6px}
|
||||
.channel-allocation-list{display:flex;flex-direction:column;gap:12px}
|
||||
.channel-alloc-row{display:flex;align-items:center;gap:10px}
|
||||
.channel-alloc-info{display:flex;flex-direction:column;min-width:100px}
|
||||
.channel-alloc-name{font-size:13px;font-weight:600;color:var(--color-text)}
|
||||
.channel-alloc-budget{font-size:11px;color:var(--color-text-muted)}
|
||||
.channel-alloc-bar-track{flex:1;height:8px;background:var(--color-bg-subtle);border-radius:4px;overflow:hidden}
|
||||
.channel-alloc-bar{height:100%;background:var(--color-primary);border-radius:4px;transition:width 0.3s ease}
|
||||
.channel-alloc-pct{font-size:12px;font-weight:600;color:var(--color-text-muted);min-width:36px;text-align:right}
|
||||
.detail-timeline{display:flex;flex-direction:column;gap:12px;padding-left:8px;border-left:2px solid var(--color-border-light)}
|
||||
.timeline-item{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--color-text-secondary);position:relative;margin-left:-9px}
|
||||
.timeline-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
|
||||
.timeline-dot.created{background:var(--color-text-muted)}
|
||||
.timeline-dot.launched{background:var(--color-primary)}
|
||||
.timeline-dot.completed{background:var(--color-success)}
|
||||
|
||||
/* Modal */
|
||||
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;z-index:200;animation:fadeIn 0.15s ease}
|
||||
.modal-content{background:var(--color-bg-elevated);border-radius:var(--radius-xl);box-shadow:0 20px 60px rgba(0,0,0,0.15);max-width:420px;width:90%;animation:scaleIn 0.2s ease}
|
||||
@keyframes scaleIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
|
||||
|
||||
/* Launch Modal */
|
||||
.launch-modal{padding:0;overflow:hidden}
|
||||
.launch-modal-header{padding:28px 28px 20px;text-align:center}
|
||||
.launch-modal-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--color-primary-light);color:var(--color-primary);margin-bottom:12px}
|
||||
.launch-modal-icon svg{width:22px;height:22px}
|
||||
.launch-modal-header h3{font-size:18px;font-weight:700;color:var(--color-text);margin-bottom:4px}
|
||||
.launch-modal-header p{font-size:14px;color:var(--color-text-muted);line-height:1.4}
|
||||
.launch-modal-header p strong{color:var(--color-text)}
|
||||
|
||||
.launch-modal-billing{padding:0 28px 20px;display:flex;flex-direction:column;gap:10px}
|
||||
.billing-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--color-text-secondary);padding:6px 0}
|
||||
.billing-row span:last-child{font-weight:600;font-family:var(--font-mono);font-size:13px}
|
||||
.billing-total{border-top:1px solid var(--color-border);padding-top:12px;margin-top:4px;font-weight:600;color:var(--color-text);font-size:15px}
|
||||
.billing-total span:last-child{color:var(--color-primary);font-size:15px}
|
||||
|
||||
.launch-modal-actions{display:flex;justify-content:flex-end;gap:10px;padding:16px 28px;background:var(--color-bg-subtle);border-top:1px solid var(--color-border-light)}
|
||||
.btn-launch{gap:6px}
|
||||
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
|
||||
.modal{width:520px;max-height:90vh;background:var(--color-bg-elevated);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;animation:scaleIn 0.2s ease}
|
||||
@keyframes scaleIn{from{transform:scale(0.95);opacity:0}to{transform:scale(1);opacity:1}}
|
||||
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--color-border)}
|
||||
.modal-header h3{font-size:18px;font-weight:600}
|
||||
.modal-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--color-text-muted);cursor:pointer;border-radius:var(--radius-sm)}
|
||||
.modal-close:hover{background:var(--color-bg-subtle);color:var(--color-text)}
|
||||
.modal-body{padding:24px;overflow-y:auto}
|
||||
.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--color-border);background:var(--color-bg-subtle);border-radius:0 0 var(--radius-xl) var(--radius-xl)}
|
||||
|
||||
/* Forms */
|
||||
.form-group{margin-bottom:20px}
|
||||
.form-group label{display:block;font-size:13px;font-weight:600;color:var(--color-text-secondary);margin-bottom:6px}
|
||||
.form-input,.form-select,.form-textarea{width:100%;padding:10px 14px;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:14px;font-family:var(--font-sans);color:var(--color-text);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}
|
||||
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(37,99,235,0.1)}
|
||||
.form-input::placeholder{color:var(--color-text-muted)}
|
||||
.form-row{display:flex;gap:16px}
|
||||
.form-row .form-group{flex:1}
|
||||
.input-row{display:flex;gap:12px;align-items:flex-end;margin-bottom:20px}
|
||||
.input-row .form-input{flex:1}
|
||||
|
||||
/* Buttons */
|
||||
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border:1px solid transparent;border-radius:var(--radius-md);font-size:14px;font-weight:600;font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-fast);text-decoration:none}
|
||||
.btn:disabled{opacity:0.6;cursor:not-allowed}
|
||||
.btn-primary{background:var(--color-primary);color:white;border-color:var(--color-primary)}
|
||||
.btn-primary:hover:not(:disabled){background:var(--color-primary-hover)}
|
||||
.btn-outline{background:var(--color-bg-elevated);color:var(--color-text-secondary);border-color:var(--color-border)}
|
||||
.btn-outline:hover:not(:disabled){background:var(--color-bg-subtle);border-color:var(--color-text-muted)}
|
||||
.btn-danger{background:var(--color-danger);color:white;border-color:var(--color-danger)}
|
||||
.btn-danger:hover:not(:disabled){background:#b91c1c}
|
||||
.btn-sm{padding:6px 14px;font-size:13px}
|
||||
.btn-ghost{background:none;border:none;color:var(--color-text-muted);cursor:pointer;padding:6px 12px;border-radius:var(--radius-sm);transition:all 0.15s}
|
||||
.btn-ghost:hover{background:var(--color-bg-subtle);color:var(--color-text)}
|
||||
.btn-lg{padding:14px 28px;font-size:16px}
|
||||
.btn-icon{padding:8px}
|
||||
.btn-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,0.3);border-top-color:white;border-radius:50%;animation:spin 0.6s linear infinite}
|
||||
|
||||
/* Info/Error Boxes */
|
||||
.info-box{padding:14px 20px;background:var(--color-primary-light);border:1px solid #bfdbfe;border-radius:var(--radius-md);font-size:14px;color:var(--color-primary-dark);margin-bottom:20px}
|
||||
.error-box{padding:14px 20px;background:var(--color-danger-light);border:1px solid #fca5a5;border-radius:var(--radius-md);font-size:14px;color:var(--color-danger);margin-bottom:20px}
|
||||
|
||||
/* Empty States */
|
||||
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center;color:var(--color-text-muted)}
|
||||
.empty-state svg{margin-bottom:16px;opacity:0.5}
|
||||
.empty-state h3{font-size:16px;font-weight:600;color:var(--color-text-secondary);margin-bottom:8px}
|
||||
.empty-state p{font-size:14px;margin-bottom:20px}
|
||||
|
||||
/* Settings */
|
||||
.settings-layout{display:flex;gap:32px}
|
||||
.settings-nav{width:200px;flex-shrink:0}
|
||||
.settings-nav-item{width:100%;display:block;padding:10px 16px;background:none;border:none;border-radius:var(--radius-md);font-size:14px;font-weight:500;color:var(--color-text-secondary);cursor:pointer;text-align:left;transition:all var(--transition-fast);margin-bottom:4px}
|
||||
.settings-nav-item:hover{background:var(--color-bg-subtle)}
|
||||
.settings-nav-item.active{background:var(--color-primary-light);color:var(--color-primary)}
|
||||
.settings-content{flex:1}
|
||||
.settings-section{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:28px;margin-bottom:24px}
|
||||
.settings-section h3{font-size:16px;font-weight:600;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--color-border-light)}
|
||||
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--color-border-light)}
|
||||
.setting-row:last-child{border-bottom:none}
|
||||
.setting-info{flex:1}
|
||||
.setting-label{font-size:14px;font-weight:500;color:var(--color-text)}
|
||||
.setting-desc{font-size:13px;color:var(--color-text-muted);margin-top:2px}
|
||||
.setting-value{font-size:13px;color:var(--color-text-secondary);font-family:var(--font-mono)}
|
||||
.session-info-detailed{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
|
||||
|
||||
/* Developer */
|
||||
.preset-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
|
||||
.dev-form{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:24px;margin-bottom:24px}
|
||||
.dev-response{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}
|
||||
.response-header{display:flex;align-items:center;gap:12px;padding:14px 20px;background:var(--color-bg-subtle);border-bottom:1px solid var(--color-border);font-size:13px;font-weight:500}
|
||||
.status-dot{width:10px;height:10px;border-radius:50%}
|
||||
.status-dot.green{background:var(--color-success)}
|
||||
.status-dot.red{background:var(--color-danger)}
|
||||
.elapsed{color:var(--color-text-muted);margin-left:auto}
|
||||
.request-id{color:var(--color-text-muted);font-family:var(--font-mono);font-size:12px}
|
||||
.response-body{padding:20px;font-family:var(--font-mono);font-size:13px;line-height:1.6;overflow-x:auto;max-height:500px;overflow-y:auto;white-space:pre-wrap;word-break:break-word}
|
||||
|
||||
/* Skeletons */
|
||||
.skeleton{background:linear-gradient(90deg,var(--color-bg-subtle) 25%,var(--color-bg-muted) 50%,var(--color-bg-subtle) 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite;border-radius:var(--radius-sm)}
|
||||
@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
|
||||
.skeleton-row{height:16px;margin-bottom:12px}
|
||||
.loading-placeholder{padding:16px 0}
|
||||
.loading-placeholder.padded{padding:20px}
|
||||
|
||||
/* Detail panel notices */
|
||||
.detail-notice{display:flex;gap:12px;padding:14px 16px;border-radius:var(--radius-md);margin-bottom:16px;font-size:13px;line-height:1.5}
|
||||
.detail-notice.notice-info{background:var(--color-primary-light);border:1px solid rgba(37,99,235,0.15)}
|
||||
.detail-notice .notice-icon{flex-shrink:0;margin-top:1px;color:var(--color-primary)}
|
||||
.detail-notice strong{display:block;font-weight:600;color:var(--color-text);margin-bottom:2px}
|
||||
.detail-notice p{color:var(--color-text-secondary);margin:0}
|
||||
|
||||
/* Small status badge (for channel rows) */
|
||||
.status-badge-sm{display:inline-flex;align-items:center;padding:1px 8px;border-radius:10px;font-size:11px;font-weight:600}
|
||||
.status-badge-sm.status-active,.status-badge-sm.status-enabled{background:var(--color-success-light);color:var(--color-success)}
|
||||
.status-badge-sm.status-in-review,.status-badge-sm.status-pending,.status-badge-sm.status-staged{background:var(--color-primary-light);color:var(--color-primary)}
|
||||
.status-badge-sm.status-paused{background:var(--color-warning-light);color:var(--color-warning)}
|
||||
.status-badge-sm.status-error,.status-badge-sm.status-cancelled{background:var(--color-danger-light);color:var(--color-danger)}
|
||||
|
||||
/* Danger outline button */
|
||||
.btn-danger-outline{color:var(--color-danger);border-color:var(--color-danger)}
|
||||
.btn-danger-outline:hover{background:var(--color-danger-light)}
|
||||
|
||||
/* Timeline dot: submitted */
|
||||
.timeline-dot.submitted{background:var(--color-primary)}
|
||||
|
||||
/* Responsive */
|
||||
@media(max-width:900px){.settings-layout{flex-direction:column}.settings-nav{width:100%;display:flex;gap:8px;overflow-x:auto}.landing-features{flex-direction:column}}
|
||||
@media(max-width:768px){.content-area{padding:20px}.view-header{flex-direction:column;gap:16px}.detail-panel{width:100%}.sidebar{transform:translateX(-100%)}.sidebar.open{transform:translateX(0)}.main-area{margin-left:0}}
|
||||
/* ============================================================
|
||||
Contextual Help System
|
||||
Append to: admin/src/styles/app.css
|
||||
client/src/styles/app.css (update --accent vars as needed)
|
||||
============================================================ */
|
||||
|
||||
/* ── Help Trigger (floating icon + label) ────────────────────*/
|
||||
|
||||
.help-trigger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
background: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 20px;
|
||||
padding: 3px 8px 3px 4px;
|
||||
cursor: pointer;
|
||||
color: var(--accent, #3b82f6);
|
||||
font-size: 12px;
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
transition: background 0.15s, border-color 0.15s, color 0.15s;
|
||||
white-space: nowrap;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.help-trigger:hover {
|
||||
background: var(--accent-light, rgba(59,130,246,0.08));
|
||||
border-color: var(--accent, #3b82f6);
|
||||
color: var(--accent-hover, #2563eb);
|
||||
}
|
||||
|
||||
.help-trigger-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: var(--accent-light, rgba(59,130,246,0.1));
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
color: var(--accent, #3b82f6);
|
||||
}
|
||||
|
||||
.help-trigger-label {
|
||||
color: var(--accent, #3b82f6);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
/* ── Help Modal ───────────────────────────────────────────────*/
|
||||
|
||||
.help-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
padding: 20px;
|
||||
animation: helpFadeIn 0.15s ease;
|
||||
}
|
||||
|
||||
@keyframes helpFadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.help-modal {
|
||||
background: var(--surface, #fff);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.1);
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
max-height: 80vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
animation: helpSlideUp 0.2s cubic-bezier(0.34,1.56,0.64,1);
|
||||
}
|
||||
|
||||
@keyframes helpSlideUp {
|
||||
from { transform: translateY(16px) scale(0.97); opacity: 0; }
|
||||
to { transform: translateY(0) scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
.help-modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px 14px;
|
||||
border-bottom: 1px solid var(--border, rgba(0,0,0,0.09));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.help-modal-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.help-modal-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: var(--accent-light, rgba(59,130,246,0.1));
|
||||
border-radius: 8px;
|
||||
color: var(--accent, #3b82f6);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.help-modal-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text, #1a1d23);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.help-modal-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
color: var(--text-dim, #9099a4);
|
||||
transition: background 0.12s, color 0.12s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.help-modal-close:hover {
|
||||
background: var(--bg, #f4f5f7);
|
||||
color: var(--text, #1a1d23);
|
||||
}
|
||||
|
||||
.help-modal-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.help-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: var(--text-dim, #9099a4);
|
||||
font-size: 14px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.help-spinner {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 2px solid var(--border, #e5e7eb);
|
||||
border-top-color: var(--accent, #3b82f6);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.7s linear infinite;
|
||||
}
|
||||
|
||||
.help-error {
|
||||
color: var(--danger, #dc2626);
|
||||
font-size: 14px;
|
||||
background: var(--danger-bg, #fef2f2);
|
||||
padding: 10px 14px;
|
||||
border-radius: 8px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Rendered HTML help content */
|
||||
.help-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.65;
|
||||
color: var(--text, #1a1d23);
|
||||
}
|
||||
.help-content p { margin: 0 0 12px; }
|
||||
.help-content p:last-child { margin-bottom: 0; }
|
||||
.help-content h4 { font-size: 13px; font-weight: 600; margin: 16px 0 6px; color: var(--text-secondary, #374151); text-transform: uppercase; letter-spacing: 0.3px; }
|
||||
.help-content ul, .help-content ol { margin: 0 0 12px 20px; }
|
||||
.help-content li { margin-bottom: 5px; }
|
||||
.help-content strong { font-weight: 600; }
|
||||
.help-content a { color: var(--accent, #3b82f6); text-decoration: none; }
|
||||
.help-content a:hover { text-decoration: underline; }
|
||||
|
||||
.help-modal-footer {
|
||||
padding: 10px 20px;
|
||||
border-top: 1px solid var(--border, rgba(0,0,0,0.06));
|
||||
flex-shrink: 0;
|
||||
background: var(--bg, #f4f5f7);
|
||||
}
|
||||
|
||||
.help-key-badge {
|
||||
font-family: var(--font-mono, monospace);
|
||||
font-size: 11px;
|
||||
color: var(--text-dim, #9099a4);
|
||||
}
|
||||
|
||||
|
||||
/* ── HelpPanel (Admin) ────────────────────────────────────────*/
|
||||
|
||||
.help-panel {
|
||||
padding: 24px;
|
||||
max-width: 1000px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.help-panel-toast {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
right: 24px;
|
||||
background: var(--success, #16a34a);
|
||||
color: #fff;
|
||||
padding: 10px 18px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
z-index: 1000;
|
||||
animation: helpFadeIn 0.2s ease;
|
||||
}
|
||||
.help-panel-toast.help-panel-toast-error {
|
||||
background: var(--danger, #dc2626);
|
||||
}
|
||||
|
||||
.help-edit-card {
|
||||
background: var(--surface, #fff);
|
||||
border: 1px solid var(--accent, #3b82f6);
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 0 0 4px var(--accent-light, rgba(59,130,246,0.08));
|
||||
}
|
||||
|
||||
.help-edit-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.help-edit-header h3 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text, #1a1d23);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.help-form-row {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.help-form-row-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.help-form-label {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary, #5f6672);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.help-form-hint {
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
color: var(--text-dim, #9099a4);
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.help-key-suggestions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.help-key-chip {
|
||||
background: var(--accent-light, rgba(59,130,246,0.08));
|
||||
border: 1px solid var(--accent, #3b82f6);
|
||||
color: var(--accent, #3b82f6);
|
||||
border-radius: 4px;
|
||||
padding: 2px 8px;
|
||||
font-size: 11px;
|
||||
font-family: var(--font-mono, monospace);
|
||||
cursor: pointer;
|
||||
transition: background 0.12s;
|
||||
}
|
||||
.help-key-chip:hover {
|
||||
background: var(--accent-light, rgba(59,130,246,0.16));
|
||||
}
|
||||
|
||||
.help-key-display {
|
||||
font-family: var(--font-mono, monospace);
|
||||
font-size: 13px;
|
||||
color: var(--text, #1a1d23);
|
||||
background: var(--bg, #f4f5f7);
|
||||
border: 1px solid var(--border, rgba(0,0,0,0.09));
|
||||
border-radius: 6px;
|
||||
padding: 7px 10px;
|
||||
}
|
||||
|
||||
.help-body-textarea {
|
||||
resize: vertical;
|
||||
min-height: 160px;
|
||||
}
|
||||
|
||||
/* Table extras */
|
||||
.help-table-wrap {
|
||||
background: var(--surface, #fff);
|
||||
border: 1px solid var(--border, rgba(0,0,0,0.09));
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.help-row-inactive {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.help-key-code {
|
||||
font-family: var(--font-mono, monospace);
|
||||
font-size: 12px;
|
||||
background: var(--bg, #f4f5f7);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
color: var(--text, #1a1d23);
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary, #5f6672);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* ── Step intro header with HelpIcon aligned right ── */
|
||||
.step-intro-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.step-intro-header h2 {
|
||||
margin: 0;
|
||||
}
|
||||
27
Client-Home/webpack.config.js
Normal file
27
Client-Home/webpack.config.js
Normal file
@@ -0,0 +1,27 @@
|
||||
const path = require('path');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
|
||||
module.exports = {
|
||||
entry: './src/index.js',
|
||||
output: {
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
filename: 'bundle.js',
|
||||
publicPath: '/',
|
||||
clean: true
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{ test: /\.(js|jsx)$/, exclude: /node_modules/, use: 'babel-loader' },
|
||||
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
|
||||
]
|
||||
},
|
||||
resolve: { extensions: ['.js', '.jsx'] },
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({ template: './public/index.html', favicon: false })
|
||||
],
|
||||
devServer: {
|
||||
port: 8081,
|
||||
historyApiFallback: true,
|
||||
hot: true
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user