Cambios básicos

Header y Footer generalizados con PHP.
Todos los "index.html" transformados a "index.php".
This commit is contained in:
Fernando Méndez 2021-03-19 17:02:07 +01:00 committed by GitHub
parent 7eca59c8cc
commit 6a38623819
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
44 changed files with 1449 additions and 0 deletions

380
assets/css/main.css Normal file
View File

@ -0,0 +1,380 @@
/* Basic */
* {
box-sizing: border-box;
}
/* Headers */
h1, h2, h3, h4 {
color: #363636;
text-transform: uppercase;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
text-align: center;
}
h2 {
font-size: 95%;
}
h3 {
font-size: 85%;
}
h4 {
font-size: 75%;
}
/* Header */
.header {
background-color: #1f2c3d;
color: #dadada;
padding: 15px;
text-align: left;
font-size: 18px;
}
.header img {
width: 11px;
}
.menu {
background-color: #1f2c3d;
color: #dadada;
text-align: right;
font-size: 15px;
}
/* Paragraphs */
p {
padding: 0;
border: 0;
}
a {
color: #dadada;
text-decoration: none;
}
a:hover{
color:rgb(138, 150, 32);
}
/* Body */
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #d3ebff;
color: #000000
}
/* Table */
table {
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 2em 0;
width: 100%;
text-align: left;
font-size: 15px;
}
table a{
color: #1f2c3d;
}
table tbody tr {
border: solid 1px #1f2c3d;
border-left: 0;
border-right: 0;
}
table tbody tr:nth-child(2n + 1) {
background-color: rgba(144, 144, 144, 0.25);
}
table td {
padding: 0.75em 0.75em;
}
table th {
color: #1f2c3d;
font-size: 0.9em;
font-weight: 600;
padding: 0 0.85em 0.85em 0.85em;
}
table thead {
border-bottom: solid 2px #1f2c3d;
}
/* Main */
.main {
padding: 30px;
text-align: center;
font-size: 35px;
}
.main h1, h2, h3, h4 {
color: #363636;
}
.main img {
width: 50%;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
padding: 10px;
}
/* Left and right column */
.column.side {
width: 33.33%;
}
/* Middle column */
.column.middle {
width: 33.33%;
}
/* Left column */
.column.left {
width: 50%;
}
/* Right column */
.column.right {
float: right;
width: 50%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout: makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 1000px) {
.column.side, .column.middle, .column.left, .column.right{
width: 100%;
}
}
/* Zoom */
.zoom {
transition: transform .2s;
}
.zoom:hover {
transform: scale(1.05);
}
/* Code & Blockquote */
.code {
background: #1f2c3d;
border-radius: 3px;
font-size: 0.9em;
margin: 10px;
display: block;
line-height: 1.75em;
padding: 1em 1.5em;
overflow-x: auto;
overflow-y: auto;
}
.code h1, .code h2{
color: #dadada;
}
.code h3, .code h4 {
color: #d3ebff;
}
.code p {
color: #dadada;
}
.code a {
text-decoration: underline;
}
.code ul {
color: #dadada;
}
.code img{
/* width: 80px; height: 80px; */
width: 25%;
}
.code fieldset{
margin: 1px;
border-color: #dadada;
border-style: groove;
}
.code fieldset legend {
text-transform: uppercase;
font-weight: bold;
font-size: 90%;
color: #d3ebff;
}
.code.details{
height: 750px;
}
.code.plan {
height: 1150px;
}
.blockquote {
border-left: solid 4px #dadada;
margin: 0 0 2em 0;
padding: 0.5em 0 0.5em 2em;
}
.blockquote.bio {
height: 250px;
}
/* Sketches */
.sketches {
text-align: center;
display: block;
line-height: 1.25em;
padding: 1em 1em;
overflow-x: auto;
background: #1f2c3d;
border-radius: 3px;
height: 680px;
}
.sketches h1, .sketches h2, .sketches h3, .sketches h4, .sketches p {
color: #dadada;
}
.sketches img {
width: 550px;
height: 550px;
}
.sketches .description {
color: #d3ebff;
}
/* Responsive layout */
@media (max-width: 1500px) {
.column.side .sketches, .column.middle .sketches {
width: 100%;
height: 500px;
}
.column.side .sketches img, .column.middle .sketches img {
width: 100%;
height: 75%;
}
}
@media (max-width: 1150px) {
.sketches img {
width: 100%;
height: 75%;
}
}
/* Percentage bar */
.bar {
height: 15px;
line-height: 15px;
font-size: 13px;
font-weight: bold;
width: 100%;
background-color: #d3ebff;
text-align: right;
}
.bar.seventyfive {
width: 75%;
}
.bar.fifty {
width: 50%;
}
.bar.twentyfive {
width: 25%;
}
/* Timeline Image */
.timeline h2 {
padding-top: 50px;
}
.timeline img{
width: 100%;
text-align: center;
padding-bottom: 50px;
padding-left: 15px;
padding-right: 15px;
}
/* Form */
form {
margin: auto;
width: 65%;
}
form h1, h2, h3, h4 {
color: #363636;
}
label {
text-align: center;
font-weight: bold;
}
input, textarea {
width: 100%;
height: 27px;
border: 1px solid #000000;
padding: 10px;
margin-top: 5px;
font-size: 15px;
}
textarea {
width: 100%;
height: 150px;
}
#radio, #checkbox {
width: auto;
height: 15px;
cursor: pointer;
}
.verify {
font-size: 11px;
}
#submit {
width: 100%;
height: 35px;
border: 1px solid #000000;
padding: 5px;
margin-top: 5px;
font-size: 15px;
font-weight: bold;
box-shadow: 2px 2px #1f2c3d;
filter: brightness(105%);
cursor: pointer;
}
#submit:hover {
background-color: #d3ebff;
}
#reset {
width: 100%;
height: 30px;
border: 1px solid #dadada;
background-color: #00020f;
color: #dadada;
padding: 5px;
margin-top: 5px;
font-size: 12px;
font-weight: bold;
box-shadow: 2px 2px #1f2c3d;
cursor: pointer;
}
#reset:hover {
border:#000000;
background-color: #791515;
}
/* Footer */
.footer {
background-color: #1f2c3d;
color: #dadada;
padding: 25px;
margin-top: 100px;
width: 100%;
height: 80px;
text-align: right;
}

