feat: visual polish — hero illustration, decorative SVGs, gradient UI
- New SVG hero (recruitment funnel + bar chart + people icons) above the dashboard. - New empty-state illustration shown while the file is loading. - Upgraded brand logo with blue→purple gradient and drop shadow. - Subtle dotted background pattern (assets/pattern.svg, fixed attachment) for depth. - Header is now sticky with a translucent gradient + backdrop blur. - Hero block uses a soft blue-to-purple gradient and gradient text for the title. - KPI cards get a gradient accent bar, gradient-text values, and a lift-on-hover transition. - Section blocks get rounded corners (14px), soft shadow, and a hover glow. - Responsive hero on screens below 900px. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Askarova A
parent
3c937e091c
commit
e57e210d31
23
assets/empty.svg
Normal file
23
assets/empty.svg
Normal file
@ -0,0 +1,23 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200" width="300" height="200">
|
||||
<defs>
|
||||
<linearGradient id="doc" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#60a5fa"/>
|
||||
<stop offset="100%" stop-color="#3b82f6"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<ellipse cx="150" cy="180" rx="100" ry="8" fill="#000" opacity="0.06"/>
|
||||
<g transform="translate(100 30)">
|
||||
<rect x="0" y="0" width="100" height="130" rx="6" fill="white" stroke="#cbd5e1" stroke-width="1.5"/>
|
||||
<rect x="0" y="0" width="100" height="22" rx="6" fill="url(#doc)"/>
|
||||
<rect x="0" y="16" width="100" height="6" fill="url(#doc)"/>
|
||||
<text x="10" y="15" fill="white" font-family="-apple-system, sans-serif" font-size="10" font-weight="700">.xlsx</text>
|
||||
<line x1="12" y1="40" x2="88" y2="40" stroke="#94a3b8" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="12" y1="55" x2="70" y2="55" stroke="#cbd5e1" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="12" y1="70" x2="88" y2="70" stroke="#cbd5e1" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="12" y1="85" x2="60" y2="85" stroke="#cbd5e1" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="12" y1="100" x2="88" y2="100" stroke="#cbd5e1" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="12" y1="115" x2="50" y2="115" stroke="#cbd5e1" stroke-width="2" stroke-linecap="round"/>
|
||||
</g>
|
||||
<circle cx="225" cy="55" r="20" fill="#34d399"/>
|
||||
<path d="M215 55 L222 62 L235 49" stroke="white" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
77
assets/hero.svg
Normal file
77
assets/hero.svg
Normal file
@ -0,0 +1,77 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#1e3a8a" stop-opacity="0.15"/>
|
||||
<stop offset="100%" stop-color="#60a5fa" stop-opacity="0.05"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="funnel1" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#60a5fa"/>
|
||||
<stop offset="100%" stop-color="#3b82f6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="funnel2" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#a78bfa"/>
|
||||
<stop offset="100%" stop-color="#8b5cf6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="funnel3" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#34d399"/>
|
||||
<stop offset="100%" stop-color="#10b981"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="funnel4" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#fbbf24"/>
|
||||
<stop offset="100%" stop-color="#f59e0b"/>
|
||||
</linearGradient>
|
||||
<filter id="soft">
|
||||
<feGaussianBlur stdDeviation="3"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<rect width="800" height="400" fill="url(#bg)" rx="16"/>
|
||||
|
||||
<!-- decorative circles -->
|
||||
<circle cx="700" cy="60" r="80" fill="#60a5fa" opacity="0.08"/>
|
||||
<circle cx="80" cy="340" r="100" fill="#a78bfa" opacity="0.08"/>
|
||||
<circle cx="650" cy="350" r="40" fill="#34d399" opacity="0.1"/>
|
||||
|
||||
<!-- recruitment funnel -->
|
||||
<g transform="translate(220 50)">
|
||||
<!-- stage 1: attract -->
|
||||
<path d="M0 0 L360 0 L320 60 L40 60 Z" fill="url(#funnel1)" opacity="0.95"/>
|
||||
<text x="180" y="38" text-anchor="middle" fill="white" font-family="-apple-system, sans-serif" font-size="18" font-weight="700">Привлечение • 100%</text>
|
||||
|
||||
<!-- stage 2: screen -->
|
||||
<path d="M40 70 L320 70 L286 130 L74 130 Z" fill="url(#funnel2)" opacity="0.95"/>
|
||||
<text x="180" y="108" text-anchor="middle" fill="white" font-family="-apple-system, sans-serif" font-size="16" font-weight="700">Скрининг • 50%</text>
|
||||
|
||||
<!-- stage 3: interview -->
|
||||
<path d="M74 140 L286 140 L252 200 L108 200 Z" fill="url(#funnel3)" opacity="0.95"/>
|
||||
<text x="180" y="177" text-anchor="middle" fill="white" font-family="-apple-system, sans-serif" font-size="15" font-weight="700">Интервью • 20%</text>
|
||||
|
||||
<!-- stage 4: offer -->
|
||||
<path d="M108 210 L252 210 L218 270 L142 270 Z" fill="url(#funnel4)" opacity="0.95"/>
|
||||
<text x="180" y="245" text-anchor="middle" fill="white" font-family="-apple-system, sans-serif" font-size="14" font-weight="700">Оффер • 5%</text>
|
||||
|
||||
<!-- hire -->
|
||||
<circle cx="180" cy="305" r="22" fill="#ef4444"/>
|
||||
<text x="180" y="312" text-anchor="middle" fill="white" font-family="-apple-system, sans-serif" font-size="16" font-weight="800">✓</text>
|
||||
</g>
|
||||
|
||||
<!-- bar chart icon left -->
|
||||
<g transform="translate(60 130)" opacity="0.85">
|
||||
<rect x="0" y="80" width="20" height="40" rx="3" fill="#60a5fa"/>
|
||||
<rect x="28" y="50" width="20" height="70" rx="3" fill="#a78bfa"/>
|
||||
<rect x="56" y="20" width="20" height="100" rx="3" fill="#34d399"/>
|
||||
<rect x="84" y="60" width="20" height="60" rx="3" fill="#fbbf24"/>
|
||||
<rect x="112" y="90" width="20" height="30" rx="3" fill="#f87171"/>
|
||||
<line x1="-4" y1="125" x2="138" y2="125" stroke="#94a3b8" stroke-width="1.5"/>
|
||||
</g>
|
||||
|
||||
<!-- people icons right -->
|
||||
<g transform="translate(620 150)" opacity="0.85">
|
||||
<circle cx="20" cy="20" r="14" fill="#60a5fa"/>
|
||||
<path d="M0 56 Q20 36 40 56 L40 64 L0 64 Z" fill="#60a5fa"/>
|
||||
<circle cx="60" cy="20" r="14" fill="#a78bfa"/>
|
||||
<path d="M40 56 Q60 36 80 56 L80 64 L40 64 Z" fill="#a78bfa"/>
|
||||
<circle cx="100" cy="20" r="14" fill="#34d399"/>
|
||||
<path d="M80 56 Q100 36 120 56 L120 64 L80 64 Z" fill="#34d399"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
@ -1,12 +1,16 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 36" width="160" height="36">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 40" width="180" height="40">
|
||||
<defs>
|
||||
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
|
||||
<linearGradient id="lg" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#60a5fa"/>
|
||||
<stop offset="100%" stop-color="#2563eb"/>
|
||||
<stop offset="100%" stop-color="#8b5cf6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="lg2" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0%" stop-color="#60a5fa"/>
|
||||
<stop offset="100%" stop-color="#34d399"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="18" cy="18" r="14" fill="url(#g)"/>
|
||||
<path d="M11 18 L16 23 L25 13" stroke="white" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<text x="40" y="16" font-family="-apple-system, system-ui, sans-serif" font-size="13" font-weight="700" fill="currentColor">telecom</text>
|
||||
<text x="40" y="30" font-family="-apple-system, system-ui, sans-serif" font-size="11" font-weight="500" fill="#60a5fa">.quest</text>
|
||||
<circle cx="20" cy="20" r="16" fill="url(#lg)"/>
|
||||
<path d="M12 20 L18 26 L29 13" stroke="white" stroke-width="2.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<text x="44" y="18" font-family="-apple-system, system-ui, sans-serif" font-size="14" font-weight="800" fill="currentColor">telecom</text>
|
||||
<text x="44" y="33" font-family="-apple-system, system-ui, sans-serif" font-size="12" font-weight="600" fill="url(#lg2)">.quest</text>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 740 B After Width: | Height: | Size: 920 B |
10
assets/pattern.svg
Normal file
10
assets/pattern.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60">
|
||||
<defs>
|
||||
<pattern id="p" width="60" height="60" patternUnits="userSpaceOnUse">
|
||||
<circle cx="10" cy="10" r="1.5" fill="#60a5fa" opacity="0.18"/>
|
||||
<circle cx="40" cy="30" r="1" fill="#a78bfa" opacity="0.18"/>
|
||||
<circle cx="20" cy="50" r="1.2" fill="#34d399" opacity="0.18"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="100%" height="100%" fill="url(#p)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 459 B |
15
index.html
15
index.html
@ -24,6 +24,14 @@
|
||||
<input type="search" id="search-input" placeholder="🔍 Поиск функции..." hidden>
|
||||
</section>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-text">
|
||||
<h2>Аналитика рекрутинга</h2>
|
||||
<p>Время функций → KPI, нагрузка, узкие места, симулятор «что если». Без сервера: данные парсятся прямо в браузере.</p>
|
||||
</div>
|
||||
<img src="./assets/hero.svg" alt="" class="hero-img" loading="lazy">
|
||||
</section>
|
||||
|
||||
<main id="dashboard" hidden>
|
||||
<section class="block">
|
||||
<h2>Базовые показатели</h2>
|
||||
@ -144,8 +152,11 @@
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<p id="placeholder">Загрузка данных… Если дашборд не появился — нажмите «📁 Загрузить .xlsx».</p>
|
||||
<div id="placeholder">
|
||||
<img src="./assets/empty.svg" alt="" loading="lazy">
|
||||
<p>Загрузка данных… Если дашборд не появился — нажмите «📁 Загрузить .xlsx».</p>
|
||||
</div>
|
||||
|
||||
<script src="./app.js?v=7"></script>
|
||||
<script src="./app.js?v=8"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
89
styles.css
89
styles.css
@ -18,12 +18,45 @@
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
|
||||
body {
|
||||
margin: 0; background: var(--bg); color: var(--fg);
|
||||
font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
background-image: url("./assets/pattern.svg");
|
||||
background-attachment: fixed;
|
||||
}
|
||||
[hidden] { display: none !important; }
|
||||
|
||||
header { display: flex; gap: 1rem; align-items: center; padding: 1rem 2rem; border-bottom: 1px solid var(--border); background: var(--surface); }
|
||||
.logo { height: 36px; }
|
||||
header h1 { flex: 1; font-size: 1.15rem; margin: 0; }
|
||||
header {
|
||||
display: flex; gap: 1rem; align-items: center;
|
||||
padding: 1rem 2rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: linear-gradient(135deg, var(--surface) 0%, rgba(96,165,250,0.08) 100%);
|
||||
backdrop-filter: blur(12px);
|
||||
position: sticky; top: 0; z-index: 10;
|
||||
}
|
||||
.logo { height: 40px; filter: drop-shadow(0 2px 6px rgba(96,165,250,0.35)); }
|
||||
header h1 {
|
||||
flex: 1; font-size: 1.2rem; margin: 0; font-weight: 700;
|
||||
background: linear-gradient(90deg, var(--fg), var(--accent));
|
||||
-webkit-background-clip: text; background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: grid; grid-template-columns: 1.1fr 1fr; align-items: center;
|
||||
gap: 2rem; padding: 1.5rem 2rem;
|
||||
background: linear-gradient(135deg, rgba(96,165,250,0.12) 0%, rgba(167,139,250,0.10) 100%);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.hero-text h2 {
|
||||
margin: 0 0 .6rem;
|
||||
font-size: 1.7rem; font-weight: 800; line-height: 1.1;
|
||||
background: linear-gradient(90deg, var(--accent), #a78bfa);
|
||||
-webkit-background-clip: text; background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.hero-text p { margin: 0; color: var(--muted); font-size: 1rem; max-width: 540px; }
|
||||
.hero-img { width: 100%; max-width: 540px; justify-self: end; display: block; }
|
||||
#theme-toggle { background: var(--card); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: .4rem .7rem; font-size: 1.1rem; cursor: pointer; }
|
||||
|
||||
.toolbar { display: flex; gap: 1rem; padding: 1rem 2rem; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
|
||||
@ -33,14 +66,44 @@ select, input[type="search"], input[type="number"] { background: var(--card); co
|
||||
input[type="search"] { flex: 1; min-width: 200px; }
|
||||
|
||||
main { padding: 1.5rem 2rem; display: flex; flex-direction: column; gap: 1.25rem; }
|
||||
.block { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem 1.5rem; }
|
||||
.block h2 { margin: 0 0 1rem; font-size: 1rem; font-weight: 600; }
|
||||
.block {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
padding: 1.3rem 1.6rem;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.04);
|
||||
transition: box-shadow .2s;
|
||||
}
|
||||
.block:hover { box-shadow: 0 4px 18px rgba(96,165,250,0.10); }
|
||||
.block h2 {
|
||||
margin: 0 0 1rem;
|
||||
font-size: 1.05rem; font-weight: 700;
|
||||
display: flex; align-items: center; gap: .4rem;
|
||||
}
|
||||
.charts-row { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
|
||||
|
||||
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .85rem; }
|
||||
.kpi-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: .9rem 1rem; }
|
||||
.kpi-card .value { font-size: 1.6rem; font-weight: 700; color: var(--accent); line-height: 1.15; }
|
||||
.kpi-card .label { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: .3rem; }
|
||||
.kpi-card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 1rem 1.1rem;
|
||||
position: relative; overflow: hidden;
|
||||
transition: transform .15s, box-shadow .15s;
|
||||
}
|
||||
.kpi-card::before {
|
||||
content: '';
|
||||
position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
|
||||
background: linear-gradient(180deg, var(--accent), #a78bfa);
|
||||
}
|
||||
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(96,165,250,0.18); }
|
||||
.kpi-card .value {
|
||||
font-size: 1.7rem; font-weight: 800; line-height: 1.15;
|
||||
background: linear-gradient(90deg, var(--accent), #a78bfa);
|
||||
-webkit-background-clip: text; background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.kpi-card .label { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: .3rem; font-weight: 600; }
|
||||
.kpi-card .sub { font-size: .75rem; color: var(--muted); margin-top: .3rem; }
|
||||
|
||||
.inputs { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
|
||||
@ -82,9 +145,13 @@ td:nth-child(1), td:nth-child(4) { text-align: right; font-variant-numeric: tabu
|
||||
td:nth-child(5) { color: var(--muted); font-size: .8rem; max-width: 200px; }
|
||||
tbody tr:hover { background: var(--card); }
|
||||
|
||||
#placeholder { text-align: center; color: var(--muted); padding: 4rem 2rem; }
|
||||
#placeholder { text-align: center; color: var(--muted); padding: 3rem 2rem; }
|
||||
#placeholder img { max-width: 280px; opacity: .9; margin-bottom: 1rem; }
|
||||
#placeholder p { margin: 0; }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.charts-row { grid-template-columns: 1fr; }
|
||||
header, .toolbar, main { padding-left: 1rem; padding-right: 1rem; }
|
||||
header, .toolbar, main, .hero { padding-left: 1rem; padding-right: 1rem; }
|
||||
.hero { grid-template-columns: 1fr; text-align: center; }
|
||||
.hero-img { max-width: 360px; justify-self: center; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user