about

src/public/css/style.css

@@ -46,8 +46,72 @@ body {
 .header h1 { font-size: 18px; font-weight: 600; letter-spacing: -0.3px; }
 .header h1 span { color: var(--accent); }
 
+.header-right { display: flex; align-items: center; gap: 10px; }
+
 .level-selector { display: flex; gap: 6px; }
 
+.about-btn {
+  width: 26px; height: 26px;
+  border-radius: 50%;
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 13px;
+  cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  transition: all 0.15s;
+  flex-shrink: 0;
+}
+.about-btn:hover { border-color: var(--accent); color: var(--accent); }
+
+/* ── About modal ── */
+.modal-overlay {
+  display: none;
+  position: fixed; inset: 0;
+  background: rgba(0,0,0,0.6);
+  backdrop-filter: blur(4px);
+  z-index: 100;
+  align-items: center; justify-content: center;
+}
+.modal-overlay.open { display: flex; }
+
+.modal-card {
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 28px 28px 24px;
+  width: min(340px, calc(100vw - 32px));
+  position: relative;
+  animation: modal-in 0.18s ease;
+}
+@keyframes modal-in {
+  from { opacity: 0; transform: scale(0.95) translateY(6px); }
+  to   { opacity: 1; transform: scale(1)    translateY(0); }
+}
+
+.modal-close {
+  position: absolute; top: 12px; right: 14px;
+  background: none; border: none;
+  color: var(--text-muted); font-size: 14px;
+  cursor: pointer; line-height: 1;
+  transition: color 0.15s;
+}
+.modal-close:hover { color: var(--text); }
+
+.modal-logo { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
+.modal-logo span { color: var(--accent); }
+
+.modal-desc { color: var(--text-dim); font-size: 13px; line-height: 1.6; margin-bottom: 20px; }
+
+.modal-author {
+  border-top: 1px solid var(--border);
+  padding-top: 16px;
+  display: flex; flex-direction: column; gap: 4px;
+}
+.modal-author-name { font-size: 14px; font-weight: 500; }
+.modal-email { font-size: 13px; color: var(--accent); text-decoration: none; }
+.modal-email:hover { text-decoration: underline; }
+
 .level-btn {
   padding: 5px 11px;
   border-radius: 20px;

src/public/index.html

@@ -17,11 +17,27 @@
   <!-- Header -->
   <div class="header">
     <h1>Deutsch <span>üben</span></h1>
+    <div class="header-right">
       <div class="level-selector">
         <button class="level-btn" data-level="A2">A2</button>
         <button class="level-btn active" data-level="B1">B1</button>
         <button class="level-btn" data-level="B2">B2</button>
       </div>
+      <button class="about-btn" id="about-btn" title="About">ℹ</button>
+    </div>
+  </div>
+
+  <!-- About modal -->
+  <div class="modal-overlay" id="about-modal">
+    <div class="modal-card">
+      <button class="modal-close" id="about-close">✕</button>
+      <div class="modal-logo">Deutsch <span>üben</span></div>
+      <p class="modal-desc">Приложение для устной практики немецкого языка с анализом речи через AI.</p>
+      <div class="modal-author">
+        <div class="modal-author-name">Alex Babrouski</div>
+        <a class="modal-email" href="mailto:balexvicx@gmail.com">balexvicx@gmail.com</a>
+      </div>
+    </div>
   </div>
 
   <!-- Topic selection -->

src/public/js/app.js

@@ -44,6 +44,12 @@ const backBtn        = document.getElementById('back-btn');
 const historySection = document.getElementById('history-section');
 const historyList    = document.getElementById('history-list');
 
+// ── About modal ───────────────────────────────────────────────────────────────
+const aboutModal = document.getElementById('about-modal');
+document.getElementById('about-btn').addEventListener('click', () => aboutModal.classList.add('open'));
+document.getElementById('about-close').addEventListener('click', () => aboutModal.classList.remove('open'));
+aboutModal.addEventListener('click', e => { if (e.target === aboutModal) aboutModal.classList.remove('open'); });
+
 // ── Navigation ────────────────────────────────────────────────────────────────
 function showScreen(name) {
   Object.values(screens).forEach(s => s.classList.remove('active'));