From aac4d9fdda44e065b537c98269c8439945e2ba78 Mon Sep 17 00:00:00 2001
From: dmitrium12 <belicdima8@gmail.com>
Date: Thu, 27 Apr 2023 18:04:54 +0700
Subject: [PATCH] =?UTF-8?q?2=20=D0=B2=D0=B5=D1=80=D1=81=D0=B8=D1=8F=20?=
 =?UTF-8?q?=D1=81=D0=B0=D0=B9=D1=82=D0=B0,=20=D1=87=D1=82=D0=BE=D0=B1?=
 =?UTF-8?q?=D1=8B=20=D0=B1=D1=8B=D0=BB=D0=BE=20=D1=81=D0=BE=D0=B2=D1=81?=
 =?UTF-8?q?=D0=B5=D0=BC=20=D0=BA=D1=80=D0=B0=D1=81=D0=B8=D0=B2=D0=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 db.sql                                 | Bin 65536 -> 65536 bytes
 static/audio-player/css/player.css     |  20 --------
 static/css/index.css                   |  52 +++++++++++++++++++
 static/css/log.css                     |  68 +++++++++++++++++++++++++
 static/css/logs.css                    |  58 +++++++++++++++++++++
 static/{audio-player => }/js/player.js |   4 +-
 static/templates/index.html            |  22 ++++----
 static/templates/log.html              |  61 ++++++++++++----------
 static/templates/logs.html             |  43 +++++++---------
 9 files changed, 244 insertions(+), 84 deletions(-)
 delete mode 100644 static/audio-player/css/player.css
 create mode 100644 static/css/index.css
 create mode 100644 static/css/log.css
 create mode 100644 static/css/logs.css
 rename static/{audio-player => }/js/player.js (94%)

diff --git a/db.sql b/db.sql
index 115b6e0eb90d34f05a305a757958a2e27a378009..e7a205a416211c5d30cc425d26ac5c71367f2bcc 100644
GIT binary patch
delta 285
zcmZo@U}<PznIO&RF;T{u(PLvmkUb;I=FRrO4lJz<{H>e08Y=nq85pWq8p|1ttqjd9
zj7%+!4a|-8O!W-(5L^=@Q>!wkz<9@WD^s({8|O>gLX_12^%xkLSsEA_>lqpvndpW3
zR>da<6*v|Y8J7eE8+fLqWcgaAxK(*MhqCZ8FfcIkH!$!wY!(zq;h&s0pWh59RL8=~
k0JL7^XP^KnE`U0e6c=n-@Q<H~g=N!*|NM+Biw-yd0GxD9BLDyZ

delta 331
zcmZo@U}<PznIO&RHc`fz(QRWwkUb;w=FRrO4lK<K{LP!W8Y=ngYgihq8I7$B%`A)z
zO-w8;P4rCl4D=9OQ$qtQLub!;$8;;BBt1htBP+uib2AGABO?<d1E5MHJ!H)_K#qZt
znT5Hzsh+8!v4tg2+O0IN#L~Dj-!(Mbzr4iQ%RI**E#KSK$kCUXmw|(UfswzKfxmXM
ypg;=$<h=R(^^FY7tPDU`sr(ESKsK9B4r2kiY}0~&{7lTun>PICXJlS<zyScrF;t2G

diff --git a/static/audio-player/css/player.css b/static/audio-player/css/player.css
deleted file mode 100644
index f440d3c..0000000
--- a/static/audio-player/css/player.css
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/static/css/index.css b/static/css/index.css
new file mode 100644
index 0000000..59d5d55
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/static/css/log.css b/static/css/log.css
new file mode 100644
index 0000000..95a5c79
--- /dev/null
+++ b/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;
+    /* добавлено для выравнивания по вертикали */
+}
\ No newline at end of file
diff --git a/static/css/logs.css b/static/css/logs.css
new file mode 100644
index 0000000..e44816c
--- /dev/null
+++ b/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; /* добавлено, чтобы был отступ внизу страницы */
+}
diff --git a/static/audio-player/js/player.js b/static/js/player.js
similarity index 94%
rename from static/audio-player/js/player.js
rename to static/js/player.js
index e478094..62d43ce 100644
--- a/static/audio-player/js/player.js
+++ b/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() {
diff --git a/static/templates/index.html b/static/templates/index.html
index e2ea3ba..e2ddde3 100644
--- a/static/templates/index.html
+++ b/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>
\ No newline at end of file
+</html>
diff --git a/static/templates/log.html b/static/templates/log.html
index f8b8468..b8f3e14 100644
--- a/static/templates/log.html
+++ b/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>
\ No newline at end of file
diff --git a/static/templates/logs.html b/static/templates/logs.html
index 371877c..68f58a1 100644
--- a/static/templates/logs.html
+++ b/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>
\ No newline at end of file