init
This commit is contained in:
DeSqBlocki
@@ -0,0 +1,145 @@
|
||||
<!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">×</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>
|
||||
Reference in New Issue
Block a user