GWNU-Capstone-Design · BeautifulMaple · Apr 26, 2024 · May 5, 2024 · May 5, 2024 · May 5, 2024
diff --git a/Image_Comment.py b/Image_Comment.py
diff --git a/Image_List/photo_keywords_MainKor300.csv b/Image_List/photo_keywords_MainKor300.csv
diff --git a/README.md b/README.md
@@ -1 +1,6 @@
-# PictureBook_Curator
+# PictureBook_Curator
+
+## 구글 드라이브 파일 공유
+Image_List -> CSV파일 전용 사진
+
+https://drive.google.com/file/d/1i6p3xCX6ltbfVlyT-hVHOIlU9ymbJHOA/view?usp=drive_link
diff --git a/image_View/Icon/back.png b/image_View/Icon/back.png
diff --git a/image_View/Icon/backward.png b/image_View/Icon/backward.png
diff --git a/image_View/Icon/bookmark.png b/image_View/Icon/bookmark.png
diff --git a/image_View/Icon/brightness.png b/image_View/Icon/brightness.png
diff --git a/image_View/Icon/forward.png b/image_View/Icon/forward.png
diff --git a/image_View/Icon/fox.jpg b/image_View/Icon/fox.jpg
diff --git a/image_View/Icon/home.png b/image_View/Icon/home.png
diff --git a/image_View/Icon/left.png b/image_View/Icon/left.png
diff --git a/image_View/Icon/mute.png b/image_View/Icon/mute.png
diff --git a/image_View/Icon/pause.png b/image_View/Icon/pause.png
diff --git a/image_View/Icon/pin.png b/image_View/Icon/pin.png
diff --git a/image_View/Icon/play.png b/image_View/Icon/play.png
diff --git a/image_View/Icon/restore.png b/image_View/Icon/restore.png
diff --git a/image_View/Icon/right.png b/image_View/Icon/right.png
diff --git a/image_View/Icon/search.png b/image_View/Icon/search.png
diff --git a/image_View/Icon/settings.png b/image_View/Icon/settings.png
diff --git a/image_View/Icon/testpicture.jpg b/image_View/Icon/testpicture.jpg
diff --git a/image_View/Icon/voice.png b/image_View/Icon/voice.png
diff --git a/image_View/Icon/volume.png b/image_View/Icon/volume.png
diff --git a/image_View/Image/dog.jpg b/image_View/Image/dog.jpg
diff --git a/image_View/Image/fox.jpg b/image_View/Image/fox.jpg
diff --git a/image_View/Image/testpicture.jpg b/image_View/Image/testpicture.jpg
diff --git a/image_View/img/left.png b/image_View/img/left.png
diff --git a/image_View/img/right.png b/image_View/img/right.png
diff --git a/image_View/index.html b/image_View/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/image_View/script.js b/image_View/script.js
@@ -0,0 +1,104 @@
+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';
+    }
+
+    // 초기 자막 및 페이지 업데이트
+    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');
+    }
+});