first commit
This commit is contained in:
@@ -0,0 +1,275 @@
|
||||
<!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; --red: #d6455d; --red-weak: #fdeef0; --red-border: #f1c0c8;
|
||||
--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-f { background: #d0982a; }
|
||||
.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 22px; }
|
||||
.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; }
|
||||
|
||||
/* settings layout */
|
||||
.settings { max-width: 720px; }
|
||||
.sec-title { font-size: 15px; font-weight: 700; letter-spacing: -.2px; margin: 0 0 12px; }
|
||||
.sec-title.danger { color: var(--red); }
|
||||
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-sm); margin-bottom: 30px; }
|
||||
.fblock { padding: 20px 22px; border-top: 1px solid var(--border); }
|
||||
.fblock:first-child { border-top: none; }
|
||||
.flabel { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 5px; display: flex; align-items: center; gap: 7px; }
|
||||
.fhint { font-size: 12.5px; color: var(--text-3); margin-bottom: 11px; line-height: 1.5; }
|
||||
.fixed-pill { font-size: 11px; font-weight: 600; color: var(--text-2); background: #e9ebef; border: 1px solid var(--border-strong); padding: 1px 7px; border-radius: 20px; line-height: 1.5; white-space: nowrap; }
|
||||
|
||||
.tinput { width: 100%; height: 40px; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 0 12px; font-family: inherit; font-size: 14px; color: var(--text); background: #fff; }
|
||||
.tinput:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
|
||||
textarea.tarea { min-height: 84px; padding: 10px 12px; line-height: 1.6; resize: vertical; height: auto; }
|
||||
|
||||
.readonly { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 13px; background: #f5f6f8; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-2); font-size: 14px; font-weight: 500; cursor: not-allowed; }
|
||||
.readonly .owner-avatar { width: 20px; height: 20px; border-radius: 5px; background: #0ea5a3; color: #fff; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; }
|
||||
.readonly .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); font-weight: 600; }
|
||||
.readonly .lock { margin-left: auto; color: var(--text-3); display: grid; place-items: center; }
|
||||
.readonly .lock svg { width: 14px; height: 14px; }
|
||||
|
||||
/* visibility radio cards */
|
||||
.radio-group { display: flex; flex-direction: column; gap: 10px; }
|
||||
.radio-card { display: flex; align-items: flex-start; gap: 13px; padding: 13px 14px; border: 1px solid var(--border-strong); border-radius: 8px; cursor: pointer; background: #fff; }
|
||||
.radio-card:hover { border-color: var(--accent-border); }
|
||||
.radio-card.sel { border-color: var(--accent); background: var(--accent-weak); }
|
||||
.rc-ico { width: 32px; height: 32px; border-radius: 8px; background: #f1f2f4; color: var(--text-2); display: grid; place-items: center; flex-shrink: 0; }
|
||||
.rc-ico svg { width: 17px; height: 17px; }
|
||||
.radio-card.sel .rc-ico { background: #fff; color: var(--accent); }
|
||||
.rc-body { flex: 1; }
|
||||
.rc-title { font-size: 14px; font-weight: 600; color: var(--text); }
|
||||
.rc-desc { font-size: 12.5px; color: var(--text-2); margin-top: 2px; line-height: 1.45; }
|
||||
.rc-radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-strong); flex-shrink: 0; margin-top: 7px; display: grid; place-items: center; background: #fff; }
|
||||
.radio-card.sel .rc-radio { border-color: var(--accent); }
|
||||
.radio-card.sel .rc-radio::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
|
||||
|
||||
.input-ico { display: flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius); background: #fff; padding: 0 12px; gap: 9px; max-width: 300px; }
|
||||
.input-ico:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
|
||||
.input-ico .ico { color: var(--text-3); display: grid; place-items: center; }
|
||||
.input-ico .ico svg { width: 16px; height: 16px; }
|
||||
.input-ico input { flex: 1; border: none; outline: none; height: 40px; font-family: inherit; font-size: 14px; background: transparent; color: var(--text); }
|
||||
|
||||
.card-foot { display: flex; justify-content: flex-end; padding: 14px 22px; border-top: 1px solid var(--border); background: #fafbfc; border-radius: 0 0 10px 10px; }
|
||||
|
||||
/* danger zone */
|
||||
.danger-card { background: #fff; border: 1px solid var(--red-border); border-radius: 10px; box-shadow: var(--shadow-sm); overflow: hidden; }
|
||||
.danger-row { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-top: 1px solid #f6dde2; }
|
||||
.danger-row:first-child { border-top: none; }
|
||||
.dr-main { flex: 1; min-width: 0; }
|
||||
.dr-title { font-size: 14px; font-weight: 600; color: var(--text); }
|
||||
.dr-desc { font-size: 12.5px; color: var(--text-2); margin-top: 3px; line-height: 1.5; }
|
||||
.btn-danger { height: 34px; padding: 0 14px; border-radius: var(--radius); font-size: 13px; font-weight: 600; border: 1px solid var(--red-border); background: #fff; color: var(--red); cursor: pointer; white-space: nowrap; flex-shrink: 0; }
|
||||
.btn-danger:hover { background: var(--red-weak); }
|
||||
.btn-danger.solid { background: var(--red); border-color: var(--red); color: #fff; }
|
||||
.btn-danger.solid:hover { background: #c23a51; }
|
||||
|
||||
.admin-note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-3); margin-bottom: 18px; }
|
||||
.admin-note svg { width: 14px; height: 14px; flex-shrink: 0; }
|
||||
</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">멤버 5명</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="저장소 활동.html"><span class="tb-label">활동</span></a>
|
||||
<a href="#" class="active"><span class="tb-label">설정</span></a>
|
||||
</nav>
|
||||
|
||||
<div class="settings">
|
||||
<div class="admin-note">
|
||||
<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>
|
||||
저장소 설정은 <b style="color:var(--text-2);font-weight:600;white-space:nowrap">관리자</b>만 변경할 수 있습니다.
|
||||
</div>
|
||||
|
||||
<!-- ===== 일반 ===== -->
|
||||
<h2 class="sec-title">일반</h2>
|
||||
<div class="card">
|
||||
<div class="fblock">
|
||||
<div class="flabel">표시 제목</div>
|
||||
<div class="fhint">Relay 목록과 화면에 표시되는 이름입니다. (한글 가능)</div>
|
||||
<input class="tinput" type="text" value="3분기 신제품 런칭 캠페인" maxlength="40">
|
||||
</div>
|
||||
|
||||
<div class="fblock">
|
||||
<div class="flabel">소유자 / Gitea 저장소 이름 <span class="fixed-pill">소유자 고정</span></div>
|
||||
<div class="fhint">Gitea 저장소 이름(영문)은 주소에 사용됩니다. 변경은 아래 위험 구역에서 할 수 있습니다.</div>
|
||||
<div class="readonly">
|
||||
<span class="owner-avatar">M</span> marketing-team <span style="color:var(--text-3)">/</span> <span class="mono">q3-launch-campaign</span>
|
||||
<span class="lock"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
|
||||
|
||||
<div class="fblock">
|
||||
<div class="flabel">프로젝트 설명</div>
|
||||
<textarea class="tinput tarea">3분기 신제품(라인 클렌저) 런칭 관련 캠페인 소재 제작 및 검수 업무를 관리하는 저장소입니다.</textarea>
|
||||
</div>
|
||||
|
||||
<div class="fblock">
|
||||
<div class="flabel">공개 범위</div>
|
||||
<div class="fhint">저장소와 그 안의 업무를 누가 볼 수 있는지 결정합니다.</div>
|
||||
<div class="radio-group">
|
||||
<label class="radio-card sel">
|
||||
<span class="rc-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></span>
|
||||
<span class="rc-body"><span class="rc-title">비공개</span><span class="rc-desc">저장소에 초대된 멤버만 접근하고 업무를 확인할 수 있습니다.</span></span>
|
||||
<span class="rc-radio"></span>
|
||||
</label>
|
||||
<label class="radio-card">
|
||||
<span class="rc-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20"/></svg></span>
|
||||
<span class="rc-body"><span class="rc-title">공개</span><span class="rc-desc">조직 내 모든 구성원이 저장소를 보고 업무 현황을 열람할 수 있습니다.</span></span>
|
||||
<span class="rc-radio"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fblock">
|
||||
<div class="flabel">메인 브랜치</div>
|
||||
<div class="fhint">저장소의 기본 브랜치 이름입니다.</div>
|
||||
<div class="input-ico">
|
||||
<span class="ico"><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></span>
|
||||
<input type="text" value="main" spellcheck="false">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-foot">
|
||||
<button class="btn primary" type="button">변경 저장</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== 위험 구역 ===== -->
|
||||
<h2 class="sec-title danger">위험 구역</h2>
|
||||
<div class="danger-card">
|
||||
<div class="danger-row">
|
||||
<div class="dr-main">
|
||||
<div class="dr-title">Gitea 저장소 이름 변경</div>
|
||||
<div class="dr-desc">영문 저장소 이름과 Gitea 주소가 함께 바뀝니다. 기존 링크가 동작하지 않을 수 있습니다.</div>
|
||||
</div>
|
||||
<button class="btn-danger" type="button">이름 변경</button>
|
||||
</div>
|
||||
<div class="danger-row">
|
||||
<div class="dr-main">
|
||||
<div class="dr-title">저장소 삭제</div>
|
||||
<div class="dr-desc">저장소와 그 안의 모든 업무·활동 기록이 영구 삭제됩니다. 되돌릴 수 없습니다.</div>
|
||||
</div>
|
||||
<button class="btn-danger solid" type="button">저장소 삭제</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user