<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mastowall 1.0</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar navbar-light">
        <a class="navbar-brand" href="#" id="navbar-brand"></a>
        <span class="navbar-info d-none d-md-block" id="hashtag-display"></span>
    </nav>

    <div id="zero-state" class="d-none">
      <div class="container py-5 text-center"> <!-- add the text-center class here -->
          <div class="row justify-content-center">
              <div class="col-sm-6"> <!-- Increase the number of columns here -->
                  <h2>Welcome to the Mastowall</h2>
                  <p>Please enter up to three hashtags to load posts:</p>
                  <form id="hashtag-form">
                    <div class="form-group">
                        <label for="hashtag1">Hashtag 1:</label>
                        <input type="text" class="form-control" id="hashtag1" placeholder="Enter a hashtag">
                    </div>
                    <div class="form-group">
                        <label for="hashtag2">Hashtag 2:</label>
                        <input type="text" class="form-control" id="hashtag2" placeholder="Enter a hashtag">
                    </div>
                    <div class="form-group">
                        <label for="hashtag3">Hashtag 3:</label>
                        <input type="text" class="form-control" id="hashtag3" placeholder="Enter a hashtag">
                    </div>
                    <div class="form-group">
                        <label for="serverUrl">Server:</label>
                        <input type="text" class="form-control" id="serverUrl" placeholder="Enter server URL" value="https://mastodon.social">
                    </div>
                  
                    <button type="submit" class="btn btn-primary">Reload</button>
                  </form>
              </div>
          </div>
      </div>
  </div>
  
    <div id="app-content" class="container">
        <div class="row masonry-grid" id="wall"></div>
    </div>

    <footer class="footer text-center py-4 mt-5">
      <div class="container">
          <span class="text-muted">Host your own Mastowall - check </span>
          <a href="https://github.com/rstockm/mastowall" target="_blank">GitHub</a>
      </div>
    </footer>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script>
    <script src="script.js"></script>
</body>
</html>