<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生年月日で💎宝石💎診断!!</title>
<link rel="stylesheet" href="houseki.css">
<script src="houseki.js" defer></script>
</head>
<body>
<form method="POST" action="./houseki.rb">
<div class="loader">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>
<div class="bg-transparent">
<h1>Birthstone Search</h1>
<p>あなたに属する宝石を占います!!</p>
<h3>誕生石とは?</h3>
<p>誕生石とは、1月から12月までそれぞれの月を象徴する宝石のこと。<br>
石には一つひとつ「石言葉」という象徴的な意味があり、自分の生まれた月の誕生石を身につけると、<br>
「石言葉」に表される宝石の持つ力が幸運を招き、災いから身を守ってくれると伝えられてきた。</p>
<h3>検索説明!!</h3>
<ul>
<li>1. ニックネームを入力してください!!</li>
<li>2. あなたの誕生日を(生まれ年は<b><span class="class0">西暦で</span></b>)入力してください!!
<br>カレンダーのマークを押すと、あなたの誕生日の日付をクリックすることで、入力することもできます!!
</li>
<li>3. 「見てみる!!」のボタンをクリックすると、あなたの誕生石を知ることができます!!</li>
</ul>
<p>==========<b>ニックネーム</b>==========</p>
<input type="text" name="example"><br>
<input type="date" name="calendar" max="9999-12-31">
<div class="button_line004">
<a href="#" style="text-align:center"><span class="class1">見てみる!!</span></a>
</div>
<h3>担当者一覧</h3>
<ul>
<li><span class="class2">齋藤 和花</span> ( プロジェクト・マネジャー 兼 発表担当 )</li>
<li><span class="class3">高橋 美鈴</span> ( Webページ担当 兼 発表担当 )</li>
<li><span class="class4">白山 幸輝</span> ( コーディング担当 兼 Webページ担当 兼 その他 )</li>
<li><span class="class5">中川 和磨</span> ( コーディング担当 兼 Webページ担当 兼 その他 )</li>
<li><span class="class6">菅野 蓮太</span> ( 発表担当 )</li>
</ul>
<button type="button" onclick="toggleImage('qr')">スマホの場合</button>
<div id="image-container-qr" style="display: none;">
<img src="housekiQR.png" alt="スマホの場合" width="100" height="100">
</div>
<button type="button" onclick="toggleImage('dictionary')">宝石辞典</button>
<div id="image-container-dictionary" style="display: none;">
<img src="hosueki_ziten.png" alt="宝石辞典" width="100" height="100">
</div>
<script>
// JavaScriptコード
function hideLoader() {
var loader = document.getElementById("loader");
loader.style.display = "none";
}
window.addEventListener("load", hideLoader);
</script>
<h3>宝石値段クイズ!!</h3>
<button onclick="displayRandomQA()">新しい問題を表示</button>
<div id="question"></div>
<div id="answer"></div>
</div>
</body>
</html>
