Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Учебник - Школьные материалы онлайн</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Базовые стили и переменные */ | |
| :root { | |
| --primary: #4f46e5; | |
| --secondary: #10b981; | |
| --math: #ef4444; | |
| --science: #3b82f6; | |
| --literature: #8b5cf6; | |
| --history: #f59e0b; | |
| --foreign: #ec4899; | |
| --art: #f472b6; | |
| --music: #c084fc; | |
| --tech: #22d3ee; | |
| --sport: #84cc16; | |
| --light: #f8fafc; | |
| --dark: #1e293b; | |
| --gray: #64748b; | |
| --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| --transition: all 0.3s ease; | |
| --border-radius: 14px; | |
| } | |
| [data-theme="dark"] { | |
| --primary: #6366f1; | |
| --secondary: #10b981; | |
| --light: #1e293b; | |
| --dark: #f8fafc; | |
| --gray: #94a3b8; | |
| --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.25); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| color: var(--dark); | |
| background-color: var(--light); | |
| transition: var(--transition); | |
| line-height: 1.6; | |
| } | |
| /* Утилиты */ | |
| .container { | |
| max-width: 1300px; | |
| margin: 0 auto; | |
| padding: 0 2rem; | |
| } | |
| .btn { | |
| display: inline-block; | |
| padding: 0.8rem 1.8rem; | |
| border-radius: var(--border-radius); | |
| font-weight: 600; | |
| text-decoration: none; | |
| transition: var(--transition); | |
| border: none; | |
| cursor: pointer; | |
| font-size: 1rem; | |
| } | |
| .btn-primary { | |
| background-color: var(--primary); | |
| color: white; | |
| box-shadow: var(--shadow); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15); | |
| background: linear-gradient(135deg, var(--primary), #6d28d9); | |
| } | |
| .section-title { | |
| font-size: 2.5rem; | |
| margin-bottom: 1.2rem; | |
| color: var(--dark); | |
| position: relative; | |
| display: inline-block; | |
| font-weight: 700; | |
| } | |
| .section-title::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -8px; | |
| left: 0; | |
| width: 70px; | |
| height: 5px; | |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); | |
| border-radius: 3px; | |
| } | |
| .section-subtitle { | |
| color: var(--gray); | |
| max-width: 700px; | |
| margin-bottom: 2.5rem; | |
| font-size: 1.1rem; | |
| } | |
| .text-center { | |
| text-align: center; | |
| } | |
| /* Шапка */ | |
| header { | |
| background-color: var(--light); | |
| box-shadow: var(--shadow); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .navbar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1.2rem 0; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.8rem; | |
| text-decoration: none; | |
| } | |
| .logo-icon { | |
| font-size: 2rem; | |
| color: var(--primary); | |
| transition: var(--transition); | |
| } | |
| .logo:hover .logo-icon { | |
| transform: rotate(15deg); | |
| } | |
| .logo-text { | |
| font-size: 1.7rem; | |
| font-weight: 700; | |
| color: var(--dark); | |
| letter-spacing: -0.5px; | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 2rem; | |
| } | |
| .nav-links a { | |
| text-decoration: none; | |
| color: var(--dark); | |
| font-weight: 500; | |
| transition: var(--transition); | |
| font-size: 1.05rem; | |
| position: relative; | |
| padding: 0.5rem 0; | |
| } | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background-color: var(--primary); | |
| transition: var(--transition); | |
| } | |
| .nav-links a:hover::after { | |
| width: 100%; | |
| } | |
| .nav-links a:hover { | |
| color: var(--primary); | |
| } | |
| .user-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 1.2rem; | |
| } | |
| .theme-toggle { | |
| background: none; | |
| border: none; | |
| font-size: 1.3rem; | |
| color: var(--dark); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| padding: 0.5rem; | |
| border-radius: 50%; | |
| } | |
| .theme-toggle:hover { | |
| background-color: rgba(79, 70, 229, 0.1); | |
| transform: rotate(30deg); | |
| } | |
| .auth-btn { | |
| padding: 0.7rem 1.5rem; | |
| border-radius: var(--border-radius); | |
| font-weight: 500; | |
| transition: var(--transition); | |
| } | |
| .auth-btn.login { | |
| background: none; | |
| color: var(--primary); | |
| border: 1px solid var(--primary); | |
| } | |
| .auth-btn.login:hover { | |
| background-color: rgba(79, 70, 229, 0.1); | |
| } | |
| .auth-btn.register { | |
| background-color: var(--primary); | |
| color: white; | |
| } | |
| .auth-btn.register:hover { | |
| background-color: #4338ca; | |
| transform: translateY(-2px); | |
| } | |
| /* Герой-секция */ | |
| .hero { | |
| padding: 6rem 0 5rem; | |
| background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(16, 185, 129, 0.08)); | |
| margin-bottom: 4rem; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: -20px; | |
| right: -20px; | |
| width: 300px; | |
| height: 300px; | |
| background: radial-gradient(circle, rgba(79, 70, 229, 0.1) 0%, transparent 70%); | |
| z-index: 0; | |
| } | |
| .hero::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -30px; | |
| left: -30px; | |
| width: 400px; | |
| height: 400px; | |
| background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, transparent 70%); | |
| z-index: 0; | |
| } | |
| .hero-content { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| max-width: 850px; | |
| margin: 0 auto; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .hero h1 { | |
| font-size: 3.2rem; | |
| margin-bottom: 1.5rem; | |
| line-height: 1.2; | |
| font-weight: 800; | |
| } | |
| .hero p { | |
| font-size: 1.3rem; | |
| color: var(--gray); | |
| margin-bottom: 2.5rem; | |
| max-width: 700px; | |
| } | |
| .search-bar { | |
| width: 100%; | |
| max-width: 700px; | |
| position: relative; | |
| margin-bottom: 2.5rem; | |
| } | |
| .search-input { | |
| width: 100%; | |
| padding: 1.2rem 1.8rem; | |
| border-radius: var(--border-radius); | |
| border: none; | |
| box-shadow: var(--shadow); | |
| font-size: 1.1rem; | |
| transition: var(--transition); | |
| background-color: white; | |
| } | |
| .search-input:focus { | |
| outline: none; | |
| box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2); | |
| } | |
| .search-btn { | |
| position: absolute; | |
| right: 5px; | |
| top: 5px; | |
| padding: 0.8rem 1.8rem; | |
| border-radius: var(--border-radius); | |
| background: linear-gradient(135deg, var(--primary), #6d28d9); | |
| color: white; | |
| border: none; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| font-weight: 500; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .search-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15); | |
| } | |
| .hero-actions { | |
| display: flex; | |
| gap: 1.5rem; | |
| } | |
| /* Секция предметов */ | |
| .subjects { | |
| padding: 5rem 0; | |
| } | |
| .subject-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .subject-card { | |
| background-color: white; | |
| border-radius: var(--border-radius); | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| cursor: pointer; | |
| display: flex; | |
| flex-direction: column; | |
| height: 100%; | |
| } | |
| .subject-card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15); | |
| } | |
| /* Цвета предметов */ | |
| .subject-card.math { | |
| border-top: 6px solid var(--math); | |
| } | |
| .subject-card.science { | |
| border-top: 6px solid var(--science); | |
| } | |
| .subject-card.literature { | |
| border-top: 6px solid var(--literature); | |
| } | |
| .subject-card.history { | |
| border-top: 6px solid var(--history); | |
| } | |
| .subject-card.foreign { | |
| border-top: 6px solid var(--foreign); | |
| } | |
| .subject-card.art { | |
| border-top: 6px solid var(--art); | |
| } | |
| .subject-card.music { | |
| border-top: 6px solid var(--music); | |
| } | |
| .subject-card.tech { | |
| border-top: 6px solid var(--tech); | |
| } | |
| .subject-card.sport { | |
| border-top: 6px solid var(--sport); | |
| } | |
| .subject-icon { | |
| padding: 2rem; | |
| font-size: 3rem; | |
| color: white; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| flex-grow: 1; | |
| } | |
| /* Цвета иконок */ | |
| .math .subject-icon { | |
| background: linear-gradient(135deg, var(--math), #ef4444); | |
| } | |
| .science .subject-icon { | |
| background: linear-gradient(135deg, var(--science), #2563eb); | |
| } | |
| .literature .subject-icon { | |
| background: linear-gradient(135deg, var(--literature), #7c3aed); | |
| } | |
| .history .subject-icon { | |
| background: linear-gradient(135deg, var(--history), #d97706); | |
| } | |
| .foreign .subject-icon { | |
| background: linear-gradient(135deg, var(--foreign), #db2777); | |
| } | |
| .art .subject-icon { | |
| background: linear-gradient(135deg, var(--art), #e879f9); | |
| } | |
| .music .subject-icon { | |
| background: linear-gradient(135deg, var(--music), #a855f7); | |
| } | |
| .tech .subject-icon { | |
| background: linear-gradient(135deg, var(--tech), #0ea5e9); | |
| } | |
| .sport .subject-icon { | |
| background: linear-gradient(135deg, var(--sport), #65a30d); | |
| } | |
| .subject-info { | |
| padding: 2rem; | |
| } | |
| .subject-info h3 { | |
| margin-bottom: 0.8rem; | |
| font-size: 1.4rem; | |
| } | |
| .subject-info p { | |
| color: var(--gray); | |
| margin-bottom: 1.5rem; | |
| font-size: 1rem; | |
| line-height: 1.5; | |
| } | |
| /* Секция материалов */ | |
| .resources { | |
| padding: 5rem 0; | |
| background-color: rgba(239, 246, 255, 0.3); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .resources::before { | |
| content: ''; | |
| position: absolute; | |
| top: -100px; | |
| right: -100px; | |
| width: 400px; | |
| height: 400px; | |
| background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%); | |
| z-index: 0; | |
| } | |
| .resources-content { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .resource-tabs { | |
| display: flex; | |
| gap: 1rem; | |
| margin-bottom: 3rem; | |
| overflow-x: auto; | |
| padding-bottom: 0.8rem; | |
| scrollbar-width: thin; | |
| } | |
| .tab-btn { | |
| padding: 0.8rem 1.6rem; | |
| background-color: white; | |
| border: 1px solid #e2e8f0; | |
| border-radius: 30px; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| white-space: nowrap; | |
| font-weight: 500; | |
| font-size: 0.95rem; | |
| } | |
| .tab-btn.active { | |
| background: linear-gradient(135deg, var(--primary), #6d28d9); | |
| color: white; | |
| border-color: var(--primary); | |
| } | |
| .tab-btn:hover:not(.active) { | |
| background-color: #f1f5f9; | |
| } | |
| .resource-list { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .resource-card { | |
| background-color: white; | |
| border-radius: var(--border-radius); | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| } | |
| .resource-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .resource-img { | |
| height: 200px; | |
| background-color: #e2e8f0; | |
| background-size: cover; | |
| background-position: center; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--gray); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .resource-img::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(16, 185, 129, 0.1)); | |
| } | |
| .resource-img i { | |
| font-size: 3rem; | |
| z-index: 1; | |
| } | |
| .resource-img.math { | |
| background-color: #fee2e2; | |
| } | |
| .resource-img.science { | |
| background-color: #dbeafe; | |
| } | |
| .resource-img.literature { | |
| background-color: #ede9fe; | |
| } | |
| .resource-img.history { | |
| background-color: #fef3c7; | |
| } | |
| .resource-details { | |
| padding: 2rem; | |
| } | |
| .resource-meta { | |
| display: flex; | |
| gap: 1.5rem; | |
| margin-bottom: 0.8rem; | |
| font-size: 0.85rem; | |
| color: var(--gray); | |
| flex-wrap: wrap; | |
| } | |
| .resource-details h3 { | |
| margin-bottom: 0.8rem; | |
| font-size: 1.3rem; | |
| line-height: 1.4; | |
| } | |
| .resource-details p { | |
| color: var(--gray); | |
| margin-bottom: 1.5rem; | |
| font-size: 0.95rem; | |
| line-height: 1.6; | |
| } | |
| .resource-actions { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .download-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| color: var(--primary); | |
| font-size: 0.95rem; | |
| font-weight: 500; | |
| text-decoration: none; | |
| transition: var(--transition); | |
| } | |
| .download-btn:hover { | |
| color: #4338ca; | |
| } | |
| .rating { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.3rem; | |
| color: #f59e0b; | |
| font-weight: 500; | |
| font-size: 0.95rem; | |
| } | |
| /* Секция возможностей */ | |
| .features { | |
| padding: 5rem 0; | |
| background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(79, 70, 229, 0.05)); | |
| } | |
| .feature-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); | |
| gap: 2.5rem; | |
| } | |
| .feature-card { | |
| display: flex; | |
| flex-direction: column; | |
| padding: 2.5rem; | |
| background-color: white; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| height: 100%; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .feature-icon { | |
| font-size: 2.2rem; | |
| color: var(--primary); | |
| margin-bottom: 1.5rem; | |
| width: 60px; | |
| height: 60px; | |
| background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(16, 185, 129, 0.1)); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: var(--transition); | |
| } | |
| .feature-card:hover .feature-icon { | |
| transform: scale(1.1); | |
| } | |
| .feature-text h3 { | |
| margin-bottom: 1rem; | |
| font-size: 1.3rem; | |
| } | |
| .feature-text p { | |
| color: var(--gray); | |
| font-size: 1rem; | |
| line-height: 1.6; | |
| } | |
| /* Секция загрузки */ | |
| .upload { | |
| padding: 6rem 0; | |
| background: linear-gradient(135deg, rgba(79, 70, 229, 0.05), rgba(236, 72, 153, 0.05)); | |
| text-align: center; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .upload::before { | |
| content: ''; | |
| position: absolute; | |
| bottom: -100px; | |
| left: -100px; | |
| width: 400px; | |
| height: 400px; | |
| background: radial-gradient(circle, rgba(236, 72, 153, 0.1) 0%, transparent 70%); | |
| z-index: 0; | |
| } | |
| .upload-content { | |
| max-width: 700px; | |
| margin: 0 auto; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .upload-steps { | |
| display: flex; | |
| justify-content: center; | |
| gap: 2rem; | |
| margin: 3rem 0; | |
| } | |
| .step { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| width: 120px; | |
| position: relative; | |
| } | |
| .step:not(:last-child)::after { | |
| content: ''; | |
| position: absolute; | |
| top: 20px; | |
| right: -35px; | |
| width: 30px; | |
| height: 2px; | |
| background-color: var(--primary); | |
| opacity: 0.3; | |
| } | |
| .step-number { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background-color: var(--primary); | |
| color: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 600; | |
| margin-bottom: 1rem; | |
| } | |
| .step-text { | |
| font-size: 0.9rem; | |
| color: var(--gray); | |
| } | |
| .upload-form { | |
| background-color: white; | |
| padding: 2.5rem; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--shadow); | |
| margin-top: 2rem; | |
| } | |
| .upload-btn { | |
| padding: 1.2rem 2.5rem; | |
| border-radius: var(--border-radius); | |
| background: linear-gradient(135deg, var(--primary), #6d28d9); | |
| color: white; | |
| font-weight: 600; | |
| font-size: 1.1rem; | |
| border: none; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .upload-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15); | |
| } | |
| /* Подвал */ | |
| footer { | |
| background-color: var(--dark); | |
| color: white; | |
| padding: 5rem 0 2rem; | |
| position: relative; | |
| } | |
| .footer-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); | |
| gap: 3rem; | |
| margin-bottom: 3rem; | |
| } | |
| .footer-logo { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.5rem; | |
| } | |
| .footer-logo-content { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.8rem; | |
| } | |
| .footer-logo-icon { | |
| font-size: 2rem; | |
| color: var(--primary); | |
| } | |
| .footer-logo-text { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| } | |
| .footer-desc { | |
| color: #94a3b8; | |
| line-height: 1.6; | |
| } | |
| .social-links { | |
| display: flex; | |
| gap: 1rem; | |
| margin-top: 1.5rem; | |
| } | |
| .social-links a { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 42px; | |
| height: 42px; | |
| border-radius: 50%; | |
| background-color: rgba(255, 255, 255, 0.1); | |
| color: white; | |
| transition: var(--transition); | |
| font-size: 1.1rem; | |
| } | |
| .social-links a:hover { | |
| background: linear-gradient(135deg, var(--primary), #6d28d9); | |
| transform: translateY(-3px); | |
| } | |
| .footer-links h3 { | |
| margin-bottom: 1.5rem; | |
| font-size: 1.2rem; | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .footer-links h3::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -8px; | |
| left: 0; | |
| width: 40px; | |
| height: 3px; | |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); | |
| } | |
| .footer-links ul { | |
| list-style: none; | |
| } | |
| .footer-links li { | |
| margin-bottom: 1rem; | |
| } | |
| .footer-links a { | |
| color: #94a3b8; | |
| text-decoration: none; | |
| transition: var(--transition); | |
| display: inline-block; | |
| } | |
| .footer-links a:hover { | |
| color: white; | |
| transform: translateX(5px); | |
| } | |
| .newsletter { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.2rem; | |
| } | |
| .newsletter p { | |
| color: #94a3b8; | |
| line-height: 1.6; | |
| } | |
| .newsletter-input { | |
| padding: 0.9rem 1.2rem; | |
| border-radius: var(--border-radius); | |
| border: none; | |
| background-color: rgba(255, 255, 255, 0.1); | |
| color: white; | |
| font-size: 1rem; | |
| } | |
| .newsletter-input:focus { | |
| outline: none; | |
| background-color: rgba(255, 255, 255, 0.15); | |
| } | |
| .newsletter-btn { | |
| padding: 0.9rem 1.5rem; | |
| border-radius: var(--border-radius); | |
| background: linear-gradient(135deg, var(--primary), #6d28d9); | |
| color: white; | |
| border: none; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .copyright { | |
| text-align: center; | |
| padding-top: 2.5rem; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| color: #94a3b8; | |
| font-size: 0.95rem; | |
| } | |
| /* Адаптивность */ | |
| @media (max-width: 1024px) { | |
| .hero h1 { | |
| font-size: 2.8rem; | |
| } | |
| .section-title { | |
| font-size: 2.2rem; | |
| } | |
| .feature-grid { | |
| gap: 2rem; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .nav-links { | |
| display: none; | |
| } | |
| .hero h1 { | |
| font-size: 2.4rem; | |
| } | |
| .section-title { | |
| font-size: 2rem; | |
| } | |
| .subject-grid { | |
| grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); | |
| } | |
| .hero-actions { | |
| flex-direction: column; | |
| width: 100%; | |
| gap: 1rem; | |
| } | |
| .hero-actions .btn { | |
| width: 100%; | |
| text-align: center; | |
| } | |
| } | |
| @media (max-width: 576px) { | |
| .container { | |
| padding: 0 1.5rem; | |
| } | |
| .hero h1 { | |
| font-size: 2rem; | |
| } | |
| .hero p { | |
| font-size: 1.15rem; | |
| } | |
| .section-title { | |
| font-size: 1.8rem; | |
| } | |
| .upload-steps { | |
| flex-wrap: wrap; | |
| } | |
| .step:not(:last-child)::after { | |
| display: none; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Шапка --> | |
| <header> | |
| <div class="container"> | |
| <nav class="navbar"> | |
| <a href="#" class="logo"> | |
| <i class="fas fa-book-open logo-icon"></i> | |
| <span class="logo-text">Учебник</span> | |
| </a> | |
| <div class="nav-links"> | |
| <a href="#subjects">Предметы</a> | |
| <a href="#resources">Материалы</a> | |
| <a href="#features">Преимущества</a> | |
| <a href="#upload">Поделиться</a> | |
| </div> | |
| <div class="user-actions"> | |
| <button class="auth-btn login">Войти</button> | |
| <button class="auth-btn register">Регистрация</button> | |
| <button class="theme-toggle" id="themeToggle"> | |
| <i class="fas fa-moon"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- Герой-секция --> | |
| <section class="hero"> | |
| <div class="container"> | |
| <div class="hero-content"> | |
| <h1>Школьные учебные материалы онлайн</h1> | |
| <p>Найдите, изучите и поделитесь конспектами, презентациями и другими учебными материалами с учениками со всей страны.</p> | |
| <div class="search-bar"> | |
| <input type="text" class="search-input" placeholder="Искать конспекты, тесты, презентации..."> | |
| <button class="search-btn"> | |
| <i class="fas fa-search"></i> Найти | |
| </button> | |
| </div> | |
| <div class="hero-actions"> | |
| <a href="#upload" class="btn btn-primary"> | |
| <i class="fas fa-cloud-upload-alt"></i> Поделиться материалами | |
| </a> | |
| <a href="#resources" class="btn btn-primary"> | |
| <i class="fas fa-eye"></i> Просмотреть материалы | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Секция предметов --> | |
| <section class="subjects" id="subjects"> | |
| <div class="container"> | |
| <h2 class="section-title text-center">Школьные предметы</h2> | |
| <p class="section-subtitle text-center">Выберите предмет, чтобы найти нужные учебные материалы</p> | |
| <div class="subject-grid"> | |
| <div class="subject-card math"> | |
| <div class="subject-icon"> | |
| <i class="fas fa-square-root-alt"></i> | |
| </div> | |
| <div class="subject-info"> | |
| <h3>Математика</h3> | |
| <p>Алгебра, геометрия, тригонометрия, математический анализ и теория вероятностей</p> | |
| <a href="#" class="btn btn-primary">Смотреть материалы</a> | |
| </div> | |
| </div> | |
| <div class="subject-card science"> | |
| <div class="subject-icon"> | |
| <i class="fas fa-atom"></i> | |
| </div> | |
| <div class="subject-info"> | |
| <h3>Наука</h3> | |
| <p>Физика, химия, биология, астрономия и экология для всех классов</p> | |
| <a href="#" class="btn btn-primary">Смотреть материалы</a> | |
| </div> | |
| </div> | |
| <div class="subject-card literature"> | |
| <div class="subject-icon"> | |
| <i class="fas fa-book-open"></i> | |
| </div> | |
| <div class="subject-info"> | |
| <h3>Литература</h3> | |
| <p>Русская и зарубежная литература, анализ произведений, сочинения</p> | |
| <a href="#" class="btn btn-primary">Смотреть материалы</a> | |
| </div> | |
| </div> | |
| <div class="subject-card foreign"> | |
| <div class="subject-icon"> | |
| <i class="fas fa-language"></i> | |
| </div> | |
| <div class="subject-info"> | |
| <h3>Иностранные языки</h3> | |
| <p>Английский, немецкий, французский и другие языки с материалами для изучения</p> | |
| <a href="#" class="btn btn-primary">Смотреть материалы</a> | |
| </div> | |
| </div> | |
| <div class="subject-card history"> | |
| <div class="subject-icon"> | |
| <i class="fas fa-landmark"></i> | |
| </div> | |
| <div class="subject-info"> | |
| <h3>История</h3> | |
| <p>Отечественная и всемирная история, обществознание, право и экономика</p> | |
| <a href="#" class="btn btn-primary">Смотреть материалы</a> | |
| </div> | |
| </div> | |
| <div class="subject-card art"> | |
| <div class="subject-icon"> | |
| <i class="fas fa-palette"></i> | |
| </div> | |
| <div class="subject-info"> | |
| <h3>Искусство</h3> | |
| <p>Мировая художественная культура, изобразительное искусство, черчение</p> | |
| <a href="#" class="btn btn-primary">Смотреть материалы</a> | |
| </div> | |
| </div> | |
| <div class="subject-card music"> | |
| <div class="subject-icon"> | |
| <i class="fas fa-music"></i> | |
| </div> | |
| <div class="subject-info"> | |
| <h3>Музыка</h3> | |
| <p>Теория музыки, история музыки, нотная грамота и полезные материалы</p> | |
| <a href="#" class="btn btn-primary">Смотреть материалы</a> | |
| </div> | |
| </div> | |
| <div class="subject-card tech"> | |
| <div class="subject-icon"> | |
| <i class="fas fa-laptop-code"></i> | |
| </div> | |
| <div class="subject-info"> | |
| <h3>Информатика</h3> | |
| <p>Программирование, алгоритмы, компьютерная графика и веб-дизайн</p> | |
| <a href="#" class="btn btn-primary">Смотреть материалы</a> | |
| </div> | |
| </div> | |
| <div class="subject-card sport"> | |
| <div class="subject-icon"> | |
| <i class="fas fa-running"></i> | |
| </div> | |
| <div class="subject-info"> | |
| <h3>Физкультура</h3> | |
| <p>Теория спорта, здоровый образ жизни, комплексы упражнений и разминки</p> | |
| <a href="#" class="btn btn-primary">Смотреть материалы</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Секция материалов --> | |
| <section class="resources" id="resources"> | |
| <div class="container"> | |
| <div class="resources-content"> | |
| <h2 class="section-title text-center">Популярные материалы</h2> | |
| <p class="section-subtitle text-center">Самые скачиваемые учебные материалы на этой неделе</p> | |
| <div class="resource-tabs"> | |
| <button class="tab-btn active">Все предметы</button> | |
| <button class="tab-btn">Математика</button> | |
| <button class="tab-btn">Физика</button> | |
| <button class="tab-btn">Химия</button> | |
| <button class="tab-btn">Биология</button> | |
| <button class="tab-btn">Литература</button> | |
| <button class="tab-btn">История</button> | |
| <button class="tab-btn">Иностранные языки</button> | |
| </div> | |
| <div class="resource-list"> | |
| <div class="resource-card"> | |
| <div class="resource-img math"> | |
| <i class="fas fa-file-alt"></i> | |
| </div> | |
| <div class="resource-details"> | |
| <div class="resource-meta"> | |
| <span><i class="fas fa-user-graduate"></i> 10 класс</span> | |
| <span><i class="fas fa-calendar-alt"></i> 2 дня назад</span> | |
| </div> | |
| <h3>Геометрия. Все формулы 7-9 класс</h3> | |
| <p>Полный сборник формул по геометрии с пояснениями и примерами применения для 7-9 классов.</p> | |
| <div class="resource-actions"> | |
| <a href="#" class="download-btn"><i class="fas fa-download"></i> Скачать</a> | |
| <div class="rating"> | |
| <i class="fas fa-star"></i> | |
| 4.9 (87) | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="resource-card"> | |
| <div class="resource-img science"> | |
| <i class="fas fa-file-pdf"></i> | |
| </div> | |
| <div class="resource-details"> | |
| <div class="resource-meta"> | |
| <span><i class="fas fa-user-graduate"></i> 11 класс</span> | |
| <span><i class="fas fa-calendar-alt"></i> 5 дней назад</span> | |
| </div> | |
| <h3>Краткий курс органической химии</h3> | |
| <p>Сжатое изложение основных тем органической химии с таблицами и реакциями.</p> | |
| <div class="resource-actions"> | |
| <a href="#" class="download-btn"><i class="fas fa-download"></i> Скачать</a> | |
| <div class="rating"> | |
| <i class="fas fa-star"></i> | |
| 4.7 (64) | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="resource-card"> | |
| <div class="resource-img literature"> | |
| <i class="fas fa-file-word"></i> | |
| </div> | |
| <div class="resource-details"> | |
| <div class="resource-meta"> | |
| <span><i class="fas fa-user-graduate"></i> 9 класс</span> | |
| <span><i class="fas fa-calendar-alt"></i> 1 неделя назад</span> | |
| </div> | |
| <h3>Анализ "Героя нашего времени"</h3> | |
| <p>Подробный разбор романа М.Ю. Лермонтова с характеристиками героев и основными темами.</p> | |
| <div class="resource-actions"> | |
| <a href="#" class="download-btn"><i class="fas fa-download"></i> Скачать</a> | |
| <div class="rating"> | |
| <i class="fas fa-star"></i> | |
| 4.8 (92) | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="resource-card"> | |
| <div class="resource-img foreign"> | |
| <i class="fas fa-file-powerpoint"></i> | |
| </div> | |
| <div class="resource-details"> | |
| <div class="resource-meta"> | |
| <span><i class="fas fa-user-graduate"></i> 8 класс</span> | |
| <span><i class="fas fa-calendar-alt"></i> 3 дня назад</span> | |
| </div> | |
| <h3>Английские времена (презентация)</h3> | |
| <p>Наглядная презентация с объяснением всех времен английского языка и примерами.</p> | |
| <div class="resource-actions"> | |
| <a href="#" class="download-btn"><i class="fas fa-download"></i> Скачать</a> | |
| <div class="rating"> | |
| <i class="fas fa-star"></i> | |
| 4.6 (45) | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="resource-card"> | |
| <div class="resource-img history"> | |
| <i class="fas fa-file-archive"></i> | |
| </div> | |
| <div class="resource-details"> | |
| <div class="resource-meta"> | |
| <span><i class="fas fa-user-graduate"></i> 10 класс</span> | |
| <span><i class="fas fa-calendar-alt"></i> 4 дня назад</span> | |
| </div> | |
| <h3>Даты по Второй мировой войне</h3> | |
| <p>Все важные даты и события Второй мировой войны в хронологической таблице.</p> | |
| <div class="resource-actions"> | |
| <a href="#" class="download-btn"><i class="fas fa-download"></i> Скачать</a> | |
| <div class="rating"> | |
| <i class="fas fa-star"></i> | |
| 4.5 (38) | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="resource-card"> | |
| <div class="resource-img tech"> | |
| <i class="fas fa-file-code"></i> | |
| </div> | |
| <div class="resource-details"> | |
| <div class="resource-meta"> | |
| <span><i class="fas fa-user-graduate"></i> 11 класс</span> | |
| <span><i class="fas fa-calendar-alt"></i> 6 дней назад</span> | |
| </div> | |
| <h3>Основы Python для начинающих</h3> | |
| <p>Конспект по основам программирования на Python с примерами и мини-задачами.</p> | |
| <div class="resource-actions"> | |
| <a href="#" class="download-btn"><i class="fas fa-download"></i> Скачать</a> | |
| <div class="rating"> | |
| <i class="fas fa-star"></i> | |
| 4.9 (56) | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Секция возможностей --> | |
| <section class="features" id="features"> | |
| <div class="container"> | |
| <h2 class="section-title text-center">Почему выбирают нас?</h2> | |
| <p class="section-subtitle text-center">Преимущества нашей образовательной платформы</p> | |
| <div class="feature-grid"> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-chalkboard-teacher"></i> | |
| </div> | |
| <div class="feature-text"> | |
| <h3>Учебные материалы</h3> | |
| <p>Тысячи проверенных конспектов, презентаций, тестов и других учебных материалов по всем предметам.</p> | |
| </div> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-search"></i> | |
| </div> | |
| <div class="feature-text"> | |
| <h3>Умный поиск</h3> | |
| <p>Мощная система поиска позволяет быстро находить нужные материалы по классу, предмету и теме.</p> | |
| </div> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <div class="feature-text"> | |
| <h3>Сообщество учащихся</h3> | |
| <p>Общайтесь с другими учениками, задавайте вопросы и получайте помощь в освоении сложных тем.</p> | |
| </div> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <div class="feature-text"> | |
| <h3>Рейтинги и отзывы</h3> | |
| <p>Система рейтингов помогает находить самые полезные и качественные учебные материалы.</p> | |
| </div> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-mobile-alt"></i> | |
| </div> | |
| <div class="feature-text"> | |
| <h3>Доступ на всех устройствах</h3> | |
| <p>Полный доступ к материалам с компьютера, планшета или смартфона в любое время.</p> | |
| </div> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <div class="feature-text"> | |
| <h3>Безопасность</h3> | |
| <p>Все материалы проверяются модераторами на соответствие образовательным стандартам.</p> | |
| </div> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-graduation-cap"></i> | |
| </div> | |
| <div class="feature-text"> | |
| <h3>Подготовка к экзаменам</h3> | |
| <p>Специальные разделы с материалами для подготовки к ОГЭ, ЕГЭ и другим экзаменам.</p> | |
| </div> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-award"></i> | |
| </div> | |
| <div class="feature-text"> | |
| <h3>Репутационная система</h3> | |
| <p>Зарабатывайте очки репутации, помогая другим, и получайте доступ к эксклюзивным материалам.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Секция загрузки --> | |
| <section class="upload" id="upload"> | |
| <div class="container"> | |
| <div class="upload-content"> | |
| <h2 class="section-title">Поделитесь своими знаниями</h2> | |
| <p class="section-subtitle">Загрузите свои конспекты, презентации или другие учебные материалы и помогите другим ученикам в обучении.</p> | |
| <div class="upload-steps"> | |
| <div class="step"> | |
| <div class="step-number">1</div> | |
| <div class="step-text">Выберите файл</div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">2</div> | |
| <div class="step-text">Добавьте описание</div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">3</div> | |
| <div class="step-text">Загрузите</div> | |
| </div> | |
| </div> | |
| <div class="upload-form"> | |
| <button class="btn btn-primary upload-btn"> | |
| <i class="fas fa-cloud-upload-alt"></i> Загрузить материалы | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Подвал --> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-grid"> | |
| <div class="footer-logo"> | |
| <div class="footer-logo-content"> | |
| <i class="fas fa-book-open footer-logo-icon"></i> | |
| <span class="footer-logo-text">Учебник</span> | |
| </div> | |
| <p class="footer-desc">Образовательная платформа для обмена учебными материалами между школьниками, студентами и преподавателями.</p> | |
| <div class="social-links"> | |
| <a href="#"><i class="fab fa-vk"></i></a> | |
| <a href="#"><i class="fab fa-telegram"></i></a> | |
| <a href="#"><i class="fab fa-youtube"></i></a> | |
| <a href="#"><i class="fab fa-odnoklassniki"></i></a> | |
| </div> | |
| </div> | |
| <div class="footer-links"> | |
| <h3>Предметы</h3> | |
| <ul> | |
| <li><a href="#">Математика</a></li> | |
| <li><a href="#">Физика</a></li> | |
| <li><a href="#">Химия</a></li> | |
| <li><a href="#">Биология</a></li> | |
| <li><a href="#">Информатика</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-links"> | |
| <h3>Материалы</h3> | |
| <ul> | |
| <li><a href="#">Конспекты</a></li> | |
| <li><a href="#">Презентации</a></li> | |
| <li><a href="#">Тесты</a></li> | |
| <li><a href="#">ГДЗ</a></li> | |
| <li><a href="#">КИМы</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-links"> | |
| <h3>Помощь</h3> | |
| <ul> | |
| <li><a href="#">FAQ</a></li> | |
| <li><a href="#">Правила</a></li> | |
| <li><a href="#">Модерация</a></li> | |
| <li><a href="#">Контакты</a></li> | |
| </ul> | |
| </div> | |
| <div class="newsletter"> | |
| <h3>Подписаться</h3> | |
| <p>Получайте уведомления о новых материалах и обновлениях платформы.</p> | |
| <input type="email" class="newsletter-input" placeholder="Ваш email"> | |
| <button class="newsletter-btn">Подписаться</button> | |
| </div> | |
| </div> | |
| <div class="copyright"> | |
| © 2023 Учебник. Все права защищены. | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Переключение темы | |
| const themeToggle = document.getElementById('themeToggle'); | |
| const icon = themeToggle.querySelector('i'); | |
| themeToggle.addEventListener('click', () => { | |
| document.body.setAttribute('data-theme', | |
| document.body.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'); | |
| if (document.body.getAttribute('data-theme') === 'dark') { | |
| icon.classList.remove('fa-moon'); | |
| icon.classList.add('fa-sun'); | |
| } else { | |
| icon.classList.remove('fa-sun'); | |
| icon.classList.add('fa-moon'); | |
| } | |
| }); | |
| // Функционал вкладок | |
| const tabButtons = document.querySelectorAll('.tab-btn'); | |
| tabButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| tabButtons.forEach(btn => btn.classList.remove('active')); | |
| button.classList.add('active'); | |
| // Здесь должна быть логика фильтрации материалов | |
| }); | |
| }); | |
| // Плавная прокрутка | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 90, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Анимация при загрузке | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const elements = document.querySelectorAll('.subject-card, .feature-card, .resource-card'); | |
| elements.forEach((el, index) => { | |
| setTimeout(() => { | |
| el.style.opacity = '1'; | |
| el.style.transform = 'translateY(0)'; | |
| }, index * 100); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> | |
| </html> |