7
assets/php/footer.php Normal file
View File

@ -0,0 +1,7 @@
<?php
echo"<footer>
<div class='footer'>
<p>© Práctica 2 | Sistemas Web 2021 </p>
</div>
</footer>\n";
?>

25
assets/php/header.php Normal file
View File

@ -0,0 +1,25 @@
<?php
$page = $_SERVER['PHP_SELF'];
$prefix = '../';
switch(true){
case strpos($page, 'detalles'): $page = 'Detalles'; break;
case strpos($page, 'bocetos'): $page = 'Detalles'; break;
case strpos($page, 'miembros'): $page = 'Detalles'; break;
case strpos($page, 'planificacion'): $page = 'Detalles'; break;
case strpos($page, 'contacto'): $page = 'Detalles'; break;
default: $page = 'FDI-Cines'; $prefix = './'; break;
}
echo"<div class='header'>
<a href='{$prefix}'><img src='{$prefix}img/favicon2.png' /> CompluCine</a> | {$page}
<div class='menu'>
<a href='{$prefix}'>Inicio |</a>
<a href='{$prefix}detalles/'>Detalles |</a>
<a href='{$prefix}bocetos/'>Bocetos |</a>
<a href='{$prefix}miembros/'>Miembros |</a>
<a href='{$prefix}planificacion/'>Planificación |</a>
<a href='{$prefix}contacto/'>Contacto</a>
</div>
</div>\n";
?>

307
bocetos/index.php Normal file
View File

