skillhub-186-html-ppt-zhangzara-coral
wehub-skill-sync
1488 行
47 KiB
HTML
1488 行
47 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>演示文稿模板</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;600;700&display=swap');
|
|
|
|
:root {
|
|
--coral: #E85D5D;
|
|
--coral-dark: #D44A4A;
|
|
--cream: #F5F0E8;
|
|
--cream-dark: #E8E0D4;
|
|
--black: #1A1A1A;
|
|
--gray: #6B6B6B;
|
|
--light-gray: #B0B0B0;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
font-family: 'Inter', sans-serif;
|
|
background: var(--black);
|
|
color: var(--black);
|
|
}
|
|
|
|
.presentation {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.slide {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.6s ease, visibility 0.6s ease;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.slide.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
/* Navigation */
|
|
.nav-dots {
|
|
position: fixed;
|
|
right: 24px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
z-index: 1000;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.nav-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.3);
|
|
border: 2px solid rgba(255,255,255,0.5);
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.nav-dot.active {
|
|
background: var(--coral);
|
|
border-color: var(--coral);
|
|
}
|
|
|
|
.nav-dot.dark {
|
|
background: rgba(26,26,26,0.2);
|
|
border-color: rgba(26,26,26,0.4);
|
|
}
|
|
|
|
.nav-dot.dark.active {
|
|
background: var(--coral);
|
|
border-color: var(--coral);
|
|
}
|
|
|
|
.slide-counter {
|
|
position: fixed;
|
|
bottom: 24px;
|
|
right: 24px;
|
|
z-index: 1000;
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 18px;
|
|
letter-spacing: 2px;
|
|
color: rgba(255,255,255,0.6);
|
|
}
|
|
|
|
.slide-counter.dark {
|
|
color: rgba(26,26,26,0.5);
|
|
}
|
|
|
|
/* Arrow Navigation */
|
|
.nav-arrows {
|
|
position: fixed;
|
|
bottom: 24px;
|
|
left: 24px;
|
|
z-index: 1000;
|
|
display: flex;
|
|
gap: 16px;
|
|
}
|
|
|
|
.nav-arrow {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.1);
|
|
border: 2px solid rgba(255,255,255,0.3);
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.nav-arrow:hover {
|
|
background: var(--coral);
|
|
border-color: var(--coral);
|
|
}
|
|
|
|
.nav-arrow.dark {
|
|
background: rgba(26,26,26,0.05);
|
|
border-color: rgba(26,26,26,0.2);
|
|
color: var(--black);
|
|
}
|
|
|
|
.nav-arrow.dark:hover {
|
|
background: var(--coral);
|
|
border-color: var(--coral);
|
|
color: white;
|
|
}
|
|
|
|
/* ===== SLIDE 1: TITLE / COVER ===== */
|
|
.slide-1 {
|
|
display: grid;
|
|
grid-template-rows: 32% 68%;
|
|
}
|
|
|
|
.slide-1 .top-section {
|
|
background: var(--coral);
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
padding: clamp(24px, 4vh, 48px) clamp(40px, 8vw, 100px);
|
|
}
|
|
|
|
.slide-1 .zigzag-layer {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.slide-1 .zigzag-layer svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.slide-1 .brand-mark {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
letter-spacing: 4px;
|
|
color: var(--black);
|
|
position: relative;
|
|
z-index: 2;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.slide-1 .bottom-section {
|
|
background: var(--cream);
|
|
padding: clamp(28px, 4.5vh, 60px) clamp(40px, 8vw, 100px) clamp(24px, 3.5vh, 44px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
min-height: 0;
|
|
}
|
|
|
|
.slide-1 .main-title {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
/* Cap by both viewport WIDTH and HEIGHT so the 3-line title
|
|
can never grow taller than the bottom-section can hold.
|
|
Without the vh cap the title overflows on short laptops. */
|
|
font-size: min(120px, 9vw, 13vh);
|
|
color: var(--black);
|
|
line-height: 0.9;
|
|
letter-spacing: 4px;
|
|
}
|
|
|
|
.slide-1 .title-rule {
|
|
width: 100%;
|
|
height: 3px;
|
|
background: var(--black);
|
|
margin-top: clamp(16px, 2.5vh, 32px);
|
|
opacity: 0.15;
|
|
}
|
|
|
|
.slide-1 .meta-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
margin-top: auto;
|
|
padding-top: clamp(16px, 2.5vh, 32px);
|
|
}
|
|
|
|
.slide-1 .meta-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.slide-1 .meta-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: 2px;
|
|
}
|
|
|
|
.slide-1 .meta-label {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 3px;
|
|
text-transform: uppercase;
|
|
color: var(--gray);
|
|
}
|
|
|
|
.slide-1 .meta-value {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: min(44px, 3.5vw, 5.5vh);
|
|
color: var(--black);
|
|
letter-spacing: 2px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.slide-1 .meta-date {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: min(38px, 3vw, 4.8vh);
|
|
color: var(--black);
|
|
letter-spacing: 2px;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* ===== SLIDE 2: INTRODUCTION ===== */
|
|
.slide-2 {
|
|
background: var(--cream);
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: clamp(40px, 6vh, 80px) clamp(40px, 8vw, 100px);
|
|
}
|
|
|
|
.slide-2 .section-label {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
letter-spacing: 4px;
|
|
text-transform: uppercase;
|
|
color: var(--coral);
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.slide-2 .big-statement {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: clamp(42px, 7vw, 100px);
|
|
color: var(--black);
|
|
line-height: 1.0;
|
|
letter-spacing: 2px;
|
|
max-width: 90%;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.slide-2 .body-text {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: clamp(15px, 1.4vw, 20px);
|
|
line-height: 1.7;
|
|
color: var(--gray);
|
|
max-width: 600px;
|
|
}
|
|
|
|
.slide-2 .accent-line {
|
|
width: 80px;
|
|
height: 4px;
|
|
background: var(--coral);
|
|
margin-top: auto;
|
|
}
|
|
|
|
/* ===== SLIDE 3: TWO COLUMN ===== */
|
|
.slide-3 {
|
|
background: var(--black);
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.slide-3 .left-col {
|
|
background: var(--coral);
|
|
padding: clamp(40px, 6vh, 80px) clamp(32px, 4vw, 60px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.slide-3 .left-col::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
right: -30%;
|
|
width: 80%;
|
|
height: 200%;
|
|
background: repeating-linear-gradient(
|
|
45deg,
|
|
transparent,
|
|
transparent 20px,
|
|
rgba(0,0,0,0.06) 20px,
|
|
rgba(0,0,0,0.06) 40px
|
|
);
|
|
}
|
|
|
|
.slide-3 .left-col .number {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: clamp(100px, 15vw, 200px);
|
|
color: rgba(0,0,0,0.12);
|
|
line-height: 1;
|
|
position: relative;
|
|
}
|
|
|
|
.slide-3 .left-col .col-title {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: clamp(36px, 5vw, 72px);
|
|
color: var(--black);
|
|
line-height: 1;
|
|
letter-spacing: 2px;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.slide-3 .right-col {
|
|
padding: clamp(40px, 6vh, 80px) clamp(32px, 4vw, 60px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.slide-3 .right-col .item {
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.slide-3 .right-col .item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.slide-3 .right-col .item-label {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 3px;
|
|
text-transform: uppercase;
|
|
color: var(--coral);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.slide-3 .right-col .item-text {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: clamp(14px, 1.2vw, 18px);
|
|
color: var(--cream);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ===== SLIDE 4: CHART / DATA ===== */
|
|
.slide-4 {
|
|
background: var(--cream);
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: clamp(40px, 6vh, 80px) clamp(40px, 8vw, 100px);
|
|
}
|
|
|
|
.slide-4 .slide-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.slide-4 .header-left .section-label {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
letter-spacing: 4px;
|
|
text-transform: uppercase;
|
|
color: var(--coral);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.slide-4 .header-left .slide-title {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: clamp(40px, 6vw, 80px);
|
|
color: var(--black);
|
|
line-height: 1;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.slide-4 .header-right {
|
|
text-align: right;
|
|
}
|
|
|
|
.slide-4 .stat-number {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: clamp(48px, 7vw, 96px);
|
|
color: var(--coral);
|
|
line-height: 1;
|
|
}
|
|
|
|
.slide-4 .stat-label {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 12px;
|
|
color: var(--gray);
|
|
letter-spacing: 2px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.slide-4 .chart-container {
|
|
flex: 1;
|
|
display: flex;
|
|
gap: 40px;
|
|
align-items: stretch;
|
|
min-height: 0;
|
|
}
|
|
|
|
.slide-4 .chart-wrapper {
|
|
flex: 2;
|
|
position: relative;
|
|
min-height: 0;
|
|
}
|
|
|
|
.slide-4 .chart-wrapper canvas {
|
|
max-height: 100%;
|
|
}
|
|
|
|
.slide-4 .chart-sidebar {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.slide-4 .sidebar-item {
|
|
background: white;
|
|
padding: 20px 24px;
|
|
border-left: 4px solid var(--coral);
|
|
}
|
|
|
|
.slide-4 .sidebar-item .value {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: clamp(28px, 3vw, 48px);
|
|
color: var(--black);
|
|
line-height: 1;
|
|
}
|
|
|
|
.slide-4 .sidebar-item .label {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 12px;
|
|
color: var(--gray);
|
|
margin-top: 4px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
/* ===== SLIDE 5: FULL WIDTH FEATURE ===== */
|
|
.slide-5 {
|
|
display: grid;
|
|
grid-template-rows: 1fr auto;
|
|
background: var(--black);
|
|
}
|
|
|
|
.slide-5 .visual-area {
|
|
background: linear-gradient(135deg, var(--coral-dark) 0%, var(--coral) 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.slide-5 .visual-area .pattern-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0.1;
|
|
background-image: repeating-linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
transparent 60px,
|
|
var(--black) 60px,
|
|
var(--black) 62px
|
|
);
|
|
}
|
|
|
|
.slide-5 .visual-area .center-text {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: clamp(80px, 15vw, 200px);
|
|
color: var(--black);
|
|
letter-spacing: 12px;
|
|
position: relative;
|
|
z-index: 2;
|
|
text-align: center;
|
|
}
|
|
|
|
.slide-5 .info-bar {
|
|
background: var(--cream);
|
|
padding: clamp(24px, 4vh, 40px) clamp(40px, 8vw, 100px);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.slide-5 .info-bar .bar-title {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: clamp(28px, 4vw, 56px);
|
|
color: var(--black);
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.slide-5 .info-bar .bar-meta {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 12px;
|
|
color: var(--gray);
|
|
letter-spacing: 2px;
|
|
text-transform: uppercase;
|
|
text-align: right;
|
|
}
|
|
|
|
/* ===== SLIDE 6: THREE COLUMNS ===== */
|
|
.slide-6 {
|
|
background: var(--cream);
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: clamp(40px, 6vh, 80px) clamp(40px, 8vw, 100px);
|
|
}
|
|
|
|
.slide-6 .slide-title {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: clamp(40px, 6vw, 80px);
|
|
color: var(--black);
|
|
line-height: 1;
|
|
letter-spacing: 2px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.slide-6 .slide-subtitle {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 14px;
|
|
color: var(--gray);
|
|
letter-spacing: 2px;
|
|
margin-bottom: 48px;
|
|
}
|
|
|
|
.slide-6 .columns-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 32px;
|
|
flex: 1;
|
|
}
|
|
|
|
.slide-6 .column-card {
|
|
background: white;
|
|
padding: clamp(24px, 3vh, 40px);
|
|
border-top: 5px solid var(--coral);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.slide-6 .column-card .card-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: var(--coral);
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 24px;
|
|
color: white;
|
|
}
|
|
|
|
.slide-6 .column-card .card-title {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: clamp(24px, 2.5vw, 36px);
|
|
color: var(--black);
|
|
letter-spacing: 1px;
|
|
margin-bottom: 12px;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.slide-6 .column-card .card-text {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: clamp(13px, 1.1vw, 16px);
|
|
color: var(--gray);
|
|
line-height: 1.6;
|
|
flex: 1;
|
|
}
|
|
|
|
.slide-6 .column-card .card-stat {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: clamp(36px, 4vw, 56px);
|
|
color: var(--coral);
|
|
line-height: 1;
|
|
margin-top: auto;
|
|
padding-top: 20px;
|
|
}
|
|
|
|
/* ===== SLIDE 7: QUOTE ===== */
|
|
.slide-7 {
|
|
background: var(--black);
|
|
display: grid;
|
|
grid-template-columns: 40% 60%;
|
|
}
|
|
|
|
.slide-7 .quote-left {
|
|
background: var(--coral);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.slide-7 .quote-left::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: repeating-linear-gradient(
|
|
-45deg,
|
|
transparent,
|
|
transparent 30px,
|
|
rgba(0,0,0,0.06) 30px,
|
|
rgba(0,0,0,0.06) 60px
|
|
);
|
|
}
|
|
|
|
.slide-7 .quote-left .giant-mark {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: clamp(140px, 20vw, 280px);
|
|
color: var(--black);
|
|
opacity: 0.35;
|
|
line-height: 1;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.slide-7 .quote-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: clamp(40px, 8vh, 100px) clamp(48px, 7vw, 100px);
|
|
}
|
|
|
|
.slide-7 .quote-text {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: clamp(20px, 2.5vw, 36px);
|
|
font-weight: 300;
|
|
color: var(--cream);
|
|
line-height: 1.5;
|
|
font-style: italic;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.slide-7 .quote-author {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--coral);
|
|
letter-spacing: 3px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.slide-7 .quote-role {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 12px;
|
|
color: var(--gray);
|
|
margin-top: 4px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.slide-7 .quote-accent {
|
|
width: 60px;
|
|
height: 4px;
|
|
background: var(--coral);
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
/* ===== SLIDE 8: TIMELINE / DIAGRAM ===== */
|
|
.slide-8 {
|
|
background: var(--cream);
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: clamp(40px, 6vh, 80px) clamp(40px, 8vw, 100px);
|
|
}
|
|
|
|
.slide-8 .slide-header {
|
|
margin-bottom: 48px;
|
|
}
|
|
|
|
.slide-8 .section-label {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
letter-spacing: 4px;
|
|
text-transform: uppercase;
|
|
color: var(--coral);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.slide-8 .slide-title {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: clamp(40px, 6vw, 80px);
|
|
color: var(--black);
|
|
line-height: 1;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.slide-8 .timeline-container {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.slide-8 .timeline-line {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: var(--black);
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.slide-8 .timeline-line::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: repeating-linear-gradient(
|
|
90deg,
|
|
var(--black) 0px,
|
|
var(--black) 20px,
|
|
transparent 20px,
|
|
transparent 30px
|
|
);
|
|
}
|
|
|
|
.slide-8 .timeline-points {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.slide-8 .t-point {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 18%;
|
|
}
|
|
|
|
.slide-8 .t-point:nth-child(odd) .t-bubble {
|
|
margin-bottom: 24px;
|
|
order: 1;
|
|
}
|
|
|
|
.slide-8 .t-point:nth-child(odd) .t-info {
|
|
order: 2;
|
|
text-align: center;
|
|
}
|
|
|
|
.slide-8 .t-point:nth-child(even) .t-bubble {
|
|
margin-top: 24px;
|
|
order: 2;
|
|
}
|
|
|
|
.slide-8 .t-point:nth-child(even) .t-info {
|
|
order: 1;
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.slide-8 .t-bubble {
|
|
width: clamp(60px, 8vw, 100px);
|
|
height: clamp(60px, 8vw, 100px);
|
|
border-radius: 50%;
|
|
background: var(--coral);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: clamp(20px, 2vw, 32px);
|
|
color: white;
|
|
border: 4px solid var(--black);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.slide-8 .t-info .t-phase {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
letter-spacing: 2px;
|
|
text-transform: uppercase;
|
|
color: var(--coral);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.slide-8 .t-info .t-desc {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: clamp(12px, 1vw, 14px);
|
|
color: var(--gray);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* ===== SLIDE 9: TEAM GRID ===== */
|
|
.slide-9 {
|
|
background: var(--black);
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: clamp(40px, 6vh, 80px) clamp(40px, 8vw, 100px);
|
|
}
|
|
|
|
.slide-9 .slide-title {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: clamp(40px, 6vw, 80px);
|
|
color: var(--cream);
|
|
line-height: 1;
|
|
letter-spacing: 2px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.slide-9 .slide-subtitle {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 14px;
|
|
color: var(--gray);
|
|
letter-spacing: 2px;
|
|
margin-bottom: 48px;
|
|
}
|
|
|
|
.slide-9 .team-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 24px;
|
|
flex: 1;
|
|
}
|
|
|
|
.slide-9 .team-member {
|
|
background: rgba(245, 240, 232, 0.05);
|
|
padding: clamp(20px, 2vh, 32px);
|
|
border: 1px solid rgba(245, 240, 232, 0.1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.slide-9 .team-member:hover {
|
|
background: rgba(232, 93, 93, 0.1);
|
|
border-color: var(--coral);
|
|
}
|
|
|
|
.slide-9 .member-avatar {
|
|
width: clamp(60px, 8vw, 100px);
|
|
height: clamp(60px, 8vw, 100px);
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, var(--coral) 0%, var(--coral-dark) 100%);
|
|
margin-bottom: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: clamp(28px, 3vw, 40px);
|
|
color: white;
|
|
}
|
|
|
|
.slide-9 .member-name {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--cream);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.slide-9 .member-role {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 12px;
|
|
color: var(--gray);
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
/* ===== SLIDE 10: CLOSING ===== */
|
|
.slide-10 {
|
|
display: grid;
|
|
grid-template-columns: 55% 45%;
|
|
}
|
|
|
|
.slide-10 .left-panel {
|
|
background: var(--coral);
|
|
padding: clamp(40px, 8vh, 100px) clamp(40px, 6vw, 80px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.slide-10 .left-panel .closing-title {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: clamp(48px, 8vw, 120px);
|
|
color: var(--black);
|
|
line-height: 0.95;
|
|
letter-spacing: 4px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.slide-10 .left-panel .closing-subtitle {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: clamp(14px, 1.3vw, 20px);
|
|
color: rgba(0,0,0,0.7);
|
|
line-height: 1.6;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.slide-10 .left-panel .zigzag-deco {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 60px;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.slide-10 .right-panel {
|
|
background: var(--cream);
|
|
padding: clamp(40px, 8vh, 100px) clamp(40px, 6vw, 80px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.slide-10 .contact-block {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.slide-10 .contact-block:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.slide-10 .contact-label {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 3px;
|
|
text-transform: uppercase;
|
|
color: var(--gray);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.slide-10 .contact-value {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: clamp(24px, 3vw, 40px);
|
|
color: var(--black);
|
|
letter-spacing: 2px;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.slide-10 .social-row {
|
|
display: flex;
|
|
gap: 16px;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.slide-10 .social-icon {
|
|
width: 44px;
|
|
height: 44px;
|
|
border: 2px solid var(--black);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: var(--black);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.slide-10 .social-icon:hover {
|
|
background: var(--coral);
|
|
border-color: var(--coral);
|
|
color: white;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.slide-3 {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 40% 60%;
|
|
}
|
|
|
|
.slide-6 .columns-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
.slide-8 .timeline-container {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.slide-8 .timeline-points {
|
|
min-width: 600px;
|
|
}
|
|
|
|
.slide-9 .team-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.slide-10 {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 50% 50%;
|
|
}
|
|
|
|
.slide-4 .chart-container {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.slide-7 {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 35% 65%;
|
|
}
|
|
|
|
.slide-7 .quote-left {
|
|
min-height: 200px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="presentation">
|
|
<!-- 幻灯片 1：标题 / 封面 -->
|
|
<div class="slide slide-1 active">
|
|
<div class="top-section">
|
|
<div class="zigzag-layer">
|
|
<svg viewBox="0 0 1200 400" preserveAspectRatio="xMidYMid slice">
|
|
<polyline points="-50,320 50,120 150,320 250,120 350,320 450,120 550,320 650,120 750,320 850,120 950,320 1050,120 1150,320 1250,120"
|
|
fill="none" stroke="#1A1A1A" stroke-width="18" stroke-linejoin="miter" stroke-linecap="butt" opacity="0.22"/>
|
|
<polyline points="-50,380 50,180 150,380 250,180 350,380 450,180 550,380 650,180 750,380 850,180 950,380 1050,180 1150,380 1250,180"
|
|
fill="none" stroke="#1A1A1A" stroke-width="12" stroke-linejoin="miter" stroke-linecap="butt" opacity="0.15"/>
|
|
</svg>
|
|
</div>
|
|
<div class="brand-mark">VENTURE</div>
|
|
</div>
|
|
<div class="bottom-section">
|
|
<div>
|
|
<div class="main-title">季度战略<br>研讨会<br>2026</div>
|
|
<div class="title-rule"></div>
|
|
</div>
|
|
<div class="meta-row">
|
|
<div class="meta-left">
|
|
<div class="meta-label">地点</div>
|
|
<div class="meta-value">7 楼</div>
|
|
</div>
|
|
<div class="meta-right">
|
|
<div class="meta-label">5 月 15 日 / 09:00 开始</div>
|
|
<div class="meta-date">2026</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 幻灯片 2：简介 -->
|
|
<div class="slide slide-2">
|
|
<div class="section-label">01 / 概览</div>
|
|
<div class="big-statement">重新定义可能性的边界</div>
|
|
<div class="body-text">
|
|
我们将多元视角与大胆想法汇聚一堂，创造有意义的改变。
|
|
我们的方法将战略思维与创意执行相结合，确保每项举措
|
|
都能为合作伙伴和社区带来可衡量的成果与持久价值。
|
|
</div>
|
|
<div class="accent-line"></div>
|
|
</div>
|
|
|
|
<!-- 幻灯片 3：双栏 -->
|
|
<div class="slide slide-3">
|
|
<div class="left-col">
|
|
<div class="number">03</div>
|
|
<div class="col-title">核心<br>支柱</div>
|
|
</div>
|
|
<div class="right-col">
|
|
<div class="item">
|
|
<div class="item-label">创新</div>
|
|
<div class="item-text">以前沿解决方案和前瞻性方法论不断突破边界。</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="item-label">协作</div>
|
|
<div class="item-text">在团队、学科和行业之间建立强有力的合作伙伴关系。</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="item-label">执行</div>
|
|
<div class="item-text">以精准、速度和毫不妥协的品质交付成果。</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 幻灯片 4：图表 / 数据 -->
|
|
<div class="slide slide-4">
|
|
<div class="slide-header">
|
|
<div class="header-left">
|
|
<div class="section-label">02 / 业绩</div>
|
|
<div class="slide-title">增长指标</div>
|
|
</div>
|
|
<div class="header-right">
|
|
<div class="stat-number">+147%</div>
|
|
<div class="stat-label">同比增长</div>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container">
|
|
<div class="chart-wrapper">
|
|
<canvas id="growthChart"></canvas>
|
|
</div>
|
|
<div class="chart-sidebar">
|
|
<div class="sidebar-item">
|
|
<div class="value">240 万</div>
|
|
<div class="label">总触达</div>
|
|
</div>
|
|
<div class="sidebar-item">
|
|
<div class="value">89%</div>
|
|
<div class="label">留存率</div>
|
|
</div>
|
|
<div class="sidebar-item">
|
|
<div class="value">156</div>
|
|
<div class="label">新合作伙伴</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 幻灯片 5：全宽展示 -->
|
|
<div class="slide slide-5">
|
|
<div class="visual-area">
|
|
<div class="pattern-overlay"></div>
|
|
<div class="center-text">影响力</div>
|
|
</div>
|
|
<div class="info-bar">
|
|
<div class="bar-title">全球倡议 2026</div>
|
|
<div class="bar-meta">第一阶段 / 第二季度启动<br>12 座城市 / 4 大洲</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 幻灯片 6：三栏 -->
|
|
<div class="slide slide-6">
|
|
<div class="slide-title">关键目标</div>
|
|
<div class="slide-subtitle">下一财季的战略优先事项</div>
|
|
<div class="columns-grid">
|
|
<div class="column-card">
|
|
<div class="card-icon">A</div>
|
|
<div class="card-title">扩大触达</div>
|
|
<div class="card-text">通过精准推广活动进入新市场，在新兴地区建立品牌存在。</div>
|
|
<div class="card-stat">24</div>
|
|
</div>
|
|
<div class="column-card">
|
|
<div class="card-icon">B</div>
|
|
<div class="card-title">深化参与</div>
|
|
<div class="card-text">通过增强服务产品，加强与现有合作伙伴的关系。</div>
|
|
<div class="card-stat">+45%</div>
|
|
</div>
|
|
<div class="column-card">
|
|
<div class="card-icon">C</div>
|
|
<div class="card-title">优化流程</div>
|
|
<div class="card-text">简化内部流程，提升交付效率与资源分配水平。</div>
|
|
<div class="card-stat">3.2x</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 幻灯片 7：引言 -->
|
|
<div class="slide slide-7">
|
|
<div class="quote-left">
|
|
<div class="giant-mark">"</div>
|
|
</div>
|
|
<div class="quote-right">
|
|
<div class="quote-accent"></div>
|
|
<div class="quote-text">预测未来的最佳方式，就是带着意图、精准和挑战常规的勇气去创造它。</div>
|
|
<div class="quote-author">Alexandra Chen</div>
|
|
<div class="quote-role">首席战略官</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 幻灯片 8：时间线 / 示意图 -->
|
|
<div class="slide slide-8">
|
|
<div class="slide-header">
|
|
<div class="section-label">03 / 路线图</div>
|
|
<div class="slide-title">项目时间线</div>
|
|
</div>
|
|
<div class="timeline-container">
|
|
<div class="timeline-line"></div>
|
|
<div class="timeline-points">
|
|
<div class="t-point">
|
|
<div class="t-bubble">Q1</div>
|
|
<div class="t-info">
|
|
<div class="t-phase">发现</div>
|
|
<div class="t-desc">与利益相关者对齐的研究与规划阶段</div>
|
|
</div>
|
|
</div>
|
|
<div class="t-point">
|
|
<div class="t-bubble">Q2</div>
|
|
<div class="t-info">
|
|
<div class="t-phase">设计</div>
|
|
<div class="t-desc">概念开发与原型验证</div>
|
|
</div>
|
|
</div>
|
|
<div class="t-point">
|
|
<div class="t-bubble">Q3</div>
|
|
<div class="t-info">
|
|
<div class="t-phase">构建</div>
|
|
<div class="t-desc">全面实施与迭代优化</div>
|
|
</div>
|
|
</div>
|
|
<div class="t-point">
|
|
<div class="t-bubble">Q4</div>
|
|
<div class="t-info">
|
|
<div class="t-phase">发布</div>
|
|
<div class="t-desc">市场发布与绩效监控</div>
|
|
</div>
|
|
</div>
|
|
<div class="t-point">
|
|
<div class="t-bubble">+</div>
|
|
<div class="t-info">
|
|
<div class="t-phase">扩展</div>
|
|
<div class="t-desc">规模化扩张与长期优化</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 幻灯片 9：团队网格 -->
|
|
<div class="slide slide-9">
|
|
<div class="slide-title">领导层</div>
|
|
<div class="slide-subtitle">推动我们愿景向前迈进的人</div>
|
|
<div class="team-grid">
|
|
<div class="team-member">
|
|
<div class="member-avatar">JD</div>
|
|
<div class="member-name">Jordan Davis</div>
|
|
<div class="member-role">首席执行官</div>
|
|
</div>
|
|
<div class="team-member">
|
|
<div class="member-avatar">MK</div>
|
|
<div class="member-name">Morgan Kim</div>
|
|
<div class="member-role">产品负责人</div>
|
|
</div>
|
|
<div class="team-member">
|
|
<div class="member-avatar">SR</div>
|
|
<div class="member-name">Sam Rivera</div>
|
|
<div class="member-role">创意总监</div>
|
|
</div>
|
|
<div class="team-member">
|
|
<div class="member-avatar">TW</div>
|
|
<div class="member-name">Taylor Wong</div>
|
|
<div class="member-role">运营主管</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 幻灯片 10：结束 -->
|
|
<div class="slide slide-10">
|
|
<div class="left-panel">
|
|
<div class="closing-title">感谢<br>您</div>
|
|
<div class="closing-subtitle">让我们携手共创非凡。联系我们，开启对话。</div>
|
|
<svg class="zigzag-deco" viewBox="0 0 400 60" preserveAspectRatio="none">
|
|
<path d="M0,30 L40,10 L80,30 L120,10 L160,30 L200,10 L240,30 L280,10 L320,30 L360,10 L400,30 L400,60 L0,60 Z" fill="black"/>
|
|
</svg>
|
|
</div>
|
|
<div class="right-panel">
|
|
<div class="contact-block">
|
|
<div class="contact-label">邮箱</div>
|
|
<div class="contact-value">HELLO@VENTURE.IO</div>
|
|
</div>
|
|
<div class="contact-block">
|
|
<div class="contact-label">电话</div>
|
|
<div class="contact-value">+1 (555) 014-2298</div>
|
|
</div>
|
|
<div class="contact-block">
|
|
<div class="contact-label">办公地址</div>
|
|
<div class="contact-value">西雅图，华盛顿州</div>
|
|
</div>
|
|
<div class="social-row">
|
|
<div class="social-icon">LI</div>
|
|
<div class="social-icon">TW</div>
|
|
<div class="social-icon">IG</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 导航 -->
|
|
<div class="nav-dots" id="navDots"></div>
|
|
<div class="slide-counter" id="slideCounter">01 / 10</div>
|
|
<div class="nav-arrows" id="navArrows">
|
|
<div class="nav-arrow" id="prevArrow">←</div>
|
|
<div class="nav-arrow" id="nextArrow">→</div>
|
|
</div>
|
|
|
|
<script>
|
|
const slides = document.querySelectorAll('.slide');
|
|
const totalSlides = slides.length;
|
|
let currentSlide = 0;
|
|
|
|
const navDotsContainer = document.getElementById('navDots');
|
|
const slideCounter = document.getElementById('slideCounter');
|
|
const prevArrow = document.getElementById('prevArrow');
|
|
const nextArrow = document.getElementById('nextArrow');
|
|
const navArrows = document.getElementById('navArrows');
|
|
|
|
// Create dots
|
|
slides.forEach((_, index) => {
|
|
const dot = document.createElement('div');
|
|
dot.className = 'nav-dot' + (index === 0 ? ' active' : '');
|
|
dot.addEventListener('click', () => goToSlide(index));
|
|
navDotsContainer.appendChild(dot);
|
|
});
|
|
|
|
const dots = document.querySelectorAll('.nav-dot');
|
|
|
|
function updateNav() {
|
|
slides.forEach((slide, index) => {
|
|
slide.classList.toggle('active', index === currentSlide);
|
|
});
|
|
dots.forEach((dot, index) => {
|
|
dot.classList.toggle('active', index === currentSlide);
|
|
});
|
|
slideCounter.textContent = String(currentSlide + 1).padStart(2, '0') + ' / ' + String(totalSlides).padStart(2, '0');
|
|
|
|
// Check if current slide has light background for dark nav elements
|
|
const currentSlideEl = slides[currentSlide];
|
|
const isLight = currentSlideEl.classList.contains('slide-2') ||
|
|
currentSlideEl.classList.contains('slide-4') ||
|
|
currentSlideEl.classList.contains('slide-6') ||
|
|
currentSlideEl.classList.contains('slide-8');
|
|
|
|
dots.forEach(d => d.classList.toggle('dark', isLight));
|
|
slideCounter.classList.toggle('dark', isLight);
|
|
prevArrow.classList.toggle('dark', isLight);
|
|
nextArrow.classList.toggle('dark', isLight);
|
|
}
|
|
|
|
function goToSlide(index) {
|
|
if (index >= 0 && index < totalSlides) {
|
|
currentSlide = index;
|
|
updateNav();
|
|
}
|
|
}
|
|
|
|
function nextSlide() {
|
|
goToSlide((currentSlide + 1) % totalSlides);
|
|
}
|
|
|
|
function prevSlide() {
|
|
goToSlide((currentSlide - 1 + totalSlides) % totalSlides);
|
|
}
|
|
|
|
prevArrow.addEventListener('click', prevSlide);
|
|
nextArrow.addEventListener('click', nextSlide);
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'ArrowRight' || e.key === ' ') {
|
|
e.preventDefault();
|
|
nextSlide();
|
|
} else if (e.key === 'ArrowLeft') {
|
|
e.preventDefault();
|
|
prevSlide();
|
|
}
|
|
});
|
|
|
|
// Chart.js initialization for Slide 4
|
|
function initChart() {
|
|
const ctx = document.getElementById('growthChart');
|
|
if (!ctx) return;
|
|
|
|
new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
|
|
datasets: [{
|
|
label: '营收（千）',
|
|
data: [45, 62, 55, 78, 95, 112],
|
|
backgroundColor: '#E85D5D',
|
|
borderColor: '#1A1A1A',
|
|
borderWidth: 2,
|
|
borderRadius: 0,
|
|
borderSkipped: false,
|
|
}, {
|
|
label: '目标（千）',
|
|
data: [50, 58, 65, 72, 85, 100],
|
|
backgroundColor: '#1A1A1A',
|
|
borderColor: '#1A1A1A',
|
|
borderWidth: 2,
|
|
borderRadius: 0,
|
|
borderSkipped: false,
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'top',
|
|
labels: {
|
|
font: { family: 'Inter', size: 12 },
|
|
color: '#6B6B6B',
|
|
usePointStyle: true,
|
|
pointStyle: 'rect',
|
|
padding: 20
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
grid: { display: false },
|
|
ticks: {
|
|
font: { family: 'Inter', size: 12 },
|
|
color: '#6B6B6B'
|
|
}
|
|
},
|
|
y: {
|
|
border: { display: false },
|
|
grid: {
|
|
color: 'rgba(26,26,26,0.08)',
|
|
drawBorder: false
|
|
},
|
|
ticks: {
|
|
font: { family: 'Inter', size: 11 },
|
|
color: '#B0B0B0',
|
|
callback: function(value) { return '$' + value + 'K'; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Initialize chart after a short delay to ensure canvas is visible
|
|
setTimeout(initChart, 300);
|
|
|
|
// Initial nav update
|
|
updateNav();
|
|
</script>
|
|
</body>
|
|
</html>
|