Borrador automático - Colegio Nueva Inglaterra

PREESCOLAR

<!doctype html>
<html lang=»es»>
<head>
<meta charset=»utf-8″>
<meta name=»viewport» content=»width=device-width,initial-scale=1″>
<title>Festival de Talentos Artísticos NES 2026</title>
<style>
body{margin:0;background:#f7f7f7;font-family:Arial,sans-serif;color:#172b4d}
.wrap{max-width:1280px;margin:30px auto;padding:0 18px}
h1{text-align:center;font-size:32px;margin:0 0 8px}
.sub{text-align:center;margin:0 0 22px;color:#555}
.tabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:20px 0}
.tab{border:0;padding:13px 28px;border-radius:7px;background:#ddd;color:#222;font-weight:700;cursor:pointer}
.tab.active{background:#172b4d;color:#fff}
.legend{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin:16px 0}
.legend span{display:flex;align-items:center;gap:6px;font-size:13px}
.dot{width:17px;height:17px;border-radius:4px;display:inline-block;border:1px solid #777}
.av{background:#fff} .sel{background:#f2b544} .occ{background:#d9534f;border-color:#d9534f} .blk{background:#555;border-color:#555}
.mapbox{position:relative;background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.10);overflow:auto}
.map{display:block;width:100%;height:auto}
.layer{position:absolute;inset:0}
.seat{position:absolute;transform:translate(-50%,-50%);width:25px;height:17px;border:1px solid transparent;background:rgba(255,255,255,.01);border-radius:3px;cursor:pointer;font-size:8px;color:transparent;padding:0}
.seat:hover{background:rgba(242,181,68,.45);border-color:#c68c16}
.seat.selected{background:#f2b544;border-color:#c68c16;color:#222}
.seat.occupied{background:#d9534f;border-color:#b52b27;cursor:not-allowed}
.block-zone{position:absolute;background:rgba(55,55,55,.70);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;letter-spacing:.5px;border-radius:4px;pointer-events:none}
.block-note{text-align:center;margin:10px 0;color:#666;font-size:13px}
.checkout{background:#fff;margin-top:18px;padding:18px;display:flex;justify-content:center;align-items:center;gap:35px;flex-wrap:wrap;box-shadow:0 2px 12px rgba(0,0,0,.08)}
.checkout strong{font-size:20px}
.pay{border:0;border-radius:7px;padding:14px 25px;background:#172b4d;color:#fff;font-weight:700;cursor:pointer}
.pay:disabled{opacity:.45;cursor:not-allowed}
#list{font-size:13px;color:#555;max-width:700px;text-align:center}
@media(max-width:700px){h1{font-size:23px} .seat{width:18px;height:13px}}
</style>
</head>
<body>
<div class=»wrap»>
<h1>Festival de Talentos Artísticos NES 2026</h1>
<p class=»sub»>Selecciona las sillas disponibles para la presentación que deseas ver.</p>

<div class=»tabs»>
<button class=»tab active» data-f=»Preescolar»>Preescolar</button>
<button class=»tab» data-f=»Primaria»>Primaria</button>
<button class=»tab» data-f=»Bachillerato»>Bachillerato</button>
</div>

<div class=»legend»>
<span><i class=»dot av»></i>Disponible</span>
<span><i class=»dot sel»></i>Seleccionada</span>
<span><i class=»dot occ»></i>Ocupada / Pagada</span>
<span><i class=»dot blk»></i>No disponible</span>
</div>

<div class=»block-zone» style=»left:3%;top:37.5%;width:94%;height:10%»>1.º BALCÓN — NO DISPONIBLE</div>
<div class=»block-zone» style=»left:3%;top:48%;width:94%;height:13%»>2.º BALCÓN — NO DISPONIBLE</div>
<div class=»block-zone» style=»left:3%;top:62%;width:94%;height:25%»>3.º BALCÓN — NO DISPONIBLE</div>
</div>

<p class=»block-note»>Los balcones y las filas A, B, U y V no están disponibles para compra.</p>

<div class=»checkout»>
<div>Boletas: <strong id=»count»>0</strong></div>
<div>Total: <strong id=»total»>$0</strong></div>
<div id=»list»>No has seleccionado ninguna silla.</div>
<button id=»pay» class=»pay» disabled>Pagar con Davivienda</button>
</div>
</div>

PREESCOLAR

NES

Acceder