@ -0,0 +1,307 @@
<!DOCTYPE HTML>
<!--
Práctica 2 - Sistemas Web | Grupo D
CompluCine - FDI-cines
-->
<html lang="es">
<head>
<title>CompluCine | Bocetos</title>
<meta charset="utf-8" />
<link id="estilo" rel="stylesheet" type="text/css" href="../assets/css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="../img/favicon.png" />
</head>
<body>
<!-- Header -->
<?php
require_once('../assets/php/header.php');
?>
<!-- Main -->
<div class="main">
<div class="image"><img src="../img/logo_trasparente.png" /></div>
<h1>Bocetos</h1>
<hr />
</div>
<!-- Flow -->
<section id="flow">
<div class="code">
<h2>FLUJO DE NAVEGACIÓN</h2>
<hr>
<!-- User Flow -->
<fieldset>
<legend>Usuario</legend>
<p>
El Usuario puede tomar dos caminos a la hora de seleccionar la película, el cine, y la sesión a la que quiere asistir. La diferencia es puramente
de orden entre la elección de cine y de la película, a conveniencia del usuario; se procede a explicar ambos:
</p>
<p>
1. Selección de Cine -> Selección de Película -> Selección de Sesión -> Reserva de Butacas -> Checkout: Primero se selecciona el cine en la vista de selección
de cines en la que se encuentra un mapa y una lista con los cines de la cadena. Una vez seleccionado el cine se redirigirá al usuario a la vista de selección
de película, con el filtro del cine correspondiente activado, de forma que solo se muestren las películas disponibles en el cine seleccionado. En esa vista se
eligirá la película y la versión a ver (VO, 3D, 4DX, etc).
</p>
<p>
Una vez elegida la película, se redirigirá al usuario a la elección de sesión. Se mostrarán todas las sesiones disponibles y el usuario podrá elegir la sesión y
el número de entradas que quiere reservar, pudiendo ver el precio final de las mismas. Se le llevará a la vista de butacas en donde podrá elegir qué butacas reservar.
</p>
<p>
Una vez elegidas las butacas, el usuario procede a la página de pago, en donde rellenará los datos necesarios para pagar online. Terminada la compra con éxito, se
mostrará una pantalla de "Compra Realizada", dando al usuario la seguridad de que su reserva se ha registrado correctamente. Luego se le redirigirá a la pantalla de
inicio.
</p>
<p>
2. Selección de Película -> Selección de Cine -> Selección de Sesión -> Reserva de Butacas -> Checkout: Es idéntico al flujo anterior pero el usuario empieza eligiendo
la película, de forma que se le redirige a la vista de selección de cine, esta vez con un filtro, de forma que solo se muestran los cines que tengan sesiones activas
con la película seleccionada.
</p>
<p>
Una vez elegidos película y cine, el flujo es idéntico al anterior.
</p>
</fieldset>
<!-- Manager Flow -->
<fieldset>
<legend>Gerente</legend>
<p>
El Gerente es el encargado de gestionar las sesiones y salas de cada cine. La forma de proceder es la misma que el administrador, con vistas equivalentes.
En el caso de la gestión de salas, se administrarán los asientos disponibles (por temas de Covid-19) y si está o no habilitada para su uso.
</p>
</fieldset>
<!-- Admin Flow -->
<fieldset>
<legend>Administrador</legend>
<p>El Administrador es el encargado de gestionar las: películas, cines, promociones, otros administradores y gerentes de cada cine.</p>
<p>Para cada categoría tiene un panel en el que puede seleccionar, a partir de una lista, el elemento que quiere modificar, también hay otro panel al lado, en donde
puede modificar los datos de un elemento ya existente o crear uno nuevo introduciendo datos que no existan en la BD. También hay una opción de Eliminar en caso de que
quiera eliminar un elemento.</p>
<p>También cuenta con un botón de "Vista de Usuario", con el que puede navegar por la página con la vista que tendrá el usuario final.</p>
</fieldset>
</div>
</section>
<!-- Sketches -->
<section id="sketches">
<hr />
<!-- Generic Sketches-->
<div class="code">
<h3>Pantallas Genéricas</h3>
</div>
<div class="row">
<div class="column left">
<div class="sketches">
<img src="../img/inicio.png" />
<div class="description">
<h3>Pantalla de inicio</h3>
<p>Pantalla de bienvenida al entrar en la web.</p>
</div>
</div>
</div>
<div class="column right">
<div class="sketches">
<img src="../img/registrarse_iniciar_sesion.png" />
<div class="description">
<h3>Pantalla de Registro / Inicio de sesión</h3>
<p>Pantalla para que un usuario nuevo se registre o, en caso de ya tener una cuenta de usuario, inicie sesión.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="column left">
<div class="sketches">
<img src="../img/menu_usuario.png" />
<div class="description">
<h3>Menú de usuario registrado</h3>
<p>Pantalla con todas las opciones disponibles, propias de un usuario registrado.</p>
</div>
</div>
</div>
<div class="column right">
<div class="sketches">
<img src="../img/peliculas.png" />
<div class="description">
<h3>Cartelera</h3>
<p>Pantalla con información sobre todas las películas disponibles en ese momento.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="column left">
<div class="sketches">
<img src="../img/cine.png" />
<div class="description">
<h3>Cines</h3>
<p>Pantalla con un mapa que indica la geolocalización de todos los cines de FDI-Cines.</p>
</div>
</div>
</div>
<div class="column right">
<div class="sketches">
<img src="../img/selector_horario.png" />
<div class="description">
<h3>Selección de Horario</h3>
<p>Pantalla que muestra los horarios disponibles por salas para un cine y película elegidos.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="column left">
<div class="sketches">
<img src="../img/mapa_asientos.png" />
<div class="description">
<h3>Mapa de los Asientos</h3>
<p>Pantalla con un mapa para selccionar los asientos que se quieren escoger. Los asientos ocupados no pondrán ser seleccionados.</p>
</div>
</div>
</div>
<div class="column right">
<div class="sketches">
<img src="../img/pagar.png" />
<div class="description">
<h3>Pagar</h3>
<p>Pantalla para realizar el pago, después de haber selecionado película, cine, sala, horario y butacas.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="column left">
<div class="sketches">
<img src="../img/compra_realizada.png" />
<div class="description">
<h3>Compra Realizada</h3>
<p>Pantalla de confirmación con los datos de compra.</p>
</div>
</div>
</div>
<div class="column right">
<div class="sketches">
<img src="../img/about_us.png" />
<div class="description">
<h3>Sobre nosotros</h3>
<p>Pantalla con información sobre FDI-Cines.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="column left">
<div class="sketches">
<img src="../img/contacto.png" />
<div class="description">
<h3>Formulario de Contacto</h3>
<p>Pantalla con un formulario para realizar una consulta a los administradores.</p>
</div>
</div>
</div>
<div class="column right">
<div class="sketches">
<img src="../img/terminos_y_condiciones.png" />
<div class="description">
<h3>Términos y Condiciones</h3>
<p>Pantalla con todos los términos y condiciones de uso del servicio.</p>
</div>
</div>
</div>
</div>
<!-- Manager Sketches-->
<div class="code">
<h3>Pantallas de Gerentes</h3>
</div>
<div class="row">
<div class="column side">
<div class="sketches">
<img src="../img/panel_inicio_gerente.png" />
<div class="description">
<h3>Panel de Incio Gerente</h3>
<p>Pantalla con las funciones exclusivas a las que puede acceder un Gerente.</p>
</div>
</div>
</div>
<div class="column middle">
<div class="sketches">
<img src="../img/gestionar_salas.png" />
<div class="description">
<h3>Gestionar salas</h3>
<p>Pantalla en la que los Gerentes pueden interactuar para añadir, modificar o eliminar la sala de un cine.</p>
</div>
</div>
</div>
<div class="column side">
<div class="sketches">
<img src="../img/gestionar_sesiones.png" />
<div class="description">
<h3>Gestionar Sesiones</h3>
<p>Pantalla en la que los Gerentes pueden interactuar para añadir, modificar o eliminar las sesiones de una película.</p>
</div>
</div>
</div>
</div>
<!-- Admin Sketches-->
<div class="code">
<h3>Pantallas de Administradores</h3>
</div>
<div class="row">
<div class="column left">
<div class="sketches">
<img src="../img/panel_inicio_admin.png" />
<div class="description">
<h3>Panel Inicio Administrador</h3>
<p>Pantalla con las funciones exclusivas a las que puede acceder un Administrador.</p>
</div>
</div>
</div>
<div class="column right">
<div class="sketches">
<img src="../img/gestionar_peliculas.png" />
<div class="description">
<h3>Gestionar Películas</h3>
<p>Pantalla en la que los Administradores pueden interactuar para añadir, modificar o eliminar las películas de la cartelera.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="column side">
<div class="sketches">
<img src="../img/gestionar_cines.png" />
<div class="description">
<h3>Gestionar Cines</h3>
<p>Pantalla en la que los Administradores pueden interactuar para añadir, modificar o eliminar los cines.</p>
</div>
</div>
</div>
<div class="column middle">
<div class="sketches">
<img src="../img/gestionar_promociones.png" />
<div class="description">
<h3>Gestionar Promociones</h3>
<p>Pantalla en la que los Administradores pueden interactuar para añadir, modificar o eliminar las promociones existentes.</p>
</div>
</div>
</div>
<div class="column side">
<div class="sketches">
<img src="../img/gestionar_admins_gerentes.png" />
<div class="description">
<h3>Gestionar Administradores y Gerentes</h3>
<p>Pantalla en la que los Administradores pueden interactuar para añadir, modificar o eliminar tanto otros Administradores como Gerentes.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<?php
include_once('../assets/php/footer.php');
?>
</body>
</html>

