Spaces:

yoon2566
/

bb2

Running

App Files Files Community

yoon2566 commited on Apr 23, 2025

Commit

ffe28b2

verified ·

1 Parent(s): 64f0781

Update index.html

Browse files

Files changed (1) hide show

index.html +395 -19

index.html CHANGED Viewed

@@ -1,19 +1,395 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>로마서 8장 암송 도우미 (3개 블록 고정)</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; /* 어두운 회색 배경 */
+            color: #333; /* 클릭 전 글자색 (배경색과 동일하여 숨김) */
+            padding: 12px 8px;
+            border-radius: 5px;
+            cursor: pointer; /* 클릭 가능 표시 */
+            text-align: center;
+            box-sizing: border-box; /* 패딩과 보더를 너비에 포함 */
+            white-space: normal; /* 텍스트 길이에 따라 줄바꿈 허용 */
+            /* 모든 화면 크기에서 3개씩 한 줄에 오도록 너비 설정 */
+            /* flex-grow: 0, flex-shrink: 0 으로 크기 고정 */
+            flex: 0 0 calc(33.33% - 10px); /* 1/3 너비에서 간격 10px을 뺀 값 */
+            min-width: 50px; /* 너무 작아지는 것 방지 (최소 크기 설정) */ /* 이 값보다 화면이 작아지면 3개 유지가 어려울 수 있습니다. */
+            transition: background-color 0.2s, color 0.2s, font-weight 0.1s; /* 색상, 배경, 굵기 변경 애니메이션 */
+        }
+        /* 클릭된 파트 스타일 (항상 노란색으로 변경 및 배경 강조) */
+        .part.active {
+             color: #FFFF00; /* 클릭된 파트는 노란색 */
+             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: 100px; }
+             .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: 45px; /* 최소 너비 더 줄이기 */
+                font-size: 0.9em; /* 글자 크기 줄이기 */
+             }
+            .parts-container { gap: 8px; }
+        }
+    </style>
+</head>
+<body>
+    <h1>로마서 8장</h1>
+    <div class="controls">
+        <button id="prev-verse">이전 절</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 verseDisplay = document.getElementById('verse-display');
+        const prevButton = document.getElementById('prev-verse');
+        const nextButton = document.getElementById('next-verse');
+        const rateSlider = document.getElementById('rate-slider'); // 속도 조절 슬라이더
+        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);
+        });
+        // 페이지 로드 시 첫 번째 절 표시
+        document.addEventListener('DOMContentLoaded', () => {
+            displayVerse(currentVerseIndex);
+        });
+    </script>
+</body>
+</html>