<?php
require_once 'db.php';
$pdo = getDb();
// 投稿を新しい順に取得
$stmt = $pdo->query("SELECT * FROM tweets ORDER BY created_at DESC");
$tweets = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Twitterライク</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
padding: 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
background: white;
border: 2px solid #333;
}
.header {
padding: 20px;
border-bottom: 2px solid #333;
background: #fff;
}
h1 {
font-size: 18px;
color: #333;
font-weight: normal;
}
.post-form {
padding: 20px;
border-bottom: 2px solid #333;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-size: 12px;
color: #666;
text-transform: uppercase;
letter-spacing: 0.5px;
}
input[type="text"] {
width: 100%;
padding: 8px;
border: 1px solid #999;
background: white;
font-size: 14px;
font-family: Arial, sans-serif;
}
textarea {
width: 100%;
padding: 8px;
border: 1px solid #999;
background: white;
font-size: 14px;
resize: vertical;
min-height: 80px;
font-family: Arial, sans-serif;
}
button {
background-color: white;
color: #333;
border: 2px solid #333;
padding: 8px 16px;
font-weight: normal;
font-size: 14px;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.5px;
}
button:hover {
background-color: #333;
color: white;
}
.timeline {
padding: 0;
}
.timeline-header {
padding: 15px 20px;
border-bottom: 1px solid #ddd;
font-weight: normal;
font-size: 14px;
background: #fafafa;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.tweet {
padding: 20px;
border-bottom: 1px solid #ddd;
}
.tweet:last-child {
border-bottom: none;
}
.tweet-header {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid #eee;
}
.username {
font-weight: bold;
color: #333;
font-size: 14px;
}
.timestamp {
color: #999;
font-size: 12px;
}
.tweet-content {
color: #333;
font-size: 14px;
line-height: 1.6;
word-wrap: break-word;
}
.empty-state {
padding: 60px 20px;
text-align: center;
color: #999;
border: 2px dashed #ddd;
margin: 20px;
}
.empty-state p {
font-size: 14px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>[ Twitterライク ]</h1>
</div>
<div class="post-form">
<form method="post" action="post.php" onsubmit="event.preventDefault(); alert('送信ボタンを押すと、タイムラインに投稿が追加される想定です！\n実際の実装では post.php にデータが送信されます。');">
<div class="form-group">
<label>User Name</label>
<input type="text" name="username" maxlength="50" placeholder="名前を入力" required>
</div>
<div class="form-group">
<label>Tweet</label>
<textarea name="content" maxlength="280" placeholder="いまどうしてる？" required></textarea>
</div>
<button type="submit">Post Tweet</button>
</form>
</div>
<div class="timeline">
<div class="timeline-header">Timeline</div>
<?php if (empty($tweets)): ?>
<div class="empty-state">
<p>[ No Tweets Yet ]</p>
<p style="font-size: 12px; margin-top: 8px;">最初のツイートをしてみましょう</p>
</div>
<?php else: ?>
<?php foreach ($tweets as $tweet): ?>
<div class="tweet">
<div class="tweet-header">
<span class="username">@<?php echo htmlspecialchars($tweet['username']); ?></span>
<span class="timestamp"><?php echo date('Y/m/d H:i', strtotime($tweet['created_at'])); ?></span>
</div>
<div class="tweet-content">
<?php echo nl2br(htmlspecialchars($tweet['content'])); ?>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
</body>
</html>