78
contacto/index.php Normal file
View File

@ -0,0 +1,78 @@
<!DOCTYPE HTML>
<!--
Práctica 2 - Sistemas Web | Grupo D
CompluCine - FDI-cines
-->
<html lang="es">
<head>
<title>CompluCine | Contacto</title>
<meta charset="utf-8" />
<link id="estilo" rel="stylesheet" type="text/css" href="../assets/css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="../img/favicon.png" />
</head>
<body>
<!-- Header -->
<?php
require_once('../assets/php/header.php');
?>
<!-- Main -->
<div class="main">
<div class="image"><img src="../img/logo_trasparente.png" /></div>
<h1>Contacto</h1>
<hr />
</div>
<!-- Form -->
<section id="formulario">
<h4>Formulario</h4>
<form method="post" action="mailto:fernmend@ucm.es">
<div class="row">
<fieldset id="datos_personales">
<legend>Datos personales</legend>
<div class="_name">
<input type="text" name="name" id="name" value="" placeholder="Nombre" />
</div>
<div class="_email">
<input type="email" name="email" id="email" value="" placeholder="Email" />
</div>
</fieldset>
<fieldset id="motivo">
<legend>Motivo de la consulta</legend>
<div class="reason">
<input type="radio" id="radio" name="reason" value="evaluation" checked>
<label for="evaluation">Evaluación</label>
</div>
<div class="reason">
<input type="radio" id="radio" name="reason" value="sugestions">
<label for="sugestions">Sugerencias</label>
</div>
<div class="reason">
<input type="radio" id="radio" name="reason" value="critics">
<label for="critics">Críticas</label>
</div>
</fieldset>
<div class="message">
<textarea name="message" id="message" placeholder="Escribe aquí tu mensaje..."></textarea> <!-- rows="5" -->
</div>
<div class="verify">
<input type="checkbox" id="checkbox" name="terms">
<label for="terms">Marque esta casilla para verificar que ha leído nuestros términos y condiciones del servicio.</label>
</div>
<div class="actions">
<input type="submit" id="submit" value="Enviar mensaje" class="primary" />
<input type="reset" id="reset" value="Borrar" />
</div>
</div>
</form>
</section>
<!-- Footer -->
<?php
include_once('../assets/php/footer.php');
?>
</body>
</html>

114
detalles/index.php Normal file
View File

@ -0,0 +1,114 @@
<!DOCTYPE HTML>
<!--
Práctica 2 - Sistemas Web | Grupo D
CompluCine - FDI-cines
-->
<html lang="es">
<head>
<title>CompluCine | Detalles</title>
<meta charset="utf-8" />
<link id="estilo" rel="stylesheet" type="text/css" href="../assets/css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="../img/favicon.png" />
</head>
<body>
<!-- Header -->
<?php
require_once('../assets/php/header.php');
?>
<!-- Main -->
<div class="main">
<div class="image"><img src="../img/logo_trasparente.png" /></div>
</div>
<!-- Details -->
<section id="details">
<div class = "code">
<h1>Detalles</h1>
<hr/>
<div class ="blockquote">
<p>
Con este proyecto buscamos la creación de una aplicación web que
gestione la cartelera de un grupo de cines con una cartelera de películas variable, unos horarios propios de cada cine por sesión y película
y unos precios determinados.
</br>
Los usuarios podrán registrarse, comprar sus entradas para una
sesión, elegir asientos, precomprar sus snacks y ver ofertas y promociones.
</p>
</div>
</div>
</section>
<!-- User and Functionalities -->
<section id="user_functionalities">
<div class ="row">
<div class="column left">
<div class = "code details">
<h2>Tipos de usuario</h2>
<hr />
<fieldset>
<legend>Usuario No Registrado</legend>
<p>
Este tipo de usuario, puede interactuar con la web sin necesidad de estar registrado. Podrá realizar compras, ver horarios y cartelera, sin necesidad de realizar ningún registro.
No podrá usar ninguna de las promociones, pues estas estarán únicamente destinadas a los usuarios registrados.
</p>
</fieldset>
<fieldset>
<legend>Usuario Registrado</legend>
<p>
Estos usuarios son aquellos que previamente han realizado un registro en la base de datos del sistema. Tendrán las mismas funcionalidades básicas
que un usuario no registrado y además, podrán acceder a ofertas y aplicar promociones y descuentos y ver el historial de sus compras.
Además, estos usuarios podrán cancelar una compra previamente hecha, pues estas se asociarían a su cuenta, algo que sería imposible
con un usuario no registrado.
</p>
</fieldset>
<fieldset>
<legend>Gerente de Cine</legend>
<p>
Un administrador de rango bajo capaz de acceder a la vista de administradores, puede ver las peliculas que hay en la base de datos.
Este usuario está asociado a un cine, sobre el cual puede añadir sesiones con peliculas existentes y modificar la disposicion de butacas.
</p>
</fieldset>
<fieldset>
<legend>Administrador</legend>
<p>
El administrador es capaz de ascender cuentas de usuario registradas a cuentas de gerente de cine. Ademas es el encargado de añadir nuevos cines y peliculas.
Para comprobar el correcto funcionamiento de la pagina podrá cambiar entre distintas vistas de usuario.
Las cuales le permitirán comprobar que cada usuario tiene acceso únicamente a sus funcionalidades y no a funcionalidades de otro rango superior.
</p>
</fieldset>
</div>
</div>
<div class="column right">
<div class = "code details">
<h1>Funcionalidad</h1>
<hr />
<p>
La aplicación debe permitir la compra online de entradas para sesiones de cine, mostrando los cines y
horarios en los que se encuentra disponible la película seleccionada por el usuario dentro del catálogo disponible en ese momento (la cartelera).
Los usuarios podrán acceder a la compra de entradas buscando la película que desean ver y luego escogiendo un cine y horario determinado.
Además de una búsqueda específica, también se ofrecerá la posibilidad de visionar toda la cartelera, y escoger una película, horario y cine, de entre todas las posibilidades.
<p>
Una vez escogido todo, se mostrará una página en la que el usuario decidirá la o las butacas en las que se sentará. Se mostrarán butacas disponibles y butacas ocupadas (en caso de que las haya).
Antes de realizar la compra, los usuarios podrán aplicar promociones especificas que le permitan obtener algun snack en el cine o descuentos disponibles en la aplicación.
</p>
<p>
Por otro lado la aplicacion debe permitir a los gerentes y administradores visionar la lista y contenido de todas las peliculas que hay en cartelera,
siendo los administradores los encargados de modificarlas y añadir nuevas.
De igual forma, ambos podran ver todos los cines activos de la aplicacion, pero solo los administradores serán capaces de añadir o modificar cines existentes.
<p>
Cada cine tiene una cantidad de salas y sesiones con horarios específicos pora cada una de las películas.
Aunque ambos roles (administrador y gerente) pueden ver estas salas y horarios, es el gerente de cine el encargado de modificar las salas,
su disposición de butacas, modificar el horario de las sesiones y añadir nuevas sesiones, y crear promociones específicas para una sesión concreta o para el cine completo.
Todo esto unicamente para el cine con el cual esta relacionado.
</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<?php
include_once('../assets/php/footer.php');
?>
</body>
</html>

