<style>
/* General Styles */
.control-layout, .controls {
margin-left: 14px;
margin-right: 20px;
display: flex;
justify-content: space-between;
}
.control {
display: flex;
flex-direction: column;
}
.time-display {
color: white;
margin-top: 5px;
font-size: 12px;
margin-right: 5px;
}
/* Progress bar styles */
.progress-bar-container, .progress-bar {
position: relative;
width: 100%;
height: 5px;
background-color: #ddd;
border-radius: 5px;
overflow: hidden;
}
.progress-bar {
width: 0%;
background-color: #F74242;
transition: width 0.1s;
}
/* Button styles */
.tap_button_style_b {
position: relative;
border: 1px solid white;
padding: 10px 20px;
color: white;
border-radius: 70px;
font-size: 22px;
background-color: rgba(240, 240, 240, 0);
cursor: pointer;
}
.tap_button_style_b:hover {
font-weight: bold;
color: black;
background-color: white;
}
.active_b {
font-weight: bold;
color: black;
background-color: white;
}
.button-container {
display: flex;
overflow-x: auto;
justify-content: center;
padding: 2px 13px;
white-space: nowrap;
cursor: grab;
}
.button-container:active {
cursor: grabbing;
}
.button-container button {
margin-right: 20px;
}
/* Scrollbar styles */
.button-container::-webkit-scrollbar {
height: 8px;
}
.button-container::-webkit-scrollbar-track {
background: rgba(240, 240, 240, 0);
}
.button-container::-webkit-scrollbar-thumb {
background: rgba(240, 240, 240, 0);
border-radius: 4px;
}
/* Toggle styles */
.toggleName {
font-weight: bold;
font-size: 25px;
}
.toggle_div {
margin: 20px 0;
border: 1px solid #cccccc;
border-radius: 6px;
background-color: #191919;
}
.toggleButton {
display: flex;
color: white;
align-items: center;
justify-content: flex-start;
padding: 12px 10px;
border-radius: 6px;
width: 100%;
font-size: 22px;
cursor: pointer;
background-color: #191919;
}
.icon {
width: 24px;
height: 24px;
margin-right: 10px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.open {
background-image: url('https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F22a9b552-82cf-4216-95f4-68a9687c0099%2Fri_arrow-up-s-line.png&blockId=f14e98f9-1393-4dca-b9d1-af99f98b1365');
}
.closed {
background-image: url('https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2Fe9df36da-2055-45d0-b292-40821c9fb9e7%2Fri_arrow-up-s-line-1.png&blockId=1073358f-d4bf-8084-9def-ded4f14a970f');
}
.toggleContent.collapsed {
display: none;
}
.toggleContent {
display: block;
padding: 10px 24px;
color: white;
border-radius: 6px;
font-size: 20px;
background-color: #191919;
}
/* Container and widget styles */
.container_001 {
list-style: none;
width: 90%;
display: flex;
flex-direction: column;
margin: 0 auto;
}
.tab_001 ul.title_001 {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
width: 100%;
}
.tab_001 ul.title_001 li {
flex: 1;
text-align: center;
}
.tab_001 ul.title_001 li a {
display: block;
padding: 12px 0;
font-size: 16px;
font-weight: 500;
color: #7062E1;
text-decoration: none;
}
.tab_001 ul.title_001 li a.show {
font-weight: bold;
color: #6135FF;
}
.tab_001 ul.title_001 li a.show::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 90%;
height: 3px;
background-color: #6135FF;
}
.panel_001 {
margin-top: 16px;
}
/* Media Queries */
@media screen and (max-width: 600px) {
.time-display {
font-size: 11px;
}
.tap_button_style_b, .toggleContent, .toggleButton {
font-size: 14px;
}
.button-container {
justify-content: left;
}
.tap_button_style_b {
font-size: 14px;
}
.icon {
width: 20px;
height: 20px;
}
.card-image {
width: 100%;
border-radius: 8px 8px 0 0;
}
.card-text {
color: white;
text-align: center;
margin: 10px;
font-size: 16px;
}
.no1_cont, .no2_cont, .no3_cont, .no4_cont, .no5_cont, .no6_cont, .no7_cont {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 800px) {
.progress-bar-container, .progress-bar {
width: 88%;
}
}
</style>
<script>
const iframe = document.getElementById('vimeo-player');
const player = new Vimeo.Player(iframe);
// 비디오 제어 버튼 설정
document.getElementById('play-btn').addEventListener('click', () => {
player.play().catch(error => console.error('재생 오류:', error));
});
document.getElementById('pause-btn').addEventListener('click', () => player.pause());
document.getElementById('stop-btn').addEventListener('click', () => {
player.pause().then(() => player.setCurrentTime(0));
});
document.getElementById('pip-btn').addEventListener('click', async () => {
if (document.pictureInPictureElement) await document.exitPictureInPicture();
else await player.requestPictureInPicture();
});
// 비디오 총 시간 및 프로그레스 바 업데이트
player.getDuration().then(duration => {
document.getElementById('total-time').textContent = formatTime(duration);
}).catch(error => console.error('전체 시간 가져오기 오류:', error));
player.on('timeupdate', data => {
const currentTime = data.seconds;
const duration = data.duration;
const progressPercent = (currentTime / duration) * 100;
document.getElementById('current-time').textContent = formatTime(currentTime);
document.getElementById('progress').style.width = `${progressPercent}%`;
});
// 클릭 위치로 이동 설정
document.getElementById('progress-bar').addEventListener('click', async (event) => {
const progressBar = event.currentTarget;
const clickPosition = event.offsetX;
const barWidth = progressBar.offsetWidth;
// 클릭 위치의 비율을 계산
const clickPercent = clickPosition / barWidth;
// 전체 시간 가져와서 해당 위치로 이동
const duration = await player.getDuration();
const newTime = duration * clickPercent;
player.setCurrentTime(newTime).catch(error => console.error('시간 설정 오류:', error));
});
// 시간 포맷팅 함수
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60).toString().padStart(2, '0');
return `${minutes}:${secs}`;
}
// F12, Ctrl+Shift+I, Ctrl+Shift+J, Ctrl+U, Command+Option+U 방지
document.addEventListener('keydown', function(event) {
if (
event.key === 'F12' ||
(event.ctrlKey && event.shiftKey && ['I', 'J'].includes(event.key)) ||
(event.ctrlKey && event.key === 'U') ||
(event.metaKey && event.altKey && event.key === 'U')
) {
event.preventDefault();
}
});
// 오른쪽 클릭 방지
document.addEventListener('contextmenu', function(event) {
event.preventDefault();
});
// 개발자 도구 열 때 경고 메시지
setInterval(() => {
if (window.devtools.open) {
alert('개발자 도구가 감지되었습니다. 허용되지 않은 접근입니다.');
window.location.reload();
}
}, 1000);
</script>
<script>
/*탭메뉴*/
$('.tab_001').each(function(i) {
var oTab = $(this);
var tabIndex = $(this).find('.show').attr('id').match(/\d+$/);
$(this).find('.panel_001').find('#content-' + tabIndex[0]).show();
$(this).find('.title_001 li a').click(function() {
/*선택색인*/
var tabIndex = $(this).attr('id').match(/\d+$/);
/*타이틀*/
oTab.find('.title_001 li a').removeClass('show');
$(this).addClass('show');
/*패널*/
oTab.find('.panel_001 li').hide();
oTab.find('.panel_001').find('#content-' + tabIndex[0]).show();
return false;
});
});
</script>
<script>
document.querySelectorAll('.toggleButton').forEach(button => {
button.addEventListener('click', function() {
const content = this.nextElementSibling; // 다음 형제로 토글 내용 찾기
const icon = this.querySelector('.icon');
const isCollapsed = content.classList.contains('collapsed');
// Toggle collapsed class for content
content.classList.toggle('collapsed', !isCollapsed);
// Toggle aria-expanded attribute
this.parentElement.setAttribute('aria-expanded', !isCollapsed);
// Toggle icon classes
icon.classList.toggle('closed', !isCollapsed);
icon.classList.toggle('open', isCollapsed);
});
});
</script>
<script>
function moveMap(lat, lng, zoom, button, containerClass) {
var iframe = document.getElementById('mapFrame');
iframe.src = `https://www.google.com/maps/d/embed?mid=1YtQD3z9KCBG19v5e7wt_AAA6dKIZwsw&ehbc&ll=${lat},${lng}&z=${zoom}`;
var buttons = document.querySelectorAll('.tap_button_style_b');
buttons.forEach(btn => {
btn.classList.remove('active_b');
});
button.classList.add('active_b');
// 모든 ._cont div 숨기기
var allConts = document.querySelectorAll('[class$="_cont"]');
allConts.forEach(cont => {
cont.style.display = 'none';
});
// 클릭한 버튼에 해당하는 ._cont div 보이기
document.querySelector(`.${containerClass}`).style.display = 'block';
}
const container = document.getElementById('buttonContainer');
let isDown = false;
let startX;
let scrollLeft;
container.addEventListener('mousedown', (e) => {
isDown = true;
startX = e.pageX - container.offsetLeft;
scrollLeft = container.scrollLeft;
container.style.cursor = 'grabbing';
});
container.addEventListener('mouseleave', () => {
isDown = false;
container.style.cursor = 'grab';
});
container.addEventListener('mouseup', () => {
isDown = false;
container.style.cursor = 'grab';
});
container.addEventListener('mousemove', (e) => {
if (!isDown) return;
e.preventDefault();
const x = e.pageX - container.offsetLeft;
const walk = (x - startX) * 2; // 스크롤 속도 조정
container.scrollLeft = scrollLeft - walk;
});
</script>
<script>
document.querySelectorAll('.toggleButton').forEach(button => {
button.addEventListener('click', function() {
const content = this.nextElementSibling; // 다음 형제로 토글 내용 찾기
const icon = this.querySelector('.icon');
const isCollapsed = content.classList.contains('collapsed');
// Toggle collapsed class for content
content.classList.toggle('collapsed', !isCollapsed);
// Toggle aria-expanded attribute
this.parentElement.setAttribute('aria-expanded', !isCollapsed);
// Toggle icon classes
icon.classList.toggle('closed', !isCollapsed);
icon.classList.toggle('open', isCollapsed);
});
});
</script>
HTML
복사
