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

smartsoltech/staticfiles/admin/js/cancel.js

@@ -1,29 +1,17 @@
-'use strict';
-{
-    // Call function fn when the DOM is loaded and ready. If it is already
-    // loaded, call the function now.
-    // http://youmightnotneedjquery.com/#ready
-    function ready(fn) {
-        if (document.readyState !== 'loading') {
-            fn();
-        } else {
-            document.addEventListener('DOMContentLoaded', fn);
-        }
-    }
+(function($) {
+    'use strict';
 
-    ready(function() {
-        function handleClick(event) {
-            event.preventDefault();
-            const params = new URLSearchParams(window.location.search);
-            if (params.has('_popup')) {
-                window.close(); // Close the popup.
+    $(document).ready(function() {
+        $('.cancel-link').click(function(e) {
+            e.preventDefault();
+            const parentWindow = window.parent;
+            if (parentWindow && typeof(parentWindow.dismissRelatedObjectModal) === 'function' && parentWindow !== window) {
+                parentWindow.dismissRelatedObjectModal();
             } else {
-                window.history.back(); // Otherwise, go back.
+                // fallback to default behavior
+                window.history.back();
             }
-        }
-
-        document.querySelectorAll('.cancel-link').forEach(function(el) {
-            el.addEventListener('click', handleClick);
+            return false;
         });
     });
-}
+})(django.jQuery);

smartsoltech/staticfiles/admin/js/popup_response.js

@@ -1,15 +1,44 @@
-'use strict';
-{
-    const initData = JSON.parse(document.getElementById('django-admin-popup-response-constants').dataset.popupResponse);
-    switch(initData.action) {
-    case 'change':
-        opener.dismissChangeRelatedObjectPopup(window, initData.value, initData.obj, initData.new_value);
-        break;
-    case 'delete':
-        opener.dismissDeleteRelatedObjectPopup(window, initData.value);
-        break;
-    default:
-        opener.dismissAddRelatedObjectPopup(window, initData.value, initData.obj);
-        break;
+(function() {
+
+    'use strict';
+
+    var windowRef = window;
+    var windowRefProxy;
+    var windowName, widgetName;
+    var openerRef = windowRef.opener;
+    if (!openerRef) {
+        // related modal is active
+        openerRef = windowRef.parent;
+        windowName = windowRef.name;
+        widgetName = windowName.replace(/^(change|add|delete|lookup)_/, '');
+        windowRefProxy = {
+            name: widgetName,
+            location: windowRef.location,
+            close: function() {
+                openerRef.dismissRelatedObjectModal();
+            }
+        };
+        windowRef = windowRefProxy;
     }
-}
+
+    // default django popup_response.js
+    var initData = JSON.parse(document.getElementById('django-admin-popup-response-constants').dataset.popupResponse);
+    switch (initData.action) {
+        case 'change':
+            if (typeof(openerRef.dismissChangeRelatedObjectPopup) === 'function') {
+                openerRef.dismissChangeRelatedObjectPopup(windowRef, initData.value, initData.obj, initData.new_value);
+            }
+            break;
+        case 'delete':
+            if (typeof(openerRef.dismissDeleteRelatedObjectPopup) === 'function') {
+                openerRef.dismissDeleteRelatedObjectPopup(windowRef, initData.value);
+            }
+            break;
+        default:
+            if (typeof(openerRef.dismissAddRelatedObjectPopup) === 'function') {
+                openerRef.dismissAddRelatedObjectPopup(windowRef, initData.value, initData.obj);
+            }
+            break;
+    }
+
+})();

smartsoltech/staticfiles/assets/css/modal-styles.css

@@ -0,0 +1 @@
+@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css');

smartsoltech/staticfiles/assets/css/modern-styles.css

@@ -0,0 +1,378 @@
+/* Modern IT Company Design - SmartSolTech */
+:root {
+  /* Light Theme Colors */
+  --primary-color: #6366f1;
+  --primary-dark: #4f46e5;
+  --secondary-color: #8b5cf6;
+  --accent-color: #06d6a0;
+  --text-dark: #1f2937;
+  --text-light: #6b7280;
+  --bg-light: #ffffff;
+  --bg-gray: #f9fafb;
+  --border-color: #e5e7eb;
+  --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+  --gradient-accent: linear-gradient(135deg, #06d6a0 0%, #34d399 100%);
+  
+  /* Dark Theme Colors */
+  --dark-bg: #0f172a;
+  --dark-bg-secondary: #1e293b;
+  --dark-text: #f8fafc;
+  --dark-text-secondary: #cbd5e1;
+  --dark-border: #334155;
+}
+
+/* Dark theme */
+[data-theme="dark"] {
+  --text-dark: var(--dark-text);
+  --text-light: var(--dark-text-secondary);
+  --bg-light: var(--dark-bg);
+  --bg-gray: var(--dark-bg-secondary);
+  --border-color: var(--dark-border);
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+  line-height: 1.6;
+  color: var(--text-dark);
+  background-color: var(--bg-light);
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+  line-height: 1.2;
+  margin-bottom: 1rem;
+}
+
+h1 {
+  font-size: 3.75rem;
+  font-weight: 800;
+  background: var(--gradient-primary);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+h2 {
+  font-size: 2.5rem;
+  color: var(--text-dark);
+}
+
+h3 {
+  font-size: 1.875rem;
+}
+
+p {
+  font-size: 1.125rem;
+  line-height: 1.7;
+  color: var(--text-light);
+  margin-bottom: 1.5rem;
+}
+
+/* Buttons */
+.btn-modern {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem 2rem;
+  font-size: 1rem;
+  font-weight: 600;
+  border: none;
+  border-radius: 12px;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-primary-modern {
+  background: var(--gradient-primary);
+  color: white;
+  box-shadow: var(--shadow);
+}
+
+.btn-primary-modern:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 20px 25px -5px rgba(99, 102, 241, 0.4);
+  color: white;
+}
+
+.btn-secondary-modern {
+  background: var(--bg-light);
+  color: var(--text-dark);
+  border: 2px solid var(--border-color);
+}
+
+.btn-secondary-modern:hover {
+  background: var(--bg-gray);
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+}
+
+/* Cards */
+.card-modern {
+  background: var(--bg-light);
+  border-radius: 20px;
+  border: 1px solid var(--border-color);
+  box-shadow: var(--shadow);
+  transition: all 0.3s ease;
+  overflow: hidden;
+}
+
+.card-modern:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+}
+
+.card-modern .card-body {
+  padding: 2rem;
+}
+
+/* Navigation */
+.navbar-modern {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid var(--border-color);
+  padding: 1rem 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  transition: all 0.3s ease;
+}
+
+.navbar-modern.scrolled {
+  background: rgba(255, 255, 255, 0.98);
+  box-shadow: var(--shadow);
+}
+
+.navbar-brand-modern {
+  font-size: 1.5rem;
+  font-weight: 800;
+  background: var(--gradient-primary);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-decoration: none;
+}
+
+.nav-link-modern {
+  font-weight: 500;
+  color: var(--text-light);
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+  text-decoration: none;
+}
+
+.nav-link-modern:hover,
+.nav-link-modern.active {
+  color: var(--primary-color);
+  background: rgba(99, 102, 241, 0.1);
+}
+
+/* Hero Section */
+.hero-modern {
+  padding: 8rem 0 4rem;
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
+  position: relative;
+  overflow: hidden;
+}
+
+.hero-modern::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="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="0.5" fill="%236366f1" opacity="0.1"/><circle cx="75" cy="75" r="0.3" fill="%238b5cf6" opacity="0.1"/><circle cx="75" cy="25" r="0.4" fill="%2306d6a0" opacity="0.1"/><circle cx="25" cy="75" r="0.6" fill="%236366f1" opacity="0.05"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
+  opacity: 0.5;
+}
+
+/* Services Grid */
+.services-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 2rem;
+  margin-top: 3rem;
+}
+
+.service-card {
+  background: var(--bg-light);
+  border-radius: 20px;
+  padding: 2.5rem;
+  border: 1px solid var(--border-color);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.service-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: var(--gradient-primary);
+  transform: translateX(-100%);
+  transition: transform 0.3s ease;
+}
+
+.service-card:hover::before {
+  transform: translateX(0);
+}
+
+.service-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+}
+
+.service-icon {
+  width: 60px;
+  height: 60px;
+  border-radius: 16px;
+  background: var(--gradient-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1.5rem;
+  color: white;
+  font-size: 1.5rem;
+}
+
+/* Animations */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fadeInUp 0.6s ease-out forwards;
+}
+
+.animate-float {
+  animation: float 3s ease-in-out infinite;
+}
+
+/* Dark mode toggle */
+.theme-toggle {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: var(--gradient-primary);
+  border: none;
+  color: white;
+  font-size: 1.25rem;
+  cursor: pointer;
+  box-shadow: var(--shadow);
+  transition: all 0.3s ease;
+  z-index: 1000;
+}
+
+.theme-toggle:hover {
+  transform: scale(1.1);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  h1 {
+    font-size: 2.5rem;
+  }
+  
+  h2 {
+    font-size: 2rem;
+  }
+  
+  .hero-modern {
+    padding: 6rem 0 3rem;
+  }
+  
+  .services-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .service-card {
+    padding: 2rem;
+  }
+}
+
+/* Utility Classes */
+.text-gradient {
+  background: var(--gradient-primary);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.bg-gradient {
+  background: var(--gradient-primary);
+}
+
+.border-gradient {
+  border: 2px solid transparent;
+  background: linear-gradient(var(--bg-light), var(--bg-light)) padding-box,
+              var(--gradient-primary) border-box;
+}
+
+.container-modern {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+.section-padding {
+  padding: 6rem 0;
+}
+
+.mb-large {
+  margin-bottom: 4rem;
+}
+
+.text-center {
+  text-align: center;
+}
+
+/* Loading Animation */
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid var(--border-color);
+  border-top: 4px solid var(--primary-color);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

smartsoltech/staticfiles/assets/css/service_request_modal.css

@@ -0,0 +1,27 @@
+    /* Добавляем стили для анимации появления модального окна */
+    #serviceModal {
+        display: none;
+        position: fixed;
+        z-index: 1;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.4);
+    }
+
+    .modal-content {
+        position: relative;
+        background-color: #fefefe;
+        margin: auto;
+        padding: 20px;
+        border: 1px solid #888;
+        width: 80%;
+        max-width: 600px;
+        transform: scale(0);
+        transition: transform 0.5s ease;
+    }
+
+    .modal.show .modal-content {
+        transform: scale(1);
+    }

smartsoltech/staticfiles/assets/css/styles.min.css

@@ -0,0 +1,230 @@
+/* Font Face Definitions */
+@font-face {
+    font-family: 'Kaushan Script';
+    src: url('{% static "fonts/Kaushan%20Script-3db770c46931b64b6e281dcb2a7d0586.woff2" %}') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+    font-family: 'Kaushan Script';
+    src: url('{% static "fonts/Kaushan%20Script-ba85b3a237ebd28058cd515071c02485.woff2" %}') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    src: url('{% static "fonts/Montserrat-99764e33f03a95926b938c6f56e08a4f.woff2" %}') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    src: url('{% static "fonts/Montserrat-cc6c968bcebf02819ee3afff266119d9.woff2" %}') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    src: url('{% static "fonts/Montserrat-f32ddc894c166fbd8bc0d500ff2aeb3d.woff2" %}') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    src: url('{% static "fonts/Montserrat-bcb799eba0c324e431d5daac3e5ea6bf.woff2" %}') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    src: url('{% static "fonts/Montserrat-5cfb114945f0457bd5a940932bb8156d.woff2" %}') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Utility Classes */
+.fit-cover {
+    object-fit: cover;
+}
+
+/* Footer Styles */
+footer {
+    background-color: #343a40;
+    color: #fff;
+    padding-top: 5rem;
+    padding-bottom: 4rem;
+}
+
+footer h5 {
+    margin-bottom: 1.5rem;
+    font-weight: 700;
+}
+
+footer a, footer p {
+    color: #fff;
+    text-decoration: none;
+}
+
+footer a:hover {
+    text-decoration: underline;
+}
+
+footer hr {
+    border-top: 1px solid #fff;
+    width: 100%;
+    margin: 2rem 0;
+}
+
+footer .list-inline-item a {
+    color: #fff;
+    font-size: 23px;
+}
+
+/* Button Hover Styles */
+button.btn-primary:hover {
+    background: rgb(20, 87, 187);
+}
+
+/* Navigation Styles */
+ul.main-nav {
+    list-style-type: none;
+    padding: 0;
+    font-size: 0;
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+ul.main-nav > li {
+    display: inline-block;
+    padding: 0;
+}
+
+ul.main-nav > li > a {
+    display: block;
+    padding: 20px 30px;
+    position: relative;
+    color: #fff;
+    font-size: 16px;
+    font-weight: 400;
+    box-sizing: border-box;
+}
+
+ul.main-nav > li:hover {
+    background-color: #f9f9f9;
+}
+
+ul.main-nav > li:hover > a {
+    color: #333;
+    font-weight: 400;
+}
+
+ul.main-nav > li ul.sub-menu-lists {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    display: block;
+}
+
+ul.main-nav > li ul.sub-menu-lists > li {
+    padding: 2px 0;
+}
+
+ul.main-nav > li ul.sub-menu-lists > li > a {
+    font-size: 14px;
+}
+
+/* Responsive Navigation */
+@media only screen and (max-width: 768px) {
+    .ic.menu {
+        display: block;
+    }
+
+    ul.main-nav {
+        z-index: 2;
+        padding: 50px 0;
+        position: fixed;
+        right: 0;
+        top: 0;
+        width: 0;
+        background-color: #000;
+        height: 100%;
+        overflow: auto;
+        transition: width 0.6s, background 0.6s;
+    }
+
+    .ic.menu:focus ~ ul.main-nav {
+        width: 300px;
+    }
+}
+
+@media only screen and (min-width: 769px) {
+    .ic.menu {
+        display: none;
+    }
+
+    ul.main-nav {
+        display: block;
+        position: relative;
+    }
+}
+
+.fa-star {
+    font-size: 20px;
+    color: gray;
+}
+
+.checked {
+    color: gold;
+}
+
+
+.project-card, .review-card {
+    width: 100%;
+    max-width: 350px;
+    margin: auto;
+    font-size: 0.5rem; /* Make font size smaller */
+}
+
+.card-body p {
+    margin-bottom: 10px;
+    font-size: 0.85rem; /* Reduce text size in paragraphs */
+}
+
+.text-muted {
+    font-size: 0.8rem; /* Make muted text slightly smaller */
+}
+
+
+.carousel-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5); /* Затемнение */
+    z-index: 1;
+}
+
+.carousel-item img {
+    z-index: -1;
+}

smartsoltech/staticfiles/assets/js/get-csrf-token.js

@@ -0,0 +1,18 @@
+// Функция для получения CSRF токена из куков
+function getCookie(name) {
+    let cookieValue = null;
+    if (document.cookie && document.cookie !== '') {
+        const cookies = document.cookie.split(';');
+        for (let i = 0; i < cookies.length; i++) {
+            const cookie = cookies[i].trim();
+            if (cookie.substring(0, name.length + 1) === (name + '=')) {
+                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                break;
+            }
+        }
+    }
+    return cookieValue;
+}
+
+// Инициализация переменной csrftoken, которая будет доступна глобально
+const csrftoken = getCookie('csrftoken');

smartsoltech/staticfiles/assets/js/modal-init.js

@@ -0,0 +1,49 @@
+document.addEventListener("DOMContentLoaded", function () {
+    // Работа с модальным окном заявки
+    var modalElement = document.getElementById('orderModal');
+    if (modalElement) {
+        var modal = new bootstrap.Modal(modalElement);
+
+        // Инициализация модального окна
+        modalElement.addEventListener('show.bs.modal', function () {
+            console.log("Модальное окно открыто");
+        });
+
+        modalElement.addEventListener('hide.bs.modal', function () {
+            console.log("Модальное окно закрыто");
+        });
+    }
+
+    // Открытие модального окна для заявки на услугу
+    const openModalBtn = document.getElementById('openModalBtn');
+    const serviceModal = document.getElementById('serviceModal');
+
+    if (openModalBtn && serviceModal) {
+        openModalBtn.addEventListener('click', function (event) {
+            event.preventDefault();
+            const serviceId = openModalBtn.getAttribute('data-service-id');
+            console.log("Service ID при открытии модального окна:", serviceId);
+
+            if (!serviceId) {
+                alert("Идентификатор услуги не найден. Обновите страницу и попробуйте снова.");
+                return;
+            }
+
+            generateQrButton.dataset.serviceId = serviceId;
+
+            serviceModal.classList.add('show');
+            serviceModal.style.display = 'block';
+        });
+    }
+
+    document.querySelectorAll('.close').forEach(closeBtn => {
+        closeBtn.addEventListener('click', function () {
+            if (serviceModal) {
+                serviceModal.classList.remove('show');
+                setTimeout(() => {
+                    serviceModal.style.display = 'none';
+                }, 500);
+            }
+        });
+    });
+});

smartsoltech/staticfiles/assets/js/modern-scripts.js

@@ -0,0 +1,326 @@
+// Modern Scripts for SmartSolTech Website
+document.addEventListener('DOMContentLoaded', function() {
+    
+    // Hide loading screen
+    const loadingScreen = document.getElementById('loading-screen');
+    if (loadingScreen) {
+        setTimeout(() => {
+            loadingScreen.style.opacity = '0';
+            setTimeout(() => {
+                loadingScreen.style.display = 'none';
+            }, 300);
+        }, 1000);
+    }
+    
+    // Theme Toggle Functionality
+    const themeToggle = document.getElementById('theme-toggle');
+    const html = document.documentElement;
+    
+    // Check for saved theme preference
+    const currentTheme = localStorage.getItem('theme') || 'light';
+    html.setAttribute('data-theme', currentTheme);
+    updateThemeIcon(currentTheme);
+    
+    themeToggle.addEventListener('click', function() {
+        const currentTheme = html.getAttribute('data-theme');
+        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+        
+        html.setAttribute('data-theme', newTheme);
+        localStorage.setItem('theme', newTheme);
+        updateThemeIcon(newTheme);
+        
+        // Add animation
+        this.style.transform = 'scale(0.8)';
+        setTimeout(() => {
+            this.style.transform = 'scale(1)';
+        }, 150);
+    });
+    
+    function updateThemeIcon(theme) {
+        const icon = themeToggle.querySelector('i');
+        if (theme === 'dark') {
+            icon.className = 'fas fa-sun';
+            themeToggle.setAttribute('aria-label', 'Переключить на светлую тему');
+        } else {
+            icon.className = 'fas fa-moon';
+            themeToggle.setAttribute('aria-label', 'Переключить на темную тему');
+        }
+    }
+    
+    // Navbar scroll behavior
+    const navbar = document.querySelector('.navbar-modern');
+    let lastScrollTop = 0;
+    
+    window.addEventListener('scroll', function() {
+        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        
+        // Add/remove scrolled class
+        if (scrollTop > 50) {
+            navbar.classList.add('scrolled');
+        } else {
+            navbar.classList.remove('scrolled');
+        }
+        
+        // Hide/show navbar on scroll
+        if (scrollTop > lastScrollTop && scrollTop > 100) {
+            navbar.style.transform = 'translateY(-100%)';
+        } else {
+            navbar.style.transform = 'translateY(0)';
+        }
+        
+        lastScrollTop = scrollTop;
+    });
+    
+    // Scroll to top button
+    const scrollToTopBtn = document.getElementById('scroll-to-top');
+    
+    window.addEventListener('scroll', function() {
+        if (window.pageYOffset > 300) {
+            scrollToTopBtn.style.display = 'block';
+            scrollToTopBtn.style.opacity = '1';
+        } else {
+            scrollToTopBtn.style.opacity = '0';
+            setTimeout(() => {
+                if (window.pageYOffset <= 300) {
+                    scrollToTopBtn.style.display = 'none';
+                }
+            }, 300);
+        }
+    });
+    
+    scrollToTopBtn.addEventListener('click', function() {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+    });
+    
+    // Smooth scrolling for anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function(e) {
+            e.preventDefault();
+            const target = document.querySelector(this.getAttribute('href'));
+            if (target) {
+                const offsetTop = target.offsetTop - 80; // Account for fixed navbar
+                window.scrollTo({
+                    top: offsetTop,
+                    behavior: 'smooth'
+                });
+            }
+        });
+    });
+    
+    // Intersection Observer for animations
+    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');
+                // Add stagger delay for child elements
+                const children = entry.target.querySelectorAll('.service-card, .feature-list > *, .step-card');
+                children.forEach((child, index) => {
+                    setTimeout(() => {
+                        child.classList.add('animate-fade-in-up');
+                    }, index * 100);
+                });
+            }
+        });
+    }, observerOptions);
+    
+    // Observe elements for animation
+    document.querySelectorAll('.service-card, .card-modern, .step-card').forEach(el => {
+        observer.observe(el);
+    });
+    
+    // Form enhancements
+    const forms = document.querySelectorAll('form');
+    forms.forEach(form => {
+        form.addEventListener('submit', function(e) {
+            const submitBtn = form.querySelector('button[type="submit"]');
+            if (submitBtn) {
+                const originalContent = submitBtn.innerHTML;
+                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Отправляем...';
+                submitBtn.disabled = true;
+                
+                // Re-enable after 3 seconds (in case of slow response)
+                setTimeout(() => {
+                    submitBtn.innerHTML = originalContent;
+                    submitBtn.disabled = false;
+                }, 3000);
+            }
+        });
+    });
+    
+    // Parallax effect for hero section
+    window.addEventListener('scroll', function() {
+        const scrolled = window.pageYOffset;
+        const parallaxElements = document.querySelectorAll('.animate-float');
+        
+        parallaxElements.forEach(element => {
+            const speed = 0.5;
+            element.style.transform = `translateY(${scrolled * speed}px)`;
+        });
+    });
+    
+    // Service cards hover effect
+    document.querySelectorAll('.service-card').forEach(card => {
+        card.addEventListener('mouseenter', function() {
+            this.style.transform = 'translateY(-10px) scale(1.02)';
+        });
+        
+        card.addEventListener('mouseleave', function() {
+            this.style.transform = 'translateY(0) scale(1)';
+        });
+    });
+    
+    // Card modern hover effects
+    document.querySelectorAll('.card-modern').forEach(card => {
+        card.addEventListener('mouseenter', function() {
+            this.style.boxShadow = '0 25px 50px -12px rgba(0, 0, 0, 0.25)';
+        });
+        
+        card.addEventListener('mouseleave', function() {
+            this.style.boxShadow = 'var(--shadow)';
+        });
+    });
+    
+    // Add loading animation to buttons
+    document.querySelectorAll('.btn-primary-modern, .btn-secondary-modern').forEach(btn => {
+        btn.addEventListener('click', function(e) {
+            // Create ripple effect
+            const ripple = document.createElement('span');
+            const rect = this.getBoundingClientRect();
+            const size = Math.max(rect.width, rect.height);
+            const x = e.clientX - rect.left - size / 2;
+            const y = e.clientY - rect.top - size / 2;
+            
+            ripple.style.cssText = `
+                position: absolute;
+                border-radius: 50%;
+                background: rgba(255, 255, 255, 0.4);
+                transform: scale(0);
+                animation: ripple 0.6s linear;
+                width: ${size}px;
+                height: ${size}px;
+                left: ${x}px;
+                top: ${y}px;
+            `;
+            
+            this.style.position = 'relative';
+            this.style.overflow = 'hidden';
+            this.appendChild(ripple);
+            
+            setTimeout(() => {
+                ripple.remove();
+            }, 600);
+        });
+    });
+    
+    // Typing animation for hero text (optional)
+    const typingText = document.querySelector('.typing-text');
+    if (typingText) {
+        const text = typingText.textContent;
+        typingText.textContent = '';
+        let i = 0;
+        
+        function typeWriter() {
+            if (i < text.length) {
+                typingText.textContent += text.charAt(i);
+                i++;
+                setTimeout(typeWriter, 100);
+            }
+        }
+        
+        setTimeout(typeWriter, 1000);
+    }
+    
+    // Mobile menu enhancements
+    const navbarToggler = document.querySelector('.navbar-toggler');
+    const navbarCollapse = document.querySelector('.navbar-collapse');
+    
+    if (navbarToggler && navbarCollapse) {
+        navbarToggler.addEventListener('click', function() {
+            const isExpanded = this.getAttribute('aria-expanded') === 'true';
+            
+            // Animate the toggler icon
+            this.style.transform = 'rotate(180deg)';
+            setTimeout(() => {
+                this.style.transform = 'rotate(0deg)';
+            }, 300);
+        });
+        
+        // Close menu when clicking on a link
+        document.querySelectorAll('.navbar-nav .nav-link').forEach(link => {
+            link.addEventListener('click', () => {
+                const bsCollapse = new bootstrap.Collapse(navbarCollapse, {
+                    hide: true
+                });
+            });
+        });
+    }
+    
+    // Newsletter form
+    const newsletterForm = document.querySelector('footer form');
+    if (newsletterForm) {
+        newsletterForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            const email = this.querySelector('input[type="email"]').value;
+            
+            if (email) {
+                // Show success message
+                const button = this.querySelector('button');
+                const originalContent = button.innerHTML;
+                button.innerHTML = '<i class="fas fa-check"></i>';
+                button.style.background = '#10b981';
+                
+                setTimeout(() => {
+                    button.innerHTML = originalContent;
+                    button.style.background = '';
+                    this.reset();
+                }, 2000);
+            }
+        });
+    }
+});
+
+// Add CSS for ripple animation
+const style = document.createElement('style');
+style.textContent = `
+    @keyframes ripple {
+        to {
+            transform: scale(2);
+            opacity: 0;
+        }
+    }
+    
+    .animate-fade-in-up {
+        opacity: 1 !important;
+        transform: translateY(0) !important;
+    }
+    
+    /* Smooth transitions */
+    .navbar-modern {
+        transition: transform 0.3s ease, background-color 0.3s ease;
+    }
+    
+    .service-card, .card-modern {
+        opacity: 0;
+        transform: translateY(30px);
+        transition: all 0.6s ease;
+    }
+    
+    .step-card {
+        opacity: 0;
+        transform: translateX(-30px);
+        transition: all 0.6s ease;
+    }
+    
+    .step-card:nth-child(even) {
+        transform: translateX(30px);
+    }
+`;
+document.head.appendChild(style);

