<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="metro route ">
  <meta name="keywords" content="delhi, metro,metroinfoxyz, search, find, route , shortest, from, to , findroute, findpath, shortest route from here to here, 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,Dwarka sec 21,Dwarka sec 8,Dwarka sec 9,Dwarka sec 10,Dwarka sec 11,Dwarka sec 12,Dwarka sec 13,Dwarka sec 14,Dwarka,Dwarka Mor,Nawada,Uttam Nagar West,Uttam Nagar East,Janakpuri West,Janakpuri East,Huda City Centre,Tilak Nagar,Subhash Nagar,Tagore Garden,Rajouri Garden,Ramesh Nagar,Moti Nagar,Kirti Nagar,Shadipur,Patel Nagar,Rajendra Palace,Karol Bagh,Jhandewalan,RK Ashram Marg,Rajiv Chowk,Barakhamba Road,Mandi House,Pragati Maidan (supreme court),Indraprasth,Yamuna Bank,Akshardham,Mayur Vihar Phase 1,Mayur Vihar Extension,New Ashok Nagar,Noida sec 15,Noida sec 16,Noida sec 18,Botenical Garden,Golf Course,Noida City Centre,Noida sec 34,Noida sec 52,Noida sec 61,Noida sec 59,Noida sec 62,Noida Electric City,Yamuna Bank,Laxmi Nagar,Nirman Vihar,Preet Vihar,Karkarduma,Anand Vihar ISBT,Kaushambi,Vaishali,Kirti Nagar,Satguru Ram Singh Marg,Ashok Park Main,Inderlok,Punjabi Bagh East,Punjabi Bagh West,Shivaji Park,Madipur,Paschim Vihar East,Paschim Vihar West,Peeragari,Udhyog Nagar,Maharaja Surajmal Stadium,Nangloi,Nangloi Railway Station,Rajdhani park,Mundaka,Mundaka Industrial Area,Ghevra,Tikri Kalan,Tikri Border,Pandit Shree Ram Marg,Bahadurgarh City,Bregadier Hosiyar Singh,Shaheed Sthal (New Bus Adda),Hindon River,Arthala,Mohan Nagar,Shyam Park,Major Mohit Sharma Rajendra Nagar,Raj Bagh,Shaheed Nagar,Dilshad Garden,Jhil mil,Mansarovar Park,Shahdara,Welcome,Sheelampur,Shastri Park,Kashmere Gate,Tis Hazari,Pul Bangash,Pratap Nagar,Shastri Nagar,Inderlok,Kanhaiya Nagar,Keshav Puram,Netaji Shubhash Palace,Kohat Enclave,Pitam Pura,Rohini East,Rohini West,Rithala,Samaypur Badli,Rohini Sec 18,19,Haiderpur Badli Mor,Jahangirpuri,Adarsh Nagar,Azadpur,Model Town,GTB Nagar,Vishwavidyalya,Vidhan Sabha,Civil Lines,Kashmere Gate,Chandni Chowk,Chawdi Bazar,New Delhi,Rajiv Chowk,Patel Chowk,Central Secretariat,Udyog Bhawan,Lok Kalyan Marg,Jor Bagh,Delhi Haat INA,AIIMS,Green Park,Hauz Khas,Malviya Nagar,Saket,Qutab Minar,Chhattarpur,Sultanpur,Ghitorni,Arjan Garh,Guru Dronacharya,Sikandarpur,MG Road,IFFCO Chowk,Huda City Centre,Majlis Park,Azadpur,Shalimar Bhagh,Netaji Shubhash Palace,Shakurpur,Punjabi Bagh West,ESI Basaidarapur,Rajouri Garden,Mayapuri,Naraina vihar,Delhi Cantt,Durgabai Desmukh South Campus,Sir M Vishweshwaraiah Moti Bagh,Bhikaji Kama Palace,Sarojini Nagar,Delhi Haat INA,South Extension,Lajpat Nagar,Vinobapuri,Ashram,Sarai Kale Khan Nizamuddin,Mayur Vihar Phase 1,Mayur Vihar Pkt 1,Trilokpuri Sanjay Lake,Vinod Nagar East,Mandawali West Vinod Nagar,IP Extension,Anand Vihar ISBT,Karkarduma,Karkarduma Court,Krishna Nagar,East Azad Nagar,Welcome,Jafrabad,Maujpur Babarpur,Gokulpuri,Johri Enclave,Shiv Vihar,Dwarka,Nangli,Najafgarh,Dhansa Bus Stand,Janakpuri West,Dabri Mor Janakpuri South,Dashrathpuri,Palm,Sadar Bazar Contanment,Terminal-1 IGI Airport,Shankar Vihar,Vasant Vihar,Munirka,RK Puram,IIT,Hauz Khas,Panchsheel Park,Chirag Delhi,Greater Kailash,Nehru Enclave,Kalkaji Mandir,Okhla NCIS,Sukhdev Vihar,Jamia Milia Islamia,Okhla Vihar,Jasola Vihar shaheen Bagh,Kalindi Kunj,Okhla Bird Sanctuary,Botenical Garden,Noida sec 52,Noida Sec 51,Noida Sec 50,Noida Sec 76,Noida Sec 101,Noida Sec 81,NSEZ Noida,Noida Sec 83,Noida Sec 137,Noida Sec 142,Noida Sec 143,Noida Sec 144,Noida Sec 145,Noida Sec 146,Noida Sec 147,Noida Sec 148,Knowledge park 2,Pari Chowk Greater Noida,Alpha 1 Greater Noida,Alpha 1 Greater Noida,GNIDA Office,Depot Greater Noida,metroinfoxyz.com,Kashmere Gate,Lal Quila,Jama Masjid,Delhi Gate,ITO,Mandi House,Janpath,Central Secretariat,Khan Market,JLM Stadium,Jangpura,Lajpat Nagar,Moolchand,Kialash Colony,Nehru Palace,Kalkaji Mandir,Govindpuri,Harkeshnagar Okhla,Jasola Apollo,Sarita Vihar,Mohan Estate,Tugalkabad,Badarpur Border,Sarai,NHPC Chowk,Mewala Maharajpur,Sector 28 Faridabad,Badkal Mor,Old Faridabad,Neelam Chowk Ajronda,Bata Chowk,Escorts Mujesar,Sant Surdas (SIHI),Raja Nahar Singh Ballabgarh,New Delhi,Shivaji Stadium,Dhaula Kuan,Delhi Aerocity,Indira Gandhi International Airport,Dwarka sec 21 ">
  <meta name="author" content="Monu Dixit">
  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

  <!-- JavaScript Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
    crossorigin="anonymous"></script>
  <script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Lobster&family=PT+Sans+Narrow&display=swap" rel="stylesheet">
  <title>Delhi Metro Route   </title>

