## 최종본 메인 페이지 (index.html)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DeepL 번역 서비스</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
font-size: 1.5em;
height: 100vh;
display: flex;
flex-direction: column;
}
.container {
display: flex;
gap: 20px;
height: 100%;
padding: 20px;
box-sizing: border-box;
}
.text-box {
flex: 1;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
padding: 10px;
display: flex;
flex-direction: column;
}
textarea {
flex: 1;
border: none;
resize: none;
font-size: 1em;
width: 100%;
height: 100%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
textarea:focus {
outline: none;
}
.progress-bar {
height: 4px;
background-color: #e0e0e0;
margin-top: 10px;
position: relative;
}
.progress {
height: 100%;
width: 0;
background-color: #5b9bff;
transition: width 0.3s ease;
}
.progress-text {
position: absolute;
top: -25px;
left: 0;
width: 100%;
text-align: center;
font-size: 0.8em;
color: #333;
}
button {
margin-top: 10px;
padding: 10px 20px;
background-color: #1f3c71;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1em;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
button:hover {
background-color: #0a3474;
}
.button-disabled {
background-color: #cccccc;
cursor: not-allowed;
}
#statusMessage {
margin-top: 10px;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="text-box">
<textarea id="input" placeholder="번역할 텍스트를 입력하세요"></textarea>
<button id="translateBtn">번역</button>
</div>
<div class="text-box">
<textarea id="output" readonly placeholder="번역 결과가 여기에 표시됩니다"></textarea>
<div class="progress-bar">
<div id="progress" class="progress"></div>
<div id="progressText" class="progress-text">준비 중...</div>
</div>
<div id="statusMessage"></div>
<div id="downloadLink" style="margin-top: 10px;"></div>
</div>
</div>
<script>
const translateBtn = document.getElementById('translateBtn');
const statusMessage = document.getElementById('statusMessage');
function updateProgress(status, percentage) {
const progress = document.getElementById('progress');
const progressText = document.getElementById('progressText');
progress.style.width = `${percentage}%`;
progressText.textContent = `${status} (${percentage}%)`;
statusMessage.textContent = status;
}
async function translate() {
const input = document.getElementById('input').value;
const output = document.getElementById('output');
translateBtn.disabled = true;
translateBtn.classList.add('button-disabled');
translateBtn.textContent = '번역 중...';
updateProgress('전처리 중', 10);
try {
const response = await fetch('/translate', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ text: input }),
});
updateProgress('번역 중', 50);
const data = await response.json();
if (data.error) {
output.value = "오류 발생: " + data.error;
updateProgress('오류 발생', 100);
} else {
output.value = data.translatedText;
updateProgress('번역 완료', 100);
const downloadLink = document.getElementById('downloadLink');
downloadLink.innerHTML = `<a href="/download/${data.filename}" download>번역 결과 다운로드</a>`;
}
} catch (error) {
output.value = "오류 발생: " + error;
updateProgress('오류 발생', 100);
} finally {
translateBtn.disabled = false;
translateBtn.classList.remove('button-disabled');
translateBtn.textContent = '번역';
}
}
translateBtn.addEventListener('click', translate);
</script>
</body>
</html>
## 로그인 페이지 (login.html)
xml
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Segoe UI 사용 */
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.login-container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
text-align: center;
}
.login-container h1 {
margin-bottom: 20px;
font-size: 24px;
}
.login-container input[type="password"] {
width: calc(100% - 20px);
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Segoe UI 사용 */
}
.login-container button {
width: calc(100% - 20px);
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Segoe UI 사용 */
}
.login-container button:hover {
background-color: #0056b3;
}
.login-container .forgot-password {
margin-top: 10px;
font-size: 14px;
}
.login-container .forgot-password a {
color: #007bff;
text-decoration: none;
}
.login-container .forgot-password a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="login-container">
<h1>로그인</h1>
<form action="/login" method="post">
<input type="password" id="password" name="password" placeholder="비밀번호" required>
<button type="submit">로그인</button>
</form>
<div class="forgot-password">
<a href="/forgot-password">비밀번호를 잊으셨나요?</a>
</div>
</div>
</body>
</html>
## 비밀번호 재설정 요청 페이지 (forgot_password.html)
xml
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>비밀번호 재설정 요청</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Segoe UI 사용 */
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.reset-container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
text-align: center;
}
.reset-container h1 {
margin-bottom: 20px;
font-size: 24px;
}
.reset-container input[type="email"] {
width: calc(100% - 20px);
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Segoe UI 사용 */
}
.reset-container button {
width: calc(100% - 20px);
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Segoe UI 사용 */
}
.reset-container button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="reset-container">
<h1>비밀번호 재설정 요청</h1>
<form action="/forgot-password" method="post">
<input type="email" id="email" name="email" placeholder="이메일" required>
<button type="submit">재설정 링크 전송</button>
</form>
<div>
<a href="/login">로그인 페이지로 돌아가기</a>
</div>
</div>
</body>
</html>
## 비밀번호 재설정 페이지 (reset_password.html)
xml
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>비밀번호 재설정</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Segoe UI 사용 */
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.reset-container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
text-align: center;
}
.reset-container h1 {
margin-bottom: 20px;
font-size: 24px;
}
.reset-container input[type="password"] {
width: calc(100% - 20px);
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Segoe UI 사용 */
}
.reset-container button {
width: calc(100% - 20px);
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Segoe UI 사용 */
}
.reset-container button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="reset-container">
<h1>비밀번호 재설정</h1>
<form action="" method="post">
<input type="password" id="password" name="password" placeholder="새 비밀번호" required>
<button type="submit">비밀번호 재설정</button>
</form>
<div>
<a href="/login">로그인 페이지로 돌아가기</a>
</div>
</div>
</body>
</html>
'1인 프로젝트 > 나만의 번역기(Local DeepL)' 카테고리의 다른 글
| 4차 백업(heroku를 이용한 배포) (0) | 2024.08.04 |
|---|---|
| 이건 또 무슨 오류야... 산 넘어 산! (웹 서버에 대한 잘못된 요청) (0) | 2024.08.04 |
| 3차 백업(모바일 화면 최적화) (0) | 2024.08.04 |
| 1차 백업 (0) | 2024.08.04 |
| 프로젝트 구조 및 서비스 구성 (0) | 2024.08.04 |