index.html


<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <meta name="author" content="루나">
    <link rel="apple-touch-icon" sizes="57x57" href="./logo/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="./logo/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="./logo/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="./logo/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="./logo/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="./logo/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="./logo/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="./logo/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="./logo/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="./logo/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./logo/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="./logo/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./logo/favicon-16x16.png">
    <link rel="manifest" href="./logo/manifest.json">
    <meta name="msapplication-TileColor" content="#524B9B">
    <meta name="msapplication-TileImage" content="./logo/ms-icon-144x144.png">
    <meta name="theme-color" content="#524B9B">

    <meta http-equiv="Title" content="달빛을 나누다, LUNA">
    <meta http-equiv="Subject" content="한국디지털미디어고등학교의 IT 소셜벤처 동아리">
    <meta http-equiv="Publisher" content="루나">

    <meta name="twitter:title" content="달빛을 나누다, LUNA">
    <meta name="twitter:description" content="한국디지털미디어고등학교의 IT 소셜벤처 동아리">
    <meta name="twitter:image" content="./logo/logo-512x512.png">
    <meta name="twitter:card" content="summary_large_image">

    <meta property="og:type" content="website">
    <meta property="og:title" content="달빛을 나누다, LUNA">
    <meta property="og:description" content="한국디지털미디어고등학교의 IT 소셜벤처 동아리">
    <meta property="og:image" content="./logo/logo-512x512.png">
    <meta property="og:url" content="https://luna.codes">

    <link rel="canonical" href="https://luna.codes">
    <link rel="shortcut icon" href="./favicon.ico">
    <title>달빛을 나누다, LUNA</title>
    <meta name="description" content="한국디지털미디어고등학교의 IT 소셜벤처 동아리">
    <meta name="keywords" content="루나,LUNA,디미고,DIMIGO,동아리,IT소셜벤처">

    <link rel="stylesheet" href="./css/style.css">

    <script src="https://npm.2w.vc/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://npm.2w.vc/scrollmagic@2.0.8/scrollmagic/minified/ScrollMagic.min.js"></script>
    <script src="https://npm.2w.vc/scrollmagic@2.0.8/scrollmagic/minified/plugins/debug.addIndicators.min.js"></script>
    <script src="https://npm.2w.vc/scrollmagic@2.0.8/scrollmagic/minified/plugins/animation.gsap.min.js"></script>
    <script src="https://npm.2w.vc/gsap@2.1.3/src/minified/TweenMax.min.js"></script>
    <script src="https://npm.2w.vc/gsap@2.1.3/src/minified/TimelineMax.min.js"></script>
  </head>
  <body>
    <div id="app" class="home">
      <div id="navbar">
  <div id="inner">
    <a id="item" href="./"><img src="./logo/favicon-96x96.png">LUNA</a>
    <div id="fill"></div>
    <a id="item" slug="home" href="./"><div id="active">홈</div><div id="deactive">홈</div></a>
    <a id="item" slug="member" href="./member.html"><div id="active">멤버</div><div id="deactive">멤버</div></a>
    <a id="item" slug="award" href="./award.html"><div id="active">업적</div><div id="deactive">업적</div></a>
    <a id="item" slug="project" href="./project.html"><div id="active">프로젝트</div><div id="deactive">프로젝트</div></a>
    <a id="item" slug="qna" href="./qna.html"><div id="active">Q&A</div><div id="deactive">Q&A</div></a>
  </div>
  <script>
    $('#navbar a[slug="home"]').addClass('active');
  </script>
</div>
      <div id="scroll">
        <div id="content">
          <div id="page" class="main" type="full">
  <div id="inner">
    <div id="text">
      <div id="slogan">달빛을 나누다,</div>
      <div id="title">LUNA</div>
      <div id="description"><span id="bold">LUNA</span>는 한국디지털미디어고등학교의 유일한 <span id="bold">IT 소셜벤처 동아리</span>로 다양한 사회적 문제들을 해결하고 <span id="bold">모두가 함께 살 수 있는 세상을 만들기 위해 노력하고 있습니다.</span></div>
    </div>
    <canvas id="luna3d"></canvas>
    <div id="detail" onclick="$('#scroll').animate({scrollTop: showHeight}, 1000);">
      <div id="icon"></div>
      <div id="text">스크롤하여 더 알아보기</div>
    </div>
  </div>
</div>
<div id="page" class="project" type="min">
  <div id="inner">
    <div id="text">루나의 크루원들은 지금까지 자발적으로</div>
    <div id="tags">
      <div id="line" class="vw" vw="100" idx="0"><div id="mix"></div></div>
      <div id="line" class="vw" vw="100" idx="1"><div id="mix"></div></div>
      <div id="line" class="vw" vw="100" idx="2"><div id="mix"></div></div>
    </div>
    <div id="mix">
      <div id="text"><span id="bold">57개의 프로젝트</span>를 진행하며<br>사회적인 가치를 창출해왔습니다.</div>
      <a id="more" href="/project">루나가 진행한 프로젝트 보러가기<div id="icon"></div></a>
    </div>
  </div>
