zzabisagent-labandClaude Fable 5.1
c7aea8d419
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
59 lines
4.9 KiB
HTML
59 lines
4.9 KiB
HTML
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="robots" content="noindex">
|
|
<title>웹메일</title>
|
|
<!--
|
|
웹메일 (v1.3.0) — /webmail/<사이트ID>/
|
|
사이트 관리자 계정 중 "메일 사용" 을 켠 계정이 같은 아이디·비밀번호로 로그인한다.
|
|
메일 시스템 상태(운영자 꺼짐 / 사이트 꺼짐 / DNS 미완료 / 게이트웨이 미연결 / 사용 가능)를 맨 위 띠에 항상 표시한다.
|
|
실제 메일 송수신은 메일 게이트웨이(mail-gateway) 연동 후 동작한다 (lib/mailsys.js 참고).
|
|
-->
|
|
<style>
|
|
:root { --bg: #f4f5f7; --panel: #fff; --line: #e3e6ea; --text: #1f2933; --muted: #6b7684; --accent: #2f6fed; }
|
|
* { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif; font-size: 14px; color: var(--text); background: var(--bg); }
|
|
header { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #0f172a; color: #fff; } header h1 { font-size: 16px; margin: 0; } header .spacer { flex: 1; } header .muted { color: #94a3b8; font-size: 12px; }
|
|
button { font: inherit; padding: 7px 12px; border-radius: 7px; border: 1px solid var(--line); background: #fff; cursor: pointer; } button.primary { background: var(--accent); color: #fff; border-color: var(--accent); } button:disabled { opacity: .45; cursor: not-allowed; }
|
|
input, textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; font: inherit; margin: 3px 0 10px; } label { display: block; font-size: 12px; color: var(--muted); }
|
|
.hidden { display: none !important; } .muted { color: var(--muted); } .small { font-size: 12px; }
|
|
.banner { padding: 9px 16px; font-size: 13px; background: #fef3c7; color: #92400e; border-bottom: 1px solid #fde68a; } .banner.ok { background: #d1fae5; color: #065f46; border-color: #a7f3d0; } .banner.off { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
|
|
.login { max-width: 360px; margin: 60px auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 22px; } .login h2 { margin: 0 0 4px; font-size: 18px; } .msg { min-height: 18px; color: #c2410c; font-size: 12px; }
|
|
.mail { display: grid; grid-template-columns: 180px 360px 1fr; height: calc(100vh - 92px); } .mail > div { border-right: 1px solid var(--line); background: var(--panel); overflow: auto; }
|
|
.folders { padding: 12px; display: flex; flex-direction: column; gap: 6px; } .folders button { text-align: left; border: 0; background: transparent; } .folders button.active { background: #eef2ff; color: #3730a3; font-weight: 600; }
|
|
.list .item { padding: 10px 12px; border-bottom: 1px solid var(--line); cursor: pointer; } .list .item:hover { background: #f8fafc; } .list .item.unread b { color: #111; } .list .item .sub { color: var(--muted); font-size: 12px; }
|
|
.read { padding: 16px; } .read pre { white-space: pre-wrap; font-family: inherit; }
|
|
@media (max-width: 820px) { .mail { grid-template-columns: 1fr; height: auto; } .mail > div { border-right: 0; border-bottom: 1px solid var(--line); } }
|
|
</style>
|
|
<link rel="stylesheet" href="/theme.css">
|
|
</head>
|
|
<body>
|
|
<header><h1>웹메일</h1><span class="muted" id="hSite"></span><span class="spacer"></span><span id="hAddr" class="small"></span><button type="button" id="btnCompose" class="hidden">메일 쓰기</button><button type="button" id="btnLogout" class="hidden">로그아웃</button></header>
|
|
<div class="banner hidden" id="banner"></div>
|
|
<section class="login hidden" id="loginBox">
|
|
<h2>웹메일 로그인</h2>
|
|
<p class="muted small">사이트 관리자 계정의 아이디와 비밀번호로 로그인합니다. 메일 사용이 켜진 계정만 들어올 수 있습니다.</p>
|
|
<label>아이디 (또는 메일 주소)<input id="lId" autocomplete="username"></label>
|
|
<label>비밀번호<input id="lPw" type="password" autocomplete="current-password"></label>
|
|
<p class="msg" id="lMsg"></p>
|
|
<button type="button" class="primary" id="lGo">로그인</button>
|
|
</section>
|
|
<main class="mail hidden" id="mailBox">
|
|
<div class="folders" id="folders"><button type="button" data-folder="inbox" class="active">받은 편지함</button><button type="button" data-folder="sent">보낸 편지함</button></div>
|
|
<div class="list" id="list"></div>
|
|
<div class="read" id="read"><p class="muted">메일을 고르면 내용이 여기에 표시됩니다.</p></div>
|
|
</main>
|
|
<dialog id="composeDlg"><form method="dialog" style="width:min(560px,90vw)">
|
|
<h3>메일 쓰기</h3>
|
|
<label>받는 사람<input id="cTo" type="email" placeholder="name@example.com"></label>
|
|
<label>제목<input id="cSubject"></label>
|
|
<label>내용<textarea id="cText" rows="10"></textarea></label>
|
|
<p class="msg" id="cMsg"></p>
|
|
<button type="button" class="primary" id="cSend">보내기</button> <button type="button" id="cCancel">닫기</button>
|
|
</form></dialog>
|
|
<script src="/i18n.js"></script>
|
|
<script src="/webmail.js"></script>
|
|
</body>
|
|
</html>
|