Scribd
Upload
5 views129 pages

Web HTML

The document is an HTML template for a car buying and selling website called AutoConfianza. It includes various sections such as a header with navigation links, a hero section, filters for inventory, and a finance section. Additionally, it features a floating WhatsApp button for customer inquiries and an admin panel for managing content.

Uploaded by

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

Web HTML

The document is an HTML template for a car buying and selling website called AutoConfianza. It includes various sections such as a header with navigation links, a hero section, filters for inventory, and a finance section. Additionally, it features a floating WhatsApp button for customer inquiries and an admin panel for managing content.

Uploaded by

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

<!

DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-
8">
<meta
name="viewport"
content="width=device-
width, initial-scale=1.0,
maximum-scale=1.0,
user-scalable=yes">
<title>AutoConfianza ·
Compra y Venta de
Autos</title>
<link rel="preconnect"
href="[Link]
[Link]">
<link rel="preconnect"
href="[Link]
com" crossorigin>
<link href="https://
[Link]/
css2?
family=Inter:opsz,wght@
14..32,400;14..32,500;14
..32,600;14..32,700&disp
lay=swap"
rel="stylesheet">
<link rel="stylesheet"
href="[Link]
[Link]/ajax/libs/font-
awesome/6.0.0-beta3/
css/[Link]">
<style>
*{
margin: 0;
padding: 0;
box-sizing:
border-box;
}
body {
font-family: 'Inter',
sans-serif;
background-
color: #f8fafc;
color: #0f172a;
line-height: 1.5;
padding-bottom:
80px;
}
.container {
max-width:
1280px;
margin: 0 auto;
padding: 0 20px;
}
header {
background:
white;
box-shadow: 0
4px 20px rgba(0, 0, 0,
0.03);
position: sticky;
top: 0;
z-index: 100;
padding: 15px 0;
}
.header-content {
display: flex;
align-items:
center;
justify-content:
space-between;
flex-wrap: wrap;
gap: 15px;
}
.logo {
font-size: 1.8rem;
font-weight: 700;
color: #0f172a;
display: flex;
align-items:
center;
gap: 8px;
}
.logo i {
color: #16a34a;
font-size: 2rem;
}
nav ul {
display: flex;
list-style: none;
gap: 2rem;
flex-wrap: wrap;
}
nav a {
text-decoration:
none;
color: #334155;
font-weight: 500;
transition: 0.2s;
font-size:
0.95rem;
}
nav a:hover {
color: #16a34a;
}
.contact-header {
display: flex;
align-items:
center;
gap: 15px;
flex-wrap: wrap;
}
.phone-link {
background:
#16a34a;
color: white !
important;
padding: 10px
18px;
border-radius:
30px;
text-decoration:
none;
font-weight: 600;
font-size: 0.9rem;
transition: 0.2s;
display: flex;
align-items:
center;
gap: 6px;
}
.phone-link:hover {
background:
#15803d;
}
.admin-btn {
background:
#f59e0b;
color: #0f172a;
padding: 10px
18px;
border-radius:
30px;
text-decoration:
none;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
border: none;
font-family: 'Inter',
sans-serif;
display: flex;
align-items:
center;
gap: 6px;
}
.hero {
background:
linear-gradient(135deg,
#0f172a 0%, #1e293b
100%);
color: white;
padding: 60px 0;
text-align: center;
border-radius: 0 0
40px
40px;
margin-bottom:
40px;
}
.hero h1 {
font-size: 2.8rem;
font-weight: 700;
margin-bottom:
20px;
line-height: 1.2;
}
.hero p {
font-size: 1.2rem;
opacity: 0.9;
max-width:
700px;
margin: 0 auto
30px;
}
.cta-button {
background:
#16a34a;
color: white;
padding: 16px
32px;
border-radius:
40px;
text-decoration:
none;
font-weight: 600;
font-size: 1.1rem;
display: inline-
flex;
align-items:
center;
gap: 8px;
transition: 0.2s;
box-shadow: 0
10px 20px rgba(22, 163,
74, 0.3);
}
.cta-button:hover {
background:
#15803d;
transform:
translateY(-2px);
}
.filters {
background:
white;
padding: 25px;
border-radius:
24px;
box-shadow: 0
10px 30px rgba(0, 0, 0,
0.05);
margin-bottom:
40px;
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: end;
}
.filter-group {
flex: 1 1 180px;
}
.filter-group label {
display: block;
font-weight: 600;
font-size: 0.8rem;
color: #475569;
margin-bottom:
6px;
text-transform:
uppercase;
letter-spacing:
0.5px;
}
select,
input {
width: 100%;
padding: 12px
15px;
border-radius:
14px;
border: 1px solid
#e2e8f0;
background:
#f8fafc;
font-family: 'Inter',
sans-serif;
font-size: 0.9rem;
outline: none;
transition: 0.2s;
}
select:focus,
input:focus {
border-color:
#16a34a;
box-shadow: 0 0
0 3px rgba(22, 163, 74,
0.1);
}
.btn-filter {
background:
#0f172a;
color: white;
border: none;
padding: 12px
28px;
border-radius:
14px;
font-weight: 600;
cursor: pointer;
transition: 0.2s;
display: flex;
align-items:
center;
gap: 6px;
}
.btn-filter:hover {
background:
#1e293b;
}
.inventory-title {
font-size: 1.8rem;
margin-bottom:
30px;
display: flex;
align-items:
center;
gap: 10px;
}
.car-grid {
display: grid;
grid-template-
columns: repeat(auto-fill,
minmax(300px, 1fr));
gap: 30px;
margin-bottom:
50px;
}
.car-card {
background:
white;
border-radius:
24px;
overflow: hidden;
box-shadow: 0
10px 25px rgba(0, 0, 0,
0.04);
transition: all 0.3s
ease;
display: flex;
flex-direction:
column;
}
.car-card:hover {
transform:
translateY(-8px);
box-shadow: 0
20px 35px rgba(0, 0, 0,
0.08);
}
.car-image {
height: 200px;
background-size:
cover;
background-
position: center;
background-
color: #cbd5e1;
position: relative;
}
.car-tag {
position:
absolute;
top: 15px;
left: 15px;
background:
#16a34a;
color: white;
padding: 5px
14px;
border-radius:
20px;
font-size: 0.8rem;
font-weight: 600;
}
.car-details {
padding: 22px;
flex: 1;
display: flex;
flex-direction:
column;
}
.car-name {
font-size: 1.3rem;
font-weight: 700;
margin-bottom:
10px;
}
.car-specs {
display: flex;
flex-wrap: wrap;
gap: 15px;
font-size:
0.85rem;
color: #475569;
margin: 15px 0;
}
.car-specs span {
display: flex;
align-items:
center;
gap: 5px;
}
.car-price {
font-size: 1.5rem;
font-weight: 700;
color: #16a34a;
margin-top: auto;
margin-bottom:
18px;
}
.car-buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.whatsapp-btn {
background:
#25D366;
color: white;
text-decoration:
none;
padding: 12px
20px;
border-radius:
30px;
font-weight: 600;
display: flex;
align-items:
center;
justify-content:
center;
gap: 8px;
transition: 0.2s;
text-align: center;
flex: 1;
min-width: 120px;
}
.whatsapp-
btn:hover {
background:
#128C7E;
}
.delete-btn {
background:
#ef4444;
color: white;
border: none;
padding: 10px
14px;
border-radius:
30px;
cursor: pointer;
transition: 0.2s;
font-size: 0.9rem;
}
.delete-btn:hover {
background:
#dc2626;
}
.finance-section {
background:
white;
border-radius:
30px;
padding: 40px;
margin: 50px 0;
display: flex;
flex-wrap: wrap;
align-items:
center;
gap: 30px;
box-shadow: 0
10px 30px
rgba(0, 0, 0, 0.03);
}
.finance-text {
flex: 1 1 300px;
}
.finance-text h2 {
font-size: 2rem;
margin-bottom:
15px;
}
.btn-finance {
background:
#0f172a;
color: white;
border: none;
padding: 14px
28px;
border-radius:
30px;
font-weight: 600;
cursor: pointer;
display: inline-
flex;
align-items:
center;
gap: 8px;
text-decoration:
none;
}
.trust-grid {
display: grid;
grid-template-
columns: repeat(auto-fit,
minmax(220px, 1fr));
gap: 25px;
margin: 50px 0;
}
.trust-card {
background:
white;
padding: 30px;
border-radius:
20px;
text-align: center;
box-shadow: 0
5px 20px rgba(0, 0, 0,
0.02);
}
.trust-card i {
font-size: 2.2rem;
color: #16a34a;
margin-bottom:
15px;
}
.floating-whatsapp {
position: fixed;
bottom: 25px;
right: 25px;
background:
#25D366;
color: white;
width: 60px;
height: 60px;
border-radius:
50%;
display: flex;
align-items:
center;
justify-content:
center;
font-size: 1.8rem;
box-shadow: 0
8px 25px rgba(37, 211,
102, 0.4);
transition: 0.3s;
z-index: 999;
text-decoration:
none;
}
.floating-
whatsapp:hover {
transform:
scale(1.08);
}

