Fix service detail buttons and improve career page benefit cards visibility

- Fixed service detail modal buttons not working on /service/4/ pages
- Updated service request form to use modern Bootstrap modal
- Enhanced service_detail view to handle new form fields properly
- Added beautiful glassmorphism cards for career benefits section
- Improved text visibility with shadows and contrasting backgrounds
- Added hover animations and responsive design for benefit cards
- Updated career page CSS with modern card designs and effects

smartsoltech/web/templates/web/base_modern.html

@@ -29,7 +29,7 @@
     <link rel="manifest" href="/static/manifest.json">
     
     <!-- Favicon -->
-    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='%236366f1'/><text y='70' font-size='60' fill='white' font-family='Arial,sans-serif' text-anchor='middle' x='50'>S</text></svg>">>
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='%236366f1'/><text y='70' font-size='60' fill='white' font-family='Arial,sans-serif' text-anchor='middle' x='50'>S</text></svg>">
     
     <title>{% block title %}SmartSolTech - Современные IT-решения{% endblock %}</title>
     

smartsoltech/web/templates/web/career.html

@@ -5,33 +5,33 @@
 
 {% block content %}
 <!-- Hero Section -->
-<section class="hero-simple bg-gradient text-white">
+<section class="hero-simple bg-dark-gradient text-white">
     <div class="container-modern text-center py-5">
         <div class="row justify-content-center">
             <div class="col-lg-8">
-                <h1 class="display-4 fw-bold mb-4">Карьера в SmartSolTech</h1>
-                <p class="lead opacity-90">
+                <h1 class="display-4 fw-bold mb-4 text-white">Карьера в SmartSolTech</h1>
+                <p class="lead opacity-90 text-light">
                     Развивайтесь вместе с нами в мире инновационных технологий
                 </p>
                 {% if total_positions > 0 %}
                 <div class="career-stats mt-4">
                     <div class="row justify-content-center">
                         <div class="col-auto">
-                            <div class="stat-item">
-                                <div class="stat-number">{{ total_positions }}</div>
-                                <div class="stat-label">Открытых позиций</div>
+                            <div class="stat-item stat-item-dark">
+                                <div class="stat-number text-white">{{ total_positions }}</div>
+                                <div class="stat-label text-light">Открытых позиций</div>
                             </div>
                         </div>
                         <div class="col-auto">
-                            <div class="stat-item">
-                                <div class="stat-number">{{ departments|length }}</div>
-                                <div class="stat-label">Отделов</div>
+                            <div class="stat-item stat-item-dark">
+                                <div class="stat-number text-white">{{ departments|length }}</div>
+                                <div class="stat-label text-light">Отделов</div>
                             </div>
                         </div>
                         <div class="col-auto">
-                            <div class="stat-item">
-                                <div class="stat-number">{{ featured_careers|length }}</div>
-                                <div class="stat-label">Топ вакансий</div>
+                            <div class="stat-item stat-item-dark">
+                                <div class="stat-number text-white">{{ featured_careers|length }}</div>
+                                <div class="stat-label text-light">Топ вакансий</div>
                             </div>
                         </div>
                     </div>
