<!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>
<div class="spinner-box">
<div class="blue-orbit leo">
</div>
<div class="green-orbit leo">
</div>
<div class="red-orbit leo">
</div>
<div class="white-orbit w1 leo">
</div><div class="white-orbit w2 leo">
</div><div class="white-orbit w3 leo">
</div>
</div>
<div class="bg-transparent">
<ul><h1>Birthstone Search</h1></ul>
<ul><p>あなたに属する宝石を占います!!</p></ul>
<ul><h3>説明</h3></ul>
<ul>
<li>1. ニックネームを入力してください。</li>
<li>2. あなたの誕生日(生まれ年は<span class="class0">西暦で</span>)を入力してください。
<dl>カレンダーのマークを押すと、あなたの誕生日の日付をクリックすることで、入力することもできます。</dl>
</li>
<li>3. 「決定」のボタンをクリックすると、あなたの誕生石を知ることができます。</li>
</ul>
<ul><p>ニックネーム</p>
<input type="text" name="example"><br>
<input type="date" name="calendar" max="9999-12-31">
<button type="submit" name="kettei" style="text-align:center">見てみる!!</button><br></ul>
<ul><h3>担当者一覧</h3>
<li><span class="class1">齋藤 和花</span> ( プロジェクト・マネジャー 兼 発表担当 )
<li><span class="class2">高橋 美鈴</span> ( Webページ担当 兼 発表担当 )
<li><span class="class3">白山 幸輝</span> ( コーディング担当 兼 Webページ担当 兼 その他 )
<li><span class="class4">中川 和磨</span> ( コーディング担当 兼 Webページ担当 兼 その他 )
<li><span class="class5">菅野 蓮太</span> ( 発表担当 )
</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><br>
<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>
</div>
</body>
</html>
