diff --git a/.vscode/settings.json b/.vscode/settings.json index 7bd07e2e82..7f1bff12d5 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -6,5 +6,8 @@ }, "[javascript]": { "editor.defaultFormatter": "vscode.typescript-language-features" + }, + "[javascriptreact]": { + "editor.defaultFormatter": "vscode.typescript-language-features" } } diff --git a/Pipfile.lock b/Pipfile.lock index 68cca804a6..6d7703c2a2 100644 --- a/Pipfile.lock +++ b/Pipfile.lock @@ -377,7 +377,6 @@ ], "markers": "python_version >= '3.9'", "version": "==2.10.1" - }, "python-dotenv": { "hashes": [ diff --git a/migrations/versions/5cf725964086_.py b/migrations/versions/cb544095a50b_.py similarity index 93% rename from migrations/versions/5cf725964086_.py rename to migrations/versions/cb544095a50b_.py index 3c4b693934..373038b2e3 100644 --- a/migrations/versions/5cf725964086_.py +++ b/migrations/versions/cb544095a50b_.py @@ -1,8 +1,8 @@ """empty message -Revision ID: 5cf725964086 -Revises: e882aaa7e01e -Create Date: 2024-11-30 11:31:26.832067 +Revision ID: cb544095a50b +Revises: d6e7917535b2 +Create Date: 2024-12-11 22:58:32.170013 """ from alembic import op @@ -10,8 +10,8 @@ # revision identifiers, used by Alembic. -revision = '5cf725964086' -down_revision = 'e882aaa7e01e' +revision = 'cb544095a50b' +down_revision = 'd6e7917535b2' branch_labels = None depends_on = None @@ -21,7 +21,7 @@ def upgrade(): op.create_table('breed', sa.Column('id', sa.Integer(), nullable=False), sa.Column('name', sa.String(length=30), nullable=True), - sa.Column('species', sa.Enum('perro', 'gato', 'ave', 'conejo', 'otro', name='species'), nullable=False), + sa.Column('species', sa.Enum('perro', 'gato', 'ave', 'conejo', 'reptil', 'otro', name='species'), nullable=False), sa.PrimaryKeyConstraint('id') ) op.create_table('pet', diff --git a/migrations/versions/65ec0a935ab9_.py b/migrations/versions/d6e7917535b2_.py similarity index 89% rename from migrations/versions/65ec0a935ab9_.py rename to migrations/versions/d6e7917535b2_.py index 6b1dc1c9a0..226461e361 100644 --- a/migrations/versions/65ec0a935ab9_.py +++ b/migrations/versions/d6e7917535b2_.py @@ -1,8 +1,8 @@ """empty message -Revision ID: 65ec0a935ab9 +Revision ID: d6e7917535b2 Revises: -Create Date: 2024-11-27 23:26:32.249259 +Create Date: 2024-12-03 00:34:48.862682 """ from alembic import op @@ -10,7 +10,7 @@ # revision identifiers, used by Alembic. -revision = '65ec0a935ab9' +revision = 'd6e7917535b2' down_revision = None branch_labels = None depends_on = None diff --git a/migrations/versions/e882aaa7e01e_.py b/migrations/versions/e882aaa7e01e_.py deleted file mode 100644 index 45864ac075..0000000000 --- a/migrations/versions/e882aaa7e01e_.py +++ /dev/null @@ -1,35 +0,0 @@ -"""empty message - -Revision ID: e882aaa7e01e -Revises: -Create Date: 2024-11-30 11:14:24.658166 - -""" -from alembic import op -import sqlalchemy as sa - - -# revision identifiers, used by Alembic. -revision = 'e882aaa7e01e' -down_revision = None -branch_labels = None -depends_on = None - - -def upgrade(): - # ### commands auto generated by Alembic - please adjust! ### - op.create_table('user', - sa.Column('id', sa.Integer(), nullable=False), - sa.Column('email', sa.String(length=120), nullable=False), - sa.Column('password', sa.String(length=80), nullable=False), - sa.Column('is_active', sa.Boolean(), nullable=False), - sa.PrimaryKeyConstraint('id'), - sa.UniqueConstraint('email') - ) - # ### end Alembic commands ### - - -def downgrade(): - # ### commands auto generated by Alembic - please adjust! ### - op.drop_table('user') - # ### end Alembic commands ### diff --git a/src/api/admin.py b/src/api/admin.py index 3eecb64140..12b3d411ea 100644 --- a/src/api/admin.py +++ b/src/api/admin.py @@ -1,7 +1,7 @@ import os from flask_admin import Admin -from .models import db, User +from .models import db, User, Pet, Post_Description, Breed from flask_admin.contrib.sqla import ModelView def setup_admin(app): @@ -12,6 +12,9 @@ def setup_admin(app): # Add your models here, for example this is how we add a the User model to the admin admin.add_view(ModelView(User, db.session)) + admin.add_view(ModelView(Pet, db.session)) + admin.add_view(ModelView(Post_Description, db.session)) + admin.add_view(ModelView(Breed, db.session)) # You can duplicate that line to add mew models # admin.add_view(ModelView(YourModelName, db.session)) \ No newline at end of file diff --git a/src/api/models.py b/src/api/models.py index 534e858ab4..82704652f4 100644 --- a/src/api/models.py +++ b/src/api/models.py @@ -48,7 +48,7 @@ class Pet(db.Model): __tablename__ ="pet" id = db.Column (db.Integer, primary_key=True) name = db.Column (db.String(30)) - breed = db.Column (db.Integer, db.ForeignKey("breed.id")) + breed = db.Column (db.Integer, db.ForeignKey("breed.id")) # bread_id gender = db.Column (db.Enum(Genders)) color = db.Column (db.String(15)) photo_1 = db.Column (db.String(120), nullable=False) @@ -58,15 +58,14 @@ class Pet(db.Model): user_id = db.Column (db.Integer, db.ForeignKey("user.id")) user = db.relationship ("User", back_populates="pet") post = db.relationship("Post_Description", back_populates="pet_relationship") - breed_relationship = db.relationship("Breed", back_populates= "pets") + breed_relationship = db.relationship("Breed", back_populates= "pets") # breed def __repr__(self): - return f'' + return f'' def serialize(self): return{ "name" : self.name, - "species" : self.species, "breed" : self.breed, "color": self.color, "photo_1": self.photo_1, diff --git a/src/app.py b/src/app.py index 8aa49f6c42..403fe831d8 100644 --- a/src/app.py +++ b/src/app.py @@ -218,6 +218,15 @@ def create_post_description(): return jsonify({'msg':'Post creado exitosamente', 'data': new_post.serialize()}), 201 ####### +#GET All pets Matias 17:46PM 3/12/24..Update: working 11:43AM 4/12/24 +@app.route('/pets', methods=['GET']) +def get_all_pets(): + pets = Pet.query.all() + pets_serialized = [] + for pet in pets: + pets_serialized.append(pet.serialize()) + return jsonify({'msg': 'ok', 'data': pets_serialized}), 200 + # any other endpoint will try to serve it like a static file @app.route('/', methods=['GET']) diff --git a/src/front/js/App.js b/src/front/js/App.js new file mode 100644 index 0000000000..9f848d4022 --- /dev/null +++ b/src/front/js/App.js @@ -0,0 +1,18 @@ +import React from "react"; +import { PasswordResetProvider } from "./PasswordResetContext"; // Importamos el proveedor +import ResetPassword from "./ResetPassword"; // Importamos el componente de recuperación de contraseña +import PetsView from "./PetsView"; // Vista de mascotas + +function App() { + return ( + +
+

Aplicación de Recuperación de Contraseña y Mascotas

+ {/* Componente de recuperación de contraseña */} + {/* Componente de vista de mascotas */} +
+ + ); +} + +export default App; diff --git a/src/front/js/component/Filters.js b/src/front/js/component/Filters.js new file mode 100644 index 0000000000..c561a1cf71 --- /dev/null +++ b/src/front/js/component/Filters.js @@ -0,0 +1,46 @@ +import React from "react"; +import "../../styles/pets-view.css"; + +const Filters = ({ onFilterChange }) => { + return ( +
+

Filter

+
+ + +
+
+ + + +
+
+ + +
+
+ ); +}; + +export default Filters; diff --git a/src/front/js/component/PetCard.jsx b/src/front/js/component/PetCard.jsx new file mode 100644 index 0000000000..11338a6329 --- /dev/null +++ b/src/front/js/component/PetCard.jsx @@ -0,0 +1,225 @@ +import React, { useContext, useState, useEffect } from "react"; +import { Context } from "../store/appContext"; +import { useParams } from "react-router-dom"; + +const PetCard = () => { + const { store } = useContext(Context); + const { theid } = useParams(); + const [detail, setDetail] = useState(null); + const [mainImage, setMainImage] = useState("https://cdn.pixabay.com/photo/2023/11/12/17/12/puppy-8383633_1280.jpg"); // Imagen principal inicial + + const findDetail = () => { + const result = store.petData.find((item) => item.id == theid); + setDetail(result); + setMainImage(result?.image || "https://cdn.pixabay.com/photo/2023/11/12/17/12/puppy-8383633_1280.jpg"); // Establecemos la imagen principal + }; + + useEffect(() => { + findDetail(); + }, [theid]); + + return ( +
+ {/* Navigation path */} +
+ + Home + {" "} + >{" "} + + Mascotas + {" "} + > Más información +
+ +
+ {/* Imagen y carrousel */} +
+ {/* Imagen principal */} +
+ Main Pet +
+ + {/* Miniaturas debajo de la imagen principal */} +
+ Thumbnail 1 setMainImage("https://via.placeholder.com/600x400")} + /> + Thumbnail 2 setMainImage("https://via.placeholder.com/600x400/ff7f7f")} + /> + Thumbnail 3 setMainImage("https://via.placeholder.com/600x400/7fff7f")} + /> + Thumbnail 4 setMainImage("https://cdn.pixabay.com/photo/2023/11/12/17/12/puppy-8383633_1280.jpg")} + /> +
+ + {/* Botón Share debajo de la carrousel */} +
+
Compartir
+ +
+
+ + {/* Pet details */} +
+

