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

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/crm.png',
    'use-case-tab-payment': 'https://cdn.gcp.hopsoffice.com/payments.png',
    'use-case-tab-dashboard': 'https://cdn.gcp.hopsoffice.com/dashboard.png',
    'use-case-tab-project': 'https://cdn.gcp.hopsoffice.com/project_mng.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]);
        });
    });
};

</script>

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

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

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

맞춤형 어드민 활용하기

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