런던 레이아웃
<style>
#control{
justify-content: center;
align-items: center;
}
#doz_footer_wrap{
display:none;}
.controls{
margin-left: 14px;
margin-right: 20px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
#play-btn, #pause-btn, #stop-btn, #pip-btn{
background-color: black;
padding: 7px 0 0 0;
}
.split-screen {
display: flex;
flex-wrap: nowrap;
width: 100%;
height: 100vh;
}
.left-side {
color: black;
background-color: black !important;
flex: 1.5;
display: flex;
align-items: center;
background-size: cover;
justify-content: center;
position: relative; /* 버튼의 위치 기준이 됩니다 */
}
.right-side {
overflow-y: auto; /* 스크롤 가능하게 설정 */
flex: 0.5;
background-color: white;
display: flex;
flex-direction: column; /* Stack widgets vertically */
position: relative; /* To position buttons */
}
.embed-container {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
}
.desktop_shorts {
display: flex;
}
.mobile_shorts {
display: none;
}
.container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 100%;
margin: 0 auto;
gap: 10px;
}
.widgetshorts {
display: flex;
flex-direction: column;
}
.widgetshorts_cont {
display: flex;
align-items: center;
padding: 10px;
border-radius: 5px;
}
.widget-image {
width: 120px;
height: 80px;
border-radius: 4px;
margin-right: 10px;
}
.widget-text {
margin: 0;
color: #black;
}
/* X 버튼 스타일 */
.back-button {
position: absolute;
top: 46px;
left: 30px;
background-size: 60%; /* 이미지 크기를 60%로 조정 */
background-position: center; /* 이미지를 가운데에 배치 */
background-repeat: no-repeat; /* 이미지를 반복하지 않음 */
background-color: rgba(0, 0, 0, 0.4);
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%2F4279efb0-09e6-426a-820c-f7ebcea4c40d%2Fcil_x.png&blockId=1073358f-d4bf-80cd-ac70-ce00fe946e84");
color: #fff;
padding: 16px 16px 16px 17px;
border-radius: 50%;
font-size: 18px;
cursor: pointer;
z-index: 10;
width: 40px;
height: 40px;
transition: all 0.3s ease; /* 부드러운 애니메이션 효과 추가 */
}
.big{
font-size: 16px;
font-weight: bold;
}
.middle{
font-size: 13px;
font-weight: normal;
}
.middle_video_txt{
margin: 30px 0 10px 20px;
font-size: 24px;
font-weight: bold;
}
.widgetshorts_cont{
cursor: pointer !important;
}
.icon_btn{
background-color: black;
}
.video-container {
margin-bottom: 20px;
}
.controls_layout{
display: flex;
width: 100%;
flex-direction: column;
}
.controls {
display: flex;
gap: 10px;
}
.layout_vimeo{
position: relative;
width: 100%; /* 비디오의 너비 */
height: 76%; /* 비디오의 높이 */
margin: 0 auto; /* 중앙 정렬 */
padding: 0;
}
.overlay{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2; /* figcaption의 z-index 설정 */
}
iframe{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: none; /* 테두리 없애기 */
z-index: 1; /* iframe의 z-index 설정 */
}
#control {
display: flex;
width: 100%;
align-items: center;
font-size: 16px;
text-align: center;
}
#time-display {
color: white;
font-size: 12px;
margin-right: 5px;
}
#progress-bar {
position: relative;
width: 90%;
height: 5px;
background-color: #ddd;
border-radius: 5px;
overflow: hidden;
}
#progress {
width: 0%;
height: 100%;
background-color: #F74242;
transition: width 0.1s;
}
@media screen and (max-width: 800px) {
#progress-bar {
position: relative;
width: 88%;
height: 5px;
background-color: #ddd;
border-radius: 5px;
overflow: hidden;
}
#progress {
width: 0%;
height: 100%;
background-color: #F74242;
transition: width 0.1s;
}
#control{
justify-content: center;
align-items: center;
}
.controls{
margin-left: 14px;
margin-right: 20px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
@media screen and (max-width: 600px) {
#time-display{
font-size: 11px;
}
#progress-bar {
position: relative;
width: 81%;
height: 5px;
background-color: #ddd;
border-radius: 5px;
overflow: hidden;
}
}
@media screen and (max-width: 1000px) {
.widget-image {
width: 100px;
height: 70px;
border-radius: 4px;
margin-right: 10px;
}
.big{
font-size: 15px;
font-weight: bold;
}
.middle{
font-size: 12px;
font-weight: normal;
}
}
@media screen and (max-width: 800px) {
#time-display{
font-size: 11px;
}
.inline-section-wrap .fixed_transform{
display:none;
}
/* 모바일 상단 고정 헤더 스타일 */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
background-color: rgba(0, 0, 0, 1);
color: white;
display: flex;
align-items: center;
justify-content: left;
z-index: 20;
font-size: 18px;
}
.split-screen{
background-color: black;
}
/* 기존 스타일 유지 */
.mobile_shorts .right-side {
height: 50vh; /* 오른쪽 콘텐츠 전체 높이 */
overflow-y: auto; /* 스크롤 가능하게 설정 */
}
.widget-container {
height: calc(100% - 40px); /* 하단의 네비게이션 버튼 높이를 빼줍니다 */
overflow-y: auto; /* 위젯 컨테이너에 스크롤 추가 */
}
/* 전체 화면을 세로로 나눔 */
.split-screen {
overflow: hidden; /* 전체 스크롤 방지 */
display: flex;
flex-direction: column; /* 세로로 정렬 */
width: 100%;
height: 85vh; /* 화면 전체 높이를 고정 */
}
/* 비디오 영역은 화면의 40%를 차지 */
.left-side {
position: fixed; /* 고정 위치 */
flex: 0.5; /* 왼쪽 비율 40% */
width: 100%;
padding-bottom: 60px;
height: 50%; /* 비디오 높이를 40%로 조정 */
background-color: black;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
position: relative;
top: 50px;
left: 0;
right: 0;
}
/* 오른쪽 컨텐츠는 화면의 60%를 차지 */
.right-side {
position: fixed; /* 고정 위치 */
flex: 0.5; /* 오른쪽 비율 60% */
width: 100%;
border-radius: 20px 20px 0 0;
height: 50%; /* 카드 리스트 영역 높이를 60%로 고정 */
background-color: white;
display: flex;
flex-direction: column;
position: relative;
overflow-y: auto; /* 스크롤 가능하게 설정 */
}
.embed-container iframe {
width: 100%;
height: 100%; /* 비디오가 left-side를 완전히 채움 */
}
/* .nav-button은 모바일에서는 숨기기 */
.nav-button {
display: none;
}
/* 모바일 스크롤 설정 */
.mobile_shorts .container {
height: 100%; /* 컨텐츠 영역이 부모 영역을 채우도록 설정 */
overflow-y: auto; /* 컨텐츠가 넘칠 경우 스크롤 */
}
#doz_footer_wrap{
display:none;
}
.middle_video_txt{
margin: 30px 0 10px 14px;
font-size: 16px;
font-weight: bold;
}
#inline_header_mobile{
display:none !important;
}
/* X 버튼 스타일 */
.back-button {
display:none;
}
</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>
$(document).ready(function(){
//마우스 우측 버튼 사용 막기.
if (window.addEventListener) {
window.addEventListener('contextmenu', function(e) { try { if (typeof e != 'undefined') { e.preventDefault(); return false; } else { return false; }} catch(e) {} } , false);
} else {
window.attachEvent('oncontextmenu', function(e) { try { if (typeof e != 'undefined') { e.preventDefault(); return false; } else { return false; }} catch(e) {} } );
}
var handlemouseEvent = function(e) {
try {
if (typeof e == 'undefined') {
if (window.event.button && window.event.button == "2") {
return false;
}
} else if ((e.which && e.which == 3) || (e.button && e.button == 2)) {
e.preventDefault();
return false;
}
} catch (e) {}
};
window.onkeydown = handlemouseEvent;
window.onkeyup = handlemouseEvent;
//로그아웃 시켜버릴 임시 form 생성
var logOutFrom = document.createElement('form');
logOutFrom.name= "logOutFrom";
logOutFrom.id= "logOutFrom";
logOutFrom.action = ctx+"/logout";
logOutFrom.method= "POST";
var input = document.createElement('input');
input.type = 'hidden';
input.name = '${_csrf.parameterName}';
input.value = '${_csrf.token}';
logOutFrom.appendChild(input);
document.body.appendChild(logOutFrom);
//개발자도구 실행 감지.
console.log(Object.defineProperties(new Error, {
toString: {value() {(new Error).stack.includes('toString@') && alert('Safari devtools')}},
message: {
get() {
//개발자도구를 감지하면 그냥 홬 로갓 키겨 버리자.
logOutFrom.submit()
}
},
}));
});
// Detect Key Shortcuts f12 및 특수키 조합 막기
window.addEventListener('keydown', function(e) {
if (
// CMD + Alt + I (Chrome, Firefox, Safari)
e.metaKey == true && e.altKey == true && e.keyCode == 73 ||
// CMD + Alt + J (Chrome)
e.metaKey == true && e.altKey == true && e.keyCode == 74 ||
// CMD + Alt + C (Chrome)
e.metaKey == true && e.altKey == true && e.keyCode == 67 ||
// CMD + Shift + C (Chrome)
e.metaKey == true && e.shiftKey == true && e.keyCode == 67 ||
// Ctrl + Shift + I (Chrome, Firefox, Safari, Edge)
e.ctrlKey == true && e.shiftKey == true && e.keyCode == 73 ||
// Ctrl + Shift + J (Chrome, Edge)
e.ctrlKey == true && e.shiftKey == true && e.keyCode == 74 ||
// Ctrl + Shift + C (Chrome, Edge)
e.ctrlKey == true && e.shiftKey == true && e.keyCode == 67 ||
// F12 (Chome, Firefox, Edge)
e.keyCode == 123 ||
// CMD + Alt + U, Ctrl + U (View source: Chrome, Firefox, Safari, Edge)
e.metaKey == true && e.altKey == true && e.keyCode == 85 ||
e.ctrlKey == true && e.keyCode == 85
) {
e.preventDefault();
return false;
}
});
</script>
<!---->
<script>
function goBack() {
window.location.href = "http://tripickpl.co.kr/106";
}
</script>
<!--콘솔창 차단 스크립트1-->
<script language="JavaScript">
/*<![CDATA[*/var _0x5540=["metaKey","event","shiftKey","467012ulvaJz","229983hyzlIQ","97wuigqX","90214ZqbuhT","stopPropagation","keyCode","cancelBubble","765086SkkSuE","preventDefault","ctrlKey","11257IlTibu","onload","addEventListener","platform","1795947LXkqyV","549423qvGApi"];var _0x1400=function(c,b){c=c-155;var a=_0x5540[c];return a};var _0x428785=_0x1400;(function(c,a){var d=_0x1400;while(!![]){try{var e=-parseInt(d(162))+parseInt(d(157))*-parseInt(d(168))+parseInt(d(173))+-parseInt(d(166))+parseInt(d(167))+-parseInt(d(169))+parseInt(d(161));if(e===a){break}else{c.push(c.shift())}}catch(b){c.push(c.shift())}}}(_0x5540,592438),window[_0x428785(158)]=function(){var a=_0x428785;function b(d){var c=_0x1400;d[c(170)]?d[c(170)]():window[c(164)]&&(window[c(164)][c(172)]=!0),d.preventDefault()}document[a(159)]("contextmenu",function(c){var d=a;c[d(155)]()},!1),document.addEventListener("keydown",function(c){var d=a;c.ctrlKey&&c[d(165)]&&73==c.keyCode&&b(c),c[d(156)]&&c[d(165)]&&67==c[d(171)]&&b(c),c[d(156)]&&c.shiftKey&&74==c.keyCode&&b(c),83==c.keyCode&&(navigator[d(160)]["match"]("Mac")?c[d(163)]:c[d(156)])&&b(c),c[d(156)]&&85==c.keyCode&&b(c),123==event[d(171)]&&b(c)},!1)});/*]]>*/
</script>
<!--콘솔창 차단 스크립트1 끝-->
</head>
<body>
<!-- "x" 버튼 추가 -->
<div class="header" onclick="goBack()" style="cursor: pointer;">
<img src="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%2F290389e7-9aca-4c4d-86fd-dd90b123dcf5%2Fleft.png&blockId=10d3358f-d4bf-8090-a554-deda65ccf1c0" alt="Back" style="width: 30px; height: 30px; vertical-align: middle;">
</div>
</div>
<div class="back-button" onclick="goBack()"></div>
<div class="desktop_shorts split-screen">
<div class="left-side">
<div class="embed-container">
<!--이름 이름 이름 이름 이름 이름 이름 ? -->
<body oncontextmenu="return false;">
<div class="layout_vimeo">
<div class="overlay"></div>
<div class="video-container">
<iframe id="vimeo-player"
src="https://player.vimeo.com/video/964110010?title=0&byline=0&portrait=0&badge=0&autopause=0&autoplay=0&app_id=58479"
width="640"
height="360"
frameborder="0"
allow="autoplay; fullscreen"
allowfullscreen>
</iframe>
</div>
</div>
<div id="control">
<div id="time-display">
<span id="current-time">0:00</span> / <span id="total-time">0:00</span>
</div>
<div id="progress-bar">
<div id="progress"></div>
</div> </div>
<div class="controls_layout">
<div class="controls">
<div class="controls_1">
<button id="play-btn">
<img src="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%2F2fb4134f-52c7-46ba-88d5-e94a975e1cb9%2Ficonoir_play-solid.png&blockId=12e3358f-d4bf-801c-aa44-f5b326c4b419" style="background-color: black; width:24px; height: 24px; "alt="설명 텍스트">
</button>
<button id="pause-btn"><img src="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%2Ff9babd1b-f4ce-492e-aea0-25e78b8ca609%2Flets-icons_stop-fill.png&blockId=12e3358f-d4bf-802a-a939-c479daef9e85"style="background-color: black; width:24px; height: 24px;" alt="설명 텍스트"></button>
<button id="stop-btn"><img src="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%2F6b28a931-0d2e-4b6b-9960-f21ee35503b3%2Fion_stop.png&blockId=12f3358f-d4bf-8068-8194-c72076475304" style="background-color: black; width:24px; height: 24px;"alt="설명 텍스트"></button>
</div>
<div class="controls_2">
<button id="pip-btn"><img src="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%2F29db97e2-be15-4ef8-8a5c-d16d7aca3c15%2FFrame_48097712.png&blockId=12f3358f-d4bf-8064-94ec-f5fcccbb96e4" style="background-color: black; width:24px; height: 24px;" alt="설명 텍스트"></button></div>
</div>
</div>
</div>
</div>
HTML
복사