BIN
img/about_us.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

BIN
img/arn.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

BIN
img/cine.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 98 KiB

BIN
img/compra_realizada.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

BIN
img/contacto.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

BIN
img/dmg.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

BIN
img/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 KiB

BIN
img/favicon2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
img/fmt.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

BIN
img/gestionar_cines.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

BIN
img/gestionar_peliculas.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

BIN
img/gestionar_salas.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

BIN
img/gestionar_sesiones.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

BIN
img/imt.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

BIN
img/inicio.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

BIN
img/linea_temporal.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
img/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB

BIN
img/logo_trasparente.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

BIN
img/mapa_asientos .png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

BIN
img/mapa_asientos.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

BIN
img/menu_usuario.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

BIN
img/mep.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 97 KiB

BIN
img/orp.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

BIN
img/pagar.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

BIN
img/panel_inicio_admin.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

BIN
img/peliculas.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

BIN
img/plantilla.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

BIN
img/sala1.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

BIN
img/selector_horario.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

70
index.php Normal file
View File

@ -0,0 +1,70 @@
<!DOCTYPE HTML>
<!--
Práctica 2 - Sistemas Web | Grupo D
CompluCine - FDI-cines
-->
<html lang="es">
<head>
<title>CompluCine | FDI-Cines</title>
<meta charset="utf-8" />
<link id="estilo" rel="stylesheet" type="text/css" href="assets/css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="img/favicon.png" />
</head>
<body>
<!-- Header -->
<?php
require_once('./assets/php/header.php');
?>
<!-- Main -->
<div class="main">
<div class="image"><img src="img/logo_trasparente.png" /></div>
</div>
<!-- Description -->
<section id="description">
<div class="code" id="resume">
<h1>Descripción</h1>
<hr />
<div class="blockquote">
<p>
CompluCine es un proyecto para la creación y desarrollo de una plataforma web que permita la compra de entradas
de cine, por fecha y hora, para cualquiera de los cines del grupo <a href="#FDI-Cines">FDI-Cines</a>
mostrar la cartelera disponible e incluya ofertas y promociones para los clientes.
</p>
<p>
Con este proyecto buscamos la creación de una aplicación web que
gestione la cartelera de un grupo de cines con una lista de películas variable,
unos horarios propios de cada cine por sesión y película, y con unos precios determinados.
</p>
<p>
Los usuarios podrán registrarse, comprar sus entradas para una
sesión, elegir asientos, precomprar sus snacks y ver ofertas y promociones.
</p>
</div>
</div>
<div class="code" id="FDI-Cines">
<h2>FDI-Cines</h2>
<hr />
<div class="blockquote">
<p>
Somos un <a href="./miembros/">grupo de estudiantes</a> de la asignatura de Sistemas Web
de la Facultad de Informática de la Universidad Complutense de Madrid.
</p>
<p>
CompluCine es un proyecto web universitario y en ningún momento pretende ofrecer una funcionalidad real.
Para más información acerca del proyecto, haz click <a href="./detalles/">aquí</a>.
</p>
</div>
</div>
</section>
<!-- Footer -->
<?php
include_once('./assets/php/footer.php');
?>
</body>
</html>

172
miembros/index.php Normal file
View File

@ -0,0 +1,172 @@
<!DOCTYPE HTML>
<!--
Práctica 2 - Sistemas Web | Grupo D
CompluCine - FDI-cines
-->
<html lang="es">
<head>
<title>CompluCine | Miembros</title>
<meta charset="utf-8" />
<link id="estilo" rel="stylesheet" type="text/css" href="../assets/css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="../img/favicon.png" />
</head>
<body>
<!-- Header -->
<?php
require_once('../assets/php/header.php');
?>
<!-- Main -->
<div class="main">
<div class="image"><img src="../img/logo_trasparente.png" /></div>
<section id="members_table">
<h1>Miembros</h1>
<hr />
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#MEP">Marco Expósito Pérez</a></td>
<td><a href="mailto:marcoexp@ucm.es">marcoexp@ucm.es</a></td>
</tr>
<tr>
<td><a href="#FMT">Fernando Méndez Torrubiano</a></td>
<td><a href="mailto:fernmend@ucm.es">fernmend@ucm.es</a></td>
</tr>
<tr>
<td><a href="#DMG">Daniel Muñoz García</a></td>
<td><a href="mailto:danimu03@ucm.es">danimu03@ucm.es</a></td>
</tr>
<tr>
<td><a href="#IMT">Ioan Marian Tulai</a></td>
<td><a href="mailto:ioantula@ucm.es">ioantula@ucm.es</a></td>
</tr>
<tr>
<td><a href="#ORP">Óscar Ruiz de Pedro</a></td>
<td><a href="mailto:oscarrui@ucm.es">oscarrui@ucm.es</a></td>
</tr>
<tr>
<td><a href="#ARN">Adrian Real del Noval</a></td>
<td><a href="mailto:adrireal@ucm.es">adrireal@ucm.es</td>
</tr>
</tbody>
</table>
</section>
</div>
<!-- Members -->
<section id="members">
<div class="row">
<div class="column side">
<!-- Marco Esposito -->
<section id="MEP">
<div class="zoom">
<div class="code">
<img src="../img/mep.jpg" />
<p>~ Marco Expósito Pérez (marcoexp@ucm.es)</p>
<div class="blockquote bio">
<p>Aficionado a todo tipo de videojuegos, principalmente la saga Zelda. Tambien me gusta leer tanto literatura fantastica como mangas y veo anime asiduamente.</p>
<p>En verano suelo participar en campeonatos de pesca subacuatica y tambien me gusta bastante jugar al futbol federado, aunque hace un tiempillo ya que no hago.</p>
</div>
</div>
</div>
</section>
</div>
<div class="column middle">
<!-- Fernando Méndez -->
<section id="FMT">
<div class="zoom">
<div class="code">
<img src="../img/fmt.jpg" />
<p>~ Fernando Méndez (fernmend@ucm.es)</p>
<div class="blockquote bio">
<p>Estudiante de Ingeniería de Computadores en la Universidad Complutense de Madrid.</p>
<p>Presidente de la asociación Diskobolo. Colaborador de la Oficina de Sotfware Libre de la UCM y coordinador del grupo de Hacking Ético de la FDI.</p>
</div>
</div>
</div>
</section>
</div>
<div class="column side">
<!-- Daniel Muñoz -->
<section id="DMG">
<div class="zoom">
<div class="code">
<img src="../img/dmg.jpg" />
<p>~ Daniel Muñoz García (danimu03@ucm.es)</p>
<div class="blockquote bio">
<p>Estudiante del grado en ingeniería informática en la Universidad Complutense de Madrid. Aficionado a la ciberseguridad y las nuevas tecnologías.</p>
<p>Especializado en el diseño y gestión de bases de datos, tanto SQL como noSQL, y su desarrollo con distintos lenguajes como MongoDB o MySQL.</p>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="row">
<div class="column side">
<!-- Ioan Marian -->
<section id="IMT">
<div class="zoom">
<div class="code">
<img src="../img/imt.jpg" />
<p>~ Ioan Marian Tulai (ioantula@ucm.es)</p>
<div class="blockquote bio">
<p>Estudiante con mucha ilusion y ganas de trabajar especialista en hardware.</p>
<p>Alta experiencia programando en C, gran interés en aprender nuevos lenguajes de programación y aficionado a dibujar.</p>
</div>
</div>
</div>
</section>
</div>
<div class="column middle">
<!-- Óscar Ruiz -->
<section id="ORP">
<div class="zoom">
<div class="code">
<img src="../img/orp.jpg" />
<p>~ Óscar Ruiz de Pedro (oscarrui@ucm.es)</p>
<div class="blockquote bio">
<p>Estudiante de ingeniería de computadores en la Universidad Complutense de Madrid.</p>
<p>Altas capacidades de programación en bajo nivel, me gustaría aprender más sobre el ámbito de la robótica.</p>
<p>Aficionado a todo tipo de videojuegos, impresión 3D, teatro y airsoft.</p>
</div>
</div>
</div>
</section>
</div>
<div class="column side">
<!-- Adrian Real -->
<section id="ARN">
<div class="zoom">
<div class="code">
<img src="../img/arn.jpg" />
<p>~ Adrian Real del Noval (adrireal@ucm.es)</p>
<div class="blockquote bio">
<p>Estudiante de 3er año de Ingeniería de Computadores en la Universidad Complutense de Madrid.</p>
<p>Las áreas en las que tiene mayor interés son la electrónica, las GPUs, y los sistemas empotrados.</p>
</div>
</div>
</div>
</section>
</div>
</div>
</section>
<!-- Footer -->
<?php
include_once('../assets/php/footer.php');
?>
</body>
</html>
</html>

296
planificacion/index.php Normal file
View File

@ -0,0 +1,296 @@
<!DOCTYPE HTML>
<!--
Práctica 2 - Sistemas Web | Grupo D
CompluCine - FDI-cines
-->
<html lang="es">
<head>
<title>CompluCine | Planificación</title>
<meta charset="utf-8" />
<link id="estilo" rel="stylesheet" type="text/css" href="../assets/css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="../img/favicon.png" />
</head>
<body>
<!-- Header -->
<?php
require_once('../assets/php/header.php');
?>
<!-- Main -->
<div class="main">
<div class="image"><img src="../img/logo_trasparente.png" /></div>
<h1>Planificación*</h1>
<hr />
</div>
<!-- Planning -->
<section class="planning">
<div class="row">
<div class="column side">
<div class="code plan">
<h2>Tareas</h2>
<hr />
<fieldset>
<legend>Implementaciones Generales de la Web</legend>
<ul>
<li>Pantalla de Inicio (incluye promociones y estrenos) [Fer && Adrián]</li>
<li>Cartelera Dinámica [Fer --> Marian && Daniel]</li>
<li>Selección Cines (mapa) [Fer]</li>
<li>Listado de Horarios [Fer]</li>
<li>Selección de butacas [Fer --> Marco && Óscar]</li>
<li>Pagar + opción para código promocional [Fer]</li>
<li>Sobre FDI-Cines (About us) [Fer && Adrián]</li>
<li>Formulario de Contacto [Fer]</li>
<li>Términos y Condiciones [Fer && Adrián]</li>
</ul>
</fieldset>
<fieldset>
<legend>Paneles de Usuario Registrado</legend>
<ul>
<li>Registrarse e Iniciar sesión [Adrián]</li>
<li>Menú y panel de Usuario (Historial compras, cambiar contraseña, datos de pago y eliminar usuario) [Adrián]</li>
</ul>
</fieldset>
<fieldset>
<legend>Paneles de Gerente</legend>
<ul>
<li>Pantalla de inicio de gerente [Marco && Óscar]</li>
<li>Eliminar sesión de una película [Marco && Óscar]</li>
<li>Deshabilitar salas [Marco && Óscar]</li>
<li>Deshabilitar asientos en una sala [Marco && Óscar]</li>
</ul>
</fieldset>
<fieldset>
<legend>Paneles de Administrador</legend>
<ul>
<li>Panel de inicio administrador (ver todas la funcionalidades de admin de un vistazo) [Daniel && Marian]</li>
<li>Ver como >> Usuario no registrado || Usuario registrado || (Gerente: Añadir si vamos bien de tiempo) [Daniel && Marian]</li>
<li>Panel añadir/editar/eliminar cine [Marian && Daniel]</li>
<li>Panel añadir/editar/eliminar películas a la cartelera [Marian && Daniel]</li>
<li>Panel añadir/editar/eliminar promociones [Marian && Daniel]</li>
<li>Panel añadir/editar/eliminar gerentes [Marian && Daniel]</li>
</ul>
</fieldset>
</div>
</div>
<div class="column middle">
<div class="code plan">
<h2>Divisón del trabajo</h2>
<hr />
<fieldset>
<legend>Marco Expósito Pérez</legend>
<ul>
<li>Pantalla de inicio de gerente [Gerente]</li>
<li>Eliminar sesión de una película [Gerente]</li>
<li>Deshabilitar salas [Gerente]</li>
<li>Deshabilitar asientos en una sala [Gerente]</li>
<li>Selección de butacas [General (de apoyo)]</li>
</ul>
</fieldset>
<fieldset>
<legend>Fernando Méndez Torrubiano</legend>
<ul>
<li>Pantalla de Inicio (incluye promociones y estrenos) [General]</li>
<li>Cartelera Dinámica [General]</li>
<li>Selección Cines (mapa) [General]</li>
<li>Listado de Horarios [General]</li>
<li>Selección de butacas [General]</li>
<li>Pagar + opción para código promocional [General]</li>
<li>Sobre FDI-Cines (About us) [General (de apoyo)]</li>
<li>Formulario de Contacto [General]</li>
<li>Términos y Condiciones [General (de apoyo)]</li>
</ul>
</fieldset>
<fieldset>
<legend>Daniel Muñoz García</legend>
<ul>
<li>Panel de inicio administrador (ver todas la funcionalidades de admin de un vistazo) [Administrador]</li>
<li>Ver como >> Usuario no registrado || Usuario registrado || (Gerente: Añadir si vamos bien de tiempo) [Administrador]</li>
<li>Panel añadir/editar/eliminar cine [Administrador]</li>
<li>Panel añadir/editar/eliminar películas a la cartelera [Administrador]</li>
<li>Panel añadir/editar/eliminar promociones [Administrador]</li>
<li>Panel añadir/editar/eliminar gerentes [Administrador]</li>
</ul>
</fieldset>
<fieldset>
<legend>Ioan Marian Tulai</legend>
<ul>
<li>Panel de inicio administrador (ver todas la funcionalidades de admin de un vistazo) [Administrador]</li>
<li>Ver como >> Usuario no registrado | Usuario registrado | (Gerente: Añadir si vamos bien de tiempo) [Administrador]</li>
<li>Panel añadir/editar/eliminar cine [Administrador]</li>
<li>Panel añadir/editar/eliminar películas a la cartelera [Administrador]</li>
<li>Panel añadir/editar/eliminar promociones [Administrador]</li>
<li>Panel añadir/editar/eliminar gerentes [Administrador]</li>
</ul>
</fieldset>
<fieldset>
<legend>Óscar Ruiz de Pedro</legend>
<ul>
<li>Pantalla de inicio de gerente [Gerente]</li>
<li>Eliminar sesión de una película [Gerente]</li>
<li>Deshabilitar salas [Gerente]</li>
<li>Deshabilitar asientos en una sala [Gerente]</li>
<li>Selección de butacas [General (de apoyo)]</li>
</ul>
</fieldset>
<fieldset>
<legend>Adrian Real del Noval</legend>
<ul>
<li>Registrarse e Iniciar sesión [Usuario Registrado]</li>
<li>Menú y panel de Usuario (Historial compras, cambiar contraseña, datos de pago y eliminar usuario) [Usuario Registrado]</li>
<li>Sobre FDI-Cines (About us) [General]</li>
<li>Términos y Condiciones [General]</li>
<li>Pantalla de Inicio (incluye promociones y estrenos) [General (de apoyo)]</li>
</ul>
</fieldset>
</div>
</div>
<div class="column side">
<div class="code plan">
<h2>Plazos</h2>
<hr />
<fieldset>
<legend>Práctica 1 [HTML]</legend>
<div class="bar">100%</div>
<ul>
<li>Inicio</li>
<li>Detalles</li>
<li>Bocetos</li>
<li>Miembros</li>
<li>Planificación</li>
<li>Contacto</li>
</ul>
</fieldset>
<fieldset>
<legend>Práctica 2 [HTML + PHP]</legend>
<div class="bar">100%</div>
<ul>
<li>Sobre FDI-Cines (About us) [Fer && Adrián]</li>
<li>Formulario de Contacto [Fer]</li>
<li>Términos y Condiciones [Fer && Adrián]</li>
<li>Pantalla de inicio de gerente [Marco && Óscar]</li>
</ul>
<div class="bar seventyfive">75%</div>
<ul>
<li>Pantalla de Inicio (incluye promociones y estrenos) [Fer && Adrián]</li>
<li>Listado de Horarios [Fer]</li>
</ul>
<div class="bar fifty">50%</div>
<ul>
<li>Menú y panel de Usuario (Historial compras, cambiar contraseña, datos de pago y eliminar usuario) [Adrián]</li>
<li>Eliminar sesión de una película [Marco && Óscar]</li>
<li>Deshabilitar salas [Marco && Óscar]</li>
<li>Panel de inicio administrador (ver todas la funcionalidades de admin de un vistazo) [Daniel && Marian]</li>
<li>Panel añadir/editar/eliminar cine [Marian && Dani]</li>
<li>Panel añadir/editar/eliminar películas a la cartelera [Marian && Dani]</li>
</ul>
<div class="bar twentyfive">25%</div>
<ul>
<li>Registrarse && Iniciar sesión [Adrián]</li>
<li>Deshabilitar asientos en una sala [Marco && Óscar]</li>
<li>Ver como >> Usuario no registrado | Usuario registrado | (Gerente: Añadir si vamos bien de tiempo) [Daniel && Marian]</li>
<li>Panel añadir/editar/eliminar promociones [Marian && Dani]</li>
<li>Panel añadir/editar/eliminar gerentes [Marian && Dani]</li>
</ul>
</fieldset>
<fieldset>
<legend>Práctica 3 [HTML + PHP + CSS]</legend>
<div class="bar">100%</div>
<ul>
<li>Eliminar sesión de una película [Marco && Óscar]</li>
<li>Deshabilitar salas [Marco && Óscar]</li>
</ul>
<div class="bar seventyfive">75%</div>
<ul>
<li>Registrarse && Iniciar sesión [Adrián]</li>
<li>Menú y panel de Usuario (Historial compras, cambiar contraseña, datos de pago y eliminar usuario) [Adrián]</li>
<li>Panel de inicio administrador (ver todas la funcionalidades de admin de un vistazo) [Daniel && Marian]</li>
<li>Panel añadir/editar/eliminar cine [Marian && Dani]</li>
<li>Panel añadir/editar/eliminar películas a la cartelera [Marian && Dani]</li>
</ul>
<div class="bar fifty">50%</div>
<ul>
<li>Deshabilitar asientos en una sala [Marco && Óscar]</li>
<li>Ver como >> Usuario no registrado | Usuario registrado | (Gerente: Añadir si vamos bien de tiempo) [Daniel && Marian]</li>
<li>Panel añadir/editar/eliminar promociones [Marian && Dani]</li>
<li>Panel añadir/editar/eliminar gerentes [Marian && Dani]</li>
</ul>
</fieldset>
<fieldset>
<legend>Entrega Final [HTML + PHP + CSS + JS]</legend>
<div class="bar">100%</div>
<ul>
<li>Todo el trabajo restante.</li>
</ul>
</fieldset>
</div>
</div>
</div>
</section>
<!-- Timeline -->
<section id="timeline" class="timeline">
<h2>Línea Temporal</h2>
<hr />
<div class="image"><img src="../img/linea_temporal.png" /></div>
</section>
<!-- Timeline Table -->
<section id="timeline table">
<h2>Hitos</h2>
<hr />
<table>
<thead>
<tr>
<th>Hito</th>
<th>Fecha estimada</th>
<th>Estado</th>
</tr>
</thead>
<tbody>
<tr>
<td>Práctica 0</td>
<td>4 de Marzo de 2021</td>
<td>ENTREGADO</td>
</tr>
<tr>
<td>Práctica 1</td>
<td>18 de Marzo de 2021</td>
<td>ENTREGADO</td>
</tr>
<tr>
<td>Práctica 2</td>
<td>15 de Abril de 2021</td>
<td>EN PROCESO</td>
</tr>
<tr>
<td>Práctica 3</td>
<td>7 de Mayo de 2021</td>
<td>PENDIENTE</td>
</tr>
<tr>
<td>Entrega Final</td>
<td>28 de Mayo de 2021</td>
<td>PENDIENTE</td>
</tr>
</tbody>
</table>
</section>
<!-- Warning -->
<section id="warning">
<p>
*Esta planificación es orientativa y puede ir cambiando a lo largo del tiempo
en función de los requisitos de las prácticas y nuestra carga de trabajo.
</p>
</section>
<!-- Footer -->
<?php
include_once('../assets/php/footer.php');
?>
</body>
</html>