Order sending

2025-06-05 22:44:32 +03:00
parent 1fe32563d0
commit 372c7ac12b
2 changed files with 205 additions and 148 deletions
@@ -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() {
-                    let currentOrder = {
+            async function order(event) {
+                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>
@@ -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="month">Месяц (400₽/слот)</option>
+                        <option value="0">Неделя (200₽/слот)</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>