</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <a style="font-family: 'PT Sans Narrow', sans-serif;" class="navbar-brand" href="#">
        <span class="material-symbols-outlined">
        train 
        </span>metroinfoxyz.com </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="/">Find Route</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
              aria-expanded="false">
              Lines
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a style="color: blue;" class="dropdown-item" href="/lines?color=blue">Blue</a></li>
              <li> <a style="color: green;" class="dropdown-item" href="/lines?color=green">Green</a></li>
              <li> <a style="color: red;" class="dropdown-item" href="/lines?color=red">Red</a></li>
              <li> <a style="color: yellow;" class="dropdown-item" href="/lines?color=yellow">Yellow</a></li>
              <li><a style="color: pink;" class="dropdown-item" href="/lines?color=pink">Pink</a></li>
              <li> <a style="color: grey;" class="dropdown-item" href="/lines?color=grey">Grey</a></li>
              <li> <a style="color: magenta;" class="dropdown-item" href="/lines?color=magenta">Magenta</a></li>
              <li> <a style="color: aqua;" class="dropdown-item" href="/lines?color=aqua">Aqua</a></li>
              <li> <a style="color: violet;" class="dropdown-item" href="/lines?color=violet">Violet</a></li>
              <li><a style="color: orange;" class="dropdown-item" href="/lines?color=orange">Orange</a></li>
            </ul>
            <li class="nav-item active">
            <a class="nav-link" href="https://github.com/ranjeet16pd/Delhi-Metro-Route-finder">github repo</a>
          </li>
            </li>
        </ul>
      </div>
    </div>
  </nav>
  <h3 style="font-family: 'Lobster', cursive;
  font-family: 'PT Sans Narrow', sans-serif;
  ">Make it simple</h3>
  <br>
  <div id="search_box" style="width:300px ;border-radius:12px;padding:5px;margin-left: auto;margin-right: auto;background-color: aliceblue;">
      <b><label for="from"> From</label></b>
      <select style="width: 250px;" name="from" id="from">
        <% for (const item in station) { %>
          <option value="<%- item %>">
            <%- station[item].name %>
          </option>
          <%- station[item].name %>
            <% } %>
      </select>
      <br><br>
      <b><label for="to">To </label></b>
      <br>
      <select style="width: 250px;" name="to" id="to">
        <% for (const item in station) { %>
          <option value="<%- item %>">
            <%- station[item].name %>
          </option>
          <%- station[item].name %>
            <% } %>
      </select>
      <!-- <input type="text" name="from" required placeholder="From"><br><br>
            <input type="text" name="to" required placeholder="To"> -->
      <br>
      <br>
      <button id="find" class="btn btn-sm btn-success"> Search</button>
  </div>
  <br>
  <div id="header" class="d-flex justify-content-around" style="width: fit-content;padding:5px;margin-left:auto;margin-right:auto;background-color: aliceblue;"> 
    <% let l1 = ans3.length
        let j   = 0
    if( l1 > 0 ){ 
      let l2 = ans3[l1-1].length 
    %>
   <p><b><%- station[ans3[0][0]].name %></b></p> <span class="material-symbols-outlined">
  arrow_circle_right
  </span><p><b><%- station[ans3[l1-1][l2-1]].name %></b></p> 
   <% } %>
  </div>
  <br>
  <div id="adddetail" style="width: 300px;padding:5px;margin-left:auto;margin-right:auto;background-color: aliceblue;">
  <%
            if(l1>0){ %>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <th scope="row">Fare</th>
          <td>
              <%  let l2 = ans3[l1-1].length 
                let distance  = 0
                for(i=0;i< l1;i++){
                  distance += Math.abs(station[ans3[i][ans3[i].length-1]].dist - station[ans3[i][0]].dist)
                } 
                if(l>0){  %>
                      <% if(distance <= 2 ){ %>
                        Token :<i>10rs</i><br>Card :<i>8-9rs</i><br>
                       <% }
                       else if (distance <= 5){  %>
                         Token :<i>20rs</i><br>Card :<i>16-18rs</i><br>
                      <% }
                      else if(distance <=12){ %>
                       Token :<i>30rs</i><br>Card :<i>24-27rs</i><br>
                      <% }
                      else if(distance <= 21){ %>
                       Token :<i>40rs</i><br>Card :<i>32-36rs</i><br>
                      <% }
                      else if(distance <= 32 ){ %>
                       Token :<i>50rs</i><br>Card :<i>40-45rs</i><br>
                      <% }
                      else{ %>
                       Token : <i>60rs</i><br>Card :<i>48-54rs</i><br>
                      <% } %>
<br>
                      <% if(from < 256 && to > 256){ %>
                       +
                                   <%   let adddist = 0
                                   let l3 = ans3[l1-1].length
                                   adddist = Math.abs(station[ans3[l1-1][l3-1]].dist - station[ans3[l1-1][0]].dist)
                                   if(adddist <= 2 ){ %>
                                   Token :<i>10rs </i><br>Card :<i>8-9rs</i><br>
                                   <% }
                                   else if (adddist <= 5){  %>
                                     Token :<i>20rs</i><br>Card :<i>16-18rs</i><br>
              
                                  <% }
                                  else if(adddist <=12){ %>
                                   Token :<i>30rs</i><br>Card :<i>24-27rs</i><br>
           
                                  <% }
                                  else if(adddist <= 21){ %>
                                   Token :<i>40rs</i><br>Card :<i>32-36rs</i><br>
            
                                  <% }
                                  else if(adddist <= 32 ){ %>
                                   Token :<i>50rs</i><br>Card :<i>40-45rs</i><br>
           
                                  <% }
                                  else{ %>
                                   Token : <i>60rs</i><br>Card :<i>48-54rs</i><br>
           
                                  <% } %>
               
           
                   <% }
                    else if(from > 256 && to < 256){ %>
              +
                            <%   let adddist = 0
                           let l3 = ans3[l1-1].length
                           adddist = Math.abs(station[ans3[l1-1][l3-1]].dist - station[ans3[l1-1][0]].dist)
           
           
                           if(adddist <= 2 ){ %>
                           Token :<i>10rs </i><br>Card :<i>8-9rs</i><br>
                
                           <% }
                           else if (adddist <= 5){  %>
                           Token :<i>20rs</i><br>Card :<i>16-18rs</i><br>
              
                          <% }
                          else if(adddist <=12){ %>
                           Token :<i>30rs</i><br>Card :<i>24-27rs</i><br>
           
                          <% }
                          else if(adddist <= 21){ %>
                            Token :<i>40rs</i><br>Card :<i>32-36rs</i><br>
            
                           <% }
                           else if(adddist <= 32 ){ %>
                            Token :<i>50rs</i><br>Card :<i>40-45rs</i><br>
                           
                          <% }
                           else{ %>
                            Token : <i>60rs</i><br>Card :<i>48-54rs</i><br>
                          
                           <% } %>
          
                    <% }}
                    %>
        </td>
          
        </tr>
        <tr>
          <th scope="row">Time</th>
          <td><i><%- parseInt(distance*2) %></i>min </td>
          
        </tr>
        <tr>
          <th scope="row">Distance</th>
          <td><i><%- Math.ceil(distance) %></i> Km </td>
         
        </tr>
        <tr>
          <th scope="row">Station</th>
          <td><i><%- l-l1+1+1 %></i></td>
        </tr>
      </tbody>
    </table>
  

  <% } %>

  <br>
  <% if(from < 256 && to > 256){ %>
   <p><b>Attention:</b> you are moving from delhi metro to noida metro, you have to exit from Noida sector 52 and walk towards  Noida sector 51 which is arround 300m a head. And Charges for delhi metro are individual from noida metro.</p>
  <% }
  else if(from > 256 && to < 256){ %>
    <p><b>Attention:</b> you are moving from noida metro to delhi metro, you have to exit from Noida sector 51 and walk towards Noida sector 52 which is arround 300m a head. And Charges for delhi metro are individual from noida metro.</p>
  <% }
  %>
   </div>
 <br>
 <br>

  <div id="showroute" style="width: 300px; margin-left:auto;margin-right:auto">
    <hr>
    <br>
    <%
     if(l>1){

      let m = 0
      while(1){
        if((ans2[m] == ans2[m+1]+1) || (ans2[m] == ans2[m+1]-1)){
       break
        }
        m+=1
       
    } %>
    <span class="arrows material-symbols-outlined">
      follow_the_signs
      </span>
  Catch the train from 
         <%  if( station[ans2[m]].dist > station[ans2[1]].dist){ %>
                <%  if(station[ans2[m]].line[0] == 'blue'){ %>
                      <%-  station[ans2[m]].blue.down  %>
                <%   }
                else if (station[ans2[m]].line[0] == 'green'){ %>
              <%-  station[ans2[m]].green.down  %>
               <%     }
               else if (station[ans2[m]].line[0] == 'red'){%>
                 <%-  station[ans2[m]].red.down  %>
               <%   }
                else if (station[ans2[m]].line[0] == 'yellow'){%>
               <%-  station[ans2[m]].yellow.down  %>
              <%  }
              else if (station[ans2[m]].line[0] == 'orange'){%>
                   <%-  station[ans2[m]].orange.down  %>
              <%  }
              else if (station[ans2[m]].line[0] == 'purple'){%>
              <%-  station[ans2[m]].purple.down  %>
              <%  }
                 else if (station[ans2[m]].line[0] == 'grey'){%>
                  <%-  station[ans2[m]].grey.down  %>
              <%  }
               else if (station[ans2[m]].line[0] == 'violet'){%>
               <%-  station[ans2[m]].violet.down  %>
               <% }
                else if (station[ans2[m]].line[0] == 'magenta'){%>
                 <%-  station[ans2[m]].magenta.down  %>
               <% }
               else if (station[ans2[m]].line[0] == 'aqua'){%>
               <%-  station[ans2[m]].aqua.down  %>
               <%     }

               else if (station[ans2[m]].line[0] == 'pink'){%>
               <%-  station[ans2[m]].pink.down  %>
                <% } 
          }
          else{ %>
              <%    if(station[ans2[m]].line[0] == 'blue'){ %>
              <%-  station[ans2[m]].blue.up  %>
              <%   }
              else if (station[ans2[m]].line[0] == 'green'){ %>
              <%-  station[ans2[m]].green.up  %>
              <%     }
              else if (station[ans2[m]].line[0] == 'red'){%>
               <%-  station[ans2[m]].red.up  %>
              <%   }
              else if (station[ans2[m]].line[0] == 'yellow'){%>
              <%-  station[ans2[m]].yellow.up  %>
              <%  }
              else if (station[ans2[m]].line[0] == 'orange'){%>
              <%-  station[ans2[m]].orange.up  %>
              <%  }
            else if (station[ans2[m]].line[0] == 'purple'){%>
             <%-  station[ans2[m]].purple.up  %>
            <%  }
              else if (station[ans2[m]].line[0] == 'grey'){%>
              <%-  station[ans2[m]].grey.up  %>
             <%  }
             else if (station[ans2[m]].line[0] == 'violet'){%>
             <%-  station[ans2[m]].violet.up  %>
             <% }
             else if (station[ans2[m]].line[0] == 'magenta'){%>
             <%-  station[ans2[m]].magenta.up  %>
            <% }
             else if (station[ans2[m]].line[0] == 'aqua'){%>
             <%-  station[ans2[m]].aqua.up  %>
             <%     }
  
            else if (station[ans2[m]].line[0] == 'pink'){%>
            <%-  station[ans2[m]].pink.up  %>
            <% } %>
      <% }
  }
     for(const lines in ans3){ %>
      <% if(ans3[lines].length != 1){ %> 
        <% for (const node in ans3[lines]) { %>
          <br>
          <div style="background-color:<%- station[ans3[lines][node]].line[0] %> ;" class="station_name">
                
            <% if(station[ans3[lines][node]].line[0] == 'blue' || station[ans3[lines][node]].line[0] == 'red' || station[ans3[lines][node]].line[0] == 'green' ){
              j = j+1
              %> 
              <b style="color:white ;">  <%-  station[ans3[lines][node]].name %> </b>
          <%  }
          else{ 
            j = j+1
            %>
            <b>  <%-  station[ans3[lines][node]].name %> </b>
         <% } %>
          </div>
            <% if(j!=l){ 
              %>
          <span style="size: 12px;color:<%- station[ans3[lines][node]].line[0] %> " class="material-symbols-outlined">
            arrow_downward
            </span>
            <% } %>
          <%  } %>
       <br><br>
        <div>
        <% if(j!=l ){
          if(station[ans2[j]].line[0] != station[ans2[j-1]].line[0]){   %>
            <span class="arrows material-symbols-outlined">
              follow_the_signs
              </span>
         Move towards 

<%
if( (parseInt(lines)+parseInt(1)) < l1){ 
  let l3 = parseInt(lines)+parseInt(1) 
  %>
 <%  if(station[ans3[lines][ans3[lines].length-1]].line[1] == 'blue'){ %>
    <% if (ans3[l3][0]-ans3[l3][1] < 0){ %> 
      <%-  station[ans3[l3][0]].blue.up  %>
      <% }
      else{ %>
        <%-  station[ans3[l3][0]].blue.down  %>
     <% } %>
  <%   }
  else if (station[ans3[lines][ans3[lines].length-1]].line[1] == 'green'){ %>
    <% if (ans3[l3][0]-ans3[l3][1] < 0){ %> 
      <%-  station[ans3[l3][0]].green.up  %>
      <% }
      else{ %>
        <%-  station[ans3[l3][0]].green.down  %>
     <% } %>
  <%     }
  else if (station[ans3[lines][ans3[lines].length-1]].line[1] == 'red'){%>
    <% if (ans3[l3][0]-ans3[l3][1] < 0){ %> 
      <%-  station[ans3[l3][0]].red.up  %>
      <% }
      else{ %>
        <%-  station[ans3[l3][0]].red.down  %>
     <% } %>
  <%   }
  else if (station[ans3[lines][ans3[lines].length-1]].line[1] == 'yellow'){%>
    <% if (ans3[l3][0]-ans3[l3][1] < 0){ %> 
      <%-  station[ans3[l3][0]].yellow.up  %>
      <% }
      else{ %>
        <%-  station[ans3[l3][0]].yellow.down  %>
     <% } %>
  <%  }
  else if (station[ans3[lines][ans3[lines].length-1]].line[1] == 'orange'){%>
    <% if (ans3[l3][0]-ans3[l3][1] < 0){ %> 
      <%-  station[ans3[l3][0]].orange.up  %>
      <% }
      else{ %>
        <%-  station[ans3[l3][0]].orange.down  %>
     <% } %>
  <%  }
  else if (station[ans3[lines][ans3[lines].length-1]].line[1] == 'purple'){%>
    <% if (ans3[l3][0]-ans3[l3][1] < 0){ %> 
      <%-  station[ans3[l3][0]].purple.up  %>
      <% }
      else{ %>
        <%-  station[ans3[l3][0]].purple.down  %>
     <% } %>
  <%  }
  else if (station[ans3[lines][ans3[lines].length-1]].line[1] == 'grey'){%>
    <% if (ans3[l3][0]-ans3[l3][1] < 0){ %> 
      <%-  station[ans3[l3][0]].grey.up  %>
      <% }
      else{ %>
        <%-  station[ans3[l3][0]].grey.down  %>
     <% } %>
  <%  }
  else if (station[ans3[lines][ans3[lines].length-1]].line[1] == 'violet'){%>
    <% if (ans3[l3][0]-ans3[l3][1] < 0){ %> 
      <%-  station[ans3[l3][0]].violet.up  %>
      <% }
      else{ %>
        <%-  station[ans3[l3][0]].violet.down  %>
     <% } %>
  <% }
  else if (station[ans3[lines][ans3[lines].length-1]].line[1] == 'magenta'){%>
    <% if (ans3[l3][0]-ans3[l3][1] < 0){  %> 
      <%-  station[ans3[l3][0]].magenta.up  %>
      <% }
      else{ 
        
      console.log(ans3[l3][0])
      %>
        
        <%-  station[ans3[l3][0]].magenta.down  %>
     <% } %>
  <% }
  else if (station[ans3[lines][ans3[lines].length-1]].line[1] == 'aqua'){%>
    <% if (ans3[l3][0]-ans3[l3][1] < 0){ %> 
      <%-  station[ans3[l3][0]].aqua.up  %>
      <% }
      else{ %>
        <%-  station[ans3[l3][0]].aqua.down  %>
     <% } %>
  <%     }
  else if (station[ans3[lines][ans3[lines].length-1]].line[1] == 'pink'){%>
    <% if (ans3[l3][0]-ans3[l3][1] < 0){ %> 
      <%-  station[ans3[l3][0]].pink.up  %>
      <% }
      else{ %>
        <%-  station[ans3[l3][0]].pink.down  %>
     <% } %>
  <%     } %>
 
<% }
    %>
  </div>
          <br>
       <%  }} %>
        <% }} %>
       <br>
  </div>
  <br><br>
  <div id="thanks" style="border-radius:12px; ">Wishing you a happy journey</div>
  <br><br>
