<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ARTBOOK - アートSNS</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #f9fafb;
color: #333;
}
header {
background-color: #4a5568;
color: white;
padding: 1.5rem;
text-align: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
header h1 {
margin: 0;
font-size: 2.5rem;
}
header p {
margin: 0.5rem 0;
font-size: 1.2rem;
}
header nav {
margin-top: 1rem;
}
header nav a {
color: white;
text-decoration: none;
margin: 0 1rem;
font-weight: bold;
font-size: 1.1rem;
padding: 0.5rem 1rem;
border-radius: 5px;
transition: background-color 0.3s;
}
header nav a:hover {
background-color: #2d3748;
}
.container {
max-width: 1200px;
margin: 2rem auto;
padding: 1rem;
}
.form-group {
margin-bottom: 1rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: bold;
}
.form-group input, .form-group textarea {
width: 100%;
padding: 0.8rem;
border: 1px solid #d2d6dc;
border-radius: 6px;
background-color: #f7fafc;
font-size: 1rem;
}
.form-group button {
background-color: #3182ce;
color: white;
border: none;
padding: 0.8rem 1.5rem;
font-size: 1rem;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s;
}
.form-group button:hover {
background-color: #2b6cb0;
}
.profile {
text-align: center;
}
.profile img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 1rem;
}
footer {
text-align: center;
padding: 1.5rem;
background-color: #4a5568;
color: white;
margin-top: 2rem;
}
footer p {
margin: 0;
font-size: 1rem;
}
</style>
</head>
<body>
<header>
<h1>ARTBOOK</h1>
<p>あなたのアートをシェアしよう！</p>
<nav>
<a href="#home" onclick="navigateTo('home')">ホーム</a>
<a href="#gallery" onclick="navigateTo('gallery')">作品一覧</a>
<a href="#post" onclick="navigateTo('post')">投稿する</a>
<a href="#profile" onclick="navigateTo('profile')">プロフィール</a>
</nav>
</header>
<div id="content" class="container">
<!-- コンテンツがここに動的に挿入されます -->
</div>
<footer>
<p>© 2025 ARTBOOK. All Rights Reserved.</p>
</footer>
<script>
let posts = JSON.parse(localStorage.getItem('posts')) || [];
let profile = JSON.parse(localStorage.getItem('profile')) || {
name: "未設定",
bio: "ここに自己紹介が表示されます",
image: "https://via.placeholder.com/150"
};
function navigateTo(section) {
const content = document.getElementById('content');
content.innerHTML = '';
if (section === 'home') {
content.innerHTML = `<h2>ホーム</h2><p>ようこそ、ARTBOOKへ！最新のアート作品をご覧ください。</p>`;
} else if (section === 'gallery') {
content.innerHTML = `<h2>作品一覧</h2><div id='gallery'>${renderPosts()}</div>`;
} else if (section === 'post') {
content.innerHTML = `
<h2>投稿する</h2>
<form id="postForm">
<div class="form-group">
<label for="title">タイトル</label>
<input type="text" id="title" name="title" required>
</div>
<div class="form-group">
<label for="description">説明</label>
<textarea id="description" name="description" rows="4" required></textarea>
</div>
<div class="form-group">
<label for="upload">画像アップロード</label>
<input type="file" id="upload" name="upload" accept="image/*" required>
</div>
<div class="form-group">
<button type="button" onclick="submitPost()">投稿する</button>
</div>
</form>`;
} else if (section === 'profile') {
content.innerHTML = `
<h2>プロフィール</h2>
<div class="profile">
<img src="${profile.image}" alt="プロフィール画像">
<h3>${profile.name}</h3>
<p>${profile.bio}</p>
<form id="profileForm">
<div class="form-group">
<label for="name">名前</label>
<input type="text" id="name" value="${profile.name}" required>
</div>
<div class="form-group">
<label for="bio">自己紹介</label>
<textarea id="bio" rows="4" required>${profile.bio}</textarea>
</div>
<div class="form-group">
<label for="profileImage">プロフィール画像</label>
<input type="file" id="profileImage" accept="image/*">
</div>
<div class="form-group">
<button type="button" onclick="updateProfile()">更新する</button>
</div>
</form>
</div>`;
}
}
function submitPost() {
const title = document.getElementById('title').value;
const description = document.getElementById('description').value;
const upload = document.getElementById('upload').files[0];
if (title && description && upload) {
const reader = new FileReader();
reader.onload = function(event) {
posts.push({ title, description, image: event.target.result });
localStorage.setItem('posts', JSON.stringify(posts));
alert('投稿が完了しました！');
navigateTo('gallery');
};
reader.readAsDataURL(upload);
} else {
alert('すべてのフィールドを入力してください。');
}
}
function updateProfile() {
const name = document.getElementById('name').value;
const bio = document.getElementById('bio').value;
const profileImage = document.getElementById('profileImage').files[0];
if (name && bio) {
if (profileImage) {
const reader = new FileReader();
reader.onload = function(event) {
profile.image = event.target.result;
saveProfile(name, bio);
};
reader.readAsDataURL(profileImage);
} else {
saveProfile(name, bio);
}
} else {
alert('すべてのフィールドを入力してください。');
}
}
function saveProfile(name, bio) {
profile.name = name;
profile.bio = bio;
localStorage.setItem('profile', JSON.stringify(profile));
alert('プロフィールが更新されました！');
navigateTo('profile');
}
function renderPosts() {
if (posts.length === 0) {
return '<p>まだ投稿がありません。</p>';
}
return posts.map(post => `
<div class="art-card">
<img src="${post.image}" alt="${post.title}">
<h2>${post.title}</h2>
<p>${post.description}</p>
</div>`).join('');
}
// 初期表示
navigateTo('home');
</script>
</body>
</html>
