0929 작업

- 설명 슬라이드 : 가이드 한/영 설명 넣기 완료 + dark 테마 css수정 완료
- 한영변환 버튼 터치범위 수정완료
- 설명 슬라이드 : 설명 이미지 작업완료
- 외부 작업 깃에 올리기 완료
- 팝업 떴을때 위에 배경 드레그 안되게 수정완료
- 가이드 팝업 다시 보는 버튼 넣기완료
- 포탈열기 완료
- 깃 리드미 설명작성 완료

README.md

@@ -1,19 +1,16 @@
 # DC_DreamRoom (Fan made)
-
-대략적 내용 -
-드림캐쳐와 함께 집중,휴식을 취할 수 있는 insomnia만의 'Dream room' (디자인 및 퍼블리싱)<br>
-<!-- 드림캐쳐가 다녀간곳을 카카오 맵에서 확인하고, 해당장소에서의 촬영된 콘텐츠를 볼 수 있는 '드림캐쳐 투어' 맵 페이지 (디자인 및 퍼블리싱)<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>
+드림캐쳐와 영상통화하듯 즐겁게 공부, 일, 휴식등 다양한 활동을 수 있는 insomnia만의 'Dream room' (디자인 및 퍼블리싱)<br>
+(A 'Dream Room' where you can enjoy various activities like studying, working, and relaxing with Dreamcatcher, just like a video call)<br><br>
 📌[홈페이지 바로가기](https://fold6.github.io/DC_DreamRoom/index.html)<br>
 <br>
 <br>
 
 ## 기능 및 특징
-- 드림캐쳐와 함께 ASMR을 들으며 작업하거나 휴식을 취할 수 있는 '드림 룸(Dream Room)'
-- 화상캠을 통해 ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ
-- 장소이름을 클릭하여 영업시간, 연락처 등의 '장소정보'를 열람
-- 컨텐츠란을 클릭하여 유튜브영상 등의 '촬영된 컨텐츠'를 열람
-- 멤버 별 방문장소 필터링 버튼으로 원하는 장소만 표기가능
-- 첫 진입시 가이드팝업을 통한 설명제공 (제이쿼리 쿠키를 사용, 재진입시 헤더오른쪽의 가이드버튼을 눌러야만 표기)
-- 오른쪽 하단 '방명록' 바로가기 아이콘을 통해 의견 및 문의사항 공유가능 (디스커스 사용)
+- 드림캐쳐와 영상통화하듯 즐겁게 공부,일, 휴식등 다양한 활동을 수 있는 '드림 룸(DreamRoom)' <br>
+(※내 화상카메라를 연결하기 위한 '카메라 권한' / 시계 위젯의 시간표기를 위한 '위치정보 권한' 을 받으나 개인정보 데이터를 저장하지 않음)
+- PC버전에서의 오른쪽상단 '전체화면 전환버튼', 'BGM Player' 의 이전/재생/다음 버튼 컨트롤을 통한 '장작, 빗소리, 키보드 타건 ASMR' 을 제공 하여 집중할 수 있는 환경조성
+- 7개의 각 Sub page를 통해 가장 좋아하는 '최애 멤버와의 1:1 미팅' 작업가능 <br> (각 멤버당 약 30분이상 가량의 엄선된 긴 영상제공)
+- 오른쪽 하단의 서랍을 꺼내 '시계 / BGM player / 내 카메라'  기능을 Show / Hide하고, BGM player와 시계를 드레그하여 화면의 원하는 자리로 이동할 수 있는 '커스텀' 기능제공 (제이쿼리 draggable 사용)
+- 첫 진입시 렌딩페이지의 가이드팝업을 통한 설명제공 (제이쿼리 쿠키를 사용, 재진입시 상단 페이지명의 가이드버튼을 눌러야만 표기)
+
 

css/common.css

@@ -6,7 +6,7 @@
     width: 100vw;
     background: radial-gradient(ellipse at bottom, rgb(20, 14, 81), rgb(10, 10, 26));
     position: fixed;
-    z-index: 9999999999999;
+    z-index: 999999999999999999;
 }
 
 .loading_img {
@@ -61,6 +61,7 @@
 }
 
 .tr_com_lang {
+    opacity: .8;
     height: 13px;
     line-height: 0;
     display: inline-block;
@@ -106,11 +107,13 @@
     transform: translateX(130px);
     width: 30px;
     transition: ease-in-out 0.2s;
+    opacity: .7;
 }
 
 .close_btn:hover {
     filter: drop-shadow(0px 0px 2px #333333a4);
     transition: ease-in-out 0.2s;
+    opacity: .7;
 }
 
 .close_btn img {
@@ -125,7 +128,8 @@
     width: 300px;
     text-align: center;
     z-index: 999;
-    height: 465px;
+    /* height: 465px; */
+    height: 445px;
     /* height: 100%; */
 }
 
@@ -165,19 +169,21 @@ swiper-slide {
 
 .bk_common_bg {
     height: 100vh;
-    background-color: rgba(0, 0, 0, 0.7);
+    background-color: rgba(0, 0, 0, 0.8);
     position: fixed;
     z-index: 12;
     width: 100%;
 }
 
 /* 슬라이드 박스 안 */
 .guide_box {
-    background-color: #ffffffef;
+    background-color: #0e0e0e8a;
+    /* 보라배경 test */
+    /* background-color: #2000458a; */
     filter: drop-shadow(0px 0px 2px #333);
     border-radius: 15px;
     width: calc(100% - 10px);
-    padding: 35px 0 41px 0;
+    padding: 35px 0 45px 0;
     margin: 0 auto;
 }
 
@@ -186,7 +192,7 @@ swiper-slide {
     font-size: 2.1rem;
     line-height: 26px;
     font-weight: 900;
-    color: #333;
+    color: #dfdfdf;
     margin-bottom: 10px;
     /* white-space: pre-line; */
     padding: 0 15px;
@@ -200,9 +206,9 @@ swiper-slide {
 }
 
 .sub_text {
-    font-size: 1.3rem;
-    color: #666;
-    line-height: 19px;
+    font-size: 1.2rem;
+    color: #c1c1c1;
+    line-height: 16px;
     margin-bottom: 20px;
     padding: 0 15px;
     font-weight: 600;
@@ -226,7 +232,7 @@ swiper-slide {
     margin-top: 20px;
     line-height: 16px;
     font-weight: 400;
-    color: #666;
+    color: #c1c1c1;
 }
 
 
@@ -590,14 +596,12 @@ html {
 
 
 
-
-
 /* ---------- 헤더 ---------- */
 header {
     height: 33px;
     line-height: 33px;
     position: fixed;
-    z-index: 999999999;
+    z-index: 99999;
     text-align: center;
     box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.671);
     width: calc(100% - 50px);
@@ -610,6 +614,24 @@ header {
     text-align: center;
 }
 
+
+/* 가이드 팝업버튼 */
+.guide_btn {
+    width: 14px;
+    transition: ease-in-out 0.2s;
+    position: absolute;
+    top: 9px;
+    opacity: .6;
+    padding-left: 5px;
+}
+
+.guide_btn:hover {
+    filter: drop-shadow(0px 0px 2px #fff);
+    transition: ease-in-out 0.2s;
+    /* filter: brightness(125%); */
+}
+
+
 /* 방 제목 */
 .title {
     color: #f1f1f1;
@@ -939,15 +961,23 @@ main {
         height: 20px;
         line-height: 20px;
         position: fixed;
-        z-index: 999999999;
+        z-index: 99999;
         text-align: center;
         box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.671);
         width: calc(100% - 50px);
         right: 0;
-        /* background-color: rgba(0, 0, 0, 0.3); */
         background-color: #0000008a;
     }
 
+    .guide_btn {
+        width: 8px;
+        transition: ease-in-out 0.2s;
+        position: absolute;
+        top: 6px;
+        padding-left: 2px;
+        opacity: .6;
+    }
+
     .title {
         color: #f1f1f1;
         font-size: .9rem;
@@ -1152,7 +1182,7 @@ main {
         height: 20px;
         line-height: 21px;
         position: fixed;
-        z-index: 999999999;
+        z-index: 99999;
         text-align: center;
         box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.671);
         width: calc(100% - 50px);

css/swiper-bundle.css

@@ -404,7 +404,7 @@
     --swiper-pagination-bullet-width: 8px;
     --swiper-pagination-bullet-height: 8px;
     --swiper-pagination-bullet-border-radius: 50%;
-    --swiper-pagination-bullet-inactive-color: #000;
+    --swiper-pagination-bullet-inactive-color: #fff!important;
     --swiper-pagination-bullet-inactive-opacity: 0.2;
     --swiper-pagination-bullet-opacity: 1;
     --swiper-pagination-bullet-horizontal-gap: 4px;

index.html

@@ -28,7 +28,7 @@
 
      <!-- CSS  -->
      <link href="css/font.css" rel="stylesheet" />
-     <link href="css/common.css?ver=0928" rel="stylesheet" />
+     <link href="css/common.css?ver=09299998" rel="stylesheet" />
      <link href="css/reset.css" rel="stylesheet" />
 
      <!-- Font awesome icon  -->
@@ -52,18 +52,24 @@
      </script>
 
 
+
 </head>
 <!-- 
  |￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣|
-
--240923
--  설명슬라이드에 한/영 전환버튼 및 기능추가 (위치잡기/JS동작완 -- 일러스트에 있는 내용+번역본 넣어야함)
-
--240928
-- 설명 슬라이드 : 내용+번역본 넣기
-- 한영변환 버튼 터치범위 수정
-
-
+-240929
+- 설명 슬라이드 : 가이드 한/영 설명 넣기 완료 + dark 테마 css수정 완료
+- 한영변환 버튼 터치범위 수정완료
+- 설명 슬라이드 : 설명 이미지 작업완료
+- 외부 작업 깃에 올리기 완료
+- 팝업 떴을때 위에 배경 드레그 안되게 수정완료
+- 가이드 팝업 다시 보는 버튼 넣기완료
+- 포탈열기 완료
+- 깃 리드미 설명작성 완료
+
+
+===해야될 작업
+- sns 공유용 설명이미지 작업 및 글 작성
+- 공유
  |＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿|
  \ (•◡•) / Update MEMO
  -->
@@ -83,7 +89,7 @@
      </div>
 
      <!-- 팝업 -->
-     <div class="popup_wrap_inner" id="pop" style="display: block;">
+     <div class="popup_wrap_inner" id="pop" style="display: none;">
 
           <!-- Guide Notice -->
           <div class="close_btn"><img src="img/close_btn.png"></div>
@@ -110,64 +116,63 @@
           <swiper-container class="guide_slide_wrap" pagination="true">
                <!-- 1 -->
                <swiper-slide>
-                   <div class="guide_box" id="gu_1">
-                       <p class="guide_tit"><span class="col_big"></span></p>
-                       <p class="sub_text"></p>
-                       <div class="g_img_wrap">
-                           <img src="img/DC_guide/g1.png" alt="guide_img">
-                       </div>
-                       <p class="mini_text"></p>
-                   </div>
+                    <div class="guide_box" id="gu_1">
+                         <p class="guide_tit"><span class="col_big"></span></p>
+                         <p class="sub_text"></p>
+                         <div class="g_img_wrap">
+                              <img src="img/DC_guide/g1.png?ver=0929" alt="guide_img">
+                         </div>
+                         <p class="mini_text"></p>
+                    </div>
                </swiper-slide>
                <!-- 2 -->
                <swiper-slide>
-                   <div class="guide_box" id="gu_2">
-                       <p class="guide_tit"><span class="col_big"></span></p>
-                       <p class="sub_text"></p>
-                       <div class="g_img_wrap">
-                           <img src="img/DC_guide/g2.png" alt="guide_img">
-                       </div>
-                       <p class="mini_text"></p>
-                   </div>
+                    <div class="guide_box" id="gu_2">
+                         <p class="guide_tit"><span class="col_big"></span></p>
+                         <p class="sub_text"></p>
+                         <div class="g_img_wrap">
+                              <img src="img/DC_guide/g2.png?ver=0929" alt="guide_img">
+                         </div>
+                         <p class="mini_text"></p>
+                    </div>
                </swiper-slide>
                <!-- 3 -->
                <swiper-slide>
-                   <div class="guide_box" id="gu_3">
-                       <p class="guide_tit"><span class="col_big"></span></p>
-                       <p class="sub_text"></p>
-                       <div class="g_img_wrap">
-                           <img src="img/DC_guide/g3.png" alt="guide_img">
-                       </div>
-                       <p class="mini_text"></p>
-                   </div>
+                    <div class="guide_box" id="gu_3">
+                         <p class="guide_tit"><span class="col_big"></span></p>
+                         <p class="sub_text"></p>
+                         <div class="g_img_wrap">
+                              <img src="img/DC_guide/g3.png?ver=0929" alt="guide_img">
+                         </div>
+                         <p class="mini_text"></p>
+                    </div>
                </swiper-slide>
                <!-- 4 -->
                <swiper-slide>
-                   <div class="guide_box" id="gu_4">
-                       <p class="guide_tit"><span class="col_big"></span></p>
-                       <p class="sub_text"></p>
-                       <div class="g_img_wrap">
-                           <img src="img/DC_guide/g4.png" alt="guide_img">
-                       </div>
-                       <p class="mini_text"></p>
-                   </div>
+                    <div class="guide_box" id="gu_4">
+                         <p class="guide_tit"><span class="col_big"></span></p>
+                         <p class="sub_text"></p>
+                         <div class="g_img_wrap">
+                              <img src="img/DC_guide/g4.png?ver=0929" alt="guide_img">
+                         </div>
+                         <p class="mini_text"></p>
+                    </div>
                </swiper-slide>
-           </swiper-container>
-           
+          </swiper-container>
+
           </swiper-slide>
           <div class="bk_common_bg"></div>
      </div>
      <!-- popup_wrap_inner END -->
 
      <header>
           <div class="header_in">
-               <p class="title">Dream Room</p>
+               <p class="title">Dream Room <img class="guide_btn" src="img//howto_btn.png" alt="guide_btn"></p>
           </div>
           <div class="fullpage" id="fullscreenBtn"><i class="fas fa-expand"></i></div>
      </header>
 
 
-
      <!-- 시계 위젯 -->
      <div class="draggable_clock">
           <i class="fas far fa-grip-lines"></i>
@@ -466,9 +471,8 @@
      </script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
      <!-- 제이쿼리 쿠키 : 쿠키는 제이쿼리보다 밑에 있어야 동작 -->
-
      <!-- 공통 JS -->
-     <script src="js/index.js?ver=0928"></script>
+     <script src="js/index.js?ver=09299998"></script>
 
 
 </body>