Skip to content

Commit

Permalink
Pag principal/inicial/inicio sesion/registro responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@FranciscoGonzalez03
FranciscoGonzalez03 committed Dec 9, 2023
1 parent aa48fe3 commit c30d078
Show file tree
Hide file tree
Showing 13 changed files with 1,862 additions and 52 deletions.
287 changes: 287 additions & 0 deletions ENTREGA 6/src/Frontend/abrir-incidente.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,287 @@
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

body {
background-color: #fff;
margin: 0;
padding: 0;
}
.bodyRankings {
margin: 0;
padding: 0;
background-image: url('https://i.pinimg.com/564x/3f/19/70/3f1970aa6514ad017293d6241c808320.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;

}
.fondo{
background-color: rgba(167, 128, 255, 0.5);
width: 100%;
height: 100%;
}

.titulo{
display: flex;
color: #4300d2;
justify-content: center;
align-items: center;
font-family: 'Open Sans', sans-serif;
font-size: 40px;
}
/* background-image: url("https://i.pinimg.com/originals/79/0c/6b/790c6bf979d503794b22cc21fc67c08b.jpg"); */
.contenedor{
display: flex;
flex-direction: column;
background-color: #A780FF;
justify-content: center;
align-items: center;
}
.subcontenedor {
flex: 1; /* Para que ambas columnas ocupen el mismo ancho */
padding: 10px; /* Espacio entre las columnas */
margin: 20px;
margin-left: 350px;
margin-right: 350px;
background-color: #fff;
border-radius: 20px;
justify-content: center;
align-items: center;
align-self: center;
text-align: center;
display: flex;
flex-direction: column;
}
.contenedorRanking{
display: flex;
background-color: #A780FF;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}

.contenedorColumna{
display: flex;
flex-direction: row;
background-color: #A780FF;
justify-content: center;
align-items: center;
height: 700px;
}
.contenedorColumna1{
display: flex;
flex-direction: column;
/*background-color: rgba(255, 255, 255, 0.7); */
background-color: rgba(67, 0, 210, 0.5);
justify-content: center;
align-items: center;
margin: 20px;
border-radius: 20px;
}
.contenedorColumna2{
display: flex;
flex-direction: row;
background-color: #fff;
justify-content: center;
align-items: center;
text-align: center;
margin: 20px;
border-radius: 20px;
width: 70%;
}
.columna1 {
/*width: 20%;
flex: 0 0 35%;*/
background-color: #A780FF;
justify-content: center;
align-items: center;
align-self: center;
text-align: center;
display: flex;
flex-direction: column;
padding: 3px;
}

/*.columna2 {*/
/* flex:1;*/
/* background-color: #A780FF; !* Color de fondo para la segunda columna *!*/
/* align-content: center;*/
/* align-items: center;*/
/* text-align: center;*/
/* display: flex;*/
/* flex-direction: column;*/
/*}*/
.columna2 {
flex: 0 0 65%; /* Establece el ancho en 65% */
align-content: center;
background-color: #A780FF;
align-items: center;
text-align: center;
display: flex;
flex-direction: column;
margin-left: auto; /* Alinea la columna en el lado derecho */
}

.referencia {
color: #fff; /* Cambia el color del enlace a azul */
text-decoration: none; /* Elimina la subrayado predeterminado */
font-size: 15px; /* Tamaño de fuente */
font-family: 'Open Sans', sans-serif;
padding: 10px 16px; /* Relleno para crear un botón */
border: none; /* Borde del botón */
background-color: #fa503f; /* Fondo blanco */
border-radius: 20px; /* Bordes redondeados */
display: block; /* Hace que el enlace se comporte como un bloque en línea */
margin: 5px;
width: 70%;
}
.referenciaElegida {
color: #fa503f; /* Cambia el color del enlace a azul */
text-decoration: none; /* Elimina la subrayado predeterminado */
font-size: 15px; /* Tamaño de fuente */
font-family: 'Open Sans', sans-serif;
padding: 10px 16px; /* Relleno para crear un botón */
border: 2px solid #fa503f; /* Borde del botón */
background-color: #fff; /* Fondo blanco */
border-radius: 20px; /* Bordes redondeados */
display: block; /* Hace que el enlace se comporte como un bloque en línea */
margin: 5px;
width: 70%;
}

.opciones{
flex: 1;
padding: 10px;
margin: 12px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 20px;
justify-content: center;
align-items: center;
align-self: center;
text-align: center;
display: flex;
flex-direction: column;
width: 50%;
}
.input{
border-radius: 10px;
padding: 8px;
background-color: #fff;
width: 75%;
border: 3px solid #fa503f;
}
.input:hover{
border: 3px solid #fa503f;
background-color: #fff;

}
.date{
margin: 10px;
border: 3px solid #fa503f;
border-radius: 20px;
background-color: #fa503f;
color: #fff;
padding: 10px 20px;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
display: inline-block;
}
.date:hover{
border: 3px solid #fa503f;
background-color: #fff;
color: #fa503f;
}
.label{
display: flex;
color: #4300d2;
justify-content: center;
align-items: center;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
}
.botonIrAPagPrincipal{
position: absolute;
top: 0;
right: 0;
margin: 10px;
border: none;
border-radius: 20px;
background-color: #4300d2;
color: #fff;
padding: 10px 20px;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
text-decoration: none;
}
.botonIrAPagPrincipal:hover {
background-color: #fff;
color: #4300d2;
}
.boton{
margin: 10px;
border: none;
border-radius: 20px;
background-color: #656565;
color: #fff;
padding: 10px 20px;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
display: inline-block;
}
.boton:hover {
background-color: #fff;
color: #656565;
}
.boton{
margin: 10px;
border: none;
border-radius: 20px;
background-color: #fa503f;
color: #fff;
padding: 10px 20px;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
}
.boton:hover {
background-color: #fff;
color: #fa503f;
}
/* Estilos para el botón de mostrar/ocultar en tamaños menores o iguales a 600px */
@media screen and (max-width: 1050px)and (min-width: 601px){
.botonIrAPagPrincipal{
padding: 7px 20px;
width: 15%;
text-align: center;
}
}
@media screen and (max-width: 600px) {
.titulo{
text-align: center;
}
.columna1 {
display: none;
}
.columna2{
margin-left: unset;
}
.date {
width: 65%;
font-size: 15px;
}

.botonIrAPagPrincipal {
display: block;
position: relative;
top: auto;
margin: 20px auto;
text-align: center;
}
.opciones{
width: 60%;
}
}
21 changes: 7 additions & 14 deletions ENTREGA 6/src/Frontend/abrir-incidente.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/x-icon" href="imagenes/logoUTN.png">
<link rel="stylesheet" href="estilosRequerimientos.css">
<link rel="stylesheet" href="abrir-incidente.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
Expand Down Expand Up @@ -39,40 +39,33 @@ <h1 class="titulo">Abrir incidente</h1>
<!-- Aquí se llenará la lista de monitoreables/servicios con JavaScript -->
</select>
</div>
<div style="height: 20px"></div>
<div style="height: 10px"></div>
<div class="opciones">
<label class="label" for="selectEstablecimiento">Selecciona la estacion o sucursal:</label>
<select class="input" id="selectEstablecimiento" v-model="establecimientoSeleccionado">
<!-- Aquí se llenará la lista de monitoreables/servicios con JavaScript -->
<option v-for="establecimiento in establecimientosFiltrados" :value="establecimiento">{{ establecimiento }}</option>
</select>
</div>
<div style="height: 20px"></div>
<div style="height: 10px"></div>
<div class="opciones">
<label class="label" for="selectMonitoreable">Selecciona un Servicio:</label>
<select class="input" id="selectMonitoreable">
<!-- Aquí se llenará la lista de monitoreables/servicios con JavaScript -->
</select>
</div>
<div style="height: 20px"></div>
<div style="height: 10px"></div>
<div class="opciones">
<label class="label">Descripcion</label>
<input class="input" for="" placeholder="Ingrese descripción"></input>
</div>
<div style="height: 20px"></div>
<div style="height: 10px"></div>
<div class="opciones">
<label class="label">Fecha de inicio</label>
<input class="date" type="date" id="fecha-inicio" name="fecha-inicio"/></input>
</div>
<div style="height: 20px"></div>
<!--
<div class="opciones">
<label class="label">Fecha de fin</label>
<input class="date" type="date" id="fecha-fin" name="fecha-fin"/></input>
</div>
<div style="height: 20px"></div>-->

<button class="botonCargar">Abrir incidente</button>
<div style="height: 10px"></div>
<button class="boton">Abrir incidente</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
Expand Down
Loading

0 comments on commit c30d078

Please sign in to comment.