/* PANEL ADMIN */
.admin-panel {
display: none;
background:
white;
padding: 30px;
border-radius:
24px;
margin: 30px 0;
box-shadow: 0
10px 30px rgba(0, 0, 0,
0.08);
}
.[Link]
{
display: block;
}
.admin-panel h2 {
margin-bottom:
25px;
font-size: 1.6rem;
}
.form-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom:
20px;
}
.form-group {
flex: 1 1 200px;
}
.form-group label {
display: block;
font-weight: 600;
font-size:
0.85rem;
margin-bottom:
6px;
color: #475569;
}
.form-group input {
width: 100%;
padding: 12px
15px;
border-radius:
14px;
border: 1px solid
#e2e8f0;
background:
#f8fafc;
font-family: 'Inter',
sans-serif;
}
.btn-add {
background:
#16a34a;
color: white;
border: none;
padding: 14px
28px;
border-radius:
30px;
font-weight: 600;
cursor: pointer;
font-size: 1rem;
margin-top: 10px;
}
.btn-add:hover {
background:
#15803d;
}
.preview-img {
width: 100px;
height: 70px;
object-fit: cover;
border-radius:
12px;
margin-top: 10px;
border: 2px
dashed #cbd5e1;
display: none;
}
.note {
font-size: 0.8rem;
color: #64748b;
margin-top: 5px;
}
footer {
text-align: center;
color: #64748b;
padding: 30px;
border-top: 1px
solid #e2e8f0;
margin-top: 40px;
}

