Shaiwase/MilenBunCard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
DeSqBlocki
2026-08-15 08:38:49 +02:00
commit bab51615c9
29 changed files with 2729 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/card.ejs
+215
View File
@@ -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>