add ReleaseList and all for it

src/components/ReleaseList/ReleaseList.tsx

@@ -0,0 +1,37 @@
+import Surface from "../Surface/Surface.tsx";
+
+interface ReleaseListProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+const ReleaseList = ({isOpen, onClose}: ReleaseListProps) => {
+    return (
+        <Surface isOpen={isOpen} onClose={onClose}>
+            <h1>v1.1.0 - Я все помню</h1>
+            <h2>14.06.2025</h2>
+            При обновлении страницы все таймеры сохранят свое состояние, при условии что были созданы сегодня
+
+            <hr/>
+
+            <h1>v1.0.0 - Ура, новые таймеры!</h1>
+            <h2>30.10.2024</h2>
+            Сверху каждого таймера представлены кнопки для базового управления: добавление/вычитание минут и очистка таймера
+            <br/>
+            По центру время до конца таймера
+            <br/>
+            Внизу каждого таймера базовые шаблоны для создания нового таймера, все значения указаны в минутах
+
+            <hr/>
+
+            <h1>Список респектов</h1>
+            Слава красава, сделал все
+            <br/>
+            Лизе спасибо за макет
+            <br/>
+            Игорь просто сигма, рядом посидел (все претензии к нему)
+        </Surface>
+    );
+};
+
+export default ReleaseList;

src/components/Surface/Surface.module.css

@@ -0,0 +1,52 @@
+.surfaceOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    padding: 2rem;
+    box-sizing: border-box;
+}
+
+.surfaceFrame {
+    display: flex;
+    flex-direction: column;
+    background-color: #FFFFFF;
+    padding: 0;
+    border-radius: 1.6rem;
+    position: relative;
+    z-index: 1001;
+    font-size: 2.4rem;
+    color: #000000;
+    max-width: 80%;
+    max-height: 80%;
+    overflow: hidden;
+    box-sizing: border-box;
+}
+
+.surfaceContent {
+    padding: 3.2rem;
+    /*max-height: 100%;*/
+    flex: 1 1 auto;
+    overflow: auto;
+    box-sizing: border-box;
+}
+
+.closeButton {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    background: none;
+    border: none;
+    font-size: 2.4rem;
+    cursor: pointer;
+}
+
+.closeButton:hover {
+    color: #666;
+}

src/components/Surface/Surface.tsx

@@ -0,0 +1,43 @@
+import {ReactNode, useEffect} from "react";
+import styles from './Surface.module.css'
+
+interface SurfaceProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: ReactNode;
+}
+
+const Surface = ({isOpen, onClose, children}: SurfaceProps) => {
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') onClose();
+        };
+
+        if (isOpen) {
+            document.addEventListener('keydown', handleKeyDown);
+            document.body.style.overflow = 'hidden';
+        }
+
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            document.body.style.overflow = 'auto';
+        };
+    }, [isOpen, onClose]);
+
+    if (!isOpen) return null;
+
+
+    return (
+        <div className={styles.surfaceOverlay} onClick={onClose}>
+            <div className={styles.surfaceFrame} onClick={e => e.stopPropagation()}>
+                <button className={styles.closeButton} onClick={onClose}>✖</button>
+                <div className={styles.surfaceContent}>
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+
+export default Surface;

src/pages/Timers/Timers.module.css

@@ -6,9 +6,15 @@ body, html {
 }
 
 .header {
+    width: 100%;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    gap: 1.6rem;
+}
+
+.header .header_item:nth-child(2) {
+    margin-left: auto;
 }
 
 .content {

src/pages/Timers/Timers.tsx

@@ -2,9 +2,13 @@ import {useEffect, useState} from 'react';
 import Timer from '../../components/Timer/Timer';
 import styles from './Timers.module.css';
 import {formatFullTime} from "../../helpers/DateFunctions.ts";
+import ReleaseList from "../../components/ReleaseList/ReleaseList.tsx";
+import Button from "../../components/Button/Button.tsx";
 
 const Timers = () => {
     const [time, setTime] = useState(new Date());
+    const [isReleasesListOpen, setIsReleasesListOpen] = useState(false);
+
 
     useEffect(() => {
         const intervalId = setInterval(() => {
@@ -16,18 +20,22 @@ const Timers = () => {
 
 
     return (
-        <div className={styles.content}>
+        <>
-            <header className={styles.header}>
+            <div className={styles.content}>
-                <a className={`${styles.header_text} ${styles.title}`}>MetaTimer</a>
+                <header className={styles.header}>
-                <a className={`${styles.header_text} ${styles.title}`}>{formatFullTime(time)}</a>
+                    <a className={`${styles.header_text} ${styles.title} ${styles.header_item}`}>MetaTimer</a>
-            </header>
+                    <a className={`${styles.header_text} ${styles.title} ${styles.header_item}`}>{formatFullTime(time)}</a>
-            <div className={styles.timers_container}>
+                    <Button className={styles.header_item} label={"?"} onClick={() => setIsReleasesListOpen(!isReleasesListOpen)}/>
-                <Timer id={"timer_1"}/>
+                </header>
-                <Timer id={"timer_2"}/>
+                <div className={styles.timers_container}>
-                <Timer id={"timer_3"}/>
+                    <Timer id={"timer_1"}/>
-                <Timer id={"timer_4"}/>
+                    <Timer id={"timer_2"}/>
+                    <Timer id={"timer_3"}/>
+                    <Timer id={"timer_4"}/>
+                </div>
             </div>
-        </div>
+            <ReleaseList isOpen={isReleasesListOpen} onClose={() => setIsReleasesListOpen(false)} />
+        </>
     )
 }