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(
+  app.router.add_routes([aiohttp.web.get('/', frontend.index), aiohttp.web.post('/submit', frontend.button_clicked)])
-        [aiohttp.web.get('/', frontend.index), aiohttp.web.post('/button-clicked', frontend.button_clicked)])
+  
--- a/demo/templates/index.html
+++ b/demo/templates/index.html
@ -1,100 +1,87 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
+  <head>
-    <meta charset="UTF-8"/>
+    <meta charset="UTF-8" />
    <title>Знакомство с aiohttp</title>
    <style>
-        html {
+      html {
-            font-family: Verdana, "sans-serif";
+        font-family: Verdana, "sans-serif";
-        }
+      }
-        body {
+      body {
-            min-height: 100vh;
+        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%)
+        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;
+      p{
-            color: white;
+        color:white;
-            text-shadow: 0 2px 5px rgba(150, 150, 150, 0.8);
+      }
-        }
+      .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>
-</head>
+  <body>
-<body>
+    <div class="container">
-<div>
+      <h1>Знакомство с aiohttp</h1>
-    <h1>Знакомство с aiohttp</h1>
+      <div id="root">
    <div id="root">
        <div class="form">
-            <div class="form__button">
+          <form id="myForm">
-                <button id='myButton'>Отправить</button>
+            <input type="text" id="inputText" placeholder="Введите текст">
-            </div>
+            <div class="form__button"><button id='submit'>Отправить</button></div>
-            <p id="myResult"></p>
+
          </form>
          <div class="container_result">
            <p id="response"></p>
          </div>
        </div>
    </div>
-</body>
+    </div>
-<script>
+  </body>
-    $(document).ready(function () {
+    <script>
-        $("#myButton").click(function () {
+        document.getElementById('myForm').addEventListener('submit', async function(event) {
-            $.ajax({
+            event.preventDefault(); // Предотвращаем отправку формы по умолчанию
-                type: "POST",
+
-                url: "/button-clicked",
+            const inputText = document.getElementById('inputText').value;
-                dataType: "json",
+
-                success: function (response) {
+            const response = await fetch('/submit', {
-                    $("#myResult").text(response.result);
+                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)
`@ -5,3 +5,4 @@ app = create_app()`

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