Registro
-Completa este formulario para dejar tu interés en asistir a PyCon Panamá 2026.
-diff --git a/2026/about.html b/2026/about.html index 07b1667..5859554 100644 --- a/2026/about.html +++ b/2026/about.html @@ -8,12 +8,14 @@ + + diff --git a/2026/agenda.html b/2026/agenda.html index a9433fd..8c1f057 100644 --- a/2026/agenda.html +++ b/2026/agenda.html @@ -8,12 +8,14 @@ + + diff --git a/2026/codigo_conducta.html b/2026/codigo_conducta.html index 7c358c1..bb0e8f1 100644 --- a/2026/codigo_conducta.html +++ b/2026/codigo_conducta.html @@ -8,12 +8,14 @@ + + diff --git a/2026/css/style.css b/2026/css/style.css index b9da7a9..1879957 100644 --- a/2026/css/style.css +++ b/2026/css/style.css @@ -242,6 +242,135 @@ background: linear-gradient(180deg, var(--accent-soft) 0%, transparent 100%); } + +/* ========================================================================== + Forms + ========================================================================== */ + +.container form { + max-width: 820px; + margin: 0 auto; +} + +.form-card { + background: var(--bg); + border-radius: var(--radius-lg); + padding: var(--space-5); + box-shadow: 0 8px 24px rgba(2,6,23,0.06); + border: 1px solid rgba(17,24,39,0.04); +} + +label { + display: block; + margin-bottom: var(--space-3); + font-size: var(--fs-sm); + color: var(--text-secondary); +} + +input[type="text"], +input[type="email"], +input[type="tel"], +input[type="number"], +select, +textarea { + width: 100%; + background: var(--input-bg); + border: 1px solid var(--input-border); + padding: var(--input-padding); + border-radius: var(--input-radius); + font-size: var(--fs-base); + color: var(--text); + box-shadow: none; + transition: box-shadow var(--transition), border-color var(--transition); +} + +textarea { resize: vertical; min-height: 120px; max-height: 400px; } + +input:focus, select:focus, textarea:focus { + outline: none; + box-shadow: 0 0 0 4px rgba(47,140,255,0.12); + border-color: var(--accent); +} + +/* Required field visual hint */ +input:required, textarea:required, select:required { + box-shadow: inset 0 -1px 0 rgba(0,0,0,0.02); +} + +input:invalid, textarea:invalid { + border-color: var(--color-error); +} + +/* Buttons */ +.btn { padding: var(--btn-padding); border-radius: var(--btn-radius); display: inline-flex; align-items: center; gap: 8px; } +.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-color); border: 1px solid transparent; } +.btn-primary:hover { filter: brightness(0.96); } +.btn-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-color); border: 1px solid rgba(17,24,39,0.06); } + +.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } +@media (max-width: 720px) { .form-row { grid-template-columns: 1fr; } } + +label { font-weight: 600; } + +.form-note { font-size: 0.9rem; color: var(--text-secondary); margin-top: calc(var(--space-2) * -1); } + +/* Form utilities inspired by python_panama_website (Bootstrap-like) */ +.form-group { margin-bottom: var(--space-4); } +.form-label { display: block; margin-bottom: var(--space-2); font-weight: 700; } +.form-control { + display: block; + width: 100%; + height: calc(1.5em + 1rem); + padding: 0.5rem 0.75rem; + font-size: var(--fs-base); + line-height: 1.5; + color: var(--text); + background: var(--input-bg); + border: 1px solid var(--input-border); + border-radius: calc(var(--input-radius) - 2px); +} +.form-control::placeholder { color: var(--text-secondary); } +.form-control:focus { box-shadow: 0 0 0 4px rgba(47,140,255,0.12); border-color: var(--accent); } +.form-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%), linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%); background-position: right .75rem center, right .5rem center; background-size: .45rem .45rem, .45rem .45rem; background-repeat: no-repeat; padding-right: 2.5rem; } + +.form-check { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-3); } +.form-check-input { margin-top: .2rem; width: 1.1rem; height: 1.1rem; } +.form-check-label { margin: 0; } + +.alert { padding: var(--space-3); border-radius: var(--radius-sm); margin-bottom: var(--space-4); } +.alert-success { background: rgba(16,185,129,0.06); color: var(--color-success); border-left: 4px solid var(--color-success); } +.alert-danger { background: rgba(220,38,38,0.04); color: var(--color-error); border-left: 4px solid var(--color-error); } + +.btn-lg { padding: 14px 22px; font-size: 1.05rem; } +.btn-outline-primary { background: transparent; border: 1px solid rgba(47,140,255,0.12); color: var(--accent); } + +.form-info-box { display: flex; gap: var(--space-3); align-items: flex-start; margin-top: var(--space-4); padding: var(--space-3); border-radius: var(--radius-sm); background: rgba(47,140,255,0.03); } +.form-info-box i { font-size: 1.2rem; color: var(--accent); } +.data-protection-box { padding: var(--space-3); background: rgba(0,0,0,0.02); border-radius: var(--radius-sm); margin-bottom: var(--space-3); } + +.me-2 { margin-right: .5rem; } + +button[type="submit"], .btn { + cursor: pointer; +} + +.form-message { + margin-top: var(--space-4); + padding: var(--space-3); + border-radius: var(--radius-sm); + background: var(--form-message-bg); + color: var(--text); +} + +.form-message.error { border-left: 4px solid var(--color-error); color: var(--color-error); background: rgba(220,38,38,0.04); } +.form-message.success { border-left: 4px solid var(--color-success); color: var(--color-success); background: rgba(5,150,105,0.04); } + +.form-actions { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-4); } + +@media (max-width: 600px) { + .form-actions { flex-direction: column; align-items: stretch; } +} + .hero-content { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); @@ -806,7 +935,8 @@ } .checkbox-item { - display: flex; + display: grid; + grid-template-columns: 1.1rem minmax(0, 1fr); align-items: flex-start; gap: 0.6rem; color: var(--text-secondary); @@ -814,7 +944,8 @@ } .checkbox-item input { - width: auto; + width: 1.1rem; + height: 1.1rem; margin-top: 0.2rem; } diff --git a/2026/css/variables.css b/2026/css/variables.css index 0160087..0ae19da 100644 --- a/2026/css/variables.css +++ b/2026/css/variables.css @@ -81,4 +81,19 @@ /* --- Foco (accesibilidad) ---------------------------------------------- */ --focus-ring: 3px solid var(--accent); --focus-offset: 3px; + /* --- Form controls ---------------------------------------------------- */ + --input-bg: #ffffff; + --input-border: rgba(17,24,39,0.08); + --input-radius: 10px; + --input-padding: 12px 14px; + --color-error: #dc2626; + --color-success: #059669; + --form-message-bg: rgba(47,140,255,0.03); + /* --- Botones ---------------------------------------------------------- */ + --btn-primary-bg: var(--accent); + --btn-primary-color: var(--text-on-accent); + --btn-secondary-bg: transparent; + --btn-secondary-color: var(--text); + --btn-padding: 10px 18px; + --btn-radius: 10px; } diff --git a/2026/faq.html b/2026/faq.html index 5a05937..46b27ff 100644 --- a/2026/faq.html +++ b/2026/faq.html @@ -8,12 +8,14 @@ + + diff --git a/2026/form/index.html b/2026/form/index.html deleted file mode 100644 index f1c9817..0000000 --- a/2026/form/index.html +++ /dev/null @@ -1,334 +0,0 @@ - - - -
- - -Completa este formulario para dejar tu interés en asistir a PyCon Panamá 2026.
-¿Tienes un tema emocionante sobre Python o tecnología? Postula tu propuesta para PyCon Panamá 2026.
-