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 351 additions and 196 deletions
app/Views/pages/home.php
......@@ -122,8 +122,8 @@
<li class="nav-item">
<a class="nav-link collapsed" href="/insert_recipe">
<i class="bi bi-person"></i>
<span>Perfil</span>
<i class="bi bi-file-earmark"></i>
<span>Subir receta</span>
</a>
</li><!-- End Profile Page Nav -->
......
app/Views/pages/insertRecipe.php
<link rel="stylesheet" href="<?= base_url("css/insert.css") ?>">
<main id="main" class="main">
<section class="section dashboard">
<h1>Subir una receta</h1>
<form action=<?= base_url('/insert_recipe'); ?> method="post" enctype="multipart/form-data" class="my-form">
<!-- Seleccionar nombre receta-->
<div class="form-group">
<label for="name">Nombre de la receta:</label>
<input type="text" id="name" name="name" required class="form-control">
</div>
<!-- Seleccionar descripción -->
<div class="form-group">
<label for="description">Descripción de la receta:</label>
<textarea id="description" name="description" rows="4" cols="50" required class="form-control"></textarea>
</div>
<!-- Selccionar opción vegana -->
<div class="form-group form-check">
<input type="checkbox" id="is_vegan" name="is_vegan" class="form-check-input">
<label class="form-check-label" for="is_vegan">Vegana</label>
</div>
<!-- Seleccionar origen -->
<div class="form-group">
<label for="origin">Origen:</label>
<select id="origin" name="origin" class="form-control">
<option value="Española">Española</option>
<option value="Francesa">Francesa</option>
<option value="Italiana">Italiana</option>
<option value="Mexiana">Mexicana</option>
<option value="Americana">Americana</option>
<option value="China">China</option>
<option value="India">India</option>
</select>
</div>
<!-- Seleccionar temporada -->
<div class="form-group">
<label for="season">Temporada:</label>
<select id="season" name="season" class="form-control">
<option value="invierno">Invierno</option>
<option value="primavera">Primavera</option>
<option value="verano">Verano</option>
<option value="otoño">Otoño</option>
<option value="4estaciones">4 estaciones</option>
</select>
</div>
<!-- Seleccionar instrucciones -->
<div class="form-group">
<label for="instructions">Instrucciones:</label>
<textarea id="instructions" name="instructions" rows="6" cols="50" required class="form-control"></textarea>
</div>
<!-- Seleccionar ingredientes -->
<label >Ingredientes:</label>
<div class="input-group my-form">
<input
type="search"
id="ingredient_search"
name="ingredient_search"
placeholder="Buscar ingredientes..."
class="form-control"
/>
</div>
<ul id="ingredients_list" class="ingredients-list list-unstyled"></ul>
<div class="form-group">
<label for="selected_ingredients">Ingredientes seleccionados:</label>
<div id="selected_ingredients" class="selected-ingredients-container"></div>
</div>
<!-- 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-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="quantityModalLabel">Ingresa la cantidad</h5>
</button>
<section class="section dashboard">
<h1>Subir una receta</h1>
<form action=<?= base_url('/insert_recipe'); ?> method="post" enctype="multipart/form-data" class="my-form">
<div class="form-content">
<div class="form-group name-group">
<label for="name">Nombre de la receta:</label>
<input type="text" id="name" name="name" required class="form-control name-input">
</div>
<div class="modal-body">
<div class="form-group">
<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...">
<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 class="modal-footer">
<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>
</div>
<!-- Seleccionar descripción -->
<div class="form-group">
<label for="description">Descripción de la receta:</label>
<textarea id="description" name="description" rows="4" cols="50" required class="form-control"></textarea>
</div>
<!-- Seleccionar instrucciones -->
<div class="form-group">
<label for="instructions">Instrucciones:</label>
<textarea id="instructions" name="instructions" rows="6" cols="50" required class="form-control"></textarea>
</div>
<div class="form-row">
<!-- Seleccionar origen -->
<div class="form-group col-md-4">
<label for="origin">Origen:</label>
<select id="origin" name="origin" class="form-control">
<option value="Española">Española</option>
<option value="Francesa">Francesa</option>
<option value="Italiana">Italiana</option>
<option value="Mexiana">Mexicana</option>
<option value="Americana">Americana</option>
<option value="China">China</option>
<option value="India">India</option>
</select>
</div>
<!-- Seleccionar temporada -->
<div class="form-group col-md-4">
<label for="season">Temporada:</label>
<select id="season" name="season" class="form-control">
<option value="invierno">Invierno</option>
<option value="primavera">Primavera</option>
<option value="verano">Verano</option>
<option value="otoño">Otoño</option>
<option value="4estaciones">4 estaciones</option>
</select>
</div>
</div>
<!-- Opción vegana -->
<div class="form-group col-md-4">
<label for="is_vegan" class="chip-label">Vegana</label>
<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>
</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>
<!-- Seleccionar ingredientes -->
<label>Ingredientes:</label>
<div class="input-group my-form">
<input type="search" id="ingredient_search" name="ingredient_search" placeholder="Buscar ingredientes..."
class="form-control" />
<div class="form-group">
<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">
</div>
</div>
<ul id="ingredients_list" class="ingredients-list list-unstyled"></ul>
<input type="submit" value="Subir receta" class="btn btn-primary">
</form>
<div class="form-group">
<label for="selected_ingredients">Ingredientes seleccionados:</label>
<div id="selected_ingredients" class="selected-ingredients-container"></div>
</div>
<script src="<?= base_url("js/insert.js") ?>"></script>
<!-- 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-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="quantityModalLabel">Ingresa la cantidad</h5>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<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...">
</div>
</div>
<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-primary" id="save_quantity">Guardar</button>
</div>
</div>
</div>
</div>
<div class="form-group">
<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">
</div>
</section>
<input type="submit" value="Subir receta" class="btn btn-primary">
</form>
</main><!-- End #main -->
<script src="<?= base_url("js/insert.js") ?>"></script>
</section>
</main><!-- End #main -->
\ No newline at end of file
public/css/insert.css
......@@ -2,67 +2,68 @@
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.my-form label {
}
.my-form label {
font-weight: bold;
color: #7d7d7d;
}
.my-form input[type="text"],
.my-form input[type="search"],
.my-form textarea {
color: #000000;
}
.my-form input[type="text"],
.my-form input[type="search"],
.my-form textarea {
background-color: #f5f5f5;
border-radius: 5px;
border-color: #000000;
padding: 10px;
margin-bottom: 10px;
box-shadow: none;
color: #333;
}
.my-form input[type="text"]:focus,
.my-form input[type="search"]:focus,
.my-form textarea:focus {
}
.my-form input[type="text"]:focus,
.my-form input[type="search"]:focus,
.my-form textarea:focus {
outline: none;
box-shadow: none;
background-color: #f2f2f2;
}
.my-form input[type="checkbox"],
.my-form input[type="radio"] {
}
.my-form input[type="checkbox"],
.my-form input[type="radio"] {
margin-right: 5px;
}
.my-form .form-check-label {
}
.my-form .form-check-label {
color: #7d7d7d;
}
.my-form select {
}
.my-form select {
background-color: #f5f5f5;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
box-shadow: none;
color: #333;
}
.my-form select:focus {
}
.my-form select:focus {
outline: none;
box-shadow: none;
background-color: #f2f2f2;
}
.my-form input[type="file"] {
}
.my-form input[type="file"] {
margin-bottom: 10px;
}
.my-form .btn-primary {
}
.my-form .btn-primary {
background-color: #8cb6e8;
border: none;
border-radius: 5px;
......@@ -70,34 +71,35 @@ body {
font-size: 16px;
font-weight: bold;
color: #fff;
}
.my-form .btn-primary:hover {
}
.my-form .btn-primary:hover {
background-color: #76a9d4;
color: #fff;
}
/* Media queries */
@media (max-width: 576px) {
}
/* Media queries */
@media (max-width: 576px) {
.container {
padding: 10px;
padding: 10px;
}
.my-form input[type="text"],
.my-form input[type="search"],
.my-form textarea,
.my-form select {
font-size: 14px;
padding: 8px;
font-size: 14px;
padding: 8px;
}
.my-form .btn-primary {
font-size: 14px;
padding: 8px 16px;
font-size: 14px;
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;
border: none;
border-radius: 50%;
......@@ -110,37 +112,37 @@ body {
padding: 0;
transition: background-color 0.3s ease;
width: 1.5rem;
}
.selected-ingredient button:hover {
}
.selected-ingredient button:hover {
background-color: #721c24;
color: #fff;
}
}
/* Agregar estilos para la lista desplegable de ingredientes */
/* Agregar estilos para la lista desplegable de ingredientes */
.ingredients-list {
margin-top: 5px;
max-height: 200px;
overflow-y: auto;
}
.ingredient-item {
}
.ingredient-item {
cursor: pointer;
transition: background-color 0.2s ease;
}
.ingredient-item:hover {
}
.ingredient-item:hover {
background-color: #e2e2e2;
}
.ingredient-icon {
}
.ingredient-icon {
width: 24px;
height: 24px;
}
/* Estilos para el contenedor de ingredientes seleccionados */
.selected-ingredients-container {
}
/* Estilos para el contenedor de ingredientes seleccionados */
.selected-ingredients-container {
display: flex;
flex-wrap: wrap;
gap: 5px;
......@@ -149,9 +151,9 @@ body {
border-radius: 0.25rem;
min-height: 38px;
align-items: center;
}
.selected-ingredient {
}
.selected-ingredient {
display: flex;
align-items: center;
background-color: #f5f5f5;
......@@ -164,20 +166,121 @@ body {
/* Estilos para el botón "x" en el campo de selección de ingredientes */
.selected-ingredient button {
background-color: #f8d7da;
border-radius: 50%;
color: #721c24;
cursor: pointer;
font-size: 0.8rem;
height: 1.5rem;
line-height: 0.8rem;
margin-left: 0.5rem;
padding: 0;
transition: background-color 0.3s ease;
width: 1.5rem;
background-color: #f8d7da;
border-radius: 50%;
color: #721c24;
cursor: pointer;
font-size: 0.8rem;
height: 1.5rem;
line-height: 0.8rem;
margin-left: 0.5rem;
padding: 0;
transition: background-color 0.3s ease;
width: 1.5rem;
}
.selected-ingredient button:hover {
background-color: #721c24;
color: #fff;
background-color: #721c24;
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) {
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