You've already forked OpenIntegrations
mirror of
https://github.com/Bayselonarrend/OpenIntegrations.git
synced 2025-11-23 22:05:15 +02:00
Fastfix
This commit is contained in:
Anton Titovets
303
docs/docusaurus/src/pages/courses.js
vendored
303
docs/docusaurus/src/pages/courses.js
vendored
@@ -1,303 +0,0 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import Layout from '@theme/Layout';
|
||||
import Link from '@docusaurus/Link';
|
||||
import Heading from '@theme/Heading';
|
||||
import styles from './courses.module.css';
|
||||
import CustomFooter from '@site/src/components/CustomFooter';
|
||||
import coursesData from '../../data/courses.json';
|
||||
|
||||
const CoursesPage = () => {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [selectedCategory, setSelectedCategory] = useState('all');
|
||||
const [showSubscriptionModal, setShowSubscriptionModal] = useState(false);
|
||||
const [showPurchaseModal, setShowPurchaseModal] = useState(false);
|
||||
const [selectedCourse, setSelectedCourse] = useState(null);
|
||||
|
||||
const { courses, categories, subscriptionInfo } = coursesData;
|
||||
|
||||
const filteredCourses = useMemo(() => {
|
||||
return courses.filter(course => {
|
||||
const matchesSearch = course.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
course.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
course.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()));
|
||||
|
||||
const matchesCategory = selectedCategory === 'all' || course.category === selectedCategory;
|
||||
|
||||
return matchesSearch && matchesCategory;
|
||||
});
|
||||
}, [searchQuery, selectedCategory]);
|
||||
|
||||
const handlePurchaseClick = (course) => {
|
||||
setSelectedCourse(course);
|
||||
setShowPurchaseModal(true);
|
||||
};
|
||||
|
||||
const SubscriptionModal = () => (
|
||||
<div className={`${styles.modalOverlay} ${showSubscriptionModal ? styles.modalOverlayVisible : ''}`}
|
||||
onClick={() => setShowSubscriptionModal(false)}>
|
||||
<div className={styles.modalFeaturesContent} onClick={(e) => e.stopPropagation()}>
|
||||
<div className={styles.modalHeader}>
|
||||
<h1>{subscriptionInfo.title}</h1>
|
||||
</div>
|
||||
|
||||
<div className={styles.modalBody}>
|
||||
<p className={styles.subscriptionDescription}>{subscriptionInfo.description}</p>
|
||||
|
||||
<div className={styles.featuresGrid}>
|
||||
{subscriptionInfo.features.map((feature, index) => (
|
||||
<div key={index} className={styles.featureCard}>
|
||||
<svg className={styles.featureIcon} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={0.8} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d={feature.icon} />
|
||||
</svg>
|
||||
|
||||
<h3 className={styles.featureTitle}>{feature.title}</h3>
|
||||
<p className={styles.featureDescription}>{feature.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.modalFooter}>
|
||||
<button
|
||||
className={styles.secondaryButton}
|
||||
onClick={() => setShowSubscriptionModal(false)}
|
||||
>
|
||||
Закрыть
|
||||
</button>
|
||||
<Link
|
||||
href={subscriptionInfo.boostyUrl}
|
||||
className={styles.primaryButton}
|
||||
target="_blank"
|
||||
>
|
||||
Перейти на Boosty
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const PurchaseModal = () => {
|
||||
if (!selectedCourse) return null;
|
||||
|
||||
return (
|
||||
<div className={`${styles.modalOverlay} ${showPurchaseModal ? styles.modalOverlayVisible : ''}`}
|
||||
onClick={() => setShowPurchaseModal(false)}>
|
||||
<div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
|
||||
<div className={styles.courseBannerModal}>
|
||||
<img
|
||||
src={selectedCourse.banner}
|
||||
alt={selectedCourse.title}
|
||||
onError={(e) => {
|
||||
e.target.src = '/img/Courses/default.png';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.modalHeader}>
|
||||
<h2>{selectedCourse.title}</h2>
|
||||
</div>
|
||||
|
||||
<div className={styles.modalBody}>
|
||||
<div className={styles.tags}>
|
||||
{selectedCourse.tags.map(tag => (
|
||||
<span key={tag} className={styles.tag}>#{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className={styles.courseDescriptionModal}>
|
||||
<h3>О материале</h3>
|
||||
<p>{selectedCourse.descriptionExtended}</p>
|
||||
|
||||
<div className={styles.courseDetails}>
|
||||
<div className={styles.detailItem}>
|
||||
<strong>Формат:</strong> {selectedCourse.format}
|
||||
</div>
|
||||
<div className={styles.detailItem}>
|
||||
<strong>Доступ:</strong> Бессрочный
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.courseProgram}>
|
||||
<h3>Что вы получите:</h3>
|
||||
<ul className={styles.programList}>
|
||||
<li>✓ Полный доступ к текстовому материалу</li>
|
||||
<li>✓ Обновления контента бесплатно</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className={styles.accessInfo}>
|
||||
<h4>Как работает доступ:</h4>
|
||||
<p>
|
||||
Доступ приобретается путем покупки поста на сервисе Boosty. Внутри этого поста находится ссылка для перехода к купленным материалам. Подобные ссылки обновляются в начале каждого месяца. Если ссылка была обновлена (перестала работать) или вы утратили свою старую ссылку еще до обновления, то всегда можете получить ее повторно в том же посте, что приобрели ранее.
|
||||
</p>
|
||||
<br/>
|
||||
<p>Если вы столкнулись с проблемой, то можете связаться со мной одним из следующих способов:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>Email:</span> <a href={"mailto:support@openintegrations.dev"}>support@openintegrations.dev</a>
|
||||
</li>
|
||||
<li>
|
||||
<span>Telegram:</span> <a href={"https://t.me/bayselonarrend"}>@bayselonarrend</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.modalFooter}>
|
||||
<button
|
||||
className={styles.secondaryButton}
|
||||
onClick={() => setShowPurchaseModal(false)}
|
||||
>
|
||||
Закрыть
|
||||
</button>
|
||||
<Link
|
||||
href={selectedCourse.buyUrl}
|
||||
className={styles.primaryButton}
|
||||
target="_blank"
|
||||
onClick={() => setShowPurchaseModal(false)}
|
||||
>
|
||||
Купить за {selectedCourse.price} ₽
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const CourseCard = ({ course }) => (
|
||||
<div className={styles.courseCard}>
|
||||
<div className={styles.courseBanner}>
|
||||
<img
|
||||
src={course.banner}
|
||||
alt={course.title}
|
||||
onError={(e) => {
|
||||
e.target.src = '/img/Courses/default.png';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.courseContent}>
|
||||
<div className={styles.courseHeader}>
|
||||
<h3 className={styles.courseTitle}>{course.title}</h3>
|
||||
<div className={styles.tags}>
|
||||
{course.tags.map(tag => (
|
||||
<span key={tag} className={styles.tag}>#{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className={styles.courseDescription}>{course.description}</p>
|
||||
|
||||
<div className={styles.courseActions}>
|
||||
{course.type === 'free' ? (
|
||||
<Link
|
||||
href={course.externalUrl}
|
||||
className={styles.freeButton}
|
||||
target="_blank"
|
||||
>
|
||||
<svg className={styles.buttonIcon} viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||
</svg>
|
||||
Бесплатно
|
||||
</Link>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
className={styles.buyButton}
|
||||
onClick={() => handlePurchaseClick(course)}
|
||||
>
|
||||
{course.price} ₽
|
||||
</button>
|
||||
<button
|
||||
className={styles.subscriptionButton}
|
||||
onClick={() => setShowSubscriptionModal(true)}
|
||||
>
|
||||
<svg className={styles.buttonIcon} viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||
</svg>
|
||||
По подписке
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Layout
|
||||
title="Курсы"
|
||||
description="Курсы и материалы"
|
||||
wrapperClassName={styles.layoutWrapper}
|
||||
>
|
||||
<div className={styles.pageContainer}>
|
||||
<main className={`container margin-vert--lg ${styles.mainContent}`}>
|
||||
<div className={styles.coursesHeader}>
|
||||
<svg className={styles.coursesIcon} viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
||||
</svg>
|
||||
<div>
|
||||
<Heading as="h1" className={styles.coursesTitle}>
|
||||
Обучающие курсы и материалы
|
||||
</Heading>
|
||||
<p className={styles.coursesSubtitle}>
|
||||
Углубленное изучение аспектов и практик разработки с использованием Открытого пакета интеграций
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div className={styles.filtersSection}>
|
||||
<div className={styles.searchBox}>
|
||||
<svg className={styles.searchIcon} viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Поиск по материалам..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className={styles.searchInput}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.categories}>
|
||||
{categories.map(category => (
|
||||
<button
|
||||
key={category.id}
|
||||
className={`${styles.categoryButton} ${
|
||||
selectedCategory === category.id ? styles.categoryButtonActive : ''
|
||||
}`}
|
||||
onClick={() => setSelectedCategory(category.id)}
|
||||
>
|
||||
{category.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.coursesGrid}>
|
||||
{filteredCourses.map(course => (
|
||||
<CourseCard key={course.id} course={course} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{filteredCourses.length === 0 && (
|
||||
<div className={styles.noResults}>
|
||||
<p>Материалы по вашему запросу не найдены</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<SubscriptionModal />
|
||||
<PurchaseModal />
|
||||
</main>
|
||||
|
||||
<CustomFooter />
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default CoursesPage;
|
||||
532
docs/docusaurus/src/pages/courses.module.css
vendored
532
docs/docusaurus/src/pages/courses.module.css
vendored
@@ -1,532 +0,0 @@
|
||||
.layoutWrapper {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.pageContainer {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mainContent {
|
||||
flex: 1;
|
||||
padding-bottom: 2rem; /* Отступ перед футером */
|
||||
}
|
||||
|
||||
/* Остальные ваши существующие стили остаются без изменений */
|
||||
.coursesHeader {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.coursesIcon {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
flex-shrink: 0;
|
||||
color: #004943;
|
||||
margin-top: 0.31rem;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.coursesTitle {
|
||||
margin: 0;
|
||||
font-weight: 350;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.coursesSubtitle {
|
||||
margin: 0.1rem 0 0;
|
||||
font-weight: lighter;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
/* Фильтры */
|
||||
.filtersSection {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.searchBox {
|
||||
position: relative;
|
||||
max-width: 400px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.searchIcon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.searchInput {
|
||||
width: 100%;
|
||||
padding: 12px 12px 12px 40px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 12px;
|
||||
font-size: 1rem;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.searchInput:focus {
|
||||
outline: none;
|
||||
border-color: #004943;
|
||||
}
|
||||
|
||||
.categories {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.categoryButton {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 20px;
|
||||
background: white;
|
||||
color: #555;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.categoryButton:hover {
|
||||
border-color: #004943;
|
||||
color: #004943;
|
||||
}
|
||||
|
||||
.categoryButtonActive {
|
||||
background: #004943;
|
||||
border-color: #004943;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.categoryButtonActive:hover {
|
||||
color: white;
|
||||
background: #025a53;
|
||||
}
|
||||
|
||||
/* Сетка курсов */
|
||||
.coursesGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.courseCard {
|
||||
background: white;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.courseCard:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.courseBanner {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.courseBanner img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.courseContent {
|
||||
padding: 1.5rem;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.courseHeader {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.courseTitle {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 0.75rem;
|
||||
color: #666;
|
||||
background: #f5f5f5;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.courseDescription {
|
||||
flex: 1;
|
||||
margin: 0 0 1.5rem 0;
|
||||
color: #555;
|
||||
line-height: 1.5;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.courseActions {
|
||||
display: flex;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
/* Кнопки */
|
||||
.freeButton,
|
||||
.buyButton,
|
||||
.subscriptionButton {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 10px 16px;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.freeButton {
|
||||
background: #e8f5e8;
|
||||
color: #2e7d32;
|
||||
border: 1px solid #c8e6c9;
|
||||
}
|
||||
|
||||
.freeButton:hover {
|
||||
background: #d4edda;
|
||||
color: #1b5e20;
|
||||
}
|
||||
|
||||
.buyButton {
|
||||
background: #004943;
|
||||
color: white; /* Вместо lightgray */
|
||||
font-weight: 500; /* Вместо 100 */
|
||||
font-size: 0.95rem; /* Вместо 1em */
|
||||
font-style: normal;
|
||||
font-family: inherit; /* Добавьте это */
|
||||
text-rendering: optimizeLegibility; /* Улучшает четкость */
|
||||
-webkit-font-smoothing: antialiased; /* Для Mac */
|
||||
-moz-osx-font-smoothing: grayscale; /* Для Firefox */
|
||||
}
|
||||
|
||||
.buyButton:hover {
|
||||
background: #00302a;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.subscriptionButton {
|
||||
background: #e3f2fd;
|
||||
color: #1565c0;
|
||||
border: 1px solid #bbdefb;
|
||||
}
|
||||
|
||||
.subscriptionButton:hover {
|
||||
background: #bbdefb;
|
||||
color: #0d47a1;
|
||||
}
|
||||
|
||||
.buttonIcon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.noResults {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Адаптивность */
|
||||
@media (max-width: 768px) {
|
||||
.coursesGrid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.courseActions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.categories {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.modalOverlay {
|
||||
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;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.modalOverlayVisible {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.modalContent {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 0;
|
||||
max-width: 670px;
|
||||
width: 90%;
|
||||
max-height: 90vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modalFeaturesContent {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 0;
|
||||
max-width: 840px;
|
||||
width: 90%;
|
||||
max-height: 90vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modalHeader {
|
||||
display: flex;
|
||||
justify-content: between;
|
||||
align-items: center;
|
||||
padding: 1.5rem 1.5rem 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.modalHeader h2 {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.closeButton {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.modalBody {
|
||||
padding: 1.5rem;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.subscriptionDescription {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
color: #555;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.featuresGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.featureCard {
|
||||
text-align: center;
|
||||
background: white;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 12px;
|
||||
padding: 1.2rem;
|
||||
box-shadow:
|
||||
inset 0 1px 3px rgba(255, 255, 255, 0.7),
|
||||
0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.featureCard:hover {
|
||||
box-shadow:
|
||||
inset 0 1px 3px rgba(255, 255, 255, 0.7),
|
||||
0 6px 12px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.featureIcon {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 1rem;
|
||||
color: #004943;
|
||||
}
|
||||
|
||||
.featureTitle {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.featureDescription {
|
||||
margin: 0;
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.modalFooter {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: 1rem 1.5rem;
|
||||
border-top: 1px solid #eee;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.secondaryButton {
|
||||
flex: 1;
|
||||
padding: 12px 24px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
background: white;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.primaryButton {
|
||||
flex: 2;
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: #004943;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.primaryButton:hover {
|
||||
background: #00302a;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Адаптивность */
|
||||
@media (max-width: 768px) {
|
||||
.featuresGrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.modalFooter {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modalContent {
|
||||
width: 95%;
|
||||
margin: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Стили для модалки покупки */
|
||||
.courseBannerModal {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.courseBannerModal img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.courseDescriptionModal h3 {
|
||||
margin: 1rem 0 0.5rem 0;
|
||||
color: #333;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.courseDetails {
|
||||
margin: 1rem 0;
|
||||
padding: 1rem;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.detailItem {
|
||||
margin: 0.5rem 0;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.courseProgram {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.courseProgram h3 {
|
||||
margin-bottom: 0.5rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.programList {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.programList li {
|
||||
padding: 0.3rem 0;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.accessInfo {
|
||||
margin: 1.5rem 0 0 0;
|
||||
padding: 1rem;
|
||||
background: #fff3cd;
|
||||
border: 1px solid #ffeaa7;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.accessInfo h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: #856404;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.accessInfo p {
|
||||
margin: 0;
|
||||
color: #856404;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
Reference in New Issue
Block a user