MilenBunCard/views/guestbook.ejs

<!DOCTYPE html>
<html lang="<%= langData.lang %>">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        <%= langData.title %>
    </title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/css/guestbook.css">
</head>

<body>
    <!-- Language Switcher -->
    <div class="language-switcher">
        <a href="/guestbook/en">English</a> |
        <a href="/guestbook/de">Deutsch</a>
    </div>

    <!-- Menu Button and Menu -->
    <header>
        <button class="menu-button" id="menu-button" onclick="toggleMenu()">Menu</button>
        <nav id="menu" class="retractable-menu">
            <ul>
                <li><a href="/card/<%= langData.lang %>">
                        <%= langData.menu_card %>
                    </a></li>
                <li><a href="/guestbook/<%= langData.lang %>">
                        <%= langData.menu_guestbook %>
                    </a></li>
                <li><a href="/countdown/<%= langData.lang %>">
                        <%= langData.menu_countdown %>
                    </a></li>
                <!-- Add more menu items as needed -->
            </ul>
        </nav>
    </header>

    <script>
        function toggleMenu() {
            const menu = document.getElementById('menu');
            menu.classList.toggle('open');
        }
    </script>
    <div class="container mt-5">
        <div class="text-center mb-4">
            <h1 class="display-4 text-white">
                <%= langData.guestbook_welcome %>
            </h1>
        </div>
        <div class="card mb-4">
            <div class="card-body">

                <form action="/guestbook/new_comment" method="POST" enctype="multipart/form-data">
                    <div class="form-group">
                        <label for="name">
                            <%= langData.guestbook_name %>
                        </label>
                        <input type="text" name="name" id="name" class="form-control" required
                            placeholder="<%= langData.guestbook_name_placeholder %>">
                    </div>
                    <div class="form-group">
                        <label for="comment">
                            <%= langData.guestbook_comment %>
                        </label>
                        <textarea name="comment" id="comment" class="form-control" required
                            placeholder="<%= langData.guestbook_comment_placeholder %>"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="file">
                            <%= langData.guestbook_upload %>
                        </label>
                        <input type="file" name="file" id="file" class="form-control p-1">
                    </div>
                    <button type="submit" class="btn btn-primary">
                        <%= langData.guestbook_submit %>
                    </button>
                </form>

            </div>
        </div>

        <!-- Scrollable Previous Messages Section -->
        <div class="previous-messages">
            <h2>
                <%= langData.previous_messages %>
            </h2>
            <!-- Modal Trigger in your previous-messages section -->
            <div class="list-group scrollable-messages">
                <% messages.forEach(message=> { %>
                    <div class="list-group-item">
                        <h5 class="mb-1">
                            <%= message.name %>
                                <%= langData.messages_wrote %>
                        </h5>
                        <p class="mb-1">
                            <%= message.comment %>
                        </p>
                        <% if (message.imagePath) { %>
                            <!-- Modal Trigger: Click on the image to open the modal -->
                            <img src="<%= message.imagePath %>" class="img-fluid uploaded-image"
                                alt="User Uploaded Image" data-toggle="modal" data-target="#imageModal"
                                data-image="<%= message.imagePath %>">
                            <% } %>
                    </div>
                    <% }); %>
            </div>

            <!-- Modal Structure -->
            <div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="imageModalLabel">Image Preview</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <img src="" id="modalImage" class="img-fluid" alt="Selected Image">
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- jQuery and Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script>
        $('#imageModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget); // Button that triggered the modal
            var imageUrl = button.data('image'); // Extract image URL from data-image attribute
            var modal = $(this);
            modal.find('.modal-body #modalImage').attr('src', imageUrl); // Update the image in the modal
        });
    </script>

</body>

</html>