<!DOCTYPE html>
<html>

<head>
  <title>eConverse</title>
  <meta name="description" content="eConverse is a simple session-based text-messaging app.">
  <meta name="keywords" content="eConverse, text messaging, chat">
  <meta name="author" content="Alan Zhu">
  <link href="favicon.ico" rel="icon" />
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: Arial, Helvetica, sans-serif;
      width: 100%;
    }
    body,
    html {
      min-height: 100%;
      max-height: 100%;
      margin: 0;
    }
    #box {
      overflow: auto;
      max-height: 94%;
      min-height: 94%;
      position: fixed;
      width: 100%;
    }
    #roomDiv{
      position:fixed; 
      width:100%; 
      height:100%; 
      z-index:100;
      background-color: white;
      padding:2%;
    }
    /*#theader {
      position:absolute;

      text-align:center; 
      top:0; 
      left:0;
      background-color: rgb(255, 240, 152); 
      width:100%;
      padding:5%;
      margin:0;
    }*/
    #headerimg{
      height:20%;
      display:block;
      margin-left:auto;
      margin-right:auto;
    }
      @keyframes linkColor {
  from {color: rgb(0, 162, 255);}
  to {color: rgb(0, 209, 35);}
}


a.link, a.link:visited {
  color: rgb(0, 162, 255);
  text-decoration-line: none;
  font-weight:bold;
}

a.link:hover {
  animation-name: linkColor;
  animation-duration: 0.2s;
  color: rgb(0, 209, 35);
}
    
    #about{
      position:absolute;
      bottom:0;
      left:0;
      text-align:center;
      background-color: lightgrey;
      padding:1%;
      font-family:'Times New Roman', Times, serif;
      font-size:16pt;
      width:100%;
    }
    #roomForm {
      position:relative;
        top:20%;
        left:0;

      margin-right: auto;
      margin-left:auto;
      display:flex;
      flex-direction:row;
    }
      #name {
      text-align: center;
      
        display:inline;
        padding: 3%;
      outline:none;
        width:40%;
      font-size:24pt;
      font-family: 'Times New Roman', Times, serif;
      border:none;
     
      /*border:5px solid lime;*/
      background-color: rgb(0, 133, 221);        
    }

    #siteName {
      text-align: center;
        margin-left:auto;

      display:inline;
        padding: 3% 0.5%;
      outline:none;
      font-size:24pt;
      font-family: 'Times New Roman', Times, serif;
      border:none;
    
      width:30%;
      background-color: rgb(255, 230, 148);        
    }
    #roomSubmit{
      display:inline;
      text-align: center;
        padding: 1%;
        margin-right: auto;
      outline:none;
        width:30%;
      font-size:24pt;
      font-family: 'Times New Roman', Times, serif;
      border:none;
    
      /*border:5px solid lime;*/
      background-color: rgb(124, 255, 141);
    }
    #name::placeholder {
  color: rgb(59, 59, 59);
  opacity: 1; 
}

:-ms-input-placeholder { 
  color: rgb(59, 59, 59);
}

::-ms-input-placeholder {
  color: rgb(59, 59, 59);
}

  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>

<body>
    <div id="roomDiv">
    <a href='/'>
     <img id="headerimg" src="logo.png" alt="eConverse" title="eConverse" />
    </a>
    <br />
    <br />
    <hr noshade>

    <p id="about"><b>eConverse</b> is a simple session-based text-messaging app built using Node.js and WebSockets <br /> ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ <br /> 
      Copyright &copy; 2020-2022 Alan Zhu <br> 
      <a class="link" href="/" title="eConverse Home">Home</a> | <a title="View Code on Github" class="link" target="_blank" href="https://github.com/alanzhu1/eConverse">Open-Source</a></p>
    
  <form action="/" method="POST" id="roomForm">
      <p id="siteName"></p>
        <input title="eConverse Room" id="name" type="text" maxlength="50" autocomplete="off" autofocus required placeholder="Room" />
       <input title="Go to room" id="roomSubmit" type="submit" value="Go to room &#11166;" />
    </form>
  </div>
  
<script>
  $('#siteName').text(window.location.hostname +'/');
  $('#roomForm').submit(function (e) {
      e.preventDefault();
      window.location.href=$('#name').val().replace(' ', '-');
    });
</script>
  
</body>
</html>
