Order sending

terms-basic.html

@@ -19,14 +19,17 @@
             background: linear-gradient(to bottom, #1a1a2e, #16213e);
             color: white;
         }
+
         header {
             text-align: center;
             padding-top: 0px;
             padding-bottom: 2rem;
         }
+
         nav {
             margin-bottom: 32px;
         }
+
         nav ul {
             list-style: none;
             padding: 0;
@@ -36,6 +39,7 @@
             gap: 2rem;
             align-items: center;
         }
+
         nav a {
             color: white;
             text-decoration: none;
@@ -44,18 +48,22 @@
             border-radius: 5px;
             transition: background-color 0.3s;
         }
+
         nav a:hover {
             background-color: rgba(255, 255, 255, 0.1);
         }
+
         nav a.brand {
             font-family: 'Space Grotesk', monospace;
             font-size: 1.4rem;
             font-weight: 600;
             color: #e94560;
         }
+
         nav a.brand:hover {
             color: #ff6b81;
         }
+
         main {
             padding: 2rem 0;
             background: rgba(255, 255, 255, 0.05);
@@ -63,15 +71,18 @@
             padding: 2rem;
             backdrop-filter: blur(5px);
         }
+
         footer {
             text-align: center;
             padding: 1rem 0;
             margin-top: 2rem;
             border-top: 1px solid rgba(255, 255, 255, 0.2);
         }
+
         h1, h2 {
             text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
         }
+
         .specs-table {
             width: 100%;
             border-collapse: collapse;
@@ -80,18 +91,22 @@
             border-radius: 8px;
             overflow: hidden;
         }
+
         .specs-table th, .specs-table td {
             padding: 1rem;
             text-align: left;
             border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         }
+
         .specs-table th {
             background: rgba(233, 69, 96, 0.2);
             color: #e94560;
         }
+
         .specs-table tr:last-child td {
             border-bottom: none;
         }
+
         .request-form {
             background: rgba(233, 69, 96, 0.1);
             border-radius: 8px;
@@ -102,11 +117,13 @@
             margin-left: auto;
             margin-right: auto;
         }
+
         .request-form h3 {
             color: #e94560;
             margin-top: 0;
             text-align: center;
         }
+
         .request-form input,
         .request-form textarea,
         .request-form select {
@@ -120,19 +137,23 @@
             font-family: inherit;
             box-sizing: border-box;
         }
+
         .request-form input:focus,
         .request-form textarea:focus,
         .request-form select:focus {
             outline: none;
             border-color: #e94560;
         }
+
         .request-form select {
             cursor: pointer;
         }
+
         .request-form select option {
             background: #1a1a2e;
             color: white;
         }
+
         .request-form button {
             background: #e94560;
             color: white;
@@ -143,9 +164,11 @@
             font-size: 1rem;
             transition: background-color 0.3s;
         }
+
         .request-form button:hover {
             background: #ff6b81;
         }