</body>
</html>
<style>
  .station_name{
   border-radius: 12px;
  }
  body {
    text-align: center;
  }
  #search_box{
    box-shadow: 0px 3px 13px 0px rgba(0,0,0,0.6);
-webkit-box-shadow: 0px 3px 13px 0px rgba(0,0,0,0.6);
-moz-box-shadow: 0px 3px 13px 0px rgba(0,0,0,0.6);
  }
  #header{
    box-shadow: 0px 3px 13px 0px rgba(0,0,0,0.6);
-webkit-box-shadow: 0px 3px 13px 0px rgba(0,0,0,0.6);
-moz-box-shadow: 0px 3px 13px 0px rgba(0,0,0,0.6);
border-radius: 12px;
  }
  #thanks{
    box-shadow: 0px 3px 13px 0px rgba(0,0,0,0.6);
-webkit-box-shadow: 0px 3px 13px 0px rgba(0,0,0,0.6);
-moz-box-shadow: 0px 3px 13px 0px rgba(0,0,0,0.6);
border-radius: 12px;
width: fit-content;
padding: 10px;
margin-left: auto;
margin-right: auto;
  }
  #adddetail{
    box-shadow: 0px 3px 13px 0px rgba(0,0,0,0.6);
-webkit-box-shadow: 0px 3px 13px 0px rgba(0,0,0,0.6);
-moz-box-shadow: 0px 3px 13px 0px rgba(0,0,0,0.6);
border-radius: 12px;

  }
</style>
<script>
  let find = document.getElementById('find')
  find.addEventListener('click',()=>{
    let from = document.getElementById('from').value
    let to = document.getElementById('to').value
    
    window.open(`/findroute?from=${from}&to=${to}`,"_self")
  })
  const arrows= document.querySelectorAll('.arrows');

setInterval(()=>{
  
  arrows.forEach(box => {
  box.style.color = 'white';
  
});
},500)
setInterval(()=>{
  
  arrows.forEach(box => {
  box.style.color = 'black';
  
});
},1000)
</script>