some frame for wrokouts

src/pages/workouts/WorkoutList.vue

@@ -1,35 +1,26 @@
 
 <template>
   <h1 class="page-title">Тренировки</h1>
+
+  <section class="news-feed">
   <template v-if="!workoutItems">
     <div>Тренировки не найдены</div>
   </template>
   <template v-if="workoutItems" v-for="(item, index) in workoutItems" :key="item.id">
-    <div>
-      <h2>{{ item.name }}</h2>
-      <div>
-        <div>Скорость</div>
-        <div>{{ item.speed }}</div>
-      </div>
-      <div>
-        <div>Каденс</div>
-        <div>{{ item.cadence }}</div>
-      </div>
-      <div>
-        <div>Пульс</div>
-        <div>{{ item.heart_rate }}</div>
-      </div>
-      <div>
-        <div>Продолжительность</div>
-        <div>{{ item.duraion_sec }}</div>
-      </div>
-      <div>
-        <div>Мощность</div>
-        <div>{{ item.power }}</div>
-      </div>
-    </div>
-
+    <article class="news-item">
+        <h3>{{ item.name }}</h3>
+        <ul class="metadata">
+            <li><span>Скорость:</span> {{ item.speed }} км/ч</li>
+            <li><span>Пульс:</span> {{ item.heart_rate }} уд  /мин</li>
+            <li><span>Каденс:</span> {{ item.cadence }} об/мин</li>
+            <li><span>Расстояние:</span> 5 км</li>
+            <li><span>Продолжительность:</span> {{ secondsToDuration(item.duraion_sec) }} </li>
+            <li><span>Мощность:</span> {{ item.power }} км</li>
+        </ul>
+        <img src="img/first_workout.jpg" alt="Изображение первой тренировки">
+    </article>
   </template>
+  </section>
 </template>
 <script setup lang="ts">
 
@@ -38,6 +29,14 @@ import { ref, inject } from 'vue';
 import { useToast } from "vuestic-ui/web-components";
 
 
+
+function secondsToDuration(seconds: number) : string  {
+    var hours = Math.floor(seconds / 3600);
+    var minutes = Math.floor((seconds % 3600) / 60);
+    return `${hours} ч. ${minutes} мин.`;
+}
+
+
 type WorkoutItem = {
   id: string;
   name: string;
@@ -70,3 +69,61 @@ axiosAuth
       });
   });
 </script>
+
+<style>
+.background-image {
+    background-image: url('bg.jpg');
+    background-size: cover;
+    height: 100vh;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+}
+
+.news-feed {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-top: 7rem;
+}
+
+.news-item {
+    display: flex;
+    flex-direction: column;
+    padding: 1rem;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+    transition: transform 0.2s ease-in-out;
+    width: 100%;
+}
+
+.news-item img {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+    border-radius: 5px;
+    margin-bottom: 1rem;
+}
+
+.news-item h3 {
+    font-weight: bold;
+    color: #3d3d3d;
+}
+.metadata {
+  border-top: #9c9a9a 1px solid;
+}
+.metadata li {
+    list-style: none;
+    display: inline-block;
+    margin-left: 1rem;
+}
+
+.metadata span {
+    font-size: 0.9em;
+    opacity: 0.7;
+}
+
+</style>