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
      href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700"
      rel="stylesheet"
    />
    <link rel="shortcut icon" href="src/img/favicon.png" type="image/x-icon" />

    <link rel="stylesheet" href="src/sass/main.scss" />
    <script defer type="module" src="src/js/controller.js"></script>

    <title>forkify // Search over 1,000,000 recipes</title>
  </head>

  <body>
    <div class="container">
      <header class="header">
        <img src="src/img/logo.png" alt="Logo" class="header__logo" />
        <form class="search">
          <input
            type="text"
            class="search__field"
            placeholder="Search over 1,000,000 recipes..."
          />
          <button class="btn search__btn">
            <svg class="search__icon">
              <use href="src/img/icons.svg#icon-search"></use>
            </svg>
            <span>Search</span>
          </button>
        </form>

        <nav class="nav">
          <ul class="nav__list">
            <li class="nav__item">
              <button class="nav__btn nav__btn--add-recipe">
                <svg class="nav__icon">
                  <use href="src/img/icons.svg#icon-edit"></use>
                </svg>
                <span>Add recipe</span>
              </button>
            </li>
            <li class="nav__item">
              <button class="nav__btn nav__btn--bookmarks">
                <svg class="nav__icon">
                  <use href="src/img/icons.svg#icon-bookmark"></use>
                </svg>
                <span>Bookmarks</span>
              </button>
              <div class="bookmarks">
                <ul class="bookmarks__list">
                  <div class="message">
                    <div>
                      <svg>
                        <use href="src/img/icons.svg#icon-smile"></use>
                      </svg>
                    </div>
                    <p>
                      No bookmarks yet. Find a nice recipe and bookmark it :)
                    </p>
                  </div>

                  <!-- <li class="preview">
                    <a class="preview__link" href="#23456">
                      <figure class="preview__fig">
                        <img src="src/img/test-1.jpg" alt="Test" />
                      </figure>
                      <div class="preview__data">
                        <h4 class="preview__name">
                          Pasta with Tomato Cream ...
                        </h4>
                        <p class="preview__author">The Pioneer Woman</p>
                      </div>
                    </a>
                  </li> -->
                </ul>
              </div>
            </li>
          </ul>
        </nav>
      </header>

      <div class="search-results">
        <div class="sort-panel">
          <span class="sort-param">Prep time</span>
          <button
            data-property="cooking_time"
            data-direction="+1"
            class="sort-btn time--asc"
          >
            ⬆
          </button>
          <button
            data-property="cooking_time"
            data-direction="-1"
            class="sort-btn time--dsc"
          >
            ⬇
          </button>
          <span class="sort-param">Ingredients #</span>
          <button
            data-property="numberOfIngredients"
            data-direction="+1"
            class="sort-btn time--asc"
          >
            ⬆
          </button>
          <button
            data-property="numberOfIngredients"
            data-direction="-1"
            class="sort-btn time--dsc"
          >
            ⬇
          </button>
        </div>
        <ul class="results">
          <!-- 
          <li class="preview">
            <a class="preview__link preview__link--active" href="#23456">
              <figure class="preview__fig">
                <img src="src/img/test-1.jpg" alt="Test" />
              </figure>
              <div class="preview__data">
                <h4 class="preview__title">Pasta with Tomato Cream ...</h4>
                <p class="preview__publisher">The Pioneer Woman</p>
                <div class="preview__user-generated">
                  <svg>
                    <use href="src/img/icons.svg#icon-user"></use>
                  </svg>
                </div>
              </div>
            </a>
          </li>
           -->
        </ul>

        <div class="pagination">
          <!-- <button class="btn--inline pagination__btn--prev">
            <svg class="search__icon">
              <use href="src/img/icons.svg#icon-arrow-left"></use>
            </svg>
            <span>Page 1</span>
          </button>
          <button class="btn--inline pagination__btn--next">
            <span>Page 3</span>
            <svg class="search__icon">
              <use href="src/img/icons.svg#icon-arrow-right"></use>
            </svg>
          </button> -->
        </div>

        <p class="copyright">
          &copy; Copyright by
          <a
            class="twitter-link"
            target="_blank"
            href="https://twitter.com/jonasschmedtman"
            >Jonas Schmedtmann</a
          >. Use for learning or your portfolio. Don't use to teach. Don't claim
          as your own.
        </p>
      </div>

      <div class="recipe">
        <div class="message">
          <div>
            <svg>
              <use href="src/img/icons.svg#icon-smile"></use>
            </svg>
          </div>
          <p>Start by searching for a recipe or an ingredient. Have fun!</p>
        </div>

        <!-- <div class="spinner">
          <svg>
            <use href="src/img/icons.svg#icon-loader"></use>
          </svg>
        </div> -->

        <!-- <div class="error">
            <div>
              <svg>
                <use href="src/img/icons.svg#icon-alert-triangle"></use>
              </svg>
            </div>
            <p>No recipes found for your query. Please try again!</p>
          </div> -->

        <!--
        <figure class="recipe__fig">
          <img src="src/img/test-1.jpg" alt="Tomato" class="recipe__img" />
          <h1 class="recipe__title">
            <span>Pasta with tomato cream sauce</span>
          </h1>
        </figure>

        <div class="recipe__details">
          <div class="recipe__info">
            <svg class="recipe__info-icon">
              <use href="src/img/icons.svg#icon-clock"></use>
            </svg>
            <span class="recipe__info-data recipe__info-data--minutes">45</span>
            <span class="recipe__info-text">minutes</span>
          </div>
          <div class="recipe__info">
            <svg class="recipe__info-icon">
              <use href="src/img/icons.svg#icon-users"></use>
            </svg>
            <span class="recipe__info-data recipe__info-data--people">4</span>
            <span class="recipe__info-text">servings</span>

            <div class="recipe__info-buttons">
              <button class="btn--tiny btn--increase-servings">
                <svg>
                  <use href="src/img/icons.svg#icon-minus-circle"></use>
                </svg>
              </button>
              <button class="btn--tiny btn--increase-servings">
                <svg>
                  <use href="src/img/icons.svg#icon-plus-circle"></use>
                </svg>
              </button>
            </div>
          </div>

          <div class="recipe__user-generated">
            <svg>
              <use href="src/img/icons.svg#icon-user"></use>
            </svg>
          </div>
          <button class="btn--round">
            <svg class="">
              <use href="src/img/icons.svg#icon-bookmark-fill"></use>
            </svg>
          </button>
        </div>

        <div class="recipe__ingredients">
          <h2 class="heading--2">Recipe ingredients</h2>
          <ul class="recipe__ingredient-list">
            <li class="recipe__ingredient">
              <svg class="recipe__icon">
                <use href="src/img/icons.svg#icon-check"></use>
              </svg>
              <div class="recipe__quantity">1000</div>
              <div class="recipe__description">
                <span class="recipe__unit">g</span>
                pasta
              </div>
            </li>

            <li class="recipe__ingredient">
              <svg class="recipe__icon">
                <use href="src/img/icons.svg#icon-check"></use>
              </svg>
              <div class="recipe__quantity">0.5</div>
              <div class="recipe__description">
                <span class="recipe__unit">cup</span>
                ricotta cheese
              </div>
            </li>
          </ul>
        </div>

        <div class="recipe__directions">
          <h2 class="heading--2">How to cook it</h2>
          <p class="recipe__directions-text">
            This recipe was carefully designed and tested by
            <span class="recipe__publisher">The Pioneer Woman</span>. Please check out
            directions at their website.
          </p>
          <a
            class="btn--small recipe__btn"
            href="http://thepioneerwoman.com/cooking/pasta-with-tomato-cream-sauce/"
            target="_blank"
          >
            <span>Directions</span>
            <svg class="search__icon">
              <use href="src/img/icons.svg#icon-arrow-right"></use>
            </svg>
          </a>
        </div>
        -->
      </div>
    </div>

    <div class="overlay hidden"></div>
    <div class="add-recipe-window hidden">
      <button class="btn--close-modal">&times;</button>
      <form class="upload">
        <div style="display: block">
          <h3 class="upload__heading">Recipe data</h3>
          <div class="upload__column data">
            <label>Title</label>
            <input
              required
              name="title"
              type="text"
              placeholder="Recipe title"
            />
            <label>URL</label>
            <input
              required
              name="sourceUrl"
              type="text"
              placeholder="Recipe URL"
            />
            <label>Image URL</label>
            <input required name="image" type="text" placeholder="Image URL" />
            <label>Publisher</label>
            <input
              required
              name="publisher"
              type="text"
              placeholder="Publisher"
            />
            <label>Prep time</label>
            <input
              required
              name="cookingTime"
              type="number"
              placeholder="Time in minutes"
            />
            <label>Servings</label>
            <input
              required
              name="servings"
              type="number"
              placeholder="Number of servings"
            />
          </div>
        </div>

        <div style="display: block">
          <h3 class="upload__heading">Ingredients</h3>
          <div class="upload__column ingredients scrollbox">
            <div class="ingredient-row 1">
              <label>Ingredient 1</label>
              <input
                type="number"
                step="0.01"
                min="0.01"
                required
                name="ingredient-1-quantity"
                placeholder="Quantity"
              />
              <input type="text" name="ingredient-1-unit" placeholder="Unit" />
              <input
                type="text"
                name="ingredient-1-description"
                placeholder="Description"
              />
            </div>
            <div class="ingredient-row 2">
              <label>Ingredient 2</label>
              <input
                type="number"
                step="0.01"
                min="0.01"
                name="ingredient-2-quantity"
                placeholder="Quantity"
              />
              <input type="text" name="ingredient-2-unit" placeholder="Unit" />
              <input
                type="text"
                name="ingredient-2-description"
                placeholder="Description"
              />
            </div>
            <div class="ingredient-row 3">
              <label>Ingredient 3</label>
              <input
                type="number"
                step="0.01"
                min="0.01"
                name="ingredient-3-quantity"
                placeholder="Quantity"
              />
              <input type="text" name="ingredient-3-unit" placeholder="Unit" />
              <input
                type="text"
                name="ingredient-3-description"
                placeholder="Description"
              />
            </div>
            <div class="ingredient-row 4">
              <label>Ingredient 4</label>
              <input
                type="number"
                step="0.01"
                min="0.01"
                name="ingredient-4-quantity"
                placeholder="Quantity"
              />
              <input type="text" name="ingredient-4-unit" placeholder="Unit" />
              <input
                type="text"
                name="ingredient-4-description"
                placeholder="Description"
              />
            </div>
            <div class="ingredient-row 5">
              <label>Ingredient 5</label>
              <input
                type="number"
                step="0.01"
                min="0.01"
                name="ingredient-5-quantity"
                placeholder="Quantity"
              />
              <input type="text" name="ingredient-5-unit" placeholder="Unit" />
              <input
                type="text"
                name="ingredient-5-description"
                placeholder="Description"
              />
            </div>
            <div class="ingredient-row 6">
              <label>Ingredient 6</label>
              <input
                type="number"
                step="0.01"
                min="0.01"
                name="ingredient-6-quantity"
                placeholder="Quantity"
              />
              <input type="text" name="ingredient-6-unit" placeholder="Unit" />
              <input
                type="text"
                name="ingredient-6-description"
                placeholder="Description"
              />
            </div>
          </div>
        </div>
        <button class="btn upload__btn">
          <svg>
            <use href="src/img/icons.svg#icon-upload-cloud"></use>
          </svg>
          <span>Upload</span>
        </button>
        <button class="upload__add-row">+</button>
      </form>
    </div>
    <div class="overlay-message hidden"></div>
    <div class="message-window hidden">
      <button class="btn--close-message">&times;</button>
      <div class="messages"></div>
    </div>
  </body>
</html>