Skip to content

Commit

Permalink
upload: template
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sanggi123
Sanggi123 committed Mar 9, 2024
1 parent 09067a6 commit 569c4c2
Showing 1 changed file with 127 additions and 0 deletions.
127 changes: 127 additions & 0 deletions templates/spa_sample.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>오늘의 시</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Noto Sans KR', sans-serif;
}
</style>
</head>
<body class="bg-gray-100">
<div class="container mx-auto p-4">
<!-- #1 키워드 페이지 -->
<div id="keywordPage" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
<h1 class="block text-gray-700 text-xl font-bold mb-2">오늘의 기분은?</h1>
<p class="text-gray-700 mb-4">오늘 하루 어떠셨나요? 오늘의 감정을 선택해 보세요!</p>
<form id="emotionForm">
<div class="mb-4">
<label class="inline-flex items-center">
<input type="radio" class="form-radio" name="emotion" value="happy">
<span class="ml-2">행복하다</span>
</label>
<label class="inline-flex items-center ml-6">
<input type="radio" class="form-radio" name="emotion" value="sad">
<span class="ml-2">슬프다</span>
</label>
<label class="inline-flex items-center ml-6">
<input type="radio" class="form-radio" name="emotion" value="angry">
<span class="ml-2">화나다</span>
</label>
<label class="inline-flex items-center ml-6">
<input type="radio" class="form-radio" name="emotion" value="bored">
<span class="ml-2">지루하다</span>
</label>
<label class="inline-flex items-center ml-6">
<input type="radio" class="form-radio" name="emotion" value="surprised">
<span class="ml-2">놀라다</span>
</label>
</div>
<button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded opacity-50 cursor-not-allowed" disabled>선택완료</button>
</form>
</div>

<!-- #2 문장 선택 페이지 -->
<div id="sentencePage" class="hidden bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
<h1 class="block text-gray-700 text-xl font-bold mb-2">마음에 드는 구절은?</h1>
<p class="text-gray-700 mb-4">마음에 드는 문장을 선택하면 해당 구절로 시를 생성해 드려요!</p>
<form id="sentenceForm">
<div class="mb-4">
<label class="inline-flex items-center">
<input type="radio" class="form-radio" name="sentence" value="thirst">
<span class="ml-2">마음속 깊은 우물에서 솟아나는 갈증</span>
</label>
<label class="inline-flex items-center mt-3">
<input type="radio" class="form-radio" name="sentence" value="leaves">
<span class="ml-2">가을 바람에 흩날리는 마음속 낙엽</span>
</label>
<label class="inline-flex items-center mt-3">
<input type="radio" class="form-radio" name="sentence" value="fate">
<span class="ml-2">남이 쓰는 펜으로 적힌 운명의 글귀</span>
</label>
</div>
<button type="button" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded mr-4">다시 생성</button>
<button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded opacity-50 cursor-not-allowed" disabled>선택완료</button>
<button type="button" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded ml-4" onclick="goBackToKeywordPage()">뒤로가기</button>
</form>
</div>

<!-- #3 출력 페이지 -->
<div id="outputPage" class="hidden bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
<h1 class="block text-gray-700 text-xl font-bold mb-2">당신의 오늘과 어울리는 시</h1>
<div class="flex mb-4">
<div class="w-1/2 mr-2">
<img src="https://via.placeholder.com/150" alt="이미지" class="rounded">
</div>
<div class="w-1/2 ml-2">
<p class="text-gray-700">생성된 시</p>
</div>
</div>
<button type="button" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mr-4">이미지와 시 저장</button>
<button type="button" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded ml-4" onclick="goBackToKeywordPage()">메인으로 돌아가기</button>
</div>
</div>

<script>
const emotionForm = document.getElementById('emotionForm');
const sentenceForm = document.getElementById('sentenceForm');
const keywordPage = document.getElementById('keywordPage');
const sentencePage = document.getElementById('sentencePage');
const outputPage = document.getElementById('outputPage');

emotionForm.addEventListener('change', function() {
const submitButton = emotionForm.querySelector('button[type="submit"]');
submitButton.classList.remove('opacity-50', 'cursor-not-allowed');
submitButton.disabled = false;
});

emotionForm.addEventListener('submit', function(event) {
event.preventDefault();
keywordPage.classList.add('hidden');
sentencePage.classList.remove('hidden');
});

sentenceForm.addEventListener('change', function() {
const submitButton = sentenceForm.querySelector('button[type="submit"]');
submitButton.classList.remove('opacity-50', 'cursor-not-allowed');
submitButton.disabled = false;
});

sentenceForm.addEventListener('submit', function(event) {
event.preventDefault();
sentencePage.classList.add('hidden');
outputPage.classList.remove('hidden');
});

function goBackToKeywordPage() {
sentencePage.classList.add('hidden');
outputPage.classList.add('hidden');
keywordPage.classList.remove('hidden');
}
</script>
</body>
</html>

0 comments on commit 569c4c2

Please sign in to comment.