You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
369 lines
18 KiB
HTML
369 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Lumi — People OS</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;600;700&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css"
|
|
/>
|
|
<link rel="stylesheet" href="people.css" />
|
|
</head>
|
|
<body>
|
|
<!-- 아이콘 스프라이트 -->
|
|
<svg width="0" height="0" style="position: absolute" aria-hidden="true">
|
|
<defs>
|
|
<symbol viewBox="0 0 24 24" id="i-gear" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="3" />
|
|
<path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.9.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z" />
|
|
</symbol>
|
|
<symbol viewBox="0 0 24 24" id="i-bell" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9" />
|
|
<path d="M13.7 21a2 2 0 0 1-3.4 0" />
|
|
</symbol>
|
|
<symbol viewBox="0 0 24 24" id="i-user" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
|
|
<circle cx="12" cy="7" r="4" />
|
|
</symbol>
|
|
<symbol viewBox="0 0 24 24" id="i-users" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
|
<circle cx="9" cy="7" r="4" />
|
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13A4 4 0 0 1 16 11" />
|
|
</symbol>
|
|
<symbol viewBox="0 0 24 24" id="i-userplus" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
|
|
<circle cx="9" cy="7" r="4" />
|
|
<path d="M19 8v6M22 11h-6" />
|
|
</symbol>
|
|
<symbol viewBox="0 0 24 24" id="i-projects" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="3" y="4" width="18" height="13" rx="2" />
|
|
<path d="M2 20h20" />
|
|
</symbol>
|
|
<symbol viewBox="0 0 24 24" id="i-arrow" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M7 17 17 7M9 7h8v8" />
|
|
</symbol>
|
|
<symbol viewBox="0 0 24 24" id="i-play" fill="currentColor"><path d="M8 5v14l11-7z" /></symbol>
|
|
<symbol viewBox="0 0 24 24" id="i-pause" fill="currentColor"><path d="M7 5h3v14H7zM14 5h3v14h-3z" /></symbol>
|
|
<symbol viewBox="0 0 24 24" id="i-clock" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" />
|
|
</symbol>
|
|
<symbol viewBox="0 0 24 24" id="i-chev" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6" /></symbol>
|
|
<symbol viewBox="0 0 24 24" id="i-monitor" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="2" y="3" width="20" height="14" rx="2" /><path d="M8 21h8M12 17v4" />
|
|
</symbol>
|
|
<symbol viewBox="0 0 24 24" id="i-dots" fill="currentColor"><circle cx="12" cy="5" r="1.6" /><circle cx="12" cy="12" r="1.6" /><circle cx="12" cy="19" r="1.6" /></symbol>
|
|
<symbol viewBox="0 0 24 24" id="i-bolt" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 4 14h7l-1 8 9-12h-7z" /></symbol>
|
|
<symbol viewBox="0 0 24 24" id="i-msg" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.5 8.5 0 0 1-12.5 7.5L3 21l2-5.5A8.5 8.5 0 1 1 21 11.5Z" /></symbol>
|
|
<symbol viewBox="0 0 24 24" id="i-edit" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z" /></symbol>
|
|
<symbol viewBox="0 0 24 24" id="i-link" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1.5 1.5M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1.5-1.5" /></symbol>
|
|
<symbol viewBox="0 0 24 24" id="i-check" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 5 5L20 6" /></symbol>
|
|
</defs>
|
|
</svg>
|
|
|
|
<main class="frame">
|
|
<!-- 상단바 -->
|
|
<header class="topbar">
|
|
<div class="brand"><span class="spark"></span>Lumi</div>
|
|
<nav class="nav">
|
|
<a href="#" class="active">Dashboard</a>
|
|
<a href="#">People</a>
|
|
<a href="#">Hiring</a>
|
|
<a href="#">Devices</a>
|
|
<a href="#">Apps</a>
|
|
<a href="#">Salary</a>
|
|
<a href="#">Calendar</a>
|
|
<a href="#">Reviews</a>
|
|
</nav>
|
|
<div class="top-actions">
|
|
<button class="set-btn"><svg class="ic"><use href="#i-gear" /></svg><span>Setting</span></button>
|
|
<button class="icon-circ dot" aria-label="Notifications"><svg class="ic"><use href="#i-bell" /></svg></button>
|
|
<button class="icon-circ avatar" aria-label="Profile"><svg class="ic"><use href="#i-user" /></svg></button>
|
|
</div>
|
|
</header>
|
|
|
|
<h1 class="hello">Welcome back, <b>Jiwoo</b></h1>
|
|
|
|
<!-- 통계 스트립 -->
|
|
<section class="stats">
|
|
<div class="seg-wrap">
|
|
<div class="seg-labels">
|
|
<span style="flex: 15">Interviews</span>
|
|
<span style="flex: 15">Hired</span>
|
|
<span style="flex: 60">Project time</span>
|
|
<span style="flex: 10">Output</span>
|
|
</div>
|
|
<div class="seg-bar">
|
|
<div class="seg dark" style="flex: 15">15%</div>
|
|
<div class="seg yellow" style="flex: 15">15%</div>
|
|
<div class="seg hatch" style="flex: 60">60%</div>
|
|
<div class="seg ghost" style="flex: 10">10%</div>
|
|
</div>
|
|
</div>
|
|
<div class="kpis">
|
|
<div class="kpi">
|
|
<div class="kpi-row">
|
|
<span class="kpi-ic"><svg class="ic"><use href="#i-users" /></svg></span>
|
|
<span class="kpi-num">78</span>
|
|
</div>
|
|
<span class="kpi-label">Employee</span>
|
|
</div>
|
|
<div class="kpi">
|
|
<div class="kpi-row">
|
|
<span class="kpi-ic"><svg class="ic"><use href="#i-userplus" /></svg></span>
|
|
<span class="kpi-num">56</span>
|
|
</div>
|
|
<span class="kpi-label">Hirings</span>
|
|
</div>
|
|
<div class="kpi">
|
|
<div class="kpi-row">
|
|
<span class="kpi-ic"><svg class="ic"><use href="#i-projects" /></svg></span>
|
|
<span class="kpi-num">203</span>
|
|
</div>
|
|
<span class="kpi-label">Projects</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 메인 그리드 -->
|
|
<section class="grid">
|
|
<!-- 프로필 -->
|
|
<div class="profile">
|
|
<image-slot id="profile-photo" shape="rect" placeholder="Drop a portrait"></image-slot>
|
|
<div class="profile-info">
|
|
<div>
|
|
<b>Lora Piterson</b>
|
|
<span>UX/UI Designer</span>
|
|
</div>
|
|
<div class="salary">$1,200</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 리스트 / 아코디언 -->
|
|
<div class="list-card card">
|
|
<div class="acc">
|
|
<button class="acc-head">Pension contributions <svg class="ic chev"><use href="#i-chev" /></svg></button>
|
|
</div>
|
|
<div class="acc open">
|
|
<button class="acc-head">Devices <svg class="ic chev"><use href="#i-chev" /></svg></button>
|
|
<div class="acc-body">
|
|
<div class="device">
|
|
<div class="thumb"><svg class="ic"><use href="#i-monitor" /></svg></div>
|
|
<div class="device-main">
|
|
<b>MacBook Air</b>
|
|
<span>Version M1</span>
|
|
</div>
|
|
<button class="more"><svg class="ic" style="width: 18px; height: 18px"><use href="#i-dots" /></svg></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="acc">
|
|
<button class="acc-head">Compensation Summary <svg class="ic chev"><use href="#i-chev" /></svg></button>
|
|
</div>
|
|
<div class="acc">
|
|
<button class="acc-head">Employee Benefits <svg class="ic chev"><use href="#i-chev" /></svg></button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 진행 -->
|
|
<div class="progress card">
|
|
<div class="card-top">
|
|
<div class="card-title">Progress</div>
|
|
<button class="expand"><svg class="ic"><use href="#i-arrow" /></svg></button>
|
|
</div>
|
|
<div class="work-h">
|
|
<b>6.1 h</b>
|
|
<span>Work Time<br />this week</span>
|
|
</div>
|
|
<div class="chart">
|
|
<div class="col ghost nodot"><div class="bar" style="height: 44px"></div><div class="dot"></div><div class="day">S</div></div>
|
|
<div class="col"><div class="bar" style="height: 92px"></div><div class="dot"></div><div class="day">M</div></div>
|
|
<div class="col"><div class="bar" style="height: 138px"></div><div class="dot"></div><div class="day">T</div></div>
|
|
<div class="col"><div class="bar" style="height: 70px"></div><div class="dot"></div><div class="day">W</div></div>
|
|
<div class="col"><div class="bar" style="height: 110px"></div><div class="dot"></div><div class="day">T</div></div>
|
|
<div class="col peak">
|
|
<div class="tip">5h 23m</div>
|
|
<div class="bar" style="height: 126px"></div><div class="dot"></div><div class="day">F</div>
|
|
</div>
|
|
<div class="col ghost nodot"><div class="bar" style="height: 52px"></div><div class="dot"></div><div class="day">S</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 타임 트래커 -->
|
|
<div class="tracker card">
|
|
<div class="card-top">
|
|
<div class="card-title">Time tracker</div>
|
|
<button class="expand"><svg class="ic"><use href="#i-arrow" /></svg></button>
|
|
</div>
|
|
<div class="dial-wrap">
|
|
<div class="dial" style="--p: 70">
|
|
<div class="time"><b>02:35</b><span>Work Time</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="tracker-ctrl">
|
|
<button class="tc" id="playBtn" aria-label="Play"><svg class="ic"><use href="#i-play" /></svg></button>
|
|
<button class="tc" aria-label="Pause"><svg class="ic"><use href="#i-pause" /></svg></button>
|
|
<button class="tc dark" aria-label="Set time"><svg class="ic"><use href="#i-clock" /></svg></button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 우측 컬럼: 온보딩 + 태스크 -->
|
|
<div class="rightcol">
|
|
<!-- 온보딩 -->
|
|
<div class="onboard card">
|
|
<div class="onb-top">
|
|
<div class="card-title">Onboarding</div>
|
|
<b>18%</b>
|
|
</div>
|
|
<div class="onb-ticks">
|
|
<span style="flex: 42">30%</span>
|
|
<span style="flex: 34">25%</span>
|
|
<span style="flex: 24">0%</span>
|
|
</div>
|
|
<div class="onb-segs">
|
|
<div class="s y" style="flex: 42">Task</div>
|
|
<div class="s d" style="flex: 34"></div>
|
|
<div class="s g" style="flex: 24"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 온보딩 태스크 (다크) -->
|
|
<div class="task">
|
|
<div class="peek"></div>
|
|
<div class="peek2"></div>
|
|
<div class="panel">
|
|
<div class="panel-top">
|
|
<span class="t">Onboarding Task</span>
|
|
<span class="frac">2/8</span>
|
|
</div>
|
|
<div class="t-row done">
|
|
<div class="t-ic"><svg class="ic"><use href="#i-monitor" /></svg></div>
|
|
<div class="t-main"><b>Interview</b><span>Sep 13, 08:30</span></div>
|
|
<div class="t-check on"><svg class="ic"><use href="#i-check" /></svg></div>
|
|
</div>
|
|
<div class="t-row done">
|
|
<div class="t-ic"><svg class="ic"><use href="#i-bolt" /></svg></div>
|
|
<div class="t-main"><b>Team Meeting</b><span>Sep 13, 10:30</span></div>
|
|
<div class="t-check on"><svg class="ic"><use href="#i-check" /></svg></div>
|
|
</div>
|
|
<div class="t-row">
|
|
<div class="t-ic"><svg class="ic"><use href="#i-msg" /></svg></div>
|
|
<div class="t-main"><b>Project Update</b><span>Sep 13, 13:00</span></div>
|
|
<div class="t-check"><svg class="ic"><use href="#i-check" /></svg></div>
|
|
</div>
|
|
<div class="t-row">
|
|
<div class="t-ic"><svg class="ic"><use href="#i-edit" /></svg></div>
|
|
<div class="t-main"><b>Discuss Q3 Goals</b><span>Sep 13, 14:45</span></div>
|
|
<div class="t-check"><svg class="ic"><use href="#i-check" /></svg></div>
|
|
</div>
|
|
<div class="t-row">
|
|
<div class="t-ic"><svg class="ic"><use href="#i-link" /></svg></div>
|
|
<div class="t-main"><b>HR Policy Review</b><span>Sep 13, 16:30</span></div>
|
|
<div class="t-check"><svg class="ic"><use href="#i-check" /></svg></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /우측 컬럼 -->
|
|
|
|
<!-- 캘린더 -->
|
|
<div class="calendar card">
|
|
<div class="cal-top">
|
|
<span class="mo">August</span>
|
|
<span class="cur">September 2024</span>
|
|
<span class="mo">October</span>
|
|
</div>
|
|
<div class="cal-grid">
|
|
<div class="cal-days">
|
|
<div></div>
|
|
<div class="dh"><small>Mon</small><b>22</b></div>
|
|
<div class="dh"><small>Tue</small><b>23</b></div>
|
|
<div class="dh"><small>Wed</small><b>24</b></div>
|
|
<div class="dh"><small>Thu</small><b>25</b></div>
|
|
<div class="dh"><small>Fri</small><b>26</b></div>
|
|
<div class="dh"><small>Sat</small><b>27</b></div>
|
|
</div>
|
|
<div class="cal-body">
|
|
<div class="tlabel">8:00 am</div>
|
|
<div class="gcell"></div><div class="gcell"></div><div class="gcell"></div>
|
|
<div class="gcell"></div><div class="gcell"></div><div class="gcell"></div>
|
|
<div class="tlabel">9:00 am</div>
|
|
<div class="gcell"></div><div class="gcell"></div><div class="gcell"></div>
|
|
<div class="gcell"></div><div class="gcell"></div><div class="gcell"></div>
|
|
<div class="tlabel">10:00 am</div>
|
|
<div class="gcell"></div><div class="gcell"></div><div class="gcell"></div>
|
|
<div class="gcell"></div><div class="gcell"></div><div class="gcell"></div>
|
|
<div class="tlabel">11:00 am</div>
|
|
<div class="gcell"></div><div class="gcell"></div><div class="gcell"></div>
|
|
<div class="gcell"></div><div class="gcell"></div><div class="gcell"></div>
|
|
|
|
<div class="evt dark" style="left: 20%; top: 8px; width: 33%">
|
|
<div class="etext"><b>Weekly Team Sync</b><span>Discuss progress on projects</span></div>
|
|
<div class="faces">
|
|
<span class="f" style="background: #e08a5b">A</span>
|
|
<span class="f" style="background: #6b7bd6">M</span>
|
|
<span class="f" style="background: #d9a23c">K</span>
|
|
</div>
|
|
</div>
|
|
<div class="evt light" style="left: 45%; top: 100px; width: 33%">
|
|
<div class="etext"><b>Onboarding Session</b><span>Introduction for new hires</span></div>
|
|
<div class="faces">
|
|
<span class="f" style="background: #c2607f">L</span>
|
|
<span class="f" style="background: #4f9d8a">J</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="image-slot.js"></script>
|
|
<script>
|
|
// 아코디언 토글
|
|
document.querySelectorAll(".acc-head").forEach((h) => {
|
|
h.addEventListener("click", () => {
|
|
const acc = h.closest(".acc");
|
|
acc.classList.toggle("open");
|
|
});
|
|
});
|
|
// 네비 활성화
|
|
document.querySelectorAll(".nav a").forEach((a) => {
|
|
a.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
document.querySelector(".nav a.active")?.classList.remove("active");
|
|
a.classList.add("active");
|
|
});
|
|
});
|
|
// 타임 트래커 — 데모 카운트업
|
|
(function () {
|
|
const dial = document.querySelector(".dial");
|
|
const label = dial.querySelector(".time b");
|
|
const btn = document.getElementById("playBtn");
|
|
let running = false,
|
|
sec = 2 * 60 + 35,
|
|
timer = null;
|
|
const fmt = (s) =>
|
|
String(Math.floor(s / 60)).padStart(2, "0") + ":" + String(s % 60).padStart(2, "0");
|
|
btn.addEventListener("click", () => {
|
|
running = !running;
|
|
btn.querySelector("use").setAttribute("href", running ? "#i-pause" : "#i-play");
|
|
if (running) {
|
|
timer = setInterval(() => {
|
|
sec++;
|
|
label.textContent = fmt(sec);
|
|
dial.style.setProperty("--p", 30 + ((sec % 100) / 100) * 60);
|
|
}, 1000);
|
|
} else clearInterval(timer);
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|