@@ -308,10 +308,33 @@
 <style>
 /* Career Styles */
 .hero-simple {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
     min-height: 350px;
     display: flex;
     align-items: center;
+    position: relative;
+    overflow: hidden;
+}
+
+.bg-dark-gradient {
+    background: linear-gradient(135deg, #2d3748 0%, #4a5568 50%, #1a202c 100%) !important;
+    position: relative;
+}
+
+.bg-dark-gradient::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(45deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+    z-index: 1;
+}
+
+.bg-dark-gradient > .container-modern {
+    position: relative;
+    z-index: 2;
 }
 
 .career-stats {
@@ -323,17 +346,34 @@
     border-radius: 15px;
     padding: 20px;
     margin: 0 15px;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    transition: all 0.3s ease;
+}
+
+.stat-item-dark {
+    background: rgba(45, 55, 72, 0.8) !important;
+    border: 1px solid rgba(102, 126, 234, 0.3);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+.stat-item:hover {
+    transform: translateY(-5px);
+    background: rgba(102, 126, 234, 0.2);
+    border-color: rgba(102, 126, 234, 0.5);
 }
 
 .stat-number {
     font-size: 2.5rem;
     font-weight: bold;
-    color: white;
+    color: white !important;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 
 .stat-label {
     font-size: 0.9rem;
     opacity: 0.9;
+    color: #e2e8f0 !important;
 }
 
 .career-card-featured {
@@ -538,18 +578,70 @@
 }
 
 .benefit-item {
-    padding: 20px;
+    padding: 30px 20px;
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 20px;
+    backdrop-filter: blur(15px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    transition: all 0.4s ease;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+}
+
+.benefit-item::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+    border-radius: 20px;
+    z-index: 1;
+}
+
+.benefit-item:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+    background: rgba(255, 255, 255, 0.25);
+    border-color: rgba(255, 255, 255, 0.4);
+}
+
+.benefit-item > * {
+    position: relative;
+    z-index: 2;
 }
 
 .benefit-item i {
-    font-size: 2.5rem;
-    margin-bottom: 1rem;
-    color: rgba(255, 255, 255, 0.9);
+    font-size: 3rem;
+    margin-bottom: 1.5rem;
+    color: #ffffff;
+    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+    transition: all 0.3s ease;
+}
+
+.benefit-item:hover i {
+    transform: scale(1.1);
+    color: #f8f9fa;
 }
 
 .benefit-item h5 {
-    color: white;
-    margin-bottom: 0.5rem;
+    color: #ffffff;
+    margin-bottom: 1rem;
+    font-weight: 600;
+    font-size: 1.25rem;
+    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
+    letter-spacing: 0.5px;
+}
+
+.benefit-item p {
+    color: #f8f9fa !important;
+    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
+    font-size: 0.9rem;
+    line-height: 1.5;
+    margin-bottom: 0;
 }
 
 /* Responsive */
@@ -587,6 +679,26 @@
         font-size: 0.8rem;
         padding: 6px 15px;
     }
+    
+    /* Mobile styles for benefit items */
+    .benefit-item {
+        padding: 25px 15px;
+        margin-bottom: 20px;
+    }
+    
+    .benefit-item i {
+        font-size: 2.5rem;
+        margin-bottom: 1rem;
+    }
+    
+    .benefit-item h5 {
+        font-size: 1.1rem;
+    }
+    
+    .benefit-item p {
+        font-size: 0.85rem;
+    }
+}
 }
 </style>
 {% endblock %}

smartsoltech/web/templates/web/home.html