@media (max-
width: 768px) {
.header-content {
flex-direction:
column;
gap: 15px;
}
nav ul {
gap: 1rem;
justify-content:
center;
}
.hero h1 {
font-size:
2rem;
}
.filters {
flex-direction:
column;
}
.floating-
whatsapp {
width: 55px;
height: 55px;
font-size:
1.5rem;
bottom: 20px;
right: 20px;
}
}
</style>
</head>
<body>

<!-- WhatsApp flotante


-->
<a
href="[Link]
37506666?text=Hola
%2C%20quiero
%20informaci%C3%B3n
%20sobre%20los
%20autos
%20disponibles"
class="floating-
whatsapp"
target="_blank"
title="Contáctanos por
WhatsApp">
<i class="fab fa-
whatsapp"></i>
</a>

<header>
<div class="container
header-content">
<div class="logo">
<i class="fas fa-
car-side"></i>
AutoConfianza
</div>
<nav>
<ul>
<li><a
href="#inventario">Invent
ario</a></li>
<li><a
href="#financiamiento">F
inanciamiento</a></li>
<li><a
href="#contacto">Contac
to</a></li>
</ul>
</nav>
<div class="contact-
header">
<a
href="[Link]
37506666?text=Hola
%2C%20deseo
%20hablar%20con
%20un%20asesor"
class="phone-link"
target="_blank">
<i class="fab
fa-whatsapp"></i> +52
55 3750 6666
</a>
<button
class="admin-btn"
onclick="toggleAdmin()">
<i class="fas
fa-lock-open"></i> Admin
</button>
</div>
</div>
</header>

