<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JobFinder - 求人掲示板</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { font-family: sans-serif; background: #f4f4f4; margin: 0; }
header { background: #007bff; color: white; padding: 1rem; text-align: center; }
main { padding: 2rem; max-width: 900px; margin: auto; }
.search-bar, .post-form { background: white; padding: 1rem; border-radius: 8px; margin-bottom: 2rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.job-card {
background: white; padding: 1rem; margin-bottom: 1rem;
border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.job-card h2 { margin-top: 0; }
.job-card button {
background: #007bff; color: white;
border: none; padding: 0.5rem 1rem;
border-radius: 4px; cursor: pointer;
}
.job-card button:hover { background: #0056b3; }
.modal {
display: none; position: fixed; z-index: 999;
left: 0; top: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.5);
justify-content: center; align-items: center;
}
.modal-content {
background: white; padding: 2rem;
border-radius: 8px; max-width: 500px;
}
label, input, textarea, select {
display: block; width: 100%; margin-bottom: 10px;
}
button[type="submit"] {
background: #28a745;
color: white;
padding: 0.5rem 1rem;
border: none;
border-radius: 4px;
}
</style>
</head>
<body>
<header>
<h1>JobFinder - 求人掲示板</h1>
</header>
<main>
<!-- 🔍 検索バー -->
<div class="search-bar">
<h3>🔍 求人検索</h3>
<input type="text" id="searchLocation" placeholder="勤務地で検索（例: 東京）">
<button onclick="filterJobs()">検索</button>
</div>
<!-- 📋 求人一覧 -->
<div id="jobList"></div>
<!-- 📝 求人投稿フォーム -->
<div class="post-form">
<h3>📝 新しい求人を投稿</h3>
<input type="text" id="jobTitle" placeholder="職種（例: Webエンジニア）">
<input type="text" id="jobCompany" placeholder="会社名">
<input type="text" id="jobLocation" placeholder="勤務地（例: 東京）">
<textarea id="jobDescription" rows="3" placeholder="仕事内容を入力..."></textarea>
<button onclick="addJob()">求人を投稿</button>
</div>
</main>
<!-- 📄 モーダル -->
<div class="modal" id="jobModal">
<div class="modal-content" id="modalContent"></div>
</div>
<script>
let jobs = [
{
title: "Webエンジニア",
company: "株式会社テック",
location: "東京",
description: "ReactやVueを用いた開発。経験者優遇。"
},
{
title: "営業職",
company: "セールス株式会社",
location: "大阪",
description: "法人営業経験者歓迎。"
}
];
function displayJobs(filteredJobs = jobs) {
const jobList = document.getElementById("jobList");
jobList.innerHTML = "";
filteredJobs.forEach((job, index) => {
const card = document.createElement("div");
card.className = "job-card";
card.innerHTML = `
<h2>${job.title}</h2>
<p><strong>会社:</strong> ${job.company}</p>
<p><strong>勤務地:</strong> ${job.location}</p>
<button onclick="showDetails(${index})">詳細を見る</button>
`;
jobList.appendChild(card);
});
}
function showDetails(index) {
const job = jobs[index];
const modal = document.getElementById("jobModal");
const modalContent = document.getElementById("modalContent");
modalContent.innerHTML = `
<h2>${job.title}</h2>
<p><strong>会社:</strong> ${job.company}</p>
<p><strong>勤務地:</strong> ${job.location}</p>
<p>${job.description}</p>
<button onclick="alert('応募完了しました！')">応募する</button>
<button onclick="document.getElementById('jobModal').style.display='none'">閉じる</button>
`;
modal.style.display = "flex";
}
function addJob() {
const title = document.getElementById("jobTitle").value;
const company = document.getElementById("jobCompany").value;
const location = document.getElementById("jobLocation").value;
const description = document.getElementById("jobDescription").value;
if (title && company && location && description) {
jobs.push({ title, company, location, description });
displayJobs();
document.getElementById("jobTitle").value = "";
document.getElementById("jobCompany").value = "";
document.getElementById("jobLocation").value = "";
document.getElementById("jobDescription").value = "";
} else {
alert("すべての項目を入力してください");
}
}
function filterJobs() {
const keyword = document.getElementById("searchLocation").value.trim();
const filtered = jobs.filter(job => job.location.includes(keyword));
displayJobs(filtered);
}
// 初期表示
displayJobs();
window.onclick = function(event) {
const modal = document.getElementById("jobModal");
if (event.target === modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
