홉스: 어드민, 백오피스, 관리자 페이지 - 로우코드/노코드 플랫폼

Hops

hero-container

footer

<div id="overlay" aria-video-hidden="true">
  <div id="ytplayer">
  </div>
</div>

<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KBBW4H5" height="0" width="0"
    style="display:none;visibility:hidden"></iframe></noscript>


<script>
  (function(){
    var w=window;
    if(w.ChannelIO){return w.console.error("ChannelIO script included twice.")}
    var ch=function(){ch.c(arguments)};
    ch.q=[];
    ch.c=function(args){ch.q.push(args)};
    w.ChannelIO=ch;
    function l(){
        if(w.ChannelIOInitialized){return}
        w.ChannelIOInitialized=true;var s=document.createElement("script");
        s.type="text/javascript";
        s.async=true;
        s.src="https://cdn.channel.io/plugin/ch-plugin-web.js";
        var x=document.getElementsByTagName("script")[0];
        if(x.parentNode){x.parentNode.insertBefore(s,x)}
    }
    if(document.readyState==="complete"){l()}
    else{
        w.addEventListener("DOMContentLoaded",l);
        w.addEventListener("load",l)
    }}
  )();

ChannelIO('boot', {
  "pluginKey": "6637bcb1-85ff-4b9c-bc80-a92323281698"
});

var player;
var queue = {                     
  content: null,
  push: function(fn) {
    this.content = fn;
  },
  pop: function() {
    this.content.call();
    this.content = null;
  }
};

function onPlayerReady(event) {
  if (queue.content != null) queue.pop();
}

function isPlayerReady(player) {
  return player && typeof player.playVideo === 'function';
}

function onYouTubePlayerAPIReady() {
  player = new YT.Player('ytplayer', {
    height: '680',
    width: '1024',
    videoId: 'F2AC_NMog44',
    playerVars: {
      'autoplay': 0,
      'enablejsapi': 1,
    },
    events: {
      'onReady': onPlayerReady,
    }
  });

};


window.onload = () => {
  // open channeltalk
  const selectors = [
  ];
  selectors.forEach(function (elem) {  
    if (elem == null) return;
    elem.addEventListener('click', function(event) {
      ChannelIO('showMessenger');
      event.preventDefault();
    });
  });

  const marqueeTrack = document.querySelector('div[data-marquee=true] > div');
  const secondTrack = marqueeTrack.querySelector('div').cloneNode(true);
  marqueeTrack.appendChild(secondTrack);
  document.querySelectorAll('div[data-marquee=true] > div > div').forEach(elem => {
    elem.classList.add('scroll');
  });
  
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  const overlay = document.querySelector('div#overlay');
  const keydownhandler =  (event) => {
    if(event.keyCode == 27) {
      toggleOverlay();
    }
  };
  
  const toggleOverlay = () => {
    var overlayOpen = overlay.getAttribute('aria-video-hidden') === 'true';
    overlay.setAttribute('aria-video-hidden', !overlayOpen);
    document.body.classList.toggle('noscroll', overlayOpen);

    if (overlayOpen) {
      if(isPlayerReady(player)) {
        player.playVideo();
      } else {
        queue.push(() => {
          player.playVideo();
        });
      }
      document.body.addEventListener('keydown', keydownhandler);
    } else {
       player.stopVideo();
      document.body.removeEventListener('keydown', keydownhandler)
    }
   };
/*
  overlay.addEventListener('click', () => {
    toggleOverlay();
  });
  document.querySelector('#hero-image').addEventListener('click', () => {
    toggleOverlay()
  });
*/
  /*
  const topCta = document.querySelector('.hops-top-cta').cloneNode(true);
  document.querySelector('.hops-top-cta').remove();
  const topCtaTargetElem =  document.querySelector('#td-navbar');
  topCtaTargetElem.parentNode.insertBefore(topCta, topCtaTargetElem);
  */
  const useCaseImage = {
    'use-case-tab-customer': 'https://cdn.gcp.hopsoffice.com/tp/crm.png',
    'use-case-tab-payment': 'https://cdn.gcp.hopsoffice.com/tp/payment.png',
    'use-case-tab-dashboard': 'https://cdn.gcp.hopsoffice.com/tp/data.png',
    'use-case-tab-project': 'https://cdn.gcp.hopsoffice.com/tp/project.png',
  };
    document.querySelectorAll('.use-case-tab').forEach(elem => {
        elem.addEventListener('click', (event) => {
            document.querySelector('.use-case-tab-selected').classList.remove('use-case-tab-selected');
            elem.classList.add('use-case-tab-selected');
            document.querySelector('div#use-case-image img').setAttribute('srcset', useCaseImage[elem.id]);
        });
    });
};

  /** 
   * CTA Button
   */
  const allowedPages = ['/'];
  const isFollowingAllowedPage = allowedPages.includes(window.location.pathname);

  if (isFollowingAllowedPage) {
    const followingElement = (() => {
      const followingElement = document.createElement('div');
      const slateButton = document.querySelector('.slate-button')?.cloneNode(true);
      const isMobile = window.innerWidth < 768;

      if (slateButton == null || !(slateButton instanceof Element)) {
        return;
      }

      followingElement.setAttribute('id', 'following-slate-button');
      followingElement.insertAdjacentElement('afterbegin', slateButton);
      followingElement.style.cssText = `
        position: fixed;
        bottom: 50px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        animation: 1s forwards slide-in-up;
      `;

      const innerButton = slateButton.querySelector('button');
      if (innerButton == null || !(innerButton instanceof Element)) {
        return;
      }

      innerButton.style.cssText = `
        ${innerButton.style.cssText}
        width: ${isMobile ? 223 : 400}px;
        height: ${isMobile ? 57 : 70}px;
        box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
        ${isMobile ? 'padding: 15px 26px;' : ''}
      `;

      return followingElement;
    })();

    const getIsFollowingElementExists = () => {
      return document.getElementById('following-slate-button') != null;
    };

    const setIsFollowing = (() => {
      let isFollowing = false;

      return (value) => {
        if (isFollowing === value || followingElement == null || window.scrollY < 20) {
          return;
        }

        isFollowing = value;

        if (value && !getIsFollowingElementExists()) {
          document.body.insertAdjacentElement('beforeend', followingElement);
        }
        if (!value && getIsFollowingElementExists()) {
          document.body.removeChild(followingElement);
        }
      };
    })();

    const observerCallback = (entries) => {
      const isFollowing = entries.reduce((isFollowing, entry) => isFollowing && !entry.isIntersecting, true);
      setIsFollowing(isFollowing);
    };
    const observer = new IntersectionObserver(observerCallback, { threshold: 1 });

    document.querySelectorAll('.slate-button').forEach((element) => {
      observer.observe(element);
    });
  } 
</script>

어드민 개발, 이제 며칠이면 충분합니다

클릭 한번으로 완성되는 강력한 어드민 UI

더 빠르게, 더 쉽게, 더 간단하게

맞춤형 어드민 활용하기

어드민 개발, 이제 며칠이면 충분합니다