init
This commit is contained in:
DeSqBlocki
+215
@@ -0,0 +1,215 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="<%= langData.lang %>">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1024">
|
||||
<meta property="og:title" content="<%= langData.title %>" />
|
||||
<meta property="og:description" content="<%= langData.description %>" />
|
||||
<meta property="og:image" content="/previews/card.png" />
|
||||
<meta property="og:url" content="/card/<%= langData.lang %>" />
|
||||
<meta property="og:type" content="website" />
|
||||
<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/card.css">
|
||||
|
||||
|
||||
</head>
|
||||
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
|
||||
|
||||
<body>
|
||||
<!-- Language Switcher -->
|
||||
<div class="language-switcher">
|
||||
<a href="/card/en">English</a> |
|
||||
<a href="/card/de">Deutsch</a>
|
||||
</div>
|
||||
|
||||
<!-- Menu Button and Menu -->
|
||||
<header>
|
||||
<button class="menu-btn" id="menu-btn" 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="hover-hint"> <%= langData.hover_hint %> </div>
|
||||
<div class="invitation-card">
|
||||
<div class="card-inner">
|
||||
<!-- Front of the card -->
|
||||
<div class="card-front">
|
||||
<img src="/images/card_front.png" alt="Front of Invitation" class="card-image">
|
||||
<div class="title-text">
|
||||
<h1>
|
||||
<u style="text-decoration-color: rgba(249, 104, 14, 0.671); text-decoration-thickness: 2px">Save the Date</u>
|
||||
</h1>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- Back of the card -->
|
||||
<div class="card-back">
|
||||
<img src="/images/card_back.png" alt="Back of Invitation" class="card-image">
|
||||
<div class="card-text custom-text-align">
|
||||
<p>
|
||||
<%= langData.front_invation_1 %>
|
||||
</p>
|
||||
<p>
|
||||
<%= langData.front_invation_2 %>
|
||||
</p>
|
||||
<p>
|
||||
<%= langData.front_invation_3 %>
|
||||
</p>
|
||||
<br>
|
||||
<h2>
|
||||
<%= langData.back_info %>
|
||||
</h2>
|
||||
<br>
|
||||
<p>
|
||||
<%= langData.back_style %>
|
||||
</p>
|
||||
<p>
|
||||
<%= langData.back_rules %>
|
||||
</p>
|
||||
<br>
|
||||
<p>
|
||||
<%= langData.back_afterword %>
|
||||
</p>
|
||||
<p>
|
||||
<%= langData.back_signed %>
|
||||
</p>
|
||||
<br><br>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// <h2>
|
||||
// <p>
|
||||
// <%= langData.back_countdown %>
|
||||
// <div id="countdown"></div>
|
||||
// </p>
|
||||
// </h2>
|
||||
// // Convert the Unix timestamp (seconds) to milliseconds
|
||||
// const targetDate = new Date(1727528400 * 1000);
|
||||
|
||||
// function updateCountdown() {
|
||||
// const now = new Date();
|
||||
// const timeDifference = targetDate - now;
|
||||
|
||||
// if (timeDifference <= 0) {
|
||||
// document.getElementById('countdown').innerHTML = 'Time\'s up!';
|
||||
// clearInterval(countdownInterval); // Stop the interval when the countdown reaches 0
|
||||
// return;
|
||||
// }
|
||||
|
||||
// const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
|
||||
// const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
// const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
|
||||
// const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
|
||||
|
||||
// document.getElementById('countdown').innerHTML =
|
||||
// days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
|
||||
// }
|
||||
|
||||
// // Update the countdown every second
|
||||
// const countdownInterval = setInterval(updateCountdown, 1000);
|
||||
// updateCountdown(); // Initial call to set the countdown immediately
|
||||
|
||||
document.querySelector('.invitation-card').addEventListener('mouseenter', () => {
|
||||
var duration = 1 * 1000;
|
||||
var animationEnd = Date.now() + duration;
|
||||
var skew = 1;
|
||||
|
||||
function randomInRange(min, max) {
|
||||
return Math.random() * (max - min) + min;
|
||||
}
|
||||
|
||||
(function frame() {
|
||||
var timeLeft = animationEnd - Date.now();
|
||||
var ticks = Math.max(200, 500 * (timeLeft / duration));
|
||||
skew = Math.max(0.8, skew - 0.001);
|
||||
|
||||
confetti({
|
||||
particleCount: 1,
|
||||
startVelocity: 0,
|
||||
ticks: ticks,
|
||||
origin: {
|
||||
x: Math.random(),
|
||||
// since particles fall down, skew start toward the top
|
||||
y: (Math.random() * skew) - 0.2
|
||||
},
|
||||
colors: ['#da7ff0'],
|
||||
shapes: ['circle'],
|
||||
gravity: randomInRange(0.4, 0.6),
|
||||
scalar: randomInRange(0.4, 2),
|
||||
drift: randomInRange(-0.4, 1)
|
||||
});
|
||||
|
||||
if (timeLeft > 0) {
|
||||
requestAnimationFrame(frame);
|
||||
}
|
||||
}());
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const card = document.querySelector('.invitation-card');
|
||||
const hoverHint = document.querySelector('.hover-hint');
|
||||
|
||||
let hoverTimeout;
|
||||
|
||||
function showHint() {
|
||||
hoverHint.style.opacity = '1';
|
||||
}
|
||||
|
||||
function hideHint() {
|
||||
hoverHint.style.opacity = '0';
|
||||
}
|
||||
|
||||
// Show the hover hint after 5 seconds
|
||||
hoverTimeout = setTimeout(showHint, 5000);
|
||||
|
||||
// On hover, flip the card and hide the hover hint
|
||||
card.addEventListener('mouseenter', function() {
|
||||
hideHint();
|
||||
clearTimeout(hoverTimeout);
|
||||
card.classList.add('flipped');
|
||||
});
|
||||
|
||||
// On mouse leave, flip the card back and reset hint timer
|
||||
card.addEventListener('mouseleave', function() {
|
||||
card.classList.remove('flipped');
|
||||
hoverTimeout = setTimeout(showHint, 5000);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,93 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="<%= langData.lang %>">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1024">
|
||||
<meta property="og:title" content="<%= langData.title %>" />
|
||||
<meta property="og:description" content="<%= langData.description %>" />
|
||||
<meta property="og:image" content="/previews/countdown.png" />
|
||||
<meta property="og:url" content="/countdown/<%= langData.lang %>" />
|
||||
<meta property="og:type" content="website" />
|
||||
<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/countdown.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Language Switcher -->
|
||||
<div class="language-switcher">
|
||||
<a href="/countdown/en">English</a> |
|
||||
<a href="/countdown/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="countdown-card">
|
||||
<p class="countdown-title"></p>
|
||||
<h2 class="countdown">
|
||||
<u style="color: rgba(0, 0, 0, 0.5); text-decoration-color: rgba(0, 0, 0, 0.5); text-decoration-thickness: 2px"><%= langData.countdown_text %></u>
|
||||
<p>
|
||||
<div id="countdown"></div>
|
||||
</p>
|
||||
</h2>
|
||||
</div>
|
||||
<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>
|
||||
//Convert the Unix timestamp (seconds) to milliseconds
|
||||
const targetDate = new Date(1727528400 * 1000);
|
||||
const finishMessage = "<%= langData.countdown_finished %>";
|
||||
function updateCountdown() {
|
||||
const now = new Date();
|
||||
const timeDifference = targetDate - now;
|
||||
|
||||
if (timeDifference <= 0) {
|
||||
document.getElementById('countdown').innerHTML = finishMessage;
|
||||
clearInterval(countdownInterval); //Stop the interval when the countdown reaches 0
|
||||
return;
|
||||
}
|
||||
|
||||
const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
|
||||
const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
|
||||
const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
|
||||
|
||||
document.getElementById('countdown').innerHTML =
|
||||
days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
|
||||
}
|
||||
|
||||
//Update the countdown every second
|
||||
const countdownInterval = setInterval(updateCountdown, 1000);
|
||||
updateCountdown(); //Initial call to set the countdown immediately
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@@ -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