Updated Form with E-Mail and JS-obfuscation

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
+541 -6
View File
@@ -1,9 +1,544 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<title>http://localhost:1313/ru/marriage/</title>
<link rel="canonical" href="http://localhost:1313/ru/marriage/">
<meta charset="utf-8">
<meta http-equiv="refresh" content="0; url=http://localhost:1313/ru/marriage/">
</head>
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<title>Маркин Степан</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="Маркин Степан">
<meta name="description" content="С радостью приглашаем вас на свадьбу Стефана и Марии!
Мы приглашаем вас разделить с нами этот особенный день, наполненный любовью, радостью и незабываемыми воспоминаниями!
С нетерпением ждем встречи с вами!">
<meta name="keywords" content="blog,desenvolvedor,pessoal">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Свадьба Стефана и Марии">
<meta name="twitter:description" content="С радостью приглашаем вас на свадьбу Стефана и Марии!
Мы приглашаем вас разделить с нами этот особенный день, наполненный любовью, радостью и незабываемыми воспоминаниями!
С нетерпением ждем встречи с вами!">
<meta property="og:url" content="http://localhost:1313/ru/svadba/">
<meta property="og:site_name" content="Маркин Степан">
<meta property="og:title" content="Свадьба Стефана и Марии">
<meta property="og:description" content="С радостью приглашаем вас на свадьбу Стефана и Марии!
Мы приглашаем вас разделить с нами этот особенный день, наполненный любовью, радостью и незабываемыми воспоминаниями!
С нетерпением ждем встречи с вами!">
<meta property="og:locale" content="ru">
<meta property="og:type" content="article">
<link rel="canonical" href="http://localhost:1313/ru/svadba/">
<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/ru/">
Маркин Степан
</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="/ru/about/">Обо мне</a>
</li>
<li class="navigation-item">
<a class="navigation-link " href="/ru/projects/">Проекты</a>
</li>
<li class="navigation-item">
<a class="navigation-link " href="/ru/contact/">Контакты</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="/wedding/">🇬🇧</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>До нашей свадьбы осталось:</h3>
<p id="timer"></p>
</div>
<div class="hero">
<img src="/images/hochzeit-header.jpg" alt="Wedding Header Image">
<h1>Свадьба Стефана и Марии</h1>
<div class="date">
31 августа 2026 г.
</div>
</div>
<div class="section">
<p>С радостью приглашаем вас на свадьбу Стефана и Марии!</p>
<p>Мы приглашаем вас разделить с нами этот особенный день, наполненный любовью, радостью и незабываемыми воспоминаниями!</p>
<p>С нетерпением ждем встречи с вами!</p>
</div>
<div class="section">
<h2>📅 Мероприятие</h2>
<p>
<strong>Церемония:</strong>
31 августа 2026 г., в 14:00
</p>
<p><strong>Начало:</strong> 17:00</p>
<p><strong>Место:</strong> Мюнхен, Германия</p>
</div>
<div class="section map">
<h2>📍 Место</h2>
<iframe src="https://www.google.com/maps?q=Russische+Orthodoxe+Kirche+Auferstehungs-Gemeinde+Dachau+M%C3%BCnchen&hl=ru&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>Пожалуйста, ответьте до <strong>30 июня</strong>.</p>
<p>Электронная почта:
<span class="email"><b>Пожалуйста, разрешите JavaScript для просмотра этого контента.</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">Имя:</label><br>
<input type="text" id="first_name" name="first_name" required><br><br>
<label for="last_name">Фамилия:</label><br>
<input type="text" id="last_name" name="last_name" required><br><br>
<label>Предпочтения по напиткам::</label><br>
<input type="checkbox" id="wine" name="drinks[]" value="Wine">
<label for="wine">Вино</label><br>
<input type="checkbox" id="beer" name="drinks[]" value="Beer">
<label for="beer">Пиво</label><br>
<input type="checkbox" id="juice" name="drinks[]" value="Juice">
<label for="juice">Сок</label><br><br>
<label for="allergies">Аллергия на:</label><br>
<input type="text" id="allergies" name="allergies"><br><br>
<input type="text" name="website" style="display:none">
<button type="submit">Отправить</button>
</form>
</div>
<div class="footer">
<p>❤️ Мы с нетерпением ждем встречи с вами ❤️</p>
</div>
</div>
<script>
var labels = {
day: "Д.",
hour: "ч.",
minute: "м.",
second: "c."
};
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 = "Наступил великий день!";
}
}, 1000);
</script>
</div>
<footer class="footer">
<section class="container">
©
2026
Маркин Степан
·
Работает на <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>