Skip to content

Commit

Permalink
0922 작업 2
Browse files Browse the repository at this point in the history
- 수아 개인캠 30 분이상 영상으로 재업 및 재연결
- index에 설명 팝업 쿠키랑 같이 넣기 완료
- 사이트 공유 설명 문구 변경 완료
- 설명버튼 설명 이미지 슬라이드 제작중
  • Loading branch information
fold6 committed Sep 22, 2024
1 parent 0d67bdd commit 963563a
Show file tree
Hide file tree
Showing 16 changed files with 86,812 additions and 81,789 deletions.
20 changes: 17 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,17 @@
# DC_DreamRoom
- 드림캐쳐와 함께 작업하는 사이트
- 고용량 영상으로 인해, 모든 파일 업로드 하지않고 (다른 서버에서 따로 작업중), 현재는 단순 기록용으로 깃헙에 업로드함 (index.html 기록)
# DC_DreamRoom (Fan made)

드림캐쳐가 다녀간곳을 카카오 맵에서 확인하고, 해당장소에서의 촬영된 콘텐츠를 볼 수 있는 '드림캐쳐 투어' 맵 페이지 (디자인 및 퍼블리싱)<br>
(A 'Dreamcatcher Tour' map page where you can check the places Dreamcatcher has visited on Kakao Map and view the content filmed at those locations)<br><br>
📌[홈페이지 바로가기](https://fold6.github.io/DC_DreamRoom/index.html)<br>
<br>
<br>

## 기능 및 특징
- 드림캐쳐와 함께 ASMR을 들으며 작업하거나 휴식을 취할 수 있는 '드림 룸(Dream Room)'
- 드림캐쳐 본사를 기준으로 펼쳐지는 '드림캐쳐 투어'
- 장소이름을 클릭하여 영업시간, 연락처 등의 '장소정보'를 열람
- 컨텐츠란을 클릭하여 유튜브영상 등의 '촬영된 컨텐츠'를 열람
- 멤버 별 방문장소 필터링 버튼으로 원하는 장소만 표기가능
- 첫 진입시 가이드팝업을 통한 설명제공 (제이쿼리 쿠키를 사용, 재진입시 헤더오른쪽의 가이드버튼을 눌러야만 표기)
- 오른쪽 하단 '방명록' 바로가기 아이콘을 통해 의견 및 문의사항 공유가능 (디스커스 사용)

195 changes: 194 additions & 1 deletion css/common.css
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,197 @@
}


/* ---------- 첫화면 popup ---------- */
/* ---------- 첫화면 popup ---------- */
/* ---------- 첫화면 popup ---------- */

/* 팝업 */
.popup_wrap_inner {
position: fixed;
z-index: 900;
width: 100%;
display: none;
/* 숨겨놓고 JS와 쿠키로 보임/숨김 실행 */
}
/* 한/영 전환버튼 */
.tr_com_lang_wrap{
position: fixed;
z-index: 9999;
top: 7%;
left: 0%;
transform: translateX(88px);

}
.tr_com_lang {
height: 18px;
line-height: 19px;
display: inline-block;
z-index: 1;
color: #fff;
background: transparent;
/* background-color: #ffffff; */
}

.lang_chan_btn {
padding-left: 1px;
display: inline-block;
vertical-align: 3px;
font-size: 1.3rem;
font-weight: 500;
color: #fff;
}


.tr_com_lang img {
width: 16px;
height: 16px;
}


.top_line {
position: fixed;
padding: 10px 15px;
/* display: flex; */
justify-content: space-between;
top: 0;
width: 100%;
left: 0;
}


/* 팝업닫기 */
.close_btn {
position: fixed;
z-index: 9999;
top: 9%;
left: 50%;
transform: translateX(130px);
width: 30px;
transition: ease-in-out 0.2s;
}

.close_btn:hover {
filter: drop-shadow(0px 0px 2px #333333a4);
transition: ease-in-out 0.2s;
}

.close_btn img {
width: 100%;
}

.guide_slide_wrap {
position: fixed;
top: 10%;
left: 50%;
transform: translateX(-50%);
width: 300px;
text-align: center;
z-index: 999;
height: 465px;
/* height: 100vh; */
}

.guide_slide_wrap div:first-child {
display: block !important;
}

.guide_slide_wrap.slick-initialized {
display: block;
}

swiper-container {
width: 100%;
height: 100%;
}

swiper-slide {
text-align: center;
font-size: 1.8rem;
overflow: auto;
}

/* pagination 수정 */

.swiper-pagination {
position: fixed !important;
text-align: center;
transition: .3s opacity;
transform: translate3d(0, 0, 0);
z-index: 10;
bottom: 30px !important;
}

.bk_common_bg {
height: 100vh;
background-color: rgba(0, 0, 0, 0.4);
position: fixed;
z-index: 12;
width: 100%;
}

/* 슬라이드 박스 안 */
.guide_box {
background-color: #ffffffef;
filter: drop-shadow(0px 0px 2px #333);
border-radius: 15px;
width: calc(100% - 10px);
padding: 35px 0 41px 0;
margin: 0 auto;
}


.guide_tit {
font-size: 2.3rem;
line-height: 25px;
font-weight: 900;
color: #333;
margin-bottom: 10px;
white-space: pre-line;
padding: 0 15px;
}

.col_big {
color: #8115ff;
font-weight: inherit;
font-size: inherit;

}

.sub_text {
font-size: 1.4rem;
color: #666;
line-height: 20px;
margin-bottom: 20px;
padding: 0 15px;
font-weight: 600;
}

.g_img_wrap {
width: 100%;
text-align: center;
display: inline-block;

}

.g_img_wrap img {
width: 100%;
}

.mini_text {
font-size: 1.1rem;
text-align: left;
margin-left: 20px;
margin-top: 20px;
line-height: 16px;
font-weight: 400;
color: #666;
}






/* ---------- Cam ---------- */
/* ---------- Cam ---------- */
/* ---------- Cam ---------- */
Expand Down Expand Up @@ -435,7 +626,7 @@ main {
margin: 0 auto;
text-align: center;
display: inline-block;

}


Expand Down Expand Up @@ -701,10 +892,12 @@ main {
.widget_active_clock {
filter: drop-shadow(0px 0px 5px #3D00B2) contrast(1) !important;
}

/* 플리 */
.widget_active_bgm {
filter: drop-shadow(0px 0px 5px #3D00B2) contrast(1) !important;
}

/* 나 */
.widget_active_me {
filter: drop-shadow(0px 0px 5px #3D00B2) contrast(1) !important;
Expand Down
Loading

0 comments on commit 963563a

Please sign in to comment.