index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
    />
    <title>Which waves</title>
  </head>
  <body class="grey lighten-3">
    <nav class="z-depth-0 grey lighten-4">
      <div class="nav-wrapper container">
        <a href="#" class="brand-logo">
          <img src="img/logo.png" style="width: 180px; margin-top: 10px;" />
        </a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
          <li class="logged-in">
            <a href="#" class="grey-text modal-trigger" data-target="modal-account">Account</a>
          </li>
          <li class="logged-in">
            <a href="#" class="grey-text" id="logout">Logout</a>
          </li>
          <li class="logged-in">
            <a href="#" class="grey-text modal-trigger" data-target="modal-create">Create Guide</a>
          </li>
          <li class="logged-out">
            <a href="#" class="grey-text modal-trigger" data-target="modal-login">Login</a>
          </li>
          <li class="logged-out">
            <a href="#" class="grey-text modal-trigger" data-target="modal-signup">Sign up</a>
          </li>
        </ul>
      </div>
    </nav>

    <div id="modal-signup" class="modal">
      <div class="modal-content">
        <h4>Sign up</h4>
        <br />
        <form id="signup-form">
          <div class="input-field">
            <input type="email" id="signup-email" required />
            <label for="signup-email">Email address</label>
          </div>
          <div class="input-field">
            <input type="password" id="signup-password" required />
            <label for="signup-password">Choose password</label>
          </div>
          <button class="btn yellow darken-2 z-depth-0">Sign up</button>
        </form>
      </div>
    </div>

    <div id="modal-login" class="modal">
      <div class="modal-content">
        <h4>Login</h4>
        <br />
        <form id="login-form">
          <div class="input-field">
            <input type="email" id="login-email" required />
            <label for="login-email">Email address</label>
          </div>
          <div class="input-field">
            <input type="password" id="login-password" required />
            <label for="login-password">Your password</label>
          </div>
          <button class="btn yellow darken-2 z-depth-0">Login</button>
        </form>
      </div>
    </div>

    <div id="modal-account" class="modal">
      <div class="modal-content">
        <h4>Account details</h4>
        <br />
        <div class="account-details"></div>
      </div>
    </div>

    <div id="modal-create" class="modal">
      <div class="modal-content">
        <h4>Create Guide</h4>
        <br />
        <form id="create-form">
          <div class="input-field">
            <input type="text" id="title" required />
            <label for="title">Guide Title</label>
          </div>
          <div class="input-field">
            <textarea id="content" class="materialize-textarea" required></textarea>
            <label for="content">Guide Content</label>
          </div>
          <div>
            <button class="btn yellow darken-2 z-depth-0">Create</button>
          </div>
        </form>
      </div>
    </div>

    <div class="container" style="margin-top: 40px;">
      <ul class="collapsible z-depth-0 guides" style="border: none;">
        <li>
          <div class="collapsible-header grey lighten-4">Guide title</div>
          <div class="collapsible-body white">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit dolores totam qui ipsum eius,
            harum animi incidunt sequi error nobis ipsa, inventore ipsam numquam necessitatibus fuga
            ullam eveniet, ex in?
          </div>
        </li>
        <li>
          <div class="collapsible-header grey lighten-4">Guide title</div>
          <div class="collapsible-body white">
            <span>
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit dolores totam qui ipsum
              eius, harum animi incidunt sequi error nobis ipsa, inventore ipsam numquam necessitatibus
              fuga ullam eveniet, ex in?
            </span>
          </div>
        </li>
        <li>
          <div class="collapsible-header grey lighten-4">Guide title</div>
          <div class="collapsible-body white">
            <span>
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit dolores totam qui ipsum
              eius, harum animi incidunt sequi error nobis ipsa, inventore ipsam numquam necessitatibus
              fuga ullam eveniet, ex in?
            </span>
          </div>
        </li>
        <li>
          <div class="collapsible-header grey lighten-4">Guide title</div>
          <div class="collapsible-body white">
            <span>
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit dolores totam qui ipsum
              eius, harum animi incidunt sequi error nobis ipsa, inventore ipsam numquam necessitatibus
              fuga ullam eveniet, ex in?
            </span>
          </div>
        </li>
      </ul>
    </div>

    <script src="scripts/config.js"></script>
    <script src="https://www.gstatic.com/firebasejs/6.4.2/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/6.4.2/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/6.4.2/firebase-firestore.js"></script>
    <script>
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);

      // make auth and firestore references
      const auth = firebase.auth();
      const db = firebase.firestore();

      // update firestore settings
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script src="scripts/auth.js"></script>
    <script src="scripts/index.js"></script>
  </body>
</html>