TheRecipeBook/create.html at main · HuedCode88/TheRecipeBook · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Create Page</title>
  <link rel="stylesheet" href="create.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css" />
</head>

<body>
  <div class="recipe-form">
    <h1>Create a Recipe</h1>
    <div class="recipe-top-row">
      <div class="field">
        <label for="recipe-name">Recipe Name</label>
        <input type="text" id="recipe-name" placeholder="e.g., Churrasco con Arroz" required>
      </div>

      <div class="field">
        <label for="serving-size">Serving Size</label>
        <input type="text" id="serving-size" placeholder="e.g., 4 servings">
      </div>

      <div class="field">
        <label for="prep-time">Time to Make</label>
        <input type="text" id="prep-time" placeholder="e.g., 45 minutes">
      </div>
    </div>

    <div class="field">
      <label for="recipe-culture">Select Culture(s)</label>
      <select id="recipe-culture" multiple>
        <option value="american">American</option>
        <option value="brazilian">Brazilian</option>
        <option value="chinese">Chinese</option>
        <option value="french">French</option>
        <option value="indian">Indian</option>
        <option value="italian">Italian</option>
        <option value="japanese">Japanese</option>
        <option value="korean">Korean</option>
        <option value="mexican">Mexican</option>
        <option value="thai">Thai</option>
      </select>

      <label for="recipe-tags">Tags</label>
      <input type="text" id="recipe-tags" placeholder="Add tags like meat, spicy, vegan" />

    </div>

    <label for="recipe-photo">Upload a Photo</label>
    <input type="file" id="recipe-photo" accept="image/*" onchange="previewPhoto(event)">
    <div id="photo-preview" class="center-photo-preview" style="margin-top: 10px;"></div>

    <label for="recipe-description">Description</label>
    <textarea id="recipe-description" rows="4" placeholder="Describe your recipe..." required></textarea>

    <div class="recipe-body">
      <div class="ingredients-section">
        <label for="ingredient-input">Add Ingredient</label>
        <div class="ingredient-controls">
          <input type="text" id="ingredient-input" placeholder="e.g., 1 lb skirt steak">
          <button type="button" class="add-btn" onclick="addIngredient()">
            <span class="plus-sign">+</span> <span class="add-text">Add</span>
          </button>

        </div>

        <label for="ingredient-category">Ingredient Category</label>
        <div class="ingredient-controls">
          <input type="text" id="ingredient-category" placeholder="e.g., Steak, Rice, Sauce">
        </div>

        <div id="categorized-ingredients" class="ingredient-list"></div>
      </div>

      <div class="directions-section">
        <label for="direction-input">Add Direction</label>
        <div class="direction-controls">
          <input type="text" id="direction-input" placeholder="e.g., Set the grill to 450°F">
          <button type="button" class="add-btn" onclick="addDirection()">
            <span class="plus-sign">+</span> <span class="add-text">Add</span>
          </button>
        </div>
        <ol id="directions-list" class="direction-list"></ol>
      </div>
    </div>

    <ol id="directions-list" class="direction-list"></ol>

    <button onclick="backToProfile()" class="back-btn">Back to Profile</button>
    <button class="save-btn" onclick="saveRecipe()">Save</button>
    <button class="submit-btn">Submit Recipe</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
  <script src="create.js"></script>

</body>

</html>