1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5<!-- This site is hosted on Netlify. Anyone can build and deploy a site 6 like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=3700c028-c8a8-4978-9f02-ae9c6e3d77fe 7 Netlify hosting facts for this site: static/SSR served via Netlify Edge. --> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 9 <title>Food Recipes API</title> 10 <link rel="icon" href="favicon.png" type="image/png"> 11 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"> 12 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css"> 13 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" /> 14 <link rel = "stylesheet" href = "style.css"> 15
15<script src="https://kit.fontawesome.com/7bfbe4cf77.js" crossorigin="anonymous"></script>
15 16</head> 17<body> 18 19 <div class = "container"> 20 <div class = "meal-wrapper"> 21 <div class = "meal-search"> 22 <h2 class = "title">Find Meals By Ingredients</h2> 23 <blockquote>Real food doesn't have ingredients, real food is ingredients.<br> 24 <cite>- Jamie Oliver</cite> 25 </blockquote> 26 27 <div class = "meal-search-box"> 28 <input type = "text" class = "search-control" placeholder="Enter an ingredient" id = "search-input"> 29 <button type = "submit" class = "search-btn btn" id = "search-btn"> 30 <i class = "fas fa-search"></i> 31 </button> 32 <button type="button" class="clear-btn btn" id="clear-btn"> 33 <i class="fa fa-refresh"></i> 34 </button> 35 </div> 36 </div> 37 38 <div class = "meal-result"> 39 <h2 class = "title">Your Search Results:</h2> 40 <div id= "meal"> 41 <!-- meal item --> 42 43 </div> 44 </div> 45 46 47 <div class = "meal-details"> 48 <!-- recipe close btn --> 49 <button type = "button" class = "btn recipe-close-btn" id = "recipe-close-btn"> 50 <i class = "fas fa-times"></i> 51 </button> 52 53 <!-- meal content --> 54 <div class = "meal-details-content"> 55 <!-- <h2 class = "recipe-title">Meals Name Here</h2> 56 <p class = "recipe-category">Category Name</p> 57 <div class = "recipe-instruct"> 58 <h3>Instructions:</h3> 59 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo blanditiis quis accusantium natus! Porro, reiciendis maiores molestiae distinctio veniam ratione ex provident ipsa, soluta suscipit quam eos velit autem iste!</p> 60 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet aliquam voluptatibus ad obcaecati magnam, esse numquam nisi ut adipisci in?</p> 61 </div> 62 <div class = "recipe-meal-img"> 63 <img src = "food.jpg" alt = ""> 64 </div> 65 <div class = "recipe-link"> 66 <a href = "#" target = "_blank">Watch Video</a> 67 </div> --> 68 </div> 69 </div> 70 </div> 71 </div> 72 73 74 <div class="footer-basic"> 75 <footer> 76 <div class="footer-content"> 77 <div class="copyright"> 78 Software Developer : <a href="https://openmindi.co.za/"><strong>Ali Mora</strong></a> 2023 79 </div> 80 <div class="social"> 81 <a href="https://www.linkedin.com/in/daurius-ali-swarts/" target="_blank"><i class="fa-brands fa-linkedin"></i></a> 82 <a href="https://github.com/alimora83" target="_blank"><i class="fa-brands fa-github"></i></a> 83 <a href="https://twitter.com/swarts_d" target="_blank"><i class="fa-brands fa-twitter"></i></a> 84 </div> 85 </div> 86 87 </footer> 88</div> 89 90
90<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
90 91
91<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
91 92 93<!-- credit to https://epicbootstrap.com/snippets/footer-basic --> 94 95 96
96<script src = "script.js"></script>
96 97</body> 98</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.