Spaces:

wiizm
/

soyailabs

Running on CPU Upgrade

SOY NV AI

Fix: Add Permissions-Policy header and replace autofocus with JavaScript to fix iframe warnings

12d93bf 7 days ago

5.53 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>로그인 - SOY AI 웹소설 어시스턴트</title>
	<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	}

	.login-container {
	background: white;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	padding: 40px;
	width: 100%;
	max-width: 400px;
	}

	.login-header {
	text-align: center;
	margin-bottom: 32px;
	}

	.login-header h1 {
	font-size: 28px;
	font-weight: 600;
	color: #202124;
	margin-bottom: 8px;
	}

	.login-header p {
	font-size: 14px;
	color: #5f6368;
	}

	.login-icon {
	margin-bottom: 16px;
	display: flex;
	justify-content: center;
	align-items: center;
	}

	.login-icon img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	}

	.form-group {
	margin-bottom: 20px;
	}

	.form-group label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: #202124;
	margin-bottom: 8px;
	}

	.form-group input {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid #dadce0;
	border-radius: 8px;
	font-size: 15px;
	font-family: inherit;
	transition: border-color 0.2s, box-shadow 0.2s;
	}

	.form-group input:focus {
	outline: none;
	border-color: #1a73e8;
	box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
	}

	.login-button {
	width: 100%;
	padding: 12px;
	background: #1a73e8;
	color: white;
	border: none;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s;
	margin-top: 8px;
	}

	.login-button:hover {
	background: #1557b0;
	}

	.login-button:active {
	transform: scale(0.98);
	}

	.alert {
	padding: 12px 16px;
	border-radius: 8px;
	margin-bottom: 20px;
	font-size: 14px;
	}

	.alert.error {
	background: #fce8e6;
	color: #c5221f;
	border: 1px solid #f28b82;
	}

	.alert.info {
	background: #e8f0fe;
	color: #1967d2;
	border: 1px solid #aecbfa;
	}
	</style>
	</head>
	<body>
	<div class="login-container">
	<div class="login-header">
	<div class="login-icon">
	<img src="{{ url_for('static', filename='logo.webp') }}" alt="SOY AI 로고">
	</div>
	<h1>SOY AI<br/>작품 개발 어시스턴트</h1>
	<p>로그인이 필요합니다</p>
	</div>

	{% with messages = get_flashed_messages(with_categories=true) %}
	{% if messages %}
	{% for category, message in messages %}
	<div class="alert {{ category }}">
	{{ message }}
	</div>
	{% endfor %}
	{% endif %}
	{% endwith %}

	<form method="POST" action="{{ url_for('main.login') }}">
	<div class="form-group">
	<label for="username">사용자명</label>
	<input type="text" id="username" name="username" required>
	</div>

	<div class="form-group">
	<label for="password">비밀번호</label>
	<input type="password" id="password" name="password" required>
	</div>

	<button type="submit" class="login-button">로그인</button>
	</form>
	</div>

	<script>
	// iframe 내부에서도 작동하도록 JavaScript로 autofocus 처리
	// Cross-origin iframe에서 autofocus가 차단되는 문제 해결
	document.addEventListener('DOMContentLoaded', function() {
	const usernameInput = document.getElementById('username');
	if (usernameInput) {
	// 약간의 지연을 두어 iframe 로딩 완료 후 포커스
	setTimeout(function() {
	try {
	usernameInput.focus();
	} catch (e) {
	// iframe에서 포커스가 차단될 수 있으므로 무시
	console.debug('Autofocus blocked in iframe (expected behavior)');
	}
	}, 100);
	}
	});
	</script>
	</body>
	</html>