<!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>
<style>
body {
background-image: url('test.jpg'); /* 画像のパスを指定 */
background-size: cover; /* 画像をウィンドウ全体に表示 */
background-repeat: no-repeat; /* 画像を繰り返し表示しない */
background-color: rgba(255, 255, 255, 0.5); /* 色と透明度を指定 */
/* 他のスタイル設定 */
}
</style>
</head>
<body>
<h1>Birthstone Search</h1>
<h2>説明</h2>
<ul>
<li>1. ニックネームを入力してください。</li>
<li>2. あなたの誕生日(生まれ年は西暦で)を入力してください。
<dl>カレンダーのマークを押すと、あなたの誕生日の日付をクリックすることで、入力することもできます。</dl>
</li>
<li>3. 「決定」のボタンをクリックすると、あなたの誕生石を知ることができます。</li>
</ul>
ニックネーム:
<input type="text" name="example"><br>
<input type="date" name="calendar" max="9999-12-31">
<button type="submit">決定</button><br>
<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>
</body>
</html>
