first commit
This commit is contained in:
@@ -0,0 +1,187 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>로그인 — 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;
|
||||
--kakao: #FEE500; --kakao-text: #191600;
|
||||
--radius: 8px; --radius-sm: 5px;
|
||||
}
|
||||
html, body { height: 100%; }
|
||||
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;
|
||||
}
|
||||
.auth { display: flex; min-height: 100vh; }
|
||||
|
||||
/* ---- brand panel ---- */
|
||||
.brand-panel {
|
||||
flex: 0 0 46%; max-width: 620px; position: relative; overflow: hidden;
|
||||
background: linear-gradient(155deg, #4f46e5 0%, #4338ca 52%, #2e2a8f 100%);
|
||||
color: #fff; padding: 44px 48px; display: flex; flex-direction: column;
|
||||
}
|
||||
.brand-panel .blob { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
|
||||
.brand-panel .b1 { width: 360px; height: 360px; right: -120px; top: -90px; background: rgba(255,255,255,.10); }
|
||||
.brand-panel .b2 { width: 260px; height: 260px; left: -90px; bottom: -70px; background: rgba(255,255,255,.07); }
|
||||
.brand-panel .ring { position: absolute; right: 60px; bottom: 80px; width: 180px; height: 180px; border: 1.5px solid rgba(255,255,255,.14); border-radius: 50%; }
|
||||
.brand-panel .ring::after { content: ""; position: absolute; inset: 34px; border: 1.5px solid rgba(255,255,255,.10); border-radius: 50%; }
|
||||
.bp-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -.2px; position: relative; z-index: 1; }
|
||||
.bp-logo .logo { width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22); display: grid; place-items: center; font-size: 17px; font-weight: 800; }
|
||||
.bp-body { margin-top: auto; position: relative; z-index: 1; }
|
||||
.bp-head { font-size: 34px; font-weight: 700; line-height: 1.32; letter-spacing: -.8px; text-wrap: balance; }
|
||||
.bp-sub { margin-top: 18px; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.82); max-width: 400px; }
|
||||
.bp-points { margin-top: 30px; display: flex; flex-direction: column; gap: 12px; }
|
||||
.bp-point { display: flex; align-items: center; gap: 11px; font-size: 14px; color: rgba(255,255,255,.92); }
|
||||
.bp-point .ic { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.16); display: grid; place-items: center; flex-shrink: 0; }
|
||||
.bp-point .ic svg { width: 13px; height: 13px; }
|
||||
.bp-foot { margin-top: 40px; font-size: 12.5px; color: rgba(255,255,255,.6); position: relative; z-index: 1; }
|
||||
|
||||
/* ---- form panel ---- */
|
||||
.form-panel { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
|
||||
.auth-card { width: 100%; max-width: 384px; }
|
||||
.ac-logo { display: none; }
|
||||
.ac-title { font-size: 24px; font-weight: 700; letter-spacing: -.5px; }
|
||||
.ac-sub { color: var(--text-2); font-size: 14px; margin-top: 7px; }
|
||||
|
||||
.socials { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
|
||||
.sbtn {
|
||||
height: 46px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: #fff;
|
||||
display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer;
|
||||
font-family: inherit; font-size: 14.5px; font-weight: 600; color: var(--text); text-decoration: none;
|
||||
position: relative; transition: background .12s, border-color .12s;
|
||||
}
|
||||
.sbtn:hover { background: #f7f8fa; }
|
||||
.sbtn .sico { position: absolute; left: 16px; display: grid; place-items: center; }
|
||||
.sbtn.kakao { background: var(--kakao); border-color: var(--kakao); color: var(--kakao-text); }
|
||||
.sbtn.kakao:hover { background: #f2d900; }
|
||||
|
||||
.divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--text-3); font-size: 12.5px; }
|
||||
.divider::before, .divider::after { content: ""; height: 1px; background: var(--border); flex: 1; }
|
||||
|
||||
.field { margin-bottom: 14px; }
|
||||
.flabel { font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 7px; display: block; }
|
||||
.tinput { width: 100%; height: 44px; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 0 13px; 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); }
|
||||
.tinput::placeholder { color: var(--text-3); }
|
||||
.pw-wrap { position: relative; }
|
||||
.pw-wrap .tinput { padding-right: 44px; }
|
||||
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: none; background: transparent; color: var(--text-3); display: grid; place-items: center; cursor: pointer; border-radius: 6px; }
|
||||
.pw-toggle:hover { background: #f1f2f4; color: var(--text-2); }
|
||||
.pw-toggle svg { width: 18px; height: 18px; }
|
||||
|
||||
.options { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 22px; }
|
||||
.keep { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--text-2); user-select: none; white-space: nowrap; }
|
||||
.keep .box { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--border-strong); display: grid; place-items: center; background: #fff; }
|
||||
.keep .box.on { background: var(--accent); border-color: var(--accent); }
|
||||
.keep .box svg { width: 11px; height: 11px; color: #fff; opacity: 0; }
|
||||
.keep .box.on svg { opacity: 1; }
|
||||
.link { color: var(--accent); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
|
||||
.link:hover { text-decoration: underline; }
|
||||
|
||||
.submit { width: 100%; height: 46px; border-radius: var(--radius); border: none; background: var(--accent); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 1px 2px rgba(79,70,229,.4); text-decoration: none; display: flex; align-items: center; justify-content: center; }
|
||||
.submit:hover { background: var(--accent-hover); }
|
||||
|
||||
.signup { margin-top: 24px; text-align: center; font-size: 13.5px; color: var(--text-2); }
|
||||
.signup a { color: var(--accent); font-weight: 600; text-decoration: none; }
|
||||
.signup a:hover { text-decoration: underline; }
|
||||
.verify-note { margin-top: 6px; text-align: center; font-size: 12px; color: var(--text-3); display: flex; align-items: center; justify-content: center; gap: 5px; }
|
||||
.verify-note svg { width: 13px; height: 13px; }
|
||||
|
||||
@media (max-width: 880px) {
|
||||
.brand-panel { display: none; }
|
||||
.ac-logo { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 17px; margin-bottom: 26px; }
|
||||
.ac-logo .logo { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, #5b54f0, #4338ca); display: grid; place-items: center; color: #fff; font-size: 15px; font-weight: 800; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="auth">
|
||||
|
||||
<aside class="brand-panel">
|
||||
<div class="blob b1"></div>
|
||||
<div class="blob b2"></div>
|
||||
<div class="ring"></div>
|
||||
<div class="bp-logo"><span class="logo">R</span> Relay</div>
|
||||
<div class="bp-body">
|
||||
<div class="bp-head">지시부터 완료까지,<br>팀의 업무 흐름을 하나로</div>
|
||||
<div class="bp-sub">저장소 단위로 업무를 정리하고, 담당자에게 명확하게 지시하세요. 진행 상황은 한눈에 추적됩니다.</div>
|
||||
<div class="bp-points">
|
||||
<div class="bp-point"><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span> 저장소 · 업무 · 담당자로 이어지는 명확한 구조</div>
|
||||
<div class="bp-point"><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span> 체크리스트와 마감기한으로 진행 관리</div>
|
||||
<div class="bp-point"><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span> Gitea 연동으로 안전하게</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bp-foot">© 2026 Relay · 사내 업무 지시 플랫폼</div>
|
||||
</aside>
|
||||
|
||||
<main class="form-panel">
|
||||
<div class="auth-card">
|
||||
<div class="ac-logo"><span class="logo">R</span> Relay</div>
|
||||
<h1 class="ac-title">로그인</h1>
|
||||
<p class="ac-sub">업무 지시를 시작하려면 로그인하세요.</p>
|
||||
|
||||
<!-- 소셜 로그인 -->
|
||||
<div class="socials">
|
||||
<a class="sbtn" href="저장소 목록.html">
|
||||
<span class="sico"><svg width="20" height="20" viewBox="0 0 48 48"><path fill="#FFC107" d="M43.6 20.5H42V20H24v8h11.3C33.7 32.4 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.5 6.5 29.5 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.3-.4-3.5z"/><path fill="#FF3D00" d="M6.3 14.7l6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.5 6.5 29.5 4 24 4 16.3 4 9.7 8.3 6.3 14.7z"/><path fill="#4CAF50" d="M24 44c5.4 0 10.3-2.1 14-5.4l-6.5-5.5C29.6 34.6 26.9 36 24 36c-5.2 0-9.6-3.5-11.2-8.3l-6.5 5C9.6 39.6 16.2 44 24 44z"/><path fill="#1976D2" d="M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.2 4.1-4.1 5.5l6.5 5.5C41.4 36 44 30.5 44 24c0-1.3-.1-2.3-.4-3.5z"/></svg></span>
|
||||
Google로 계속하기
|
||||
</a>
|
||||
<a class="sbtn kakao" href="저장소 목록.html">
|
||||
<span class="sico"><svg width="19" height="19" viewBox="0 0 24 24" fill="#191600"><path d="M12 3C6.5 3 2 6.5 2 10.8c0 2.8 1.9 5.2 4.7 6.6-.2.7-.7 2.6-.8 3-.1.5.2.5.4.4.2-.1 2.6-1.8 3.7-2.5.6.1 1.3.1 2 .1 5.5 0 10-3.5 10-7.8C22 6.5 17.5 3 12 3z"/></svg></span>
|
||||
카카오로 계속하기
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="divider">또는 이메일로 로그인</div>
|
||||
|
||||
<!-- 이메일 로그인 -->
|
||||
<div class="field">
|
||||
<label class="flabel">이메일</label>
|
||||
<input class="tinput" type="email" placeholder="name@acme.co" value="">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="flabel">비밀번호</label>
|
||||
<div class="pw-wrap">
|
||||
<input class="tinput" type="password" placeholder="비밀번호 입력" value="">
|
||||
<button class="pw-toggle" type="button" title="비밀번호 표시"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="options">
|
||||
<span class="keep"><span class="box on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span> 로그인 상태 유지</span>
|
||||
<a class="link" href="#">비밀번호 찾기</a>
|
||||
</div>
|
||||
|
||||
<a class="submit" href="저장소 목록.html">로그인</a>
|
||||
|
||||
<div class="signup">계정이 없으신가요? <a href="회원가입.html">회원가입</a></div>
|
||||
<div class="verify-note">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16v16H4z" opacity="0"/><path d="M22 6 12 13 2 6"/><rect x="2" y="4" width="20" height="16" rx="2"/></svg>
|
||||
이메일 회원가입은 인증 메일 확인 후 완료됩니다
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 비밀번호 표시 토글 (정적 시안용 최소 인터랙션)
|
||||
document.querySelector('.pw-toggle').addEventListener('click', function () {
|
||||
var input = this.parentElement.querySelector('input');
|
||||
input.type = input.type === 'password' ? 'text' : 'password';
|
||||
});
|
||||
document.querySelector('.keep').addEventListener('click', function () {
|
||||
this.querySelector('.box').classList.toggle('on');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user