286 lines
20 KiB
HTML
286 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>q3-launch-campaign · 활동 — Relay</title>
|
|
<link rel="preconnect" href="https://cdn.jsdelivr.net">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css">
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
:root {
|
|
--bg: #f4f5f7; --panel: #ffffff; --border: #e6e8ec; --border-strong: #d7dae0;
|
|
--text: #16181d; --text-2: #5b626e; --text-3: #9298a3;
|
|
--accent: #4f46e5; --accent-hover: #4338ca; --accent-weak: #eef0fe; --accent-border: #c7ccfb;
|
|
--green: #1f9d57; --green-weak: #e8f6ee; --blue: #1d4ed8; --blue-weak: #e8efff; --blue-border: #c9dbff;
|
|
--red: #d6455d; --amber: #b7791f; --amber-weak: #fdf4e3;
|
|
--radius: 6px; --radius-sm: 4px; --shadow-sm: 0 1px 2px rgba(20,24,33,.05);
|
|
}
|
|
html, body { background: var(--bg); color: var(--text); font-family: "Pretendard", -apple-system, system-ui, sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
|
|
body { min-height: 100vh; }
|
|
|
|
/* topbar */
|
|
.topbar { height: 52px; background: var(--panel); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 28px; padding: 0 20px; position: sticky; top: 0; z-index: 50; }
|
|
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; letter-spacing: -.2px; }
|
|
.brand .logo { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, #5b54f0, #4338ca); display: grid; place-items: center; color: #fff; font-size: 15px; font-weight: 800; box-shadow: 0 2px 6px rgba(79,70,229,.35); }
|
|
.topnav { display: flex; align-items: center; gap: 2px; }
|
|
.topnav a { color: var(--text-2); text-decoration: none; font-size: 13.5px; font-weight: 500; padding: 7px 12px; border-radius: var(--radius-sm); line-height: 1; white-space: nowrap; }
|
|
.topnav a:hover { background: #f1f2f4; color: var(--text); }
|
|
.topnav a.active { color: var(--accent); background: var(--accent-weak); font-weight: 600; }
|
|
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
|
|
.icon-btn { width: 32px; height: 32px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
|
|
.icon-btn:hover { background: #f1f2f4; color: var(--text); }
|
|
.me { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: #fff; background: #0ea5a3; margin-left: 4px; }
|
|
|
|
/* page */
|
|
.page { max-width: 1080px; margin: 0 auto; padding: 0 24px 70px; }
|
|
.crumb { display: flex; align-items: center; gap: 7px; color: var(--text-3); font-size: 12.5px; padding: 18px 0 12px; white-space: nowrap; }
|
|
.crumb .lnk { color: var(--text-2); font-weight: 600; text-decoration: none; }
|
|
.crumb .lnk:hover { color: var(--accent); }
|
|
.crumb .sep { opacity: .5; }
|
|
.crumb b { color: var(--text-2); font-weight: 600; }
|
|
|
|
.btn { height: 36px; padding: 0 15px; border-radius: var(--radius); font-size: 13.5px; font-weight: 600; border: 1px solid var(--border-strong); background: var(--panel); color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; line-height: 1; text-decoration: none; white-space: nowrap; }
|
|
.btn:hover { background: #f7f8fa; color: var(--text); }
|
|
.btn svg { width: 15px; height: 15px; }
|
|
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(79,70,229,.4); }
|
|
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
|
|
|
|
/* repo header */
|
|
.repo-head { display: flex; align-items: flex-start; gap: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 20px 22px; box-shadow: var(--shadow-sm); }
|
|
.repo-ico { width: 46px; height: 46px; border-radius: 10px; background: var(--accent-weak); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
|
|
.repo-ico svg { width: 24px; height: 24px; }
|
|
.rh-main { flex: 1; min-width: 0; }
|
|
.rh-title { display: flex; align-items: center; gap: 10px; }
|
|
.rh-name { font-size: 18px; font-weight: 700; letter-spacing: -.3px; white-space: nowrap; }
|
|
.rh-slug { font-size: 12.5px; color: var(--text-3); margin-top: 5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
|
|
.vis { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; line-height: 1.5; }
|
|
.vis svg { width: 11px; height: 11px; }
|
|
.vis.private { color: var(--text-2); background: #f1f2f4; border: 1px solid var(--border); }
|
|
.rh-desc { font-size: 13.5px; color: var(--text-2); margin-top: 6px; }
|
|
.rh-meta { display: flex; align-items: center; gap: 15px; margin-top: 12px; font-size: 12px; color: var(--text-3); }
|
|
.rh-meta .mi { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
|
|
.rh-meta .mi svg { width: 13px; height: 13px; }
|
|
.avatar { width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
|
.avstack { display: flex; align-items: center; }
|
|
.avstack .avatar { margin-left: -7px; box-shadow: 0 0 0 2px #fff; }
|
|
.avstack .avatar:first-child { margin-left: 0; }
|
|
.av-a { background: #e0518d; } .av-b { background: #3d8bf2; } .av-c { background: #16a37b; }
|
|
.av-d { background: #b3631f; } .av-e { background: #7c5cf0; } .av-f { background: #d0982a; }
|
|
.av-more { background: #eceef1; color: var(--text-2); box-shadow: 0 0 0 2px #fff; }
|
|
.rh-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
|
|
|
|
/* tabs */
|
|
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: 20px 0 18px; }
|
|
.tabs a { padding: 10px 14px; font-size: 13.5px; font-weight: 600; color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
|
|
.tabs a:hover { color: var(--text); }
|
|
.tabs a.active { color: var(--accent); border-bottom-color: var(--accent); }
|
|
.tabs a .tb-label { line-height: 1; }
|
|
.tabs a .tb-count { font-size: 11px; font-weight: 600; color: var(--text-2); background: #f1f2f4; border-radius: 20px; padding: 0 7px; height: 17px; min-width: 17px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
|
|
.tabs a.active .tb-count { background: var(--accent-weak); color: var(--accent); }
|
|
|
|
/* toolbar */
|
|
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
|
|
.segmented { display: flex; background: #eceef1; border-radius: var(--radius); padding: 3px; gap: 2px; }
|
|
.segmented button { border: none; background: transparent; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-2); padding: 5px 13px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
|
|
.segmented button.active { background: #fff; color: var(--text); box-shadow: var(--shadow-sm); }
|
|
.mfilter { margin-left: auto; display: flex; align-items: center; gap: 7px; height: 36px; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 0 11px; background: #fff; font-size: 13px; font-weight: 500; color: var(--text-2); cursor: pointer; white-space: nowrap; }
|
|
.mfilter svg { width: 15px; height: 15px; color: var(--text-3); }
|
|
|
|
/* activity feed */
|
|
.feed { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-sm); padding: 6px 20px 18px; }
|
|
.day { font-size: 12px; font-weight: 700; color: var(--text-3); letter-spacing: .2px; padding: 18px 0 6px; }
|
|
.act { display: flex; align-items: center; gap: 13px; padding: 9px 0; position: relative; }
|
|
.act-ico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; z-index: 1; }
|
|
.act-ico svg { width: 16px; height: 16px; }
|
|
.act-ico.task { background: var(--blue-weak); color: var(--blue); }
|
|
.act-ico.member { background: var(--green-weak); color: var(--green); }
|
|
.act-ico.setting { background: var(--amber-weak); color: var(--amber); }
|
|
.act-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
|
|
.act-av { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
|
.act-text { font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
|
|
.act-text b { color: var(--text); font-weight: 600; }
|
|
.act-text .tgt { color: var(--accent); font-weight: 600; text-decoration: none; }
|
|
.act-text .tgt:hover { text-decoration: underline; }
|
|
.act-text .st { font-weight: 600; }
|
|
.act-text .st.prog { color: var(--blue); } .act-text .st.done { color: var(--green); }
|
|
.act-time { font-size: 12px; color: var(--text-3); white-space: nowrap; flex-shrink: 0; margin-left: 12px; }
|
|
|
|
/* vertical connector line */
|
|
.feed-inner { position: relative; }
|
|
.act::before { content: ""; position: absolute; left: 15.5px; top: 50%; bottom: -9px; width: 1.5px; background: var(--border); z-index: 0; }
|
|
.act.last-in-group::before { display: none; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="topbar">
|
|
<div class="brand"><div class="logo">R</div>Relay</div>
|
|
<nav class="topnav">
|
|
<a href="내 업무.html">내 업무</a>
|
|
<a href="저장소 목록.html" class="active">저장소</a>
|
|
</nav>
|
|
<div class="topbar-right">
|
|
<button class="icon-btn" title="검색"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m21 21-4-4"/></svg></button>
|
|
<button class="icon-btn" title="알림"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg></button>
|
|
<div class="me">정</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="page" data-screen-label="저장소 활동">
|
|
<div class="crumb">
|
|
<a href="저장소 목록.html" class="lnk">저장소</a>
|
|
<span class="sep">/</span>
|
|
<a href="저장소 상세.html" class="lnk">3분기 신제품 런칭 캠페인</a>
|
|
<span class="sep">/</span>
|
|
<b>활동</b>
|
|
</div>
|
|
|
|
<!-- 저장소 헤더 -->
|
|
<div class="repo-head">
|
|
<div class="repo-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg></div>
|
|
<div class="rh-main">
|
|
<div class="rh-title">
|
|
<span class="rh-name">3분기 신제품 런칭 캠페인</span>
|
|
<span class="vis private"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>비공개</span>
|
|
</div>
|
|
<div class="rh-slug">marketing-team / q3-launch-campaign</div>
|
|
<div class="rh-desc">3분기 신제품(라인 클렌저) 런칭 캠페인 소재 제작 및 검수</div>
|
|
<div class="rh-meta">
|
|
<span class="mi"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>main</span>
|
|
<span class="mi avstack"><span class="avatar av-f">정</span><span class="avatar av-a">김</span><span class="avatar av-b">박</span><span class="avatar av-c">이</span><span class="avatar av-d">최</span></span>
|
|
<span class="mi">2시간 전 업데이트</span>
|
|
</div>
|
|
</div>
|
|
<div class="rh-actions">
|
|
<a class="btn primary" href="업무 작성.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5v14"/></svg>새 업무</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 서브탭 -->
|
|
<nav class="tabs">
|
|
<a href="저장소 상세.html"><span class="tb-label">업무</span> <span class="tb-count">12</span></a>
|
|
<a href="저장소 멤버.html"><span class="tb-label">멤버</span> <span class="tb-count">5</span></a>
|
|
<a href="#" class="active"><span class="tb-label">활동</span></a>
|
|
<a href="저장소 설정.html"><span class="tb-label">설정</span></a>
|
|
</nav>
|
|
|
|
<!-- 툴바 -->
|
|
<div class="toolbar">
|
|
<div class="segmented">
|
|
<button class="active">전체</button>
|
|
<button>업무</button>
|
|
<button>멤버</button>
|
|
<button>설정</button>
|
|
</div>
|
|
<div class="mfilter">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
|
모든 멤버
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 활동 피드 -->
|
|
<div class="feed">
|
|
<div class="feed-inner">
|
|
|
|
<div class="day">오늘</div>
|
|
<div class="act">
|
|
<span class="act-ico task"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg></span>
|
|
<div class="act-main">
|
|
<span class="act-av av-c">이</span>
|
|
<span class="act-text"><b>이도윤</b>님이 <a class="tgt" href="#">법무 검토 요청 및 회신 반영</a> 업무를 <span class="st prog">진행 중</span>으로 변경했습니다</span>
|
|
</div>
|
|
<span class="act-time">2시간 전</span>
|
|
</div>
|
|
<div class="act">
|
|
<span class="act-ico task"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg></span>
|
|
<div class="act-main">
|
|
<span class="act-av av-b">박</span>
|
|
<span class="act-text"><b>박지훈</b>님이 <a class="tgt" href="#">메인 배너 이미지 2종 디자인</a>의 체크리스트 ‘가로형 메인 배너’를 완료했습니다</span>
|
|
</div>
|
|
<span class="act-time">3시간 전</span>
|
|
</div>
|
|
<div class="act">
|
|
<span class="act-ico member"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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"/></svg></span>
|
|
<div class="act-main">
|
|
<span class="act-av av-f">정</span>
|
|
<span class="act-text"><b>정태경</b>님이 <b>한지민</b>님을 멤버로 초대했습니다</span>
|
|
</div>
|
|
<span class="act-time">5시간 전</span>
|
|
</div>
|
|
<div class="act last-in-group">
|
|
<span class="act-ico member"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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="m17 11 2 2 4-4"/></svg></span>
|
|
<div class="act-main">
|
|
<span class="act-av av-d">한</span>
|
|
<span class="act-text"><b>한지민</b>님이 멤버로 합류했습니다</span>
|
|
</div>
|
|
<span class="act-time">5시간 전</span>
|
|
</div>
|
|
|
|
<div class="day">어제</div>
|
|
<div class="act">
|
|
<span class="act-ico task"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg></span>
|
|
<div class="act-main">
|
|
<span class="act-av av-d">최</span>
|
|
<span class="act-text"><b>최유진</b>님이 <a class="tgt" href="#">메인 비주얼 컨셉 확정</a> 업무를 <span class="st done">완료</span>했습니다</span>
|
|
</div>
|
|
<span class="act-time">어제 18:40</span>
|
|
</div>
|
|
<div class="act last-in-group">
|
|
<span class="act-ico task"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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"/></svg></span>
|
|
<div class="act-main">
|
|
<span class="act-av av-f">정</span>
|
|
<span class="act-text"><b>정태경</b>님이 <a class="tgt" href="#">SNS 콘텐츠 1차 시안</a> 업무를 지시했습니다 <span style="color:var(--text-3)">· 담당 정민호</span></span>
|
|
</div>
|
|
<span class="act-time">어제 14:10</span>
|
|
</div>
|
|
|
|
<div class="day">이번 주</div>
|
|
<div class="act">
|
|
<span class="act-ico setting"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></span>
|
|
<div class="act-main">
|
|
<span class="act-av av-f">정</span>
|
|
<span class="act-text"><b>정태경</b>님이 저장소 공개 범위를 <b>비공개</b>로 변경했습니다</span>
|
|
</div>
|
|
<span class="act-time">6월 11일</span>
|
|
</div>
|
|
<div class="act">
|
|
<span class="act-ico member"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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="M22 11h-6"/></svg></span>
|
|
<div class="act-main">
|
|
<span class="act-av av-b">박</span>
|
|
<span class="act-text"><b>박지훈</b>님의 역할이 <b>멤버</b>로 설정되었습니다</span>
|
|
</div>
|
|
<span class="act-time">6월 11일</span>
|
|
</div>
|
|
<div class="act">
|
|
<span class="act-ico setting"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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"/></svg></span>
|
|
<div class="act-main">
|
|
<span class="act-av av-f">정</span>
|
|
<span class="act-text"><b>정태경</b>님이 표시 제목을 ‘3분기 신제품 런칭 캠페인’으로 변경했습니다</span>
|
|
</div>
|
|
<span class="act-time">6월 10일</span>
|
|
</div>
|
|
<div class="act">
|
|
<span class="act-ico task"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg></span>
|
|
<div class="act-main">
|
|
<span class="act-av av-a">김</span>
|
|
<span class="act-text"><b>김서연</b>님이 <a class="tgt" href="#">캠페인 핵심 메시지 시안 작성</a> 업무를 <span class="st done">완료</span>했습니다</span>
|
|
</div>
|
|
<span class="act-time">6월 9일</span>
|
|
</div>
|
|
<div class="act last-in-group">
|
|
<span class="act-ico setting"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg></span>
|
|
<div class="act-main">
|
|
<span class="act-av av-f">정</span>
|
|
<span class="act-text"><b>정태경</b>님이 저장소를 생성했습니다</span>
|
|
</div>
|
|
<span class="act-time">6월 2일</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |