chore (#3): Update front main page

ucompanion · Dec 14, 2021 · 119c581 · 119c581
1 parent df6690c
commit 119c581
Show file tree

Hide file tree

Showing 19 changed files with 244 additions and 75 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/assets/.DS_Store b/assets/.DS_Store
diff --git a/assets/fonts/.DS_Store b/assets/fonts/.DS_Store
diff --git a/assets/images/.DS_Store b/assets/images/.DS_Store
diff --git a/assets/images/ico-close.png b/assets/images/ico-close.png
diff --git a/assets/images/ico-gnb-tools.png b/assets/images/ico-gnb-tools.png
diff --git a/assets/images/ico-quick-menu.png b/assets/images/ico-quick-menu.png
diff --git a/assets/images/logo-busan-main.png b/assets/images/logo-busan-main.png
diff --git a/assets/images/logo-main-white.png b/assets/images/logo-main-white.png
diff --git a/assets/images/logo-main.png b/assets/images/logo-main.png
diff --git a/assets/images/logo-seoul-main.png b/assets/images/logo-seoul-main.png
diff --git a/assets/images/scene1.jpg b/assets/images/scene1.jpg
diff --git a/assets/scripts/main.js b/assets/scripts/main.js
@@ -25,6 +25,7 @@ const fullpageConfig = {
   },
 };
 let shownQuickMenu = false;
+let gnbShown = false;
 
 function nextScene() {
   $('#scene1').hide();
@@ -121,6 +122,7 @@ function activateFullpage() {
     navigation: false,
     afterLoad: function (anchorLink, index) {
       console.log('afterLoad', anchorLink, index);
+      $('.header').removeClass('account-bar-blind');
       if (index === 1) {
         $('.slide-nav').removeClass('hidden');
         $('.header').removeClass('hidden').addClass('header-bg-white');
@@ -139,9 +141,17 @@ function activateFullpage() {
       if (index === 1) {
         $('.slide-nav').addClass('hidden');
         $('.header').removeClass('header-bg-white');
+        $('.header').addClass('account-bar-blind');
       }
       if (backgroundColor[index - 1] === '#121212') {
         $('.header').removeClass('page-bg-dark');
+        direction == 'down' && $('.header').addClass('account-bar-blind');
+      }
+      if (
+        (nextIndex === 1 || backgroundColor[nextIndex - 1] === '#121212') &&
+        direction == 'up'
+      ) {
+        $('.header').addClass('account-bar-blind');
       }
     },
   });
@@ -173,6 +183,18 @@ function init() {
       ? $('#quick-menu').addClass('active')
       : $('#quick-menu').removeClass('active');
   });
+
+  $('#btn-gnb').click(() => {
+    if (gnbShown) {
+      $('#gnb-container').hide();
+      gnbShown = false;
+      $.fn.fullpage && $.fn.fullpage.setAllowScrolling(true);
+    } else {
+      $('#gnb-container').show();
+      gnbShown = true;
+      $.fn.fullpage && $.fn.fullpage.setAllowScrolling(false);
+    }
+  });
 }
 
 function carouselCinema() {

diff --git a/html/front/main/main.html b/html/front/main/main.html
@@ -21,7 +21,7 @@
       rel="stylesheet"
       href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"
     />
-    <link rel="stylesheet" href="./../../../assets/styles/style.css" />
+    <link rel="stylesheet" href="./assets/styles/style.css" />
     <script
       defer
       src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"
@@ -38,21 +38,45 @@
       defer
       src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"
     ></script>
-    <script defer src="./../../../assets/scripts/main.js"></script>
+    <script defer src="./assets/scripts/main.js"></script>
   </head>
   <body onload="init()">
     <div class="intro-container">
       <!-- header -->
       <div class="shown-bar header hidden">
-        <h1><a href="./html/front/main/main.html">LG디스커버리랩</a></h1>
-        <nav class="hamburger-menu">
+        <h1><a href="./index.html">LG디스커버리랩</a></h1>
+        <ul class="account">
+          <li><a href="#">로그인</a></li>
+          <li><a href="#">회원가입</a></li>
+        </ul>
+        <ul class="tools">
+          <li class="calendar">
+            <a href="#" title="일정"
+              ><span class="ico calendar"
+                ><span class="hidden">일정</span></span
+              ></a
+            >
+          </li>
+          <li class="search">
+            <a href="#" title="검색"
+              ><span class="ico search"
+                ><span class="hidden">검색</span></span
+              ></a
+            >
+          </li>
+        </ul>
+        <nav id="btn-gnb" class="hamburger-menu">
           <div class="top-bun"></div>
           <div class="meat"></div>
           <div class="bottom-bun"></div>
         </nav>
       </div>
       <!-- //header -->
 
+      <!-- gnb container -->
+      <div id="gnb-container">글로벌내비게이션</div>
+      <!-- //gnb container -->
+
       <!-- scene1 -->
       <section id="scene1">
         <div class="line">
@@ -62,7 +86,7 @@ <h1><a href="./html/front/main/main.html">LG디스커버리랩</a></h1>
         </div>
         <div class="drag-area">
           <img
-            src="./../../../assets/images/intro/img1.png"
+            src="./assets/images/intro/img1.png"
             alt="LG Discovery Lab"
             id="img-drag"
           />
@@ -131,7 +155,8 @@ <h2>Program</h2>
       <!-- quick-menu -->
       <div id="quick-menu" style="display: none">
         <div class="btn" title="Quick-menu">
-          <span>Quick-menu</span>
+          <span class="btn-ico"></span>
+          <span class="hidden">Quick-menu</span>
         </div>
         <ul>
           <li><a href="#">서울예약</a></li>
@@ -165,7 +190,7 @@ <h2>Program</h2>
           </p>
         </div>
         <div class="layout-half-last">
-          <img src="./../../../assets/images/img-main-program-contents.png" />
+          <img src="./assets/images/img-main-program-contents.png" />
           <p class="phrase-sub">
             청소년이 이해하고 자신의 가능성을 발견하는<br />
             <span class="text-highlight">한 차원 다른 세상</span>을 미리 경험할
@@ -197,7 +222,7 @@ <h2>Program</h2>
               <li class="swiper-slide">
                 <div class="image">
                   <img
-                    src="./../../../assets/images/img-main-program-cinema-chatbot.jpg"
+                    src="./assets/images/img-main-program-cinema-chatbot.jpg"
                     alt=""
                   />
                 </div>
@@ -209,7 +234,7 @@ <h2>Program</h2>
               <li class="swiper-slide">
                 <div class="image">
                   <img
-                    src="./../../../assets/images/img-main-program-cinema-robot.jpg"
+                    src="./assets/images/img-main-program-cinema-robot.jpg"
                     alt=""
                   />
                 </div>
@@ -221,7 +246,7 @@ <h2>Program</h2>
               <li class="swiper-slide">
                 <div class="image">
                   <img
-                    src="./../../../assets/images/img-main-program-cinema-mrc.jpg"
+                    src="./assets/images/img-main-program-cinema-mrc.jpg"
                     alt=""
                   />
                 </div>

diff --git a/scss/_common.scss b/scss/_common.scss
@@ -28,7 +28,18 @@ $asset-base-path: './..' !default;
 }
 
 // common variable style
-$header-footer-side-padding: 4.285rem;
+//
+:root {
+  --global-side-padding: 3.125vw;
+  --header-height: 7.857rem; // 110px
+}
+// @media () {
+//   :root {
+//     --global-side-padding: 3.125vw;
+//     --header-height: 7.857rem;
+//   }
+// }
+
 $en-emphasis: 'MarkPro', sans-serif;
 
 $timing-function1: cubic-bezier(0.4, 0, 0.2, 1);
@@ -80,20 +91,32 @@ $ico-calendar: image-path('ico-calendar.png');
 }
 
 // Media Query Rule
-@media (min-width: 91.5rem) {
-}
+// @media (max-width: 480px) {
+// }
 
-@media (min-width: 73.214rem) and (max-width: 91.429rem) {
-}
+// @media (min-width: 481px) and (max-width: 767px) {
+// }
 
-@media (min-width: 54.857rem) and (max-width: 73.143rem) {
-}
+// @media (min-width: 768px) and (max-width: 1024px) {
+// }
 
-@media (min-width: 34.357rem) and (max-width: 54.786rem) {
-}
+// @media (min-width: 1025px) and (max-width: 1280px) {
+// }
 
-@media (max-width: 34.286rem) {
-}
+// @media (min-width: 1281px) {
+// }
+
+// @media #{$screen-xs} {
+//   .class-name {
+//     width: 100%;
+//   }
+// }
+
+$screen-xs: 'screen and (max-width: 480px)';
+$screen-sm: 'screen and (min-width: 481px) and (max-width: 767px)';
+$screen-md: 'screen and (min-width: 768px) and (max-width: 1024px)';
+$screen-lg: 'screen and (min-width: 1025px) and (max-width: 1280px)';
+$screen-xl: 'screen and (min-width: 1281px)';
 
 // common
 html,
@@ -203,3 +226,15 @@ select {
     }
   }
 }
+
+// gnb-container
+#gnb-container {
+  display: none;
+  position: absolute;
+  top: var(--header-height);
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #fff;
+  z-index: 9999;
+}
diff --git a/scss/_footer.scss b/scss/_footer.scss
@@ -5,9 +5,9 @@
   align-items: center;
   padding: {
     top: 4.286rem;
-    right: $header-footer-side-padding;
+    right: var(--global-side-padding);
     bottom: 4.286rem;
-    left: $header-footer-side-padding;
+    left: var(--global-side-padding);
   }
   border-top: 1px solid #eee;