Spaces:

yoon2566
/

bb2

Running

App Files Files Community

bb2 / index.html

yoon2566

Update index.html

85e6734 verified 8 months ago

raw

history blame contribute delete

22.4 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>로마서 8장 암송 도우미 (모드 전환)</title>
	<style>
	/* 기본 스타일 */
	body {
	background-color: #000; /* 검은 배경 */
	color: #FFFFFF; /* 기본 글자색 (파트 색상으로 대체되므로 크게 의미 없음) */
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	margin: 0;
	padding: 20px;
	line-height: 1.6;
	overflow-y: auto; /* 내용이 길어도 스크롤 가능하게 */
	-webkit-overflow-scrolling: touch; /* 모바일 스크롤 부드럽게 */
	word-break: keep-all; /* 단어 중간에 줄바꿈 방지 (한글에 적합) */
	}

	h1 {
	text-align: center;
	margin-bottom: 15px; /* 컨트롤과의 간격 */
	color: #FFFF00; /* 노란색 제목 */
	font-size: 1.8em;
	}

	/* 절 컨테이너 스타일 (하나씩만 보이도록) */
	.verse {
	display: none; /* 기본적으로는 숨김 */
	margin-top: 20px; /* 컨트롤과의 간격 */
	margin-bottom: 30px;
	}

	.verse.active {
	display: block; /* 활성화된 절만 보임 */
	}

	.verse-number {
	font-weight: bold;
	margin-bottom: 15px;
	display: block;
	font-size: 1.2em;
	color: #FFFF00; /* 절 번호는 노란색 */
	text-align: center;
	}

	/* 파트 전체를 담는 컨테이너 (Flexbox로 줄바꿈 처리) */
	.parts-container {
	display: flex;
	flex-wrap: wrap; /* 내용이 넘치면 자동으로 다음 줄로 이동 */
	gap: 10px; /* 파트 간 간격 */
	justify-content: center; /* 파트들을 중앙 정렬 */
	}

	/* 파트 블록 스타일 */
	.part {
	background-color: #333; /* 어두운 회색 배경 */
	padding: 12px 8px;
	border-radius: 5px;
	cursor: pointer; /* 클릭 가능 표시 */
	text-align: center;
	box-sizing: border-box; /* 패딩과 보더를 너비에 포함 */
	white-space: normal; /* 텍스트 길이에 따라 줄바꿈 허용 */

	/* 모든 화면 크기에서 3개씩 한 줄에 오도록 너비 설정 */
	flex: 0 0 calc(33.33% - 10px); /* 1/3 너비에서 간격 10px을 뺀 값 */
	min-width: 50px; /* 너무 작아지는 것 방지 */

	transition: background-color 0.2s, color 0.2s, font-weight 0.1s; /* 색상, 배경, 굵기 변경 애니메이션 */
	}

	/* 미리보기 모드: 클릭 전 글자 색상 (배경보다 약간 밝게) */
	body.preview-mode .part {
	color: #AAAAAA; /* 희미한 회색 */
	}

	/* 가리기 모드: 클릭 전 글자 색상 (배경과 동일하여 숨김) */
	body.hide-mode .part {
	color: #333; /* 어두운 회색 (배경과 동일) */
	}

	/* 클릭된 파트 스타일 (어떤 모드에서도 항상 노란색) */
	.part.active {
	color: #FFFF00 !important; /* 클릭된 파트는 노란색 (모드 색상보다 우선) */
	background-color: #555; /* 클릭 시 약간 밝은 회색 배경 */
	font-weight: bold; /* 클릭된 단어 강조 */
	}

	/* 컨트롤 버튼 및 슬라이더 컨테이너 스타일 */
	.controls {
	text-align: center;
	margin-bottom: 20px; /* 절 내용과의 간격 */
	/* 내부 요소 정렬을 위해 flexbox 사용 */
	display: flex;
	justify-content: center; /* 중앙 정렬 */
	align-items: center; /* 세로 중앙 정렬 */
	flex-wrap: wrap; /* 공간 부족 시 다음 줄로 이동 */
	gap: 15px; /* 컨트롤 요소 간 간격 */
	}

	/* 슬라이더 및 라벨 스타일 */
	.rate-control {
	display: flex; /* 라벨과 슬라이더를 가로로 배치 */
	align-items: center;
	gap: 5px; /* 라벨과 슬라이더 간 간격 */
	color: #AAAAAA; /* 라벨 색상 */
	font-size: 0.9em;
	}

	/* 슬라이더 자체 스타일 (브라우저별 스타일 재정의 필요) */
	input[type="range"] {
	-webkit-appearance: none; /* 기본 스타일 제거 */
	appearance: none;
	width: 120px; /* 슬라이더 너비 */
	height: 5px; /* 슬라이더 트랙 높이 */
	background: #555; /* 트랙 배경색 */
	outline: none;
	opacity: 0.7;
	transition: opacity .2s;
	border-radius: 5px;
	}

	input[type="range"]:hover {
	opacity: 1;
	}

	/* 슬라이더 썸(thumb) 스타일 */
	input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 15px;
	height: 15px;
	background: #FFFF00; /* 노란색 썸 */
	cursor: pointer;
	border-radius: 50%; /* 원형 */
	}

	input[type="range"]::-moz-range-thumb {
	width: 15px;
	height: 15px;
	background: #FFFF00; /* 노란색 썸 */
	cursor: pointer;
	border-radius: 50%; /* 원형 */
	}

	.controls button {
	padding: 12px 20px; /* 버튼 패딩 조정 */
	background-color: #555; /* 어두운 회색 배경 */
	color: #FFFF00; /* 노란 글자 */
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 0.9em; /* 버튼 글자 크기 조정 */
	transition: background-color 0.2s;
	-webkit-appearance: none; /* 모바일 기본 버튼 스타일 제거 */
	appearance: none;
	}

	.controls button:hover:not(:disabled) {
	background-color: #777; /* 호버 시 약간 밝게 */
	}

	.controls button:disabled {
	opacity: 0.5; /* 비활성화 시 흐리게 */
	cursor: not-allowed;
	}

	/* 모바일 최적화 (3개 블록 레이아웃은 CSS Flexbox에 맡김) */
	@media (max-width: 768px) { /* 태블릿 및 모바일 */
	body { padding: 15px; }
	h1 { font-size: 1.7em; margin-bottom: 10px; }
	.verse-number { font-size: 1.1em; }
	.controls {
	gap: 10px; /* 컨트롤 요소 간 간격 줄임 */
	}
	.controls button { padding: 10px 18px; font-size: 0.85em; }
	input[type="range"] { width: 90px; } /* 슬라이더 너비 조정 */
	.part {
	/* 모바일에서도 3개씩 유지 */
	flex: 0 0 calc(33.33% - 10px);
	padding: 10px 6px;
	min-width: 50px;
	}
	.parts-container { gap: 10px; }
	}

	@media (max-width: 480px) { /* 작은 모바일 */
	body { padding: 10px; }
	h1 { font-size: 1.5em; margin-bottom: 8px; }
	.verse-number { font-size: 1em; }
	.controls {
	flex-direction: column; /* 세로 정렬 */
	gap: 8px;
	}
	.controls button { padding: 8px 15px; font-size: 0.8em; width: 80%;} /* 버튼 세로 정렬 및 너비 조정 */
	.rate-control {
	width: 80%; /* 슬라이더 영역 너비 조정 */
	justify-content: space-between; /* 라벨과 슬라이더 양 끝 정렬 */
	}
	input[type="range"] { width: 60%; } /* 슬라이더 너비 조정 */
	.part {
	/* 더 작은 모바일에서도 3개씩 유지 */
	flex: 0 0 calc(33.33% - 8px); /* 간격 조정 */
	padding: 8px 5px; /* 패딩 조정 */
	min-width: 40px; /* 최소 너비 더 줄이기 */
	font-size: 0.85em; /* 글자 크기 줄이기 */
	}
	.parts-container { gap: 8px; }
	}


	</style>
	</head>
	<!-- 기본 모드를 미리보기로 설정 -->
	<body class="preview-mode">
	<h1>로마서 8장</h1>

	<div class="controls">
	<button id="prev-verse">이전 절</button>
	<button id="toggle-mode">글자 가리기</button> <!-- 모드 전환 버튼 -->
	<button id="next-verse">다음 절</button>
	<div class="rate-control">
	<label for="rate-slider">속도:</label>
	<input type="range" id="rate-slider" min="0.5" max="2.0" step="0.1" value="1.0">
	</div>
	</div>

	<div id="verse-display">
	<!-- 여기에 JavaScript로 절 내용이 로드됩니다. -->
	</div>


	<script>
	// 로마서 8장 전문 (제공해주신 최신 텍스트 적용)
	const verses = [
	"그러므로 이제 그리스도 예수 안에 있는 자에게는 결코 정죄함이 없나니", // 1
	"이는 그리스도 예수 안에 있는 생명의 성령의 법이 죄와 사망의 법에서 너를 해방하였음이라", // 2
	"율법이 육신으로 말미암아 연약하여 할 수 없는 그것을 하나님은 하시나니 곧 죄로 말미암아 자기 아들을 죄 있는 육신의 모양으로 보내어 육신에 죄를 정하사", // 3
	"육신을 따르지 않고 그 영을 따라 행하는 우리에게 율법의 요구가 이루어지게 하려 하심이니라", // 4
	"육신을 따르는 자는 육신의 일을, 영을 따르는 자는 영의 일을 생각하나니", // 5
	"육신의 생각은 사망이요 영의 생각은 생명과 평안이니라", // 6
	"육신의 생각은 하나님과 원수가 되나니 이는 하나님의 법에 굴복하지 아니할 뿐 아니라 할 수도 없음이라", // 7
	"육신에 있는 자들은 하나님을 기쁘시게 할 수 없느니라", // 8
	"만일 너희 속에 하나님의 영이 거하시면 너희가 육신에 있지 아니하고 영에 있나니 누구든지 그리스도의 영이 없으면 그리스도의 사람이 아니라", // 9
	"또 그리스도께서 너희 안에 계시면 몸은 죄로 말미암아 죽은 것이나 영은 의로 말미암아 살아 있는 것이니라", // 10
	"예수를 죽은 자 가운데서 살리신 이의 영이 너희 안에 거하시면 그리스도 예수를 죽은 자 가운데서 살리신 이가 너희 안에 거하시는 그의 영으로 말미암아 너희 죽을 몸도 살리시리라", // 11
	"그러므로 형제들아 우리가 빚진 자로되 육신에게 져서 육신대로 살 것이 아니니라", // 12
	"너희가 육신대로 살면 반드시 죽을 것이로되 영으로써 몸의 행실을 죽이면 살리니", // 13
	"무릇 하나님의 영으로 인도함을 받는 사람은 곧 하나님의 아들이라", // 14
	"너희는 다시 무서워하는 종의 영을 받지 아니하고 양자의 영을 받았으므로 우리가 아빠 아버지라고 부르짖느니라", // 15
	"성령이 친히 우리의 영과 더불어 우리가 하나님의 자녀인 것을 증언하시나니", // 16
	"자녀이면 또한 상속자 곧 하나님의 상속자요 그리스도와 함께 한 상속자니 우리가 그와 함께 영광을 받기 위하여 고난도 함께 받아야 할 것이니라", // 17
	"생각하건대 현재의 고난은 장차 우리에게 나타날 영광과 비교할 수 없도다", // 18
	"피조물이 고대하는 바는 하나님의 아들들이 나타나는 것이니", // 19
	"피조물이 허무한 데 굴복하는 것은 자기 뜻이 아니요 오직 굴복하게 하시는 이로 말미암음이라", // 20
	"그 바라는 것은 피조물도 썩어짐의 종 노릇 한 데서 해방되어 하나님의 자녀들의 영광의 자유에 이르는 것이니라", // 21
	"피조물이 다 이제까지 함께 탄식하며 함께 고통을 겪고 있는 것을 우리가 아느니라", // 22
	"그뿐 아니라 또한 우리 곧 성령의 처음 익은 열매를 받은 우리까지도 속으로 탄식하여 양자 될 것 곧 우리 몸의 속량을 기다리느니라", // 23
	"우리가 소망으로 구원을 얻었으매 보이는 소망이 소망이 아니니 보는 것을 누가 바라리요", // 24
	"만일 우리가 보지 못하는 것을 바라면 참음으로 기다릴지니라", // 25
	"이와 같이 성령도 우리의 연약함을 도우시나니 우리는 마땅히 기도할 바를 알지 못하나 오직 성령이 말할 수 없는 탄식으로 우리를 위하여 친히 간구하시느니라", // 26
	"마음을 살피시는 이가 성령의 생각을 아시나니 이는 성령이 하나님의 뜻대로 성도를 위하여 간구하심이니라", // 27
	"우리가 알거니와 하나님을 사랑하는 자 곧 그의 뜻대로 부르심을 입은 자들에게는 모든 것이 합력하여 선을 이루느니라", // 28
	"하나님이 미리 아신 자들을 또한 그 아들의 형상을 본받게 하기 위하여 미리 정하셨으니 이는 그로 많은 형제 중에서 맏아들이 되게 하려 하심이니라", // 29
	"또 미리 정하신 그들을 또한 부르시고 부르신 그들을 또한 의롭다 하시고 의롭다 하신 그들을 또한 영화롭게 하셨느니라", // 30
	"그런즉 이 일에 대하여 우리가 무슨 말 하리요 만일 하나님이 우리를 위하시면 누가 우리를 대적하리요", // 31
	"자기 아들을 아끼지 아니하시고 우리 모든 사람을 위하여 내주신 이가 어찌 그 아들과 함께 모든 것을 우리에게 주시지 아니하겠느냐", // 32
	"누가 능히 하나님께서 택하신 자들을 고발하리요 의롭다 하신 이는 하나님이시니", // 33
	"누가 정죄하리요 죽으실 뿐 아니라 다시 살아나신 이는 그리스도 예수시니 그는 하나님 우편에 계신 자요 우리를 위하여 간구하시는 자시니라", // 34
	"누가 우리를 그리스도의 사랑에서 끊으리요 환난이나 곤고나 박해나 기근이나 적신이나 위험이나 칼이랴", // 35
	"기록된 바 ㄱ)우리가 종일 주를 위하여 죽임을 당하게 되며 도살 당할 양 같이 여김을 받았나이다 함과 같으니라", // 36
	"그러나 이 모든 일에 우리를 사랑하시는 이로 말미암아 우리가 넉넉히 이기느니라", // 37
	"내가 확신하노니 사망이나 생명이나 천사들이나 권세자들이나 현재 일이나 장래 일이나 능력이나", // 38
	"높음이나 깊음이나 다른 어떤 피조물이라도 우리를 우리 주 그리스도 예수 안에 있는 하나님의 사랑에서 끊을 수 없으리라" // 39
	];

	const body = document.body; // body 요소 참조
	const verseDisplay = document.getElementById('verse-display');
	const prevButton = document.getElementById('prev-verse');
	const nextButton = document.getElementById('next-verse');
	const rateSlider = document.getElementById('rate-slider'); // 속도 조절 슬라이더
	const toggleModeButton = document.getElementById('toggle-mode'); // 모드 전환 버튼
	let currentVerseIndex = 0; // 현재 보여주는 절의 인덱스 (0부터 시작)


	// 특정 절을 화면에 표시하는 함수
	function displayVerse(index) {
	// 인덱스 범위 유효성 검사
	if (index < 0 \|\| index >= verses.length) {
	return;
	}

	currentVerseIndex = index; // 현재 절 인덱스 업데이트

	// 기존 절 내용 지우기
	verseDisplay.innerHTML = '';

	// 새 절 컨테이너 생성 및 활성화 클래스 추가
	const verseDiv = document.createElement('div');
	verseDiv.classList.add('verse', 'active');

	// 절 번호 추가
	const verseNumberSpan = document.createElement('span');
	verseNumberSpan.classList.add('verse-number');
	verseNumberSpan.textContent = `로마서 8장 ${currentVerseIndex + 1}절`;
	verseDiv.appendChild(verseNumberSpan);

	// 절 텍스트를 띄어쓰기 기준으로 분할
	const parts = verses[currentVerseIndex].split(' ');

	// 파트 전체를 담는 컨테이너 생성 (Flexbox로 줄바꿈 담당)
	const partsContainer = document.createElement('div');
	partsContainer.classList.add('parts-container');

	// 각 파트별 블록 생성 및 partsContainer에 추가
	parts.forEach(partText => {
	// 빈 문자열이 아닌 경우에만 파트 생성
	if (partText.trim() !== '') {
	const partDiv = document.createElement('div');
	partDiv.classList.add('part');
	// 텍스트 내용 설정 시 앞뒤 공백 제거
	partDiv.textContent = partText.trim();

	// 클릭 이벤트 리스너 추가
	partDiv.addEventListener('click', function() {

	// --- 클릭된 파트 하이라이트 (항상 노란색) ---
	// 현재 절의 모든 파트 블록 가져오기 (partsContainer 내에서 찾음)
	const allPartsInVerse = partsContainer.querySelectorAll('.part');

	// 모든 파트의 active 클래스 제거 (클릭 안 된 상태로 되돌림)
	allPartsInVerse.forEach(p => {
	p.classList.remove('active');
	});

	// 클릭된 파트에 active 클래스 추가 (노란색으로 변경)
	this.classList.add('active');
	// --- 클릭된 파트 하이라이트 끝 ---


	// --- TTS 로직 ---
	const textToSpeak = this.textContent; // 클릭된 파트의 텍스트 가져오기

	// 빈 문자열이거나 TTS 지원 안 하면 실행 안 함
	if (textToSpeak && 'speechSynthesis' in window) {
	// 현재 재생 중인 음성이 있다면 중지
	window.speechSynthesis.cancel();

	// 음성 합성 객체 생성
	const utterance = new SpeechSynthesisUtterance(textToSpeak);

	// 언어 설정 (한국어)
	utterance.lang = 'ko-KR';

	// 슬라이더 값으로 속도 설정
	utterance.rate = parseFloat(rateSlider.value);


	// 텍스트 읽기 시작
	window.speechSynthesis.speak(utterance);
	} else if (!('speechSynthesis' in window)) {
	console.warn("Text-to-speech is not supported in this browser.");
	}
	// --- TTS 로직 끝 ---
	});

	// partsContainer에 파트 블록 추가
	partsContainer.appendChild(partDiv);
	}
	});

	// 절 컨테이너에 partsContainer 추가
	verseDiv.appendChild(partsContainer);

	// 화면에 절 컨테이너 추가
	verseDisplay.appendChild(verseDiv);

	// 네비게이션 버튼 상태 업데이트
	prevButton.disabled = currentVerseIndex === 0; // 첫 절이면 이전 버튼 비활성화
	nextButton.disabled = currentVerseIndex === verses.length - 1; // 마지막 절이면 다음 버튼 비활성화
	// TTS 재생 중지 (절 전환 시 불필요한 소리 방지)
	if ('speechSynthesis' in window) {
	window.speechSynthesis.cancel();
	}
	}

	// 이전 절 버튼 클릭 이벤트
	prevButton.addEventListener('click', () => {
	displayVerse(currentVerseIndex - 1);
	});

	// 다음 절 버튼 클릭 이벤트
	nextButton.addEventListener('click', () => {
	displayVerse(currentVerseIndex + 1);
	});

	// 모드 전환 버튼 클릭 이벤트
	toggleModeButton.addEventListener('click', () => {
	// body에 현재 모드 클래스가 있는지 확인하여 상태 토글
	const isPreviewMode = body.classList.contains('preview-mode');

	if (isPreviewMode) {
	// 미리보기 -> 가리기 모드로 전환
	body.classList.remove('preview-mode');
	body.classList.add('hide-mode');
	toggleModeButton.textContent = "글자 미리보기";
	} else {
	// 가리기 -> 미리보기 모드로 전환
	body.classList.remove('hide-mode');
	body.classList.add('preview-mode');
	toggleModeButton.textContent = "글자 가리기";
	}
	// TTS 재생 중지 (모드 전환 시 불필요한 소리 방지)
	if ('speechSynthesis' in window) {
	window.speechSynthesis.cancel();
	}
	// 모든 파트의 active 상태 해제 (모드 변경 시 이전 클릭 상태 초기화)
	const allPartsInVerse = verseDisplay.querySelectorAll('.part');
	allPartsInVerse.forEach(p => p.classList.remove('active'));
	});


	// 페이지 로드 시 첫 번째 절 표시
	document.addEventListener('DOMContentLoaded', () => {
	displayVerse(currentVerseIndex);
	});

	</script>
	</body>
	</html>