<?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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background-color: #f0f2f5;
padding: 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
background: white;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.header {
padding: 20px;
border-bottom: 1px solid #e1e8ed;
}
h1 {
font-size: 20px;
color: #1da1f2;
}
.post-form {
padding: 20px;
border-bottom: 1px solid #e1e8ed;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: 600;
font-size: 14px;
color: #657786;
}
input[type="text"] {
width: 100%;
padding: 10px;
border: 1px solid #e1e8ed;
border-radius: 4px;
font-size: 14px;
}
textarea {
width: 100%;
padding: 10px;
border: 1px solid #e1e8ed;
border-radius: 4px;
font-size: 15px;
resize: vertical;
min-height: 80px;
font-family: inherit;
}
button {
background-color: #1da1f2;
color: white;
border: none;
padding: 10px 20px;
border-radius: 9999px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: background-color 0.2s;
}
button:hover {
background-color: #1a91da;
}
.timeline {
padding: 0;
}
.timeline-header {
padding: 15px 20px;
border-bottom: 1px solid #e1e8ed;
font-weight: 700;
font-size: 16px;
}
.tweet {
padding: 15px 20px;
border-bottom: 1px solid #e1e8ed;
transition: background-color 0.2s;
}
.tweet:hover {
background-color: #f7f9fa;
}
.tweet-header {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
.username {
font-weight: 700;
color: #14171a;
font-size: 15px;
}
.timestamp {
color: #657786;
font-size: 13px;
}
.tweet-content {
color: #14171a;
font-size: 15px;
line-height: 1.5;
word-wrap: break-word;
}
.empty-state {
padding: 40px 20px;
text-align: center;
color: #657786;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🐦 Twitterライク</h1>
</div>
<div class="post-form">
<form method="post" action="post.php">
<div class="form-group">
<label>ユーザー名</label>
<input type="text" name="username" maxlength="50" placeholder="名前を入力" required>
</div>
<div class="form-group">
<label>つぶやき</label>
<textarea name="content" maxlength="280" placeholder="いまどうしてる？" required></textarea>
</div>
<button type="submit">ツイートする</button>
</form>
</div>
<div class="timeline">
<div class="timeline-header">タイムライン</div>
<?php if (empty($tweets)): ?>
<div class="empty-state">
<p>まだ投稿がありません</p>
<p style="font-size: 13px; 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>
