subline/views/dashboardPage/ejs/modal.ejs

<div id="modal" class="modal" style="display:none;">
    <div class="modalBox">
        <svg id="modalClose" width="35" height="35" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>

        <div id="modalContent">
            <form id="modalSpreadsheetUpload" class="modalSpreadsheetUpload" method="post" action="/feedback" style="display:none;">
                <h3>Choose a file to upload your <span id="modalSpreadsheetTitle"></span></h3>
                <input id="spreadsheetInput" class="fileUpload" name="file" type="file">
                <input type="hidden" name="type">
                <input class="button" type="submit" value="SUBMIT">
                <a id="spreadsheetDownload">download template</a>
            </form>

            <form id="modalFeedback" style="display:none;" method="post" action="/feedback">
                <label>Title:
                    <input id="feedbackTitle" required>
                </label>

                <textarea id="feedbackContent" placeholder="Your Feedback..." rows="10" cols="50"></textarea>

                <input class="button" type="submit" value="SUBMIT">
            </form>

            <form id="modalNewMerchant" style="display:none;" method="post">
                <h2>NEW MERCHANT</h2>
                    
                <label>NAME:
                    <input type="text" id="addMerchantName" required>
                </label>

                <input type="submit" class="button" value="SUBMIT">
            </form>

            <div id="modalConfirm" style="display:none;">
                <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="10"></circle>
                    <line x1="12" y1="8" x2="12" y2="12"></line>
                    <line x1="12" y1="16" x2="12.01" y2="16"></line>
                </svg>

                <p></p>

                <div class="buttonBox">
                    <button id="modalConfirmNoButton" class="button">CANCEL</button>

                    <button id="modalConfirmButton" class="dangerButton">DELETE</button>
                </div>
            </div>

            <div id="modalSquareLocations" style="display:none">
                <h2 id="squareLocationsTitle">CHOOSE A LOCATION</h2>

                <div id="squareLocationsButtons"></div>

                <button id="squareLocationsCancel" class="dangerButton">CANCEL</button>
            </div>

            <div id="modalEditSubIngredients" style="display:none">
                <h2>EDIT SUB INGREDIENTS</h2>

                <div id="editSubIngredientsHeaders">
                    <h3>AVAILABLE</h3>
                    <h3>SUB-INGREDIENTS</h3>
                </div>

                <div id="editSubIngredientsContainer">
                    <div id="editSubAllIng"></div>
                    <div id="editSubCurrentIng"></div>
                </div>

                <div class="buttonBox">
                    <button id="cancelEditSubIngredients" class="dangerButton">CANCEL</button>

                    <button id="submitEditSubIngredients" class="button">CONFIRM</button>
                </div>

                <template id="selectedSubIngredient">
                    <div class="selectedIngredient">
                        <p></p>
                        
                        <div>
                            <input type="number" min="0" step="0.01" placeholder="QUANTITY">

                            <button class="newOrderRemove">REMOVE</button>
                        </div>
                    </div>
                </template>
            </div>

            <div id="modalCircularReference" style="display:none">
                <h2></h2>

                <div></div>

                <button id="circularReferenceButton" class="button">OK</button>
            </div>

            <div id="modalUnitConversion" style="display:none">
                <h2>Some of your ingredients' units do not match</h2>

                <h3>Please enter conversion rates for the following ingredients in this recipe</h3>

                <div id="unitConversions"></div>

                <button id="submitAlternateUnits" class="button">SUBMIT</button>

                <template id="convertUnitOption">
                    <div class="convertUnitOption">
                        <h2></h2>

                        <div>
                            <div class="convertInputBox">
                                <input type="number" step="0.01">
    
                                <p></p>
                            </div>
    
                            <h1>=</h1>
    
                            <div class="convertInputBox">
                                <input type="number" step="0.01">
    
                                <p></p>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</div>