feat: Complete frontend redesign with modern UI/UX
- Created modern design system with CSS variables and gradients - Implemented new base template with dark/light theme support - Added modern navigation with smooth animations and transitions - Redesigned home page with hero section, service previews, and interactive elements - Created modern services page with filtering and modal functionality - Redesigned about page with team section, stats, and technology stack - Added comprehensive JavaScript for interactivity and animations - Implemented responsive design for mobile devices - Added Font Awesome icons and Google Fonts (Inter) - Created modular CSS architecture with utility classes - Added loading screens, scroll-to-top, and theme toggle functionality - Improved accessibility with proper ARIA labels and semantic markup Features: - Dark/Light theme toggle - Smooth scroll animations - Interactive service cards - Modern button styles with ripple effects - Responsive grid layouts - Progress bars and statistics - Mobile-first responsive design - Clean typography and modern spacing - Card-based UI with shadows and hover effects
This commit is contained in:
556
smartsoltech/web/templates/web/about_modern.html
Normal file
556
smartsoltech/web/templates/web/about_modern.html
Normal file
@@ -0,0 +1,556 @@
|
||||
{% extends 'web/base_modern.html' %}
|
||||
{% load static %}
|
||||
{% block title %}О нас - SmartSolTech{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-modern">
|
||||
<div class="container-modern">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<span class="badge bg-gradient text-white mb-3 px-3 py-2 rounded-pill">
|
||||
🚀 О нас
|
||||
</span>
|
||||
<h1 class="display-4 fw-bold mb-4">
|
||||
Мы создаем <span class="text-gradient">цифровое будущее</span>
|
||||
</h1>
|
||||
<p class="lead text-muted mb-4">
|
||||
SmartSolTech - это команда профессионалов, которые превращают идеи в инновационные IT-решения.
|
||||
Мы помогаем бизнесу расти и развиваться в цифровую эпоху.
|
||||
</p>
|
||||
<div class="d-flex flex-wrap gap-3">
|
||||
<a href="#team" class="btn btn-primary-modern">
|
||||
<i class="fas fa-users me-2"></i>
|
||||
Наша команда
|
||||
</a>
|
||||
<a href="#contact" class="btn btn-secondary-modern">
|
||||
<i class="fas fa-envelope me-2"></i>
|
||||
Связаться с нами
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="text-center">
|
||||
<div class="position-relative">
|
||||
<!-- Company illustration -->
|
||||
<div class="about-graphic">
|
||||
<div class="row g-3">
|
||||
<div class="col-6">
|
||||
<div class="stat-card bg-white rounded-4 p-4 shadow animate-float">
|
||||
<div class="stat-icon bg-primary rounded-3 mb-3 mx-auto" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;">
|
||||
<i class="fas fa-code text-white fa-2x"></i>
|
||||
</div>
|
||||
<h3 class="text-gradient fw-bold">50+</h3>
|
||||
<p class="mb-0 text-muted">Проектов</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="stat-card bg-white rounded-4 p-4 shadow animate-float" style="animation-delay: 0.5s;">
|
||||
<div class="stat-icon bg-success rounded-3 mb-3 mx-auto" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;">
|
||||
<i class="fas fa-users text-white fa-2x"></i>
|
||||
</div>
|
||||
<h3 class="text-gradient fw-bold">30+</h3>
|
||||
<p class="mb-0 text-muted">Клиентов</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="stat-card bg-white rounded-4 p-4 shadow animate-float" style="animation-delay: 1s;">
|
||||
<div class="stat-icon bg-warning rounded-3 mb-3 mx-auto" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;">
|
||||
<i class="fas fa-award text-white fa-2x"></i>
|
||||
</div>
|
||||
<h3 class="text-gradient fw-bold">3+</h3>
|
||||
<p class="mb-0 text-muted">Лет опыта</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="stat-card bg-white rounded-4 p-4 shadow animate-float" style="animation-delay: 1.5s;">
|
||||
<div class="stat-icon bg-info rounded-3 mb-3 mx-auto" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;">
|
||||
<i class="fas fa-rocket text-white fa-2x"></i>
|
||||
</div>
|
||||
<h3 class="text-gradient fw-bold">24/7</h3>
|
||||
<p class="mb-0 text-muted">Поддержка</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Mission & Vision -->
|
||||
<section class="section-padding bg-light">
|
||||
<div class="container-modern">
|
||||
<div class="row g-5">
|
||||
<div class="col-lg-6">
|
||||
<div class="pe-lg-4">
|
||||
<span class="badge bg-primary text-white mb-3 px-3 py-2 rounded-pill">
|
||||
🎯 Наша миссия
|
||||
</span>
|
||||
<h2 class="display-6 fw-bold mb-4">
|
||||
Делаем технологии <span class="text-gradient">доступными</span>
|
||||
</h2>
|
||||
<p class="text-muted mb-4">
|
||||
Мы верим, что каждый бизнес заслуживает доступа к современным технологиям.
|
||||
Наша миссия — демократизировать IT-решения и помочь компаниям любого размера
|
||||
достичь цифрового совершенства.
|
||||
</p>
|
||||
<div class="mission-points">
|
||||
<div class="d-flex align-items-start mb-3">
|
||||
<i class="fas fa-check-circle text-success me-3 mt-1"></i>
|
||||
<div>
|
||||
<h6>Инновационные решения</h6>
|
||||
<p class="text-muted mb-0 small">Используем передовые технологии для создания уникальных продуктов</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-start mb-3">
|
||||
<i class="fas fa-check-circle text-success me-3 mt-1"></i>
|
||||
<div>
|
||||
<h6>Клиентоориентированность</h6>
|
||||
<p class="text-muted mb-0 small">Фокусируемся на потребностях и целях каждого клиента</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-start">
|
||||
<i class="fas fa-check-circle text-success me-3 mt-1"></i>
|
||||
<div>
|
||||
<h6>Непрерывное развитие</h6>
|
||||
<p class="text-muted mb-0 small">Постоянно совершенствуем наши навыки и знания</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="ps-lg-4">
|
||||
<span class="badge bg-secondary text-white mb-3 px-3 py-2 rounded-pill">
|
||||
🔮 Наше видение
|
||||
</span>
|
||||
<h2 class="display-6 fw-bold mb-4">
|
||||
Будущее начинается <span class="text-gradient">сегодня</span>
|
||||
</h2>
|
||||
<p class="text-muted mb-4">
|
||||
Мы стремимся стать ведущей IT-компанией в Корее, известной своими инновационными решениями,
|
||||
высоким качеством сервиса и способностью трансформировать бизнес-идеи в успешные цифровые продукты.
|
||||
</p>
|
||||
|
||||
<!-- Progress bars -->
|
||||
<div class="skills-progress">
|
||||
<div class="skill-item mb-3">
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span class="fw-semibold">Веб-разработка</span>
|
||||
<span class="text-muted">95%</span>
|
||||
</div>
|
||||
<div class="progress" style="height: 8px;">
|
||||
<div class="progress-bar bg-gradient" role="progressbar" style="width: 95%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skill-item mb-3">
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span class="fw-semibold">Мобильная разработка</span>
|
||||
<span class="text-muted">90%</span>
|
||||
</div>
|
||||
<div class="progress" style="height: 8px;">
|
||||
<div class="progress-bar bg-gradient" role="progressbar" style="width: 90%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skill-item mb-3">
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span class="fw-semibold">UI/UX Дизайн</span>
|
||||
<span class="text-muted">85%</span>
|
||||
</div>
|
||||
<div class="progress" style="height: 8px;">
|
||||
<div class="progress-bar bg-gradient" role="progressbar" style="width: 85%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skill-item">
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span class="fw-semibold">DevOps</span>
|
||||
<span class="text-muted">80%</span>
|
||||
</div>
|
||||
<div class="progress" style="height: 8px;">
|
||||
<div class="progress-bar bg-gradient" role="progressbar" style="width: 80%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Team Section -->
|
||||
<section class="section-padding" id="team">
|
||||
<div class="container-modern">
|
||||
<div class="text-center mb-5">
|
||||
<span class="badge bg-gradient text-white mb-3 px-3 py-2 rounded-pill">
|
||||
👥 Команда
|
||||
</span>
|
||||
<h2 class="display-5 fw-bold mb-3">
|
||||
Познакомьтесь с <span class="text-gradient">нашей командой</span>
|
||||
</h2>
|
||||
<p class="lead text-muted max-width-600 mx-auto">
|
||||
Талантливые профессионалы, которые воплощают ваши идеи в реальность
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<!-- Team Member 1 -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="card-modern text-center h-100">
|
||||
<div class="position-relative">
|
||||
<div class="team-avatar mx-auto mb-3" style="width: 120px; height: 120px; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
|
||||
<i class="fas fa-user text-white fa-3x"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="mb-2">Алексей Чой</h5>
|
||||
<p class="text-primary mb-3">CEO & Founder</p>
|
||||
<p class="text-muted small mb-3">
|
||||
Визионер и лидер команды с более чем 5-летним опытом в IT-индустрии.
|
||||
Специализируется на стратегическом планировании и управлении проектами.
|
||||
</p>
|
||||
<div class="d-flex justify-content-center gap-2">
|
||||
<a href="#" class="btn btn-outline-primary btn-sm rounded-circle" style="width: 40px; height: 40px;">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="#" class="btn btn-outline-primary btn-sm rounded-circle" style="width: 40px; height: 40px;">
|
||||
<i class="fab fa-github"></i>
|
||||
</a>
|
||||
<a href="#" class="btn btn-outline-primary btn-sm rounded-circle" style="width: 40px; height: 40px;">
|
||||
<i class="fab fa-telegram-plane"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Team Member 2 -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="card-modern text-center h-100">
|
||||
<div class="position-relative">
|
||||
<div class="team-avatar mx-auto mb-3" style="width: 120px; height: 120px; background: var(--gradient-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
|
||||
<i class="fas fa-user text-white fa-3x"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="mb-2">Анна Ким</h5>
|
||||
<p class="text-success mb-3">Lead Developer</p>
|
||||
<p class="text-muted small mb-3">
|
||||
Опытный full-stack разработчик со страстью к созданию масштабируемых
|
||||
и эффективных веб-приложений. Эксперт в React, Django и cloud технологиях.
|
||||
</p>
|
||||
<div class="d-flex justify-content-center gap-2">
|
||||
<a href="#" class="btn btn-outline-primary btn-sm rounded-circle" style="width: 40px; height: 40px;">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="#" class="btn btn-outline-primary btn-sm rounded-circle" style="width: 40px; height: 40px;">
|
||||
<i class="fab fa-github"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Team Member 3 -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="card-modern text-center h-100">
|
||||
<div class="position-relative">
|
||||
<div class="team-avatar mx-auto mb-3" style="width: 120px; height: 120px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
|
||||
<i class="fas fa-user text-white fa-3x"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="mb-2">Дмитрий Пак</h5>
|
||||
<p class="text-warning mb-3">UI/UX Designer</p>
|
||||
<p class="text-muted small mb-3">
|
||||
Креативный дизайнер, создающий интуитивные и привлекательные пользовательские интерфейсы.
|
||||
Специализируется на UX-исследованиях и современном веб-дизайне.
|
||||
</p>
|
||||
<div class="d-flex justify-content-center gap-2">
|
||||
<a href="#" class="btn btn-outline-primary btn-sm rounded-circle" style="width: 40px; height: 40px;">
|
||||
<i class="fab fa-dribbble"></i>
|
||||
</a>
|
||||
<a href="#" class="btn btn-outline-primary btn-sm rounded-circle" style="width: 40px; height: 40px;">
|
||||
<i class="fab fa-behance"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Technologies Section -->
|
||||
<section class="section-padding bg-light">
|
||||
<div class="container-modern">
|
||||
<div class="text-center mb-5">
|
||||
<span class="badge bg-gradient text-white mb-3 px-3 py-2 rounded-pill">
|
||||
⚡ Технологии
|
||||
</span>
|
||||
<h2 class="display-6 fw-bold mb-3">
|
||||
Современный <span class="text-gradient">технологический стек</span>
|
||||
</h2>
|
||||
<p class="lead text-muted">
|
||||
Мы используем проверенные и инновационные технологии для создания качественных решений
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<!-- Frontend -->
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="text-center">
|
||||
<h5 class="mb-3">Frontend</h5>
|
||||
<div class="d-flex flex-wrap justify-content-center gap-3">
|
||||
<div class="tech-icon">
|
||||
<i class="fab fa-react text-info fa-2x"></i>
|
||||
<small class="d-block mt-1">React</small>
|
||||
</div>
|
||||
<div class="tech-icon">
|
||||
<i class="fab fa-vue text-success fa-2x"></i>
|
||||
<small class="d-block mt-1">Vue.js</small>
|
||||
</div>
|
||||
<div class="tech-icon">
|
||||
<i class="fab fa-html5 text-danger fa-2x"></i>
|
||||
<small class="d-block mt-1">HTML5</small>
|
||||
</div>
|
||||
<div class="tech-icon">
|
||||
<i class="fab fa-css3-alt text-primary fa-2x"></i>
|
||||
<small class="d-block mt-1">CSS3</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Backend -->
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="text-center">
|
||||
<h5 class="mb-3">Backend</h5>
|
||||
<div class="d-flex flex-wrap justify-content-center gap-3">
|
||||
<div class="tech-icon">
|
||||
<i class="fab fa-python text-warning fa-2x"></i>
|
||||
<small class="d-block mt-1">Python</small>
|
||||
</div>
|
||||
<div class="tech-icon">
|
||||
<i class="fas fa-server text-success fa-2x"></i>
|
||||
<small class="d-block mt-1">Django</small>
|
||||
</div>
|
||||
<div class="tech-icon">
|
||||
<i class="fab fa-node-js text-success fa-2x"></i>
|
||||
<small class="d-block mt-1">Node.js</small>
|
||||
</div>
|
||||
<div class="tech-icon">
|
||||
<i class="fas fa-database text-info fa-2x"></i>
|
||||
<small class="d-block mt-1">PostgreSQL</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile -->
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="text-center">
|
||||
<h5 class="mb-3">Mobile</h5>
|
||||
<div class="d-flex flex-wrap justify-content-center gap-3">
|
||||
<div class="tech-icon">
|
||||
<i class="fab fa-react text-info fa-2x"></i>
|
||||
<small class="d-block mt-1">React Native</small>
|
||||
</div>
|
||||
<div class="tech-icon">
|
||||
<i class="fab fa-android text-success fa-2x"></i>
|
||||
<small class="d-block mt-1">Android</small>
|
||||
</div>
|
||||
<div class="tech-icon">
|
||||
<i class="fab fa-apple text-dark fa-2x"></i>
|
||||
<small class="d-block mt-1">iOS</small>
|
||||
</div>
|
||||
<div class="tech-icon">
|
||||
<i class="fas fa-mobile-alt text-primary fa-2x"></i>
|
||||
<small class="d-block mt-1">Flutter</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DevOps -->
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="text-center">
|
||||
<h5 class="mb-3">DevOps</h5>
|
||||
<div class="d-flex flex-wrap justify-content-center gap-3">
|
||||
<div class="tech-icon">
|
||||
<i class="fab fa-docker text-primary fa-2x"></i>
|
||||
<small class="d-block mt-1">Docker</small>
|
||||
</div>
|
||||
<div class="tech-icon">
|
||||
<i class="fab fa-aws text-warning fa-2x"></i>
|
||||
<small class="d-block mt-1">AWS</small>
|
||||
</div>
|
||||
<div class="tech-icon">
|
||||
<i class="fab fa-github text-dark fa-2x"></i>
|
||||
<small class="d-block mt-1">GitHub</small>
|
||||
</div>
|
||||
<div class="tech-icon">
|
||||
<i class="fas fa-cogs text-secondary fa-2x"></i>
|
||||
<small class="d-block mt-1">CI/CD</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section class="section-padding bg-gradient text-white" id="contact">
|
||||
<div class="container-modern">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="display-6 fw-bold mb-4">
|
||||
Начнем сотрудничество?
|
||||
</h2>
|
||||
<p class="lead opacity-90 mb-5">
|
||||
Свяжитесь с нами для обсуждения вашего проекта
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4 text-center">
|
||||
<div class="contact-item">
|
||||
<i class="fas fa-envelope fa-2x mb-3 opacity-75"></i>
|
||||
<h5>Email</h5>
|
||||
<a href="mailto:info@smartsoltech.kr" class="text-white text-decoration-none opacity-75">
|
||||
info@smartsoltech.kr
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 text-center">
|
||||
<div class="contact-item">
|
||||
<i class="fas fa-phone fa-2x mb-3 opacity-75"></i>
|
||||
<h5>Телефон</h5>
|
||||
<a href="tel:+82-10-XXXX-XXXX" class="text-white text-decoration-none opacity-75">
|
||||
+82-10-XXXX-XXXX
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 text-center">
|
||||
<div class="contact-item">
|
||||
<i class="fab fa-telegram-plane fa-2x mb-3 opacity-75"></i>
|
||||
<h5>Telegram</h5>
|
||||
<a href="https://t.me/smartsoltech" class="text-white text-decoration-none opacity-75">
|
||||
@smartsoltech
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-5">
|
||||
<a href="{% url 'services' %}" class="btn btn-light btn-lg text-primary">
|
||||
<i class="fas fa-rocket me-2"></i>
|
||||
Начать проект
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Animate progress bars when they come into view
|
||||
const observerOptions = {
|
||||
threshold: 0.5
|
||||
};
|
||||
|
||||
const progressObserver = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const progressBars = entry.target.querySelectorAll('.progress-bar');
|
||||
progressBars.forEach(bar => {
|
||||
const width = bar.style.width;
|
||||
bar.style.width = '0%';
|
||||
setTimeout(() => {
|
||||
bar.style.width = width;
|
||||
}, 200);
|
||||
});
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
const skillsSection = document.querySelector('.skills-progress');
|
||||
if (skillsSection) {
|
||||
progressObserver.observe(skillsSection);
|
||||
}
|
||||
|
||||
// Animate stat cards
|
||||
const statCards = document.querySelectorAll('.stat-card');
|
||||
statCards.forEach((card, index) => {
|
||||
setTimeout(() => {
|
||||
card.classList.add('animate-fade-in-up');
|
||||
}, index * 200);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.max-width-600 {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.tech-icon {
|
||||
padding: 1rem;
|
||||
border-radius: 12px;
|
||||
background: var(--bg-light);
|
||||
box-shadow: var(--shadow);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.tech-icon:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
transition: width 1.5s ease-in-out;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.contact-item:hover i {
|
||||
transform: scale(1.1);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.team-avatar {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card-modern:hover .team-avatar {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.about-graphic .row {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.tech-icon {
|
||||
margin: 0.25rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
72
smartsoltech/web/templates/web/base_modern.html
Normal file
72
smartsoltech/web/templates/web/base_modern.html
Normal file
@@ -0,0 +1,72 @@
|
||||
{% load static %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru" data-theme="light">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="SmartSolTech - Современные IT-решения для вашего бизнеса">
|
||||
<meta name="keywords" content="IT, разработка, веб-дизайн, мобильные приложения, SmartSolTech">
|
||||
<meta name="author" content="SmartSolTech">
|
||||
|
||||
<!-- Preconnect to Google Fonts for performance -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Font Awesome for icons -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom Styles -->
|
||||
<link rel="stylesheet" href="{% static 'assets/css/modern-styles.css' %}">
|
||||
<link rel="stylesheet" href="{% static 'assets/css/modal-styles.css' %}">
|
||||
|
||||
<!-- Manifest -->
|
||||
<link rel="manifest" href="/static/manifest.json">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/x-icon" href="{% static 'assets/img/favicon.ico' %}">
|
||||
|
||||
<title>{% block title %}SmartSolTech - Современные IT-решения{% endblock %}</title>
|
||||
|
||||
{% block extra_head %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<!-- Loading Screen -->
|
||||
<div id="loading-screen" class="position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center" style="background: var(--bg-light); z-index: 9999;">
|
||||
<div class="loading-spinner"></div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
{% include 'web/navbar_modern.html' %}
|
||||
|
||||
<!-- Main Content -->
|
||||
<main>
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
{% include 'web/footer_modern.html' %}
|
||||
|
||||
<!-- Theme Toggle Button -->
|
||||
<button id="theme-toggle" class="theme-toggle" aria-label="Переключить тему">
|
||||
<i class="fas fa-moon"></i>
|
||||
</button>
|
||||
|
||||
<!-- Scroll to Top Button -->
|
||||
<button id="scroll-to-top" class="position-fixed bottom-0 end-0 m-4 btn btn-primary-modern rounded-circle" style="width: 50px; height: 50px; display: none; z-index: 999;">
|
||||
<i class="fas fa-arrow-up"></i>
|
||||
</button>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="{% static 'assets/js/modern-scripts.js' %}"></script>
|
||||
<script src="{% static 'assets/js/modal-init.js' %}"></script>
|
||||
|
||||
{% block extra_scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
189
smartsoltech/web/templates/web/footer_modern.html
Normal file
189
smartsoltech/web/templates/web/footer_modern.html
Normal file
@@ -0,0 +1,189 @@
|
||||
{% load static %}
|
||||
<footer class="bg-dark text-light section-padding mt-5">
|
||||
<div class="container-modern">
|
||||
<div class="row g-4">
|
||||
<!-- Company Info -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="mb-4">
|
||||
<h4 class="text-gradient mb-3">
|
||||
<i class="fas fa-code me-2"></i>
|
||||
SmartSolTech
|
||||
</h4>
|
||||
<p class="text-light opacity-75 mb-4">
|
||||
Мы создаем инновационные IT-решения, которые помогают бизнесу расти и развиваться в цифровую эпоху.
|
||||
</p>
|
||||
<div class="d-flex gap-3">
|
||||
<a href="#" class="btn btn-outline-light rounded-circle" style="width: 45px; height: 45px;">
|
||||
<i class="fab fa-telegram-plane"></i>
|
||||
</a>
|
||||
<a href="#" class="btn btn-outline-light rounded-circle" style="width: 45px; height: 45px;">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="#" class="btn btn-outline-light rounded-circle" style="width: 45px; height: 45px;">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="#" class="btn btn-outline-light rounded-circle" style="width: 45px; height: 45px;">
|
||||
<i class="fab fa-github"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Services -->
|
||||
<div class="col-lg-2 col-md-6">
|
||||
<h5 class="mb-3 text-light">Услуги</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2">
|
||||
<a href="{% url 'services' %}" class="text-light opacity-75 text-decoration-none hover-primary">
|
||||
Веб-разработка
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a href="{% url 'services' %}" class="text-light opacity-75 text-decoration-none hover-primary">
|
||||
Мобильные приложения
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a href="{% url 'services' %}" class="text-light opacity-75 text-decoration-none hover-primary">
|
||||
UI/UX Дизайн
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a href="{% url 'services' %}" class="text-light opacity-75 text-decoration-none hover-primary">
|
||||
DevOps
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Company -->
|
||||
<div class="col-lg-2 col-md-6">
|
||||
<h5 class="mb-3 text-light">Компания</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2">
|
||||
<a href="{% url 'about' %}" class="text-light opacity-75 text-decoration-none hover-primary">
|
||||
О нас
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a href="#" class="text-light opacity-75 text-decoration-none hover-primary">
|
||||
Портфолио
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a href="#" class="text-light opacity-75 text-decoration-none hover-primary">
|
||||
Команда
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a href="#" class="text-light opacity-75 text-decoration-none hover-primary">
|
||||
Карьера
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Contact Info -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<h5 class="mb-3 text-light">Контакты</h5>
|
||||
<div class="mb-3">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<i class="fas fa-envelope me-3 text-primary"></i>
|
||||
<a href="mailto:info@smartsoltech.kr" class="text-light opacity-75 text-decoration-none hover-primary">
|
||||
info@smartsoltech.kr
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<i class="fas fa-phone me-3 text-primary"></i>
|
||||
<a href="tel:+82-10-XXXX-XXXX" class="text-light opacity-75 text-decoration-none hover-primary">
|
||||
+82-10-XXXX-XXXX
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex align-items-start mb-2">
|
||||
<i class="fas fa-map-marker-alt me-3 text-primary mt-1"></i>
|
||||
<span class="text-light opacity-75">
|
||||
Seoul, South Korea
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Newsletter -->
|
||||
<div class="mt-4">
|
||||
<h6 class="text-light mb-2">Подписаться на новости</h6>
|
||||
<form class="d-flex">
|
||||
<input type="email" class="form-control me-2 bg-transparent border-light text-light"
|
||||
placeholder="Ваш email" style="border-radius: 10px;">
|
||||
<button type="submit" class="btn btn-primary-modern">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-5 border-light opacity-25">
|
||||
|
||||
<!-- Copyright -->
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-6">
|
||||
<p class="mb-0 text-light opacity-75">
|
||||
© 2025 SmartSolTech. Все права защищены.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="d-md-flex justify-content-md-end">
|
||||
<ul class="list-inline mb-0">
|
||||
<li class="list-inline-item">
|
||||
<a href="#" class="text-light opacity-75 text-decoration-none hover-primary small">
|
||||
Политика конфиденциальности
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item ms-3">
|
||||
<a href="#" class="text-light opacity-75 text-decoration-none hover-primary small">
|
||||
Условия использования
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.hover-primary {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.hover-primary:hover {
|
||||
color: var(--primary-color) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
footer {
|
||||
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
footer::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="10" height="10" patternUnits="userSpaceOnUse"><circle cx="5" cy="5" r="0.5" fill="%236366f1" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
footer .container-modern {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.btn-outline-light:hover {
|
||||
background: var(--gradient-primary) !important;
|
||||
border-color: transparent !important;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
</style>
|
||||
370
smartsoltech/web/templates/web/home_modern.html
Normal file
370
smartsoltech/web/templates/web/home_modern.html
Normal file
@@ -0,0 +1,370 @@
|
||||
{% extends 'web/base_modern.html' %}
|
||||
{% load static %}
|
||||
{% block title %}SmartSolTech - Современные IT-решения для вашего бизнеса{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-modern" id="home">
|
||||
<div class="container-modern">
|
||||
<div class="row align-items-center min-vh-100">
|
||||
<div class="col-lg-6">
|
||||
<div class="animate-fade-in-up">
|
||||
<span class="badge bg-gradient text-white mb-3 px-3 py-2 rounded-pill fs-6">
|
||||
🚀 Инновационные IT-решения
|
||||
</span>
|
||||
<h1 class="display-3 fw-bold mb-4">
|
||||
Создаем <span class="text-gradient">будущее</span> вашего бизнеса
|
||||
</h1>
|
||||
<p class="lead mb-4 text-muted">
|
||||
Мы разрабатываем современные веб-приложения, мобильные решения и системы автоматизации,
|
||||
которые помогают компаниям расти и быть конкурентоспособными.
|
||||
</p>
|
||||
<div class="d-flex flex-wrap gap-3 mb-5">
|
||||
<a href="{% url 'services' %}" class="btn btn-primary-modern btn-lg">
|
||||
<i class="fas fa-rocket me-2"></i>
|
||||
Начать проект
|
||||
</a>
|
||||
<a href="{% url 'about' %}" class="btn btn-secondary-modern btn-lg">
|
||||
<i class="fas fa-play-circle me-2"></i>
|
||||
Узнать больше
|
||||
</a>
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<div class="col-4">
|
||||
<div class="stat-item">
|
||||
<h3 class="text-gradient fw-bold mb-1">50+</h3>
|
||||
<p class="small text-muted mb-0">Проектов</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="stat-item">
|
||||
<h3 class="text-gradient fw-bold mb-1">3+</h3>
|
||||
<p class="small text-muted mb-0">Лет опыта</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="stat-item">
|
||||
<h3 class="text-gradient fw-bold mb-1">24/7</h3>
|
||||
<p class="small text-muted mb-0">Поддержка</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="text-center animate-float">
|
||||
<div class="position-relative">
|
||||
<!-- 3D Graphic Placeholder -->
|
||||
<div class="hero-graphic p-5">
|
||||
<div class="position-relative">
|
||||
<!-- Code Window -->
|
||||
<div class="code-window bg-dark rounded-4 p-4 mb-4 shadow-lg"
|
||||
style="transform: rotate(-5deg); max-width: 400px;">
|
||||
<div class="d-flex gap-2 mb-3">
|
||||
<div class="rounded-circle bg-danger" style="width: 12px; height: 12px;"></div>
|
||||
<div class="rounded-circle bg-warning" style="width: 12px; height: 12px;"></div>
|
||||
<div class="rounded-circle bg-success" style="width: 12px; height: 12px;"></div>
|
||||
</div>
|
||||
<div class="text-light font-monospace small">
|
||||
<div class="text-info">def create_future():</div>
|
||||
<div class="ms-3 text-success">return innovation + passion</div>
|
||||
<div class="text-warning">// SmartSolTech</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile App Preview -->
|
||||
<div class="mobile-preview bg-light rounded-4 p-3 shadow-lg position-absolute"
|
||||
style="transform: rotate(10deg); top: 50px; right: 50px; width: 200px;">
|
||||
<div class="bg-gradient rounded-3 p-3 text-white text-center">
|
||||
<i class="fas fa-mobile-alt fa-3x mb-2"></i>
|
||||
<h6 class="mb-1">Мобильные</h6>
|
||||
<p class="small mb-0 opacity-75">приложения</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Floating Icons -->
|
||||
<div class="floating-icon position-absolute"
|
||||
style="top: 20px; left: 20px; animation: float 2s ease-in-out infinite;">
|
||||
<div class="bg-primary rounded-3 p-3 text-white shadow">
|
||||
<i class="fab fa-react fa-2x"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="floating-icon position-absolute"
|
||||
style="bottom: 100px; left: 100px; animation: float 3s ease-in-out infinite reverse;">
|
||||
<div class="bg-success rounded-3 p-3 text-white shadow">
|
||||
<i class="fab fa-python fa-2x"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Preview Section -->
|
||||
<section class="section-padding bg-light">
|
||||
<div class="container-modern">
|
||||
<div class="text-center mb-5">
|
||||
<span class="badge bg-gradient text-white mb-3 px-3 py-2 rounded-pill">
|
||||
⚡ Наши услуги
|
||||
</span>
|
||||
<h2 class="display-5 fw-bold mb-3">
|
||||
Полный спектр <span class="text-gradient">IT-услуг</span>
|
||||
</h2>
|
||||
<p class="lead text-muted max-width-600 mx-auto">
|
||||
От идеи до реализации - мы предоставляем комплексные решения для вашего цифрового успеха
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="services-grid">
|
||||
{% for service in services %}
|
||||
<div class="service-card">
|
||||
<div class="service-icon">
|
||||
<i class="fas fa-{% cycle 'code' 'mobile-alt' 'paint-brush' 'server' 'chart-line' 'shield-alt' %}"></i>
|
||||
</div>
|
||||
<h4 class="mb-3">{{ service.name }}</h4>
|
||||
<p class="text-muted mb-4">{{ service.description|truncatewords:20 }}</p>
|
||||
<a href="{% url 'service_detail' service.pk %}" class="btn btn-outline-primary">
|
||||
Подробнее <i class="fas fa-arrow-right ms-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-5">
|
||||
<a href="{% url 'services' %}" class="btn btn-primary-modern btn-lg">
|
||||
<i class="fas fa-th-large me-2"></i>
|
||||
Все услуги
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why Choose Us Section -->
|
||||
<section class="section-padding">
|
||||
<div class="container-modern">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<div class="pe-lg-5">
|
||||
<span class="badge bg-gradient text-white mb-3 px-3 py-2 rounded-pill">
|
||||
🎯 Почему мы
|
||||
</span>
|
||||
<h2 class="display-6 fw-bold mb-4">
|
||||
Ваш надежный <span class="text-gradient">IT-партнер</span>
|
||||
</h2>
|
||||
<p class="text-muted mb-4">
|
||||
Мы не просто выполняем проекты - мы создаем долгосрочные партнерские отношения
|
||||
и помогаем бизнесу расти с помощью технологий.
|
||||
</p>
|
||||
|
||||
<div class="feature-list">
|
||||
<div class="d-flex align-items-start mb-4">
|
||||
<div class="feature-icon bg-primary rounded-3 p-2 me-3 text-white">
|
||||
<i class="fas fa-rocket"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="mb-2">Быстрая разработка</h5>
|
||||
<p class="text-muted mb-0">Agile-методология и современные инструменты для быстрой доставки результата</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-start mb-4">
|
||||
<div class="feature-icon bg-success rounded-3 p-2 me-3 text-white">
|
||||
<i class="fas fa-shield-alt"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="mb-2">Высокое качество</h5>
|
||||
<p class="text-muted mb-0">Тщательное тестирование и code review обеспечивают надежность решений</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-start mb-4">
|
||||
<div class="feature-icon bg-warning rounded-3 p-2 me-3 text-white">
|
||||
<i class="fas fa-headset"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="mb-2">24/7 Поддержка</h5>
|
||||
<p class="text-muted mb-0">Постоянная техническая поддержка и сопровождение проектов</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="position-relative">
|
||||
<!-- Process Steps -->
|
||||
<div class="process-steps">
|
||||
<div class="step-card active bg-white rounded-4 p-4 shadow mb-4">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="step-number bg-primary text-white rounded-circle me-3"
|
||||
style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="mb-1">Анализ требований</h6>
|
||||
<p class="small text-muted mb-0">Детальное изучение ваших потребностей</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step-card bg-white rounded-4 p-4 shadow mb-4">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="step-number bg-secondary text-white rounded-circle me-3"
|
||||
style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="mb-1">Проектирование</h6>
|
||||
<p class="small text-muted mb-0">Создание архитектуры и дизайна</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step-card bg-white rounded-4 p-4 shadow mb-4">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="step-number bg-success text-white rounded-circle me-3"
|
||||
style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="mb-1">Разработка</h6>
|
||||
<p class="small text-muted mb-0">Программирование и тестирование</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step-card bg-white rounded-4 p-4 shadow">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="step-number bg-warning text-white rounded-circle me-3"
|
||||
style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
|
||||
4
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="mb-1">Запуск и поддержка</h6>
|
||||
<p class="small text-muted mb-0">Деплой и техническая поддержка</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="section-padding bg-gradient text-white">
|
||||
<div class="container-modern text-center">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<h2 class="display-6 fw-bold mb-4">
|
||||
Готовы начать свой проект?
|
||||
</h2>
|
||||
<p class="lead mb-5 opacity-90">
|
||||
Свяжитесь с нами сегодня и получите бесплатную консультацию по вашему проекту
|
||||
</p>
|
||||
<div class="d-flex flex-wrap gap-3 justify-content-center">
|
||||
<a href="{% url 'services' %}" class="btn btn-light btn-lg text-primary">
|
||||
<i class="fas fa-comments me-2"></i>
|
||||
Получить консультацию
|
||||
</a>
|
||||
<a href="tel:+82-10-XXXX-XXXX" class="btn btn-outline-light btn-lg">
|
||||
<i class="fas fa-phone me-2"></i>
|
||||
Позвонить сейчас
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Animate elements on scroll
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('animate-fade-in-up');
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Observe service cards
|
||||
document.querySelectorAll('.service-card, .step-card').forEach(card => {
|
||||
observer.observe(card);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.max-width-600 {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.hero-graphic {
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
.code-window {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.floating-icon {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.step-card {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
|
||||
.step-card.animate-fade-in-up {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-graphic {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.code-window {
|
||||
transform: rotate(0deg) !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.mobile-preview {
|
||||
position: relative !important;
|
||||
transform: rotate(0deg) !important;
|
||||
margin-top: 1rem;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.floating-icon {
|
||||
position: relative !important;
|
||||
display: inline-block;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
127
smartsoltech/web/templates/web/navbar_modern.html
Normal file
127
smartsoltech/web/templates/web/navbar_modern.html
Normal file
@@ -0,0 +1,127 @@
|
||||
{% load static %}
|
||||
<nav class="navbar navbar-expand-lg navbar-modern">
|
||||
<div class="container-modern">
|
||||
<a class="navbar-brand-modern" href="{% url 'home' %}">
|
||||
<i class="fas fa-code me-2"></i>
|
||||
SmartSolTech
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Переключить навигацию">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link-modern {% if request.resolver_match.url_name == 'home' %}active{% endif %}"
|
||||
href="{% url 'home' %}">
|
||||
<i class="fas fa-home me-2"></i>Главная
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link-modern {% if request.resolver_match.url_name == 'services' %}active{% endif %}"
|
||||
href="{% url 'services' %}">
|
||||
<i class="fas fa-cog me-2"></i>Услуги
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link-modern {% if request.resolver_match.url_name == 'about' %}active{% endif %}"
|
||||
href="{% url 'about' %}">
|
||||
<i class="fas fa-info-circle me-2"></i>О нас
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link-modern" href="#contact">
|
||||
<i class="fas fa-envelope me-2"></i>Контакты
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item ms-3">
|
||||
<a class="btn btn-primary-modern" href="{% url 'services' %}">
|
||||
<i class="fas fa-rocket me-2"></i>Начать проект
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.navbar-toggler {
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.navbar-toggler:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.navbar-toggler-icon {
|
||||
display: block;
|
||||
width: 25px;
|
||||
height: 2px;
|
||||
background-color: var(--text-dark);
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.navbar-toggler-icon::before,
|
||||
.navbar-toggler-icon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 25px;
|
||||
height: 2px;
|
||||
background-color: var(--text-dark);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar-toggler-icon::before {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
.navbar-toggler-icon::after {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
|
||||
transform: rotate(45deg);
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
|
||||
transform: rotate(-45deg);
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.navbar-collapse {
|
||||
margin-top: 1rem;
|
||||
padding: 1.5rem;
|
||||
background: var(--bg-light);
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.nav-link-modern {
|
||||
padding: 0.75rem 1rem;
|
||||
margin: 0.25rem 0;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.btn-primary-modern {
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
504
smartsoltech/web/templates/web/services_modern.html
Normal file
504
smartsoltech/web/templates/web/services_modern.html
Normal file
@@ -0,0 +1,504 @@
|
||||
{% extends 'web/base_modern.html' %}
|
||||
{% load static %}
|
||||
{% block title %}Наши услуги - SmartSolTech{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-modern">
|
||||
<div class="container-modern">
|
||||
<div class="row justify-content-center text-center">
|
||||
<div class="col-lg-8">
|
||||
<span class="badge bg-gradient text-white mb-3 px-3 py-2 rounded-pill">
|
||||
⚡ Полный спектр услуг
|
||||
</span>
|
||||
<h1 class="display-4 fw-bold mb-4">
|
||||
Наши <span class="text-gradient">IT-услуги</span>
|
||||
</h1>
|
||||
<p class="lead text-muted mb-5">
|
||||
От концепции до запуска - мы предоставляем комплексные IT-решения для роста вашего бизнеса
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Grid -->
|
||||
<section class="section-padding">
|
||||
<div class="container-modern">
|
||||
<!-- Service Categories Filter -->
|
||||
<div class="text-center mb-5">
|
||||
<div class="btn-group" role="group" aria-label="Категории услуг">
|
||||
<button type="button" class="btn btn-outline-primary active" data-filter="all">
|
||||
Все услуги
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-primary" data-filter="web">
|
||||
Веб-разработка
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-primary" data-filter="mobile">
|
||||
Мобильные приложения
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-primary" data-filter="design">
|
||||
Дизайн
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-primary" data-filter="other">
|
||||
Другое
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4" id="services-container">
|
||||
{% for service in services %}
|
||||
<div class="col-lg-4 col-md-6 service-item" data-category="{{ service.category.name|lower }}">
|
||||
<div class="card-modern h-100">
|
||||
<div class="position-relative overflow-hidden" style="height: 200px;">
|
||||
<img src="{{ service.image.url }}" class="w-100 h-100" style="object-fit: cover;" alt="{{ service.name }}">
|
||||
<div class="position-absolute top-0 start-0 p-3">
|
||||
<span class="badge bg-primary">{{ service.category.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h5 class="mb-3">{{ service.name }}</h5>
|
||||
<p class="text-muted flex-grow-1">{{ service.description|truncatewords:15 }}</p>
|
||||
|
||||
<!-- Service Features -->
|
||||
<div class="mb-3">
|
||||
<small class="text-muted d-block mb-2">Что входит:</small>
|
||||
<div class="d-flex flex-wrap gap-1">
|
||||
<span class="badge bg-light text-dark">Консультация</span>
|
||||
<span class="badge bg-light text-dark">Разработка</span>
|
||||
<span class="badge bg-light text-dark">Тестирование</span>
|
||||
<span class="badge bg-light text-dark">Поддержка</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Price Range -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div>
|
||||
<small class="text-muted">От</small>
|
||||
<span class="h5 text-primary mb-0">₩ {{ service.price|default:"По запросу" }}</span>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<small class="text-muted">Срок</small>
|
||||
<div class="fw-semibold">2-4 недели</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-2">
|
||||
<a href="{% url 'service_detail' service.pk %}" class="btn btn-outline-primary flex-grow-1">
|
||||
Подробнее
|
||||
</a>
|
||||
<button class="btn btn-primary-modern"
|
||||
onclick="openServiceModal({{ service.pk }}, '{{ service.name }}')">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why Choose Our Services -->
|
||||
<section class="section-padding bg-light">
|
||||
<div class="container-modern">
|
||||
<div class="row justify-content-center text-center mb-5">
|
||||
<div class="col-lg-8">
|
||||
<h2 class="display-6 fw-bold mb-4">
|
||||
Почему выбирают <span class="text-gradient">наши услуги</span>
|
||||
</h2>
|
||||
<p class="lead text-muted">
|
||||
Мы обеспечиваем высокое качество и профессиональный подход в каждом проекте
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="text-center">
|
||||
<div class="service-icon mx-auto mb-3 bg-primary">
|
||||
<i class="fas fa-clock text-white"></i>
|
||||
</div>
|
||||
<h5>Быстро</h5>
|
||||
<p class="text-muted">Соблюдаем сроки и работаем оперативно</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="text-center">
|
||||
<div class="service-icon mx-auto mb-3 bg-success">
|
||||
<i class="fas fa-shield-alt text-white"></i>
|
||||
</div>
|
||||
<h5>Надежно</h5>
|
||||
<p class="text-muted">Гарантия качества и стабильность работы</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="text-center">
|
||||
<div class="service-icon mx-auto mb-3 bg-warning">
|
||||
<i class="fas fa-headset text-white"></i>
|
||||
</div>
|
||||
<h5>Поддержка</h5>
|
||||
<p class="text-muted">24/7 техническая поддержка проектов</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="text-center">
|
||||
<div class="service-icon mx-auto mb-3 bg-info">
|
||||
<i class="fas fa-chart-line text-white"></i>
|
||||
</div>
|
||||
<h5>Результативно</h5>
|
||||
<p class="text-muted">Фокус на бизнес-результате клиента</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Process Section -->
|
||||
<section class="section-padding">
|
||||
<div class="container-modern">
|
||||
<div class="row justify-content-center text-center mb-5">
|
||||
<div class="col-lg-8">
|
||||
<h2 class="display-6 fw-bold mb-4">
|
||||
Как мы <span class="text-gradient">работаем</span>
|
||||
</h2>
|
||||
<p class="lead text-muted">
|
||||
Простой и прозрачный процесс от идеи до готового решения
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="position-relative">
|
||||
<!-- Timeline -->
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-marker bg-primary">1</div>
|
||||
<div class="timeline-content">
|
||||
<h5>Анализ и планирование</h5>
|
||||
<p class="text-muted">Изучаем ваши потребности и составляем техническое задание</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-marker bg-secondary">2</div>
|
||||
<div class="timeline-content">
|
||||
<h5>Дизайн и прототипирование</h5>
|
||||
<p class="text-muted">Создаем дизайн-макеты и интерактивные прототипы</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-marker bg-success">3</div>
|
||||
<div class="timeline-content">
|
||||
<h5>Разработка и тестирование</h5>
|
||||
<p class="text-muted">Программируем решение и тщательно тестируем</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-marker bg-warning">4</div>
|
||||
<div class="timeline-content">
|
||||
<h5>Запуск и сопровождение</h5>
|
||||
<p class="text-muted">Запускаем проект и обеспечиваем техническую поддержку</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="section-padding bg-gradient text-white">
|
||||
<div class="container-modern text-center">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<h2 class="display-6 fw-bold mb-4">
|
||||
Начнем ваш проект сегодня
|
||||
</h2>
|
||||
<p class="lead mb-5 opacity-90">
|
||||
Получите бесплатную консультацию и расчет стоимости проекта
|
||||
</p>
|
||||
<div class="d-flex flex-wrap gap-3 justify-content-center">
|
||||
<button class="btn btn-light btn-lg text-primary" onclick="openServiceModal(0, 'Консультация')">
|
||||
<i class="fas fa-comments me-2"></i>
|
||||
Бесплатная консультация
|
||||
</button>
|
||||
<a href="#" class="btn btn-outline-light btn-lg">
|
||||
<i class="fas fa-download me-2"></i>
|
||||
Скачать прайс-лист
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Service Request Modal -->
|
||||
<div class="modal fade" id="serviceModal" tabindex="-1" aria-labelledby="serviceModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content border-0 shadow-lg">
|
||||
<div class="modal-header bg-gradient text-white border-0">
|
||||
<h5 class="modal-title" id="serviceModalLabel">
|
||||
<i class="fas fa-paper-plane me-2"></i>
|
||||
Заказать услугу
|
||||
</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body p-4">
|
||||
<form id="serviceRequestForm">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" id="serviceId" name="service_id">
|
||||
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label for="firstName" class="form-label">Имя *</label>
|
||||
<input type="text" class="form-control" id="firstName" name="first_name" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="lastName" class="form-label">Фамилия *</label>
|
||||
<input type="text" class="form-control" id="lastName" name="last_name" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="email" class="form-label">Email *</label>
|
||||
<input type="email" class="form-control" id="email" name="email" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="phone" class="form-label">Телефон</label>
|
||||
<input type="tel" class="form-control" id="phone" name="phone">
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="description" class="form-label">Описание проекта *</label>
|
||||
<textarea class="form-control" id="description" name="description" rows="4"
|
||||
placeholder="Опишите ваш проект, цели и требования..." required></textarea>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="budget" class="form-label">Примерный бюджет</label>
|
||||
<select class="form-select" id="budget" name="budget">
|
||||
<option value="">Не определен</option>
|
||||
<option value="1000-5000">₩ 1,000,000 - 5,000,000</option>
|
||||
<option value="5000-10000">₩ 5,000,000 - 10,000,000</option>
|
||||
<option value="10000+">₩ 10,000,000+</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="timeline" class="form-label">Желаемые сроки</label>
|
||||
<select class="form-select" id="timeline" name="timeline">
|
||||
<option value="">Не определены</option>
|
||||
<option value="urgent">Срочно (1-2 недели)</option>
|
||||
<option value="normal">Обычно (1-2 месяца)</option>
|
||||
<option value="flexible">Гибкие сроки</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="agreeTerms" required>
|
||||
<label class="form-check-label small" for="agreeTerms">
|
||||
Я соглашаюсь с <a href="#" class="text-primary">условиями обработки персональных данных</a>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer border-0">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
|
||||
<button type="submit" form="serviceRequestForm" class="btn btn-primary-modern">
|
||||
<i class="fas fa-paper-plane me-2"></i>
|
||||
Отправить заявку
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script>
|
||||
// Service filtering
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const filterButtons = document.querySelectorAll('[data-filter]');
|
||||
const serviceItems = document.querySelectorAll('.service-item');
|
||||
|
||||
filterButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
const filter = this.getAttribute('data-filter');
|
||||
|
||||
// Update active button
|
||||
filterButtons.forEach(btn => btn.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
|
||||
// Filter services
|
||||
serviceItems.forEach(item => {
|
||||
if (filter === 'all' || item.getAttribute('data-category').includes(filter)) {
|
||||
item.style.display = 'block';
|
||||
setTimeout(() => {
|
||||
item.style.opacity = '1';
|
||||
item.style.transform = 'translateY(0)';
|
||||
}, 50);
|
||||
} else {
|
||||
item.style.opacity = '0';
|
||||
item.style.transform = 'translateY(20px)';
|
||||
setTimeout(() => {
|
||||
item.style.display = 'none';
|
||||
}, 300);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Service modal
|
||||
function openServiceModal(serviceId, serviceName) {
|
||||
document.getElementById('serviceId').value = serviceId;
|
||||
document.getElementById('serviceModalLabel').innerHTML =
|
||||
'<i class="fas fa-paper-plane me-2"></i>Заказать услугу: ' + serviceName;
|
||||
|
||||
const modal = new bootstrap.Modal(document.getElementById('serviceModal'));
|
||||
modal.show();
|
||||
}
|
||||
|
||||
// Form submission
|
||||
document.getElementById('serviceRequestForm').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const formData = new FormData(this);
|
||||
const submitBtn = document.querySelector('button[type="submit"][form="serviceRequestForm"]');
|
||||
const originalContent = submitBtn.innerHTML;
|
||||
|
||||
submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Отправляем...';
|
||||
submitBtn.disabled = true;
|
||||
|
||||
// Simulate form submission (replace with actual AJAX call)
|
||||
setTimeout(() => {
|
||||
submitBtn.innerHTML = '<i class="fas fa-check me-2"></i>Отправлено!';
|
||||
submitBtn.classList.remove('btn-primary-modern');
|
||||
submitBtn.classList.add('btn-success');
|
||||
|
||||
setTimeout(() => {
|
||||
const modal = bootstrap.Modal.getInstance(document.getElementById('serviceModal'));
|
||||
modal.hide();
|
||||
|
||||
// Reset form and button
|
||||
this.reset();
|
||||
submitBtn.innerHTML = originalContent;
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.classList.remove('btn-success');
|
||||
submitBtn.classList.add('btn-primary-modern');
|
||||
|
||||
// Show success notification
|
||||
showNotification('Заявка отправлена! Мы свяжемся с вами в ближайшее время.', 'success');
|
||||
}, 2000);
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
function showNotification(message, type) {
|
||||
const notification = document.createElement('div');
|
||||
notification.className = `alert alert-${type} position-fixed top-0 end-0 m-3`;
|
||||
notification.style.zIndex = '9999';
|
||||
notification.innerHTML = `
|
||||
<i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-triangle'} me-2"></i>
|
||||
${message}
|
||||
<button type="button" class="btn-close" onclick="this.parentElement.remove()"></button>
|
||||
`;
|
||||
|
||||
document.body.appendChild(notification);
|
||||
|
||||
setTimeout(() => {
|
||||
notification.remove();
|
||||
}, 5000);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.timeline {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: var(--border-color);
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
padding-left: 80px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.timeline-marker {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 1.25rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
background: var(--bg-light);
|
||||
padding: 1.5rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.service-item {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-group .btn {
|
||||
border-radius: 25px !important;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.btn-group .btn.active {
|
||||
background: var(--gradient-primary);
|
||||
border-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.timeline::before {
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
padding-left: 50px;
|
||||
}
|
||||
|
||||
.timeline-marker {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-group .btn {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
@@ -33,8 +33,8 @@ except Exception as e:
|
||||
logger.error(f"Failed to initialize Telegram bot: {str(e)}")
|
||||
|
||||
def home(request):
|
||||
services = Service.objects.all()
|
||||
return render(request, 'web/home.html', {'services': services})
|
||||
services = Service.objects.all()[:6] # Показываем только первые 6 услуг на главной
|
||||
return render(request, 'web/home_modern.html', {'services': services})
|
||||
|
||||
def service_detail(request, pk):
|
||||
service = get_object_or_404(Service, pk=pk)
|
||||
@@ -64,10 +64,10 @@ def blog_post_detail(request, pk):
|
||||
|
||||
def services_view(request):
|
||||
services = Service.objects.all()
|
||||
return render(request, 'web/services.html', {'services': services})
|
||||
return render(request, 'web/services_modern.html', {'services': services})
|
||||
|
||||
def about_view(request):
|
||||
return render(request, 'web/about.html')
|
||||
return render(request, 'web/about_modern.html')
|
||||
|
||||
def create_service_request(request, service_id):
|
||||
if request.method == 'POST':
|
||||
|
||||
Reference in New Issue
Block a user