fix(subjects): презентабельные карточки направлений (grid-колонка, скругления, hover, иконки)

- Dockerfile: python:3.12-slim, зависимости отдельным слоем
- docker-compose.yml: порт 5000, env из .env
- .dockerignore: .env, .git, кэш
- app.py: bind 0.0.0.0:5000 (в контейнере)

.dockerignore

@@ -0,0 +1,11 @@
+.git
+.gitignore
+.idea
+__pycache__
+*.pyc
+*.pyo
+.env
+.venv
+venv
+*.log
+logs

Dockerfile

@@ -0,0 +1,21 @@
+# Python 3.12 slim
+FROM python:3.12-slim
+
+ENV PYTHONDONTWRITEBYTECODE=1 \
+    PYTHONUNBUFFERED=1
+
+WORKDIR /app
+
+# Сначала зависимости — чтобы кэшировать слой
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Код приложения
+COPY . .
+
+# Не dev-режим по умолчанию
+ENV FLASK_DEBUG=0
+
+EXPOSE 5000
+
+CMD ["python", "app.py"]

README.md

@@ -1,6 +1,6 @@
 # Анастасия Панкратенкова
 
-> Персональный сайт преподавателя математики и физики с записью на консультацию по подготовке к ОГЭ и ЕГЭ.
+> Персональный сайт преподавателя математики с записью на консультацию по подготовке к ОГЭ и ЕГЭ.
 
 ![Статус проекта](https://img.shields.io/badge/status-MVP-e77862?style=flat-square)
 ![Python](https://img.shields.io/badge/Python-3.10%2B-10211d?style=flat-square&logo=python&logoColor=white)
@@ -9,12 +9,12 @@
 
 ## О проекте
 
-Сайт-визитка для Анастасии Викторовны Панкратенковой — преподавателя математики и физики.
+Сайт-визитка для Анастасии Викторовны Панкратенковой — преподавателя математики.
 
 На сайте можно:
 
 - познакомиться с преподавателем, образованием и опытом;
-- узнать о подготовке по математике и физике;
+- узнать о подготовке по математике;
 - понять, как проходят занятия;
 - оставить заявку на консультацию;
 - выбрать предмет, экзамен и формат занятий.

app.py

@@ -15,7 +15,7 @@ from flask_wtf import CSRFProtect
 
 BASE_DIR = Path(__file__).resolve().parent
 DATABASE_PATH = BASE_DIR / "consultations.db"
-SUBJECTS = {"math": "Математика", "physics": "Физика"}
+SUBJECTS = {"math": "Математика"}
 EXAMS = {"oge": "ОГЭ", "ege": "ЕГЭ", "other": "Пока не определились"}
 FORMATS = {"online": "Онлайн", "offline": "Очно", "other": "Пока не определились"}
 PREFERRED_TIMES = {
@@ -379,4 +379,8 @@ init_database()
 
 
 if __name__ == "__main__":
-    app.run(debug=os.environ.get("FLASK_DEBUG") == "1")
+    app.run(
+        host="0.0.0.0",
+        port=5000,
+        debug=os.environ.get("FLASK_DEBUG") == "1",
+    )

docker-compose.yml

@@ -0,0 +1,9 @@
+# Секреты — только из .env (см. .env.example)
+services:
+  web:
+    build: .
+    ports:
+      - "5000:5000"
+    env_file:
+      - .env
+    restart: unless-stopped

static/css/styles.css

@@ -567,17 +567,41 @@ h2 em {
 
 .subject-cards {
     display: grid;
+    grid-column: 2;
     grid-template-columns: repeat(2, 1fr);
-    gap: 18px;
+    gap: 24px;
     margin-top: 48px;
 }
 
 .subject-card {
+    position: relative;
     display: flex;
-    min-height: 390px;
+    min-height: 400px;
     flex-direction: column;
     justify-content: space-between;
-    padding: 26px 28px 24px;
+    padding: 34px 32px 30px;
+    border-radius: 20px;
+    overflow: hidden;
+    transition: transform 180ms ease, box-shadow 180ms ease;
+}
+
+.subject-card::before {
+    content: "";
+    position: absolute;
+    inset: 0 0 auto;
+    height: 3px;
+    background: var(--coral);
+    opacity: 0;
+    transition: opacity 180ms ease;
+}
+
+.subject-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 22px 44px -22px rgba(16, 33, 29, 0.35);
+}
+
+.subject-card:hover::before {
+    opacity: 1;
 }
 
 .subject-card-dark {
@@ -590,20 +614,35 @@ h2 em {
     background: var(--sage);
 }
 
+.subject-card-accent:hover {
+    box-shadow: 0 22px 44px -22px rgba(16, 33, 29, 0.4);
+}
+
 .card-top {
     display: flex;
-    align-items: start;
+    align-items: center;
     justify-content: space-between;
 }
 
 .card-icon {
     display: grid;
-    width: 45px;
+    width: 52px;
-    height: 45px;
+    height: 52px;
+    flex: 0 0 auto;
     place-items: center;
-    border: 1px solid currentColor;
     border-radius: 50%;
-    font: 20px var(--serif);
+    font: 26px var(--serif);
+    font-weight: 600;
+}
+
+.subject-card-dark .card-icon {
+    color: var(--ink);
+    background: var(--sage-deep);
+}
+
+.subject-card-accent .card-icon {
+    color: var(--white);
+    background: var(--coral);
 }
 
 .subject-card .card-number {
@@ -614,11 +653,17 @@ h2 em {
     color: var(--coral);
 }
 
+.card-body {
+    margin: 28px 0 30px;
+}
+
 .card-kicker {
-    margin-bottom: 10px;
+    margin-bottom: 12px;
     color: var(--coral-soft);
-    font-size: 9px;
+    font-size: 10px;
-    letter-spacing: 0.11em;
+    font-weight: 800;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
 }
 
 .subject-card-accent .card-kicker {
@@ -627,27 +672,65 @@ h2 em {
 
 .subject-card h3 {
     margin-bottom: 16px;
-    font: 500 clamp(36px, 4vw, 52px)/1 var(--serif);
+    font: 500 clamp(34px, 3.4vw, 46px)/1.05 var(--serif);
-    letter-spacing: -0.05em;
+    letter-spacing: -0.04em;
 }
 
 .card-description {
     max-width: 340px;
     margin-bottom: 0;
-    color: rgba(255, 255, 255, 0.63);
+    color: rgba(255, 255, 255, 0.66);
-    font-size: 12px;
+    font-size: 13px;
-    line-height: 1.7;
+    line-height: 1.75;
 }
 
 .subject-card-accent .card-description {
-    color: rgba(16, 33, 29, 0.65);
+    color: rgba(16, 33, 29, 0.68);
 }
 
 .card-link {
-    font-size: 11px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding-top: 22px;
+    border-top: 1px solid rgba(255, 255, 255, 0.14);
+    font-size: 12px;
     font-weight: 800;
 }
 
+.subject-card-accent .card-link {
+    border-top-color: rgba(16, 33, 29, 0.16);
+}
+
+.card-link span {
+    display: grid;
+    width: 36px;
+    height: 36px;
+    margin-left: 0;
+    place-items: center;
+    border: 1px solid currentColor;
+    border-radius: 50%;
+    font-size: 15px;
+    transition: transform 180ms ease, background-color 180ms ease;
+}
+
+.card-link:hover span {
+    transform: translateX(4px);
+}
+
+.subject-card-dark .card-link:hover span {
+    background: var(--coral);
+    border-color: var(--coral);
+    color: var(--white);
+}
+
+.subject-card-accent .card-link:hover span {
+    background: var(--ink);
+    border-color: var(--ink);
+    color: var(--white);
+}
+
 .process {
     padding-bottom: 12px;
 }
@@ -1494,11 +1577,13 @@ textarea {
     }
 
     .subject-cards {
+        grid-column: 1;
         margin-top: 32px;
     }
 
     .subject-card {
-        min-height: 330px;
+        min-height: 360px;
+        padding: 30px 26px 26px;
     }
 
     .process-list {

templates/index.html

@@ -3,8 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="Подготовка к ОГЭ и ЕГЭ по математике и физике с Анастасией Панкратенковой.">
+    <meta name="description" content="Подготовка к ОГЭ и ЕГЭ по математике с Анастасией Панкратенковой.">
-    <title>Анастасия Панкратенкова — математика и физика</title>
+    <title>Анастасия Панкратенкова — математика</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
 </head>
 <body>
@@ -25,9 +25,9 @@
         <main id="top">
             <section class="hero section-wrap">
                 <div class="hero-copy">
-                    <p class="eyebrow"><span class="eyebrow-dot"></span> Математика · физика · подготовка к экзаменам</p>
+                    <p class="eyebrow"><span class="eyebrow-dot"></span> Математика · подготовка к экзаменам</p>
                     <h1>Понимать, решать, <em>быть уверенным.</em></h1>
-                    <p class="hero-lead">Помогаю школьникам увидеть логику точных наук и спокойно прийти к нужному результату на ОГЭ и ЕГЭ.</p>
+                    <p class="hero-lead">Помогаю школьникам увидеть логику математики и спокойно прийти к нужному результату на ОГЭ и ЕГЭ.</p>
                     <div class="hero-actions">
                         <a class="button button-primary" href="#contact">Записаться на консультацию <span>↗</span></a>
                         <a class="text-link" href="#about">Познакомиться <span>↓</span></a>
@@ -48,13 +48,13 @@
                     <div class="floating-note note-top"><span>∑</span><strong>Разбираем<br>до ясности</strong></div>
                     <div class="floating-note note-bottom"><strong>2</strong><span>красных<br>диплома</span></div>
                     <div class="math-scribble scribble-one">y = kx + b</div>
-                    <div class="math-scribble scribble-two">F = ma</div>
+                    <div class="math-scribble scribble-two">a² + b² = c²</div>
                 </div>
             </section>
 
             <section class="ticker" aria-label="Ключевые направления">
                 <div class="ticker-track">
-                    <span>Математика</span><i>✦</i><span>Физика</span><i>✦</i><span>ОГЭ</span><i>✦</i><span>ЕГЭ</span><i>✦</i><span>Математика</span><i>✦</i><span>Физика</span>
+                    <span>Математика</span><i>✦</i><span>ОГЭ</span><i>✦</i><span>ЕГЭ</span><i>✦</i><span>Математика</span><i>✦</i><span>ОГЭ</span><i>✦</i><span>ЕГЭ</span>
                 </div>
             </section>
 
@@ -62,10 +62,10 @@
                 <div class="section-label"><span>01</span><span>О преподавателе</span></div>
                 <div class="about-content">
                     <div class="section-heading-row">
-                        <h2>Точные науки<br><em>могут быть понятными.</em></h2>
+                        <h2>Математика<br><em>может быть понятной.</em></h2>
                         <span class="round-arrow">↘</span>
                     </div>
-                    <p class="section-intro">Я — Анастасия Викторовна, преподаватель математики и физики. На занятиях мы не заучиваем решения, а разбираемся, как всё устроено — шаг за шагом и в удобном для ученика темпе.</p>
+                    <p class="section-intro">Я — Анастасия Викторовна, преподаватель математики. На занятиях мы не заучиваем решения, а разбираемся, как всё устроено — шаг за шагом и в удобном для ученика темпе.</p>
                     <div class="about-details">
                         <div class="detail-item"><span class="detail-number">01</span><p><strong>Образование</strong>АГУ, бакалавриат «Математика» и магистратура «Математическое образование».</p></div>
                         <div class="detail-item"><span class="detail-number">02</span><p><strong>Результат</strong>Обе ступени образования окончены с красным дипломом.</p></div>
@@ -82,13 +82,27 @@
                 </div>
                 <div class="subject-cards">
                     <article class="subject-card subject-card-dark">
-                        <div class="card-top"><span class="card-number">01</span><span class="card-icon">∑</span></div>
+                        <div class="card-top">
-                        <div><p class="card-kicker">Подготовка</p><h3>Математика</h3><p class="card-description">От уверенной базы до сложных задач второй части. Разбираем теорию, практику и стратегию экзамена.</p></div>
+                            <span class="card-number">01</span>
+                            <span class="card-icon">∑</span>
+                        </div>
+                        <div class="card-body">
+                            <p class="card-kicker">Подготовка</p>
+                            <h3>Математика</h3>
+                            <p class="card-description">От уверенной базы до сложных задач второй части. Разбираем теорию, практику и стратегию экзамена.</p>
+                        </div>
                         <a href="#contact" class="card-link">Обсудить подготовку <span>↗</span></a>
                     </article>
                     <article class="subject-card subject-card-accent">
-                        <div class="card-top"><span class="card-number">02</span><span class="card-icon">F</span></div>
+                        <div class="card-top">
-                        <div><p class="card-kicker">Подготовка</p><h3>Физика</h3><p class="card-description">Учимся видеть физику за формулами: решаем задачи, выстраиваем связи и готовимся к нужному баллу.</p></div>
+                            <span class="card-number">02</span>
+                            <span class="card-icon">√</span>
+                        </div>
+                        <div class="card-body">
+                            <p class="card-kicker">Подготовка</p>
+                            <h3>ОГЭ и ЕГЭ</h3>
+                            <p class="card-description">Готовимся к экзаменам по математике: разбираем структуру, тренируемся на реальных заданиях и отрабатываем стратегию набора баллов.</p>
+                        </div>
                         <a href="#contact" class="card-link">Обсудить подготовку <span>↗</span></a>
                     </article>
                 </div>
@@ -138,7 +152,7 @@
                             <label>Как связаться <span>*</span><input type="text" name="contact" placeholder="Телефон или Telegram" required></label>
                         </div>
                         <div class="form-row">
-                            <label>Предмет <span>*</span><select name="subject" required><option value="" disabled selected>Выберите предмет</option><option value="math">Математика</option><option value="physics">Физика</option></select></label>
+                            <label>Предмет <span>*</span><select name="subject" required><option value="" disabled selected>Выберите предмет</option><option value="math">Математика</option></select></label>
                             <label>Экзамен <span>*</span><select name="exam" required><option value="" disabled selected>Выберите экзамен</option><option value="oge">ОГЭ</option><option value="ege">ЕГЭ</option><option value="other">Пока не определились</option></select></label>
                         </div>
                         <div class="form-row form-row-wide">
@@ -155,7 +169,7 @@
 
         <footer class="site-footer section-wrap">
             <a class="brand" href="#top"><span class="brand-mark">АП</span><span class="brand-name">Анастасия<br>Панкратенкова</span></a>
-            <p>Математика и физика<br>с пониманием.</p>
+            <p>Математика<br>с пониманием.</p>
             <span>© {{ current_year }}</span>
         </footer>
     </div>