templates/about/1-psychosocial-factors.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  5. <main class="mhcc-wrapper">
  6.   <!-- Main content block starts //-->
  7.     <article class="mhcc-sec-page-outer">
  8.         
  9.     
  10.     <!--// Main title / navbar wrapper STARTS-->
  11. <div class="mt-0 steps-nav-list-wrapper">
  12.     <header class="light-green-bg sec-page-main-header sec-page-main-header--steps">
  13.         <!--// Main title block STARTS-->
  14.         <div class="main-title-icon-wrapper">
  15.             <h1 class="text-left sec-page-main-title--steps sec-page-lead-text--light-blue sec-page-main-title--big main-title-icon-wrapper__title">
  16.                 1. {{ "understand"|trans|raw }}
  17.             </h1>
  18.             <figure class="main-title-icon-wrapper__icon">
  19.                 <img src="{{ asset('assets/img/six_steps_icon1.svg') }}" class="main-title-icon" alt="">
  20.             </figure>
  21.         </div>
  22.         <!--// Main title block ENDS-->
  23.     </header>
  24.     <!--// Steps navbar STARTS-->
  25.     <nav aria-label="List of steps" class="mb-4">
  26.         <div class="list-inline list-unstyled steps-nav-block">   
  27.           <div class="steps-nav-block__item">
  28.             <span class="active btn btn-raised btn-success steps-nav-block__link">{{ "step"|trans|raw }} 1</span>
  29.           </div>
  30.           <div class="steps-nav-block__item">
  31.             <a href="{{ path('about_plan') }}" class="btn btn-raised btn-primary steps-nav-block__link">{{ "step"|trans|raw }} 2</a>
  32.           </div>
  33.           <div class="steps-nav-block__item">
  34.             <a href="{{ path('about_signup') }}" class="btn btn-raised btn-primary steps-nav-block__link">{{ "step"|trans|raw }} 3</a>
  35.           </div>
  36.           <div class="steps-nav-block__item">
  37.             <a href="{{ path('about_review') }}" class="btn btn-raised btn-primary steps-nav-block__link">{{ "step"|trans|raw }} 4</a>
  38.           </div>
  39.           <div class="steps-nav-block__item">
  40.             <a href="{{ path('about_results') }}" class="btn btn-raised btn-primary steps-nav-block__link">{{ "step"|trans|raw }} 5</a>
  41.           </div>
  42.           <div class="steps-nav-block__item">
  43.             <a href="{{ path('about_evaluate') }}" class="btn btn-raised btn-primary steps-nav-block__link">{{ "step"|trans|raw }} 6</a>
  44.           </div>
  45.         </div> 
  46.     </nav>
  47.     <!--// Steps navbar ENDS-->
  48. </div>
  49. <!--// Main title / navbar wrapper ENDS-->
  50.       <!-- Intro content starts //-->
  51.       <div class="mb-6 steps-intro-wrapper">
  52.         <section class="mb-4">
  53.           <header>
  54.             <h2 class="sec-page-subtitle blackish-text">
  55.               <strong>{{ "factors"|trans|raw }}</strong>
  56.             </h2>
  57.           </header>
  58.           <p class="mhcc-about-intro-desc">{{ "elements"|trans|raw }}</p> 
  59.         </section>
  60.         <section class="mb-4">
  61.           <header>
  62.             <h2 class="sec-page-subtitle blackish-text">
  63.               <strong>{{ "what-factors"|trans|raw }}</strong>
  64.             </h2>
  65.           </header>
  66.           <p class="mhcc-about-intro-desc">
  67.             {{ "factors-assessed"|trans|raw }}
  68.           </p> 
  69.           <p class="mhcc-about-intro-desc">
  70.             {{ "lower-scores"|trans|raw }}
  71.           </p>
  72.         </section>
  73.       </div>
  74.       <!-- Intro content ends //-->
  76.       <!--Tabs outer wrapper starts//-->
  77.         <div class="center-block mb-6 steps-intro-wrapper">
  78.           <!--Tabs inner wrapper starts//-->
  79.             <div class="tabs-wrapper tabs-wrapper--width">
  80.               <!--Tabs links start //-->
  81.                 <ul class="nav nav-tabs nav-tabs-primary step-1-tabs" role="tablist">
  82.                     <li role="presentation" class="active">
  83.                       <a class="withoutripple" href="#pf1" aria-controls="pf1" role="tab" data-toggle="tab">
  84.                         {{ "pf1-report"|trans|raw }}
  85.                       </a>
  86.                     </li>
  87.                     <li role="presentation">
  88.                       <a class="withoutripple" href="#pf2" aria-controls="pf2" role="tab" data-toggle="tab">
  89.                         {{ "pf2-report"|trans|raw }}
  90.                       </a>
  91.                     </li>
  92.                     <li role="presentation">
  93.                       <a class="withoutripple" href="#pf3" aria-controls="pf3" role="tab" data-toggle="tab">
  94.                         {{ "pf3-report"|trans|raw }}
  95.                       </a>
  96.                     </li>
  97.                     <li role="presentation">
  98.                       <a class="withoutripple" href="#pf4" aria-controls="pf4" role="tab" data-toggle="tab">
  99.                         {{ "pf4-report"|trans|raw }}
  100.                       </a>
  101.                     </li>
  102.                     <li role="presentation">
  103.                       <a class="withoutripple" href="#pf5" aria-controls="pf5" role="tab" data-toggle="tab">
  104.                         {{ "pf5-report"|trans|raw }}
  105.                       </a>
  106.                     </li>
  107.                     <li role="presentation">
  108.                       <a class="withoutripple" href="#pf6" aria-controls="pf6" role="tab" data-toggle="tab">
  109.                         {{ "pf6-report"|trans|raw }}
  110.                       </a>
  111.                     </li>
  112.                     <li role="presentation">
  113.                       <a class="withoutripple" href="#pf7" aria-controls="pf7" role="tab" data-toggle="tab">
  114.                         {{ "pf7-report"|trans|raw }}
  115.                       </a>
  116.                     </li>
  117.                     <li role="presentation">
  118.                       <a class="withoutripple" href="#pf8" aria-controls="pf8" role="tab" data-toggle="tab">
  119.                         {{ "pf8-report"|trans|raw }}
  120.                       </a>
  121.                     </li>
  122.                     <li role="presentation">
  123.                       <a class="withoutripple" href="#pf9" aria-controls="pf9" role="tab" data-toggle="tab">
  124.                         {{ "pf9-report"|trans|raw }}
  125.                       </a>
  126.                     </li>
  127.                     <li role="presentation">
  128.                       <a class="withoutripple" href="#pf10" aria-controls="pf10" role="tab" data-toggle="tab">
  129.                         {{ "pf10-report"|trans|raw }}
  130.                       </a>
  131.                     </li>
  132.                     <li role="presentation">
  133.                       <a class="withoutripple" href="#pf11" aria-controls="pf11" role="tab" data-toggle="tab">
  134.                         {{ "pf11-report"|trans|raw }}
  135.                       </a>
  136.                     </li>
  137.                     <li role="presentation">
  138.                       <a class="withoutripple" href="#pf12" aria-controls="pf12" role="tab" data-toggle="tab">
  139.                         {{ "pf12-report"|trans|raw }}
  140.                       </a>
  141.                     </li>
  142.                     <li role="presentation">
  143.                       <a class="withoutripple" href="#pf13" aria-controls="pf13" role="tab" data-toggle="tab">
  144.                         {{ "pf13-report"|trans|raw }}
  145.                       </a>
  146.                     </li>
  147.                     <li role="presentation">
  148.                       <a class="withoutripple" href="#pf14" aria-controls="pf14" role="tab" data-toggle="tab">
  149.                         {{ "pf14-report"|trans|raw }}
  150.                       </a>
  151.                     </li>
  152.                     <li role="presentation">
  153.                       <a class="withoutripple" href="#pf15" aria-controls="pf15" role="tab" data-toggle="tab">
  154.                         {{ "pf15-report"|trans|raw }}
  155.                       </a>
  156.                     </li>
  157.                 </ul>
  158.               <!--Tabs links end //-->
  160.               <!--Tabs inner block starts //-->
  161.                 <div class="card-block">
  162.                   <!--15 individual tabs block starts //-->
  163.                     <div class="tab-content step-1-tab-content">
  164.                       <!--Individual tab block //-->
  165.                         <div role="tabpanel" class="tab-pane fade active in pt-2 pr-2 pb-2 pl-2 light-blue-bg" id="pf1">
  166.                           <p>
  167.                             <span class="text-bold dark-blue-text">{{ "pf1-psychological-support"|trans|raw }}</span>
  168.                             <span class="blackish-text">{{ "pf1-desc"|trans|raw }}</span>
  169.                           </p>
  170.                         </div>
  172.                       <!--Individual tab block //-->
  173.                         <div role="tabpanel" class="tab-pane fade pt-2 pr-2 pb-2 pl-2 light-blue-bg" id="pf2">
  174.                           <p>
  175.                             <span class="text-bold dark-blue-text">{{ "pf2-organizational-culture"|trans|raw }}</span>
  176.                             <span class="blackish-text">{{ "pf2-desc"|trans|raw }}</span>
  177.                           </p>
  178.                         </div>
  180.                       <!--Individual tab block //--> 
  181.                         <div role="tabpanel" class="tab-pane fade pt-2 pr-2 pb-2 pl-2 light-blue-bg" id="pf3">
  182.                           <p>
  183.                             <span class="text-bold dark-blue-text">{{ "pf3-clear-leadership-expectations"|trans|raw }}</span>
  184.                             <span class="blackish-text">{{ "pf3-desc"|trans|raw }}</span>
  185.                           </p>
  186.                         </div>
  188.                       <!--Individual tab block //-->
  189.                         <div role="tabpanel" class="tab-pane fade pt-2 pr-2 pb-2 pl-2 light-blue-bg" id="pf4">
  190.                           <p>
  191.                             <span class="text-bold dark-blue-text">{{ "pf4-civility-respect"|trans|raw }}</span>
  192.                             <span class="blackish-text">{{ "pf4-desc"|trans|raw }}</span>
  193.                           </p>
  194.                         </div>
  196.                       <!--Individual tab block //-->
  197.                         <div role="tabpanel" class="tab-pane fade pt-2 pr-2 pb-2 pl-2 light-blue-bg" id="pf5">
  198.                           <p>
  199.                             <span class="text-bold dark-blue-text">{{ "pf5-psychological-job-fit"|trans|raw }}</span>
  200.                             <span class="blackish-text">{{ "pf5-desc"|trans|raw }}</span>
  201.                           </p>
  202.                         </div>
  204.                       <!--Individual tab block //-->
  205.                         <div role="tabpanel" class="tab-pane fade pt-2 pr-2 pb-2 pl-2 light-blue-bg" id="pf6">
  206.                           <p>
  207.                             <span class="text-bold dark-blue-text">{{ "pf6-growth-development"|trans|raw }}</span>
  208.                             <span class="blackish-text">{{ "pf6-desc"|trans|raw }}</span>
  209.                           </p>
  210.                         </div>
  212.                       <!--Individual tab block //-->
  213.                         <div role="tabpanel" class="tab-pane fade pt-2 pr-2 pb-2 pl-2 light-blue-bg" id="pf7">
  214.                           <p>
  215.                             <span class="text-bold dark-blue-text">{{ "pf7-recognition-reward"|trans|raw }}</span>
  216.                             <span class="blackish-text">{{ "pf7-desc"|trans|raw }}</span>
  217.                           </p>
  218.                         </div>
  220.                       <!--Individual tab block //-->
  221.                         <div role="tabpanel" class="tab-pane fade pt-2 pr-2 pb-2 pl-2 light-blue-bg" id="pf8">
  222.                           <p>
  223.                             <span class="text-bold dark-blue-text">{{ "pf8-involvement-influence"|trans|raw }}</span>
  224.                             <span class="blackish-text">{{ "pf8-desc"|trans|raw }}</span>
  225.                           </p>
  226.                         </div>
  228.                       <!--Individual tab block //-->
  229.                         <div role="tabpanel" class="tab-pane fade pt-2 pr-2 pb-2 pl-2 light-blue-bg" id="pf9">
  230.                           <p>
  231.                             <span class="text-bold dark-blue-text">{{ "pf9-workload-management"|trans|raw }}</span>
  232.                             <span class="blackish-text">{{ "pf9-desc"|trans|raw }}</span>
  233.                           </p>
  234.                         </div>
  236.                       <!--Individual tab block //-->
  237.                         <div role="tabpanel" class="tab-pane fade pt-2 pr-2 pb-2 pl-2 light-blue-bg" id="pf10">
  238.                           <p>
  239.                             <span class="text-bold dark-blue-text">{{ "pf10-engagement"|trans|raw }}</span>
  240.                             <span class="blackish-text">{{ "pf10-desc"|trans|raw }}</span>
  241.                           </p>
  242.                         </div>
  244.                       <!--Individual tab block //-->
  245.                         <div role="tabpanel" class="tab-pane fade pt-2 pr-2 pb-2 pl-2 light-blue-bg" id="pf11">
  246.                           <p>
  247.                             <span class="text-bold dark-blue-text">{{ "pf11-balance"|trans|raw }}</span>
  248.                             <span class="blackish-text">{{ "pf11-desc"|trans|raw }}</span>
  249.                           </p>
  250.                         </div>
  252.                       <!--Individual tab block //-->
  253.                         <div role="tabpanel" class="tab-pane fade pt-2 pr-2 pb-2 pl-2 light-blue-bg" id="pf12">
  254.                           <p>
  255.                             <span class="text-bold dark-blue-text">{{ "pf12-psychological-protection"|trans|raw }}</span>
  256.                             <span class="blackish-text">{{ "pf12-desc"|trans|raw }}</span>
  257.                           </p>
  258.                         </div>
  260.                       <!--Individual tab block //-->
  261.                         <div role="tabpanel" class="tab-pane fade pt-2 pr-2 pb-2 pl-2 light-blue-bg" id="pf13">
  262.                           <p>
  263.                             <span class="text-bold dark-blue-text">{{ "pf13-protection-physical-safety"|trans|raw }}</span>
  264.                             <span class="blackish-text">{{ "pf13-desc"|trans|raw }}</span>
  265.                           </p>
  266.                         </div>
  268.                       <!--Individual tab block //-->
  269.                         <div role="tabpanel" class="tab-pane fade pt-2 pr-2 pb-2 pl-2 light-blue-bg" id="pf14">
  270.                           <p>
  271.                             <span class="text-bold dark-blue-text">{{ "pf14-protection-moral-distress"|trans|raw }}</span>
  272.                             <span class="blackish-text">{{ "pf14-desc"|trans|raw }}</span>
  273.                           </p>
  274.                         </div>
  276.                       <!--Individual tab block //--> 
  277.                         <div role="tabpanel" class="tab-pane fade pt-2 pr-2 pb-2 pl-2 light-blue-bg" id="pf15">
  278.                           <p>
  279.                             <span class="text-bold dark-blue-text">{{ "pf15-cumulative-exposure"|trans|raw }}</span>
  280.                             <span class="blackish-text">{{ "pf15-desc"|trans|raw }}</span>
  281.                           </p>
  282.                         </div>
  283.               
  284.                     </div>
  285.                   <!--15 individual tabs block ends //--> 
  286.                 </div>
  287.               <!--Tabs inner block ends//-->
  288.             </div>
  289.           <!--Tabs inner wrapper ends //-->
  290.         </div>
  291.       <!--Tabs outer block ends//-->  
  292.     </article>
  293.   <!-- Main content block ends //-->
  296.   <!-- Modals: Begin -->
  297.   <div class="modal" id="learnMoreModal" tabindex="-1" role="dialog" aria-labelledby="learnMoreModalLabel">
  298.       <div class="modal-dialog animated zoomIn animated-3x" role="document">
  299.           <div class="modal-content">
  300.               <div class="modal-header">
  301.                   <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i
  302.                               class="zmdi zmdi-close"></i></span></button>
  303.                   <h3 class="modal-title sr-only" id="learnMoreModalLabel">Learn more about my survey data</h3>
  304.               </div>
  305.               <div class="modal-body">
  306.                   <p>{{ "automated-report-based-results-pilot-testing"|trans|raw }}</p>
  307.               </div>
  308.               <div class="modal-footer"><button type="button" class="btn btn-default"
  309.                       data-dismiss="modal">{{ "close-survey-dashboard"|trans|raw }}</button></div>
  310.           </div>
  311.       </div>
  312.   </div>
  313.   <!-- Modals: ends -->
  315. </main> 
  316. {% endblock %}