Ariweb Suite 0.1.1 기반: 공통 라이브러리(db·http·세션·작업 엔진·할당/예약·알림·감사·보관소), 포털 뼈대, Webmaker/AriMail 도입 소스와 manifest
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
zzabisagent-lab
co-authored by
Claude Fable 5.1
Claude Fable 5.1
parent
9ca4cee341
commit
c7aea8d419
@@ -0,0 +1,58 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user