@@ -608,7 +608,7 @@ document.addEventListener('DOMContentLoaded', function() {
         </div>
         
         <div class="text-center mt-5">
-            <a href="{% url 'about' %}#career" class="btn btn-outline-primary btn-lg">
+            <a href="{% url 'career' %}" class="btn btn-outline-primary btn-lg">
                 <i class="fas fa-briefcase me-2"></i>
                 Все вакансии
             </a>

smartsoltech/web/templates/web/home_modern.html

@@ -163,10 +163,10 @@
                                     <!-- Mobile Preview -->
                                     <div class="mobile-preview position-absolute bg-white rounded-4 p-3 shadow" 
                                          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 class="bg-light rounded-3 p-3 text-dark text-center" style="background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;">
+                                            <i class="fas fa-mobile-alt fa-3x mb-2 text-primary"></i>
+                                            <h6 class="mb-1 text-dark fw-bold">Мобильные</h6>
+                                            <p class="small mb-0 text-muted">приложения</p>
                                         </div>
                                     </div>
                                     
@@ -353,7 +353,7 @@
                         <i class="fas fa-comments me-2"></i>
                         Получить консультацию
                     </a>
-                    <a href="tel:+82-10-XXXX-XXXX" class="btn btn-outline-light btn-lg">
+                    <a href="tel:+82-10-XXXX-XXXX" class="btn btn-light btn-lg" style="background: rgba(255,255,255,0.9); color: #2d3748; border: 2px solid rgba(255,255,255,0.3);">
                         <i class="fas fa-phone me-2"></i>
                         Позвонить сейчас
                     </a>

smartsoltech/web/templates/web/service_detail.html

@@ -110,9 +110,11 @@
                     
                     <!-- Action Buttons -->
                     <div class="d-flex gap-3">
-                        <button id="openModalBtn" 
+                        <button type="button" 
                                 class="btn btn-primary-modern btn-lg" 
-                                data-service-id="{{ service.id }}">
+                                data-bs-toggle="modal" 
+                                data-bs-target="#serviceModal"
+                                onclick="openServiceModal({{ service.id }}, '{{ service.name|addslashes }}')">
                             <i class="fas fa-paper-plane me-2"></i>
                             Заказать услугу
                         </button>
@@ -326,9 +328,11 @@
                     Получите бесплатную консультацию и расчет стоимости
                 </p>
                 <div class="d-flex flex-wrap gap-3 justify-content-center">
-                    <button class="btn btn-light btn-lg text-primary" 
-                            data-service-id="{{ service.id }}" 
-                            onclick="document.getElementById('openModalBtn').click()">
+                    <button type="button" 
+                            class="btn btn-light btn-lg text-primary" 
+                            data-bs-toggle="modal" 
+                            data-bs-target="#serviceModal"
+                            onclick="openServiceModal({{ service.id }}, '{{ service.name|addslashes }}')">
                         <i class="fas fa-paper-plane me-2"></i>
                         Заказать {{ service.name }}
                     </button>
@@ -349,8 +353,101 @@
 {% block extra_scripts %}
 <!-- Service detail scripts -->
 <script src="{% static 'assets/js/get-csrf-token.js' %}"></script>
-<script src="{% static 'assets/js/service_request.js' %}"></script>
-<script src="{% static 'assets/js/verification_status.js' %}"></script>
+
+<script>
+// Service modal function - updated for Bootstrap 5
+function openServiceModal(serviceId, serviceName) {
+    console.log("Opening modal for service:", serviceId, serviceName);
+    
+    // Set service ID in hidden field
+    const serviceIdInput = document.getElementById('serviceId');
+    if (serviceIdInput) {
+        serviceIdInput.value = serviceId;
+    }
+    
+    // Update modal title
+    const modalTitle = document.getElementById('serviceModalLabel');
+    if (modalTitle) {
+        modalTitle.innerHTML = '<i class="fas fa-paper-plane me-2"></i>Заказать услугу: ' + serviceName;
+    }
+}
+
+// Enhanced 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;
+            
+            // Show loading state
+            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;
+            
+            // Prepare data for submission
+            const serviceId = document.getElementById('serviceId').value;
+            const clientData = {
+                service_id: serviceId,
+                first_name: formData.get('first_name'),
+                last_name: formData.get('last_name'),
+                email: formData.get('email'),
+                phone: formData.get('phone'),
+                description: formData.get('description'),
+                budget: formData.get('budget'),
+                timeline: formData.get('timeline')
+            };
+            
+            // Submit to server
+            fetch(`/service/request/${serviceId}/`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRFToken': csrfToken
+                },
+                body: JSON.stringify(clientData)
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    // Show success animation
+                    document.querySelector('.modal-body form').style.display = 'none';
+                    document.getElementById('successSection').style.display = 'block';
+                    
+                    // Close modal after delay
+                    setTimeout(() => {
+                        const modal = bootstrap.Modal.getInstance(document.getElementById('serviceModal'));
+                        if (modal) {
+                            modal.hide();
+                        }
+                        // Reset form
+                        form.reset();
+                        document.querySelector('.modal-body form').style.display = 'block';
+                        document.getElementById('successSection').style.display = 'none';
+                    }, 3000);
+                } else {
+                    alert('Ошибка при отправке заявки: ' + (data.message || 'Попробуйте позже'));
+                }
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                alert('Ошибка при отправке заявки. Попробуйте позже.');
+            })
+            .finally(() => {
+                // Reset button
+                submitBtn.innerHTML = originalContent;
+                submitBtn.disabled = false;
+            });
+        });
+    }
+});
+</script>
 
 <style>
 .timeline-modern {
@@ -413,6 +510,134 @@
     text-align: center;
 }
 