<main>
<section
class="hero">
<div
class="container">
<h1>Encuentra el
auto perfecto<br>con
total confianza</h1>
<p>Más de 150
vehículos certificados.
Financiamiento 100%
digital en minutos.</p>
<a
href="#inventario"
class="cta-button"><i
class="fas
fa-search"></i> Explorar
inventario</a>
</div>
</section>

<!-- PANEL DE
ADMINISTRACIÓN
(oculto por defecto) -->
<div
class="container">
<div class="admin-
panel" id="adminPanel">
<h2><i class="fas
fa-plus-circle"></i>
Agregar nuevo
vehículo</h2>
<div class="form-
row">
<div
class="form-group">
<label>Marca</label>
<input
type="text"
id="newBrand"
placeholder="Ej:
Toyota">
</div>
<div
class="form-group">
<label>Modelo</label>
<input
type="text"
id="newModel"
placeholder="Ej: Corolla
XLE">
</div>
<div
class="form-group">
<label>Año</label>
<input
type="number"
id="newYear"
placeholder="Ej: 2023">
</div>
</div>
<div class="form-
row">
<div
class="form-group">
<label>Precio (MXN)</
label>
<input
type="number"
id="newPrice"
placeholder="Ej:
345000">
</div>
<div
class="form-group">
<label>Kilometraje</label
>
<input
type="number"
id="newKm"
placeholder="Ej: 15000">
</div>
<div
class="form-group">
<label>URL
de la imagen</label>
<input
type="text"
id="newImage"
placeholder="https://
[Link]/[Link]"
oninput="previewImage()
">
<img
id="imagePreview"
class="preview-img"
alt="Vista previa">
<p
class="note">Sube tu
foto a <a
href="[Link]
pload" target="_blank"
style="color:#16a34a;">i
[Link]</a> y pega el
enlace aquí</p>
</div>
</div>
<button
class="btn-add"
onclick="addCar()"><i
class="fas
fa-save"></i> Guardar
vehículo</button>
<p style="margin-
top:15px;font-
size:0.85rem;color:#6474
8b;">
<i class="fas
fa-info-circle"></i> Los
cambios se guardan
automáticamente en este
dispositivo.
</p>
</div>
</div>
<!-- Filtros -->
<div class="container"
id="inventario">
<div class="filters">
<div class="filter-
group">
<label>Marca</label>
<select
id="filterBrand">
<option
value="">Todas las
marcas</option>
</select>
</div>
<div class="filter-
group">
<label>Precio
máximo</label>
<input
type="number"
id="filterPrice"
placeholder="Ej:
350000">
</div>
<div class="filter-
group">
<label>Año
desde</label>
<input
type="number"
id="filterYear"
placeholder="Ej: 2020">
</div>
<button
class="btn-filter"
onclick="applyFilters()">
<i class="fas
fa-filter"></i> Filtrar
autos</button>
</div>

<h2
class="inventory-title"><i
class="fas fa-car"></i>
Vehículos
destacados</h2>
<div class="car-
grid" id="carContainer">
<!-- Autos
generados
dinámicamente -->
</div>
</div>

<!-- Financiamiento -->


