templates/landing_page/landing_page.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="en">
  4.     <head>
  5.         <meta charset="UTF-8"/>
  6.         <meta name="viewport" content="width=device-width, initial-scale=1">
  7.         <title>
  8.             {% block title %}GAINPF
  9.             {% endblock %}
  10.         </title>
  11.         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  12.         <meta http-equiv="encoding" content="utf-8">
  13.         <link rel="alternate" type="application/rss+xml" title="Home" href="#">
  14.         <link rel="icon" href="{{ asset('images/main.png') }}" type="image/x-icon">
  15.         <link rel="stylesheet" href="{{ asset('build/css/newBootstrap.css') }}"/>
  16.         <link rel="stylesheet" href="{{ asset('build/css/landing_page.css') }}">
  17.         <link rel="stylesheet" href="{{ asset('build/css/color-style.css') }}">
  18.         {{ encore_entry_script_tags("js/login") }}
  19.         <link rel="stylesheet" href="{{ asset('build/js/landing_packages.css') }}">
  20.     </head>
  22.     
  24.     <body style="background-image: url('{{ asset('images/pattern.webp') }}'); background-size:cover; background-attachment:fixed; background-position:center;">
  25.         <input type="hidden" name="logOutPath" id="logOutPath" value="{{ path('_logout') }}"> 
  26.         <nav class="navbar fixed-top navbar-expand-lg navbar-light pt-1 pb-1" data-aos:"fade-down">
  27.             <div class="container">
  28.                 <a class="navbar-brand" href="#">
  29.                     <img src="{{asset('images/GAINPFLOGO4.png')}}" alt="GAINPF Logo">
  30.                 </a>
  31.                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  32.                     <span class="navbar-toggler-icon"></span>
  33.                 </button>
  34.                 <div class="collapse navbar-collapse" id="navbarSupportedContent">
  35.                     <ul class="navbar-nav me-auto mb-2 mb-lg-0">
  36.                         <li class="nav-item">
  37.                             <a class="nav-link" href="#home" id="nav-home">Home</a>
  38.                         </li>
  39.                         <li class="nav-item">
  40.                             <a class="nav-link" href="#about" id="nav-home">About</a>
  41.                         </li>
  42.                         <li class="nav-item">
  43.                             <a class="nav-link" href="#loan-status" id="nav-loan-status">Loan status</a>
  44.                         </li>
  45.                         <li class="nav-item">
  46.                             <a class="nav-link" href="#departments" id="nav-departments">Departments</a>
  47.                         </li>
  48.                         <li class="nav-item">
  49.                             <a class="nav-link" href="#help" id="nav-help">Help</a>
  50.                         </li>
  51.                     </ul>
  52.                     <form class="d-flex">
  53.                         <a href="#login" class="btn btn-primary custom-login">Login</a>
  54.                     </form>
  55.                 </div>
  56.             </div>
  57.         </nav>
  58.         <div class="loan-overlay">
  59.             <div class="rolling-news">
  60.                 <div class="news-items" style="display: flex; gap: 200px;">
  61.                     <span>GainPF department admins are requested to download the treasury data by 20th of every month.</span>
  62.                     <span>All the GainPF users are requested to install 'SANDES' mobile application from Play Store to receive messages.</span>
  63.                 </div>
  64.             </div>
  66.             <section id="home" class="homeSection" style="background-image: url('{{ asset('images/landing_background.webp')}}');">
  67.                 <div class="container-fluid landing-overlay">
  68.                     <div class='container home-container'>
  69.                         <div class="title-container">
  70.                             <h2 class="text-start m-0 title-text" data-aos="fade-right" data-aos-delay="100">GOVERNMENT AIDED</h2>
  71.                             <h2 class="text-start m-0 title-text" data-aos="fade-right">INSTITUTION'S PF</h2>
  72.                             <h2 class="text-start m-0 title-text" data-aos="fade-right" data-aos-delay="300">SYSTEM</h2>
  73.                             <div style="padding:3px"></div>
  74.                             <div class="subtitle-container">
  75.                                 <p class="subtitle-text" data-aos="fade-up" data-aos-delay="400">PF Management System is a
  76.                                                                                                                         comprehensive solution designed to streamline provident fund operations for government-aided
  77.                                                                                                                         institutions.64</p>
  78.                                 <a href="#login" data-aos="fade-up" data-aos-delay="500" class="btn btn-primary m-0 align-content-center custom-login-big">
  79.                                         <strong>Login</strong>
  80.                                 </a>
  81.                             </div>
  83.                         </div>
  84.                     </div>
  85.                 </div>
  86.             </section>
  87.             
  88.             <section id="about">
  89.                 {{render(controller("App\\Controller\\User\\LogingfController::landingPageAbout"))}}
  90.             </section>
  92.             <section id="loan-status" class="section loanSection">
  94.                 
  96.                 <div class="container pt-5 pb-5 d-flex justify-content-center loan-container">
  97.                     <h4 class="text-center mt-2 loan-title" data-aos="fade-up">Loan Status</h4>
  98.                     <p class="text-center loan-subtitle" data-aos="fade-up">
  99.                         Designed to enhance transparency and decision-making, this section offers a comprehensive snapshot of financial activity.
  100.                     </p>
  101.                 </div>
  103.                 {{render(controller("App\\Controller\\User\\LogingfController::landingPageCharts"))}}
  104.                 {{render(controller("App\\Controller\\User\\LogingfController::landingPageDeptChart"))}}
  106.             </section>
  109.             <!-- Departments table section-->
  111.             <section id="departments" class="deptSection">
  112.                 <div class="container pt-5 pb-5">
  113.                     <h4 class="text-center mt-2 loan-title" data-aos="fade-up">Departments in GainPF</h4>
  114.                     <div class="container my-4">
  115.                         <div class="table-responsive" data-aos="fade-up">
  116.                             <table class="table table-striped table-hover">
  117.                                 <thead class="table-dark">
  118.                                     <tr>
  119.                                         <th>#</th>
  120.                                         <th>Departments</th>
  121.                                         <th>PAO Code</th>
  122.                                         <th>Label</th>
  123.                                     </tr>
  124.                                 </thead>
  125.                                 <tbody
  126.                                     id="table-body"><!-- Rows will be dynamically populated -->
  127.                                 </tbody>
  128.                                 <tfoot class="table-foot">
  129.                                     <tr class="table-foot">
  130.                                         <td colspan="4">
  131.                                             <div class="d-flex justify-content-center align-items-center">
  132.                                                 <button id="prev-btn" class="btn btn-primary btn-sm table-nav-button" disabled>
  133.                                                     1
  134.                                                 </button>
  136.                                                 <button id="next-btn" class="btn btn-primary btn-sm table-nav-button">
  137.                                                     2
  138.                                                 </button>
  139.                                             </div>
  140.                                         </td>
  141.                                     </tr>
  142.                                 </tfoot>
  143.                                 <span id="page-info" class="page-info"></span>
  144.                             </table>
  145.                         </div>
  146.                     </div>
  147.                 </div>
  149.             </section>
  150.             <!-- Departments table section end-->
  152.             <!-- FAQ section start-->
  153.             <section id="help" class="section helpSection">
  154.                 <div class="container mt-3 mb-5">
  155.                     <h2 class="text-center mb-5 help-title" data-aos="fade-up">Frequently Asked Questions</h2>
  156.                     {{render(controller("App\\Controller\\User\\LogingfController::landingPageFaq"))}}
  157.                 </div>
  158.             </section>
  160.             <!-- FAQ section end-->
  163.             <!-- Login section start-->
  164.             <section id="login" class="section loginSection">
  165.                 <div style="padding: 5px;"></div>
  166.                 <div class="container mt-5">
  167.                     <div class="row justify-content-between align-items-center">
  168.                         <div class="col-md-6 col-12 mb-3">
  169.                             <div class="card align-items-center justify-content-center pt-5 pb-5 login-procedure" data-aos="fade-up" style="min-height:500px;">
  170.                                 <h4 class="text-center login-procedure-title">Login Procedures</h4>
  171.                                 <div class="underline">
  172.                                     <div style="height: 2px; background-color: azure; width: 110px"></div>
  173.                                     <div style="height: 2px; background-color: azure; width: 220px"></div>
  174.                                 </div>
  175.                                 <div style="padding: 15px"></div>
  176.                                 <ul class="procedure-list">
  177.                                     <li>
  178.                                         <div class="container procedure-container">
  179.                                             1. Use your PEN as username and Date of Birth (as entered in SPARK) as Password in dd/mm/yyyy format.
  180.                                         </div>
  181.                                     </li>
  182.                                     <li>
  183.                                         <div class="container procedure-container">
  184.                                             2. Change your PASSWORD after successful login.
  185.                                         </div>
  186.                                     </li>
  187.                                     <li>
  188.                                         <div class="container procedure-container">
  189.                                             3. Procedures to be followed while submitting bills to GAINPF.
  190.                                         </div>
  191.                                     </li>
  192.                                 </ul>
  193.                             </div>
  194.                         </div>
  195.                         <div class="col-md-6 col-12 mb-3">
  196.                             <div class="card align-items-center justify-content-center login-form" data-aos="fade-up" style="min-height:500px;  background-image: url('{{ asset('images/login-img.webp') }}');">
  197.                                 <div class="card align-items-center justify-content-center" style="min-height:500px; min-width: 100%; border:none; border-radius:16px; border-color:transparent; background: linear-gradient(rgba(0, 109, 119, .2),rgba(0, 109, 119, .6));;">
  198.                                     <div class="container p-3 align-content-end">
  199.                                         <div class="container form-title">
  200.                                             <h5 class="text-center mt-2" style="color: #EDF6F9">
  201.                                                 Login to your account
  202.                                             </h5>
  203.                                         </div>
  204.                                         {% set flashMessages = app.flashes() %}
  205.                                         {% for label, messages in flashMessages %}
  206.                                             {% for message in messages %}
  207.                                                 <div class="alert alert-{{ label }}">
  208.                                                     {{ message }}
  209.                                                 </div>
  210.                                             {% endfor %}
  211.                                         {% endfor %}
  213.                                         {% if error %}
  214.                                             <div class="alert alert-danger" style="width: 100%;">
  215.                                                 <b>Alert!</b>
  216.                                                 {{ error | trans }}
  217.                                             </div>
  218.                                             
  219.                                         {% endif %}
  220.                                         
  222.                                         <form action="{{ path('app_home') }}" method="post" class="mt-2 rd-mailform form-fix" id="smartIdLogin" autocomplete="off">
  223.                                             <div class="input-group mb-3">
  224.                                                 <input type="text"  class="form-control" id="_peru" name="_peru" placeholder="Username/PEN" required="required"/>
  225.                                             </div>
  227.                                             <div class="container-fluid p-0 m-0 d-flex justify-content-center align-items-center">
  228.                                                 <div class="input-grout mb-3 password-container">
  229.                                                     <input type="password" class="form-control inputPassword" autocomplete="off" id="_thakol" name="_thakol" required="required" placeholder="Password/DOB(dd/mm/yyyy)"/>
  230.                                                     <i class="bi bi-eye-slash toggle-password" type="checkbox" toggle="#_thakol" id="showPassword"></i>
  231.                                                 </div>
  232.                                             </div>
  234.                                             <div class="input-group mb-3">
  235.                                                 {{ form_widget(form.captcha) }}
  236.                                             </div>
  238.                                             <input type="hidden" name="_csrf_token" value="{{ csrf_token }}"/>
  239.                                             <input type="hidden" id="_uppu" name="_uppu" value="{{ browserSalt }}"/>
  240.                                             <input type="hidden" id="_verifyUser" value="{{ path('usr_prelogin', { username: '__objid__' }) }}"/>
  242.                                             <button type="submit" data-path="{{ path('app_home') }}" id="_submit" name="_submit" class="btn btn-primary btn-block form-login-btn">
  243.                                                 Login
  244.                                             </button>
  247.                                         </form>
  248.                                         
  249.                                         <div class="container mt-2 mb-2 d-flex justify-content-end" style="width: 100%;">
  250.                                             <a href="{{ path('forget_password') }}" class="forget-pass-button">
  251.                                                 <i class="bi bi-question-circle"></i>
  252.                                                 Forgot Password?
  253.                                             </a>
  254.                                         </div>
  256.                                     </div>
  257.                                 </div>
  258.                             </div>
  259.                         </div>
  260.                     </div>
  261.                 </div>
  262.             </section>
  263.             <div style="padding: 40px"></div>
  264.         </div>
  266.         {% if flashMessages is not empty %}
  267.             <script>
  268.                 document.addEventListener('DOMContentLoaded', function () {
  269.                     const section = document.getElementById('login');
  270.                     if (section) {
  271.                         section.scrollIntoView({ behavior: 'smooth', block: 'center' });
  272.                     }
  273.                 });
  274.             </script>
  275.         {% endif %}
  277.         {% if error %}
  278.             <script>
  279.                 document.addEventListener('DOMContentLoaded', function () {
  280.                     const section = document.getElementById('login');
  281.                     if (section) {
  282.                         section.scrollIntoView({ behavior: 'smooth', block: 'center' });
  283.                     }
  284.                 });
  285.             </script>
  286.         {% endif %}
  288.         <script src="{{ asset('build/js/app.js') }}"></script>
  289.         <script src="{{ asset('build/js/landing_page.js') }}"></script>
  290.         <script src="{{ asset('build/js/landing_packages.js') }}"></script>
  291.     </body>
  292.     
  294.     <footer class="footer bg-light text-center py-3 custom-footer">
  295.         <div class="container">
  296.             <div class="row">
  297.                 <div class="col-12">
  298.                     <p class="mb-2" style="font-size: 0.8rem;">
  299.                         <!-- Optional: Uncomment if needed -->
  300.                         <!-- Election Commission Of India 
  301.                                             <a target="_blank" class="fw-bold text-danger" href="http://voterportal.eci.gov.in">Voter Portal</a><br> -->
  302.                         Brought to you by
  303.                             <a target="_blank" title="Go to Official Website of Finance Department of Kerala" href="http://finance.kerala.gov.in" class="fw-bold text-danger"> Finance Department, Govt of Kerala
  304.                         </a>
  305.                     </p>
  306.                     <p class="mb-2" style="font-size: 0.8rem;">
  307.                         Software Design, Development and Hosting Services by
  308.                         <a target="_blank" title="Go to Official Website of National Informatics Centre" href="https://www.nic.in/" class="fw-bold text-danger">
  309.                             NATIONAL INFORMATICS CENTRE - KERALA
  310.                         </a>
  311.                     </p>
  312.                     <p style="font-size: 0.8rem;">
  313.                         Network Services by e-governance Network and Data Centre, Govt. of Kerala
  314.                     </p>
  315.                 </div>
  316.             </div>
  317.         </div>
  318.     </footer>
  319.         {% set items = [] %}
  320.         {% for type, messages in app.flashes %}
  321.             {% for message in messages %}
  322.                 {% set item = {
  323.                     (type): message
  324.                 } %}
  325.                 {% set items = items | merge(item) %}
  326.             {% endfor %}
  327.         {% endfor %}
  328.         <div id="overlay">
  329.             <div id="progstat"></div>
  330.             <div id="progress"></div>
  331.         </div>
  332.         <input type="hidden" id="server-flash-messages" value="{{items | json_encode()}}"/>
  333.         
  334. </html>