2 версия сайта, чтобы было совсем красиво

static/audio-player/css/player.css

@@ -1,20 +0,0 @@
-.player-container {
-  width: 100%;
-  height: 50px;
-  background-color: #d54242;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-#audio-player {
-  width: 80%;
-}
-
-#audio-controls {
-  display: flex;
-}
-
-#audio-controls button {
-  margin-right: 10px;
-}

static/css/index.css

@@ -0,0 +1,52 @@
+body {
+    background-color: #333;
+    color: #fff;
+    font-family: Arial, sans-serif;
+    font-size: 16px;
+    line-height: 1.5;
+    margin: 0;
+    padding: 0;
+}
+
+h1 {
+    text-align: center;
+    margin-top: 50px;
+    margin-bottom: 30px;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+label {
+    margin-bottom: 10px;
+}
+
+input[type="password"] {
+    padding: 10px;
+    border-radius: 5px;
+    border: none;
+    background-color: #555;
+    color: #fff;
+    width: 100%;
+    max-width: 300px; /* добавлено, чтобы форма не была слишком широкой */
+    box-sizing: border-box; /* добавлено, чтобы input не выходил за границы родительского элемента */
+    margin-bottom: 20px; /* добавлено, чтобы был отступ между input и кнопкой */
+}
+
+button[type="submit"] {
+    padding: 10px 20px;
+    border-radius: 25px; /* более округлая форма */
+    border: none;
+    background-color: #4CAF50;
+    color: #fff;
+    cursor: pointer;
+    box-shadow: 0 6px 0 #3e8e41; /* тень при наведении курсора */
+    transition: box-shadow 0.2s ease-in-out;
+}
+
+button[type="submit"]:hover {
+    box-shadow: 0 3px 0 #3e8e41;
+}

static/css/log.css

@@ -0,0 +1,68 @@
+body {
+    background-color: #333;
+    color: #fff;
+    font-family: Arial, sans-serif;
+    font-size: 16px;
+    line-height: 1.5;
+    margin: 0;
+    padding: 0;
+}
+
+h1 {
+    text-align: center;
+    margin-top: 50px;
+    margin-bottom: 30px;
+}
+
+.card {
+    background-color: #555;
+    color: #fff;
+    border-radius: 5px;
+    padding: 20px;
+    margin-bottom: 20px; /* добавлено, чтобы был отступ между карточками */
+    width: 100%;
+}
+
+.card-title {
+    font-size: 24px;
+    margin-bottom: 10px;
+    text-align: center;
+}
+
+.card-text {
+    font-size: 18px;
+    line-height: 1.5em; /* добавлено, чтобы текст не был слишком плотным */
+    width: 100%;
+}
+
+.player-container {
+    margin-right: 10px;
+    /* изменено на right, чтобы плеер был слева */
+    width: fit-content;
+    /* добавлено для уменьшения ширины контейнера */
+    height: fit-content;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#audio-player {
+    width: 80%;
+}
+
+#audio-controls {
+    display: flex;
+}
+
+#audio-controls button {
+    margin-right: 10px;
+}
+
+.card-container {
+    display: flex;
+    /* добавлено для размещения карточки и плеера в одной строке */
+    justify-content: space-between;
+    /* добавлено для выравнивания по горизонтали */
+    align-items: center;
+    /* добавлено для выравнивания по вертикали */
+}

static/css/logs.css

