templates/modul/index.html.twig line 1

Open in your IDE?
  1. {% extends 'siteBase.html.twig' %}
  2. {# Sayfa İstekleri #}
  3. {% set sBoyutlar = 'slider'|ayarlar|split('X') %}
  4. {% set sliders = ''|site_sliders %}
  7. {% block dil %}{{ app.session.get('dil')['kisa'] }}{% endblock %} {# tr or en #}
  8. {% block title %}{{ 'title'|ayarlar(app.session.get('dil')['id']) }}{% endblock %}
  9. {% block keywords %}{{ 'keywords'|ayarlar(app.session.get('dil')['id']) }}{% endblock %}
  10. {% block description %}{{ 'description'|ayarlar(app.session.get('dil')['id']) }}{% endblock %}
  12. {% block title2 %}{{ 'title'|ayarlar(app.session.get('dil')['id']) }}{% endblock %}
  13. {% block description2 %}{{ 'description'|ayarlar(app.session.get('dil')['id']) }}{% endblock %}
  14. {% block image_alt %}{{ 'title'|ayarlar(app.session.get('dil')['id']) }}{% endblock %}
  15. {% block title3 %}{{ 'title'|ayarlar(app.session.get('dil')['id']) }}{% endblock %}
  16. {% block description3 %}{{ 'description'|ayarlar(app.session.get('dil')['id']) }}{% endblock %}
  17. {% block image %}{{ 'siteYolu'|ayarlar~'storage/logo.webp' }}{% endblock %}
  18. {% block image2 %}{{ 'siteYolu'|ayarlar~'storage/logo.webp' }}{% endblock %}
  19. {% block body %}
  20.  
  21.   {#
  22. -- Slider : "sliders" adında bir dizide döndürülmektedir. Dizinin "baslik, aciklama, resim" değişkenleri bulunuyor. Bu bilgiler ile kodlamayınız.
  25. ----------------------------------------------------
  26. #}
  27.     <style>
  28.         .astro-bg {
  29.             position: relative;
  30.             background: linear-gradient(135deg, #1e0f3a 0%, #4b1f6f 45%, #7b2cbf 100%);
  31.             overflow: hidden;
  32.         }
  34.         .astro-bg::before {
  35.             content: "";
  36.             position: absolute;
  37.             inset: 0;
  38.             background-image:
  39.                     radial-gradient(2px 2px at 20px 30px, white, transparent),
  40.                     radial-gradient(2px 2px at 80px 120px, white, transparent),
  41.                     radial-gradient(2px 2px at 150px 60px, white, transparent),
  42.                     radial-gradient(2px 2px at 200px 200px, white, transparent),
  43.                     radial-gradient(2px 2px at 300px 80px, white, transparent),
  44.                     radial-gradient(2px 2px at 400px 150px, white, transparent);
  45.             background-repeat: repeat;
  46.             background-size: 400px 400px;
  47.             opacity: 0.6;
  48.             animation: starsMove 60s linear infinite;
  49.             z-index: 1;
  50.         }
  51.         .astro-bg::after {
  52.             content: "";
  53.             position: absolute;
  54.             inset: 0;
  55.             background-image: radial-gradient(1px 1px at 50px 50px, #fff, transparent);
  56.             background-size: 200px 200px;
  57.             opacity: 0.4;
  58.             z-index: 1;
  59.         }
  61.         @keyframes starsMove {
  62.             from {
  63.                 transform: translateY(0);
  64.             }
  65.             to {
  66.                 transform: translateY(-400px);
  67.             }
  68.         }
  69.     </style>
  70.     <!-- Hero with search form and slider -->
  71.     <section class="py-5 astro-bg" >
  72.         <div class="container py-sm-2 py-md-3 py-lg-4 py-xl-5" style="position: relative; z-index: 2">
  73.             <div class="row align-items-center justify-content-center">
  74.                 <div class="col-md-7 mb-5 mb-md-0">
  75.                     <h1 class="display-3 text-white text-center text-md-start pb-sm-2 pb-md-3 pb-lg-0 pb-xxl-3 mb-4 mb-lg-5">Sana nasıl yardımcı olabilirim?</h1>
  77.                     <!-- Search form -->
  78.                     <form class="bg-white border rounded p-2" data-bs-theme="light">
  79.                         <div class="d-flex flex-column flex-lg-row gap-2 p-1">
  80.                             <div class="d-flex flex-column flex-sm-row w-100 gap-2 gap-sm-3">
  81.                                 <div class="position-relative w-100" >
  82.                                     <i class="fi-arrow-down-right position-absolute top-50 start-0 translate-middle-y z-1 fs-xl text-secondary-emphasis ms-2"></i>
  83.                                     <select class="form-select form-select-lg form-icon-start border-0" id="konu" data-select='{
  84.                         "classNames": {
  85.                           "containerInner": ["form-select", "form-select-lg", "form-icon-start", "border-0"]
  86.                         },
  87.                         "searchEnabled": true
  88.                       }' aria-label="Location select" required onchange="$('.ss').fadeOut(0);$('#tur').val('');if(this.value==''){return;}if(this.value=='Aşk'){$('.ozelSecim').fadeIn(0);}else{$('.ozelSecim2').fadeIn(0);}">
  89.                                         <option value="">Konu</option>
  90.                                         <option value="Aşk">Aşk</option>
  91.                                         <option value="Genel Konular">Genel Konular</option>
  92.                                     </select>
  93.                                 </div>
  95.                                 <hr class="d-sm-none m-0">
  96.                                 <hr class="vr d-none d-sm-block my-2">
  97.                                 <div class="position-relative w-100">
  98.                                     <i class="fi-user-check position-absolute top-50 start-0 translate-middle-y z-1 fs-xl text-secondary-emphasis ms-2"></i>
  99.                                     <select class="form-select form-select-lg form-icon-start border-0" id="tur" data-select='{
  100.                         "classNames": {
  101.                           "containerInner": ["form-select", "form-select-lg", "form-icon-start", "border-0"]
  102.                         },
  103.                         "searchEnabled": true
  104.                       }' aria-label="Location select" required>
  105.                                         <option value="">Tür</option>
  106.                                         <option value="Belirli bir kişi" class="ss ozelSecim" style="display: none;">Belirli bir kişi</option>
  107.                                         <option value="Diğer" class="ss ozelSecim" style="display: none;">Diğer</option>
  108.                                         <option value="Tüm Paketler" class="ss ozelSecim2" style="display: none;">Tüm Paketler</option>
  109.                                     </select>
  110.                                 </div>
  111.                             </div>
  112.                             <button type="button" class="btn btn-lg btn-primary">Ara</button>
  113.                         </div>
  114.                     </form>
  117.                 </div>
  120.                 <!-- Slider -->
  121.                 <div class="col-10 col-sm-7 col-md-5 col-xl-4 offset-xl-1">
  122.                     <div class="ps-md-4 ps-xl-0">
  123.                         <div class="position-relative">
  124.                             <div class="swiper" data-swiper='{
  125.                     "effect": "creative",
  126.                     "speed": 450,
  127.                     "allowTouchMove": false,
  128.                     "autoplay": {
  129.                       "delay": 6500,
  130.                       "disableOnInteraction": false
  131.                     },
  132.                     "creativeEffect": {
  133.                       "prev": {
  134.                         "shadow": true,
  135.                         "translate": ["-20%", 0, -1]
  136.                       },
  137.                       "next": {
  138.                         "translate": ["100%", 0, 0]
  139.                       }
  140.                     },
  141.                     "thumbs": {
  142.                       "swiper": "#thumbs"
  143.                     }
  144.                   }' style="-webkit-clip-path: url(#mask); clip-path: url(#mask)">
  145.                                 <div class="swiper-wrapper">
  146.                                     {% for slider in sliders %}
  148.                                     <div class="swiper-slide">
  149.                                         <div class="ratio" style="--fn-aspect-ratio: calc(344 / 416 * 100%)">
  150.                                             {{ slider.resim|imgOlustur('',0,'cover')|raw }}
  151.                                         </div>
  152.                                     </div>
  154.                                     {% endfor %}
  156.                                 </div>
  157.                             </div>
  158.                             <svg class="position-absolute" xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 416 344" fill="none">
  159.                                 <defs>
  160.                                     <clipPath id="mask" clipPathUnits="objectBoundingBox" transform="scale(0.0024, 0.0029)">
  161.                                         <path d="M298.045 0.00804178C263.343 -0.177193 230.353 15.0453 208 41.558C185.786 14.8641 152.705 -0.40169 117.954 0.00804178C52.8095 0.00804178 0 52.7547 0 117.821C0 229.325 194.835 338.197 202.734 342.405C205.921 344.532 210.078 344.532 213.266 342.405C221.165 338.197 416 230.902 416 117.821C416 52.7547 363.19 0.00804178 298.045 0.00804178Z"/>
  162.                                     </clipPath>
  163.                                 </defs>
  164.                             </svg>
  165.                         </div>
  166.                         <div class="mx-auto" style="max-width: 382px">
  167.                             <div class="swiper swiper-load swiper-thumbs py-4 px-4 mt-2" id="thumbs" data-swiper='{
  168.                     "spaceBetween": 24,
  169.                     "slidesPerView": 3,
  170.                     "watchSlidesProgress": true,
  171.                     "breakpoints": {
  172.                       "500": {
  173.                         "spaceBetween": 32
  174.                       }
  175.                     }
  176.                   }' style="--swiper-thumbnail-border-color: rgba(255,255,255, .4); --swiper-thumbnail-active-border-color: var(--fn-info)">
  177.                                 <div class="swiper-wrapper">
  178.                                     {% for slider in sliders %}
  179.                                     <div class="swiper-slide swiper-thumb rounded-circle p-2">
  180.                                         <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
  181.                                             {{ slider.resim|imgOlustur('',0,'cover')|raw }}
  182.                                         </div>
  183.                                         <div class="position-absolute top-50 start-50 translate-middle d-flex align-items-center justify-content-center opacity-0" style="width: 150%; height: 150%">
  184.                                             <svg class="animate-spin" width="144" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="animation-duration: 22s">
  185.                                                 <path id="circlePath" fill="none" d="M 10, 50a 40,40 0 1,1 80,0a 40,40 0 1,1 -80,0"/>
  186.                                                 <text id="text" font-size="9.4" fill="rgba(255,255,255, .65)" style="letter-spacing: -.05">
  187.                                                     <textPath id="textPath" href="#circlePath">{{ slider.baslik|default('') }}</textPath>
  188.                                                 </text>
  189.                                             </svg>
  190.                                         </div>
  191.                                     </div>
  192.                                     {% endfor %}
  194.                                 </div>
  195.                             </div>
  196.                         </div>
  197.                     </div>
  198.                 </div>
  199.             </div>
  200.         </div>
  201.     </section>
  203.     <section class="container pt-2 pt-sm-3 pt-md-4 pt-lg-5 pb-5 my-xxl-3">
  204.         <h2 class="h1 pt-1 pt-sm-2 pt-lg-0 pb-md-2 pb-lg-3 pb-xl-0 mb-sm-4 mb-xl-5" style="max-width: 525px">{{ veriler[3][0].adi }}</h2>
  205.         <div class="row">
  206.             <div class="col-md-6">
  207.                 <div class="position-relative w-100 h-100 bg-body-tertiary rounded overflow-hidden" style="max-width: 564px">
  208.                     <img src="assets/img/about/v1/account-cta.jpg" class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover" alt="Image">
  209.                 </div>
  210.             </div>
  212.             <!-- Accordion + CTA button -->
  213.             <div class="col-md-6">
  215.             </div>
  216.         </div>
  217.     </section>
  220.     {#
  222. <section class="bg-[#131313] w-full h-[900px]  lg:h-[680px]
  223.              md:h-[600px] sm:h-[500px]  relative z-[1] overflow-hidden">
  224.     <div class="swiper-container w-full h-full absolute left-0 top-0">
  225.         <div class="swiper-wrapper">
  226.             {% for slider in sliders %}
  227.                 <div class="swiper-slide">
  228.                     <div class="slide-inner slide-bg-image" data-background="{{ path('panel_storage',{'file': slider.resim}) }}">
  229.                         <!-- <div class="gradient-overlay"></div> -->
  230.                         <div class="wraper">
  231.                             <div class="relative h-[900px] lg:h-[680px]  md:h-[600px] sm:h-[500px]">
  232.                                 <div
  233.                                         class="max-w-[550px] lg:w-[600px] md:w-full  absolute top-1/2 left-0 transform  -translate-y-1/2">
  235.                                     <div data-swiper-parallax="200" class="wpo-hero-title-top">
  236.                                             <span
  237.                                                     class="text-[22px] col:text-[18px] text-[#e4e4e4] font-heading-font">{{ 'siteAdi'|ayarlar }}</span>
  238.                                     </div>
  239.                                     <div data-swiper-parallax="300" class="slide-title">
  240.                                         <h2
  241.                                                 class="text-[70px] font-black leading-[90px] mt-[10px] mb-[25px] lg:text-[50px] md:text-[40px] md:leading-[55px] col:text-[30px] col:leading-[35px] text-white">
  242.                                             {{ slider.baslik }}</h2>
  243.                                     </div>
  244.                                     <div data-swiper-parallax="400" class="slide-text">
  245.                                         <p class="text-[25px] text-white font-heading-font
  246.                                                                         leading-[35px]
  247.                                                 max-w-[500px] pl-[20px] border-l-[2px]
  248.                                                 border-l-white mb-[60px]
  249.                                                 md:text-[18px] col:leading-[22px]
  250.                                                 col:mb-[30px]">
  251.                                             {{ slider.aciklama }}</p>
  252.                                     </div>
  254.                                     <div data-swiper-parallax="500" class="slide-btn">
  255.                                         <!-- Buton kaldırıldı -->
  256.                                     </div>
  257.                                 </div>
  258.                             </div>
  259.                         </div>
  260.                     </div> <!-- end slide-inner -->
  261.                 </div> <!-- end swiper-slide -->
  262.             {% endfor %}
  264.         </div>
  265.         <!-- end swiper-wrapper -->
  267.         <!-- swipper controls -->
  268.         <div class="swiper-pagination"></div>
  269.         <div class="swiper-button-next"></div>
  270.         <div class="swiper-button-prev"></div>
  271.     </div>
  272.     <!-- end of wpo-hero-slide-section-->
  273. </section>
  274. #}
  276. {#
  277. -- Site Sayfa Verileri : "veriler[3]" adında bir dizi döndürülüyor. 0. elemanı sayfa bilgilerini içerir. 1 elemanı dizidir. Ve sayfa içeriğini döndürür. Bu bilgilere göre kodlama yapınız.  
  278. -- Modül alanları : baslik, metin, resim
  279. ** Resimleri çekerken sadece "ornek.jpg|imgOlustur(100,10,'cover')" filtresini kullanmalısın. Bu filtre şu özelliğe sahitir; "ornek.jpg|imgOlustur(yükseklik,radius,'cover/contain')"
  281. ----------------------------------------------------
  282. #}
  285. {#
  286. -- Site Sayfa Verileri : "veriler[4]" adında bir dizi döndürülüyor. 0. elemanı sayfa bilgilerini içerir. 1 elemanı dizidir. Ve sayfa içeriğini döndürür. Bu bilgilere göre kodlama yapınız.  
  287. -- Modül alanları : seourl, sayfabaşlığı, anahtarkelimeler, sayfaaçıklaması, adı, metin, resimler, fiyat, kişidenistenenalanlar
  288. ** Resimleri çekerken sadece "ornek.jpg|imgOlustur(100,10,'cover')" filtresini kullanmalısın. Bu filtre şu özelliğe sahitir; "ornek.jpg|imgOlustur(yükseklik,radius,'cover/contain')"
  290. ----------------------------------------------------
  291. #}
  294. {#
  295. -- Site Sayfa Verileri : "veriler[7]" adında bir dizi döndürülüyor. 0. elemanı sayfa bilgilerini içerir. 1 elemanı dizidir. Ve sayfa içeriğini döndürür. Bu bilgilere göre kodlama yapınız.  
  296. -- Modül alanları : soru, cevap
  297. ** Resimleri çekerken sadece "ornek.jpg|imgOlustur(100,10,'cover')" filtresini kullanmalısın. Bu filtre şu özelliğe sahitir; "ornek.jpg|imgOlustur(yükseklik,radius,'cover/contain')"
  299. ----------------------------------------------------
  300. #}
  304.                     
  305.                     {% endblock %}
  306. {% block javascripts %}{% endblock %}