diff --git a/PBCVeiw/Icon/back.png b/PBCVeiw/Icon/back.png new file mode 100644 index 0000000..455e45e Binary files /dev/null and b/PBCVeiw/Icon/back.png differ diff --git a/PBCVeiw/Icon/backward.png b/PBCVeiw/Icon/backward.png new file mode 100644 index 0000000..6c64257 Binary files /dev/null and b/PBCVeiw/Icon/backward.png differ diff --git a/PBCVeiw/Icon/bookmark.png b/PBCVeiw/Icon/bookmark.png new file mode 100644 index 0000000..00d349a Binary files /dev/null and b/PBCVeiw/Icon/bookmark.png differ diff --git a/PBCVeiw/Icon/forward.png b/PBCVeiw/Icon/forward.png new file mode 100644 index 0000000..0b0f14b Binary files /dev/null and b/PBCVeiw/Icon/forward.png differ diff --git a/PBCVeiw/Icon/home.png b/PBCVeiw/Icon/home.png new file mode 100644 index 0000000..c40c6b2 Binary files /dev/null and b/PBCVeiw/Icon/home.png differ diff --git a/PBCVeiw/Icon/mute.png b/PBCVeiw/Icon/mute.png new file mode 100644 index 0000000..62f2420 Binary files /dev/null and b/PBCVeiw/Icon/mute.png differ diff --git a/PBCVeiw/Icon/pause.png b/PBCVeiw/Icon/pause.png new file mode 100644 index 0000000..d1fb5ee Binary files /dev/null and b/PBCVeiw/Icon/pause.png differ diff --git a/PBCVeiw/Icon/play.png b/PBCVeiw/Icon/play.png new file mode 100644 index 0000000..d3da0b7 Binary files /dev/null and b/PBCVeiw/Icon/play.png differ diff --git a/PBCVeiw/Icon/search.png b/PBCVeiw/Icon/search.png new file mode 100644 index 0000000..9402e3e Binary files /dev/null and b/PBCVeiw/Icon/search.png differ diff --git a/PBCVeiw/Icon/volume.png b/PBCVeiw/Icon/volume.png new file mode 100644 index 0000000..b915464 Binary files /dev/null and b/PBCVeiw/Icon/volume.png differ diff --git a/PBCVeiw/Image/dog.jpg b/PBCVeiw/Image/dog.jpg new file mode 100644 index 0000000..9c0205d Binary files /dev/null and b/PBCVeiw/Image/dog.jpg differ diff --git a/PBCVeiw/Image/fox.jpg b/PBCVeiw/Image/fox.jpg new file mode 100644 index 0000000..7f02d9e Binary files /dev/null and b/PBCVeiw/Image/fox.jpg differ diff --git a/PBCVeiw/Image/testpicture.jpg b/PBCVeiw/Image/testpicture.jpg new file mode 100644 index 0000000..5bb927f Binary files /dev/null and b/PBCVeiw/Image/testpicture.jpg differ diff --git a/PBCVeiw/Zum Internet.url b/PBCVeiw/Zum Internet.url new file mode 100644 index 0000000..980e15e --- /dev/null +++ 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 new file mode 100644 index 0000000..5898c4a Binary files /dev/null and b/PBCVeiw/img/left.png differ diff --git a/PBCVeiw/img/right.png b/PBCVeiw/img/right.png new file mode 100644 index 0000000..872af8e Binary files /dev/null and b/PBCVeiw/img/right.png differ diff --git a/PBCVeiw/img/slide.jpg b/PBCVeiw/img/slide.jpg new file mode 100644 index 0000000..184046e Binary files /dev/null and b/PBCVeiw/img/slide.jpg differ diff --git a/PBCVeiw/img/slide01.jpg b/PBCVeiw/img/slide01.jpg new file mode 100644 index 0000000..ca8f6d5 Binary files /dev/null and b/PBCVeiw/img/slide01.jpg differ diff --git a/PBCVeiw/img/slide02.jpg b/PBCVeiw/img/slide02.jpg new file mode 100644 index 0000000..41b4b51 Binary files /dev/null and b/PBCVeiw/img/slide02.jpg differ diff --git a/PBCVeiw/img/slide03.jpg b/PBCVeiw/img/slide03.jpg new file mode 100644 index 0000000..2ec0a75 Binary files /dev/null and b/PBCVeiw/img/slide03.jpg differ diff --git a/PBCVeiw/index.html b/PBCVeiw/index.html new file mode 100644 index 0000000..0d99493 --- /dev/null +++ b/PBCVeiw/index.html @@ -0,0 +1,101 @@ + + + + + + PictureBook Curator + + + + +
+ +
+ + + +
+ +
+ +
+ + + + +
+ +
+
+ +
첫번째 슬라이드 입니다. 이 문장은 자막이 길어질 때 어떻게 보이는지 테스트하는 예시 문장입니다.
+
+ + +
+ + + +
+ + + +
+ + +
+ + / + 3 +
+ +
+ + Volume + + +
+ +
+
+ + diff --git a/PBCVeiw/script.js b/PBCVeiw/script.js new file mode 100644 index 0000000..cc0cdd6 --- /dev/null +++ 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'); + } +}); \ No newline at end of file diff --git a/PBCVeiw/styles.css b/PBCVeiw/styles.css new file mode 100644 index 0000000..8a302af --- /dev/null +++ b/PBCVeiw/styles.css @@ -0,0 +1,293 @@ +/* 브라우저 기본 마진과 패딩 리셋 */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; /* 모든 요소에 박스 모델 적용 */ +} + +body { + height: 100vh; /* 화면 전체 높이 */ + display: flex; /* 플렉스 박스 레이아웃 사용 */ + justify-content: center; /* 수평 중앙 정렬 */ + align-items: center; /* 수직 중앙 정렬 */ + font-family: Arial, sans-serif; /* 폰트 설정 */ + background-color: #f0f0f0; /* 배경색 설정 */ +} + +.container { + border: 2px solid #000; /* 검정색 테두리 */ + width: 80%; /* 너비 80% */ + height: 80%; /* 높이 80% */ + display: flex; + flex-direction: column; /* 세로 방향 정렬 */ + justify-content: space-between; /* 공간을 균등하게 분배 */ + align-items: center; /* 수평 중앙 정렬 */ + background-color: #fff; /* 배경색 흰색 */ +} + +.header, .footer { + display: flex; + justify-content: space-between; /* 양 끝에 배치 */ + align-items: center; /* 수직 중앙 정렬 */ + width: 100%; /* 전체 너비 */ + padding: 10px; /* 패딩 설정 */ +} + +.header { + border-bottom: 2px solid #000; /* 하단 테두리 */ +} + +.footer { + border-top: 2px solid #000; /* 상단 테두리 */ +} + +.content { + display: flex; + justify-content: center; /* 수평 중앙 정렬 */ + align-items: center; /* 수직 중앙 정렬 */ + flex-direction: column; /* 세로 방향 정렬 */ + width: 80%; /* 전체 너비 */ + height: 80%; /* 전체 높이 */ + position: relative; /* 상대 위치 */ + overflow: hidden; /* 컨텐츠 영역을 벗어나지 않도록 함 */ +} + +/* 슬라이드 스타일 */ +.section input[id*="slide"] { + display: none; +} +/* 이미지 크기 변경 */ +.slidewrap { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.section .slidewrap { + max-width: 100%; + margin: 0 auto; + overflow: hidden; +} + +.section .slidelist { + white-space: nowrap; + font-size: 0; +} + +.section .slidelist > li { + display: inline-block; + vertical-align: middle; + width: 100%; + height: 100%; + transition: all 0.5s; +} + +.section .slidelist > li > a { + display: block; + position: relative; + overflow: hidden; /* 화살표 화면 밖으로 나가면 안 보이도록 overflow로 가림처리 */ +} + +.section .slidelist > li > a img { + width: 100%; + height: 100%; + object-fit: cover; /* 이미지가 컨테이너의 너비와 높이에 맞춰 축소 */ + +} + +/* 좌우로 넘기는 LABEL버튼에 대한 스타일 */ +.section .slidelist label { + position: absolute; + z-index: 1; + top: 50%; + transform: translateY(-50%); + padding: 20px; + cursor: pointer; + width: 50px; /* 화살표 크기를 적당히 설정 */ + height: 50px; /* 동일한 크기로 설정하여 원형을 유지 */ + background: rgba(0, 0, 0, 0.3); /* 초기 배경을 반투명 검정색으로 설정 */ + border-radius: 50%; /* 원형 모양으로 만듦 */ + display: flex; + justify-content: center; + align-items: center; + /* 화살표 이미지가 원래 크기만큼 노출되지 않도록 크기 설정 */ + background-size: contain; + background-repeat: no-repeat; +} + +.section .slidelist .left { + left: 10px; /* 화면 왼쪽 가장자리에서 적당히 떨어진 위치 */ + background-image: url('./img/left.png'); /* 좌측 화살표 이미지 설정 */ +} + +.section .slidelist .right { + right: 10px; /* 화면 오른쪽 가장자리에서 적당히 떨어진 위치 */ + background-image: url('./img/right.png'); /* 우측 화살표 이미지 설정 */ +} + +/* INPUT이 체크되면 변화값이 li까지 전달되는 스타일 */ +.section input[id="slide01"]:checked ~ .slidewrap .slidelist > li { + transform: translateX(0%); +} + +.section input[id="slide02"]:checked ~ .slidewrap .slidelist > li { + transform: translateX(-100%); +} + +.section input[id="slide03"]:checked ~ .slidewrap .slidelist > li { + transform: translateX(-200%); +} + +/* INPUT이 체크되면 변화값이 LEFT,RIGHT에 전달되는 스타일 */ +.section input[id="slide01"]:checked ~ .slidewrap li:nth-child(1) .left { + left: 0px; + transition: all 0.35s ease 0.5s; +} + +.section input[id="slide01"]:checked ~ .slidewrap li:nth-child(1) .right { + right: 0px; + transition: all 0.35s ease 0.5s; +} + +.section input[id="slide02"]:checked ~ .slidewrap li:nth-child(2) .left { + left: 0px; + transition: all 0.35s ease 0.5s; +} + +.section input[id="slide02"]:checked ~ .slidewrap li:nth-child(2) .right { + right: 0px; + transition: all 0.35s ease 0.5s; +} + +.section input[id="slide03"]:checked ~ .slidewrap li:nth-child(3) .left { + left: 0px; + transition: all 0.35s ease 0.5s; +} + +.section input[id="slide03"]:checked ~ .slidewrap li:nth-child(3) .right { + right: 0px; + transition: all 0.35s ease 0.5s; +} + +/* 버튼 크기 및 제어 */ +button { + border: none; /* 테두리 제거 */ + background-color: transparent; /* 배경색 투명 */ + cursor: pointer; /* 커서 모양 변경 */ + margin: 0; /* 여백 설정 */ + font-size: 25px; + transition: transform 0.5s; /* 변환 시 애니메이션 적용 */ +} + + +.back-button, .bookmark-button, .action-button { + background: none; /* 배경 없음 */ + border: none; /* 테두리 없음 */ + font-size: 18px; /* 폰트 크기 */ + cursor: pointer; /* 커서 모양 변경 */ + display: flex; /* 플렉스 박스 사용 */ + align-items: center; /* 수직 중앙 정렬 */ +} + +.back-button img, .bookmark-button img, .action-button img { + width: 24px; /* 이미지 너비 */ + height: 24px; /* 이미지 높이 */ +} + +.title-input { + border: 1px solid #ccc; /* 테두리 색상 */ + border-radius: 4px; /* 테두리 둥글게 */ + padding: 5px; /* 패딩 설정 */ + font-size: 18px; /* 폰트 크기 */ + text-align: center; /* 텍스트 중앙 정렬 */ + width: 60%; /* 너비 설정 */ +} + +.controls { + display: flex; /* 플렉스 박스 사용 */ + justify-content: center; /* 중앙 정렬 */ + align-items: center; /* 수직 중앙 정렬 */ + flex-grow: 1; /* 남는 공간 차지 */ +} + +.control-button { + margin: 0 10px; /* 좌우 여백 설정 */ + background: none; /* 배경 없음 */ + border: none; /* 테두리 없음 */ + font-size: 18px; /* 폰트 크기 */ + cursor: pointer; /* 커서 모양 변경 */ +} + +.control-button img.icon { + width: 24px; /* 아이콘 너비 */ + height: 24px; /* 아이콘 높이 */ + vertical-align: middle; /* 수직 중앙 정렬 */ +} + +.volume-control { + display: flex; /* 플렉스 박스 사용 */ + align-items: center; /* 수직 중앙 정렬 */ +} + +.volume-icon { + margin-right: 10px; /* 오른쪽 여백 */ +} + +.volume-icon img { + width: 24px; /* 아이콘 너비 */ + height: 24px; /* 아이콘 높이 */ + cursor: pointer; /* 커서 모양 변경 */ +} + +.volume-control input { + cursor: pointer; /* 커서 모양 변경 */ +} + +/* 자막 스타일 추가 */ +.subtitle { + border: 2px solid black; + position: absolute; + bottom: 10px; /* 하단에서 약간 위로 띄움 */ + padding: 5px 10px; + background: rgba(255, 255, 255, 1); /* 반투명 배경 */ + color: black; /* 글자 색상 */ + font-size: 1rem; + text-align: center; + border-radius: 5px; + font-weight: bold; /* 글자 두껍게 */ + white-space: normal; /* 줄 바꿈을 허용 */ + word-wrap: break-word; /* 긴 단어를 줄 바꿈 */ + max-width: 90%; /* 최대 너비 설정 */ + min-width: 100px; /* 최소 너비 설정 */ + transition: all 0.3s ease-in-out; /* 부드러운 애니메이션 */ + display: inline-block; /* 텍스트 길이에 맞춰 배경 크기 조정 */ +} + +/* 자막의 글자 크기를 조절하는 스타일 추가 */ +.subtitle.adjust-font { + font-size: calc(1rem + 0.5vw); +} + +.page-info { + display: flex; + align-items: center; + font-size: 16px; + color: black; + margin: 0 30px; /* 좌우 여백을 추가하여 가운데 배치 */ +} + +.page-info input[type="number"] { + width: 60px; + margin-right: 5px; + text-align: center; + border: 1px solid #ccc; + border-radius: 4px; + padding: 5px; + font-size: 16px; +} + diff --git a/README.md b/README.md deleted file mode 100644 index 00aab77..0000000 --- a/README.md +++ /dev/null @@ -1 +0,0 @@ -# PictureBook_Curator \ No newline at end of file