pigui/gureametsabilagun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tema: nuevos botones, campos, casillas, tarjetas, selector, interruptor, cabecera y pie

Browse Source 
- Botones: borde que se dibuja al pasar el ratón o con el teclado (color según variante) y sombra.
- Campos: subrayados con etiqueta flotante y degradado principal → acento al enfocar; flecha
  propia en los desplegables. Formularios de contacto, cuestionario y finales felices adaptados.
- Casillas: marca «a mano» que se dibuja al marcarlas (ga_checkmark()), accesibles con teclado.
- Tarjetas de animales y finales felices: marco de 2 px con resplandor de acento en la esquina.
- Selector segmentado (.ga-segmented) con píldora deslizante; se usa en las pestañas Perros / Gatos
  y sirve también para grupos de radios.
- Interruptor (.ga-toggle, ga_toggle_ui()) listo para usar.
- Cabecera translúcida con borde al hacer scroll, enlaces en píldora, desplegable animado con
  descripción de cada elemento y fondo oscurecido mientras está abierto.
- Pie: nombre gigante en bajorrelieve que se descubre al final de la página (opción en el
  personalizador, «Bilagun» por defecto).
- Versión del tema 2.3.0.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Josep Piguillem
2026-09-27 15:11:17 +02:00
parent 83d1298dda
commit 9a6bcd56e5
9 changed files with 320 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
wp-content/mu-plugins/gure-ametsa/forms.php
View File

