<!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="music_styles.css">
</head>
<body>
<h1>音楽検索システム</h1>
<form action="music_search.rb" method="GET">
<fieldset>
<legend>ジャンル</legend>
<label><input type="checkbox" name="genre" value="J-POP"> J-POP</label>
<label><input type="checkbox" name="genre" value="アニメソング"> アニメソング</label>
<label><input type="checkbox" name="genre" value="ロック"> ロック</label>
<label><input type="checkbox" name="genre" value="シティポップ"> シティポップ</label>
</fieldset>
<fieldset>
<legend>気分・感情</legend>
<label><input type="radio" name="mood" value="upbeat"> アップビート</label>
<label><input type="radio" name="mood" value="touching"> 切ない曲</label>
<label><input type="radio" name="mood" value="inspiring"> 励ましてくれる曲</label>
</fieldset>
<fieldset>
<legend>年代指定</legend>
<div class="year-range">
<input type="number" name="year_start" placeholder="">
<span>年から</span>
<input type="number" name="year_end" placeholder="">
<span>年まで</span>
</div>
</fieldset>
<div class="submit-button">
<input type="submit" value="検索">
<input type="reset" value="リセット">
</div>
</form>
<div id="random-song">
<h2>ランダムな曲を表示:</h2>
<form action="music_search.rb?random=true" method="GET">
<input type="submit" value="ランダムな曲を表示">
</form>
</div>
</body>
</html>
