<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" rel="stylesheet">


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />


<title>キダ大社</title>


<style>

header {
position: fixed;
top: 0px;
left: 0;
margin:0; /* 勝手につく余白を消す為 */
padding:0; /* 勝手につく余白を消す為 */
line-height:0em;
text-align:  center;        /* 中央寄せの指定 */
/*font-size:0; 勝手につく余白を消す為 */
}

body{
background-Color:#CCCCCC;   /* 全体の背景 */
margin:30px 0px; /* 勝手につく余白を消す為 */
padding:0; /* 勝手につく余白を消す為 */
font-family: 'Noto Serif JP', serif;
font-size:10px; /*勝手につく余白を消す為 */
}

#main {
/* background-Color:#003366;   全体の背景 */
/* background-image:url('images/'); 背景url */
width:100%;
height: auto;
max-width:300px; /* 閲覧スマホ推奨範囲 */
margin:auto;
font-size:10px;
font-weight:800;
line-height:0em;background-position: center;
font-family: 'Noto Serif JP', serif;
color: #666699;
text-align:  center;        /* 中央寄せの指定 */
}

#main media screen and (max-width:300px){

	img {
                margin:auto; /* 中央に寄せる */
		width: 80%;
		height: auto;
                text-align:  center;        /* 中央寄せの指定 */
	}
}

#rotate {
/* background-Color:#003366;   全体の背景 */
/* background-image:url('images/'); 背景url */
width:100%;
height: auto;
max-width:300px; /* 閲覧スマホ推奨範囲 */
margin:auto;
font-size:0x;
font-weight:800;
line-height:0em;background-position: center;
font-family: 'Noto Serif JP', serif;
color: #666699;
text-align:  center;        /* 中央寄せの指定 */
}

#rotate media screen and (max-width:300px){

	img {
                margin:auto; /* 中央に寄せる */
		width: 80%;
		height: auto;
		width: auto;
	}
}


.fortune {
/* background-Color:#003366;   全体の背景 */
/* background-image:url('images/'); 背景url */
width:100%;
height: auto;
max-width:300px; /* 閲覧スマホ推奨範囲 */
margin:auto;
font-size:0x;
font-weight:800;
line-height:0em;background-position: center;
font-family: 'Noto Serif JP', serif;
color: #666699;
text-align:  center;        /* 中央寄せの指定 */
}

.fortune media screen and (max-width:300px){

	img {
                margin:auto; /* 中央に寄せる */
		width: 80%;
		height: auto;
                text-align:  center;        /* 中央寄せの指定 */
	}
}

/* メニューをページ下部に固定 */
#fixed-footer-menu {
  position: fixed;
  width: 100%;
  bottom: 0px;
  opacity: 1;
  z-index: 100;
}

/* メニューを横並びにする */
#fixed-footer-menu ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  background: #000033;
}

/* メニューの要素 */
#fixed-footer-menu li {
  justify-content: center;
  align-items: center;
  width: 20%; /* 要素が5つの場合（100/5は20%） */
  padding: 0;
  margin: 0;
}

/* メニューのボタン */
#fixed-footer-menu li a {
  color: #CCCC66;
  text-align: center;
  display: block;
  width: 100%;
  padding: 10px 0px 0px 0px;
  font-size: 8px;
  font-family: 'Montserrat', sans-serif;
  text-decoration: none;
}

/* メニュータイトル */
#fixed-footer-menu li p {
  font-size: 8px; /* メニュータイトルのフォントサイズ */
  font-family: 'Montserrat', sans-serif;
}

/* アイコンのサイズを調整 */
.footer-icon {
  font-size: 20px;
}


</style>


<style>
.buttondesign {
  display       : inline-block;
  font-family   : 'Noto Serif JP', serif;
  font-size     : 11pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 8px 7px;   /* 余白       */
  background    : #993300;     /* 背景色     */
  color         : #CCCCCC;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .2s;         /* なめらか変化 */
  border        : 0px solid #ff3333;    /* 枠の指定 */
}
.buttondesign:active {
  color         : #CCCCCC;     /* 文字色     */
  background    : #993300;     /* 背景色     */
  transform: scale(0.8);     /* ボタン押したぞ感出す     */
}

</style>


</head>

<body>

<div class="main">

<p style="text-align:center" id="start" class="start">
<img id="rotate" src="omikuji/om_top.png" alt="おみくじ"></p>
<p style="text-align:center">
<img src="" id="fortune" class="fortune"></p>
<p style="text-align:center"><button id="draw" class="buttondesign">おみくじを引く(全7種)
</button>
</p>