smartsoltech/staticfiles/assets/js/script.min.js

@@ -0,0 +1 @@
+!function(){"use strict";var e=document.querySelector("#mainNav");if(e){var o=e.querySelector(".navbar-collapse");if(o){var n=new bootstrap.Collapse(o,{toggle:!1}),t=o.querySelectorAll("a");for(var a of t)a.addEventListener("click",(function(e){n.hide()}))}var r=function(){(void 0!==window.pageYOffset?window.pageYOffset:(document.documentElement||document.body.parentNode||document.body).scrollTop)>100?e.classList.add("navbar-shrink"):e.classList.remove("navbar-shrink")};r(),document.addEventListener("scroll",r);var d=document.querySelectorAll(".portfolio-modal");for(var s of d)s.addEventListener("shown.bs.modal",(function(o){e.classList.add("d-none")})),s.addEventListener("hidden.bs.modal",(function(o){e.classList.remove("d-none")}))}}();

smartsoltech/staticfiles/assets/js/service_request.js

@@ -0,0 +1,116 @@
+// service-request.js
+
+document.addEventListener("DOMContentLoaded", function () {
+    // Открытие модального окна
+    const openModalBtn = document.getElementById('openModalBtn');
+    const serviceModal = document.getElementById('serviceModal');
+    const generateQrButton = document.getElementById('generateQrButton');
+
+    if (openModalBtn && serviceModal) {
+        openModalBtn.addEventListener('click', function (event) {
+            event.preventDefault();
+            // Логирование значения serviceId при открытии модального окна
+            const serviceId = openModalBtn.getAttribute('data-service-id');
+            console.log("Service ID при открытии модального окна:", serviceId);
+            
+            // Проверяем, если serviceId отсутствует
+            if (!serviceId) {
+                alert("Идентификатор услуги не найден. Обновите страницу и попробуйте снова.");
+                return;
+            }
+
+            // Сохраняем serviceId для дальнейшего использования
+            generateQrButton.dataset.serviceId = serviceId;
+
+            // Показываем модальное окно
+            serviceModal.classList.add('show');
+            serviceModal.style.display = 'block';
+        });
+    } else {
+        console.error('Не удалось найти элемент с id openModalBtn или serviceModal.');
+    }
+
+    // Закрытие модального окна
+    document.querySelectorAll('.close').forEach(closeBtn => {
+        closeBtn.addEventListener('click', function () {
+            if (serviceModal) {
+                serviceModal.classList.remove('show');
+                setTimeout(() => {
+                    serviceModal.style.display = 'none';
+                }, 500);
+            }
+        });
+    });
+
+    // Обработчик кнопки "Создать заявку"
+    if (generateQrButton) {
+        generateQrButton.addEventListener('click', function () {
+            // Получение значений полей
+            const clientEmail = document.getElementById('clientEmail').value.trim();
+            const clientPhone = document.getElementById('clientPhone').value.trim();
+            const clientName = document.getElementById('clientName').value.trim();
+            const description = document.getElementById('description').value.trim();
+
+            // Получаем serviceId из кнопки открытия модального окна
+            const serviceId = generateQrButton.dataset.serviceId;
+
+            // Логируем для проверки значения serviceId перед отправкой
+            console.log("Service ID перед отправкой запроса:", serviceId);
+
+            // Проверка заполненности полей
+            if (!clientEmail || !clientPhone || !clientName || !description || !serviceId) {
+                let errorMessage = 'Пожалуйста, заполните все поля формы перед продолжением.\n';
+                if (!serviceId) {
+                    errorMessage += 'Идентификатор услуги не найден. Обновите страницу и попробуйте снова.\n';
+                }
+                alert(errorMessage);
+                return;
+            }
+
+            // Отправка POST запроса на создание заявки
+            fetch(`/service/generate_qr_code/${serviceId}/`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRFToken': csrftoken  // Используем глобально инициализированный CSRF токен
+                },
+                body: JSON.stringify({
+                    client_email: clientEmail,
+                    client_phone: clientPhone,
+                    client_name: clientName,
+                    description: description
+                })
+            })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Ошибка при создании заявки');
+                }
+                return response.json();
+            })
+            .then(data => {
+                if (data.qr_code_url) {
+                    // Обновляем src изображения QR-кода и показываем его
+                    const qrCodeImg = document.getElementById('qrCodeImg');
+                    if (qrCodeImg) {
+                        qrCodeImg.src = data.qr_code_url;
+                        qrCodeImg.style.display = 'block';
+                    }
+
+                    // Начинаем проверку статуса заявки
+                    const interval = setInterval(() => {
+                        checkVerificationStatus(data.service_request_id, interval);
+                    }, 5000);
+                } else if (data.status === 'existing_request') {
+                    alert(data.message);
+                } else {
+                    alert('Неизвестная ошибка. Пожалуйста, попробуйте снова.');
+                }
+            })
+            .catch(error => {
+                console.error('Ошибка при создании заявки:', error);
+            });
+        });
+    } else {
+        console.error('Не удалось найти элемент с id generateQrButton.');
+    }
+});

