4 changed files with 80 additions and 88 deletions
--- a/demo/routes.py
+++ b/demo/routes.py
@ -3,5 +3,5 @@ import aiohttp


 def setup_routes(app):
-    app.router.add_routes(
-        [aiohttp.web.get('/', frontend.index), aiohttp.web.post('/button-clicked', frontend.button_clicked)])
+  app.router.add_routes([aiohttp.web.get('/', frontend.index), aiohttp.web.post('/submit', frontend.button_clicked)])
+  
--- a/demo/templates/index.html
+++ b/demo/templates/index.html
@ -1,100 +1,87 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8"/>
+  <head>
+    <meta charset="UTF-8" />
    <title>Знакомство с aiohttp</title>
    <style>
-        html {
-            font-family: Verdana, "sans-serif";
-        }
+      html {
+        font-family: Verdana, "sans-serif";
+      }

-        body {
-            min-height: 100vh;
-            background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%)
-        }
+      body {
+        min-height: 100vh;
+        background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)
+      }
+      h1{
+        color: white;

-        h1 {
-            text-align: center;
-            color: white;
-            text-shadow: 0 2px 5px rgba(150, 150, 150, 0.8);
-        }
+      }
+      p{
+        color:white;
+      }
+      .container{
+        margin-left: 20vw;
+      }
+      #submit{
+        margin-top: 20px;
+        border-radius: 10px;
+        height: 50px;
+        width:50vw;
+        color:black;
+      }
+      #inputText{
+        border-radius: 10px;
+        height: 30px;
+        width: 49.5vw;
+      }
+      .container_result{
+        margin-top: 20px;
+        min-height: 50px;
+        text-align: center;
+        width: 50vw;
+        border: 3px solid white;
+        border-radius: 5px;
+        background-color: grey;
+      }

-        #root {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }

-
-        .form {
-            width: 70%;
-            margin-bottom: 20px;
-        }
-
-        .form__button {
-            text-align: center;
-            margin-top: 10px;
-            background-color: white;
-            cursor: pointer;
-        }
-
-        #myButton {
-            box-sizing: border-box;
-            width: 100%;
-            font-size: 18px;
-            outline: none;
-            border: none;
-            padding: 20px;
-            border-radius: 5px;
-            -webkit-transition: 0.3s;
-            -moz-transition: 0.3s;
-            transition: 0.3s;
-            -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
-            -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
-            box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
-        }
-
-        #myButton:hover {
-            -webkit-transition: 0.3s;
-            -moz-transition: 0.3s;
-            transition: 0.3s;
-            -webkit-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.5);
-            -moz-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.5);
-            box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.5);
-        }
-
-        #myResult {
-            text-align: center;
-            color: white;
-            text-shadow: 0 2px 5px rgba(150, 150, 150, 0.8);
-        }
    </style>
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-</head>
-<body>
-<div>
-    <h1>Знакомство с aiohttp</h1>
-    <div id="root">
+  </head>
+  <body>
+    <div class="container">
+      <h1>Знакомство с aiohttp</h1>
+      <div id="root">
        <div class="form">
-            <div class="form__button">
-                <button id='myButton'>Отправить</button>
-            </div>
-            <p id="myResult"></p>
+          <form id="myForm">
+            <input type="text" id="inputText" placeholder="Введите текст">
+            <div class="form__button"><button id='submit'>Отправить</button></div>
+
+          </form>
+          <div class="container_result">
+            <p id="response"></p>
+          </div>
        </div>
    </div>
-</body>
-<script>
-    $(document).ready(function () {
-        $("#myButton").click(function () {
-            $.ajax({
-                type: "POST",
-                url: "/button-clicked",
-                dataType: "json",
-                success: function (response) {
-                    $("#myResult").text(response.result);
-                }
+    </div>
+  </body>
+    <script>
+        document.getElementById('myForm').addEventListener('submit', async function(event) {
+            event.preventDefault(); // Предотвращаем отправку формы по умолчанию
+
+            const inputText = document.getElementById('inputText').value;
+
+            const response = await fetch('/submit', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded'
+                },
+                body: new URLSearchParams({
+                    'text': inputText
+                })
            });
+
+            const responseText = await response.text();
+            document.getElementById('response').innerText = responseText;
        });
-    });
-</script>
+    </script>
 </html>
--- a/demo/views/frontend.py
+++ b/demo/views/frontend.py
@ -9,4 +9,8 @@ async def index(request):


 async def button_clicked(request):
-    return aiohttp.web.json_response({'result': 'Button was clicked'})
+    data = await request.post()
+    text = data.get('text')
+    response_text = f'Вы ввели: {text}'
+    print(response_text)
+    return aiohttp.web.Response(text=response_text)
--- a/entry.py
+++ b/entry.py
@ -5,3 +5,4 @@ app = create_app()

 if __name__ == '__main__':
    aiohttp.web.run_app(app)
+