<!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="sktmatch.css">
</head>
<body>
<div class="screen" id="home">
<h1>ファンファームへようこそ!</h1>
<button onclick="navigateTo('Recruitment')">募集ページはこちら!</button>
<button onclick="navigateTo('Apply')">応募ページはこちら!</button>
<button onclick="navigateTo('confirmation')">確認ページはこちら!</button>
</div>
<div class="screen" id="Recruitment" style="display: none;">
<h1>募集ページ</h1>
<form>
<label for="REusername">氏名を入力してください</label>
<input type="text" id="REusername" name="REusername" required>
<label for="REaddress">住所を入力してください</label>
<input type="REaddress" id="REaddress" name="REaddress" required>
<label for="REpow">バイトを行う勤務先の住所を入力して下さい</label>
<input type="REpow" id="REpow" name="REpow" required>
</form>
<button onclick="navigateTo('Recruitment1')">次へ</button>
<button onclick="navigateTo('home')">戻る</button>
</div>
<div class="screen" id="Recruitment1" style="display: none;">
<h1>募集ページ</h1>
<form>
<label for="REConAd">連絡先を入力して下さい</label>
<input type="REConAd" id="REConAd" name="REConAd" required>
<label for="REhw">時給を入力して下さい</label>
<input type="REhw" id="REhw" name="REhw" required>
<label for="REschedule">希望するバイトの曜日と時間を入力して下さい</label>
<input type="REschedule" id="REschedule" name="REschedule" required>
</form>
<button onclick="navigateTo('Recruitment2')">次へ</button>
<button onclick="navigateTo('Recruitment')">戻る</button>
</div>
<div class="screen" id="Recruitment2" style="display: none;">
<h1>募集ページ</h1>
<form>
<label for="REveg">勤務先の旬の野菜を教えて下さい</label>
<input type="REveg" id="REveg" name="REveg" required>
<label for="REbucon">業務内容を入力して下さい</label>
<input type="REbucon" id="REbucon" name="REbucon" required>
</form>
<button onclick="navigateTo('Recruitment3')">次へ</button>
<button onclick="navigateTo('Recruitment1')">戻る</button>
</div>
<div class="screen" id="Recruitment3" style="display: none;">
<h1>募集ページ</h1>
<form id="recruitmentForm">
<h2>この条件でバイト募集を行いますがよろしいですか?</h2>
<p>氏名: <span id="confirmREusername"></span></p>
<p>住所: <span id="confirmREaddress"></span></p>
<p>勤務先住所: <span id="confirmREpow"></span></p>
<p>連絡先: <span id="confirmREConAd"></span></p>
<p>時給: <span id="confirmREhw"></span></p>
<p>希望勤務時間: <span id="confirmREschedule"></span></p>
<p>旬の野菜: <span id="confirmREveg"></span></p>
<p>業務内容: <span id="confirmREbucon"></span></p>
</form>
<button onclick="saveRecruitmentData(); navigateTo('Recruitment4');">保存</button>
<button onclick="navigateTo('Recruitment')">修正</button>
</div>
<div class="screen" id="Recruitment4" style="display: none;">
<h1>募集ページ</h1>
<form id="recruitmentForm">
<h1>バイト募集が完了いたしました!<br>お疲れ様でした!</h1>
<button onclick="navigateTo('home')">ホーム画面</button>
</div>
<div class="screen" id="Apply" style="display: none;">
<h1>応募ページ</h1>
<form id="applyForm">
<label for="APusername">氏名を入力して下さい</label>
<input type="text" id="APusername" name="APusername" required>
<label for="APaddress">住所を入力して下さい</label>
<input type="text" id="APaddress" name="APaddress" required>
<label for="APConAd">連絡先を入力して下さい</label>
<input type="text" id="APConAd" name="APConAd" required>
</form>
<button onclick="navigateTo('Apply1')">次へ</button>
<button onclick="navigateTo('home')">戻る</button>
</div>
<div class="screen" id="Apply1" style="display: none;">
<h1>応募ページ</h1>
<h2>入力内容を確認して下さい</h2>
<form id="applyConfirmForm">
<p>氏名: <span id="confirmAPusername"></span></p>
<p>住所: <span id="confirmAPaddress"></span></p>
<p>連絡先: <span id="confirmAPConAd"></span></p>
</form>
<button onclick="saveApplyData(); navigateTo('Apply2');">次へ</button>
<button onclick="navigateTo('Apply')">修正</button>
</div>
<div class="screen" id="Apply2" style="display: none;">
<h1>応募ページ</h1>
<h2>バイト先を選択して下さい</h2>
<form onsubmit="return false;">
<button class="design1" onclick="navigateTo('Apply3');">バイト先
</button>
<button class="design1" onclick="navigateTo('Apply3');">バイト先
</button>
<button class="design1" onclick="navigateTo('Apply3');">バイト先</button>
</form>
<button onclick="navigateTo('home')">戻る</button>
</div>
<div class="screen" id="Apply3" style="display: none;">
<h1>応募ページ</h1>
<h2>バイトの応募要請を出しますか?</h2>
<form onsubmit="return false;">
<p>氏名: <span id="confirmREusername"></span></p>
<p>勤務先住所: <span id="confirmREpow"></span></p>
<p>連絡先: <span id="confirmREConAd"></span></p>
<p>時給: <span id="confirmREhw"></span></p>
<p>希望勤務時間: <span id="confirmREschedule"></span></p>
<p>旬の野菜: <span id="confirmREveg"></span></p>
<p>業務内容: <span id="confirmREbucon"></span></p
</form>
<button onclick="navigateTo('Apply4');">送信</button>
<button onclick="navigateTo('Apply2')">戻る</button>
</div>
<div class="screen" id="Apply4" style="display: none;">
<h1>応募ページ</h1>
<h1>バイトの応募要請が完了いたしました!<br>お疲れ様でした!</h1>
<button onclick="navigateTo('home')">ホーム画面</button>
</div>
<div class="screen" id="confirmation" style="display: none;">
<h1>確認ページ</h1>
<form onsubmit="return false;">
<h2>募集確認</h2>
<button class="design1" onclick="navigateTo('confirmation2');">募集した内容</button>
<h2>応募確認</h2>
<button class="design1" onclick="navigateTo('confirmation4');">応募先の情報</button>
</form>
<button onclick="navigateTo('home')">戻る</button>
</div>
<div class="screen" id="confirmation2" style="display: none;">
<h1>確認ページ</h1>
<h2>募集した内容</h2>
<p>氏名: <span id="confirmREusername"></span></p>
<p>住所: <span id="confirmREaddress"></span></p>
<p>勤務先住所: <span id="confirmREpow"></span></p>
<p>連絡先: <span id="confirmREConAd"></span></p>
<p>時給: <span id="confirmREhw"></span></p>
<p>希望勤務時間: <span id="confirmREschedule"></span></p>
<p>旬の野菜: <span id="confirmREveg"></span></p>
<p>業務内容: <span id="confirmREbucon"></span></p>
<button onclick="navigateTo('confirmation3')">取り消す</button>
<button onclick="navigateTo('confirmation')">戻る</button>
</div>
<div class="screen" id="confirmation3" style="display: none;">
<h1>確認ページ</h1>
<h2>バイトの募集取り消しが完了いたしました!</h2>
<button onclick="navigateTo('home')">ホーム画面</button>
</div>
<div class="screen" id="confirmation4" style="display: none;">
<h1>確認ページ</h1>
<h2>応募したバイト先の内容</h2>
<p>氏名: <span id="confirmREusername"></span></p>
<p>勤務先住所: <span id="confirmREpow"></span></p>
<p>連絡先: <span id="confirmREConAd"></span></p>
<p>時給: <span id="confirmREhw"></span></p>
<p>希望勤務時間: <span id="confirmREschedule"></span></p>
<p>旬の野菜: <span id="confirmREveg"></span></p>
<p>業務内容: <span id="confirmREbucon"></span></p>
<button onclick="navigateTo('confirmation5')">取り消す</button>
<button onclick="navigateTo('confirmation')">戻る</button>
</div>
<div class="screen" id="confirmation5" style="display: none;">
<h1>確認ページ</h1>
<h2>バイトの応募要請を取り消しました。</h2>
<button onclick="navigateTo('home')">ホーム画面</button>
</div>
<!-- 他の画面も同様に追加 (例: 仕事検索、詳細画面など) -->
<script src="sktmatch.js"></script>
</body>
</html>