</div>

<p style="text-align:center">
結果パターン（全種開示リンク先）
<a href="https://happy2411d.is-mine.net/omikuji/om_d1.png">1
</a>
/
<a href="https://happy2411d.is-mine.net/omikuji/om_d2.png">2
</a>
/
<a href="https://happy2411d.is-mine.net/omikuji/om_d4.png">3
</a>
/
<a href="https://happy2411d.is-mine.net/omikuji/om_d3.png">4
</a>
/
<a href="https://happy2411d.is-mine.net/omikuji/om_d5.png">5
</a>
/
<a href="https://happy2411d.is-mine.net/omikuji/om_890.png">6
</a>
/
<a href="https://happy2411d.is-mine.net/omikuji/om_gigantmax.png">7
</a>


</style>

  <div id="fixed-footer-menu">
    <ul>
      <li><a href="https://happy2411d.is-mine.net/"><i class="fa-solid fa-list footer-icon"></i><br>
          <p>TOP</p>
        </a></li>
      <li><a href="https://happy2411d.is-mine.net/map.html"><i class="fa-solid fa-vihara footer-icon"></i><br>
          <p>MAP</p>
        </a></li>
      <li><a href="https://happy2411d.is-mine.net/kuji.html"><i class="fa-regular fa-map footer-icon"></i><br>
          <p>OMIKUJI</p>
        </a></li>
      <li><a href="https://happy2411d.is-mine.net/ema.html"><i class="fa-solid fa-pen-to-square footer-icon"></i><br>
          <p>EMA</p>
        </a></li>
      <li><a href="https://happy2411d.is-mine.net/thanks.html"><i class="fa-solid fa-dragon footer-icon"></i><br>
          <p>THANKS</p>
      <li><a href="https://happy2411d.is-mine.net/2411.html"><i class="fa-solid fa-crown footer-icon"></i><br>
          <p>2411</p>
        </a></li>
    </ul>
  </div>


<script>

 const results = [
    'omikuji/om_gigantmax.png',
    'omikuji/om_d1.png',
    'omikuji/om_d2.png',
    'omikuji/om_d3.png',
    'omikuji/om_d4.png',
    'omikuji/om_d5.png',
    'omikuji/om_890.png'
  ];


  const elem = document.getElementById('draw');
  const element = document.getElementById('start');
  const rotateItem = document.getElementById('rotate');
  const target = document.getElementById('#draw');

// ボタンを取得
        const button = document.getElementById('draw');
        // ボタンがクリックされたら非表示にするイベントリスナを設定
        button.addEventListener('click', () => {
            button.style.display = 'none';
        });

  elem.addEventListener('click', function() {
    if (element != null) {
      tatefuri();
    }
  });

  function tatefuri() {
    element.animate(
      [{
        transform: 'translateY(0)'
      }, {
        transform: 'translateY(-30px)'
      }, {
        transform: 'translateY(0)'
      }], {
        duration: 700,
        iterations: 3
      });
    setTimeout(function() {
      kaiten();
    }, 2400);
  }

  function kaiten() {
    element.animate(
      [{
        transform: 'rotate(0deg)'
      }, {
        transform: 'rotate(180deg)'
      }], {
        duration: 700,
        easing: 'linear',
        fill: 'forwards'
      });
    setTimeout(function() {
      touka();
      btn();
    }, 1000);
  }

  function btn() {
    target.animate(
      [{
        opacity: 1
      }, {
        opacity: 0
      }], {
        duration: 500,
        fill: 'forwards'
      });
    setTimeout(function() {
      target.remove();
    }, 500);
  }

  function touka() {
    element.animate(
      [{
        opacity: 1
      }, {
        opacity: 0
      }], {
        duration: 500,
        fill: 'forwards'
      });
    setTimeout(function() {
      element.remove();
      fortuneAnime();
    }, 500);
  }

  function fortuneAnime() {
    const key = Math.floor(Math.random() * results.length);
    const fortune = document.getElementById("fortune");
    fortune.src = "" + results[key];
    fortune.animate(
      [{
        transform: 'translateY(0) scale(1)'
      }, {
        transform: 'translateY(-30px)'
      }, {
        transform: 'scale(1)'
      }, {
        transform: 'scale(1.1)'
      }, {
        transform: 'translateY(0) scale(1)'
      }], {
        duration: 1000,
        fill: 'forwards'
      });
  } 
  
</script>


</body>

</div>


</html>