<!DOCTYPE html>
<html lang="en">
<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, search, find, route , shortest, from, to , findroute, findpath,pink line,blue line,green line,red line, magenta line,purple line,grey line,voilet line,yellow line,orange line, delhi metro, metroinfoxyz ">
  <meta name="author" content="Monu Dixit">
    <script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
    <!-- CSS only -->
<!-- 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>
<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 <%- color %> line</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/monu123-bot/metroblog">github repo</a>
            </li>
              </li>
  
          
        </ul>
  
      </div>
    </div>
  </nav>
 <br>

 <br>

 
      <div style="width:200px ;margin-left:auto;margin-right:auto;text-align: center;font-size: small;">
        <h6 style="font-family: 'Lobster', cursive;
        font-family: 'PT Sans Narrow', sans-serif;margin-left: auto;margin-right: auto;">Delhi metro <%- color %> line</h6><br>
        <% for (const item in station) { %>
          <%  if(station[item].line[0] == color) {  %>

              <div class="single_station d-flex bd-highlight">
                <div class="left_lines p-2 flex-fill bd-highlight">
                <% if(station[item].line.length == 2 ){ %>
                  <a href="/lines?color=<%- station[item].line[1] %>">
                     <div   style="height:90%;width: 100%; background-color: <%- station[item].line[1] %>;"><span class="sidelines material-symbols-outlined">
                      radio_button_checked
                      </span></div></a>

               <% } %>
               <% if(station[item].line.length == 3 ){ %>
                <a href="/lines?color=<%- station[item].line[1] %>">
                <div  style="height:40%;width: 100%;margin-bottom: 5%; background-color: <%- station[item].line[1] %>;"><span class=" sidelines material-symbols-outlined">
                  radio_button_checked
                  </span></div></a>
                <a href="/lines?color=<%- station[item].line[1] %>">
                <div  style="height:40%;width: 100%; background-color: <%- station[item].line[2] %>"><span class=" sidelines material-symbols-outlined">
                  radio_button_checked
                  </span></div></a>

          <% } %>
                </div>
                <div style="background-color:<%- color %> ;" class="station_name p-2 flex-fill bd-highlight">
                
                  <% if(color == 'blue' || color == 'green' || color == 'red'){ %> 
                    <b style="color:white ;">  <%-  station[item].name %> </b>
                <%  }
                else{ %>
                  <b>  <%-  station[item].name %> </b>
               <% } %>
                  
                
                </div>
                <div class="right_lines p-2 flex-fill bd-highlight">
                  <% if(station[item].line.length == 2 ){ %>
                    <a href="/lines?color=<%- station[item].line[1] %>"> <div  style="height:90%;width: 100%; background-color: <%- station[item].line[1] %>;"><span class="sidelines material-symbols-outlined">
                      radio_button_checked
                      </span></div></a>

              <% } %>
              <% if(station[item].line.length == 3 ){ %>
                <a href="/lines?color=<%- station[item].line[1] %>">
               <div style="height:40%;width: 100%;margin-bottom: 5%; background-color: <%- station[item].line[1] %>;"><span class="sidelines material-symbols-outlined">
                radio_button_checked
                </span></div></a>
               <a href="/lines?color=<%- station[item].line[1] %>">
               <div   style="height:40%;width: 100%; background-color: <%- station[item].line[2] %>"><span class="sidelines material-symbols-outlined">
                radio_button_checked
                </span></div></a>

         <% } %>
                </div>
              </div>
            
              <div   style="width:20px ;margin-left:auto;margin-right:auto; height:30px;background-color:<%- color %>"></div>



<%
 } } %>
      </div>
      
      <br><br>
</body>
<style>
  .sidelines{
  font-size: 20px;

  }
  .single_station{
   
  } 
  .station_name{
   border-radius: 12px;
  } 
  
  
  .right_lines{

  
  } 
  .left_lines{
  
} 
    #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;
  }
  .box,.box2{
	transition:all 0.05s ease-in-out;
}
.box{
  width:300px; height:50px;  
  border:solid 5px #000;
  
  border-radius: 50%/100px 100px 0 0;
}

.box2 {
   width: 300px;
   height: 5px;
   border: solid 5px #000;

  border-radius: 0 0 240px 50%/60px;
}
.hide{
  display: none;
}
.show{
  display: inline;
}
</style>
<script>
const sidelines= document.querySelectorAll('.sidelines');


setInterval(()=>{
  
  sidelines.forEach(box => {
  box.style.color = 'white';
  
});
},500)
setInterval(()=>{
  
  sidelines.forEach(box => {
  box.style.color = 'black';
  
});
},1000)

</script>