@@ -18,6 +18,21 @@ function ga_contact_reasons() {
);
}
/** Casilla dibujada: se coloca justo después del <input type="checkbox"> (la animación está en el CSS del tema). */
function ga_checkmark() {
return '<svg class="ga-check" viewBox="0 0 95 95" aria-hidden="true" focusable="false"><rect x="30" y="20" width="50" height="50" rx="9"/>'
. '<path transform="translate(0,-952.36222)" d="m 56,963 c -102,122 6,9 7,9 17,-5 -66,69 -38,52 122,-77 -7,14 18,4 29,-11 45,-43 23,-4"/></svg>';
}
/**
* Interruptor: se coloca justo después del checkbox, dentro de su etiqueta:
* <label class="ga-toggle"><input type="checkbox" role="switch" name="…"><?php echo ga_toggle_ui(); ?><span>Texto</span></label>
*/
function ga_toggle_ui() {
return '<span class="ga-toggle__switch" aria-hidden="true"><span class="ga-toggle__track"><i></i><i></i><i></i><i></i><i></i></span>'
. '<span class="ga-toggle__thumb"><span class="ga-toggle__icon"></span></span></span>';
}
/** Texto de confirmación tras enviar. */
function ga_confirmation_text( $is_animal ) {
return $is_animal
@@ -61,34 +76,37 @@ add_shortcode( 'ga_contacto', function ( $atts ) {
<div class="ga-hp" aria-hidden="true"><label>No rellenar <input type="text" name="web" tabindex="-1" autocomplete="off"></label></div>
<div class="ga-form__row">
<label><?php ga_e( 'Nombre', 'Izena' ); ?> *<input type="text" name="nombre" required autocomplete="name"></label>
<label><?php ga_e( 'Correo electrónico', 'Posta elektronikoa' ); ?> *<input type="email" name="email" required autocomplete="email"></label>
<label class="ga-field"><input type="text" name="nombre" required autocomplete="name" placeholder=" "><span><?php ga_e( 'Nombre', 'Izena' ); ?> *</span></label>
<label class="ga-field"><input type="email" name="email" required autocomplete="email" placeholder=" "><span><?php ga_e( 'Correo electrónico', 'Posta elektronikoa' ); ?> *</span></label>
</div>
<div class="ga-form__row">
<label><?php ga_e( 'Teléfono', 'Telefonoa' ); ?><?php echo $is_animal ? ' *' : ''; ?><input type="tel" name="telefono" autocomplete="tel"<?php echo $is_animal ? ' required' : ''; ?>></label>
<label class="ga-field"><input type="tel" name="telefono" autocomplete="tel" placeholder=" "<?php echo $is_animal ? ' required' : ''; ?>><span><?php ga_e( 'Teléfono', 'Telefonoa' ); ?><?php echo $is_animal ? ' *' : ''; ?></span></label>
<?php if ( ! $is_animal ) : ?>
<label><?php ga_e( 'Motivo', 'Arrazoia' ); ?>
<label class="ga-field ga-field--select">
<select name="motivo">
<?php foreach ( ga_contact_reasons() as $value => $label ) : ?>
<option value="<?php echo esc_attr( $value ); ?>" <?php selected( $preselect, $value ); ?>><?php echo esc_html( $label ); ?></option>
<?php endforeach; ?>
</select>
<span><?php ga_e( 'Motivo', 'Arrazoia' ); ?></span>
</label>
<?php endif; ?>
</div>
<?php if ( ! $is_animal ) : ?>
<label class="ga-form__visit"<?php echo 'visita' === $preselect ? '' : ' hidden'; ?>><?php ga_e( '¿Qué día y hora te vendría bien?', 'Zein egun eta ordu komeni zaizu?' ); ?>
<label class="ga-field ga-form__visit"<?php echo 'visita' === $preselect ? '' : ' hidden'; ?>>
<input type="text" name="preferencia" placeholder="<?php echo esc_attr( ga__( 'Por ejemplo: martes o jueves por la tarde', 'Adibidez: asteartea edo osteguna arratsaldez' ) ); ?>">
<span><?php ga_e( '¿Qué día y hora te vendría bien?', 'Zein egun eta ordu komeni zaizu?' ); ?></span>
</label>
<?php endif; ?>
<?php if ( $animal_id && ! $is_animal ) : ?>
<p class="ga-form__animal"><?php echo esc_html( ga__( 'Animal: ', 'Animalia: ' ) . get_the_title( $animal_id ) ); ?></p>
<?php endif; ?>
<label><?php ga_e( 'Mensaje', 'Mezua' ); ?><?php echo $is_animal ? ' (' . esc_html( ga__( 'opcional', 'aukerakoa' ) ) . ')' : ' *'; ?>
<textarea name="mensaje" rows="<?php echo $is_animal ? 4 : 6; ?>"<?php echo $is_animal ? '' : ' required'; ?>></textarea>
<label class="ga-field">
<textarea name="mensaje" rows="<?php echo $is_animal ? 4 : 6; ?>" placeholder=" "<?php echo $is_animal ? '' : ' required'; ?>></textarea>
<span><?php ga_e( 'Mensaje', 'Mezua' ); ?><?php echo $is_animal ? ' (' . esc_html( ga__( 'opcional', 'aukerakoa' ) ) . ')' : ' *'; ?></span>
</label>
<label class="ga-form__check">
<input type="checkbox" name="privacidad" value="1" required>
<input type="checkbox" name="privacidad" value="1" required><?php echo ga_checkmark(); // SVG estático. ?>
<span>
<?php if ( 'eu' === ga_lang() ) : ?>
<a href="<?php echo esc_url( $privacy ); ?>" target="_blank">Pribatutasun-politika</a> irakurri eta onartzen dut. *

12
wp-content/mu-plugins/gure-ametsa/questionnaire.php
View File

@@ -36,14 +36,14 @@ add_shortcode( 'ga_cuestionario', function () {
<fieldset>
<legend><?php ga_e( 'Tus datos', 'Zure datuak' ); ?></legend>
<div class="ga-form__row">
<label><?php ga_e( 'Nombre y apellidos', 'Izen-abizenak' ); ?> *<input type="text" name="nombre" required autocomplete="name"></label>
<label><?php ga_e( 'Correo electrónico', 'Posta elektronikoa' ); ?> *<input type="email" name="email" required autocomplete="email"></label>
<label class="ga-field"><input type="text" name="nombre" required autocomplete="name" placeholder=" "><span><?php ga_e( 'Nombre y apellidos', 'Izen-abizenak' ); ?> *</span></label>
<label class="ga-field"><input type="email" name="email" required autocomplete="email" placeholder=" "><span><?php ga_e( 'Correo electrónico', 'Posta elektronikoa' ); ?> *</span></label>
</div>
<div class="ga-form__row">
<label><?php ga_e( 'Teléfono', 'Telefonoa' ); ?> *<input type="tel" name="telefono" required autocomplete="tel"></label>
<label><?php ga_e( 'Localidad', 'Herria' ); ?><input type="text" name="localidad" autocomplete="address-level2"></label>
<label class="ga-field"><input type="tel" name="telefono" required autocomplete="tel" placeholder=" "><span><?php ga_e( 'Teléfono', 'Telefonoa' ); ?> *</span></label>
<label class="ga-field"><input type="text" name="localidad" autocomplete="address-level2" placeholder=" "><span><?php ga_e( 'Localidad', 'Herria' ); ?></span></label>
</div>
<label><?php ga_e( 'Animal por el que te interesas', 'Interesatzen zaizun animalia' ); ?><input type="text" name="animal" value="<?php echo esc_attr( $animal ); ?>"></label>
<label class="ga-field"><input type="text" name="animal" value="<?php echo esc_attr( $animal ); ?>" placeholder=" "><span><?php ga_e( 'Animal por el que te interesas', 'Interesatzen zaizun animalia' ); ?></span></label>
</fieldset>
<fieldset>
@@ -56,7 +56,7 @@ add_shortcode( 'ga_cuestionario', function () {
</fieldset>
<label class="ga-form__check">
<input type="checkbox" name="privacidad" value="1" required>
<input type="checkbox" name="privacidad" value="1" required><?php echo ga_checkmark(); // SVG estático. ?>
<span><?php printf( wp_kses( ga__( 'He leído y acepto la <a href="%s" target="_blank">política de privacidad</a>. *', '<a href="%s" target="_blank">Pribatutasun-politika</a> irakurri eta onartzen dut. *' ), array( 'a' => array( 'href' => array(), 'target' => array() ) ) ), esc_url( $privacy ) ); ?></span>
</label>
<p class="ga-form__hint"><?php ga_e( 'Lo que escribes se guarda en este navegador hasta que lo envíes.', 'Idazten duzuna nabigatzaile honetan gordetzen da bidali arte.' ); ?></p>

12
wp-content/mu-plugins/gure-ametsa/stories.php
View File

@@ -72,15 +72,15 @@ add_shortcode( 'ga_final_feliz', function () {
<?php wp_nonce_field( 'ga_final_feliz', 'ga_nonce' ); ?>
<div class="ga-hp" aria-hidden="true"><label>No rellenar <input type="text" name="web" tabindex="-1" autocomplete="off"></label></div>
<div class="ga-form__row">
<label><?php ga_e( 'Nombre del animal', 'Animaliaren izena' ); ?> *<input type="text" name="animal" required maxlength="80"></label>
<label><?php ga_e( 'Vuestro nombre', 'Zuen izena' ); ?> *<input type="text" name="familia" required maxlength="80"></label>
<label class="ga-field"><input type="text" name="animal" required maxlength="80" placeholder=" "><span><?php ga_e( 'Nombre del animal', 'Animaliaren izena' ); ?> *</span></label>
<label class="ga-field"><input type="text" name="familia" required maxlength="80" placeholder=" "><span><?php ga_e( 'Vuestro nombre', 'Zuen izena' ); ?> *</span></label>
</div>
<label><?php ga_e( 'Correo electrónico (no se publica)', 'Posta elektronikoa (ez da argitaratzen)' ); ?> *<input type="email" name="email" required></label>
<label><?php ga_e( '¿Cómo está ahora?', 'Nola dago orain?' ); ?> *<textarea name="texto" rows="5" required maxlength="800"></textarea></label>
<label class="ga-field"><input type="email" name="email" required placeholder=" "><span><?php ga_e( 'Correo electrónico (no se publica)', 'Posta elektronikoa (ez da argitaratzen)' ); ?> *</span></label>
<label class="ga-field"><textarea name="texto" rows="5" required maxlength="800" placeholder=" "></textarea><span><?php ga_e( '¿Cómo está ahora?', 'Nola dago orain?' ); ?> *</span></label>
<label><?php ga_e( 'Una foto (JPG, PNG o WebP, máx. 5 MB)', 'Argazki bat (JPG, PNG edo WebP, gehienez 5 MB)' ); ?><input type="file" name="foto" accept="image/jpeg,image/png,image/webp"></label>
<label class="ga-form__check"><input type="checkbox" name="publicar" value="1" required>
<label class="ga-form__check"><input type="checkbox" name="publicar" value="1" required><?php echo ga_checkmark(); // SVG estático. ?>
<span><?php ga_e( 'Autorizo a Bilagun a publicar este texto y la foto en su web y redes. *', 'Bilaguni baimena ematen diot testu hau eta argazkia bere webgunean eta sareetan argitaratzeko. *' ); ?></span></label>
<label class="ga-form__check"><input type="checkbox" name="privacidad" value="1" required>
<label class="ga-form__check"><input type="checkbox" name="privacidad" value="1" required><?php echo ga_checkmark(); // SVG estático. ?>
<span><?php
printf(
wp_kses( ga__( 'He leído y acepto la <a href="%s" target="_blank">política de privacidad</a>. *', '<a href="%s" target="_blank">Pribatutasun-politika</a> irakurri eta onartzen dut. *' ), array( 'a' => array( 'href' => array(), 'target' => array() ) ) ),