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.
397 lines
26 KiB
HTML
397 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>아리(Ari) — 따뜻한 대시보드</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="ari-lumi.css" />
|
|
</head>
|
|
<body>
|
|
<svg width="0" height="0" style="position: absolute" aria-hidden="true">
|
|
<defs>
|
|
<symbol id="i-spark" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2c.4 4.5 3.5 7.6 8 8-4.5.4-7.6 3.5-8 8-.4-4.5-3.5-7.6-8-8 4.5-.4 7.6-3.5 8-8Z" /></symbol>
|
|
<symbol id="i-mic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="2" width="6" height="12" rx="3" /><path d="M5 11a7 7 0 0 0 14 0M12 18v3" /></symbol>
|
|
<symbol id="i-send" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M22 2 11 13M22 2l-7 20-4-9-9-4z" /></symbol>
|
|
<symbol id="i-gear" viewBox="0 0 24 24" 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 id="i-bell" viewBox="0 0 24 24" 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 id="i-cal" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="3" /><path d="M3 9h18M8 2v4M16 2v4" /></symbol>
|
|
<symbol id="i-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 5 5L20 6" /></symbol>
|
|
<symbol id="i-target" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9" /><circle cx="12" cy="12" r="5" /><circle cx="12" cy="12" r="1.4" fill="currentColor" /></symbol>
|
|
<symbol id="i-mail" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="3" /><path d="m3 6 9 7 9-7" /></symbol>
|
|
<symbol id="i-heart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M20.8 5.6a5 5 0 0 0-7.1 0L12 7.3l-1.7-1.7a5 5 0 1 0-7.1 7.1L12 21l8.8-8.3a5 5 0 0 0 0-7.1Z" /></symbol>
|
|
<symbol id="i-wallet" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /><path d="M16 12h.01M3 9h13a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H3" /></symbol>
|
|
<symbol id="i-zap" viewBox="0 0 24 24" 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 id="i-brain" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 3A3 3 0 0 0 7 8a3 3 0 0 0-1 5 3 3 0 0 0 3 4 2.5 2.5 0 0 0 2.5-2.5V5.5A2.5 2.5 0 0 0 9.5 3ZM14.5 3A3 3 0 0 1 17 8a3 3 0 0 1 1 5 3 3 0 0 1-3 4 2.5 2.5 0 0 1-2.5-2.5V5.5A2.5 2.5 0 0 1 14.5 3Z" /></symbol>
|
|
<symbol id="i-video" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="6" width="14" height="12" rx="3" /><path d="m22 8-6 4 6 4z" /></symbol>
|
|
<symbol id="i-file" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><path d="M14 2v6h6M8 13h8M8 17h6" /></symbol>
|
|
<symbol id="i-clock" viewBox="0 0 24 24" 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 id="i-alert" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M10.3 3.3 2 18a2 2 0 0 0 1.7 3h16.6A2 2 0 0 0 22 18L13.7 3.3a2 2 0 0 0-3.4 0Z" /><path d="M12 9v4M12 17h.01" /></symbol>
|
|
<symbol id="i-droplet" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2.7 6.3 9.4a7.5 7.5 0 1 0 11.4 0z" /></symbol>
|
|
<symbol id="i-steps" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12h3l2-6 4 12 2-6h7" /></symbol>
|
|
<symbol id="i-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.8A8.5 8.5 0 1 1 11.2 3a6.6 6.6 0 0 0 9.8 9.8Z" /></symbol>
|
|
<symbol id="i-pin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" /><circle cx="12" cy="10" r="3" /></symbol>
|
|
<symbol id="i-pen" viewBox="0 0 24 24" 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 id="i-bookmark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21 12 16l-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" /></symbol>
|
|
<symbol id="i-cloudsun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 7a4 4 0 0 1 7.5-1.9M5.5 4V2.5M2.5 5.5 1.5 4.5M9.5 5.5l1-1M2.5 9 1.5 10" /><path d="M17.5 19a3.5 3.5 0 0 0 0-7 5 5 0 0 0-9.6-1.3A4 4 0 0 0 8 19z" /></symbol>
|
|
<symbol id="i-down" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M6 13l6 6 6-6" /></symbol>
|
|
<symbol id="i-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7" /><path d="m21 21-4-4" /></symbol>
|
|
<symbol id="i-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7M9 7h8v8" /></symbol>
|
|
<symbol id="i-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14" /></symbol>
|
|
<symbol id="i-repeat" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M17 2l4 4-4 4M3 11V9a4 4 0 0 1 4-4h14M7 22l-4-4 4-4M21 13v2a4 4 0 0 1-4 4H3" /></symbol>
|
|
</defs>
|
|
</svg>
|
|
|
|
<main class="frame">
|
|
<!-- 상단바 -->
|
|
<header class="topbar">
|
|
<div class="brand"><span class="spark"></span>아리</div>
|
|
<nav class="nav">
|
|
<a href="#" class="active">대시보드</a>
|
|
<a href="#">캘린더</a>
|
|
<a href="아리 대시보드.html">작업<span class="badge">4</span></a>
|
|
<a href="#">리서치</a>
|
|
<a href="#">미팅</a>
|
|
<a href="#">건강</a>
|
|
<a href="#">금융</a>
|
|
<a href="#">자동화</a>
|
|
</nav>
|
|
<div class="top-actions">
|
|
<button class="set-btn"><svg class="ic"><use href="#i-gear" /></svg><span>설정</span></button>
|
|
<button class="icon-circ dot" aria-label="알림"><svg class="ic"><use href="#i-bell" /></svg></button>
|
|
<button class="icon-circ avatar" aria-label="프로필">지</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 헤더 -->
|
|
<div class="head">
|
|
<div>
|
|
<h1 class="hello">좋은 아침이에요, <b>지우님</b> <span class="sun">☀️</span></h1>
|
|
<p class="hello-sub">오늘 <b>4개 일정</b>과 <b>할 일 4개</b>가 있어요. 무엇을 도와드릴까요?</p>
|
|
</div>
|
|
<div class="kpis">
|
|
<div class="kpi">
|
|
<div class="kpi-row"><span class="kpi-ic"><svg class="ic"><use href="#i-cal" /></svg></span><span class="kpi-num">4</span></div>
|
|
<span class="kpi-label">오늘 일정</span>
|
|
</div>
|
|
<div class="kpi">
|
|
<div class="kpi-row"><span class="kpi-ic"><svg class="ic"><use href="#i-check" /></svg></span><span class="kpi-num">4</span></div>
|
|
<span class="kpi-label">남은 할 일</span>
|
|
</div>
|
|
<div class="kpi">
|
|
<div class="kpi-row"><span class="kpi-ic"><svg class="ic"><use href="#i-mail" /></svg></span><span class="kpi-num">14</span></div>
|
|
<span class="kpi-label">안 읽은 메일</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 커맨드바 -->
|
|
<div class="cmd">
|
|
<svg class="ic spark-ic"><use href="#i-spark" /></svg>
|
|
<input id="cmdInput" placeholder="아리에게 무엇이든 물어보세요…" />
|
|
<button class="mic" aria-label="음성"><svg class="ic"><use href="#i-mic" /></svg></button>
|
|
<button class="send" aria-label="보내기"><svg class="ic"><use href="#i-send" /></svg></button>
|
|
</div>
|
|
<div class="chips">
|
|
<button class="chip"><svg class="ic"><use href="#i-cal" /></svg>내일 오후 일정 비워줘</button>
|
|
<button class="chip"><svg class="ic"><use href="#i-mail" /></svg>오늘 중요한 메일만 요약해줘</button>
|
|
<button class="chip"><svg class="ic"><use href="#i-video" /></svg>14시 미팅 준비시켜줘</button>
|
|
<button class="chip"><svg class="ic"><use href="#i-target" /></svg>이번 주 목표 점검</button>
|
|
</div>
|
|
|
|
<!-- 그리드 -->
|
|
<section class="grid">
|
|
<!-- 아침 브리핑 -->
|
|
<div class="brief card">
|
|
<div class="card-top">
|
|
<div class="card-ic y"><svg class="ic"><use href="#i-spark" /></svg></div>
|
|
<div class="card-tt">
|
|
<div class="card-title">아리의 아침 브리핑</div>
|
|
<div class="card-sub">6월 7일 일요일</div>
|
|
</div>
|
|
<div class="card-act"><button class="ghost-btn"><svg class="ic"><use href="#i-repeat" /></svg>새로고침</button></div>
|
|
</div>
|
|
<div class="brief-stats">
|
|
<div class="brief-stat">
|
|
<div class="bs-ic"><svg class="ic"><use href="#i-cloudsun" /></svg></div>
|
|
<div><b>24°</b><span>맑음 · 한낮 28°</span></div>
|
|
</div>
|
|
<div class="brief-stat">
|
|
<div class="bs-ic"><svg class="ic"><use href="#i-clock" /></svg></div>
|
|
<div><b>23분</b><span>출근 · 4분 빠름</span></div>
|
|
</div>
|
|
<div class="brief-stat">
|
|
<div class="bs-ic"><svg class="ic"><use href="#i-moon" /></svg></div>
|
|
<div><b>7h 12m</b><span>푹 잔 수면</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="ari-note">
|
|
<div class="ava"><svg class="ic"><use href="#i-spark" /></svg></div>
|
|
<p>오늘은 오후 미팅이 핵심이에요. 오전을 비워 <b>분기 리포트</b>에 집중하시면 좋겠어요. 14시 전엔 비가 그칠 예정이라 우산은 안 챙기셔도 돼요.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 오늘 일정 -->
|
|
<div class="sched card">
|
|
<div class="card-top">
|
|
<div class="card-ic"><svg class="ic"><use href="#i-cal" /></svg></div>
|
|
<div class="card-tt">
|
|
<div class="card-title">오늘 일정</div>
|
|
<div class="card-sub">4개 일정</div>
|
|
</div>
|
|
<div class="card-act"><button class="expand"><svg class="ic"><use href="#i-arrow" /></svg></button></div>
|
|
</div>
|
|
<div class="sched-list">
|
|
<div class="sched-row">
|
|
<div class="sched-time">09:30</div><div class="sched-line sl-s"></div>
|
|
<div><div class="sched-title">팀 데일리 스탠드업</div><div class="sched-meta">프로덕트 · 15분</div></div>
|
|
</div>
|
|
<div class="sched-row">
|
|
<div class="sched-time">11:00</div><div class="sched-line sl-d"></div>
|
|
<div><div class="sched-title">디자인 리뷰 — 온보딩 플로우</div><div class="sched-meta">디자인 · 45분</div></div>
|
|
</div>
|
|
<div class="sched-row soon">
|
|
<div class="sched-time">14:00</div><div class="sched-line sl-y"></div>
|
|
<div><div class="sched-title">분기 전략 미팅</div><div class="sched-meta">경영진 · 60분 · 2시간 후</div></div>
|
|
</div>
|
|
<div class="sched-row">
|
|
<div class="sched-time">16:30</div><div class="sched-line sl-t"></div>
|
|
<div><div class="sched-title">1:1 — 민서님</div><div class="sched-meta">팀 · 30분</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="conflict">
|
|
<svg class="ic"><use href="#i-alert" /></svg>
|
|
<span>15:00 ‘치과 예약’이 미팅과 겹쳐요. 16:00로 옮길까요?</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 미팅 준비 (다크 패널) -->
|
|
<div class="meeting">
|
|
<div class="m-top">
|
|
<div class="m-ic"><svg class="ic"><use href="#i-video" /></svg></div>
|
|
<span class="m-label">다음 미팅 준비</span>
|
|
<span class="pill-soon">2시간 후</span>
|
|
</div>
|
|
<div class="m-title">분기 전략 미팅</div>
|
|
<div class="m-when">오늘 14:00 · 60분</div>
|
|
<div class="m-people">대표님 · 재무팀장 · 나 외 3명</div>
|
|
<div class="m-brief-label">사전 브리핑 리포트</div>
|
|
<ul class="m-brief">
|
|
<li><span class="num">1</span>지난 회의 액션아이템 5건 중 4건 완료</li>
|
|
<li><span class="num">2</span>리텐션 KPI 전분기 대비 +6%p 상승</li>
|
|
<li><span class="num">3</span>예산 재배분 안건 — 의사결정 필요</li>
|
|
</ul>
|
|
<button class="m-cta"><svg class="ic"><use href="#i-file" /></svg>전체 리포트 열기</button>
|
|
</div>
|
|
|
|
<!-- 오늘의 할 일 -->
|
|
<div class="tasks card">
|
|
<div class="card-top">
|
|
<div class="card-ic"><svg class="ic"><use href="#i-check" /></svg></div>
|
|
<div class="card-tt">
|
|
<div class="card-title">오늘의 할 일</div>
|
|
<div class="card-sub" id="taskRemain">4개 남음</div>
|
|
</div>
|
|
<div class="card-act"><button class="ghost-btn"><svg class="ic"><use href="#i-plus" /></svg></button></div>
|
|
</div>
|
|
<div id="taskList">
|
|
<div class="task-row" data-done="0">
|
|
<div class="check"><svg class="ic"><use href="#i-check" /></svg></div>
|
|
<div class="task-main"><div class="task-title">분기 리포트 초안 마무리</div><div class="task-meta">경영 <span class="prio">· 우선</span></div></div>
|
|
</div>
|
|
<div class="task-row" data-done="0">
|
|
<div class="check"><svg class="ic"><use href="#i-check" /></svg></div>
|
|
<div class="task-main"><div class="task-title">온보딩 와이어프레임 피드백</div><div class="task-meta">디자인 <span class="prio">· 우선</span></div></div>
|
|
</div>
|
|
<div class="task-row is-done" data-done="1">
|
|
<div class="check done"><svg class="ic"><use href="#i-check" /></svg></div>
|
|
<div class="task-main"><div class="task-title">신규 입사자 환영 메일 회신</div><div class="task-meta">팀</div></div>
|
|
</div>
|
|
<div class="task-row" data-done="0">
|
|
<div class="check"><svg class="ic"><use href="#i-check" /></svg></div>
|
|
<div class="task-main"><div class="task-title">구독 결제 카드 갱신</div><div class="task-meta">개인</div></div>
|
|
</div>
|
|
<div class="task-row" data-done="0">
|
|
<div class="check"><svg class="ic"><use href="#i-check" /></svg></div>
|
|
<div class="task-main"><div class="task-title">독서모임 책 2장 읽기</div><div class="task-meta">성장</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 목표 진행 -->
|
|
<div class="goals card">
|
|
<div class="card-top">
|
|
<div class="card-ic"><svg class="ic"><use href="#i-target" /></svg></div>
|
|
<div class="card-tt">
|
|
<div class="card-title">목표 진행 상황</div>
|
|
<div class="card-sub">3개 진행 중</div>
|
|
</div>
|
|
</div>
|
|
<div class="goal">
|
|
<div class="goal-top"><span class="goal-title">분기 OKR — 사용자 리텐션</span><span class="goal-pct" style="color: var(--dusty)">68%</span></div>
|
|
<div class="bar"><span style="width: 68%; background: var(--dusty)"></span></div>
|
|
<div class="goal-sub">12개 중 8개 달성</div>
|
|
</div>
|
|
<div class="goal">
|
|
<div class="goal-top"><span class="goal-title">주 4회 운동</span><span class="goal-pct" style="color: var(--terra)">75%</span></div>
|
|
<div class="bar"><span style="width: 75%; background: var(--terra)"></span></div>
|
|
<div class="goal-sub">이번 주 3/4회</div>
|
|
</div>
|
|
<div class="goal">
|
|
<div class="goal-top"><span class="goal-title">‘딥 워크’ 책 완독</span><span class="goal-pct" style="color: var(--yellow-deep)">40%</span></div>
|
|
<div class="bar"><span style="width: 40%; background: var(--yellow-deep)"></span></div>
|
|
<div class="goal-sub">320쪽 중 128쪽</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 건강 -->
|
|
<div class="health card">
|
|
<div class="card-top">
|
|
<div class="card-ic"><svg class="ic"><use href="#i-heart" /></svg></div>
|
|
<div class="card-tt">
|
|
<div class="card-title">건강 & 웰니스</div>
|
|
<div class="card-sub">오늘의 활동</div>
|
|
</div>
|
|
</div>
|
|
<div class="rings">
|
|
<div class="ring-wrap">
|
|
<div class="ring" style="--p: 72; --c: var(--terra)"><svg class="ic"><use href="#i-steps" /></svg></div>
|
|
<b>7.2천</b><span>걸음</span>
|
|
</div>
|
|
<div class="ring-wrap">
|
|
<div class="ring" style="--p: 90; --c: var(--dusty)"><svg class="ic"><use href="#i-moon" /></svg></div>
|
|
<b>7.2h</b><span>수면</span>
|
|
</div>
|
|
<div class="ring-wrap">
|
|
<div class="ring" style="--p: 62; --c: var(--yellow-deep)"><svg class="ic"><use href="#i-droplet" /></svg></div>
|
|
<b>5/8잔</b><span>수분</span>
|
|
</div>
|
|
</div>
|
|
<div class="nudge"><svg class="ic"><use href="#i-droplet" /></svg><span>오후 3시예요 — 물 한 잔, 5분 스트레칭 어때요?</span></div>
|
|
</div>
|
|
|
|
<!-- 지출 -->
|
|
<div class="finance card">
|
|
<div class="card-top">
|
|
<div class="card-ic"><svg class="ic"><use href="#i-wallet" /></svg></div>
|
|
<div class="card-tt">
|
|
<div class="card-title">이달의 지출</div>
|
|
<div class="card-sub">지난달 대비 8% 절약</div>
|
|
</div>
|
|
<div class="card-act"><span class="fin-trend"><svg class="ic"><use href="#i-down" /></svg>8%</span></div>
|
|
</div>
|
|
<div class="fin-amt"><b>₩1,280,000</b><span>/ ₩2,000,000</span></div>
|
|
<div class="bar" style="height: 9px"><span style="width: 64%; background: var(--yellow)"></span></div>
|
|
<div class="fin-subs-label">다가오는 결제</div>
|
|
<div class="fin-sub"><b>Spotify</b><span class="date">6월 9일</span><span class="amt">₩10,900</span></div>
|
|
<div class="fin-sub"><b>ChatGPT Plus</b><span class="date">6월 12일</span><span class="amt">₩29,000</span></div>
|
|
</div>
|
|
|
|
<!-- 자동화 -->
|
|
<div class="auto card">
|
|
<div class="card-top">
|
|
<div class="card-ic"><svg class="ic"><use href="#i-zap" /></svg></div>
|
|
<div class="card-tt">
|
|
<div class="card-title">자동화</div>
|
|
<div class="card-sub" id="autoCount">2개 실행 중</div>
|
|
</div>
|
|
<div class="card-act"><button class="ghost-btn"><svg class="ic"><use href="#i-plus" /></svg>규칙</button></div>
|
|
</div>
|
|
<div class="auto-row">
|
|
<div class="auto-ic"><svg class="ic"><use href="#i-pin" /></svg></div>
|
|
<div class="auto-main"><div class="auto-when"><b>IF</b>퇴근 위치 감지</div><div class="auto-then"><b>THEN</b>내일 일정 브리핑 발송</div></div>
|
|
<button class="toggle on" aria-label="토글"><span class="knob"></span></button>
|
|
</div>
|
|
<div class="auto-row">
|
|
<div class="auto-ic"><svg class="ic"><use href="#i-mail" /></svg></div>
|
|
<div class="auto-main"><div class="auto-when"><b>IF</b>‘긴급’ 라벨 메일</div><div class="auto-then"><b>THEN</b>즉시 푸시 알림</div></div>
|
|
<button class="toggle on" aria-label="토글"><span class="knob"></span></button>
|
|
</div>
|
|
<div class="auto-row">
|
|
<div class="auto-ic"><svg class="ic"><use href="#i-moon" /></svg></div>
|
|
<div class="auto-main"><div class="auto-when"><b>IF</b>밤 11시</div><div class="auto-then"><b>THEN</b>수면 모드 · 조명 끄기</div></div>
|
|
<button class="toggle" aria-label="토글"><span class="knob"></span></button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 제2의 뇌 -->
|
|
<div class="know card">
|
|
<div class="card-top">
|
|
<div class="card-ic"><svg class="ic"><use href="#i-brain" /></svg></div>
|
|
<div class="card-tt">
|
|
<div class="card-title">제2의 뇌</div>
|
|
<div class="card-sub">최근 저장됨</div>
|
|
</div>
|
|
</div>
|
|
<div class="kb-search"><svg class="ic"><use href="#i-search" /></svg>저장한 지식에게 물어보기…</div>
|
|
<div class="kb-row">
|
|
<div class="kb-ic"><svg class="ic"><use href="#i-file" /></svg></div>
|
|
<div class="kb-main"><div class="kb-title">AI 에이전트 설계 패턴</div><div class="kb-src">웹 아티클</div></div>
|
|
<span class="kb-tag">리서치</span>
|
|
</div>
|
|
<div class="kb-row">
|
|
<div class="kb-ic"><svg class="ic"><use href="#i-pen" /></svg></div>
|
|
<div class="kb-main"><div class="kb-title">분기 회고 메모</div><div class="kb-src">내 노트</div></div>
|
|
<span class="kb-tag">업무</span>
|
|
</div>
|
|
<div class="kb-row">
|
|
<div class="kb-ic"><svg class="ic"><use href="#i-bookmark" /></svg></div>
|
|
<div class="kb-main"><div class="kb-title">‘몰입’ 독서 하이라이트 12개</div><div class="kb-src">북마크</div></div>
|
|
<span class="kb-tag">성장</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script>
|
|
// 할 일 체크 토글
|
|
const taskList = document.getElementById("taskList");
|
|
const remain = document.getElementById("taskRemain");
|
|
function updateRemain() {
|
|
const left = taskList.querySelectorAll('.task-row[data-done="0"]').length;
|
|
remain.textContent = left + "개 남음";
|
|
}
|
|
taskList.querySelectorAll(".task-row").forEach((row) => {
|
|
row.addEventListener("click", () => {
|
|
const done = row.getAttribute("data-done") === "1";
|
|
row.setAttribute("data-done", done ? "0" : "1");
|
|
row.classList.toggle("is-done", !done);
|
|
row.querySelector(".check").classList.toggle("done", !done);
|
|
updateRemain();
|
|
});
|
|
});
|
|
// 자동화 토글
|
|
const autoCount = document.getElementById("autoCount");
|
|
function updateAuto() {
|
|
const on = document.querySelectorAll(".auto-row .toggle.on").length;
|
|
autoCount.textContent = on + "개 실행 중";
|
|
}
|
|
document.querySelectorAll(".auto-row .toggle").forEach((t) => {
|
|
t.addEventListener("click", () => {
|
|
t.classList.toggle("on");
|
|
updateAuto();
|
|
});
|
|
});
|
|
// 네비 활성화
|
|
document.querySelectorAll(".nav a").forEach((a) => {
|
|
a.addEventListener("click", (e) => {
|
|
if (a.getAttribute("href") === "#") {
|
|
e.preventDefault();
|
|
document.querySelector(".nav a.active")?.classList.remove("active");
|
|
a.classList.add("active");
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|