@@ -0,0 +1,58 @@
+body {
+    background-color: #333;
+    color: #fff;
+    font-family: Arial, sans-serif;
+    font-size: 16px;
+    line-height: 1.5;
+    margin: 0;
+    padding: 0;
+}
+
+h1 {
+    text-align: center;
+    margin-top: 50px;
+    margin-bottom: 30px;
+}
+
+button {
+    padding: 10px 20px;
+    border-radius: 25px; /* более округлая форма */
+    border: none;
+    background-color: #4CAF50;
+    color: #fff;
+    cursor: pointer;
+    box-shadow: 0 5px 0 #3e8e41; /* тень при наведении курсора */
+    transition: box-shadow 0.2s ease-in-out;
+}
+
+button:hover {
+    box-shadow: 0 3px 0 #3e8e41;
+}
+
+.logs-list {
+    list-style-type: none;
+    padding-left: 0;
+    width: 65%;
+    margin: auto; /* добавлено, чтобы список был по центру */
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.logs-list li {
+    margin-left: 10px;
+    margin-bottom: 10px; /* добавлено, чтобы был отступ между элементами списка */
+}
+
+.logs-list button[type="submit"] {
+    width: 150px; /* добавлено, чтобы кнопка не была слишком широкой */
+    margin-top: 20px; /* добавлено, чтобы был отступ между кнопками */
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 50px; /* добавлено, чтобы контейнер был выше на странице */
+    padding-bottom: 50px; /* добавлено, чтобы был отступ внизу страницы */
+}

static/js/player.js

@@ -1,8 +1,7 @@
 class AudioPlayer {
     constructor(options) {
         this.container = options.container;
-        this.audioFile = options.audioFile;
-        this.audio = new Audio(this.audioFile);
+        this.audio = new Audio(options.audioFile);
         this.isPlaying = false;
 
         this.playButton = null;
@@ -42,6 +41,7 @@ class AudioPlayer {
         audioPlayerElement.appendChild(audioControlsElement);
 
        containerElement.appendChild(audioPlayerElement);
+       this.pauseButton.style.display = 'none';
     }
 
     play() {

static/templates/index.html

@@ -1,16 +1,18 @@
 <!DOCTYPE html>
-<html>
+<html lang="ru">
 <head>
     <title>Login</title>
+    <link href="{{ url_for('static', path='/css/index.css') }}" rel="stylesheet">
 </head>
+
 <body>
-    <div class="container">
-        <h1>Login</h1>
-        <form method="post" action="/login">
-            <label for="password">Password:</label>
-            <input type="password" name="password" id="password">
-            <button type="submit">Login</button>
-        </form>
-    </div>
+<div class="container">
+    <h1>Login</h1>
+    <form method="post" action="/login">
+        <label for="password">Password:</label>
+        <input type="password" name="password" id="password">
+        <button type="submit">Login</button>
+    </form>
+</div>
 </body>
-</html>
+</html>

static/templates/log.html

@@ -1,39 +1,44 @@
 <!DOCTYPE html>
 <html>
-
 <head>
-  <!-- Audio Player -->
-  <script src="https://kit.fontawesome.com/025ae7f87a.js" crossorigin="anonymous"></script>
-  <link href="{{ url_for('static', path='/audio-player/css/player.css') }}" rel="stylesheet">
-  <script src="{{ url_for('static', path='/audio-player/js/player.js') }}"></script>
-
+    <script src="https://kit.fontawesome.com/025ae7f87a.js" crossorigin="anonymous"></script>
+    <script src="{{ url_for('static', path='/js/player.js') }}"></script>
+    <link href="{{ url_for('static', path='/css/log.css') }}" rel="stylesheet">
 </head>
-
 <body>
-  <div class="container">
-    <div class="text-file">
-      {% for lo in log %}
-        <div>
-            <div class="player-container" id="player-container-{{ loop.index }}"></div>
-            <script>
-              new AudioPlayer({
-                container: '#player-container-{{ loop.index }}',
-                audioFile: '{{ lo.audio_file }}'
-              });
-            </script>
-          {% if lo.text %}
-            {% for line in lo.text %}
-              {{ line }}<br>
-            {% endfor %}
-          {% else %}
-            No text file found.
-          {% endif %}
+<div class="container">
+    <h1>My Audio Files</h1>
+
+    {% for lo in log %}
+
+    <div class="card-container"> <!-- изменено на card-container -->
+
+        <div class="player-container" id="player-container-{{ loop.index }}"></div>
+
+        <script>
+            new AudioPlayer({container: '#player-container-{{ loop.index }}', audioFile: '{{ lo.audio_file }}'});
+        </script>
+
+        <div class="card">
+
+            <div class="card-title">{{ lo.title }}</div>
+
+            {% if lo.text %}
+
+            <div class="card-text"> {% for line in lo.text %} {{ line }}<br> {% endfor %}</div>
+
+            {% else %}
+
+            <div class="card-text">No text file found.</div>
+
+            {% endif %}
+
         </div>
 
-        {% endfor %}
     </div>
 
-  </div>
-</body>
+    {% endfor %}
 
+</div>
+</body>
 </html>

static/templates/logs.html

@@ -1,31 +1,26 @@
 <!DOCTYPE html>
-<html>
+<html lang="ru">
 <head>
     <title>Logs</title>
+    <link href="{{ url_for('static', path='/css/logs.css') }}" rel="stylesheet">
 </head>
+
 <body>
-    <div class="container">
-        <h1>Logs</h1>
-
-        {% if logs %}
-            <ul class="logs-list">
-                {% for log in logs %}
-                    <li><a href="/logs/{{ log[0] }}">{{ log[1] }}</a></li>
-                {% endfor %}
-            </ul>
-
-        {% else %}
-            No logs found.
-        {% endif %}
-
-        {% if logged_in %}
-            Logged in as admin.
-        {% else %}
-            You need to be logged in to view this page.
-        {% endif %}
-
-    </div>
-
+<div class="container">
+    <h1>Logs</h1>
+    {% if logs %}
+    <ul class="logs-list">
+        {% for log in logs %}
+        <li>
+            <form method="get" action="/logs/{{ log[0] }}">
+                <button type="submit">{{ log[1] }}</button>
+            </form>
+        </li>
+        {% endfor %}
+    </ul>
+    {% else %}
+    <p>No logs found.</p>
+    {% endif %}
+</div>
 </body>
-
 </html>