+/* Success Animation Styles */
+.success-checkmark {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    display: block;
+    stroke-width: 2;
+    stroke: #4CAF50;
+    stroke-miterlimit: 10;
+    margin: 0 auto;
+    box-shadow: inset 0px 0px 0px #4CAF50;
+    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
+    position: relative;
+}
+
+.success-checkmark .check-icon {
+    width: 80px;
+    height: 80px;
+    position: absolute;
+    border-radius: 50%;
+    box-sizing: content-box;
+    border: 4px solid #4CAF50;
+}
+
+.success-checkmark .check-icon::before {
+    top: 3px;
+    left: -2px;
+    width: 30px;
+    transform-origin: 100% 50%;
+    border-radius: 100px 0 0 100px;
+}
+
+.success-checkmark .check-icon::after {
+    top: 0;
+    left: 30px;
+    width: 60px;
+    transform-origin: 0 50%;
+    border-radius: 0 100px 100px 0;
+    animation: rotate-circle 4.25s ease-in;
+}
+
+.success-checkmark .check-icon::before, .success-checkmark .check-icon::after {
+    content: '';
+    height: 100px;
+    position: absolute;
+    background: #FFFFFF;
+    transform: rotate(-45deg);
+}
+
+.success-checkmark .icon-line {
+    height: 5px;
+    background-color: #4CAF50;
+    display: block;
+    border-radius: 2px;
+    position: absolute;
+    z-index: 10;
+}
+
+.success-checkmark .icon-line.line-tip {
+    top: 46px;
+    left: 14px;
+    width: 25px;
+    transform: rotate(45deg);
+    animation: icon-line-tip 0.75s;
+}
+
+.success-checkmark .icon-line.line-long {
+    top: 38px;
+    right: 8px;
+    width: 47px;
+    transform: rotate(-45deg);
+    animation: icon-line-long 0.75s;
+}
+
+.success-checkmark .icon-circle {
+    top: -4px;
+    left: -4px;
+    z-index: 10;
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    position: absolute;
+    box-sizing: content-box;
+    border: 4px solid rgba(76, 175, 80, .5);
+}
+
+.success-checkmark .icon-fix {
+    top: 8px;
+    width: 5px;
+    left: 26px;
+    z-index: 1;
+    height: 85px;
+    position: absolute;
+    transform: rotate(-45deg);
+    background-color: #FFFFFF;
+}
+
+@keyframes rotate-circle {
+    0% { transform: rotate(-45deg); }
+    5% { transform: rotate(-45deg); }
+    12% { transform: rotate(-405deg); }
+    100% { transform: rotate(-405deg); }
+}
+
+@keyframes icon-line-tip {
+    0% { width: 0; left: 1px; top: 19px; }
+    54% { width: 0; left: 1px; top: 19px; }
+    70% { width: 50px; left: -8px; top: 37px; }
+    84% { width: 17px; left: 21px; top: 48px; }
+    100% { width: 25px; left: 14px; top: 45px; }
+}
+
+@keyframes icon-line-long {
+    0% { width: 0; right: 46px; top: 54px; }
+    65% { width: 0; right: 46px; top: 54px; }
+    84% { width: 55px; right: 0px; top: 35px; }
+    100% { width: 47px; right: 8px; top: 38px; }
+}
+
+@keyframes fill {
+    100% { box-shadow: inset 0px 0px 0px 60px #4CAF50; }
+}
+
+@keyframes scale {
+    0%, 100% { transform: none; }
+    50% { transform: scale3d(1.1, 1.1, 1); }
+}
+
 @media (max-width: 768px) {
     .timeline-modern::before {
         left: 15px;