<!--
Pseudocodes@nuraqilasqf7007:

1. When user submits the form:
2. Get the sequence input from user.
3. If the input is empty:
    3.1 Show error message saying "No sequence provided."
4. If input is not empty:
    4.1 Look at the first line of the input:
        4.1.1 If the first line start with 'LOCUS', we know it's GenBank format.
        4.1.2 If the first line start with 'ID', then it's EMBL format.
        4.1.3 If neither, set the format as Unknown.
5. If the format is Unknown:
    5.1 Show error message saying "Unknown sequence format."
6. If the format detected successfully:
    6.1 Show to user what format we detected (GenBank or EMBL).
    6.2 Let user choose output format: FASTA or GCG.
-->

<!DOCTYPE html>
<html>
<head>
  <title>Online System for Conversion of Sequence File Format</title>
  <style>
    body { font-family: Arial, sans-serif; background-color: #ffffff; margin: 0; }
    .header { background-color: #000000; color: white; padding: 20px; text-align: center; }
    .navbar { background-color: #333333; text-align: center; }
    .navbar a {
      display: inline-block;
      color: white;
      padding: 12px 20px;
      text-decoration: none;
      font-weight: bold;
    }
    .navbar a:hover { background-color: #555555; }
    .container {
      border: 1px solid black;
      padding: 40px;
      width: 700px;
      margin: 50px auto;
      text-align: center;
    }
    .inner-box {
      border: 1px solid black;
      padding: 25px;
      margin-top: 30px;
    }
    h2 { margin-bottom: 20px; }
    p.description { font-size: 1.1em; margin-bottom: 20px; }
    .steps {
      border: 1px solid black;
      padding: 20px;
      margin-top: 20px;
      text-align: center;
    }
    .steps p {
      margin: 10px 0;
      font-size: 1.1em;
    }
    .pseudocode {
      border: 1px solid black;
      padding: 20px;
      margin-top: 40px;
      text-align: left;
      font-family: monospace;
      background-color: #f9f9f9;
    }
    .footer {
      background-color: #000000;
      color: white;
      padding: 10px;
      text-align: center;
      margin-top: 50px;
    }
  </style>
</head>

<body>

  <div class="header">
    <h1>Online System for Conversion of Sequence File Format</h1>
  </div>

  <div class="navbar">
    <a href="mainpage.html">Start Conversion Here</a>
  </div>

  <div class="container">

    <div class="inner-box">
        <h2>Welcome To The Sequence Conversion System</h2>
        <p class="description">This system allows you to:</p>

        <div class="steps">
            <p>1. Paste sequences in GenBank or EMBL format</p>
            <p>2. Automatically detect the input format</p>
            <p>3. Display format detected</p>
            <p>4. Select output format (FASTA or GCG)</p>
        </div>

        <p style="font-style: italic; margin-top:30px;">Click "Start Conversion" to begin.</p>

        </div>

    </div>

  </div>

  <div class="footer">
    <p>Prepared by Nuraqila Mohd Murshid | 23111794 | Master of Bioinformatics</p>
  </div>

</body>
</html>