templates/base_site/site/v3/base.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="fa" data-bs-theme="light">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>فروشگاه ساز پوشه</title>
  7.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  8.     <link rel="stylesheet" href="{{ asset('assets/base_site/site/v3/css/style.css') }}?v=3">
  9.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
  11.     <link rel="stylesheet" href="{{ asset('assets/base_site/site/v3/fontawesome/css/font-awesome.min.css') }}">
  12.     <script src="https://unpkg.com/feather-icons"></script>
  13.     <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  14.     {% block header %}{% endblock %}
  15. </head>
  16. <body>
  17. <div class="position-relative">
  18.     <div class="overlay-mask">
  19.     </div>
  20. </div>
  21. <div class="container" id="navbarBack">
  22.     <nav class="navbar navbar-expand-lg position-relative ">
  23.         <div class="container d-flex justify-content-between align-items-center">
  24.             <button class="navbar-toggler ms-2" type="button" id="mobileMenuToggle">
  25.                 <span class="navbar-toggler-icon"></span>
  26.             </button>
  27.             <a class="navbar-brand m-0 d-none d-lg-block" href="#">
  28.                 <img id="logoImage" src="{{ asset('logo.png') }}" alt="Logo" height="50">
  29.             </a>
  30.             <div class="collapse navbar-collapse justify-content-center " id="navbarNav">
  31.                 <ul class="navbar-nav text-center ">
  32.                     <li class="nav-item mx-2"><a class="nav-link" href="{{ path('base_home') }}">صفحه اصلی</a></li>
  33.                     <li class="nav-item mx-2"><a class="nav-link"
  34.                                                  href="#">ویژگی ها</a>
  35.                     </li>
  36.                     <li class="nav-item mx-2"><a class="nav-link" href="#">قیمت
  37.                             گذاری</a></li>
  38.                     <li class="nav-item mx-2"><a class="nav-link" href="#">مقالات</a>
  39.                     </li>
  40.                     <li class="nav-item mx-2"><a class="nav-link"
  41.                                                  href="#">تماس با ما</a>
  42.                     </li>
  43.                 </ul>
  44.             </div>
  45.             <div class="d-flex align-items-center gap-3">
  46.                 <svg id="lightModeButton" class="switch-mode" fill="none" height="16" stroke="#2a85ff"
  47.                      stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="16"
  48.                      xmlns="http://www.w3.org/2000/svg">
  49.                     <circle cx="12" cy="12" r="4"></circle>
  50.                     <path d="M12 2v2"></path>
  51.                     <path d="M12 20v2"></path>
  52.                     <path d="m4.93 4.93 1.41 1.41"></path>
  53.                     <path d="m17.66 17.66 1.41 1.41"></path>
  54.                     <path d="M2 12h2"></path>
  55.                     <path d="M20 12h2"></path>
  56.                     <path d="m6.34 17.66-1.41 1.41"></path>
  57.                     <path d="m19.07 4.93-1.41 1.41"></path>
  58.                 </svg>
  59.                 <svg id="darkModeButton" class="switch-mode" fill="none" height="16" stroke="currentColor"
  60.                      stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="16"
  61.                      xmlns="http://www.w3.org/2000/svg">
  62.                     <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
  63.                 </svg>
  64.                 {% if app.user %}
  65.                     <a href="{{ path('app_user_handler') }}" id="darkModeToggle" class="btn btn-outline-secondary">
  66.                         <span class="font-bold text-white-in-dark">ناحیه مدیریت</span>
  67.                     </a>
  68.                 {% else %}
  69.                     <a href="{{ path('app_register') }}" id="darkModeToggle" class="btn btn-outline-secondary">
  70.                         <span class="font-bold text-white-in-dark">ثبت نام</span>
  71.                     </a>
  72.                     <a href="{{ path('shop_owner_login') }}" id="darkModeToggle" class="btn btn-outline-secondary">
  73.                         <span class="font-bold text-white-in-dark">ورود</span>
  74.                     </a>
  75.                 {% endif %}
  76.             </div>
  77.         </div>
  78.         <div class="mobile-menu position-fixed top-0 start-0 h-100 shadow" id="mobileMenu">
  79.             <ul class="navbar-nav p-4">
  80.                 <li class="nav-item mb-2"><a class="nav-link" href="{{ path('base_home') }}">صفحه اصلی</a></li>
  81.                 <li class="nav-item mb-2"><a class="nav-link" href="#">ویژگی
  82.                         ها</a></li>
  83.                 <li class="nav-item mb-2"><a class="nav-link" href="#">قیمت
  84.                         گذاری</a></li>
  85.                 <li class="nav-item mb-2"><a class="nav-link"
  86.                                              href="#">مقالات</a></li>
  87.                 <li class="nav-item mb-2"><a class="nav-link" href="#">تماس
  88.                         با ما</a></li>
  89.             </ul>
  90.         </div>
  91.         <div id="mobileOverlay" class="position-fixed top-0 start-0 w-100 h-100 bg-dark opacity-50"></div>
  92.     </nav>
  93. </div>
  94. {% block body %}{% endblock %}
  95. {{ include('@BaseSiteV3/modules/footer.html.twig') }}
  96. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  97. <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  98. {#<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/js/all.min.js"></script>#}
  99. <script>
  100.     feather.replace();
  101. </script>
  102. <script>
  103.     {# $('.switch-mode').click(function () { #}
  104.     {#    let html = document.documentElement; #}
  105.     {#    if (html.getAttribute("data-bs-theme") === "dark") { #}
  106.     {#        // light mode #}
  107.     {#        html.setAttribute("data-bs-theme", "light"); #}
  108.     {#        $('#lightModeButton').show() #}
  109.     {#        $('#darkModeButton').hide() #}
  110.     {#        $('#logoImage').attr('src', '{{ asset('logo.png') }}') #}
  111.     {#        $('#logoFooter').attr('src', '{{ asset('logo.png') }}') #}
  112.     {#        $('#documentationImage').attr('src', '{{ asset('assets/base_site/site/v3/img/documentation.png') }}') #}
  113.     {#        $('.arrange-image').attr('src', '{{ asset('assets/base_site/site/v3/img/collapsible.png') }}') #}
  114.     {#        $('.tab-image').attr('src', '{{ asset('assets/base_site/site/v3/img/dashboardEcommerce.png') }}') #}
  116.     {#    } else { #}
  117.     {#        //dark mode #}
  118.     {#        html.setAttribute("data-bs-theme", "dark"); #}
  119.     {#        $('#darkModeButton').show() #}
  120.     {#        $('#lightModeButton').hide() #}
  121.     {#        $('#logoImage').attr('src', '{{ asset('logo-dark.png') }}') #}
  122.     {#        $('#logoFooter').attr('src', '{{ asset('logo-dark.png') }}') #}
  123.     {#        $('#heroImg').attr('src', '{{ asset('assets/base_site/site/v3/img/hero-dark.png') }}') #}
  124.     {#        $('#documentationImage').attr('src', '{{ asset('assets/base_site/site/v3/img/documentation-dark.png') }}') #}
  125.     {#        $('.arrange-image').attr('src', '{{ asset('assets/base_site/site/v3/img/documentation-dark.png') }}') #}
  126.     {#        $('.tab-image').attr('src', '{{ asset('assets/base_site/site/v3/img/productCreate-dark.png') }}') #}
  127.     {#    } #}
  128.     {# }); #}
  129.     function applyTheme(theme) {
  130.         let html = document.documentElement;
  131.         if (theme === "dark") {
  132.             html.setAttribute("data-bs-theme", "dark");
  133.             $('#darkModeButton').show()
  134.             $('#lightModeButton').hide()
  135.             $('#logoImage').attr('src', '{{ asset('logo-dark.png') }}')
  136.             $('#logoFooter').attr('src', '{{ asset('logo-dark.png') }}')
  137.             $('#heroImg').attr('src', '{{ asset('assets/base_site/site/v3/img/hero-dark.png') }}')
  138.             $('#documentationImage').attr('src', '{{ asset('assets/base_site/site/v3/img/documentation-dark.png') }}')
  139.             $('.arrange-image').attr('src', '{{ asset('assets/base_site/site/v3/img/documentation-dark.png') }}')
  140.             $('.tab-image').attr('src', '{{ asset('assets/base_site/site/v3/img/productCreate-dark.png') }}')
  141.         } else {
  142.             html.setAttribute("data-bs-theme", "light");
  143.             $('#lightModeButton').show()
  144.             $('#darkModeButton').hide()
  145.             $('#logoImage').attr('src', '{{ asset('logo.png') }}')
  146.             $('#logoFooter').attr('src', '{{ asset('logo.png') }}')
  147.             $('#documentationImage').attr('src', '{{ asset('assets/base_site/site/v3/img/documentation.png') }}')
  148.             $('.arrange-image').attr('src', '{{ asset('assets/base_site/site/v3/img/collapsible.png') }}')
  149.             $('#heroImg').attr('src', '{{ asset('assets/base_site/site/v3/img/hero.png') }}')
  150.             $('.tab-image').attr('src', '{{ asset('assets/base_site/site/v3/img/dashboardEcommerce.png') }}')
  151.         }
  152.     }
  154.     // وقتی کاربر روی تغییر حالت کلیک می‌کنه
  155.     $('.switch-mode').click(function () {
  156.         let currentTheme = document.documentElement.getAttribute("data-bs-theme");
  157.         let newTheme = currentTheme === "dark" ? "light" : "dark";
  159.         // تم جدید رو اعمال کن
  160.         applyTheme(newTheme);
  162.         // ذخیره در localStorage
  163.         localStorage.setItem("theme", newTheme);
  164.     });
  165.     // هنگام لود صفحه بررسی کن که قبلا کاربر چیزی انتخاب کرده یا نه
  166.     document.addEventListener("DOMContentLoaded", function () {
  167.         let savedTheme = localStorage.getItem("theme") || "light";
  168.         applyTheme(savedTheme);
  169.     });
  170. </script>
  171. <script>
  172.     // jQuery
  173.     $(document).ready(function () {
  174.         const spans = $("#typing-header span");
  175.         let index = 0;
  176.         const speed = 70; // سرعت تایپ هر کلمه
  178.         function typeWord() {
  179.             if (index < spans.length) {
  180.                 const currentSpan = spans.eq(index);
  182.                 // ظاهر شدن کلمه
  183.                 currentSpan.css("opacity", 1);
  185.                 // بلور پویا
  186.                 let blurValue = 5; // مقدار بلور اولیه
  187.                 const blurInterval = setInterval(() => {
  188.                     blurValue -= 0.5; // کاهش تدریجی بلور
  189.                     if (blurValue <= 0) {
  190.                         blurValue = 0;
  191.                         clearInterval(blurInterval);
  192.                     }
  193.                     currentSpan.css("filter", `blur(${blurValue}px)`);
  194.                 }, 50);
  196.                 index++;
  197.                 setTimeout(typeWord, speed);
  198.             }
  199.         }
  201.         typeWord();
  203.         const $menu = $("#mobileMenu");
  204.         const $overlay = $("#mobileOverlay");
  206.         // باز و بسته کردن منو و overlay با همبرگر
  207.         $("#mobileMenuToggle").click(function (e) {
  208.             e.stopPropagation(); // جلوگیری از انتشار کلیک
  209.             $menu.toggleClass("active");
  210.             $overlay.toggleClass("active");
  211.         });
  213.         // بستن منو با کلیک روی overlay
  214.         $overlay.click(function () {
  215.             $menu.removeClass("active");
  216.             $overlay.removeClass("active");
  217.         });
  219.         // بستن منو با کلیک روی فضای خالی داخل منو (نه روی لینک‌ها)
  220.         $menu.click(function (e) {
  221.             if (e.target === this) { // اگر خود div منو کلیک شده
  222.                 $menu.removeClass("active");
  223.                 $overlay.removeClass("active");
  224.             }
  225.         });
  227.         const $navbar = $("#navbarBack"); // کلاس Navbar
  228.         const scrollOffset = 100; // مقدار اسکرول برای اعمال افکت
  230.         $(window).scroll(function () {
  231.             if ($(window).scrollTop() > scrollOffset) {
  232.                 $navbar.addClass("navbar-scrolled");
  233.             } else {
  234.                 $navbar.removeClass("navbar-scrolled");
  235.             }
  236.         });
  239.         $(".change-color").on("click", function () {
  240.             $(".change-color").removeClass("active");
  241.             $(this).addClass("active");
  242.         });
  244.         const $hoverBox = $(".hover-box");
  245.         const $cards = $(".tech-box");
  246.         const $wrapper = $(".tech-wrapper");
  248.         $cards.on("mouseenter", function () {
  249.             const cardOffset = $(this).offset();
  250.             const wrapperOffset = $wrapper.offset();
  251.             const width = $(this).outerWidth();
  252.             const height = $(this).outerHeight();
  254.             const left = cardOffset.left - wrapperOffset.left;
  255.             const top = cardOffset.top - wrapperOffset.top;
  257.             $hoverBox.css({
  258.                 width: width,
  259.                 height: height,
  260.                 transform: `translate(${left}px, ${top}px)`,
  261.                 opacity: 1
  262.             });
  263.         });
  265.         $cards.on("mouseleave", function () {
  266.             $hoverBox.css({opacity: 0});
  267.         });
  270.     });
  271. </script>
  272. {% block footer %}{% endblock %}
  273. </body>
  274. </html>