<div class="container"
id="financiamiento">
<div class="finance-
section">
<div
class="finance-text">
<h2>¿Listo
para estrenar?</h2>
<p style="font-
size: 1.1rem; margin-
bottom: 20px;">Solicita
tu preaprobación en
línea y recibe respuesta
en menos de 24
horas.</p>
<a
href="[Link]
37506666?text=Quiero
%20solicitar
%20informaci%C3%B3n
%20sobre%20fin
anciamiento
%20automotriz"
class="btn-
finance" target="_blank">
<i class="fab
fa-whatsapp"></i> Hablar
con un asesor financiero
</a>
</div>
<div style="flex:1;
text-align: center;">
<i class="fas fa-
hand-holding-usd"
style="font-size: 5rem;
color: #16a34a;"></i>
</div>
</div>
</div>
<!-- Confianza -->
<div class="container"
id="contacto">
<div class="trust-
grid">
<div class="trust-
card">
<i class="fas fa-
shield-alt"></i>
<h3>Vehículos
certificados</h3>
<p>Inspección de
150 puntos mecánicos y
estéticos.</p>
</div>
<div class="trust-
card">
<i class="fas fa-
file-contract"></i>
<h3>Historial
transparente</h3>
<p>Reportes de
historial vehicular
incluidos.</p>
</div>
<div class="trust-
card">
<i class="fas fa-
star"></i>
<h3>+1,200
clientes felices</h3>
<p>Calificación
promedio de 4.9
estrellas.</p>
</div>
</div>
</div>
</main>

<footer>
<p>© 2025
AutoConfianza · <a
href="[Link]
525537506666"
style="color:#16a34a;">
WhatsApp +52 55 3750
6666</a></p>
</footer>

