templates/pages/homepage.html.twig line 40

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  4. {% block content %}
  6.     <!-- Load Facebook SDK for JavaScript -->
  7.     <div id="fb-root"></div>
  8.     <script>
  9.         (function(d, s, id) {
  10.             var js, fjs = d.getElementsByTagName(s)[0];
  11.             if (d.getElementById(id)) return;
  12.             js = d.createElement(s); js.id = id;
  13.             js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0";
  14.             fjs.parentNode.insertBefore(js, fjs);
  15.         }(document, 'script', 'facebook-jssdk'));
  16.     </script>
  17.        <div class="container container-home">
  18.             {% for message in app.flashes('success') %}
  19.                 <div class="alert alert-success alert-dismissible alert-success-journal w-100 mx-auto d-flex p-2 mb-4" role="alert">
  20.                     <span class="">{{ message }}</span>
  21.                     <span type="button" class="close position-static ml-auto" data-dismiss="alert" aria-label="Close" style="padding: 0 !important;"><span aria-hidden="true">&times;</span></span>
  22.                 </div>
  23.             {% endfor %}
  24.            {% for message in app.flashes('warning') %}
  25.                <div class="alert alert-warning alert-dismissible alert-warning-journal w-100 mx-auto d-flex p-2 mb-4" role="alert">
  26.                    <span class="">{{ message }}</span>
  27.                    <span type="button" class="close position-static ml-auto" data-dismiss="alert" aria-label="Close" style="padding: 0 !important;"><span aria-hidden="true">&times;</span></span>
  28.                </div>
  29.            {% endfor %}
  30.            {% for message in app.flashes('error') %}
  31.                <div class="alert alert-error alert-dismissible alert-error-journal w-100 mx-auto d-flex p-2 mb-4" role="alert">
  32.                    <span class="">{{ message }}</span>
  33.                    <span type="button" class="close position-static ml-auto" data-dismiss="alert" aria-label="Close" style="padding: 0 !important;"><span aria-hidden="true">&times;</span></span>
  34.                </div>
  35.            {% endfor %}
  36.             {% include 'pages/parts/form-search.html.twig' %}
  37.             <div class="page-content">
  38.                 {{ render(path('latestJournals')) }}
  39.                <div class="page-title">
  40.                    <h2>Find Journals or Authors</h2>
  41.                    <p>
  42.                         Your research is easier with a journal that you can save.
  43.                         Follow the author to stay up-to-date on new articles as they are published!
  44.                    </p>
  45.                </div>
  48.                <div class="row icons-homepage px-1 mx-0">
  50.                    <div class="col-md-3 block-intro">
  51.                        <a href="{{ path('journalSearch') }}" >
  52.                            <img class="img-fluid logo-gj" src="{{ asset('assets/images/refonte/homepage/search.svg') }}" alt="researchguide"  />
  53.                            <h5>Journal Search</h5>
  54.                            <p>Find the best journal for your research, depending on various criteria (Title, article keywords).</p>
  55.                        </a>
  56.                    </div>
  59.                    <div class="col-md-3 block-intro">
  60.                        <a href="{{ path('get_authors') }}">
  61.                            <img class="img-fluid logo-gj" src="{{ asset('assets/images/refonte/homepage/lamp.svg') }}" alt="researchguide"  />
  62.                            <h5>Author Search</h5>
  63.                            <p> Find your authors with their published articles and corresponding journals.</p>
  64.                        </a>
  65.                    </div>
  67.                    <div class="col-md-3 block-intro">
  68.                        <a href="{{ path('registre_user') }}" >
  69.                            <img class="img-fluid logo-gj" src="{{ asset('assets/images/refonte/homepage/save_icon.svg') }}" alt="researchguide"  />
  70.                            <h5>Save journal </h5>
  71.                            <p>Save your favorite journals for easy reference. Stay up-to-date on recent and updated journals.</p>
  72.                        </a>
  73.                    </div>
  74.                    <div class="col-md-3 block-intro">
  75.                        <a href="{{ path('registre_user') }}">
  76.                            <img class="img-fluid logo-gj" src="{{ asset('assets/images/refonte/homepage/follow_author_icon.svg') }}" alt="researchguide"  />
  77.                            <h5>Follow author </h5>
  78.                            <p>Follow your author to receive new journals and latest journal developments in your field.</p>
  79.                        </a>
  80.                    </div>
  81.                </div>
  83.                <div class="row description-block  mx-0">
  84.                    <div class="col-md-6 right-content">
  85.                        <h5>Find your Journal easily</h5>
  86.                        <p class="paragraphe">You can choose to filter by Author or Journal title in order to find the perfect fit for your needs! </p>
  87.                        <div class="row check-bloc">
  88.                            <div class="col-2 col-md-2 img-check">
  89.                                <img class="img-fluid" src="{{ asset('assets/images/refonte/homepage/Author.svg') }}" alt="researchguide"  />
  90.                            </div>
  91.                            <div class="col-10 col-md-10">
  92.                                <p class="check-bloc-title">Search for a Journal by title or related keywords.</p>
  93.                                <p class="check-bloc-text"></p>
  94.                            </div>
  95.                        </div>
  96.                        <div class="row check-bloc">
  97.                            <div class="col-2 col-md-2 img-check">
  98.                                <img class="img-fluid" src="{{ asset('assets/images/refonte/homepage/Author.svg') }}" alt="researchguide"  />
  99.                            </div>
  100.                            <div class="col-10 col-md-10">
  101.                                <p class="check-bloc-title">Search for the author's name to find their publications</p>
  102.                                <p class="check-bloc-text"></p>
  103.                            </div>
  104.                        </div>
  105.                        {% if app.user== null %}
  106.                            <div class="row block-connexion">
  107.                                <div class="col-md-5 p-0">
  108.                                    <a href="{{ path('journalSearch')}}">
  109.                                        <button class="btn btn-connexion btn-journal btn-block">Find a Journal</button>
  110.                                    </a>
  111.                                </div>
  112.                                <div class="col-md-5 pl-3" >
  113.                                    <a href="{{ path('get_authors')}}">
  114.                                        <button class="btn btn-connexion btn-author btn-block">Find an Author</button>
  115.                                    </a>
  116.                                </div>
  117.                            </div>
  118.                        {% endif %}
  119.                    </div>
  120.                    <div class="col-md-6 left-content find-journal-bg" style="background: url({{ asset("assets/images/desk-rg.webp") }})">
  121.                        <div class="row">
  122.                            <div class="col-md-6 img-sample">
  123.                               {#<img class="img-fluid" src="{{ asset('assets/images/refonte/homepage/sample.svg') }}" alt="GuideJournal"  />#}
  124.                            </div>
  125.                            <div class="col-md-6 img-sample">
  126.                                {#<img class="img-fluid" src="{{ asset('assets/images/refonte/homepage/sample.svg') }}" alt="GuideJournal"  />#}
  127.                            </div>
  128.                        </div>
  129.                    </div>
  130.                </div>
  131.                {#<div class="container my-5 ad-banner">
  132.                     researchguide ad
  133.                     <ins class="adsbygoogle"
  134.                         style="display:block"
  135.                         data-ad-client="ca-pub-9897811061542650"
  136.                         data-ad-slot="3798275752"
  137.                         data-ad-format="auto"
  138.                         data-full-width-responsive="true"></ins>
  139.                     <script>
  140.                         (adsbygoogle = window.adsbygoogle || []).push({});
  141.                     </script>
  142.                </div>#}
  143.                <div class="row recent-articles mx-0" style="padding-top:10%">
  144.                    <div class="col-md-12 last-articles">
  145.                        <h5 class="title">Blog Posts</h5>
  146.                    </div>
  147.                    <div class="col-md-6 left-content"><p>Browse the latest Articles</p></div>
  148.                        <div class="container c-carousel">
  149.                            <div class="row row-carousel">
  150.                                <div class="col-md-12 col-carousel mb-4">
  151.                                    <div class="carousel-articles">
  152.                                        {% set articles= [] %}
  153.                                        {% for post in posts %}
  154.                                            <div class="col-md-4 article-infos">
  155.                                                {% if post.image %}
  156.                                                    {% set media = post.image ?  post.image.filePath : null  %}
  158.                                                    {% if media and  media is not null %}
  159.                                                        <a href="{{ path('blog_post',{'slug':post.slug}) }}">
  160.                                                            <img class="card-img-top" data-src="{{ asset('uploads/blog/' ~ media)  }}" src="{{ asset('uploads/blog/' ~ media)  }}" data-holder-rendered="true" alt="{{ post.title }}">
  161.                                                        </a>
  162.                                                    {% else %}
  163.                                                        <a href="{{ path('blog_post',{'slug':post.slug}) }}">
  164.                                                            <img class="card-img-top img-responsive" data-src="{{ asset('assets/images/refonte/homepage/article.svg') }}" src="{{ asset('assets/images/refonte/homepage/article.svg') }}" data-holder-rendered="true" alt="{{ post.title }}">
  165.                                                        </a>
  166.                                                    {% endif %}
  167.                                                {% else %}
  168.                                                    <a href="{{ path('blog_post',{'slug':post.slug}) }}">
  169.                                                        <img class="card-img-top" data-src="{{ asset('assets/images/refonte/homepage/article.svg') }}" src="{{ asset('assets/images/refonte/homepage/article.svg') }}" data-holder-rendered="true" alt="researchguide">
  170.                                                    </a>
  171.                                                {% endif %}
  173.                                             <div class="fav-img">
  174.                                                 <a href="{{ path('blog_post',{'slug':post.slug}) }}"> <img class="img-fluid" src="{{ asset('assets/images/refonte/homepage/favoris.svg') }}" alt="researchguide"  /></a>
  175.                                             </div>
  176.                                             <div class="content">
  177.                                                 <h6 class="title-article"> <a href="{{ path('blog_post',{'slug':post.slug}) }}">{{ post.title }}</a></h6>
  178.                                                     <p>
  179.                                                         {{ post.content|slice(0,60)|raw  }}...   <br><a href="{{ path('blog_post',{'slug':post.slug}) }}" style="float: right;font-weight: 400" class="text-warning">Read More →</a>
  180.                                                     </p>
  181.                                             </div>
  182.                                         </div>
  183.                                     {% endfor %}
  184.                                 </div>
  185.                             </div>
  186.                         </div>
  187.                     </div>
  189.             </div>
  192.             
  193.         </div>
  194.     </div>
  196.         {# should check if !catgories  #}
  197.     {% if app.user and app.user.categories.values is empty and app.request.cookies.get('skip-categories') != "true" %}
  198.         <form action="{{ path('save_favorite_categories') }}" method="post">
  199.             <div id="choose-categories-modal" class="modal registre-modal" style="display:flex; z-index: 100;">
  200.                 <div class="modal-content animate register-modal-content p-3" style="box-shadow: none !important;border: 0 !important;">
  201.                     <span class="close skip-check-categories d-flex justify-content-end" title="Close Modal" style="margin-left:0 !important;left:20px;top:20px;cursor: pointer;">
  202.                         <svg width="35" height="35" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg" style="float: right">
  203.                             <path fill-rule="evenodd" clip-rule="evenodd" d="M21.4898 25.1794L0.521973 46.1519L4.0579 49.687L25.0249 28.7154L45.9919 49.687L49.5279 46.1519L28.5601 25.1794L49.5279 4.20702L45.9919 0.671875L25.0249 21.6435L4.0579 0.671875L0.521973 4.20702L21.4898 25.1794Z" fill="#58595B"/>
  204.                         </svg>
  205.                     </span>        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  207.                     <h2 class="skip-check-categories modal-register-title w-100 mx-0 text-center my-2" style="margin-top: 60px; color:black">
  208.                         Select your favorite categories:
  209.                     </h2>
  210.                     <p class="text-center"> <i>This help us recommend the most useful journals</i></p>
  211.                     <div id="register-step-2" style="">
  212.                         <div class="d-flex flex-wrap register-categories">
  213.                             {% set categories = publicationManager.getAllCategories()  %}
  214.                             {% for category in categories|sort((a, b) => a.name <=> b.name) %}
  215.                                 {% if category.name != '' and category.name != ' ' %}
  216.                                     <div class="category-item">
  217.                                         <svg xmlns="http://www.w3.org/2000/svg" style="display:none" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"/></svg>
  218.                                         <span id="{{ category.id }}">{{category.name}}</span>
  219.                                     </div>
  220.                                 {% endif %}
  222.                             {% endfor %}
  223.                         </div>
  224.                     </div>
  225.                     <div class="d-flex px-4 px-sm-5 my-2">
  226.                         <input type="hidden" id="selected-categories" name="selected-categories">
  227.                         <button type="submit" id="register-btn-2" class="btn form-register-btn mx-auto mt-0" style=" width: 100% !important;" disabled>
  228.                             <p id="register-btn-text" class="form-register-btn-text my-auto">Validate</p>
  229.                         </button>
  230.                     </div>
  231.                     <br><a  href="/" class="skip-check-categories text-center form-register-btn-text my-auto text-dark"  style="font-weight: 300 !important;width: 100% !important;">Skip</a>
  232.                 </div>
  233.             </div>
  234.         </form>
  236.     {% endif %}
  239.     <div class="container-fluid container-banner">
  240.         <div class="banner py-5">
  241.             <h6 class="pt-0">Trusted by great companies</h6>
  242.             <div class="container">
  243.             <div class="row partenaires">
  244.                 <div class="col-sm-4 mt-4 mt-lg-0">
  245.                     <a href="https://monarkit.net" target="_blank"><img class="img-fluid" src="{{ asset('assets/images/refonte/homepage/monark.svg') }}" alt="monarkIt"  /></a>
  246.                 </div>
  247.                 <div class="col-sm-4 mt-4 mt-lg-0">
  248.                     <a href="https://aion-lab.com" target="_blank"><img class="img-fluid" src="{{ asset('assets/images/refonte/homepage/aion.svg') }}" alt="aion"  /></a>
  249.                 </div>
  250.                 <div class="col-sm-4 mt-4 mt-lg-0">
  251.                     <a href="https://app-estimator.com" target="_blank"><img class="img-fluid" width="190" src="{{ asset('assets/images/refonte/homepage/estimitor.svg') }}" alt="estimator"  /></a>
  252.                 </div>
  253.             </div>
  254.             </div>
  255.         </div>
  256.     </div>
  257.    <div class="suggest-articles container">
  258.         <div class="d-flex flex-column flex-lg-row justify-content-center mx-0">
  259.             <div class="left-content mr-0 mr-lg-5">
  260.                 {% if app.user and app.user.categories is not empty %}
  261.                     {% set favoriteUserCategories = publicationManager.showJournalByFavoriteUserCategories(app.user) %}
  262.                     {% if favoriteUserCategories %}
  263.                         <div class="row line-1">
  264.                             {% for ind,favorite in favoriteUserCategories|slice(0,4) %}
  265.                                 {% set id = ind + 1 %}
  266.                                 <div class="col-12 col-sm-6 text-center home-categorie-card">
  267.                                     <a href="{{ path('journal_show',{'id':favorite.id}) }}">
  268.                                         <div class="img-journal" >
  269.                                             <p>{{ favorite.title }}</p>
  270.                                           {%  set categories=favorite.categories.values %}
  271.                                             <div class="badge-journal" >
  272.                                                 {% for category in categories %}
  273.                                                     <span class="badge">{{ category.name }}</span>
  274.                                                 {% endfor %}
  275.                                             </div>
  276.                                         </div>
  277.                                     </a>
  278.                                 </div>
  279.                             {% endfor %}
  280.                         </div>
  281.                     {% endif %}
  282.                 {% else %}
  283.                     <div class="row line-1">
  284.                         <div class="col-6 col-md-6 text-center">
  285.                             <img class="img-fluid" src="{{ asset('assets/images/refonte/journal-selected-1.jpg') }}" alt="suggest-article"  />
  286.                         </div>
  287.                         <div class="col-6 col-md-6 text-center s-img">
  288.                             <img class="img-fluid" src="{{ asset('assets/images/refonte/journal-selected-2.jpg') }}" alt="suggest-article"  />
  289.                         </div>
  290.                     </div>
  291.                     <div class="row line-2 mt-3">
  292.                         <div class="col-6 col-md-6 text-center">
  293.                             <img class="img-fluid" src="{{ asset('assets/images/refonte/journal-selected-3.jpg') }}" alt="suggest-article"  />
  294.                         </div>
  295.                         <div class="col-6 col-md-6 text-center f-img">
  296.                             <img class="img-fluid" src="{{ asset('assets/images/refonte/journal-selected-4.jpg') }}" alt="suggest-article"  />
  297.                         </div>
  298.                     </div>
  299.                 {% endif %}
  300.             </div>
  301.             <div class="right-content d-flex flex-column text-center text-lg-left">
  302.                 <h6 class="selected-journals">Journals selected <br> for you</h6>
  303.                 {% if app.user %}
  304.                 <p>
  306.                     Discover these recommended journals tailored to your favorite categories.<br><br>
  307.                     We believe you'll find them highly valuable for your research, ensuring comprehensive coverage in your field<br><br>
  308.                       Because you selected :<br><br>
  309.                 </p>
  310.                 <div class="badge-journal-user" >
  311.                         {% for category in app.user.categories %}
  312.                             <span class="badge">{{ category.name }}</span>
  313.                         {% endfor %}
  314.                 </div>
  316.                 {% else %}
  317.                 <p>
  318.                     Explore these  recommended journals that we think you'll find most useful.<br><br>
  319.                     With these, you will be sure to have a complete research.
  320.                 </p>
  321.                 {% endif %}
  322.                <button class="btn"> <a href="{{ path('journalSearch') }}" class="text-white">Find a Journal </a></button>
  324.             </div>
  325.         </div>
  326.     </div>
  327.     <!-- Exemple de div pour un emplacement publicitaire -->
  328.     <div id="banner-ad-1">
  329.         <!-- L'espace réservé pour l'annonce sera rempli ici par Prebid -->
  330.     </div>
  331.     <section class="newsletter-section px-3 container">
  332.         <div class="newsletter-container" style="background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url({{ asset('assets/images/refonte/header-2.jpg') }})">
  333.             <div class="newsletter-content">
  334.                 <p class="newsletter-title">Sign up to our newsletter!</p>
  335.                 <p class="newsletter-description">so you can be the first to find out the latest articles and journals. </p>
  336.                 <div class="newsletter-btn-subscribe-container">
  337.                     <form action="{{ path('newsletter') }}" method="post" class="d-flex">
  338.                         <input type="hidden" name="newsletter" value="true" class="newsletter-input-hidden">
  339.                         <input name="email" type="email" class="newsletter-btn-submit" placeholder="Subscribe to our newsletter" required/>
  340.                         <input type="submit" value="Submit" class="newsletter-input-submit">
  341.                     </form>
  342.                 </div>
  343.             </div>
  344.         </div>
  345.     </section>
  346.     <!-- Pubi 0001-->
  348.     <!-- /21831250958/guidejournal_home_pub0001 -->
  349. {#    <div id='div-gpt-ad-1563781924570-0' style="align-content: center">#}
  350. {#        <script>#}
  351. {#            googletag.cmd.push(function() { googletag.display('div-gpt-ad-1563781924570-0'); });#}
  352. {#        </script>#}
  353. {#    </div>#}
  355.     <!-- Fin pub 0001-->
  356. {% endblock %}
  357.     
  358. {% block vignetteAd %}
  359.     <div class="fixed-pub-area w-100"></div>
  360.     {% include '_includes/pubs/custom-vignette-ad.html.twig' %}
  361. {% endblock %}
  363. {% block javascripts %}
  364.     <script>
  365.         $('.category-item').click(function (e) {
  366.             $('#register-btn-2').prop( "disabled", false );
  367.             let svg = e.currentTarget.firstElementChild;
  368.             let span = e.currentTarget.lastElementChild;
  369.             var categoryInput = document.getElementById('selected-categories')
  370.             svg.style.display === 'block' ? svg.style.display = 'none' : svg.style.display = 'block'
  372.             if(svg.style.display === 'block') {
  373.               // remove category
  374.                 let spanValue = span.id;
  375.                 // put span value in input
  376.                 if(categoryInput.value){
  377.                     categoryInput.value = categoryInput.value+","+spanValue;
  378.                 } else {
  379.                     categoryInput.value = spanValue;
  380.                 }
  381.             }else{
  382.                 // add category
  383.                 let spanValue = span.id;
  384.                 if(categoryInput.value){
  385.                     let categories = categoryInput.value.split(",");
  386.                     let index = categories.indexOf(spanValue);
  387.                     if (index > -1) {
  388.                         categories.splice(index, 1);
  389.                     }
  390.                     categoryInput.value = categories.join(",");
  391.                 }
  392.             }
  393.             e.currentTarget.classList.toggle('active');
  394.         })
  396.     </script>
  398. {% endblock %}