mirror of
https://github.com/ktds-dg0501/kt-event-marketing.git
synced 2025-12-06 16:06:24 +00:00
09, 14번 파일 헤더를 05번과 동일한 app-bar 스타일로 통일
This commit is contained in:
doyeon
parent
1f4b982407
commit
9aace30054
@ -5,56 +5,16 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>이벤트 기획안 승인 - KT 이벤트 마케팅</title>
|
||||
<link rel="stylesheet" href="css/variables.css">
|
||||
<link rel="stylesheet" href="css/reset.css">
|
||||
<link rel="stylesheet" href="css/layout.css">
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<link rel="stylesheet" href="css/components/navigation.css">
|
||||
<style>
|
||||
/* Layout */
|
||||
.approval-container {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
|
||||
padding-bottom: var(--spacing-2xl);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.approval-header {
|
||||
background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
|
||||
color: var(--color-white);
|
||||
padding: var(--spacing-xl) var(--spacing-m);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.approval-header__back {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-white);
|
||||
font-size: var(--font-size-xl);
|
||||
padding: 0;
|
||||
margin-bottom: var(--spacing-m);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.approval-header__badge {
|
||||
display: inline-block;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: var(--spacing-xs) var(--spacing-m);
|
||||
border-radius: var(--radius-s);
|
||||
font-size: var(--font-size-s);
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
|
||||
.approval-header__title {
|
||||
font-size: var(--font-size-2xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.approval-header__subtitle {
|
||||
font-size: var(--font-size-m);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Content */
|
||||
.approval-content {
|
||||
background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
|
||||
padding: var(--spacing-l) var(--spacing-m);
|
||||
padding-bottom: var(--spacing-2xl);
|
||||
}
|
||||
|
||||
/* Success Message */
|
||||
@ -382,19 +342,22 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="approval-container">
|
||||
<!-- Header -->
|
||||
<header class="approval-header">
|
||||
<button class="approval-header__back" onclick="history.back()">
|
||||
←
|
||||
</button>
|
||||
<div class="approval-header__badge">✨ AI 기획 완료</div>
|
||||
<h1 class="approval-header__title">이벤트 기획안 승인</h1>
|
||||
<p class="approval-header__subtitle">AI가 생성한 이벤트 기획안을 확인하고 승인해 주세요</p>
|
||||
<div class="page">
|
||||
<!-- App Bar -->
|
||||
<header class="app-bar">
|
||||
<div class="app-bar__container">
|
||||
<div class="app-bar__left">
|
||||
<svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()">
|
||||
<path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h1 class="app-bar__title">이벤트 기획안 승인</h1>
|
||||
<div class="app-bar__right"></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Content -->
|
||||
<main class="approval-content">
|
||||
<main class="page-main approval-content">
|
||||
<!-- Success Message -->
|
||||
<div class="success-message">
|
||||
<div class="success-message__icon">🎉</div>
|
||||
|
||||
@ -4,184 +4,17 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>콘텐츠 최종 승인 - KT 이벤트 마케팅</title>
|
||||
<link rel="stylesheet" href="css/variables.css">
|
||||
<link rel="stylesheet" href="css/reset.css">
|
||||
<link rel="stylesheet" href="css/layout.css">
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<link rel="stylesheet" href="css/components/navigation.css">
|
||||
<style>
|
||||
/* CSS Variables */
|
||||
:root {
|
||||
/* Colors */
|
||||
--color-primary: #E31E24;
|
||||
--color-primary-dark: #B71C1C;
|
||||
--color-primary-light: #FFEBEE;
|
||||
--color-secondary: #FF6B6B;
|
||||
--color-secondary-dark: #FF5252;
|
||||
--color-secondary-light: #FFE9E9;
|
||||
--color-success: #4CAF50;
|
||||
--color-success-light: #E8F5E9;
|
||||
--color-warning: #FF9800;
|
||||
--color-warning-light: #FFF3E0;
|
||||
--color-error: #F44336;
|
||||
--color-error-light: #FFEBEE;
|
||||
--color-info: #2196F3;
|
||||
--color-info-light: #E3F2FD;
|
||||
|
||||
/* Grayscale */
|
||||
--color-white: #FFFFFF;
|
||||
--color-gray-50: #FAFAFA;
|
||||
--color-gray-100: #F5F5F5;
|
||||
--color-gray-200: #EEEEEE;
|
||||
--color-gray-300: #E0E0E0;
|
||||
--color-gray-400: #BDBDBD;
|
||||
--color-gray-500: #9E9E9E;
|
||||
--color-gray-600: #757575;
|
||||
--color-gray-700: #616161;
|
||||
--color-gray-800: #424242;
|
||||
--color-gray-900: #212121;
|
||||
--color-black: #000000;
|
||||
|
||||
/* Text Colors */
|
||||
--color-text-primary: #212121;
|
||||
--color-text-secondary: #757575;
|
||||
--color-text-tertiary: #9E9E9E;
|
||||
--color-text-disabled: #BDBDBD;
|
||||
--color-text-inverse: #FFFFFF;
|
||||
|
||||
/* Border Colors */
|
||||
--color-border-light: #E0E0E0;
|
||||
--color-border-medium: #BDBDBD;
|
||||
--color-border-dark: #757575;
|
||||
|
||||
/* Background Colors */
|
||||
--color-bg-primary: #FFFFFF;
|
||||
--color-bg-secondary: #F5F5F5;
|
||||
--color-bg-tertiary: #FAFAFA;
|
||||
|
||||
/* Spacing (4px base unit) */
|
||||
--spacing-xs: 4px;
|
||||
--spacing-s: 8px;
|
||||
--spacing-m: 16px;
|
||||
--spacing-l: 24px;
|
||||
--spacing-xl: 32px;
|
||||
--spacing-2xl: 48px;
|
||||
--spacing-3xl: 64px;
|
||||
|
||||
/* Typography */
|
||||
--font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--font-size-xs: 12px;
|
||||
--font-size-s: 14px;
|
||||
--font-size-m: 16px;
|
||||
--font-size-l: 18px;
|
||||
--font-size-xl: 20px;
|
||||
--font-size-2xl: 24px;
|
||||
--font-size-3xl: 32px;
|
||||
--font-size-4xl: 40px;
|
||||
|
||||
--font-weight-regular: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
|
||||
--line-height-tight: 1.2;
|
||||
--line-height-normal: 1.5;
|
||||
--line-height-relaxed: 1.75;
|
||||
|
||||
/* Border Radius */
|
||||
--radius-s: 4px;
|
||||
--radius-m: 8px;
|
||||
--radius-l: 12px;
|
||||
--radius-xl: 16px;
|
||||
--radius-2xl: 24px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
|
||||
|
||||
/* Transitions */
|
||||
--transition-fast: 150ms ease-in-out;
|
||||
--transition-normal: 250ms ease-in-out;
|
||||
--transition-slow: 350ms ease-in-out;
|
||||
|
||||
/* Z-index */
|
||||
--z-dropdown: 1000;
|
||||
--z-sticky: 1020;
|
||||
--z-fixed: 1030;
|
||||
--z-modal-backdrop: 1040;
|
||||
--z-modal: 1050;
|
||||
--z-popover: 1060;
|
||||
--z-tooltip: 1070;
|
||||
}
|
||||
|
||||
/* Reset & Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-family-primary);
|
||||
font-size: var(--font-size-m);
|
||||
line-height: var(--line-height-normal);
|
||||
color: var(--color-text-primary);
|
||||
background: var(--color-bg-secondary);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
.approval-container {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
|
||||
padding-bottom: var(--spacing-2xl);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.approval-header {
|
||||
background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
|
||||
color: var(--color-white);
|
||||
padding: var(--spacing-xl) var(--spacing-m);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.approval-header__back {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-white);
|
||||
font-size: var(--font-size-xl);
|
||||
padding: 0;
|
||||
margin-bottom: var(--spacing-m);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.approval-header__badge {
|
||||
display: inline-block;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: var(--spacing-xs) var(--spacing-m);
|
||||
border-radius: var(--radius-s);
|
||||
font-size: var(--font-size-s);
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
|
||||
.approval-header__title {
|
||||
font-size: var(--font-size-2xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.approval-header__subtitle {
|
||||
font-size: var(--font-size-m);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Content */
|
||||
.approval-content {
|
||||
background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
|
||||
padding: var(--spacing-l) var(--spacing-m);
|
||||
padding-bottom: var(--spacing-2xl);
|
||||
}
|
||||
|
||||
/* Success Message */
|
||||
@ -499,19 +332,22 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="approval-container">
|
||||
<!-- Header -->
|
||||
<header class="approval-header">
|
||||
<button class="approval-header__back" onclick="history.back()">
|
||||
←
|
||||
</button>
|
||||
<div class="approval-header__badge">✨ AI 콘텐츠 생성 완료</div>
|
||||
<h1 class="approval-header__title">콘텐츠 최종 승인</h1>
|
||||
<p class="approval-header__subtitle">생성된 모든 콘텐츠를 확인하고 승인해 주세요</p>
|
||||
<div class="page">
|
||||
<!-- App Bar -->
|
||||
<header class="app-bar">
|
||||
<div class="app-bar__container">
|
||||
<div class="app-bar__left">
|
||||
<svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()">
|
||||
<path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h1 class="app-bar__title">콘텐츠 최종 승인</h1>
|
||||
<div class="app-bar__right"></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Content -->
|
||||
<main class="approval-content">
|
||||
<main class="page-main approval-content">
|
||||
<!-- Success Message -->
|
||||
<div class="success-message">
|
||||
<div class="success-message__icon">🎉</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user