templates/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/bootstrap.min.css') }}">
  <link rel="stylesheet" href="{{ url_for('static',filename='css/menu.css') }}">

  <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
  <title>Meilix Generator</title>
  <link rel="shortcut icon" href="{{ url_for('static', filename='logo.png') }}">
  
</head>
<body>

<div class="open">
  <span class="cls"></span>
  <span>
        		<ul class="sub-menu ">
        			<li>
        				<a href="#about" title="about">About</a>
        			</li>
        			<li>
        				<a href="http://github.com/fossasia/meilix-generator/" title="Github">Github</a>
        			</li>
        		</ul>
        	</span>
  <span class="cls"></span>
</div>

<!--file upload form-->
<form method="POST" enctype="multipart/form-data">
  <div class="container">
    <div class="row mt-3">
      <div class="col-md-4 mx-auto">
        <img src="{{ url_for('static', filename='logo.png') }}" class="img-rounded" alt="meilix generator" width="330"
             height="314">
        <h2 align="center">Meilix Generator</h2>
        <p align="center">A webapp which can generate iso for you</p>
        <div class="form-group">
          <label for="email">Email:</label>
          <input class="form-control" placeholder="Enter email" name="email" title="Email for sending the ISO"
                 required="" type="email">
        </div>
        <div class="form-group">
          <label for="TRAVIS_TAG">Event Name:</label>
          <input pattern="[A-Za-z0-9\s]{1,20}" class="form-control" placeholder="Enter event"
                 title="Event name to trigger build" name="TRAVIS_TAG"
                 required="" type="text">
        </div>

        <div class="form-group">
          <label for="event_url">Event Link:</label>
          <input pattern="https?://.+" class="form-control" placeholder="Enter event link" name="event_url"
                 title="this will be used as home page of the browser" required="" type="url">
        </div>

        <div class="col-md-06">
          <div class="form-group">
            <label>Upload Wallpaper:</label>
            <label class="btn btn-secondary mx-auto btn-block btn-secondary">
              <span style="white-space: pre-wrap;">Browse</span>
              <input name="file" class="file form-control" title="Default Wallpaper Image" style="display: none;"
                     onchange="$(this).prev('span').text($(this).val()!=''?$(this).val():'Browse')" required=""
                     type="file">
            </label>
            <img id="file-upload">
          </div>
        </div>
        <input class="btn btn-info mx-auto btn-block form-control" id="file-upload" value="Build" required=""
               type="submit">
      </div>
    </div>
  </div>
</form>

<script type="text/javascript" src="{{ url_for('static', filename='js/menu.js') }}"></script>

</body>
</html>