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

feat: сайт только по математике, убрана физика (ОГЭ/ЕГЭ по математике)
2026-08-06 00:47:22 +04:00 · 2026-08-06 00:36:19 +04:00
4 changed files with 136 additions and 37 deletions
@@ -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 @@

 ## О проекте

-Сайт-визитка для Анастасии Викторовны Панкратенковой — преподавателя математики и физики.
+Сайт-визитка для Анастасии Викторовны Панкратенковой — преподавателя математики.

 На сайте можно:

 - познакомиться с преподавателем, образованием и опытом;
- узнать о подготовке по математике и физике;
+- узнать о подготовке по математике;
 - понять, как проходят занятия;
 - оставить заявку на консультацию;
 - выбрать предмет, экзамен и формат занятий.
@@ -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 = {
@@ -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;
-    height: 45px;
+    width: 52px;
+    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;
-    letter-spacing: 0.11em;
+    font-size: 10px;
+    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);
-    letter-spacing: -0.05em;
+    font: 500 clamp(34px, 3.4vw, 46px)/1.05 var(--serif);
+    letter-spacing: -0.04em;
 }

 .card-description {
    max-width: 340px;
    margin-bottom: 0;
-    color: rgba(255, 255, 255, 0.63);
-    font-size: 12px;
-    line-height: 1.7;
+    color: rgba(255, 255, 255, 0.66);
+    font-size: 13px;
+    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 {
@@ -3,8 +3,8 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="Подготовка к ОГЭ и ЕГЭ по математике и физике с Анастасией Панкратенковой.">
-    <title>Анастасия Панкратенкова — математика и физика</title>
+    <meta name="description" content="Подготовка к ОГЭ и ЕГЭ по математике с Анастасией Панкратенковой.">
+    <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><p class="card-kicker">Подготовка</p><h3>Математика</h3><p class="card-description">От уверенной базы до сложных задач второй части. Разбираем теорию, практику и стратегию экзамена.</p></div>
+                        <div class="card-top">
+                            <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><p class="card-kicker">Подготовка</p><h3>Физика</h3><p class="card-description">Учимся видеть физику за формулами: решаем задачи, выстраиваем связи и готовимся к нужному баллу.</p></div>
+                        <div class="card-top">
+                            <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>
Author	SHA1	Message	Date
qa-tester	4e6b655a2b	fix(subjects): презентабельные карточки направлений (grid-колонка, скругления, hover, иконки)	2026-08-06 00:47:22 +04:00
qa-tester	58fa54b865	feat: сайт только по математике, убрана физика (ОГЭ/ЕГЭ по математике)	2026-08-06 00:36:19 +04:00