summaryrefslogtreecommitdiff
path: root/views
diff options
context:
space:
mode:
Diffstat (limited to 'views')
-rw-r--r--views/account/account.ejs44
-rw-r--r--views/account/changepass.ejs25
-rw-r--r--views/account/editBio.ejs27
-rw-r--r--views/account/saved.ejs33
-rw-r--r--views/category/cats.ejs38
-rw-r--r--views/index.ejs30
-rw-r--r--views/login.ejs26
-rw-r--r--views/partials/bio.ejs19
-rw-r--r--views/partials/categories.ejs8
-rw-r--r--views/partials/footer.ejs3
-rw-r--r--views/partials/header.ejs25
-rw-r--r--views/partials/magicBio.ejs21
-rw-r--r--views/partials/magicCats.ejs8
-rw-r--r--views/partials/magicPops.ejs14
-rw-r--r--views/partials/magicSets.ejs15
-rw-r--r--views/partials/nav.ejs59
-rw-r--r--views/partials/popular.ejs14
-rw-r--r--views/partials/search.ejs18
-rw-r--r--views/partials/settings.ejs15
-rw-r--r--views/recipe/create.ejs51
-rw-r--r--views/recipe/createStep.ejs29
-rw-r--r--views/recipe/edit.ejs71
-rw-r--r--views/recipe/editSteps.ejs29
-rw-r--r--views/recipe/show.ejs55
-rw-r--r--views/recipe/upload.ejs26
-rw-r--r--views/register.ejs32
-rw-r--r--views/search.ejs38
27 files changed, 773 insertions, 0 deletions
diff --git a/views/account/account.ejs b/views/account/account.ejs
new file mode 100644
index 0000000..3c4e4ea
--- /dev/null
+++ b/views/account/account.ejs
@@ -0,0 +1,44 @@
+<%- include('../partials/header') %>
+<%- include('../partials/nav') %>
+
+<div class='content'>
+ <% if(usr) { %>
+ <% if(usr._id.equals(account.author.id)) { %>
+ <%- include('../partials/settings') %>
+ <% } else { %>
+ <%- include('../partials/categories') %>
+ <% } %>
+ <% } else { %>
+ <%- include('../partials/categories') %>
+ <% } %>
+ <div class='main'>
+ <div class='recList'>
+ <% recipes.map(s => { %>
+ <div class='recCard'>
+ <img src="/images/<%= s.author.username %>/<%= s.picture %>" alt="recipe">
+ <a href='/recipe/<%= s._id %>'><%= s.title %></a>
+ <% if(usr) { %>
+ <% if(usr._id.equals(s.author.id)) { %>
+ <div class='recControl'>
+ <form action="/recipe/<%= s._id %>/edit">
+ <button class='acRecBtns'><i class='fas fa-edit'></i></button>
+ </form>
+ <form action='/recipe/<%= s._id %>?_method=DELETE' method='POST'>
+ <button class='acRecBtns' type='submit'><i class='fas fa-trash'></i></button>
+ </form>
+ </div>
+ <% } %>
+ <% } %>
+ </div>
+ <% }) %>
+ </div>
+ </div>
+ <%- include('../partials/bio') %>
+</div>
+<% if(usr) { %>
+ <%- include('../partials/magicSets') %>
+<% } else { %>
+ <%- include('../partials/magicCats') %>
+<% } %>
+<%- include('../partials/magicBio') %>
+<%- include('../partials/footer') %>
diff --git a/views/account/changepass.ejs b/views/account/changepass.ejs
new file mode 100644
index 0000000..25dc1fe
--- /dev/null
+++ b/views/account/changepass.ejs
@@ -0,0 +1,25 @@
+<%- include('../partials/header') %>
+<%- include('../partials/nav') %>
+
+<div class='content'>
+ <%- include('../partials/settings') %>
+ <div class='main'>
+ <div class='logCard'>
+ <h4 style='text-align: center;'>Edit Bio</h4>
+ <div class='fff'>
+ <form id='logform' action="/account/<%= usr._id %>/changepass" method='POST'>
+ <label for="">Old Password:</label>
+ <input type="password" name='oldpassword'>
+ <label for="">New Password:</label>
+ <input type="password" name='newpassword'>
+ <button><i class='fas fa-edit'></i></button>
+ </form>
+ </div>
+ </div>
+ </div>
+ <%- include('../partials/bio') %>
+</div>
+
+<%- include('../partials/magicSets') %>
+<%- include('../partials/magicBio') %>
+<%- include('../partials/footer') %>
diff --git a/views/account/editBio.ejs b/views/account/editBio.ejs
new file mode 100644
index 0000000..fb0a95b
--- /dev/null
+++ b/views/account/editBio.ejs
@@ -0,0 +1,27 @@
+<%- include('../partials/header') %>
+<%- include('../partials/nav') %>
+
+<div class='content'>
+ <%- include('../partials/settings') %>
+ <div class='main'>
+ <div class='logCard'>
+ <h4 style='text-align: center;'>Edit Bio</h4>
+ <div class='fff'>
+ <form id='logform' action="/account/<%= usr._id %>?_method=PUT" method='POST'>
+ <label for="">Name:</label>
+ <input type="text" name='bio[name]' value='<%= account.bio.name %>'>
+ <label for="">Website:</label>
+ <input type="text" name='bio[website]' value='<%= account.bio.website %>'>
+ <label for="">About:</label>
+ <input type="text" name='bio[about]' value='<%= account.bio.about %>'>
+ <button><i class='fas fa-edit'></i></button>
+ </form>
+ </div>
+ </div>
+ </div>
+ <%- include('../partials/bio') %>
+</div>
+
+<%- include('../partials/magicSets') %>
+<%- include('../partials/magicBio') %>
+<%- include('../partials/footer') %>
diff --git a/views/account/saved.ejs b/views/account/saved.ejs
new file mode 100644
index 0000000..2e4c864
--- /dev/null
+++ b/views/account/saved.ejs
@@ -0,0 +1,33 @@
+<%- include('../partials/header') %>
+<%- include('../partials/nav') %>
+
+<div class='content'>
+ <%- include('../partials/settings') %>
+ <div class='main'>
+ <div class='recList'>
+ <% recipes.map(s => { %>
+ <div class='recCard'>
+ <img src="/images/<%= s.author.username %>/<%= s.picture %>" alt="recipe">
+ <a href='/recipe/<%= s._id %>'><%= s.title %></a>
+ <% if(usr) { %>
+ <% if(usr._id.equals(s.author.id)) { %>
+ <div class='recControl'>
+ <form action="/recipe/<%= s._id %>/edit">
+ <button class='acRecBtns'><i class='fas fa-edit'></i></button>
+ </form>
+ <form action='/recipe/<%= s._id %>?_method=DELETE' method='POST'>
+ <button class='acRecBtns' type='submit'><i class='fas fa-trash'></i></button>
+ </form>
+ </div>
+ <% } %>
+ <% } %>
+ </div>
+ <% }) %>
+ </div>
+ </div>
+ <%- include('../partials/bio') %>
+</div>
+
+<%- include('../partials/magicSets') %>
+<%- include('../partials/magicBio') %>
+<%- include('../partials/footer') %>
diff --git a/views/category/cats.ejs b/views/category/cats.ejs
new file mode 100644
index 0000000..694a03b
--- /dev/null
+++ b/views/category/cats.ejs
@@ -0,0 +1,38 @@
+<%- include('../partials/header') %>
+<%- include('../partials/nav') %>
+<%- include('../partials/search') %>
+
+<div class='content'>
+ <%- include('../partials/categories') %>
+ <div class='main'>
+ <div class='recList'>
+ <% recipes.filter(r => { %>
+ <% if(r.category.toLowerCase() === query) { %>
+ <div class='recCard'>
+ <img src="/images/<%= r.author.username %>/<%= r.picture %>" alt="recipe">
+ <a href='/recipe/<%= r._id %>'><%= r.title %></a>
+ <% if(usr) { %>
+ <% if(usr._id.equals(r.author.id)) { %>
+ <div class='recControl'>
+ <form action="/recipe/<%= r._id %>/edit">
+ <button class='acRecBtns'><i class='fas fa-edit'></i></button>
+ </form>
+ <form action='/recipe/<%= r._id %>?_method=DELETE' method='POST'>
+ <button class='acRecBtns' type='submit'><i class='fas fa-trash'></i></button>
+ </form>
+ </div>
+ <% } %>
+ <% } %>
+ </div>
+ <% } %>
+ <% }) %>
+
+
+ </div>
+ </div>
+ <%- include('../partials/popular') %>
+</div>
+
+<%- include('../partials/magicCats') %>
+<%- include('../partials/magicPops') %>
+<%- include('../partials/footer') %>
diff --git a/views/index.ejs b/views/index.ejs
new file mode 100644
index 0000000..d66a90b
--- /dev/null
+++ b/views/index.ejs
@@ -0,0 +1,30 @@
+<%- include('partials/header') %>
+<%- include('partials/nav') %>
+<%- include('partials/search') %>
+
+<div class='content'>
+ <%- include('partials/categories') %>
+ <div class='main'>
+ <div class='welcome'>
+ <h4>Welcome to the International Kitchen</h4>
+ <p>A web application to find and share recipes with friends without the hassles of things likes adds and trackers.</p>
+ <br>
+ <h4>Instructions</h4>
+ <p>Simply create an account and start sharing your recipes. Please avoid using stock photos. Every recipe has a photo, category, list of ingredients and instruction steps. You can choose any category you want or make your own. </p>
+ <p>If you experience any problems or bugs email me at gferrand@vagrantz.xyz</p>
+ <br>
+ <h4>Donate</h4>
+ <p>This app is free and has no adds. If you enjoy using this app consider donating to help support this project (:</p>
+ <form action="https://www.paypal.com/donate" method="post" target="_top" style='display: flex; justify-content: center'>
+ <input type="hidden" name="hosted_button_id" value="MBP43328GCS7C" />
+ <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
+ <img alt="" border="0" src="https://www.paypal.com/en_PT/i/scr/pixel.gif" width="1" height="1" />
+ </form>
+ <br>
+ </div>
+ </div>
+ <%- include('partials/popular') %>
+</div>
+<%- include('partials/magicCats') %>
+<%- include('partials/magicPops') %>
+<%- include('partials/footer') %>
diff --git a/views/login.ejs b/views/login.ejs
new file mode 100644
index 0000000..4415a64
--- /dev/null
+++ b/views/login.ejs
@@ -0,0 +1,26 @@
+<%- include('partials/header') %>
+<%- include('partials/nav') %>
+<%- include('partials/search') %>
+
+<div class='content'>
+ <%- include('partials/categories') %>
+ <div class='main'>
+ <div class='logCard'>
+ <h4 style='text-align: center'>Login</h4>
+ <div class='fff'>
+ <form id='logform' action="/login" method='POST'>
+ <label for="">Email:</label>
+ <input type="email" name='username'>
+ <label for="">Password:</label>
+ <input type="password" name='password'>
+ <button type='submit'>Login</button>
+ </form>
+ </div>
+ </div>
+ </div>
+ <%- include('partials/popular') %>
+</div>
+
+<%- include('partials/magicCats') %>
+<%- include('partials/magicPops') %>
+<%- include('partials/footer') %>
diff --git a/views/partials/bio.ejs b/views/partials/bio.ejs
new file mode 100644
index 0000000..198aa27
--- /dev/null
+++ b/views/partials/bio.ejs
@@ -0,0 +1,19 @@
+<div class='pops'>
+ <div class='bioDisplay'>
+ <h4><%= account.bio.name %></h4>
+ <ul>
+ <li>
+ <p>Email:</p>
+ <p><%= account.author.username %></p>
+ </li>
+ <li>
+ <p>Website:</p>
+ <p><%= account.bio.website %></p>
+ </li>
+ <li>
+ <p>About:</p>
+ <p><%= account.bio.about %></p>
+ </li>
+ </ul>
+ </div>
+</div> \ No newline at end of file
diff --git a/views/partials/categories.ejs b/views/partials/categories.ejs
new file mode 100644
index 0000000..638b2bb
--- /dev/null
+++ b/views/partials/categories.ejs
@@ -0,0 +1,8 @@
+<div class='cats'>
+ <h4>Categories</h4>
+ <ul>
+ <% cats.map(c => { %>
+ <li><a href='/categories/<%= c.toLowerCase() %>'><%= c %></a></li>
+ <% }) %>
+ </ul>
+</div> \ No newline at end of file
diff --git a/views/partials/footer.ejs b/views/partials/footer.ejs
new file mode 100644
index 0000000..89a9ee1
--- /dev/null
+++ b/views/partials/footer.ejs
@@ -0,0 +1,3 @@
+<script type='text/javascript' src="/libs/resp.js"></script>
+</body>
+</html>
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
new file mode 100644
index 0000000..13a6cf0
--- /dev/null
+++ b/views/partials/header.ejs
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Recipes</title>
+ <link rel="stylesheet" type='text/css' href="/main.css">
+ <script defer src="/libs/fontawesome/all.min.js"></script>
+ <script type='text/javascript' src="/libs/jquery/jquery-3.6.0.min.js"></script>
+</head>
+<body>
+<% if(error && error.length > 0) { %>
+ <div">
+ <div class='flashCardError' role="alert">
+ <%= error %>
+ </div>
+ </div>
+<% } %>
+<% if(success && success.length > 0) { %>
+ <div>
+ <div class='flashCardSuccess' role="alert">
+ <%= success %>
+ </div>
+ </div>
+<% } %>
diff --git a/views/partials/magicBio.ejs b/views/partials/magicBio.ejs
new file mode 100644
index 0000000..4d448a1
--- /dev/null
+++ b/views/partials/magicBio.ejs
@@ -0,0 +1,21 @@
+<div class='magicPops invis'>
+ <div class='magicbioDisplay'>
+ <h4><%= account.bio.name %></h4>
+ <ul>
+ <% if(usr) { %>
+ <li>
+ <p>Email:</p>
+ <p><%= account.author.username %></p>
+ </li>
+ <% } %>
+ <li>
+ <p>Website:</p>
+ <p><%= account.bio.website %></p>
+ </li>
+ <li>
+ <p>About:</p>
+ <p><%= account.bio.about %></p>
+ </li>
+ </ul>
+ </div>
+</div>
diff --git a/views/partials/magicCats.ejs b/views/partials/magicCats.ejs
new file mode 100644
index 0000000..fb49d05
--- /dev/null
+++ b/views/partials/magicCats.ejs
@@ -0,0 +1,8 @@
+<div class='magicCats invis'>
+ <h4>Categories</h4>
+ <ul>
+ <% cats.map(c => { %>
+ <li><a href='/categories/<%= c.toLowerCase() %>'><%= c %></a></li>
+ <% }) %>
+ </ul>
+</div>
diff --git a/views/partials/magicPops.ejs b/views/partials/magicPops.ejs
new file mode 100644
index 0000000..3583b7b
--- /dev/null
+++ b/views/partials/magicPops.ejs
@@ -0,0 +1,14 @@
+<div class='magicPops invis'>
+ <h4>Popular</h4>
+ <div class='popCard'>
+ <% popular.map(p => { %>
+ <div class='popular'>
+ <h5><%= p.title %></h5>
+ <img src="/images/<%= p.author.username %>/<%= p.picture %>" alt="recipe" style='width: 10rem; height: 10rem; object-fit: cover;'>
+ <form action="/recipe/<%= p._id %>">
+ <button>See Recipe</button>
+ </form>
+ </div>
+ <% }) %>
+ </div>
+</div>
diff --git a/views/partials/magicSets.ejs b/views/partials/magicSets.ejs
new file mode 100644
index 0000000..b61d3bb
--- /dev/null
+++ b/views/partials/magicSets.ejs
@@ -0,0 +1,15 @@
+<div class='magicSets invis'>
+ <h4>Settings</h4>
+ <ul>
+ <li><a href='/account/<%= usr._id %>/bio/edit'>Edit Bio</a></li>
+ <li><a href='/account/<%= usr._id %>/saved'>Saved Recipes</a></li>
+ <li><a href='/account/<%= usr._id %>/changepass'>Change Password</a></li>
+ <li>
+ <form action="/account/<%= usr._id %>?_method=DELETE" method='POST'>
+ <button style='background-color: rgba(255,255,255,0); border: none; padding: 0; color: blueviolet; font-size: medium;'>
+ Delete Account
+ </button>
+ </form>
+ </li>
+ </ul>
+</div>
diff --git a/views/partials/nav.ejs b/views/partials/nav.ejs
new file mode 100644
index 0000000..838d228
--- /dev/null
+++ b/views/partials/nav.ejs
@@ -0,0 +1,59 @@
+<div class='nav'>
+ <% if(page === 'home') { %>
+ <% if(usr) { %>
+ <h4><a href="/" style='background-color: crimson'>Recipes</a></h4>
+ <h4><a href='/recipe/create'>Create</a></h4>
+ <h4><a href='/account/<%= usr._id %>'>Account</a></h4>
+ <h4><a href='/logout'>Logout</a></h4>
+ <% } else { %>
+ <h4><a href="/" style='background-color: crimson'>Recipes</a></h4>
+ <h4><a href="/login">Login</a></h4>
+ <h4><a href='/register'>Register</a></h4>
+ <% } %>
+ <% } else if(page === 'login') { %>
+ <h4><a href="/">Recipes</a></h4>
+ <h4><a href="/login" style='background-color: crimson'>Login</a></h4>
+ <h4><a href='/register'>Register</a></h4>
+ <% } else if(page === 'register') { %>
+ <h4><a href="/">Recipes</a></h4>
+ <h4><a href="/login">Login</a></h4>
+ <h4><a href='/register' style='background-color: crimson'>Register</a></h4>
+ <% } else if(page === 'create') { %>
+ <% if(usr) { %>
+ <h4><a href="/">Recipes</a></h4>
+ <h4><a href='/recipe/create' style='background-color: crimson'>Create</a></h4>
+ <h4><a href='/account/<%= usr._id %>'>Account</a></h4>
+ <h4><a href='/logout'>Logout</a></h4>
+ <% } %>
+ <% } else if(page === 'account') { %>
+ <% if(usr) { %>
+ <h4><a href="/">Recipes</a></h4>
+ <h4><a href='/recipe/create'>Create</a></h4>
+ <h4><a href='/account/<%= usr._id %>' style='background-color: crimson'>Account</a></h4>
+ <h4><a href='/logout'>Logout</a></h4>
+ <% } else { %>
+ <h4><a href="/" style='background-color: crimson'>Recipes</a></h4>
+ <h4><a href="/login">Login</a></h4>
+ <h4><a href='/register'>Register</a></h4>
+ <% } %>
+ <% } else if(page === 'show') { %>
+ <% if(usr) { %>
+ <h4><a href="/" style='background-color: crimson'>Recipes</a></h4>
+ <h4><a href='/recipe/create'>Create</a></h4>
+ <h4><a href='/account/<%= usr._id %>'>Account</a></h4>
+ <h4><a href='/logout'>Logout</a></h4>
+ <% } else { %>
+ <h4><a href="/" style='background-color: crimson'>Recipes</a></h4>
+ <h4><a href="/login">Login</a></h4>
+ <h4><a href='/register'>Register</a></h4>
+ <% } %>
+ <% } else if(page === 'search') { %>
+ <h4><a href="/" style='background-color: crimson'>Recipes</a></h4>
+ <h4><a href="/login">Login</a></h4>
+ <h4><a href='/register'>Register</a></h4>
+ <% } else { %>
+ <h4><a href="/">Recipes</a></h4>
+ <h4><a href="/login">Login</a></h4>
+ <h4><a href='/register'>Register</a></h4>
+ <% } %>
+</div> \ No newline at end of file
diff --git a/views/partials/popular.ejs b/views/partials/popular.ejs
new file mode 100644
index 0000000..af83f34
--- /dev/null
+++ b/views/partials/popular.ejs
@@ -0,0 +1,14 @@
+<div class='pops'>
+ <h4>Popular</h4>
+ <div class='popCard'>
+ <% popular.map(p => { %>
+ <div class='popular'>
+ <h5><%= p.title %></h5>
+ <img src="/images/<%= p.author.username %>/<%= p.picture %>" alt="recipe" style='width: 10rem; height: 10rem; object-fit: cover;'>
+ <form action="/recipe/<%= p._id %>">
+ <button>See Recipe</button>
+ </form>
+ </div>
+ <% }) %>
+ </div>
+</div>
diff --git a/views/partials/search.ejs b/views/partials/search.ejs
new file mode 100644
index 0000000..f838b4c
--- /dev/null
+++ b/views/partials/search.ejs
@@ -0,0 +1,18 @@
+<div class='searchbox'>
+ <h2>Search Recipes</h2>
+ <form id='searchForm'>
+ <% if(page === 'search') { %>
+ <input id='srchInpt' type="text" value='<%= query %>'>
+ <button id='srchBtn' type='submit'>
+ <i class='fas fa-search'></i>
+ </button>
+ <% } else {%>
+ <input id='srchInpt' type="text">
+ <button id='srchBtn' type='submit'>
+ <i class='fas fa-search'></i>
+ </button>
+ <% } %>
+ </form>
+</div>
+
+<script type='text/javascript' src="/libs/search.js"></script> \ No newline at end of file
diff --git a/views/partials/settings.ejs b/views/partials/settings.ejs
new file mode 100644
index 0000000..08ac1cd
--- /dev/null
+++ b/views/partials/settings.ejs
@@ -0,0 +1,15 @@
+<div class='sets'>
+ <h4>Settings</h4>
+ <ul>
+ <li><a href='/account/<%= usr._id %>/bio/edit'>Edit Bio</a></li>
+ <li><a href='/account/<%= usr._id %>/saved'>Saved Recipes</a></li>
+ <li><a href='/account/<%= usr._id %>/changepass'>Change Password</a></li>
+ <li>
+ <form action="/account/<%= usr._id %>?_method=DELETE" method='POST'>
+ <button style='background-color: rgba(255,255,255,0); border: none; padding: 0; color: blueviolet; font-size: medium;'>
+ Delete Account
+ </button>
+ </form>
+ </li>
+ </ul>
+</div> \ No newline at end of file
diff --git a/views/recipe/create.ejs b/views/recipe/create.ejs
new file mode 100644
index 0000000..a6921a8
--- /dev/null
+++ b/views/recipe/create.ejs
@@ -0,0 +1,51 @@
+<%- include('../partials/header') %>
+<%- include('../partials/nav') %>
+
+<div class='content'>
+ <%- include('../partials/categories') %>
+ <div class='main'>
+ <div class='createCard'>
+ <h4 style='text-align: center'>Create Recipe</h4>
+ <form id='createForm' action="/recipe" method='POST'>
+ <label for="">Title:</label>
+ <input type="text" name='recipe[title]'>
+ <label for="">Image:</label>
+ <!-- <input type="text" name='recipe[picture]'> -->
+ <!-- <input type="file" name='picture' accept='image/png, image/jpg'> -->
+ <a href='/recipe/image/upload'>Upload image</a>
+ <% if(files) { %>
+ <select id="" name="recipe[picture]">
+ <% files.map(f => { %>
+ <option value='<%= f %>'><%= f %></option>
+ <% }) %>
+ </select>
+ <% } %>
+ <label for="">Category:</label>
+ <input type="text" name='recipe[category]'>
+ <label for="">Ingridients:</label>
+ <input type="text" name='recipe[ingridients]'>
+ <label for="">Number of steps:</label>
+ <div class='stepControl'>
+ <input id='stpnum' type="number" value=0 name='recipe[nsteps]'>
+ <div class='stepBtns'>
+ <button id='minus' onclick='prevent(event)'>-</button>
+ <button id='plus' onclick='prevent(event)'>+</button>
+ </div>
+ </div>
+ <button id='sub' type="submit">Create</button>
+ </form>
+ </div>
+ </div>
+ <%- include('../partials/popular') %>
+</div>
+
+<script type='text/javascript' src='/libs/main.js'></script>
+<script type='text/javascript'>
+ const prevent = (e) => {
+ e.preventDefault();
+ }
+</script>
+
+<%- include('../partials/magicCats') %>
+<%- include('../partials/magicPops') %>
+<%- include('../partials/footer') %>
diff --git a/views/recipe/createStep.ejs b/views/recipe/createStep.ejs
new file mode 100644
index 0000000..99812f4
--- /dev/null
+++ b/views/recipe/createStep.ejs
@@ -0,0 +1,29 @@
+<%- include('../partials/header') %>
+<%- include('../partials/nav') %>
+
+<div class='content'>
+ <%- include('../partials/categories') %>
+ <div class='main'>
+ <div class='createCard'>
+ <h4 style='text-align: center'>Create Recipe Step</h4>
+ <form id='createForm' action="/recipe/<%= recipe._id %>/step" method='POST'>
+ <label for="">Step Number:</label>
+ <input name='newStep[number]' type='text'>
+ <label for="">Step instructions:</label>
+ <textarea name='newStep[step]'></textarea>
+ <button>Edit</button>
+ </form>
+ </div>
+ </div>
+ <%- include('../partials/popular') %>
+</div>
+
+<script type='text/javascript'>
+ const prevent = (e) => {
+ e.preventDefault();
+ }
+</script>
+
+<%- include('../partials/magicCats') %>
+<%- include('../partials/magicPops') %>
+<%- include('../partials/footer') %>
diff --git a/views/recipe/edit.ejs b/views/recipe/edit.ejs
new file mode 100644
index 0000000..d72b3e4
--- /dev/null
+++ b/views/recipe/edit.ejs
@@ -0,0 +1,71 @@
+<%- include('../partials/header') %>
+<%- include('../partials/nav') %>
+
+<div class='content'>
+ <%- include('../partials/categories') %>
+ <div class='main'>
+ <div class='editCard'>
+ <h4 style='text-align: center'>Edit Recipe Details and Ingredients</h4>
+ <form id='createForm' action="/recipe/<%= recipe._id %>?_method=PUT" method='POST'>
+ <label for="">Title:</label>
+ <input type="text" name='recipe[title]' value='<%= recipe.title %>'>
+ <label for="">Image:</label>
+ <a href='/recipe/image/upload'>Upload image</a>
+ <% if(files) { %>
+ <select id="" name="recipe[picture]">
+ <option value='<%= recipe.picture %>' selected disabled> <%= recipe.picture %>
+ <% files.map(f => { %>
+ <option value='<%= f %>'><%= f %></option>
+ <% }) %>
+ </select>
+ <% } %>
+ <label for="">Category:</label>
+ <input type="text" name='recipe[category]' value='<%= recipe.category %>'>
+ <label for="">Ingredients:</label>
+ <input type="text" name='recipe[ingridients]' value='<%= recipe.ingridients %>'>
+ <label for="">Number of steps:</label>
+ <div class='stepControl'>
+ <input id='stpnum' type="number" value='<%= recipe.steps.length %>' name='recipe[nsteps]'>
+ </div>
+ <button id='sub' type="submit">Edit</button>
+ </form>
+ </div>
+ <div class='stepsToEd'>
+ <h4>Instructions (<%= recipe.steps.length %> steps)</h4>
+ <% recipe.steps.map(s => { %>
+ <div class='stepToEd' style='display: flex; padding: 0'>
+ <div style='display:flex; flex-direction: column; width: 100%;'>
+ <h5>Step <%= s.number %>:</h5>
+ <p><%= s.step %></p>
+ </div>
+ <div class='edtr' style="display: flex; flex-direction: column; align-items: right; justify-content: center; margin: 0; padding: 0">
+ <form action="/recipe/<%= recipe._id %>/step/<%= s._id %>/edit" onclick="(e) => e.preventDefult()">
+ <button class='editStpBtns' style='margin: 0; padding: .25rem'>
+ <i class='fas fa-edit'></i>
+ </button>
+ </form>
+ <form action="/recipe/<%= recipe._id %>/step/<%= s._id %>?_method=DELETE" method='POST'>
+ <button class='editStpBtns' style='margin: 0; padding: .25rem'>
+ <i class='fas fa-trash'></i>
+ </button>
+ </form>
+ </div>
+ </div>
+ <% }) %>
+ </div>
+ <form style='margin-top: 0;' id='createForm' action="/recipe/<%= recipe._id %>/step/create">
+ <button id='addStep'>Add a step</button>
+ </form>
+ </div>
+ <%- include('../partials/popular') %>
+</div>
+
+<script type='text/javascript'>
+ const prevent = (e) => {
+ e.preventDefault();
+ }
+</script>
+
+<%- include('../partials/magicCats') %>
+<%- include('../partials/magicPops') %>
+<%- include('../partials/footer') %>
diff --git a/views/recipe/editSteps.ejs b/views/recipe/editSteps.ejs
new file mode 100644
index 0000000..1df2a68
--- /dev/null
+++ b/views/recipe/editSteps.ejs
@@ -0,0 +1,29 @@
+<%- include('../partials/header') %>
+<%- include('../partials/nav') %>
+
+<div class='content'>
+ <%- include('../partials/categories') %>
+ <div class='main'>
+ <div class='createCard'>
+ <h4 style='text-align: center'>Edit Recipe Steps</h4>
+ <form id='createForm' action="/recipe/<%= recipe._id %>/step/<%= step._id %>?_method=PUT" method='POST'>
+ <label id='added<%= step.number %>' for="">Step Number:</label>
+ <input id='added<%= step.number %>' name='step[number]' type='text' value='<%= step.number %>'>
+ <label id='added<%= step.number %>' for="">Step instructions:</label>
+ <textarea id='added<%= step.number %>' name='step[step]'><%= step.step %></textarea>
+ <button><i class='fas fa-edit'></i></button>
+ </form>
+ </div>
+ </div>
+ <%- include('../partials/popular') %>
+</div>
+
+<script type='text/javascript'>
+ const prevent = (e) => {
+ e.preventDefault();
+ }
+</script>
+
+<%- include('../partials/magicCats') %>
+<%- include('../partials/magicPops') %>
+<%- include('../partials/footer') %>
diff --git a/views/recipe/show.ejs b/views/recipe/show.ejs
new file mode 100644
index 0000000..9fcc771
--- /dev/null
+++ b/views/recipe/show.ejs
@@ -0,0 +1,55 @@
+<%- include('../partials/header') %>
+<%- include('../partials/nav') %>
+
+<div class='content'>
+ <%- include('../partials/categories') %>
+ <div class='main'>
+ <h4 style='text-align: center'><%= recipe.title %>,
+ by <a style='text-decoration: none;' href="/account/<%= recipe.author.id %>">
+ <em><%= recAuthor.bio.name %></em></a>
+ </h4>
+ <div class='recIngImg'>
+ <div class='savImg'>
+ <img src="/images/<%= recipe.author.username %>/<%= recipe.picture %>" alt="recipe" style='max-width: 25rem'>
+ <% if(usr) { %>
+ <% if(account.favorites.includes(recipe._id)) { %>
+ <form class='saveRecForm' action="/recipe/<%= recipe._id %>/unsave?_method=PUT" method='POST'>
+ <button id='saveBtn'>Saved</button>
+ </form>
+ <% } else { %>
+ <form class='saveRecForm' action="/recipe/<%= recipe._id %>/save?_method=PUT" method='POST'>
+ <button id='saveBtn'>Save</button>
+ </form>
+ <% } %>
+ <% } %>
+ </div>
+ <div class='Ing'>
+ <h5>Ingredients:</h5>
+ <ul>
+ <% ingridients.map(i => { %>
+ <li><%= i %></li>
+ <% }) %>
+ </ul>
+ </div>
+ </div>
+ <p class='category'><span>
+ <a style='text-decoration: none;' href="/categories/<%= recipe.category.toLowerCase() %>">
+ <%= recipe.category %>
+ </a>
+ </span></p>
+ <div class='steps'>
+ <h4>Instructions (<%= recipe.steps.length %> steps)</h4>
+ <% recipe.steps.map(s => { %>
+ <div>
+ <h5>Step <%= s.number %>:</h5>
+ <p><%= s.step %></p>
+ </div>
+ <% }) %>
+ </div>
+ </div>
+ <%- include('../partials/popular') %>
+</div>
+
+<%- include('../partials/magicCats') %>
+<%- include('../partials/magicPops') %>
+<%- include('../partials/footer') %>
diff --git a/views/recipe/upload.ejs b/views/recipe/upload.ejs
new file mode 100644
index 0000000..e8a9c81
--- /dev/null
+++ b/views/recipe/upload.ejs
@@ -0,0 +1,26 @@
+<%- include('../partials/header') %>
+<%- include('../partials/nav') %>
+
+<div class='content'>
+ <%- include('../partials/categories') %>
+ <div class='main'>
+ <div class='createCard'>
+ <h4 style='text-align: center'>Upload Recipe Image</h4>
+ <form action="/recipe/image" method='POST' enctype="multipart/form-data">
+ <input type='file' name='image'>
+ <button>Upload</button>
+ </form>
+ </div>
+ </div>
+ <%- include('../partials/popular') %>
+</div>
+
+<script type='text/javascript'>
+ const prevent = (e) => {
+ e.preventDefault();
+ }
+</script>
+
+<%- include('../partials/magicCats') %>
+<%- include('../partials/magicPops') %>
+<%- include('../partials/footer') %>
diff --git a/views/register.ejs b/views/register.ejs
new file mode 100644
index 0000000..1dbc13e
--- /dev/null
+++ b/views/register.ejs
@@ -0,0 +1,32 @@
+<%- include('partials/header') %>
+<%- include('partials/nav') %>
+<%- include('partials/search') %>
+
+<div class='content'>
+ <%- include('partials/categories') %>
+ <div class='main'>
+ <div class='logCard'>
+ <h4 style='text-align: center'>Register</h4>
+ <div class='fff'>
+ <form id='logform' action="/register" method='POST'>
+ <label for="" type='text'>Name</label>
+ <input type="text" name='name'>
+ <label for="">Email:</label>
+ <input type="email" name='username'>
+ <label for="">Website:</label>
+ <input type="text" name='website'>
+ <label for="">About:</label>
+ <input type="text" name='about'>
+ <label for="">Password:</label>
+ <input type="password" name='password'>
+ <button type='submit'>Register</button>
+ </form>
+ </div>
+ </div>
+ </div>
+ <%- include('partials/popular') %>
+</div>
+
+<%- include('partials/magicCats') %>
+<%- include('partials/magicPops') %>
+<%- include('partials/footer') %>
diff --git a/views/search.ejs b/views/search.ejs
new file mode 100644
index 0000000..3bf35be
--- /dev/null
+++ b/views/search.ejs
@@ -0,0 +1,38 @@
+<%- include('partials/header') %>
+<%- include('partials/nav') %>
+<%- include('partials/search') %>
+
+<div class='content'>
+ <%- include('partials/categories') %>
+ <div class='main'>
+ <div class='recList'>
+ <% recipes.filter(r => { %>
+ <% if(r.title.toLowerCase().includes(query.toLowerCase())) { %>
+ <div class='recCard'>
+ <img src="/images/<%= r.author.username %>/<%= r.picture %>" alt="recipe">
+ <a href='/recipe/<%= r._id %>'><%= r.title %></a>
+ <% if(usr) {%>
+ <% if(usr._id.equals(r.author.id)) { %>
+ <div class='recControl'>
+ <form action="/recipe/<%= r._id %>/edit">
+ <button class='acRecBtns'><i class='fas fa-edit'></i></button>
+ </form>
+ <form action='/recipe/<%= r._id %>?_method=DELETE' method='POST'>
+ <button class='acRecBtns' type='submit'><i class='fas fa-trash'></i></button>
+ </form>
+ </div>
+ <% } %>
+ <% } %>
+ </div>
+ <% } else { %>
+
+ <% } %>
+ <% }) %>
+ </div>
+ </div>
+ <%- include('partials/popular') %>
+</div>
+
+<%- include('partials/magicCats') %>
+<%- include('partials/magicPops') %>
+<%- include('partials/footer') %>