markinstefan.xyz/public/ru/svadba/index.html

<!DOCTYPE html>
<html lang="ru">

<head>
  <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://markinstefan.xyz/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://markinstefan.xyz/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.min.f6b1b35a7b02521b25338f6cf58975f9980a6c12847763fe35a48307758cd1e7.css" integrity="sha256-9rGzWnsCUhslM49s9Yl1&#43;ZgKbBKEd2P&#43;NaSDB3WM0ec=" crossorigin="anonymous" media="screen" />






  
    
    
    <link rel="stylesheet" href="/css/coder-dark.min.ad48f476275974885bdc03d5251e3cdbe1678c54a63ff772376b0ed2adc468dd.css" integrity="sha256-rUj0didZdIhb3APVJR482&#43;FnjFSmP/dyN2sO0q3EaN0=" crossorigin="anonymous" 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://markinstefan.xyz/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>
 
.rsvp input[type="text"],
.rsvp input[type="email"],
.rsvp input[type="tel"],
.rsvp input[type="number"],
.rsvp textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.rsvp button {
    width: 100%;
    max-width: 300px;
}

 
html,
body {
    overflow-x: hidden;
}

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;            
}

body.colorscheme-dark .wedding-container,
body.colorscheme-dark .hero,
body.colorscheme-dark .section,
body.colorscheme-dark .rsvp,
body.colorscheme-dark .countdown {
    color: #222 !important;
}

body.colorscheme-dark .section h2,
body.colorscheme-dark .hero h1,
body.colorscheme-dark label,
body.colorscheme-dark p,
body.colorscheme-dark h3 {
    color: #222 !important;
}