{detail?.name}

+

+ Perdido/Encontrado el {detail?.lostDate} +

+ + Comunicarse + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NOMBRE:{detail?.name}
SEXO:{detail?.gender}
EDAD:{detail?.age}
TAMAÑO: + {detail?.size}
COLOR:{detail?.color}
SE PERDIÓ EN:{detail?.location}
+

+ INFORMACIÓN ADICIONAL: {detail?.additionalInfo} +

+
+
+ + {/* Modal para contacto */} + +
+ ); +}; + +export default PetCard; diff --git a/src/front/js/component/PetView.jsx b/src/front/js/component/PetView.jsx new file mode 100644 index 0000000000..3074bc2fc6 --- /dev/null +++ b/src/front/js/component/PetView.jsx @@ -0,0 +1,269 @@ +import React, { useState, useEffect } from "react"; +import { Link } from "react-router-dom"; + +const PetsView = () => { + // Estado para los datos y los filtros + const [pets, setPets] = useState([]); + const [filteredPets, setFilteredPets] = useState([]); + const [filters, setFilters] = useState({ + type: "", // Tipo de mascota (perro, gato, etc.) + color: "", // Color de la mascota + size: "", // Tamaño de la mascota + sex: "", // Sexo de la mascota (macho o hembra) + }); + +const BringAllPetsAPI = () => { + fetch('https://super-duper-dollop-x5rqv9jj6pv7cvx4p-3001.app.github.dev/pets') + .then((resp) => resp.json()) + .then((data) => { + setPets(data.data); + setFilteredPets(data.data); // Mostrar todo inicialmente + }) +} + + + // Simulación de datos o carga desde una API + useEffect(() => { + const petData = [ + { id: 1, name: "Max", type: "Perro", color: "Negro", sex: "Macho", size: "Grande", image: "" }, + { id: 2, name: "Bella", type: "Gato", color: "Amarillo", sex: "Hembra", size: "Pequeño", image:"" }, + { id: 3, name: "Rocky", type: "Perro", color: "marrón", size: "Mediano", image: "" }, + { id: 4, name: "Spike", type: "gato", color: "verde", sex:"macho", size: "Pequeño", image: "" }, + { id: 5, name: "Luna", type: "otro", color: "gris", size: "Grande", image: "" }, + { id: 6, name: "Chameleon", type: "reptil", color: "multicolor", size: "Pequeño", image: "https://mundoreptil.net/wp-content/uploads/primer-plano-increible-habilidad.webp" }, + { id: 7, name: "Blanquita", type: "otro", color: "Blanco y Negro", size: "Pequeño", image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSfkhMZAkUKlthC2a_1jMkEhoMzNakBrJcegQ&s" }, + { id: 8, name: "Bella", type: "gato", color: "blanco", size: "pequeño", image: "https://vitalcan.es/wp-content/uploads/kitty-2903812_1280.jpg" }, + { id: 9, name: "Bella", type: "gato", color: "blanco", size: "pequeño", image: "data:image/jpeg;base64,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" }, + // Más datos... + ]; + setPets(petData); + setFilteredPets(petData); // Mostrar todo inicialmente + }, []); + + // Manejar cambios en los filtros + const handleFilterChange = (e) => { + const { name, value } = e.target; + setFilters({ + ...filters, + [name]: value, + }); + }; + + // Filtrar mascotas + useEffect(() => { + const filtered = pets.filter((pet) => { + return ( + (filters.type === "" || pet.type === filters.type) && + (filters.color === "" || pet.color === filters.color) && + (filters.size === "" || pet.size === filters.size) && + (filters.sex === "" || pet.sex === filters.sex) + ); + }); + setFilteredPets(filtered); + }, [filters, pets]); + return ( +
+
+ {/* Columna de Filtros */} +
+
+
Filtrar por:
+ {/* Filtro por sexo */} +
+ + +
+ {/* Filtro por tipo */} +
+ + +
+ + {/* Filtro por color */} +
+ +
+ + + + + + + + + + + +
+
+ {/* Filtro por tamaño */} +
+ + +
+
+
+ + {/* Columna de Tarjetas */} +
+
+ {filteredPets.map((pet) => ( +
+
+ {pet.name} +
+
{pet.name}
+

+ Tipo: {pet.type}
+ Color: {pet.color}
+ Sexo: {pet.size} +

+ Más información +
+
+
+ ))} +
+
+
+
+ ); +}; + +export default PetsView; diff --git a/src/front/js/component/ResetPassword.jsx b/src/front/js/component/ResetPassword.jsx new file mode 100644 index 0000000000..4483e345a4 --- /dev/null +++ b/src/front/js/component/ResetPassword.jsx @@ -0,0 +1,116 @@ +import React, { useState } from "react"; + +const ResetPassword = () => { + const [securityAnswer, setSecurityAnswer] = useState(""); + const [newPassword, setNewPassword] = useState(""); + const [confirmPassword, setConfirmPassword] = useState(""); + const [message, setMessage] = useState(""); + const [error, setError] = useState(""); + + const handleSubmit = async (e) => { + e.preventDefault(); + + // Validación simple del formulario + if (!securityAnswer || !newPassword || !confirmPassword) { + setError("Todos los campos son obligatorios."); + setMessage(""); + return; + } + + if (newPassword !== confirmPassword) { + setError("Las contraseñas no coinciden."); + setMessage(""); + return; + } + + try { + // Llamada a la API + const response = await fetch("https://sturdy-space-invention-q7947gjpqj76fx57r-3001.app.github.dev/user/1", { + method: "PUT", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + security_question: securityAnswer, + new_password: newPassword, + }), + }); + + if (response.ok) { + const data = await response.json(); + setMessage(data.msg || "Contraseña cambiada correctamente."); + setError(""); + } else { + const errorData = await response.json(); + setError(errorData.msg || "Ocurrió un error. Intenta nuevamente."); + setMessage(""); + } + } catch (err) { + setError("Error al conectar con el servidor."); + setMessage(""); + } + }; + + return ( +
+
+
+

¿Olvidó su contraseña?

+
+
+ + setSecurityAnswer(e.target.value)} + /> +
+ +
+ + setNewPassword(e.target.value)} + /> +
+ +
+ + setConfirmPassword(e.target.value)} + /> +
+ +
+ +
+
+ + {message &&

{message}

} + {error &&

{error}

} +
+
+
+ ); +}; + +export default ResetPassword; diff --git a/src/front/js/component/footer.js b/src/front/js/component/footer.js index 670323e091..cda777bf4a 100755 --- a/src/front/js/component/footer.js +++ b/src/front/js/component/footer.js @@ -6,5 +6,6 @@ export const Footer = () => ( Made with by{" "} 4Geeks Academy

+ ); diff --git a/src/front/js/component/navbar.js b/src/front/js/component/navbar.js index 795c8348d7..416dcc7ab0 100755 --- a/src/front/js/component/navbar.js +++ b/src/front/js/component/navbar.js @@ -1,6 +1,8 @@ import React from "react"; import { Link } from "react-router-dom"; import logotipo from "../../img/PatasperdidasPNG.png" + + export const Navbar = () => { return ( ); -}; +} diff --git a/src/front/js/component/ubication_map.js b/src/front/js/component/ubication_map.js index 935ec60f6c..11dd67ac6a 100644 --- a/src/front/js/component/ubication_map.js +++ b/src/front/js/component/ubication_map.js @@ -1,25 +1,25 @@ import React, { useState } from "react"; -import "leaflet/dist/leaflet.css"; -import { MapContainer, TileLayer, useMapEvents, Marker, Popup } from 'react-leaflet' -import { Icon, divIcon, map } from "leaflet" -import MarkerClusterGroup from 'react-leaflet-cluster'; -import L from "leaflet" +// import "leaflet/dist/leaflet.css"; +// import { MapContainer, TileLayer, useMapEvents, Marker, Popup } from 'react-leaflet' +// import { Icon, divIcon, map } from "leaflet" +// import MarkerClusterGroup from 'react-leaflet-cluster'; +// import L from "leaflet" const UbicationMap = ({ coordenates }) => { - const CustomIcon = L.divIcon({ - html: '', - className: "custom-icon", - iconSize: [24, 24], - iconAnchor: [12, 24] - }) + // const CustomIcon = L.divIcon({ + // html: '', + // className: "custom-icon", + // iconSize: [24, 24], + // iconAnchor: [12, 24] + // }) const [position, setPosition] = useState(null) function ClickHandler() { useMapEvents({ click: (e) => { const { lat, lng } = e.latlng; - const newPosition = {lat, lng} + const newPosition = { lat, lng } setPosition(newPosition); console.log(`Latitud: ${lat}, Longitud: ${lng}`); if (coordenates) { diff --git a/src/front/js/layout.js b/src/front/js/layout.js index 7774e671eb..180f6275ca 100755 --- a/src/front/js/layout.js +++ b/src/front/js/layout.js @@ -16,6 +16,9 @@ import { Navbar } from "./component/navbar"; import { Footer } from "./component/footer"; import NewPetLost from "./pages/newPetLost.js"; import NewFoundPet from "./pages/newFoundPet.js"; +import ResetPassword from "./component/ResetPassword.jsx"; +import PetView from "./component/PetView.jsx"; +import PetCard from "./component/PetCard.jsx"; import UbicationMap from "./component/ubication_map.js"; //create your first component @@ -41,6 +44,10 @@ const Layout = () => { } path="/single/:theid" /> } path="/user" /> } path="/login" /> + } path="/forgot-password" /> + } path="/petview"/> + } path="/petcard/:theid" /> + } path="/signup" /> Not found!} /> diff --git a/src/front/js/pages/newPetLost.js b/src/front/js/pages/newPetLost.js index 5995abdda5..891850a87c 100644 --- a/src/front/js/pages/newPetLost.js +++ b/src/front/js/pages/newPetLost.js @@ -3,8 +3,8 @@ import React, { useState, useContext } from "react"; import { useNavigate } from "react-router-dom"; import { Context } from "../store/appContext"; import Cloudinary from "../component/cloudinary"; -import "leaflet/dist/leaflet.css"; -import L from "leaflet" +// import "leaflet/dist/leaflet.css"; +// import L from "leaflet" import UbicationMap from "../component/ubication_map"; const NewPetLost = () => { diff --git a/src/front/js/store/flux.js b/src/front/js/store/flux.js index c8b60e1b57..52804f7a55 100755 --- a/src/front/js/store/flux.js +++ b/src/front/js/store/flux.js @@ -1,10 +1,8 @@ const getState = ({ getStore, getActions, setStore }) => { return { store: { - message: null, demo: [ - { title: "FIRST", background: "white", @@ -15,7 +13,19 @@ const getState = ({ getStore, getActions, setStore }) => { background: "white", initial: "white" } - ] + ], + petData:[ + { id: 1, name: "Max", type: "perro", color: "negro", size: "grande", image: "data:image/jpeg;base64,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" }, + { id: 2, name: "Bella", type: "gato", color: "blanco", size: "pequeño", image: "/img/bella.jpg" }, + { id: 3, name: "Rocky", type: "conejo", color: "marrón", size: "mediano", image: "/img/rocky.jpg" }, + { id: 4, name: "Spike", type: "reptil", color: "verde", size: "pequeño", image: "/img/spike.jpg" }, + { id: 5, name: "Luna", type: "otro", color: "gris", size: "grande", image: "/img/luna.jpg" }, + { id: 6, name: "Bella", type: "gato", color: "blanco", size: "pequeño", image: "/img/bella.jpg" }, + { id: 7, name: "Bella", type: "gato", color: "blanco", size: "pequeño", image: "/img/bella.jpg" }, + { id: 8, name: "Bella", type: "gato", color: "blanco", size: "pequeño", image: "/img/bella.jpg" }, + { id: 9, name: "Bella", type: "gato", color: "blanco", size: "pequeño", image: "/img/bella.jpg" }, + + ], }, actions: { diff --git a/src/front/styles/home.css b/src/front/styles/home.css index 723acfb61b..41035aeaea 100755 --- a/src/front/styles/home.css +++ b/src/front/styles/home.css @@ -1,10 +1,4 @@ -/* - home.css: This website contains selectors only used in home.css - All pages share the styles on index.css but you should create - one more css for each page that will contain the selected used - on that page only (the ones not reused in other pages). -*/ .adlam-display-regular { font-family: "ADLaM Display"; font-weight: 400; @@ -26,6 +20,167 @@ body { .btnStart{ background-color: darkblue; } + +.forgot-password { + border-radius: 20px; +} + +/* Contenedor principal */ +.pet-card-container { + max-width: 80%; + margin: 30px auto; + background-color: #fff; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + padding: 20px; +} + +/* Diseño 50/50 */ +.pet-card { + display: flex; + gap: 20px; +} + +.image-section { + flex: 1; +} + +.main-image { + width: 100%; + height: auto; + border-radius: 10px; + object-fit: cover; +} + +.info-section { + flex: 1; + padding: 10px; +} + +.info-section h3 { + font-size: 24px; + margin-bottom: 10px; +} + +.text-danger { + color: #ff4d4d; + font-weight: bold; +} + +a.btn-primary { + display: inline-block; + background-color: #007bff; + color: #fff; + text-decoration: none; + padding: 10px 15px; + border-radius: 5px; + margin: 10px 0; +} + +a.btn-primary:hover { + background-color: #0056b3; +} + +.table { + margin-top: 15px; + width: 100%; + border-collapse: collapse; +} + +.table th { + text-align: left; + font-weight: bold; + padding: 5px 0; +} + +.table td { + padding: 5px 0; +} + +p { + font-size: 14px; +} + +.additional-info { + margin-top: 15px; + font-style: italic; +} + +/* Galería */ +.gallery { + display: flex; + gap: 10px; + margin-bottom: 10px; +} + +.gallery img { + width: 70px; + height: 70px; + object-fit: cover; + border-radius: 5px; + cursor: pointer; + transition: transform 0.2s ease; +} + +.gallery img:hover { + transform: scale(1.1); +} + +/* Íconos de compartir */ +.share-icons span { + font-weight: bold; + margin-right: 10px; +} + +.share-icons a { + color: #6c757d; + margin-right: 5px; + font-size: 18px; +} + +.share-icons a:hover { + color: #007bff; +} +.filters-container { + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + background-color: #f9f9f9; +} + +.filters-container h5 { + margin-bottom: 15px; +} + +.filter label { + font-weight: bold; +} + +.filter input[type="radio"] { + margin-right: 10px; +} +.main-image { + width: 100%; + height: auto; + margin-bottom: 15px; +} + +.gallery img { + cursor: pointer; + transition: transform 0.2s; +} + +.gallery img:hover { + transform: scale(1.1); +} +.navigation-path a { + color: #6c757d; + text-decoration: none; +} + +.navigation-path a:hover { + text-decoration: underline; +} .bg-success { --bs-bg-opacity: 0.2; background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important; @@ -34,3 +189,21 @@ body { color: darkblue; font-size: 30px; } + + +.btn-primary:hover { + background-color: #004a99; /* Azul oscuro más claro al pasar el cursor */ +} + +/* Color del nombre */ +.text-primary { + color: #002f6c !important; /* Azul oscuro */ +} + +/* Iconos sin recuadro */ +.btn-outline-secondary { + border: none; /* Sin recuadro */ + background: none; /* Sin fondo */ + padding: 0; +} + diff --git a/src/front/styles/pet-views.css b/src/front/styles/pet-views.css new file mode 100644 index 0000000000..b16153de77 --- /dev/null +++ b/src/front/styles/pet-views.css @@ -0,0 +1,92 @@ +/* Barra de navegación */ +.navbar { + display: flex; + justify-content: space-between; + align-items: center; + background-color: white; + padding: 10px 20px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +/* Contenedor de vista de mascotas (Filtros y tarjetas) */ +.pets-view { + display: flex; + gap: 20px; + justify-content: space-between; +} + +/* Filtros */ +.filters { + width: 200px; /* Ajusta el ancho de los filtros */ + display: flex; + flex-direction: column; + gap: 20px; + position: sticky; + top: 20px; +} + +/* Categorías de filtros */ +.filter-category { + display: flex; + flex-direction: column; + gap: 10px; +} + +.filter-category h3 { + margin: 0; + font-size: 1.2em; + font-weight: bold; +} + +/* Estilo para los filtros (circulitos y cuadrados) */ +label { + display: flex; + align-items: center; + gap: 10px; +} + +/* Círculos de color */ +.color-circle { + width: 15px; + height: 15px; + border-radius: 50%; + display: inline-block; +} + +.color-circle.red { + background-color: red; +} + +.color-circle.blue { + background-color: blue; +} + +.color-circle.green { + background-color: green; +} + +/* Cuadrados de tamaño */ +.size-square { + width: 15px; + height: 15px; + display: inline-block; + border: 1px solid #ccc; + background-color: #f0f0f0; +} + +/* Contenedor principal de las tarjetas de mascotas */ +.pet-cards { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; + width: calc(100% - 220px); /* Ajusta el ancho para dar espacio a los filtros */ +} + +/* Tarjeta individual */ +.pet-card { + background-color: white; + padding: 10px; + border-radius: 5px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + text-align: center; +}