Spaces:

yoon2566
/

bb2

Running

bb2

File size: 22,449 Bytes

<!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>