iroxol/markinstefan.xyz
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated Form with E-Mail and JS-obfuscation

Browse Source
This commit is contained in:
spetznas
2026-05-17 08:39:09 +02:00
parent 1cb22384fd
commit 69a5cc6ee0
29 changed files with 1703 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/wedding/index.html
+541 -6
View File
@@ -1,9 +1,544 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>http://localhost:1313/marriage/</title>
<link rel="canonical" href="http://localhost:1313/marriage/">
<meta charset="utf-8">
<meta http-equiv="refresh" content="0; url=http://localhost:1313/marriage/">
</head>
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<title>Markin Stefan</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<meta name="author" content="Markin Stefan">
<meta name="description" content="We are happy to invite you to our wedding of Stefan and Mariia!
Join us in celebrating this special day with love, joy, and wonderful memories.
We look forward to seeing you there!">
<meta name="keywords" content="blog,developer,personal">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Marriage of Stefan and Mariia">
<meta name="twitter:description" content="We are happy to invite you to our wedding of Stefan and Mariia!
Join us in celebrating this special day with love, joy, and wonderful memories.
We look forward to seeing you there!">
<meta property="og:url" content="http://localhost:1313/wedding/">
<meta property="og:site_name" content="Markin Stefan">
<meta property="og:title" content="Marriage of Stefan and Mariia">
<meta property="og:description" content="We are happy to invite you to our wedding of Stefan and Mariia!
Join us in celebrating this special day with love, joy, and wonderful memories.
We look forward to seeing you there!">
<meta property="og:locale" content="en">
<meta property="og:type" content="article">
<link rel="canonical" href="http://localhost:1313/wedding/">
<link rel="preload" href="/fonts/fa-brands-400.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/fa-regular-400.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="/css/coder.css" media="screen">
<link rel="stylesheet" href="/css/coder-dark.css" media="screen">
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" sizes="any">
<link rel="icon" type="image/png" href="/images/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/images/favicon-16x16.png" sizes="16x16">
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/images/safari-pinned-tab.svg" color="#5bbad5">
</head>
<body class="preload-transitions colorscheme-auto">
<div class="float-container">
<a id="dark-mode-toggle" class="colorscheme-toggle">
<i class="fa-solid fa-adjust fa-fw" aria-hidden="true"></i>
</a>
</div>
<main class="wrapper">
<nav class="navigation">
<section class="container">
<a class="navigation-title" href="http://localhost:1313/">
Markin Stefan
</a>
<input type="checkbox" id="menu-toggle" />
<label class="menu-button float-right" for="menu-toggle">
<i class="fa-solid fa-bars fa-fw" aria-hidden="true"></i>
</label>
<ul class="navigation-list">
<li class="navigation-item">
<a class="navigation-link " href="/about/">About</a>
</li>
<li class="navigation-item">
<a class="navigation-link " href="/projects/">Projects</a>
</li>
<li class="navigation-item">
<a class="navigation-link " href="/contact/">Contact me</a>
</li>
<li class="navigation-item menu-separator">
<span>|</span>
</li>
<li class="navigation-item">
<a href="/de/hochzeit/">🇩🇪</a>
</li>
<li class="navigation-item">
<a href="/ru/svadba/">🇷🇺</a>
</li>
</ul>
</section>
</nav>
<div class="content">
<style>
body {
background-color: #fff;
color: #222;
background-image: url('/images/hochzeit-bg.jpg');
background-size: cover;
background-position: center;
background-repeat: repeat;
border-radius: 8px;
}
.wedding-container {
max-width: 1600px;
margin: 0 auto;
padding: 2rem;
font-family: system-ui, sans-serif;
line-height: 1.6;
}
.hero {
text-align: center;
margin-bottom: 3rem;
}
.hero img {
width: 100%;
border-radius: 8px;
}
.hero h1 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
.hero .date {
font-size: 1.2rem;
color: #666;
}
.section {
margin-bottom: 2.5rem;
}
.section h2 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
border-bottom: 1px solid #eee;
padding-bottom: 0.3rem;
}
.map iframe {
width: 100%;
background-color: rgba(255, 255, 255, 0.5);
padding: 1rem;
height: 400px;
border: 0;
border-radius: 8px;
}
.rsvp {
background-color: rgba(255, 255, 255, 0.8);
padding: 1rem;
border-radius: 8px;
}
.countdown {
text-align: center; margin-bottom: 2rem;
font-size: 5rem;
}
.footer {
text-align: center;
margin-top: 3rem;
color: #888;
font-size: 2rem;
padding-top: 1rem;
}
.footer a {
color: #0066cc;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
</style>
<div class="wedding-container">
<style>
.music-fab {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 9999;
}
.fab-button {
width: 52px;
height: 52px;
border-radius: 50%;
border: none;
background: white;
box-shadow: 0 6px 18px rgba(0,0,0,0.2);
font-size: 20px;
cursor: pointer;
transition: transform 0.15s ease;
}
.fab-button:active {
transform: scale(0.95);
}
</style>
<div class="music-fab">
<button id="music-btn" class="fab-button">⏸️</button>
</div>
<audio id="bg-music" autoplay loop>
<source src="/audio/canon-in-d.mp3" type="audio/mpeg">
</audio>
<script>
const btn = document.getElementById("music-btn");
const audio = document.getElementById("bg-music");
audio.volume = 0.3;
let isPlaying = true;
btn.textContent = "⏸️";
audio.play().catch(() => {
isPlaying = false;
btn.textContent = "▶️";
});
btn.addEventListener("click", async () => {
if (!isPlaying) {
try {
await audio.play();
isPlaying = true;
btn.textContent = "⏸️";
} catch (e) {
console.log("Playback blocked:", e);
}
} else {
audio.pause();
isPlaying = false;
btn.textContent = "▶️";
}
});
</script>
<div class="countdown">
<h3>Countdown to our Wedding:</h3>
<p id="timer"></p>
</div>
<div class="hero">
<img src="/images/hochzeit-header.jpg" alt="Wedding Header Image">
<h1>Marriage of Stefan and Mariia</h1>
<div class="date">
August 31, 2026
</div>
</div>
<div class="section">
<p>We are happy to invite you to our wedding of Stefan and Mariia!</p>
<p>Join us in celebrating this special day with love, joy, and wonderful memories.</p>
<p>We look forward to seeing you there!</p>
</div>
<div class="section">
<h2>📅 Event</h2>
<p>
<strong>Ceremony:</strong>
August 31, 2026, at 14:00
</p>
<p><strong>Reception:</strong> 17:00</p>
<p><strong>Location:</strong> Munich, Germany</p>
</div>
<div class="section map">
<h2>📍 Location</h2>
<iframe src="https://www.google.com/maps?q=Russische+Orthodoxe+Kirche+Auferstehungs-Gemeinde+Dachau+M%C3%BCnchen&hl=en&z=19&output=embed" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
<div class="section rsvp">
<h2>📝 RSVP</h2>
<p>Please respond by <strong>June 30</strong>.</p>
<p>Email:
<span class="email"><b>Please enable JavaScript to see this content.</b></span>
<script>
(function() {
var email = "hochzeit@markinstefan.xyz";
var user = email.split('@')[0];
var domain = email.split('@')[1];
var link = document.createElement('a');
link.href = 'mailto:' + user + '@' + domain;
link.textContent = user + '@' + domain;
var span = document.currentScript.previousElementSibling;
span.textContent = "";
span.appendChild(link);
})();
</script>
</p>
<form action="/rsvp-submit.php" method="POST">
<label for="first_name">First name:</label><br>
<input type="text" id="first_name" name="first_name" required><br><br>
<label for="last_name">Last name:</label><br>
<input type="text" id="last_name" name="last_name" required><br><br>
<label>Drink preferences::</label><br>
<input type="checkbox" id="wine" name="drinks[]" value="Wine">
<label for="wine">Wine</label><br>
<input type="checkbox" id="beer" name="drinks[]" value="Beer">
<label for="beer">Beer</label><br>
<input type="checkbox" id="juice" name="drinks[]" value="Juice">
<label for="juice">Juice</label><br><br>
<label for="allergies">Allergic to:</label><br>
<input type="text" id="allergies" name="allergies"><br><br>
<input type="text" name="website" style="display:none">
<button type="submit">Send</button>
</form>
</div>
<div class="footer">
<p>We look forward to celebrating with you ❤️</p>
</div>
</div>
<script>
var labels = {
day: "d",
hour: "h",
minute: "m",
second: "s"
};
var countDownDate = new Date("2026-08-31 14:00").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("timer").innerHTML =
days + " " + labels.day + " " +
hours + " " + labels.hour + " " +
minutes + " " + labels.minute + " " +
seconds + " " + labels.second;
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "The big day is here!";
}
}, 1000);
</script>
</div>
<footer class="footer">
<section class="container">
©
2026
Markin Stefan
·
Powered by <a href="https://gohugo.io/" target="_blank" rel="noopener">Hugo</a> & <a href="https://github.com/luizdepra/hugo-coder/" target="_blank" rel="noopener">Coder</a>.
</section>
</footer>
</main>
<script src="/js/coder.js"></script>
</body>
</html>