Skip to content

Juan Montilla / TBW2223_equipo12

Go to a project
Commit f10856c5 by Juan Montilla
Options

Formato formulario

parent a5baaf48
Inline Side-by-side
Showing with 245 additions and 90 deletions
app/Views/pages/home.php
...@@ -122,8 +122,8 @@ ...@@ -122,8 +122,8 @@
<li class="nav-item"> <li class="nav-item">
<a class="nav-link collapsed" href="/insert_recipe"> <a class="nav-link collapsed" href="/insert_recipe">
<i class="bi bi-person"></i> <i class="bi bi-file-earmark"></i>
<span>Perfil</span> <span>Subir receta</span>
</a> </a>
</li><!-- End Profile Page Nav --> </li><!-- End Profile Page Nav -->
......
app/Views/pages/insertRecipe.php
<link rel="stylesheet" href="<?= base_url("css/insert.css") ?>"> <link rel="stylesheet" href="<?= base_url("css/insert.css") ?>">
<main id="main" class="main"> <main id="main" class="main">
<section class="section dashboard"> <section class="section dashboard">
<h1>Subir una receta</h1> <h1>Subir una receta</h1>
<form action=<?= base_url('/insert_recipe'); ?> method="post" enctype="multipart/form-data" class="my-form"> <form action=<?= base_url('/insert_recipe'); ?> method="post" enctype="multipart/form-data" class="my-form">
<!-- Seleccionar nombre receta--> <div class="form-content">
<div class="form-group"> <div class="form-group name-group">
<label for="name">Nombre de la receta:</label> <label for="name">Nombre de la receta:</label>
<input type="text" id="name" name="name" required class="form-control"> <input type="text" id="name" name="name" required class="form-control name-input">
</div>
<div class="form-group photo-group">
<div class="image-upload-container">
<input type="file" id="photo" name="photo" accept="image/*" class="form-control-file" style="display:none;">
<label for="photo" class="image-upload-label">Selecciona o arrastra aquí una imagen de la receta</label>
<img id="image-preview" src="#" alt="Vista previa de la imagen" style="display:none;">
</div>
</div>
</div> </div>
<!-- Seleccionar descripción --> <!-- Seleccionar descripción -->
...@@ -19,14 +28,16 @@ ...@@ -19,14 +28,16 @@
<textarea id="description" name="description" rows="4" cols="50" required class="form-control"></textarea> <textarea id="description" name="description" rows="4" cols="50" required class="form-control"></textarea>
</div> </div>
<!-- Selccionar opción vegana --> <!-- Seleccionar instrucciones -->
<div class="form-group form-check"> <div class="form-group">
<input type="checkbox" id="is_vegan" name="is_vegan" class="form-check-input"> <label for="instructions">Instrucciones:</label>
<label class="form-check-label" for="is_vegan">Vegana</label> <textarea id="instructions" name="instructions" rows="6" cols="50" required class="form-control"></textarea>
</div> </div>
<div class="form-row">
<!-- Seleccionar origen --> <!-- Seleccionar origen -->
<div class="form-group"> <div class="form-group col-md-4">
<label for="origin">Origen:</label> <label for="origin">Origen:</label>
<select id="origin" name="origin" class="form-control"> <select id="origin" name="origin" class="form-control">
<option value="Española">Española</option> <option value="Española">Española</option>
...@@ -40,7 +51,7 @@ ...@@ -40,7 +51,7 @@
</div> </div>
<!-- Seleccionar temporada --> <!-- Seleccionar temporada -->
<div class="form-group"> <div class="form-group col-md-4">
<label for="season">Temporada:</label> <label for="season">Temporada:</label>
<select id="season" name="season" class="form-control"> <select id="season" name="season" class="form-control">
<option value="invierno">Invierno</option> <option value="invierno">Invierno</option>
...@@ -51,23 +62,22 @@ ...@@ -51,23 +62,22 @@
</select> </select>
</div> </div>
</div>
<!-- Seleccionar instrucciones --> <!-- Opción vegana -->
<div class="form-group"> <div class="form-group col-md-4">
<label for="instructions">Instrucciones:</label> <label for="is_vegan" class="chip-label">Vegana</label>
<textarea id="instructions" name="instructions" rows="6" cols="50" required class="form-control"></textarea> <div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="is_vegan" name="is_vegan">
<label class="custom-control-label chip" for="is_vegan"></label>
</div>
</div> </div>
<!-- Seleccionar ingredientes --> <!-- Seleccionar ingredientes -->
<label >Ingredientes:</label> <label>Ingredientes:</label>
<div class="input-group my-form"> <div class="input-group my-form">
<input <input type="search" id="ingredient_search" name="ingredient_search" placeholder="Buscar ingredientes..."
type="search" class="form-control" />
id="ingredient_search"
name="ingredient_search"
placeholder="Buscar ingredientes..."
class="form-control"
/>
</div> </div>
<ul id="ingredients_list" class="ingredients-list list-unstyled"></ul> <ul id="ingredients_list" class="ingredients-list list-unstyled"></ul>
...@@ -78,7 +88,8 @@ ...@@ -78,7 +88,8 @@
</div> </div>
<!-- Modal para ingresar la cantidad del ingrediente --> <!-- Modal para ingresar la cantidad del ingrediente -->
<div class="modal fade" id="quantityModal" tabindex="-1" role="dialog" aria-labelledby="quantityModalLabel" aria-hidden="true"> <div class="modal fade" id="quantityModal" tabindex="-1" role="dialog" aria-labelledby="quantityModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
...@@ -88,35 +99,30 @@ ...@@ -88,35 +99,30 @@
<div class="modal-body"> <div class="modal-body">
<div class="form-group"> <div class="form-group">
<label for="ingredient_quantity">Cantidad</label> <label for="ingredient_quantity">Cantidad</label>
<input type="text" class="form-control" id="ingredient_quantity" name="ingredient_quantity" placeholder="Ej: 2 tazas, 1/2 cucharada, 4 kg..."> <input type="text" class="form-control" id="ingredient_quantity" name="ingredient_quantity"
placeholder="Ej: 2 tazas, 1/2 cucharada, 4 kg...">
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" id="cancel_quantity" data-dismiss="modal">Cancelar</button> <button type="button" class="btn btn-secondary" id="cancel_quantity"
data-dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-primary" id="save_quantity">Guardar</button> <button type="button" class="btn btn-primary" id="save_quantity">Guardar</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!--Seleccionar foto -->
<div class="form-group">
<label for="photo">Subir una foto:</label>
<input type="file" id="photo" name="photo" accept="image/*" class="form-control-file">
</div>
<div class="form-group"> <div class="form-group">
<label for="link">Ingrese el enlace del video:</label> <label for="link">Ingrese el enlace del video:</label>
<input type="text" id="link" name="link" class="form-control" placeholder="ej: https://www.youtube.com/watch?v=cks8liHVdZg"> <input type="text" id="link" name="link" class="form-control"
placeholder="ej: https://www.youtube.com/watch?v=cks8liHVdZg">
</div> </div>
<input type="submit" value="Subir receta" class="btn btn-primary"> <input type="submit" value="Subir receta" class="btn btn-primary">
</form> </form>
<script src="<?= base_url("js/insert.js") ?>"></script> <script src="<?= base_url("js/insert.js") ?>"></script>
</section> </section>
</main><!-- End #main --> </main><!-- End #main -->
\ No newline at end of file
public/css/insert.css
...@@ -2,67 +2,68 @@ ...@@ -2,67 +2,68 @@
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
background-color: #f2f2f2; background-color: #f2f2f2;
} }
.container { .container {
max-width: 800px; max-width: 800px;
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 20px;
} }
.my-form label { .my-form label {
font-weight: bold; font-weight: bold;
color: #7d7d7d; color: #000000;
} }
.my-form input[type="text"], .my-form input[type="text"],
.my-form input[type="search"], .my-form input[type="search"],
.my-form textarea { .my-form textarea {
background-color: #f5f5f5; background-color: #f5f5f5;
border-radius: 5px; border-radius: 5px;
border-color: #000000;
padding: 10px; padding: 10px;
margin-bottom: 10px; margin-bottom: 10px;
box-shadow: none; box-shadow: none;
color: #333; color: #333;
} }
.my-form input[type="text"]:focus, .my-form input[type="text"]:focus,
.my-form input[type="search"]:focus, .my-form input[type="search"]:focus,
.my-form textarea:focus { .my-form textarea:focus {
outline: none; outline: none;
box-shadow: none; box-shadow: none;
background-color: #f2f2f2; background-color: #f2f2f2;
} }
.my-form input[type="checkbox"], .my-form input[type="checkbox"],
.my-form input[type="radio"] { .my-form input[type="radio"] {
margin-right: 5px; margin-right: 5px;
} }
.my-form .form-check-label { .my-form .form-check-label {
color: #7d7d7d; color: #7d7d7d;
} }
.my-form select { .my-form select {
background-color: #f5f5f5; background-color: #f5f5f5;
border-radius: 5px; border-radius: 5px;
padding: 10px; padding: 10px;
margin-bottom: 10px; margin-bottom: 10px;
box-shadow: none; box-shadow: none;
color: #333; color: #333;
} }
.my-form select:focus { .my-form select:focus {
outline: none; outline: none;
box-shadow: none; box-shadow: none;
background-color: #f2f2f2; background-color: #f2f2f2;
} }
.my-form input[type="file"] { .my-form input[type="file"] {
margin-bottom: 10px; margin-bottom: 10px;
} }
.my-form .btn-primary { .my-form .btn-primary {
background-color: #8cb6e8; background-color: #8cb6e8;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
...@@ -70,15 +71,15 @@ body { ...@@ -70,15 +71,15 @@ body {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
color: #fff; color: #fff;
} }
.my-form .btn-primary:hover { .my-form .btn-primary:hover {
background-color: #76a9d4; background-color: #76a9d4;
color: #fff; color: #fff;
} }
/* Media queries */ /* Media queries */
@media (max-width: 576px) { @media (max-width: 576px) {
.container { .container {
padding: 10px; padding: 10px;
} }
...@@ -95,9 +96,10 @@ body { ...@@ -95,9 +96,10 @@ body {
font-size: 14px; font-size: 14px;
padding: 8px 16px; padding: 8px 16px;
} }
} }
/* Estilos para el botón "x" en el campo de selección de ingredientes */
.selected-ingredient button { /* Estilos para el botón "x" en el campo de selección de ingredientes */
.selected-ingredient button {
background-color: #f8d7da; background-color: #f8d7da;
border: none; border: none;
border-radius: 50%; border-radius: 50%;
...@@ -110,37 +112,37 @@ body { ...@@ -110,37 +112,37 @@ body {
padding: 0; padding: 0;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
width: 1.5rem; width: 1.5rem;
} }
.selected-ingredient button:hover { .selected-ingredient button:hover {
background-color: #721c24; background-color: #721c24;
color: #fff; color: #fff;
} }
/* Agregar estilos para la lista desplegable de ingredientes */ /* Agregar estilos para la lista desplegable de ingredientes */
.ingredients-list { .ingredients-list {
margin-top: 5px; margin-top: 5px;
max-height: 200px; max-height: 200px;
overflow-y: auto; overflow-y: auto;
} }
.ingredient-item { .ingredient-item {
cursor: pointer; cursor: pointer;
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
} }
.ingredient-item:hover { .ingredient-item:hover {
background-color: #e2e2e2; background-color: #e2e2e2;
} }
.ingredient-icon { .ingredient-icon {
width: 24px; width: 24px;
height: 24px; height: 24px;
} }
/* Estilos para el contenedor de ingredientes seleccionados */ /* Estilos para el contenedor de ingredientes seleccionados */
.selected-ingredients-container { .selected-ingredients-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 5px; gap: 5px;
...@@ -149,9 +151,9 @@ body { ...@@ -149,9 +151,9 @@ body {
border-radius: 0.25rem; border-radius: 0.25rem;
min-height: 38px; min-height: 38px;
align-items: center; align-items: center;
} }
.selected-ingredient { .selected-ingredient {
display: flex; display: flex;
align-items: center; align-items: center;
background-color: #f5f5f5; background-color: #f5f5f5;
...@@ -181,3 +183,104 @@ body { ...@@ -181,3 +183,104 @@ body {
background-color: #721c24; background-color: #721c24;
color: #fff; color: #fff;
} }
.image-upload-container {
position: relative;
width: 100%;
max-width: 400px;
border: 2px dashed #ccc;
padding: 20px;
text-align: center;
cursor: pointer;
margin-bottom: 20px;
}
.image-upload-label {
font-size: 18px;
color: #999;
}
#image-preview {
width: 100%;
max-width: 400px;
height: auto;
margin-top: 10px;
}
.form-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.name-input {
border: none;
border-bottom: 1px solid #ccc;
background-color: transparent;
font-size: 2rem;
font-weight: bold;
text-align: center;
padding: 5px 0;
outline: none;
width: 100%;
max-width: 400px;
}
.name-input:focus {
border-bottom-color: #000;
}
.name-group {
flex: 1;
margin-right: 20px;
}
.photo-group {
flex: 1;
margin-left: 20px;
}
.form-row {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.left,
.right {
width: 49%;
}
.three-fields {
display: flex;
justify-content: space-between;
align-items: center;
}
.three-fields .form-group {
width: 32%;
}
/* Estilos para el chip vegano */
.vegan-chip {
display: inline-flex;
align-items: center;
padding: 4px 12px;
font-size: 14px;
font-weight: 600;
background-color: #f0f0f0;
border-radius: 24px;
cursor: pointer;
user-select: none;
}
.vegan-chip.selected {
background-color: #4caf50;
color: #ffffff;
}
\ No newline at end of file
public/imagenes/platos/samosas.webp deleted 100644 → 0
No preview for this file type
public/js/insert.js
...@@ -150,3 +150,47 @@ ingredientSearch.addEventListener('input', function (event) { ...@@ -150,3 +150,47 @@ ingredientSearch.addEventListener('input', function (event) {
searchIngredients(event.target.value); searchIngredients(event.target.value);
}); });
var inputPhoto = document.getElementById('photo');
var imageUploadContainer = document.querySelector('.image-upload-container');
inputPhoto.addEventListener('change', function(event) {
displayImagePreview(event.target.files[0]);
});
imageUploadContainer.addEventListener('dragover', function(event) {
event.preventDefault();
event.stopPropagation();
event.dataTransfer.dropEffect = 'copy';
});
imageUploadContainer.addEventListener('drop', function(event) {
event.preventDefault();
event.stopPropagation();
if (event.dataTransfer.files.length > 0) {
displayImagePreview(event.dataTransfer.files[0]);
inputPhoto.files = event.dataTransfer.files;
}
});
function displayImagePreview(file) {
var reader = new FileReader();
reader.onload = function() {
var output = document.getElementById('image-preview');
output.src = reader.result;
output.style.display = 'block';
}
reader.readAsDataURL(file);
}
document.getElementById('photo').addEventListener('change', function(event) {
var reader = new FileReader();
reader.onload = function() {
var output = document.getElementById('image-preview');
output.src = reader.result;
output.style.display = 'block';
}
reader.readAsDataURL(event.target.files[0]);
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment