Scribd
Upload
7 views

codigosdesarrollo

Uploaded by

aa30informatica
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7 views

codigosdesarrollo

Uploaded by

aa30informatica
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 14

login.

html

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inicio de sesión</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.4/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?
family=Poppins:wght@300;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="login.css">
</head>
<body>
<div class="background">
<div class="shape"></div>
<div class="shape"></div>
</div>
<form method="POST" action="login.php">
<h3>Iniciar Sesión</h3>

<label for="email">Correo electrónico</label>


<input type="email" placeholder="Correo electrónico" id="email"
name="email" required>

<label for="password">Contraseña</label>
<input type="password" placeholder="Contraseña" id="password"
name="password" required>

<button type="submit">Entrar</button>
<div class="social">
<div class="go"><i class="fab fa-google"></i> Google</div>
<div class="fb"><i class="fab fa-facebook"></i> Facebook</div>
</div>
</form>
</body>
</html>

login.css

*,
*:before,
*:after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #080710;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.background {
width: 430px;
height: 520px;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
.background .shape {
height: 200px;
width: 200px;
position: absolute;
border-radius: 50%;
}
.shape:first-child {
background: linear-gradient(#1845ad, #23a2f6);
left: -80px;
top: -80px;
}
.shape:last-child {
background: linear-gradient(to right, #ff512f, #f09819);
right: -30px;
bottom: -80px;
}
form {
height: 520px;
width: 400px;
background-color: rgba(255, 255, 255, 0.13);
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 10px;
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);
padding: 50px 35px;
}
form * {
font-family: 'Poppins', sans-serif;
color: #ffffff;
letter-spacing: 0.5px;
outline: none;
border: none;
}
form h3 {
font-size: 32px;
font-weight: 500;
line-height: 42px;
text-align: center;
}
label {
display: block;
margin-top: 30px;
font-size: 16px;
font-weight: 500;
}
input {
display: block;
height: 50px;
width: 100%;
background-color: rgba(255, 255, 255, 0.07);
border-radius: 3px;
padding: 0 10px;
margin-top: 8px;
font-size: 14px;
font-weight: 300;
}
::placeholder {
color: #e5e5e5;
}
button {
margin-top: 50px;
width: 100%;
background-color: #ffffff;
color: #080710;
padding: 15px 0;
font-size: 18px;
font-weight: 600;
border-radius: 5px;
cursor: pointer;
}
.social {
margin-top: 30px;
display: flex;
}
.social div {
background: red;
width: 150px;
border-radius: 3px;
padding: 5px 10px 10px 5px;
background-color: rgba(255, 255, 255, 0.27);
color: #eaf0fb;
text-align: center;
}
.social div:hover {
background-color: rgba(255, 255, 255, 0.47);
}
.social .fb {
margin-left: 25px;
}
.social i {
margin-right: 4px;
}

registro.css

*,
*:before,
*:after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #080710;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.background {
width: 430px;
height: 520px;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
.background .shape {
height: 200px;
width: 200px;
position: absolute;
border-radius: 50%;
}
.shape:first-child {
background: linear-gradient(#1845ad, #23a2f6);
left: -80px;
top: -80px;
}
.shape:last-child {
background: linear-gradient(to right, #ff512f, #f09819);
right: -30px;
bottom: -80px;
}
form {
height: 620px;
width: 400px;
background-color: rgba(255, 255, 255, 0.13);
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 10px;
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);
padding: 50px 35px;
}
form * {
font-family: 'Poppins', sans-serif;
color: #ffffff;
letter-spacing: 0.5px;
outline: none;
border: none;
}
form h3 {
font-size: 32px;
font-weight: 500;
line-height: 42px;
text-align: center;
}
label {
display: block;
margin-top: 30px;
font-size: 16px;
font-weight: 500;
}
input {
display: block;
height: 50px;
width: 100%;
background-color: rgba(255, 255, 255, 0.07);
border-radius: 3px;
padding: 0 10px;
margin-top: 8px;
font-size: 14px;
font-weight: 300;
}
::placeholder {
color: #e5e5e5;
}
button {
margin-top: 50px;
width: 100%;
background-color: #ffffff;
color: #080710;
padding: 15px 0;
font-size: 18px;
font-weight: 600;
border-radius: 5px;
cursor: pointer;
}
.social {
margin-top: 30px;
display: flex;
}
.social div {
background: red;
width: 150px;
border-radius: 3px;
padding: 5px 10px 10px 5px;
background-color: rgba(255, 255, 255, 0.27);
color: #eaf0fb;
text-align: center;
}
.social div:hover {
background-color: rgba(255, 255, 255, 0.47);
}
.social .fb {
margin-left: 25px;
}
.social i {
margin-right: 4px;
}

registro.html

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registro de Usuario</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.4/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?
family=Poppins:wght@300;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="registro.css">
</head>
<body>
<div class="background">
<div class="shape"></div>
<div class="shape"></div>
</div>
<form action="registro.php" method="POST">
<h3>Crear Cuenta</h3>

<label for="nombre">Nombre</label>
<input type="text" placeholder="Nombre" id="nombre" name="nombre" required>

<label for="email">Correo electrónico</label>


<input type="email" placeholder="Correo electrónico" id="email"
name="email" required>

<label for="password">Contraseña</label>
<input type="password" placeholder="Contraseña" id="password"
name="password" required>

<button type="submit">Registrar</button>
<p>¿Ya tienes una cuenta? <a href="login.html">Iniciar sesión</a></p>
</form>
</body>
</html>

estilos css

/* General */
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: #080710;
color: #ffffff;
}

/* Barra Superior */
.barra-superior {
background-color: rgba(255, 255, 255, 0.1);
color: white;
display: flex;
justify-content: space-between;
padding: 10px;
font-size: 0.9em;
backdrop-filter: blur(10px);
}
.barra-superior a {
color: #ffcc00;
text-decoration: none;
}

/* Header */
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 10px;
margin: 20px;
}
header h1 {
margin: 0;
}
header input {
padding: 10px;
width: 300px;
border: none;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.1);
color: #ffffff;
}

/* Menú de Navegación */
nav {
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 10px;
margin: 20px;
}
nav ul {
margin: 0;
padding: 10px;
list-style: none;
display: flex;
justify-content: center;
}
nav ul li {
margin: 0 15px;
}
nav ul li a {
text-decoration: none;
color: #ffffff;
font-weight: bold;
}

/* Clase para centrar texto */


.centrado {
text-align: center;
}

/* Formulario de Registro y Login */


main.centrado {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
}

.formulario-registro,
form {
display: flex;
flex-direction: column;
align-items: center;
background-color: rgba(255, 255, 255, 0.13);
padding: 30px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
width: 350px; /* Ajusta el ancho del formulario */
box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);
backdrop-filter: blur(10px);
}

.formulario-registro label,
form label {
margin-top: 15px;
margin-bottom: 5px;
width: 100%;
text-align: left;
font-weight: bold;
}

.formulario-registro input,
form input {
padding: 10px;
width: 100%;
border: none;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.07);
margin-bottom: 15px; /* Añade espacio entre los campos */
font-size: 1em;
color: #ffffff;
}

.formulario-registro button,
form button {
margin-top: 20px;
padding: 10px 20px;
background-color: #ffffff;
color: #080710;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
}

.formulario-registro button:hover,
form button:hover {
background-color: #f1f1f1;
}

/* Footer */
footer {
background-color: rgba(255, 255, 255, 0.1);
color: white;
padding: 20px;
text-align: center;
position: relative;
bottom: 0;
width: 100%;
margin-top: auto; /* Asegura que el footer esté al final de la página */
backdrop-filter: blur(10px);
border-radius: 10px;
margin: 20px;
}
footer p {
margin: 0;
}
footer h3 {
margin-top: 0;
}
footer a {
color: #ffcc00;
text-decoration: none;
}

/* Estilos para el carrusel */


.banner {
position: relative;
width: 100%;
overflow: hidden;
margin: 20px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}

.productos-container {
display: flex;
transition: transform 0.5s ease-in-out;
}

.producto-carrusel {
min-width: 100%; /* Asegura que cada producto ocupe toda la pantalla */
text-align: center;
}

.producto-carrusel img {
width: 80%; /* Ajusta el tamaño de la imagen */
max-width: 400px;
}

.boton-carrusel {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 2em;
color: white;
background: rgba(0, 0, 0, 0.5);
border: none;
padding: 10px;
cursor: pointer;
}

.boton-carrusel.izquierdo {
left: 10px;
}

.boton-carrusel.derecho {
right: 10px;
}
/* Estilo para el producto activo */
.producto-carrusel.active {
opacity: 1;
}

/* Categorías */
.categorias {
display: flex;
justify-content: center;
gap: 20px;
padding: 20px;
}
.categoria {
background-color: rgba(255, 255, 255, 0.1);
padding: 20px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
backdrop-filter: blur(10px);
}

/* Productos Destacados */
.productos {
padding: 20px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
backdrop-filter: blur(10px);
margin: 20px;
}
.grid-productos {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
.producto {
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 10px;
border-radius: 10px;
backdrop-filter: blur(10px);
}
.producto img {
max-width: 100%;
}

.carrito-logo {
font-size: 1.5em;
color: #ffcc00;
height: 25px;
width: 25px;
}

/* Carrito */
.carrito ul {
list-style: none;
padding: 0;
}
.carrito li {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding: 10px 0;
}
.carrito img {
max-width: 50px;
margin-right: 10px;
}
.carrito button {
background-color: #ff0000;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
}

index.php

<?php
include 'funciones.php';
session_start(); // Inicia la sesión PHP para poder acceder a $_SESSION
$carrito = obtenerCarrito(); // Obtiene el carrito desde la sesión
?>

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tux Shop</title>
<link rel="stylesheet" href="estilos.css">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<!-- Barra Superior -->
<div class="barra-superior">
<div class="izquierda">Bienvenido a nuestra tienda online</div>
<div class="derecha">
<?php if (estaLogueado()): ?>
<span>Bienvenido, <?php echo $_SESSION['user_name']; ?> | </span>
<a href="perfil.php">Mi perfil</a> |
<a href="logout.php">Cerrar sesión</a> |
<?php else: ?>
<a href="login.html">Iniciar sesión</a> |
<a href="registro.html">Crear una cuenta</a> |
<?php endif; ?>
<a href="carrito-usuario.php" class="carrito-link">
Carrito (<span id="numero-carrito"><?php echo count($carrito); ?
></span>)
</a>
</div>
</div>

<!-- Encabezado -->


<header>
<h1>Tux Shop</h1>
<input type="text" placeholder="Buscar en la tienda...">
</header>

<!-- Menú de Navegación -->


<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Productos</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Nosotros</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>

<!-- Banner Principal (Carrusel) -->


<div id="carrusel" class="banner">
<div class="productos-container">
<div class="producto-carrusel active">
<h2>MacBook Pro</h2>
<img src="mac.png" alt="MacBook Pro">
<p>Con pantalla Retina por solo <span>$1999</span></p>
<button onclick="agregarAlCarrito('MacBook Pro', 1999,
'mac.png')">Agregar al carrito</button>
</div>
<div class="producto-carrusel">
<h2>Dell XPS 13</h2>
<img src="dell.png" alt="Dell XPS 13">
<p>Portátil ultraligero por <span>$1599</span></p>
<button onclick="agregarAlCarrito('Dell XPS 13', 1599,
'dell.png')">Agregar al carrito</button>
</div>
<div class="producto-carrusel">
<h2>Asus ROG Zephyrus</h2>
<img src="asus.png" alt="Asus ROG Zephyrus">
<p>Máximo rendimiento por <span>$2199</span></p>
<button onclick="agregarAlCarrito('Asus ROG Zephyrus', 2199,
'asus.png')">Agregar al carrito</button>
</div>
</div>
<button class="boton-carrusel izquierdo">&#10094;</button>
<button class="boton-carrusel derecho">&#10095;</button>
</div>

<!-- Productos Destacados -->


<section class="productos">
<h2>Productos Destacados</h2>
<div class="grid-productos">
<div class="producto">
<img src="pc1.png" alt="PC 1">
<h3>PC Gamer</h3>
<p>$500.00</p>
<button onclick="agregarAlCarrito('PC Gamer', 500,
'pc1.png')">Agregar al carrito</button>
</div>
<div class="producto">
<img src="pc2.jpg" alt="Laptop 1">
<h3>Laptop Gamer</h3>
<p>$700.00</p>
<button onclick="agregarAlCarrito('Laptop Gamer', 700,
'pc2.jpg')">Agregar al carrito</button>
</div>
<!-- Añade más productos según sea necesario -->
</div>
</section>

<!-- Footer -->


<footer>
<div class="info">
<h3>Información</h3>
<ul>
<li><a href="#">Contacto</a></li>
<li><a href="#">Términos</a></li>
<li><a href="#">Política de Privacidad</a></li>
</ul>
</div>
<div class="social">
<h3>Síguenos</h3>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</div>
</footer>

<script>
// Selecciona todos los productos del carrusel
const productos = document.querySelectorAll(".producto-carrusel");
let indiceActivo = 0;

// Función para actualizar el producto activo


function mostrarProducto(indice) {
productos.forEach((producto, i) => {
producto.classList.remove("active");
if (i === indice) {
producto.classList.add("active");
}
});
}

// Botones del carrusel


const botonIzquierdo = document.querySelector(".boton-carrusel.izquierdo");
const botonDerecho = document.querySelector(".boton-carrusel.derecho");

botonIzquierdo.addEventListener("click", () => {
indiceActivo = (indiceActivo - 1 + productos.length) % productos.length;
mostrarProducto(indiceActivo);
});

botonDerecho.addEventListener("click", () => {
indiceActivo = (indiceActivo + 1) % productos.length;
mostrarProducto(indiceActivo);
});
// Mostrar el primer producto al cargar la página
mostrarProducto(indiceActivo);

// Cambio automático cada 5 segundos


let intervalo;
function iniciarCambioAutomatico() {
intervalo = setInterval(() => {
indiceActivo = (indiceActivo + 1) % productos.length;
mostrarProducto(indiceActivo);
}, 5000); // Cambia cada 5 segundos
}

// Detener el cambio automático cuando el usuario interactúa


function reiniciarCambioAutomatico() {
clearInterval(intervalo);
iniciarCambioAutomatico();
}

iniciarCambioAutomatico(); // Inicia el cambio automático desde el principio


</script>

<script src="script.js"></script>
</body>
</html>

You might also like