.wedding-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 2rem;
    font-family: system-ui, sans-serif;
    line-height: 1.6;
    color: #222;
}
  .hero {
    text-align: center;
    margin-bottom: 3rem;
    background-color: rgba(255, 255, 255, 0.65);
    padding: 1.5rem;
    border-radius: 12px;
    backdrop-filter: blur(4px);
  }

  .hero img {
    width: 100%;
    border-radius: 8px;
  }

  .hero h1 {
    font-size: 2.5rem;
    margin-bottom: 0.7rem;
  }

  .hero .date {
    font-size: 2rem;
    color: #666;
  }

  .section {
    margin-bottom: 2.5rem;
    background-color: rgba(255, 255, 255, 0.65);
    padding: 1.5rem;
    border-radius: 12px;
    backdrop-filter: blur(4px);
  }

  .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.65);
    padding: 1.5rem;
    border-radius: 12px;
    backdrop-filter: blur(4px);
  }

  .countdown {
    background-color: rgba(255, 255, 255, 0.65);
    padding: 1.5rem;
    border-radius: 12px;
    backdrop-filter: blur(4px);
    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">
    <h1>Свадьба Стефана и Марии</h1>
    <div class="date">
	    31 августа 2026 г.
    </div>
    <img src="/images/hochzeit-header.jpg" alt="Wedding Header Image">
  </div>

  
  
    <div class="section">
      <p>С радостью приглашаем вас на свадьбу Стефана и Марии!</p>
<p>Мы приглашаем вас разделить с нами этот особенный день, наполненный любовью, радостью и незабываемыми воспоминаниями!</p>
<p>С нетерпением ждем встречи с вами!</p>

    </div>
  

  
  <div class="section">
    <h2>📅 Мероприятие</h2>

  <p>
    <strong>Церемония:</strong>
    31 августа 2026 г., в 15:00
    
  </p>


      <p><strong>Начало:</strong> 15:30</p>
    

      <p><strong>Официальное завершение:</strong> 21:30</p>
    
    
      <p><strong>Место:</strong> Хаслах (Траунштайн), Германия</p>
    
  </div>

  
  
    <div class="section map">
      <h2>📍 Место</h2>
      <iframe src="https://www.google.com/maps?q=M%C3%BChlgasse+1,+83278+Traunstein-Haslach&hl=ru&z=18&output=embed" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
    </div>
  

  <div class="rsvp">
    <h2>📝 RSVP</h2>
  
    <p>Пожалуйста, ответьте до <strong>05 июля</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">

  
  <input type="hidden" name="lang" value="ru">

  

  <h3>Личная информация</h3>

<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 for="email">Адрес электронной почты:</label><br> <input type="email" id="email" name="email" required><br><br>

<label for="phone">Номер телефона:</label><br> <input type="tel" id="phone" name="phone" placeholder="+45 12 34 56 78"><br> <small>Используется для группы WhatsApp и свадебных уведомлений</small><br><br>

  

  <h3>Участие</h3>

  <input type="radio" id="attending_yes" name="attendance" value="Yes" required>
  <label for="attending_yes">Я буду присутствовать</label><br>

  <input type="radio" id="attending_no" name="attendance" value="No">
  <label for="attending_no">К сожалению, я не смогу присутствовать</label><br><br>

  

  <h3>Предпочтения по напиткам:</h3>

  <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>

  <input type="checkbox" id="water" name="drinks[]" value="Water">
  <label for="water">Вода</label><br>

  <input type="checkbox" id="cola" name="drinks[]" value="Cola">
  <label for="cola">Coca-Cola</label><br>

  <input type="checkbox" id="fanta" name="drinks[]" value="Fanta">
  <label for="fanta">Fanta</label><br><br>

  

  <h3>Предпочтения в питании</h3>

  <input type="radio" id="diet_meat" name="diet" value="Meat" required>
  <label for="diet_meat">Мясо</label><br>

  <input type="radio" id="diet_vegetarian" name="diet" value="Vegetarian">
  <label for="diet_vegetarian">Вегетарианское</label><br>

  <input type="radio" id="diet_vegan" name="diet" value="Vegan">
  <label for="diet_vegan">Веганское</label><br><br>

  

  <h3>Аллергия на</h3>

  <input type="checkbox" id="gluten" name="allergies[]" value="Gluten">
  <label for="gluten">Глютен</label><br>

  <input type="checkbox" id="lactose" name="allergies[]" value="Lactose">
  <label for="lactose">Лактоза</label><br>

  <input type="checkbox" id="nuts" name="allergies[]" value="Nuts">
  <label for="nuts">Орехи</label><br>

  <input type="checkbox" id="other_allergy" name="allergies[]" value="Other">
  <label for="other_allergy">Другое</label><br><br>

<label for="allergies_other">Дополнительная информация об аллергиях:</label><br> <input type="text" id="allergies_other" name="allergies_other"><br><br>

  

  <h3>Организация</h3>

  <input type="checkbox" id="parking" name="parking" value="Yes">
  <label for="parking">Мне требуется парковочное место</label><br>

  <input type="checkbox" id="ride_needed" name="ride_needed" value="Yes">
  <label for="ride_needed">Мне нужна помощь с поездкой</label><br>

  <input type="checkbox" id="ride_offer" name="ride_offer" value="Yes">
  <label for="ride_offer">Я могу предложить место в машине</label><br>

  <input type="checkbox" id="hotel" name="hotel" value="Yes">
  <label for="hotel">Я остановлюсь в отеле</label><br>

  <input type="checkbox" id="hotel_booked" name="hotel_booked" value="Yes">
  <label for="hotel_booked">Отель уже забронирован</label><br><br>

  

  <h3>Памятные материалы и дополнения</h3>

  <input type="checkbox" id="memory_card" name="memory_card" value="Yes">
  <label for="memory_card">Я хотел(а) бы получить памятную открытку</label><br>

  <input type="checkbox" id="photo_link" name="photo_link" value="Yes">
  <label for="photo_link">Я хотел(а) бы получить ссылку на свадебные фотографии</label><br><br>

  

  <h3>Развлечения</h3>

<label for="music_request">Музыкальное пожелание:</label><br> <input type="text" id="music_request" name="music_request"><br><br>

<label>Я хотел(а) бы внести свой вклад:</label><br>

  <input type="checkbox" id="speech" name="contribution[]" value="Speech">
  <label for="speech">Речь</label><br>

  <input type="checkbox" id="game" name="contribution[]" value="Game">
  <label for="game">Игра</label><br>

  <input type="checkbox" id="surprise" name="contribution[]" value="Surprise">
  <label for="surprise">Сюрприз</label><br>

  <input type="checkbox" id="other_contribution" name="contribution[]" value="Other">
  <label for="other_contribution">Другое</label><br><br>

  

  <h3>Дети</h3>

  <input type="radio" id="children_yes" name="children" value="Yes">
  <label for="children_yes">Да</label>

  <input type="radio" id="children_no" name="children" value="No" checked>
  <label for="children_no">Нет</label><br><br>

  <div id="children-details" style="display:none;">

```
<label for="children_count">Количество детей:</label><br>
<input type="number" id="children_count" name="children_count" min="1"><br><br>

<label for="children_ages">Возраст детей:</label><br>
<input type="text"
       id="children_ages"
       name="children_ages"
       placeholder="3, 7, 10"><br><br>
```

  </div>

  

  <h3>Сообщение молодожёнам</h3>

  <textarea id="message"
            name="message"
            rows="5"
            cols="50"></textarea><br><br>

  

  <h3>Конфиденциальность</h3>

<input type="checkbox"
      id="privacy"
      name="privacy"
      value="Yes"
      required>

  <label for="privacy">
    Я согласен(согласна) на хранение и обработку моих данных для организации свадьбы.
  </label><br><br>

  

  <input type="text" name="website" style="display:none">

  <button type="submit">
    Отправить
  </button>

</form>
  </div>

<script>
document.querySelectorAll('input[name="children"]').forEach(el => {
  el.addEventListener('change', function() {
    document.getElementById('children-details').style.display =
      this.value === 'Yes' ? 'block' : 'none';
  });
});
</script>

  
  

  
  <div class="footer">
    <p>❤️ Мы с нетерпением ждем встречи с вами ❤️</p>
  </div>

</div>

<script>
  var labels = {
    day: "Д.",
    hour: "ч.",
    minute: "м.",
    second: "c."
  };

  var countDownDate = new Date("2026-08-31 15: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.min.6ae284be93d2d19dad1f02b0039508d9aab3180a12a06dcc71b0b0ef7825a317.js" integrity="sha256-auKEvpPS0Z2tHwKwA5UI2aqzGAoSoG3McbCw73gloxc="></script>
  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  
</body>

</html>