smartsoltech/staticfiles/assets/js/verification_status.js

@@ -0,0 +1,37 @@
+// verification-status.js
+
+function checkVerificationStatus(serviceRequestId, interval) {
+    console.log(`Проверка статуса для заявки с ID: ${serviceRequestId}`); // Лог для проверки
+
+    fetch(`/service/request_status/${serviceRequestId}/`)
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('Ошибка при проверке статуса заявки');
+            }
+            return response.json();
+        })
+        .then(data => {
+            if (data.is_verified) {
+                // Закрываем форму и показываем окно подтверждения
+                const serviceModal = document.getElementById('serviceModal');
+                const confirmationModal = document.getElementById('confirmationModal');
+
+                if (serviceModal) {
+                    serviceModal.style.display = 'none';
+                }
+
+                if (confirmationModal) {
+                    confirmationModal.style.display = 'block';
+                }
+
+                // Останавливаем интервал проверки статуса
+                clearInterval(interval);
+            }
+        })
+        .catch(error => {
+            console.error('Ошибка при проверке статуса заявки:', error);
+        });
+}
+
+// Делаем функцию доступной глобально
+window.checkVerificationStatus = checkVerificationStatus;

smartsoltech/staticfiles/manifest.json

@@ -0,0 +1,18 @@
+{
+    "short_name": "sst",
+    "name": "Smartsoltech",
+    "icons": [
+      {
+        "src": "/static/img/photo_2024-10-06_10-06-08.jpg",
+        "type": "image/jpeg",
+        "sizes": "1011x702"
+      },
+      {
+        "src": "/static/img/photo_2024-10-06_10-06-08.jpg",
+        "type": "image/jpeg",
+        "sizes": "1011x702"
+      }
+    ],
+    "start_url": "/",
+    "display": "fullscreen"
+  }