<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>みんなのつぶやき</title>
    <style>
        /* --- 全体のデザイン --- */
        body {
            background-color: #1a3c40; /* 深い緑色 */
            font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
            margin: 0;
            color: #fff;
            min-height: 100vh;
        }

        /* --- 背景画像エリア（修正点1：サイズ調整） --- */
        .scenery-background {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 250px; /* ★高さを350pxから250pxに小さくしました */
            
            /* 背景画像の設定 */
            /* ※ファイル名が woods.jpg でない場合は書き換えてください */
            background-image: url('woods.jpg');
            
            background-repeat: repeat-x; /* ★横に繰り返して森を続ける */
            background-position: bottom center;
            background-size: auto 100%; /* ★高さに合わせてリサイズ（巨大化を防ぐ） */
            
            z-index: 1;
            pointer-events: none;
            opacity: 0.9; /* 少し背景になじませる */
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            padding-bottom: 250px;
            position: relative;
            z-index: 5;
        }

        /* --- 1つのつぶやきのデザイン --- */
        .tweet-row {
            display: flex;
            margin-bottom: 20px;
            align-items: flex-start;
        }

        /* アイコン */
        .icon-area {
            width: 50px;
            height: 50px;
            background-color: #e0e0e0;
            border-radius: 50%;
            margin-right: 15px;
            flex-shrink: 0;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .icon-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* コンテンツ */
        .content-area {
            max-width: 80%;
        }

        .user-name {
            font-size: 12px;
            color: #ccc;
            margin-bottom: 5px;
        }

        .bubble {
            background-color: #2d5f66;
            padding: 10px 15px;
            border-radius: 15px;
            border-top-left-radius: 0;
            display: inline-block;
            font-size: 15px;
            line-height: 1.4;
        }

        .posted-image {
            margin-top: 10px;
            max-width: 100%;
            border-radius: 10px;
            display: block;
        }

        /* --- 動物たちのエリア（修正点2：ペンギンのゆがみ直し） --- */
        .footer-animals {
            position: fixed;
            bottom: 70px;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: space-around;
            
            /* ★ここが重要！画像を無理やり引き伸ばさず、下揃えにする設定 */
            align-items: flex-end; 
            
            pointer-events: none;
            z-index: 2;
        }

        .animal-icon {
            width: 80px;
            height: auto; /* 比率を保つ */
            animation: bounce 3s infinite ease-in-out;
            filter: drop-shadow(0 5px 5px rgba(0,0,0,0.5));
        }

        .animal-icon:nth-child(2) { animation-delay: 0.5s; }
        .animal-icon:nth-child(3) { animation-delay: 1.0s; }

        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        /* --- 投稿フォーム --- */
        .post-form {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #234d52;
            padding: 15px;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
            display: flex;
            gap: 10px;
            box-sizing: border-box;
            z-index: 10;
        }

        input[type="text"] {
            padding: 10px;
            border-radius: 5px;
            border: none;
            flex-grow: 1;
        }

        button {
            padding: 10px 20px;
            background-color: #f7b731;
            border: none;
            border-radius: 5px;
            color: #333;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <div class="scenery-background"></div>

    <div class="container">
        <h2 style="text-align: center; font-size: 16px; text-shadow: 1px 1px 2px #000;">みんなのつぶやき</h2>

        <div class="tweet-row" th:each="tweet : ${tweets}">
            <div class="icon-area">
                <img src="https://placehold.co/100x100/orange/white?text=User" class="icon-img">
            </div>
            <div class="content-area">
                <div class="user-name">
                    <span th:text="${tweet.name}">名前</span>
                    <span th:text="${#temporals.format(tweet.tweetDate, 'HH:mm')}" style="margin-left:10px;"></span>
                </div>
                <div class="bubble" th:text="${tweet.content}">
                    メッセージ
                </div>
                <img th:if="${tweet.imgName != null and tweet.imgName != ''}"
                     th:src="@{/images/__${tweet.imgName}__}" 
                     class="posted-image">
            </div>
        </div>
    </div>

    <div class="footer-animals">
        <img src="seal.png" class="animal-icon">
        <img src="whitebear.png" class="animal-icon">
        <img src="penguin.png" class="animal-icon">
    </div>

    <form class="post-form" action="/timeline" method="post" enctype="multipart/form-data">
        <input type="text" name="name" placeholder="名前" style="width: 20%;" required>
        <input type="text" name="content" placeholder="メッセージ..." required>
        <input type="file" name="image" style="color: #fff; width: 200px;">
        <button type="submit">送信</button>
    </form>

</body>
</html>