<script>
const
whatsappNumber =
"525537506666";
const STORAGE_KEY
=
"autoconfianza_inventory
";
// Inventario inicial
const defaultInventory
=[
{ brand: "Toyota",
model: "Corolla XLE",
year: 2023, price:
345000, km: 15000,
image: "https://
[Link]/
photo-1623869675781-
f4644c3e4d9a?
q=80&w=600&auto=form
at&fit=crop" },
{ brand: "Honda",
model: "Civic Touring",
year: 2022, price:
410000, km: 22000,
image:
"[Link]
com/photo-
1606611013016-
969c19ba27b8?
q=80&w=600&auto=form
at&fit=crop" },
{ brand:
"Mazda", model: "CX-5
Signature", year: 2023,
price: 520000, km: 8000,
image:
"[Link]
com/photo-1555626906-
fcf10d6851b4?
q=80&w=600&auto=form
at&fit=crop" }
];

// Cargar
inventario desde
localStorage o usar el
predeterminado
function
getInventory() {
const stored
=
[Link](ST
ORAGE_KEY);
return stored
? [Link](stored) :
[...defaultInventory];
}

function
saveInventory(inventory)
{
[Link](ST
ORAGE_KEY,
[Link](inventory)
);
}

// Renderizar
autos
function
renderCars(cars) {
const
container =
[Link]
d("carContainer");
if (!
container) return;
[Link] =
"";

if
([Link] === 0) {
[Link] =
`<p
style="grid-column:1/-1;
text-align:center;
padding:40px;">No se
encontraron vehículos.
<a href="#"
onclick="resetFilters()"
style="color:#16a34a;">
Mostrar todos</a></p>`;
return;
}

[Link]((car, index)
=> {
const
globalIndex =
getInventory().findIndex(
c =>
[Link] === [Link]
&& [Link] ===
[Link] && [Link] ===
[Link] && c
.price
=== [Link]
);
const
message = `Hola%2C
%20me%20interesa
%20el%20${[Link]}
%20${[Link]}%20$
{[Link]}%20con
%20precio%20de
%20%24$
{[Link](
)}`;
const
card =
[Link]
("div");
[Link] =
"car-card";
[Link] = `
<div
class="car-image"
style="background-
image: url('$
{[Link]}')">
<span
class="car-tag">$
{[Link]}</span>
</div>
<div
class="car-details">
<div
class="car-name">$
{[Link]} $
{[Link]}</div>
<div
class="car-specs">
<span><i
class="fas fa-road"></i>
$
{[Link]()}
km</
span>
<span><i
class="fas fa-gas-
pump"></i>
Gasolina</span>
</div>
<div
class="car-price">$ $
{[Link](
)}</div>
<div
class="car-buttons">
<a
href="[Link]
{whatsappNumber}?
text=${message}"
class="whatsapp-btn"
target="_blank">
<i class="fab
fa-whatsapp"></i> Me
interesa
</a>
<button
class="delete-btn"
onclick="deleteCar($
{globalIndex})"
title="Eliminar
este vehículo">
<i class="fas fa-
trash"></i>
</button>
</div>
</div>
`;
[Link](c
ard);
});
}

// Actualizar filtros de
marca dinámicamente
function
updateBrandFilter() {
const inventory =
getInventory();
const brands = [...new
Set([Link](car =>
[Link]))];
const select =
[Link]
d("filterBrand");
const currentValue =
[Link];
[Link] =
'<option value="">Todas
las marcas</option>';
[Link]().forEach(bra
nd => {
const option =
[Link]
("option");
[Link] = brand;
[Link] =
brand;
[Link](optio
n);
});
[Link] =
currentValue;
}
function applyFilters() {
const brand =
[Link]
d("filterBrand").value;
const priceMax =
[Link]
d("filterPrice").value;
const yearMin =
[Link]
d("filterYear").value;
let filtered =
getInventory();
if (brand) filtered =
[Link](car =>
[Link] === brand);
if (priceMax) filtered =
[Link](car =>
[Link] <=
Number(priceMax));
if (yearMin) filtered =
[Link](car =>
[Link] >=
Number(yearMin));

renderCars(filtered);
}

function resetFilters() {
[Link]
d("filterBrand").value =
"";
[Link]
d("filterPrice").value = "";
[Link]
d("filterYear").value = "";
renderCars(getInventory(
));
}
// Agregar nuevo carro
function addCar() {
const brand =
[Link]
d("newBrand").[Link]
();
const model =
[Link]
d("newModel").[Link]
();
const year =
parseInt([Link]
ementById("newYear").v
alue);
const price =
parseInt([Link]
ementById("newPrice").v
alue);
const km =
parseInt([Link]
ementB
yId("newKm").value);
const image =
[Link]
d("newImage").[Link]
();

if (!brand || !model || !
year || !price || !km || !
image) {
alert("Por favor completa
todos los campos.");
return;
}
const newCar = { brand,
model, year, price, km,
image };
const inventory =
getInventory();
[Link](newCar
);
saveInventory(inventory);
// Limpiar formulario
[Link]
d("newBrand").value = "";
[Link]
d("newModel").value =
"";
[Link]
d("newYear").value = "";
[Link]
d("newPrice").value = "";
[Link]
d("newKm").value = "";
[Link]
d("newImage").value =
"";
[Link]
d("imagePreview").style.
display = "none";
updateBrandFilter();
renderCars(getInventory(
));
alert("✅ Vehículo
agregado
correctamente.");
}

// Eliminar carro
function deleteCar(index)
{
if (confirm("¿Estás
seguro de eliminar este
vehículo?")) {
const inventory =
getInventory();
[Link](index, 1);
saveInventory(inventory);
updateBrandFilter();
renderCars(getInventory(
));
}
}
// Previsualizar imagen
function previewImage()
{
const url =
[Link]
d("newImage").value;
const preview =
[Link]
d("imagePreview");
if (url) {
[Link] = url;
[Link] =
"block";
} else {
[Link] =
"none";
}
}
// Mostrar/ocultar panel
admin
function toggleAdmin() {
const panel =
[Link]
d("adminPanel");
[Link]("a
ctive");
if
([Link](
"active")) {
[Link]({ be
havior: "smooth" });
}
}

// Inicializar
[Link]
r("DOMContentLoaded",
() => {
updateBrandFilter();
renderCars(getInventory(
));
});
</script>
</body>
</html>

You might also like