✨ Добавлена ContactInfo модель с красивой страницей О нас
Some checks failed
continuous-integration/drone/push Build is failing
Some checks failed
continuous-integration/drone/push Build is failing
- 📊 Создана ContactInfo модель с полями компании, контактов и описания - 🎨 Полностью переработана страница about.html с современными карточками - 🔗 Админ-панель для управления контактной информацией - 💎 CSS анимации и градиенты для улучшения UI/UX - 🗄️ Миграция 0012_contactinfo.py для создания таблицы - 🔧 Обновлены views для использования данных из БД
This commit is contained in:
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
@@ -1,7 +1,15 @@
|
|||||||
from django.contrib import admin
|
from django.contrib import admin
|
||||||
from .models import Service, Project, Client, Order, Review, BlogPost, Category, ServiceRequest, HeroBanner
|
from .models import Service, Project, Client, Order, Review, BlogPost, Category, ServiceRequest, HeroBanner, ContactInfo
|
||||||
from .forms import ProjectForm
|
from .forms import ProjectForm
|
||||||
|
|
||||||
|
@admin.register(ContactInfo)
|
||||||
|
class ContactInfoAdmin(admin.ModelAdmin):
|
||||||
|
list_display = ('company_name', 'email', 'phone', 'is_active')
|
||||||
|
list_filter = ('is_active',)
|
||||||
|
search_fields = ('company_name', 'email', 'phone')
|
||||||
|
fields = ('company_name', 'email', 'phone', 'telegram', 'address', 'working_hours',
|
||||||
|
'description', 'call_to_action', 'subtitle', 'is_active')
|
||||||
|
|
||||||
@admin.register(HeroBanner)
|
@admin.register(HeroBanner)
|
||||||
class HeroBannerAdmin(admin.ModelAdmin):
|
class HeroBannerAdmin(admin.ModelAdmin):
|
||||||
list_display = ('title', 'is_active', 'order', 'created_at')
|
list_display = ('title', 'is_active', 'order', 'created_at')
|
||||||
|
|||||||
33
smartsoltech/web/migrations/0012_contactinfo.py
Normal file
33
smartsoltech/web/migrations/0012_contactinfo.py
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
# Generated by Django 5.1.1 on 2025-11-25 06:19
|
||||||
|
|
||||||
|
from django.db import migrations, models
|
||||||
|
|
||||||
|
|
||||||
|
class Migration(migrations.Migration):
|
||||||
|
|
||||||
|
dependencies = [
|
||||||
|
('web', '0011_add_video_fields'),
|
||||||
|
]
|
||||||
|
|
||||||
|
operations = [
|
||||||
|
migrations.CreateModel(
|
||||||
|
name='ContactInfo',
|
||||||
|
fields=[
|
||||||
|
('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
|
||||||
|
('company_name', models.CharField(default='SmartSolTech', max_length=200, verbose_name='Название компании')),
|
||||||
|
('email', models.EmailField(default='info@smartsoltech.kr', max_length=254, verbose_name='Email')),
|
||||||
|
('phone', models.CharField(default='+82-10-5693-6103', max_length=20, verbose_name='Телефон')),
|
||||||
|
('telegram', models.CharField(default='@smartsoltech', max_length=100, verbose_name='Telegram')),
|
||||||
|
('address', models.TextField(default='Чолланамдо, Кванджу', verbose_name='Адрес')),
|
||||||
|
('working_hours', models.CharField(default='Пн-Пт 9:00-18:00', max_length=100, verbose_name='Часы работы')),
|
||||||
|
('description', models.TextField(default='Мы - команда профессионалов в сфере IT-решений', verbose_name='Описание')),
|
||||||
|
('call_to_action', models.CharField(default='Начнем сотрудничество?', max_length=200, verbose_name='Призыв к действию')),
|
||||||
|
('subtitle', models.CharField(default='Свяжитесь с нами для обсуждения вашего проекта', max_length=200, verbose_name='Подзаголовок')),
|
||||||
|
('is_active', models.BooleanField(default=True, verbose_name='Активно')),
|
||||||
|
],
|
||||||
|
options={
|
||||||
|
'verbose_name': 'Контактная информация',
|
||||||
|
'verbose_name_plural': 'Контактная информация',
|
||||||
|
},
|
||||||
|
),
|
||||||
|
]
|
||||||
@@ -3,6 +3,31 @@ from django.contrib.auth.models import AbstractUser, User
|
|||||||
import uuid
|
import uuid
|
||||||
from django.urls import reverse
|
from django.urls import reverse
|
||||||
|
|
||||||
|
class ContactInfo(models.Model):
|
||||||
|
"""Модель для контактной информации компании"""
|
||||||
|
company_name = models.CharField(max_length=200, default="SmartSolTech", verbose_name="Название компании")
|
||||||
|
email = models.EmailField(default="info@smartsoltech.kr", verbose_name="Email")
|
||||||
|
phone = models.CharField(max_length=20, default="+82-10-5693-6103", verbose_name="Телефон")
|
||||||
|
telegram = models.CharField(max_length=100, default="@smartsoltech", verbose_name="Telegram")
|
||||||
|
address = models.TextField(default="Чолланамдо, Кванджу", verbose_name="Адрес")
|
||||||
|
working_hours = models.CharField(max_length=100, default="Пн-Пт 9:00-18:00", verbose_name="Часы работы")
|
||||||
|
description = models.TextField(default="Мы - команда профессионалов в сфере IT-решений", verbose_name="Описание")
|
||||||
|
call_to_action = models.CharField(max_length=200, default="Начнем сотрудничество?", verbose_name="Призыв к действию")
|
||||||
|
subtitle = models.CharField(max_length=200, default="Свяжитесь с нами для обсуждения вашего проекта", verbose_name="Подзаголовок")
|
||||||
|
is_active = models.BooleanField(default=True, verbose_name="Активно")
|
||||||
|
|
||||||
|
class Meta:
|
||||||
|
verbose_name = 'Контактная информация'
|
||||||
|
verbose_name_plural = 'Контактная информация'
|
||||||
|
|
||||||
|
def __str__(self):
|
||||||
|
return f"Контакты - {self.company_name}"
|
||||||
|
|
||||||
|
@classmethod
|
||||||
|
def get_active(cls):
|
||||||
|
"""Получить активную контактную информацию"""
|
||||||
|
return cls.objects.filter(is_active=True).first() or cls.objects.create()
|
||||||
|
|
||||||
class HeroBanner(models.Model):
|
class HeroBanner(models.Model):
|
||||||
"""Модель для главного баннера на сайте"""
|
"""Модель для главного баннера на сайте"""
|
||||||
title = models.CharField(max_length=200, verbose_name="Заголовок")
|
title = models.CharField(max_length=200, verbose_name="Заголовок")
|
||||||
|
|||||||
@@ -1,53 +1,280 @@
|
|||||||
{% extends 'web/base_modern.html' %}
|
{% extends 'web/base_modern.html' %}
|
||||||
{% load static %}
|
{% load static %}
|
||||||
|
|
||||||
|
{% block title %}{{ contact_info.company_name }} - О нас{% endblock %}
|
||||||
|
|
||||||
|
{% block extra_styles %}
|
||||||
|
<style>
|
||||||
|
.about-hero {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
padding: 4rem 0;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-hero::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 1000 100" preserveAspectRatio="none"><polygon fill="white" fill-opacity="0.1" points="1000,4 1000,100 0,100"/></svg>');
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-hero .container {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 2rem;
|
||||||
|
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||||
|
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
|
||||||
|
border: 1px solid rgba(255,255,255,0.2);
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-card::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 4px;
|
||||||
|
background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
|
||||||
|
background-size: 200% 100%;
|
||||||
|
animation: shimmer 2s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-card:hover {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-icon {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||||
|
border-radius: 15px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
color: white;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-title {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
color: #2c3e50;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info {
|
||||||
|
color: #667eea;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info a {
|
||||||
|
color: #667eea;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info a:hover {
|
||||||
|
color: #764ba2;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-section {
|
||||||
|
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||||||
|
padding: 4rem 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #2c3e50;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-subtitle {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
color: #6c757d;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-button {
|
||||||
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||||
|
color: white;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
border: none;
|
||||||
|
border-radius: 50px;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-button:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 3rem;
|
||||||
|
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||||
|
margin: 3rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description-card h3 {
|
||||||
|
color: #2c3e50;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description-card p {
|
||||||
|
color: #6c757d;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shimmer {
|
||||||
|
0% { background-position: -200% 0; }
|
||||||
|
100% { background-position: 200% 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.working-hours-badge {
|
||||||
|
background: linear-gradient(135deg, #28a745, #20c997);
|
||||||
|
color: white;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 600;
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<section class="position-relative py-4 py-xl-5">
|
<!-- Hero Section -->
|
||||||
<div class="container position-relative">
|
<section class="about-hero">
|
||||||
<div class="row mb-5">
|
<div class="container">
|
||||||
<div class="col-md-8 col-xl-6 text-center mx-auto">
|
<h1 class="display-4 fw-bold mb-3">{{ contact_info.call_to_action }}</h1>
|
||||||
<h2>Contact us</h2>
|
<p class="lead">{{ contact_info.subtitle }}</p>
|
||||||
<p class="w-lg-50"></p>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Contact Cards Section -->
|
||||||
|
<section class="py-5">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<!-- Email Card -->
|
||||||
|
<div class="col-lg-4 col-md-6">
|
||||||
|
<div class="contact-card">
|
||||||
|
<div class="contact-icon">
|
||||||
|
<i class="fas fa-envelope"></i>
|
||||||
|
</div>
|
||||||
|
<div class="contact-title">Email</div>
|
||||||
|
<div class="contact-info">
|
||||||
|
<a href="mailto:{{ contact_info.email }}">{{ contact_info.email }}</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row d-flex justify-content-center">
|
</div>
|
||||||
<div class="col-md-6 col-lg-4 col-xl-4">
|
|
||||||
<div class="d-flex flex-column justify-content-center align-items-start h-100">
|
<!-- Phone Card -->
|
||||||
<div class="d-flex align-items-center p-3">
|
<div class="col-lg-4 col-md-6">
|
||||||
<div class="bs-icon-md bs-icon-rounded bs-icon-primary d-flex flex-shrink-0 justify-content-center align-items-center d-inline-block bs-icon"><svg class="bi bi-telephone" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
|
<div class="contact-card">
|
||||||
<path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"></path>
|
<div class="contact-icon">
|
||||||
</svg></div>
|
<i class="fas fa-phone"></i>
|
||||||
<div class="px-2">
|
</div>
|
||||||
<h6 class="mb-0">Телефон</h6>
|
<div class="contact-title">Телефон</div>
|
||||||
<p class="mb-0"><a href ="tel:01056936103">010-5693-6103</a></p>
|
<div class="contact-info">
|
||||||
|
<a href="tel:{{ contact_info.phone }}">{{ contact_info.phone }}</a>
|
||||||
|
</div>
|
||||||
|
<div class="working-hours-badge">{{ contact_info.working_hours }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex align-items-center p-3">
|
|
||||||
<div class="bs-icon-md bs-icon-rounded bs-icon-primary d-flex flex-shrink-0 justify-content-center align-items-center d-inline-block bs-icon"><svg class="bi bi-envelope" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
|
<!-- Telegram Card -->
|
||||||
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"></path>
|
<div class="col-lg-4 col-md-6">
|
||||||
</svg></div>
|
<div class="contact-card">
|
||||||
<div class="px-2">
|
<div class="contact-icon">
|
||||||
<h6 class="mb-0">Email</h6>
|
<i class="fab fa-telegram"></i>
|
||||||
<p class="mb-0"><a href="mailto:a.choi@smartsoltech.kr">a.choi@smartsoltech.kr</a></p>
|
</div>
|
||||||
|
<div class="contact-title">Telegram</div>
|
||||||
|
<div class="contact-info">
|
||||||
|
<a href="https://t.me/{{ contact_info.telegram|cut:'@' }}" target="_blank">{{ contact_info.telegram }}</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex align-items-center p-3">
|
</div>
|
||||||
<div class="bs-icon-md bs-icon-rounded bs-icon-primary d-flex flex-shrink-0 justify-content-center align-items-center d-inline-block bs-icon"><svg class="bi bi-pin" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
|
|
||||||
<path d="M4.146.146A.5.5 0 0 1 4.5 0h7a.5.5 0 0 1 .5.5c0 .68-.342 1.174-.646 1.479-.126.125-.25.224-.354.298v4.431l.078.048c.203.127.476.314.751.555C12.36 7.775 13 8.527 13 9.5a.5.5 0 0 1-.5.5h-4v4.5c0 .276-.224 1.5-.5 1.5s-.5-1.224-.5-1.5V10h-4a.5.5 0 0 1-.5-.5c0-.973.64-1.725 1.17-2.189A5.921 5.921 0 0 1 5 6.708V2.277a2.77 2.77 0 0 1-.354-.298C4.342 1.674 4 1.179 4 .5a.5.5 0 0 1 .146-.354zm1.58 1.408-.002-.001.002.001m-.002-.001.002.001A.5.5 0 0 1 6 2v5a.5.5 0 0 1-.276.447h-.002l-.012.007-.054.03a4.922 4.922 0 0 0-.827.58c-.318.278-.585.596-.725.936h7.792c-.14-.34-.407-.658-.725-.936a4.915 4.915 0 0 0-.881-.61l-.012-.006h-.002A.5.5 0 0 1 10 7V2a.5.5 0 0 1 .295-.458 1.775 1.775 0 0 0 .351-.271c.08-.08.155-.17.214-.271H5.14c.06.1.133.191.214.271a1.78 1.78 0 0 0 .37.282"></path>
|
<!-- Address Card -->
|
||||||
</svg></div>
|
<div class="col-lg-6 col-md-6">
|
||||||
<div class="px-2">
|
<div class="contact-card">
|
||||||
<h6 class="mb-0">Мы находимся:</h6>
|
<div class="contact-icon">
|
||||||
<p class="mb-0">Чолланамдо, Кванджу</p>
|
<i class="fas fa-map-marker-alt"></i>
|
||||||
|
</div>
|
||||||
|
<div class="contact-title">Мы находимся</div>
|
||||||
|
<div class="contact-info">
|
||||||
|
{{ contact_info.address }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Company Card -->
|
||||||
|
<div class="col-lg-6 col-md-6">
|
||||||
|
<div class="contact-card">
|
||||||
|
<div class="contact-icon">
|
||||||
|
<i class="fas fa-building"></i>
|
||||||
|
</div>
|
||||||
|
<div class="contact-title">Компания</div>
|
||||||
|
<div class="contact-info">
|
||||||
|
{{ contact_info.company_name }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6 col-lg-5 col-xl-4">
|
|
||||||
<div></div>
|
<!-- Description Section -->
|
||||||
<h1>О нас</h1>
|
<div class="row">
|
||||||
<p>Мы - команда профессионалов в своей отрасли. В нашей команде есть все, программисты, сетевые инженеры, системные администраторы, </p>
|
<div class="col-12">
|
||||||
|
<div class="description-card">
|
||||||
|
<h3>О нашей компании</h3>
|
||||||
|
<p>{{ contact_info.description }}</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA Section -->
|
||||||
|
<section class="cta-section">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="cta-title">Начнем сотрудничество</h2>
|
||||||
|
<p class="cta-subtitle">Готовы воплотить ваш проект в жизнь</p>
|
||||||
|
<a href="{% url 'services' %}" class="cta-button">
|
||||||
|
<i class="fas fa-rocket me-2"></i>Посмотреть наши услуги
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
@@ -1,29 +1,30 @@
|
|||||||
{% load static %}
|
{% load static %}
|
||||||
<!-- web/templates/web/base.html - Legacy redirected to modern version -->
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="ko">
|
<html lang="ru">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>{% block title %}SmartSolTech - IT Solutions{% endblock %}</title>
|
<meta name="description" content="SmartSolTech - Технологические решения для вашего бизнеса">
|
||||||
|
<meta name="keywords" content="веб-разработка, мобильные приложения, IT консалтинг">
|
||||||
|
<title>{% block title %}SmartSolTech - Технологические решения{% endblock %}</title>
|
||||||
|
|
||||||
<!-- Bootstrap CSS -->
|
<!-- Bootstrap 5 CSS -->
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Font Awesome -->
|
<!-- Font Awesome -->
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||||
|
|
||||||
<!-- Custom Modern Styles -->
|
<!-- Custom CSS -->
|
||||||
|
<link rel="stylesheet" href="{% static 'assets/css/styles.min.css' %}">
|
||||||
<link rel="stylesheet" href="{% static 'assets/css/modern-styles.css' %}">
|
<link rel="stylesheet" href="{% static 'assets/css/modern-styles.css' %}">
|
||||||
<link rel="stylesheet" href="{% static 'assets/css/modal-styles.css' %}">
|
<link rel="stylesheet" href="{% static 'assets/css/modal-styles.css' %}">
|
||||||
|
|
||||||
<!-- PWA Manifest -->
|
<!-- PWA Manifest -->
|
||||||
<link rel="manifest" href="/static/manifest.json">
|
<link rel="manifest" href="/static/manifest.json">
|
||||||
|
|
||||||
<!-- Modal Init Script -->
|
<!-- Favicon -->
|
||||||
<script src="{% static 'assets/js/modal-init.js' %}"></script>
|
<link rel="icon" type="image/png" href="{% static 'assets/img/favicon.png' %}">
|
||||||
|
|
||||||
<!-- Extra Styles Block -->
|
|
||||||
{% block extra_styles %}{% endblock %}
|
{% block extra_styles %}{% endblock %}
|
||||||
</head>
|
</head>
|
||||||
<body class="modern-body">
|
<body class="modern-body">
|
||||||
@@ -37,25 +38,23 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Navigation -->
|
<!-- Navigation -->
|
||||||
{% include 'web/navbar_modern.html' %}
|
{% include 'web/navbar.html' %}
|
||||||
|
|
||||||
<!-- Main Content -->
|
<!-- Main Content -->
|
||||||
<main class="main-content">
|
<main class="main-content">
|
||||||
<div class="container-modern mt-4">
|
|
||||||
{% block content %}{% endblock %}
|
{% block content %}{% endblock %}
|
||||||
</div>
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<!-- Footer -->
|
<!-- Footer -->
|
||||||
{% include 'web/footer_modern.html' %}
|
{% include 'web/footer.html' %}
|
||||||
|
|
||||||
<!-- Bootstrap JS -->
|
<!-- Bootstrap 5 JS -->
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
|
||||||
<!-- Custom Modern Scripts -->
|
<!-- Custom JS -->
|
||||||
|
<script src="{% static 'assets/js/script.min.js' %}"></script>
|
||||||
<script src="{% static 'assets/js/modern-scripts.js' %}"></script>
|
<script src="{% static 'assets/js/modern-scripts.js' %}"></script>
|
||||||
|
|
||||||
<!-- Extra Scripts Block -->
|
|
||||||
{% block extra_scripts %}{% endblock %}
|
{% block extra_scripts %}{% endblock %}
|
||||||
|
|
||||||
<!-- Emergency Loading Screen Script -->
|
<!-- Emergency Loading Screen Script -->
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
{% extends 'web/base_modern.html' %}
|
{% extends 'web/base.html' %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<h2>Мои заказы</h2>
|
<h2>Мои заказы</h2>
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
{% extends 'web/base_modern.html' %}
|
{% extends 'web/base.html' %}
|
||||||
<!-- web/templates/web/complete_registration_basic.html -->
|
<!-- web/templates/web/complete_registration_basic.html -->
|
||||||
{% load static %}
|
{% load static %}
|
||||||
|
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
{% extends 'web/base_modern.html' %}
|
{% extends 'web/base.html' %}
|
||||||
<!-- web/templates/web/complete_registration_basic.html -->
|
<!-- web/templates/web/complete_registration_basic.html -->
|
||||||
{% load static %}
|
{% load static %}
|
||||||
|
|
||||||
|
|||||||
@@ -1,48 +1,189 @@
|
|||||||
<!-- web/templates/web/footer.html -->
|
|
||||||
{% load static %}
|
{% load static %}
|
||||||
<footer class="text-light bg-dark pt-5 pb-4">
|
<footer class="bg-dark text-light section-padding mt-5">
|
||||||
<div class="container text-md-left">
|
<div class="container-modern">
|
||||||
<div class="row text-md-left">
|
<div class="row g-4">
|
||||||
<div class="col-md-3 col-lg-3 col-xl-3 mx-auto mt-3">
|
<!-- Company Info -->
|
||||||
<h5 class="text-uppercase text-warning mb-4 font-weight-bold">SmartSolTech</h5>
|
<div class="col-lg-4 col-md-6">
|
||||||
<p>Future begins here...</p>
|
<div class="mb-4">
|
||||||
</div>
|
<h4 class="text-gradient mb-3">
|
||||||
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mt-3">
|
<i class="fas fa-code me-2"></i>
|
||||||
<h5 class="text-uppercase text-warning mb-4 font-weight-bold">Products</h5>
|
SmartSolTech
|
||||||
<p><a class="text-light" href="#" style="text-decoration: none;">Product 1</a></p>
|
</h4>
|
||||||
<p><a class="text-light" href="#" style="text-decoration: none;">Product 2</a></p>
|
<p class="text-light opacity-75 mb-4">
|
||||||
<p><a class="text-light" href="#" style="text-decoration: none;">Product 3</a></p>
|
Мы создаем инновационные IT-решения, которые помогают бизнесу расти и развиваться в цифровую эпоху.
|
||||||
<p><a class="text-light" href="#" style="text-decoration: none;">Product 4</a></p>
|
</p>
|
||||||
</div>
|
<div class="d-flex gap-3">
|
||||||
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mt-3">
|
<a href="#" class="btn btn-outline-light rounded-circle" style="width: 45px; height: 45px;">
|
||||||
<h5 class="text-uppercase text-warning mb-4 font-weight-bold">Usefu links:</h5>
|
<i class="fab fa-telegram-plane"></i>
|
||||||
<p><a class="text-light" href="#" style="text-decoration: none;">Your Account</a></p>
|
</a>
|
||||||
<p><a class="text-light" href="#" style="text-decoration: none;">Become an Affiliate</a></p>
|
<a href="#" class="btn btn-outline-light rounded-circle" style="width: 45px; height: 45px;">
|
||||||
<p><a class="text-light" href="#" style="text-decoration: none;">Shipping Rates</a></p>
|
<i class="fab fa-instagram"></i>
|
||||||
<p><a class="text-light" href="#" style="text-decoration: none;">Help</a></p>
|
</a>
|
||||||
</div>
|
<a href="#" class="btn btn-outline-light rounded-circle" style="width: 45px; height: 45px;">
|
||||||
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mt-3">
|
<i class="fab fa-linkedin-in"></i>
|
||||||
<h5 class="text-uppercase text-warning mb-4 font-weight-bold">Contact</h5>
|
</a>
|
||||||
<p><i class="fas fa-home mr-3"></i> Gwangju-si Cheollanam-do, Republic of Korea</p>
|
<a href="#" class="btn btn-outline-light rounded-circle" style="width: 45px; height: 45px;">
|
||||||
<p><i class="fas fa-envelope mr-3"></i> a.choi@smartsoltech.kr</p>
|
<i class="fab fa-github"></i>
|
||||||
<p><i class="fas fa-phone mr-3"></i> + 8 (210) 5693 6103</p>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr class="mb-4" />
|
</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">
|
||||||
|
a.choi@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-5693-6103" class="text-light opacity-75 text-decoration-none hover-primary">
|
||||||
|
+82-10-5693-6103
|
||||||
|
</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">
|
||||||
|
Gwangju, 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="row align-items-center">
|
||||||
<div class="col-md-7 col-lg-8">
|
<div class="col-md-6">
|
||||||
<p class="text-md-left">© 2024 SmartSolTech. All rights reserved.</p>
|
<p class="mb-0 text-light opacity-75">
|
||||||
|
© 2025 SmartSolTech. Все права защищены.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-5 col-lg-4">
|
<div class="col-md-6">
|
||||||
<div class="text-md-right">
|
<div class="d-md-flex justify-content-md-end">
|
||||||
<ul class="list-unstyled list-inline">
|
<ul class="list-inline mb-0">
|
||||||
<li class="list-inline-item"><a class="btn-floating btn-sm text-light" href="#" style="font-size: 23px;"><i class="fab fa-facebook"></i></a></li>
|
<li class="list-inline-item">
|
||||||
<li class="list-inline-item"><a class="btn-floating btn-sm text-light" href="#" style="font-size: 23px;"><i class="fab fa-twitter"></i></a></li>
|
<a href="#" class="text-light opacity-75 text-decoration-none hover-primary small">
|
||||||
<li class="list-inline-item"><a class="btn-floating btn-sm text-light" href="#" style="font-size: 23px;"><i class="fab fa-google-plus"></i></a></li>
|
Политика конфиденциальности
|
||||||
<li class="list-inline-item"><a class="btn-floating btn-sm text-light" href="#" style="font-size: 23px;"><i class="fab fa-linkedin-in"></i></a></li>
|
</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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</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>
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
<!-- web/templates/web/header.html -->
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
|
||||||
<a class="navbar-brand" href="{% url 'home' %}">Smartsoltech</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
<div class="collapse navbar-collapse" id="navbarNav">
|
|
||||||
<ul class="navbar-nav">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="{% url 'home' %}">Главная</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="{% url 'services' %}">Услуги</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="{% url 'about' %}">Контакты</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
@@ -1,6 +1,226 @@
|
|||||||
<!-- web/templates/web/home.html -->
|
|
||||||
{% extends 'web/base_modern.html' %}
|
{% extends 'web/base_modern.html' %}
|
||||||
{% load static %}
|
{% load static %}
|
||||||
|
|
||||||
|
{% block title %}SmartSolTech - Инновационные технологические решения{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<!-- Hero Section with Modern Carousel -->
|
||||||
|
<section class="hero-modern">
|
||||||
|
{% if hero_banners %}
|
||||||
|
<div id="heroCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000">
|
||||||
|
<div class="carousel-inner">
|
||||||
|
{% for banner in hero_banners %}
|
||||||
|
<div class="carousel-item {% if forloop.first %}active{% endif %}">
|
||||||
|
{% if banner.video %}
|
||||||
|
<video class="hero-video" muted autoplay loop playsinline
|
||||||
|
{% if banner.video_poster %}poster="{{ banner.video_poster.url }}"{% endif %}>
|
||||||
|
<source src="{{ banner.video.url }}" type="video/mp4">
|
||||||
|
{% if banner.image %}
|
||||||
|
<img src="{{ banner.image.url }}" alt="{{ banner.title }}" class="hero-fallback">
|
||||||
|
{% endif %}
|
||||||
|
</video>
|
||||||
|
{% elif banner.image %}
|
||||||
|
<img src="{{ banner.image.url }}" alt="{{ banner.title }}" class="hero-image">
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<div class="hero-overlay"></div>
|
||||||
|
<div class="hero-content">
|
||||||
|
<div class="container-modern">
|
||||||
|
<div class="row align-items-center justify-content-center text-center">
|
||||||
|
<div class="col-lg-8">
|
||||||
|
<h1 class="hero-title">{{ banner.title }}</h1>
|
||||||
|
<p class="hero-subtitle">{{ banner.subtitle }}</p>
|
||||||
|
{% if banner.button_text and banner.button_url %}
|
||||||
|
<a href="{{ banner.button_url }}" class="btn btn-primary-modern btn-lg mt-4">
|
||||||
|
{{ banner.button_text }}
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Modern Pill Indicators -->
|
||||||
|
{% if hero_banners|length > 1 %}
|
||||||
|
<div class="hero-indicators">
|
||||||
|
<div class="pill-container">
|
||||||
|
{% for banner in hero_banners %}
|
||||||
|
<button type="button"
|
||||||
|
data-bs-target="#heroCarousel"
|
||||||
|
data-bs-slide-to="{{ forloop.counter0 }}"
|
||||||
|
class="pill-indicator {% if forloop.first %}active{% endif %}"
|
||||||
|
aria-current="{% if forloop.first %}true{% endif %}"
|
||||||
|
aria-label="Slide {{ forloop.counter }}"></button>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<!-- Default Hero when no banners -->
|
||||||
|
<div class="hero-default">
|
||||||
|
<div class="hero-overlay"></div>
|
||||||
|
<div class="hero-content">
|
||||||
|
<div class="container-modern">
|
||||||
|
<div class="row align-items-center justify-content-center text-center">
|
||||||
|
<div class="col-lg-8">
|
||||||
|
<h1 class="hero-title">SmartSolTech</h1>
|
||||||
|
<p class="hero-subtitle">Инновационные технологические решения для вашего бизнеса</p>
|
||||||
|
<a href="{% url 'services' %}" class="btn btn-primary-modern btn-lg mt-4">
|
||||||
|
Наши услуги
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Services Preview -->
|
||||||
|
<section class="section-padding">
|
||||||
|
<div class="container-modern">
|
||||||
|
<div class="text-center mb-5">
|
||||||
|
<h2 class="display-6 fw-bold mb-4">
|
||||||
|
Наши <span class="text-gradient">услуги</span>
|
||||||
|
</h2>
|
||||||
|
<p class="lead text-muted">
|
||||||
|
Предоставляем полный спектр IT-решений
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row g-4">
|
||||||
|
{% for service in services %}
|
||||||
|
<div class="col-lg-4 col-md-6">
|
||||||
|
<div class="card-modern h-100">
|
||||||
|
<div class="card-body text-center">
|
||||||
|
<div class="service-icon mb-3">
|
||||||
|
<i class="fas fa-code text-primary"></i>
|
||||||
|
</div>
|
||||||
|
<h5 class="mb-3">{{ service.name }}</h5>
|
||||||
|
<p class="text-muted mb-4">{{ service.description|truncatewords:15 }}</p>
|
||||||
|
<a href="{% url 'service_detail' service.pk %}" class="btn btn-outline-primary">
|
||||||
|
Подробнее
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center mt-5">
|
||||||
|
<a href="{% url 'services' %}" class="btn btn-primary-modern btn-lg">
|
||||||
|
Все услуги
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- About Preview -->
|
||||||
|
<section class="section-padding bg-light">
|
||||||
|
<div class="container-modern">
|
||||||
|
<div class="row g-5 align-items-center">
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<h2 class="display-6 fw-bold mb-4">
|
||||||
|
О <span class="text-gradient">SmartSolTech</span>
|
||||||
|
</h2>
|
||||||
|
<p class="lead mb-4">
|
||||||
|
Мы - команда профессионалов, специализирующихся на создании
|
||||||
|
инновационных технологических решений для бизнеса.
|
||||||
|
</p>
|
||||||
|
<div class="row g-3 mb-4">
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<i class="fas fa-check-circle text-success me-3"></i>
|
||||||
|
<span>Индивидуальный подход</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<i class="fas fa-check-circle text-success me-3"></i>
|
||||||
|
<span>Современные технологии</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<i class="fas fa-check-circle text-success me-3"></i>
|
||||||
|
<span>Качественная поддержка</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<i class="fas fa-check-circle text-success me-3"></i>
|
||||||
|
<span>Соблюдение сроков</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="{% url 'about' %}" class="btn btn-primary-modern">
|
||||||
|
Узнать больше
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="position-relative">
|
||||||
|
<img src="{% static 'assets/img/about-preview.jpg' %}"
|
||||||
|
class="img-fluid rounded-4 shadow-lg"
|
||||||
|
alt="О нас">
|
||||||
|
</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="{% url 'services' %}" class="btn btn-outline-light btn-lg">
|
||||||
|
<i class="fas fa-th-large me-2"></i>
|
||||||
|
Наши услуги
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Include Modal -->
|
||||||
|
{% include 'web/modal_order_form.html' %}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block extra_scripts %}
|
||||||
|
<script>
|
||||||
|
// Hero carousel enhancements
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
const carousel = document.querySelector('#heroCarousel');
|
||||||
|
if (carousel) {
|
||||||
|
const indicators = document.querySelectorAll('.pill-indicator');
|
||||||
|
|
||||||
|
carousel.addEventListener('slide.bs.carousel', function(e) {
|
||||||
|
indicators.forEach((indicator, index) => {
|
||||||
|
indicator.classList.toggle('active', index === e.to);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
|
{% load static %}
|
||||||
{% block title %}SmartSolTech - IT Solutions{% endblock %}
|
{% block title %}SmartSolTech - IT Solutions{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|||||||
@@ -1,99 +1,157 @@
|
|||||||
{% load static %}
|
{% load static %}
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="ru">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
|
||||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
|
||||||
<title>Модальное окно для заявки на услугу</title>
|
|
||||||
<style>
|
|
||||||
/* Стили для модального окна */
|
|
||||||
.modal {
|
|
||||||
display: none;
|
|
||||||
position: fixed;
|
|
||||||
z-index: 1;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: auto;
|
|
||||||
background-color: rgba(0, 0, 0, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content {
|
<!-- Modern Service Request Modal -->
|
||||||
background-color: #fefefe;
|
<div class="modal fade" id="serviceModal" tabindex="-1" aria-labelledby="serviceModalLabel" aria-hidden="true">
|
||||||
margin: 15% auto;
|
<div class="modal-dialog modal-lg">
|
||||||
padding: 20px;
|
<div class="modal-content border-0 shadow-lg">
|
||||||
border: 1px solid #888;
|
<div class="modal-header bg-gradient text-white border-0">
|
||||||
width: 80%;
|
<h5 class="modal-title" id="serviceModalLabel">
|
||||||
max-width: 600px;
|
<i class="fas fa-paper-plane me-2"></i>
|
||||||
}
|
Заказать услугу
|
||||||
|
</h5>
|
||||||
.close {
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
color: #aaa;
|
</div>
|
||||||
float: right;
|
<div class="modal-body p-4">
|
||||||
font-size: 28px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close:hover,
|
|
||||||
.close:focus {
|
|
||||||
color: #000;
|
|
||||||
text-decoration: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#qrCodeImg {
|
|
||||||
display: none;
|
|
||||||
margin: 20px auto;
|
|
||||||
width: 200px;
|
|
||||||
height: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<!-- Модальное окно -->
|
|
||||||
<div id="serviceModal" class="modal">
|
|
||||||
<div class="modal-content">
|
|
||||||
<span class="close">×</span>
|
|
||||||
<form id="serviceRequestForm">
|
<form id="serviceRequestForm">
|
||||||
<div class="form-group">
|
{% csrf_token %}
|
||||||
<label for="clientName">Ваше имя:</label>
|
<input type="hidden" id="serviceId" name="service_id">
|
||||||
<input type="text" class="form-control" id="clientName" name="client_name" required>
|
|
||||||
|
<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>
|
||||||
<div class="form-group">
|
<div class="col-md-6">
|
||||||
<label for="clientEmail">Ваш email:</label>
|
<label for="lastName" class="form-label">Фамилия *</label>
|
||||||
<input type="email" class="form-control" id="clientEmail" name="client_email" required>
|
<input type="text" class="form-control" id="lastName" name="last_name" required>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="col-md-6">
|
||||||
<label for="clientPhone">Ваш телефон:</label>
|
<label for="email" class="form-label">Email *</label>
|
||||||
<input type="text" class="form-control" id="clientPhone" name="client_phone" required pattern="^\+?[0-9\s\-]{7,15}$">
|
<input type="email" class="form-control" id="email" name="email" required>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="col-md-6">
|
||||||
<label for="description">Описание заявки:</label>
|
<label for="phone" class="form-label">Телефон</label>
|
||||||
<textarea class="form-control" id="description" name="description" required></textarea>
|
<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>
|
||||||
|
|
||||||
|
<!-- QR Code Section (Hidden by default) -->
|
||||||
|
<div class="mt-4" id="qrCodeSection" style="display: none;">
|
||||||
|
<div class="alert alert-info text-center">
|
||||||
|
<h6><i class="fas fa-qrcode me-2"></i>Завершите регистрацию через Telegram</h6>
|
||||||
|
<p class="mb-3">Отсканируйте QR-код или перейдите по ссылке для подтверждения заявки:</p>
|
||||||
|
<div class="d-flex justify-content-center mb-3">
|
||||||
|
<img id="qrCodeImage" src="" alt="QR Code" class="img-fluid border rounded" style="max-width: 200px; min-width: 200px; height: 200px; object-fit: contain; display: none;">
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<a id="telegramLink" href="" target="_blank" class="btn btn-info">
|
||||||
|
<i class="fab fa-telegram-plane me-2"></i>Открыть в Telegram
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex align-items-center justify-content-center">
|
||||||
|
<div class="spinner-border spinner-border-sm text-primary me-2" role="status" aria-hidden="true"></div>
|
||||||
|
<small class="text-muted">Ожидаем подтверждения в Telegram...</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Success Animation Section (Hidden by default) -->
|
||||||
|
<div class="mt-4" id="successSection" style="display: none;">
|
||||||
|
<div class="text-center py-5">
|
||||||
|
<div class="success-checkmark">
|
||||||
|
<div class="check-icon">
|
||||||
|
<span class="icon-line line-tip"></span>
|
||||||
|
<span class="icon-line line-long"></span>
|
||||||
|
<div class="icon-circle"></div>
|
||||||
|
<div class="icon-fix"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h4 class="text-success mt-3 mb-2">Заявка подана успешно!</h4>
|
||||||
|
<p class="text-muted">Мы свяжемся с вами в ближайшее время</p>
|
||||||
|
</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>
|
||||||
<div id="qrCodeContainer">
|
|
||||||
<p>QR-код для завершения регистрации:</p>
|
|
||||||
<img id="qrCodeImg" src="" alt="QR Code">
|
|
||||||
</div>
|
</div>
|
||||||
<button type="button" id="generateQrButton" class="btn btn-primary">Продолжить</button>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</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 id="confirmationModal" class="modal">
|
|
||||||
<div class="modal-content">
|
|
||||||
<span class="close">×</span>
|
|
||||||
<h4>Заявка успешно создана!</h4>
|
|
||||||
<p>Ваши данные были отправлены и заявка зарегистрирована. Пожалуйста, проверьте ваш Telegram для получения подтверждения.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script <script src="{% static 'assets/js/modal-init.js' %}"> </script>
|
<script>
|
||||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
// Service modal function
|
||||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
function openServiceModal(serviceId, serviceName) {
|
||||||
</body>
|
document.getElementById('serviceId').value = serviceId;
|
||||||
</html>
|
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 handling
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
const form = document.getElementById('serviceRequestForm');
|
||||||
|
if (form) {
|
||||||
|
form.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;
|
||||||
|
|
||||||
|
// Get CSRF token
|
||||||
|
const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
|
||||||
|
|
||||||
|
// Submit form logic would go here
|
||||||
|
// This is a placeholder for the actual submission logic
|
||||||
|
|
||||||
|
// Reset button after delay (placeholder)
|
||||||
|
setTimeout(() => {
|
||||||
|
submitBtn.innerHTML = originalContent;
|
||||||
|
submitBtn.disabled = false;
|
||||||
|
}, 2000);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -1,14 +1,127 @@
|
|||||||
{% load static %}
|
{% load static %}
|
||||||
<nav class="navbar navbar-expand-md bg-dark py-3" data-bs-theme="dark">
|
<nav class="navbar navbar-expand-lg navbar-modern">
|
||||||
<div class="container"><a class="navbar-brand d-flex align-items-center" href="/"><span class="bs-icon-sm bs-icon-rounded bs-icon-primary d-flex justify-content-center align-items-center me-2 bs-icon"><svg class="bi bi-bezier" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
|
<div class="container-modern">
|
||||||
<path fill-rule="evenodd" d="M0 10.5A1.5 1.5 0 0 1 1.5 9h1A1.5 1.5 0 0 1 4 10.5v1A1.5 1.5 0 0 1 2.5 13h-1A1.5 1.5 0 0 1 0 11.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm10.5.5A1.5 1.5 0 0 1 13.5 9h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM6 4.5A1.5 1.5 0 0 1 7.5 3h1A1.5 1.5 0 0 1 10 4.5v1A1.5 1.5 0 0 1 8.5 7h-1A1.5 1.5 0 0 1 6 5.5zM7.5 4a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z"></path>
|
<a class="navbar-brand-modern" href="{% url 'home' %}">
|
||||||
<path d="M6 4.5H1.866a1 1 0 1 0 0 1h2.668A6.517 6.517 0 0 0 1.814 9H2.5c.123 0 .244.015.358.043a5.517 5.517 0 0 1 3.185-3.185A1.503 1.503 0 0 1 6 5.5zm3.957 1.358A1.5 1.5 0 0 0 10 5.5v-1h4.134a1 1 0 1 1 0 1h-2.668a6.517 6.517 0 0 1 2.72 3.5H13.5c-.123 0-.243.015-.358.043a5.517 5.517 0 0 0-3.185-3.185z"></path>
|
<i class="fas fa-code me-2"></i>
|
||||||
</svg></span><span>SmartSolTech</span></a><button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navcol-5"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
|
SmartSolTech
|
||||||
<div id="navcol-5" class="collapse navbar-collapse">
|
</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">
|
<ul class="navbar-nav ms-auto">
|
||||||
<li class="nav-item"><a class="nav-link active" href="{% url 'services' %}">Услуги</a></li>
|
<li class="nav-item">
|
||||||
<li class="nav-item"><a class="nav-link" href="{% url 'about' %}">О нас</a></li>
|
<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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</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>
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
{% extends 'web/base_modern.html' %}
|
{% extends 'web/base.html' %}
|
||||||
{% load static %}
|
{% load static %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
{% extends 'web/base_modern.html' %}
|
{% extends 'web/base.html' %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<h2>Детали заказа</h2>
|
<h2>Детали заказа</h2>
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
{% extends 'web/base_modern.html' %}
|
{% extends 'web/base.html' %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="container mt-4">
|
<div class="container mt-4">
|
||||||
|
|||||||
@@ -173,83 +173,7 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Service Request Modal -->
|
<!-- Service Request Modal -->
|
||||||
<div class="modal fade" id="serviceModal" tabindex="-1" aria-labelledby="serviceModalLabel" aria-hidden="true">
|
{% include 'web/modal_order_form.html' %}
|
||||||
<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 %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block extra_scripts %}
|
{% block extra_scripts %}
|
||||||
@@ -263,55 +187,6 @@ function openServiceModal(serviceId, serviceName) {
|
|||||||
const modal = new bootstrap.Modal(document.getElementById('serviceModal'));
|
const modal = new bootstrap.Modal(document.getElementById('serviceModal'));
|
||||||
modal.show();
|
modal.show();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Form submission - simplified version
|
|
||||||
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;
|
|
||||||
|
|
||||||
// Симуляция отправки
|
|
||||||
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();
|
|
||||||
showNotification('Заявка отправлена! Мы свяжемся с вами в ближайшее время.', 'success');
|
|
||||||
|
|
||||||
// Reset form
|
|
||||||
this.reset();
|
|
||||||
submitBtn.innerHTML = originalContent;
|
|
||||||
submitBtn.disabled = false;
|
|
||||||
submitBtn.classList.remove('btn-success');
|
|
||||||
submitBtn.classList.add('btn-primary-modern');
|
|
||||||
}, 2000);
|
|
||||||
}, 1500);
|
|
||||||
});
|
|
||||||
|
|
||||||
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>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
from django.shortcuts import render, get_object_or_404, redirect
|
from django.shortcuts import render, get_object_or_404, redirect
|
||||||
from .models import Service, Project, Client, BlogPost, Review, Order, ServiceRequest, HeroBanner, Category
|
from .models import Service, Project, Client, BlogPost, Review, Order, ServiceRequest, HeroBanner, Category, ContactInfo
|
||||||
from django.db.models import Avg
|
from django.db.models import Avg
|
||||||
from comunication.models import TelegramSettings
|
from comunication.models import TelegramSettings
|
||||||
import qrcode
|
import qrcode
|
||||||
@@ -95,7 +95,8 @@ def services_view(request):
|
|||||||
})
|
})
|
||||||
|
|
||||||
def about_view(request):
|
def about_view(request):
|
||||||
return render(request, 'web/about_modern.html')
|
contact_info = ContactInfo.get_active()
|
||||||
|
return render(request, 'web/about.html', {'contact_info': contact_info})
|
||||||
|
|
||||||
def portfolio_view(request):
|
def portfolio_view(request):
|
||||||
projects = Project.objects.all()
|
projects = Project.objects.all()
|
||||||
|
|||||||
Reference in New Issue
Block a user