</div>
<div id="page" class="award" type="min">
  <div id="inner">
    <div id="mix">
      <div id="text">
        <div id="title"><span id="bold">74개</span>의 대회,<br><span id="bold">6,455만원</span>의 상금 및 지원금</div>
        <div id="description">루나는 사회 문제 해결 의지와 능력을 인정받고자 하였고, 그 결과 지금까지 <span id="bold">74개의 대회에 출전</span></span>하여 <span id="bold">상금 및 지원금 총 6,455만원</span>을 받았습니다.</div>
        <a id="more" href="/award">루나의 업적 알아보기<div id="icon"></div></a>
      </div>
      <div id="image">
        <div id="main"></div>
        <div id="shadow"></div>
      </div>
    </div>
  </div>
</div>
<div id="page" class="future" type="min">
  <div id="inner">
    <div id="box">
      <div id="text">루나는 앞으로도 여러분들과 함께<br><span id="bold">IT기술을 바탕으로 평등한 세상을 만들자</span>는<br>목표를 향하여 무한히 달려나갈 것입니다</div>
      <div id="image" class="luna"><img src="./img/home/future/luna.png"></div>
      <div id="image" class="hand"><img src="./img/home/future/hand.png"></div>
      <div id="image" class="circle1"><img src="./img/home/future/circle1.png"></div>
      <div id="image" class="circle2"><img src="./img/home/future/circle2.png"></div>
      <div id="image" class="circle3"><img src="./img/home/future/circle3.png"></div>
    </div>
  </div>
</div>

<script async src="https://npm.2w.vc/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
  {
    "imports": {
      "@splinetool/loader": "https://npm.2w.vc/@splinetool/loader@0.9.214/build/SplineLoader.js",
      "three": "https://npm.2w.vc/three@0.142.0/build/three.module.js",
      "three/": "https://npm.2w.vc/three@0.142.0/"
    }
  }
</script>
<script type="module" src="./js/utils.home.js"></script>
          <div id="footer">
  <div id="inner">
    <div id="identify">
      <div id="logo"></div>
      <div id="text">
        <div id="slogan">달빛을 나누다,</div>
        <div id="title">LUNA</div>
      </div>
    </div>
    <div id="menu">
      <div id="sns">
        <a id="item" class="instagram" href="https://www.instagram.com/dimigo_luna/" target="_blank"></a>
        <a id="item" class="github" href="https://github.com/LUNA-coding" target="_blank"></a>
        <a id="item" class="youtube" href="https://www.youtube.com/channel/UCWfvTEUzP9b2pPTDBSi9IMg" target="_blank"></a>
        <a id="item" class="facebook" href="https://www.facebook.com/lunacoding/" target="_blank"></a>
      </div>
      <div id="cc">Copyright © 2023 LUNA All rights reserved.</div>
    </div>
  </div>
</div>
        </div>
      </div>
    </div>
    <script>
      const slug = "home";
      let showWidth = 0;
      let showHeight = 0;
      let checkScale = true;
      const getVW = (width) => showWidth * width / 100;
      const getVH = (height) => showHeight * height / 100;
      const setScaleWithWidth = (scaleWidth) => {
        const scale = $(window).width() / scaleWidth;
        setScale(scale);
      };
      const setScale = (scale) => {
        $('body').css('transform', `scale(${scale})`);
        $('body').css('width', `${1 / scale * 100}%`);
        $('body').css('height', `${1 / scale * 100}%`);
        checkScale = false;
        window.dispatchEvent(new Event('resize'));
      };
      const resize = () => {
        [showWidth, showHeight] = [$('body').width(), $('body').height()];
        $('#app').width(showWidth); $('#app').height(Math.ceil(showHeight));
        $('#content #page[type="full"]').height(showHeight - $('#navbar').height());
        $('#content #page[type="min"]').css('min-height', `${showHeight - $('#navbar').height()}px`);
        for(const vw of $('.vw')) {
          $(vw).width(getVW($(vw).attr('vw')));
        }

        if(checkScale) {
          if(showWidth <= 750) {
            setScaleWithWidth(750);
          } else {
            setScale(1);
          }
        } else {
          checkScale = true;
        }
      }; resize();
      $(window).resize(resize).trigger('resize');
      $(document).ready(() => {
        $('#scroll').addClass('loaded');
        if(["member", "project"].includes(slug)) {
          $('#navbar').addClass('glass');
          $('#scroll').scroll(() => {
            if($('#scroll').scrollTop()) {
              $('#navbar').removeClass('glass');
            } else {
              $('#navbar').addClass('glass');
            }
          });
        }
      });
    </script>
  </body>
</html>