+
         .terms-section h3 {
             color: #e94560;
             margin-top: 2rem;
@@ -219,7 +242,8 @@
             <li><a href="flagships.html">Флагманы</a></li>
             <li><a href="index.html#projects">Другие проекты</a></li>
             <li><a href="services.html">Услуги</a></li>
-                <li><a href="https://github.com/YaslePoy" class="github-link" target="_blank"><img src="img/github-mark-white.svg" alt="GitHub">GitHub</a></li>
+            <li><a href="https://github.com/YaslePoy" class="github-link" target="_blank"><img
+                    src="img/github-mark-white.svg" alt="GitHub">GitHub</a></li>
         </ul>
     </nav>
     <h1>Условия использования простого хостинга</h1>
@@ -227,7 +251,8 @@
 
 <main>
     <h2>Оборудование</h2>
-        <p>Для простого хостинга используется Raspberry Pi 5 - это одноплатный компьютер, который представляет собой полноценную вычислительную систему размером с банковскую карту.</p>
+    <p>Для простого хостинга используется Raspberry Pi 5 - это одноплатный компьютер, который представляет собой
+        полноценную вычислительную систему размером с банковскую карту.</p>
 
     <h3>Характеристики используемой модели:</h3>
     <table class="specs-table">
@@ -307,12 +332,13 @@
             </tr>
         </table>
     </div>
-        <p style="margin-top: 1rem; font-style: italic;">* Каждый слот представляет собой изолированное окружение с гарантированными ресурсами.<br>
+    <p style="margin-top: 1rem; font-style: italic;">* Каждый слот представляет собой изолированное окружение с
+        гарантированными ресурсами.<br>
         ** При недельной аренде предоставляется полный доступ к серверу на 7 дней.</p>
 
     <div class="request-form">
         <h3>Оставить заявку</h3>
-            <form action="#" method="POST">
+        <form action="#" method="POST" onsubmit="order(event); this.reset(); return false;">
             <div>
                 <label for="name">Ваше имя:</label>
                 <input type="text" id="name" name="name" required>
@@ -345,27 +371,30 @@
                 <label for="message">Опишите ваш проект:</label>
                 <textarea id="message" name="message" rows="4" required></textarea>
             </div>
-                <button type="submit" onclick="order()">Отправить заявку</button>
+            <button type="submit">Отправить заявку</button>
         </form>
 
         <script>
-                async function order() {
+            async function order(event) {
-                    let currentOrder = {
+                event.preventDefault();
+
+                const currentOrder = {
                     name: document.getElementById("name").value,
                     email: document.getElementById("email").value,
                     slots: parseInt(document.getElementById("slots").value),
-                        period: parseInt(document.getElementById("period").value),
+                    rent_type: parseInt(document.getElementById("period").value),
                     server_type: 0,
                     project: document.getElementById("message").value,
-                    }
+                };
-                    alert(JSON.stringify(currentOrder))
+
-                    await fetch("http://api.micialware.ru/order", {
+
-                        method: "POST",
+                await fetch('http://localhost:81/order', {
+                    method: 'POST',
                     headers: {
-                            'Content-Type': 'application/json;charset=utf-8'
+                        'Content-Type': 'application/json'
                     },
                     body: JSON.stringify(currentOrder)
-                    })
+                });
             }
         </script>
     </div>

terms-unlimited.html

@@ -301,7 +301,7 @@
 
         <div class="request-form">
             <h3>Оставить заявку</h3>
-            <form action="#" method="POST">
+            <form action="#" method="POST" onsubmit="order(event); this.reset(); return false;">
                 <div>
                     <label for="name">Ваше имя:</label>
                     <input type="text" id="name" name="name" required>
@@ -332,8 +332,8 @@
                     <label for="period">Период аренды:</label>
                     <select id="period" name="period" required>
                         <option value="">Выберите период</option>
-                        <option value="week">Неделя (200₽/слот)</option>
+                        <option value="0">Неделя (200₽/слот)</option>
-                        <option value="month">Месяц (400₽/слот)</option>
+                        <option value="1">Месяц (400₽/слот)</option>
                     </select>
                 </div>
                 <div>
@@ -342,6 +342,34 @@
                 </div>
                 <button type="submit">Отправить заявку</button>
             </form>
+            <script>
+                async function order(event) {
+                    event.preventDefault();
+
+                    const currentOrder = {
+                        name: document.getElementById("name").value,
+                        email: document.getElementById("email").value,
+                        slots: parseInt(document.getElementById("slots").value),
+                        rent_type: parseInt(document.getElementById("period").value),
+                        server_type: 1,
+                        project: document.getElementById("message").value,
+                    };
+
+                    try {
+                        await fetch('http://micialware.ru:81/order', {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify(currentOrder)
+                        });
+                        return false;
+                    }catch (e){
+                        return true
+                    }
+
+                }
+            </script>
         </div>
     </main>