GWNU-Capstone-Design · wlgp · Apr 10, 2024 · Apr 13, 2024 · Apr 19, 2024 · Apr 24, 2024
diff --git a/PBCVeiw/Icon/back.png b/PBCVeiw/Icon/back.png
diff --git a/PBCVeiw/Icon/backward.png b/PBCVeiw/Icon/backward.png
diff --git a/PBCVeiw/Icon/bookmark.png b/PBCVeiw/Icon/bookmark.png
diff --git a/PBCVeiw/Icon/forward.png b/PBCVeiw/Icon/forward.png
diff --git a/PBCVeiw/Icon/home.png b/PBCVeiw/Icon/home.png
diff --git a/PBCVeiw/Icon/mute.png b/PBCVeiw/Icon/mute.png
diff --git a/PBCVeiw/Icon/pause.png b/PBCVeiw/Icon/pause.png
diff --git a/PBCVeiw/Icon/play.png b/PBCVeiw/Icon/play.png
diff --git a/PBCVeiw/Icon/search.png b/PBCVeiw/Icon/search.png
diff --git a/PBCVeiw/Icon/volume.png b/PBCVeiw/Icon/volume.png
diff --git a/PBCVeiw/Image/dog.jpg b/PBCVeiw/Image/dog.jpg
diff --git a/PBCVeiw/Image/fox.jpg b/PBCVeiw/Image/fox.jpg
diff --git a/PBCVeiw/Image/testpicture.jpg b/PBCVeiw/Image/testpicture.jpg
diff --git a/PBCVeiw/Zum Internet.url b/PBCVeiw/Zum Internet.url
@@ -0,0 +1,2 @@
+[InternetShortcut]
+URL=https://www.zum.com/?af=al_frzum
diff --git a/PBCVeiw/img/left.png b/PBCVeiw/img/left.png
diff --git a/PBCVeiw/img/right.png b/PBCVeiw/img/right.png
diff --git a/PBCVeiw/img/slide.jpg b/PBCVeiw/img/slide.jpg
diff --git a/PBCVeiw/img/slide01.jpg b/PBCVeiw/img/slide01.jpg
diff --git a/PBCVeiw/img/slide02.jpg b/PBCVeiw/img/slide02.jpg
diff --git a/PBCVeiw/img/slide03.jpg b/PBCVeiw/img/slide03.jpg
diff --git a/PBCVeiw/index.html b/PBCVeiw/index.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PictureBook Curator</title>
+    <link rel="stylesheet" href="styles.css"> <!-- 스타일 시트 링크 -->
+    <script src="script.js" defer></script> <!-- 자바스크립트 파일 링크 -->
+</head>
+<body>
+    <div class="container">
+        <!-- 헤더 섹션 -->
+        <div class="header">
+            <button class="back-button">
+                <img src="Icon/back.png" alt="Back">
+            </button>
+            <input type="text" id="title-input" class="title-input" placeholder="책 제목을 입력하세요">
+            <button class="bookmark-button">
+                <img src="Icon/bookmark.png" alt="Bookmark">
+            </button>
+        </div>
+
+        <div id="content" class="content">
+            <!-- 슬라이드 섹션 -->
+            <div class="section">
+                <input type="radio" name="slide" id="slide01" checked>
+                <input type="radio" name="slide" id="slide02">
+                <input type="radio" name="slide" id="slide03">
+
+                <div class="slidewrap">
+                    <ul class="slidelist">
+                        <li>
+                            <a>
+                                <label for="slide03" class="left"></label>
+                                <div class="textbox"></div>
+                                <img src="./Image/dog.jpg" alt="Slide 1">
+                                <label for="slide02" class="right"></label>
+                            </a>
+                        </li>
+                        <li>
+                            <a>
+                                <label for="slide01" class="left"></label>
+                                <div class="textbox"></div>
+                                <img src="./Image/testpicture.jpg" alt="Slide 2">
+                                <label for="slide03" class="right"></label>
+                            </a>
+                        </li>
+                        <li>
+                            <a>
+                                <label for="slide02" class="left"></label>
+                                <div class="textbox"></div>
+                                <img src="./Image/fox.jpg" alt="Slide 3">
+                                <label for="slide01" class="right"></label>
+                            </a>
+                        </li> 
+                    </ul>
+                </div>
+            </div>
+            <!-- 자막을 표시할 요소 -->
+            <div id="subtitle" class="subtitle">첫번째 슬라이드 입니다. 이 문장은 자막이 길어질 때 어떻게 보이는지 테스트하는 예시 문장입니다.</div>
+        </div>
+
+        <!-- 푸터 섹션 -->
+        <div class="footer">
+            <!-- 처음으로 돌아가는 버튼 -->
+            <button class="action-button">
+                <img src="Icon/home.png" alt="Home">
+            </button>
+
+            <div class="controls">
+                <button class="control-button">
+                    <img src="Icon/backward.png" alt="Backward" class="icon">
+                    5
+                </button>
+                <button class="control-button pause-play-toggle">
+                    <img src="Icon/pause.png" alt="Pause" class="icon">
+                </button>
+                <button class="control-button">
+                    <img src="Icon/forward.png" alt="Forward" class="icon">
+                    5
+                </button>
+            </div>
+
+            <!-- 페이지 정보 표시 및 수정 요소 -->
+            <div class="page-info">
+                <input type="number" id="current-page" value="1" min="1">
+                <span>/</span>
+                <span id="total-pages">3</span>
+            </div>
+
+            <div class="volume-control">
+                <span class="volume-icon">
+                    <img src="Icon/volume.png" alt="Volume" id="volume-icon">
+                </span>
+                <input type="range" min="0" max="100" value="50">
+            </div>
+
+        </div>
+    </div>
+</body>
+</html>
diff --git a/PBCVeiw/script.js b/PBCVeiw/script.js
@@ -0,0 +1,114 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // 슬라이드 요소를 선택합니다.
+    const slides = document.querySelectorAll('input[type="radio"][name="slide"]');
+    // 자막을 업데이트할 요소를 선택합니다.
+    const subtitle = document.querySelector('.subtitle');
+    // 현재 페이지 입력 요소를 선택합니다.
+    const currentPageInput = document.getElementById('current-page');
+    // 전체 페이지 수를 슬라이드 개수로 설정합니다.
+    const totalPages = slides.length;
+
+    // 총 페이지 수를 두 자리 형식으로 표시합니다.
+    document.getElementById('total-pages').textContent = totalPages.toString().padStart(2, '0');
+
+    // 슬라이드 변경 이벤트에 대한 리스너를 추가합니다.
+    slides.forEach(slide => {
+        slide.addEventListener('change', function() {
+            updateSubtitle();
+            updateCurrentPage();
+        });
+    });
+
+    // 현재 페이지 입력 값 변경 이벤트에 대한 리스너를 추가합니다.
+    currentPageInput.addEventListener('change', function() {
+        const page = parseInt(currentPageInput.value);
+        if (page >= 1 && page <= totalPages) {
+            document.getElementById(`slide0${page}`).checked = true;
+            updateSubtitle();
+        } else {
+            currentPageInput.value = formatPageNumber(document.querySelector('input[type="radio"][name="slide"]:checked').id.replace('slide', ''));
+        }
+    });
+
+    // 자막을 업데이트하는 함수입니다.
+    function updateSubtitle() {
+        const checkedSlide = document.querySelector('input[type="radio"][name="slide"]:checked').id;
+        const currentPage = checkedSlide.replace('slide', '');
+        currentPageInput.value = formatPageNumber(currentPage); // 현재 페이지 번호 업데이트
+        const subtitles = {
+            slide01: "첫번째 슬라이드 입니다. 이 문장은 자막이 길어질 때 어떻게 보이는지 테스트하는 예시 문장입니다.",
+            slide02: "두번째 슬라이드 입니다. 두 번째 슬라이드는 길이 테스트를 위해 작성되었습니다. 이 문장도 충분히 길어야 합니다.",
+            slide03: "세번째 슬라이드 입니다. 이 슬라이드는 자막이 길어질 때의 처리를 확인하기 위해 작성되었습니다. 충분히 기이이이이이인 문장입니다."
+        };
+        const subtitleText = subtitles[checkedSlide];
+        subtitle.textContent = subtitleText;
+
+        adjustFontSize(subtitle, subtitleText);
+    }
+
+    // 현재 페이지 번호를 업데이트하는 함수입니다.
+    function updateCurrentPage() {
+        const checkedSlide = document.querySelector('input[type="radio"][name="slide"]:checked').id;
+        const currentPage = checkedSlide.replace('slide', '');
+        currentPageInput.value = formatPageNumber(currentPage);
+    }
+
+    // 페이지 번호를 두 자리 형식으로 변환하는 함수입니다.
+    function formatPageNumber(page) {
+        return page.padStart(2, '0');
+    }
+
+    // 자막의 글자 크기를 조정하는 함수입니다.
+    function adjustFontSize(element, text) {
+        const maxFontSize = 16; // 최대 글자 크기
+        const minFontSize = 12; // 최소 글자 크기
+        const maxLength = 50; // 기준 텍스트 길이
+
+        // 텍스트 길이에 따라 글자 크기 조정
+        const textLength = text.length;
+        const fontSize = textLength > maxLength 
+            ? Math.max(minFontSize, maxFontSize - (textLength - maxLength) * 0.1) 
+            : maxFontSize;
+        element.style.fontSize = fontSize + 'px';
+    }
+
+    // 자막이 컨텐츠 영역을 벗어나는지 확인하는 함수입니다.
+    function checkSubtitleOverflow() {
+        const content = document.querySelector('.content');
+        if (subtitle.offsetHeight + subtitle.offsetTop > content.offsetHeight) {
+            subtitle.style.visibility = 'hidden'; // 자막이 컨텐츠 영역을 벗어나면 숨김
+        } else {
+            subtitle.style.visibility = 'visible'; // 자막이 컨텐츠 영역에 맞으면 보임
+        }
+    }
+
+    // 초기 자막 및 페이지 업데이트
+    updateSubtitle();  // 초기 상태에서 자막을 설정합니다.
+    updateCurrentPage();  // 초기 상태에서 페이지 번호를 설정합니다.
+});
+
+// Pause/Play toggle logic
+const controlButton = document.querySelector('.pause-play-toggle img');
+
+controlButton.addEventListener('click', () => {
+    if (controlButton.getAttribute('src') === 'Icon/pause.png') {
+        controlButton.setAttribute('src', 'Icon/play.png');
+        controlButton.setAttribute('alt', 'Play');
+    } else {
+        controlButton.setAttribute('src', 'Icon/pause.png');
+        controlButton.setAttribute('alt', 'Pause');
+    }
+});
+
+// Volume/Mute toggle logic
+const volumeIcon = document.getElementById('volume-icon');
+
+volumeIcon.addEventListener('click', () => {
+    if (volumeIcon.getAttribute('src') === 'Icon/volume.png') {
+        volumeIcon.setAttribute('src', 'Icon/mute.png');
+        volumeIcon.setAttribute('alt', 'Mute');
+    } else {
+        volumeIcon.setAttribute('src', 'Icon/volume.png');
+        volumeIcon.setAttribute('alt', 'Volume');
+    }
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		[InternetShortcut]
		URL=https://www.zum.com/?af=al_frzum