saucedo.facundo/TP-Diagnostico
1
0
Fork 0
generated from marquez.juan/Ejercicio-inicial--git-y-HTML
Code Issues Pull Requests Projects Releases Wiki Activity

feat(UI): Enhance form functionality and add progress bar for improved user experience

Browse Source
This commit is contained in:
Facundo Saucedo
2026-04-13 17:04:23 -03:00
parent 71e1ee1c11
commit fcbfc599a1
3 changed files with 622 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/index.html
View File

@@ -8,6 +8,7 @@
</head>
<body>
<div id="progress-bar"></div>
<header id="site-header">
<nav id="main-nav">
<a href="#" class="nav-logo">Brew<span>Box</span></a>
@@ -135,6 +136,14 @@
Completá el formulario y recibís tu primer envío en menos de 72hs.
Estudiantes obtienen un descuento del 20%.
</p>
<div class="plan-preview" id="plan-preview">
<div class="plan-preview-inner">
<span class="plan-preview-label">Plan seleccionado</span>
<span class="plan-preview-name" id="plan-preview-name">—</span>
<span class="plan-preview-price" id="plan-preview-price"></span>
<ul class="plan-preview-features" id="plan-preview-features"></ul>
</div>
</div>
</div>
<form action="#" method="post">
@@ -144,15 +153,24 @@
<div class="field-group">
<label for="name">Nombre</label>
<input type="text" id="name" name="name" required />
<span class="field-error-msg"
>Ingresá al menos 2 caracteres</span
>
</div>
<div class="field-group">
<label for="lastname">Apellido</label>
<input type="text" id="lastname" name="lastname" required />
<span class="field-error-msg"
>Ingresá al menos 2 caracteres</span
>
</div>
</div>
<div class="field-group">
<label for="email">Correo electrónico</label>
<input type="email" id="email" name="email" required />
<span class="field-error-msg"
>Ingresá un correo electrónico válido</span
>
</div>
<div class="field-group checkbox-group">
<input type="checkbox" id="student" name="student" />
@@ -178,6 +196,7 @@
<div class="field-group">
<label for="reason">¿Por qué te suscribís?</label>
<textarea id="reason" name="reason" rows="4"></textarea>
<span class="char-counter" id="reason-counter">0 / 300</span>
</div>
</fieldset>
@@ -191,6 +210,16 @@
<option value="debit">Tarjeta de débito</option>
</select>
</div>
<div class="field-group" id="cuotas-group" style="display: none">
<label for="cuotas">Cantidad de cuotas</label>
<input
type="number"
id="cuotas"
name="cuotas"
min="1"
max="12"
placeholder="1"
/>
<div class="field-group field-group--icon">
<label for="card">Número de tarjeta</label>
<div class="input-icon-wrapper">
@@ -213,10 +242,12 @@
type="text"
id="card"
name="card"
placeholder="1234 5678 9012 3456"
placeholder="XXXX-XXXX-XXXX-XXXX"
required
/>
<span class="card-brand" id="card-brand"></span>
</div>
<span class="field-error-msg">Número de tarjeta inválido</span>
</div>
<div class="field-row">
<div class="field-group">
@@ -228,6 +259,7 @@
placeholder="MM/AA"
required
/>
<span class="field-error-msg">Formato MM/AA</span>
</div>
<div class="field-group">
<label for="cvv">CVV</label>
@@ -238,6 +270,7 @@
placeholder="123"
required
/>
<span class="field-error-msg">Ingresá un CVV válido</span>
</div>
</div>
</fieldset>
@@ -314,6 +347,31 @@
<button type="submit" class="cta-button">Suscribirme</button>
</div>
</form>
<div id="form-confirmation">
<div class="confirmation-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
<p class="confirmation-title">¡Bienvenido a BrewBox!</p>
<p class="confirmation-text">
Tu suscripción fue registrada. En las próximas horas vas a recibir
un email de confirmación con los detalles de tu primer envío.
</p>
<p class="confirmation-detail">
Primer envío estimado: <span id="confirm-date"></span>
</p>
</div>
</section>
</main>