final

server/frontend/main/index.html

@@ -20,7 +20,7 @@
             <ul class="menu">
                 <!-- 1 -->
                 <li class="item">
-                    <a href="#heading" class="link">
+                    <a href="#" class="link">
                         Добро пожаловать!
                     </a>
                 </li>
@@ -87,8 +87,7 @@
         </section>
         <aside>
             <div class="time">
-                <!-- отсчет до даты -->
-                00:00:00
+                <p id="demo"></p>
             </div>
         </aside>
         <section class="people" id="people">
@@ -438,6 +437,11 @@
                 <label>Фамилия
                     <input type="text" name="lastName" id="flname" required>
                 </label>
+
+                <label class="label_1">Комментарий
+                    <textarea cols="1.5" rows="1" type="text" name="lastName" id="fename" placeholder="Напишите здесь о ваших особых предпочтениях и аллергиях"></textarea>
+                </label>
+
             </div>
 
             <!-- Средняя колонка -->
@@ -466,13 +470,16 @@
                 <label class="option"><input type="checkbox" name="drink" value="tequila" id="ctequila"> Текила</label>
             </div>
 
+
+        </form>
+        <div class="form-connect">
             <button type="submit" class="answer_btn" id="bsubmit">
                 Подтвердить участие
             </button>
-        </form>
-        <button type="logout" class="answer_btn" id="logoutForm">
+            <button type="logout" class="answer_btn" id="logoutForm">
             Выйти
-        </button>
+            </button>
+        </div>
     </div>
         </section>
     </main>

server/frontend/main/main.js

@@ -27,4 +27,33 @@ const swiper = new Swiper('.swiper', {
       },
   }
   
-});
+});
+
+// Set the date we're counting down to
+var countDownDate = new Date("Aug 22, 2026 12:00:00").getTime();
+
+// Update the count down every 1 second
+var x = setInterval(function() {
+
+  // Get today's date and time
+  var now = new Date().getTime();
+
+  // Find the distance between now and the count down date
+  var distance = countDownDate - now;
+
+  // Time calculations for days, hours, minutes and seconds
+  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);
+
+  // Display the result in the element with id="demo"
+  document.getElementById("demo").innerHTML = days + "д " + hours + "ч "
+  + minutes + "м " + seconds + "с ";
+
+  // If the count down is finished, write some text
+  if (distance < 0) {
+    clearInterval(x);
+    document.getElementById("demo").innerHTML = "EXPIRED";
+  }
+}, 1000);

server/frontend/main/style.css

@@ -440,8 +440,8 @@ h4 {
 }
 .answer_wrapper {
     background: linear-gradient(135deg, #f3d9c6, #e8c3a4, #d9a77a);
-    padding: 60px;
-    margin: 0 400px;
+    padding: 50px;
+    margin: 0 300px;
     border-radius: 25px;
     box-shadow: 0 15px 40px rgba(0,0,0,0.08);
     margin-top: 20px;
@@ -457,8 +457,15 @@ h4 {
 
 .form-info {
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: 2fr 1fr 1fr;
     gap: 50px;
+    margin-bottom: 40px;
+}
+.form-connect {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
 }
 
 .form_name {
@@ -468,7 +475,18 @@ h4 {
     gap: 20px;
     font-size: 36px;
     font-weight: 700;
+    justify-content: space-between;
+    width: 500px;
 }
+label {
+    display: flex;
+    justify-content: space-between;
+}
+.label_1 {
+    flex-direction: column;
+    gap: 20px;
+}
+
 
 .block_title {
     font-weight: 700;
@@ -483,6 +501,7 @@ h4 {
     gap: 10px;
     margin-bottom: 12px;
     font-size: 30px;
+    justify-content: start;
 }
 
 input[type="text"] {
@@ -501,7 +520,6 @@ input[type="checkbox"] {
 
 .answer_btn {
     grid-column: 1 / -1;
-    margin-top: 40px;
     padding: 18px 40px;
     border-radius: 30px;
     border: none;
@@ -527,6 +545,13 @@ input[type="checkbox"] {
     outline: none;
     font-size: 30px;
 }
+textarea {
+    padding: 0 20px;
+    border-radius: 25px;
+    border: none;
+    background-color: #ffffff;
+    font-size: 30px;
+}
 
 /* -----------------------------FOOTER---------------------------------- */