Skip to content

🎨 Palette: [UX improvement] Interaction & Accessibility Polish #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LVT-ENG wants to merge 1 commit into
base: main
Choose a base branch
from
Open

🎨 Palette: [UX improvement] Interaction & Accessibility Polish #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ <h2 style="text-align: center; margin-bottom: 4rem;">P.A.U. Divineo AI</h2>
</div>
<button type="submit" class="cta-button" style="margin-top: 1rem;">Preguntar a P.A.U.</button>
</form>
<div id="jules-result" class="jules-result" style="display:none; margin-top: 4rem; padding: 2.5rem;">
<div id="jules-result" class="jules-result" aria-live="polite" aria-atomic="true" style="display:none; margin-top: 4rem; padding: 2.5rem;">
<h3 style="margin-top: 0; color: #C5A46D; margin-bottom: 1.5rem;">Análisis de P.A.U.:</h3>
<p id="recommendation-text" style="white-space: pre-wrap; line-height: 1.8; font-weight: 300;"></p>
</div>
Expand All @@ -104,11 +104,11 @@ <h2 style="margin-bottom: 1rem;">Divineo Studio</h2>
<div class="product-selector">
<h3>Catálogo Shopify</h3>
<div class="product-grid">
<div class="product-item selected" onclick="selectProduct('BALMAIN_SS26_SLIM')" style="border-color: #C5A46D;">
<div class="product-item selected" role="button" tabindex="0" aria-label="Seleccionar Balmain Slim-Fit Jeans - 1.290 €" onclick="selectProduct('BALMAIN_SS26_SLIM')" style="border-color: #C5A46D;">
<div class="product-placeholder">BALMAIN SLIM</div>
<p style="font-size: 0.8rem; text-align: center; color: #C5A46D;">1.290 €</p>
</div>
<div class="product-item" onclick="selectProduct('LEVIS_510_STRETCH')">
<div class="product-item" role="button" tabindex="0" aria-label="Seleccionar Levis 510 Skinny - 110 €" onclick="selectProduct('LEVIS_510_STRETCH')">
<div class="product-placeholder">LEVIS 510</div>
<p style="font-size: 0.8rem; text-align: center; color: #C5A46D;">110 €</p>
</div>
Expand All @@ -119,9 +119,9 @@ <h3>Catálogo Shopify</h3>
</section>

<!-- Private Pass Modal -->
<div id="private-pass-modal" class="modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.9); z-index:2000; align-items:center; justify-content:center;">
<div id="private-pass-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.9); z-index:2000; align-items:center; justify-content:center;">
<div class="modal-content" style="background:#141619; border:1px solid #C5A46D; padding:3rem; max-width:500px; text-align:center;">
<h3 style="color:#C5A46D; margin-bottom:1.5rem;">PASE PRIVADO SOLICITADO</h3>
<h3 id="modal-title" style="color:#C5A46D; margin-bottom:1.5rem;">PASE PRIVADO SOLICITADO</h3>
<p style="color:#F5EFE6; opacity:0.7; margin-bottom:2rem;">Contenido restringido para Curadores del Búnker. Por favor, introduce tu credencial de acceso.</p>
<input type="password" id="private-pass-input" placeholder="Credential ID" style="width:100%; padding:1rem; background:#0d0e10; border:1px solid rgba(255,255,255,0.1); color:#F5EFE6; margin-bottom:2rem;">
<div style="display:flex; gap:1rem; justify-content:center;">
Expand Down
20 changes: 19 additions & 1 deletion js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,13 +80,28 @@ class TryOnYouBunker {
document.querySelectorAll('.product-item').forEach(item => {
const productId = item.getAttribute('onclick')?.match(/'([^']+)'/)?.[1];
if (productId) {
item.addEventListener('click', (e) => {
const selectFn = (e) => {
e.preventDefault();
this.selectGarment(productId, item);
};
item.addEventListener('click', selectFn);
item.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') selectFn(e);
});
item.removeAttribute('onclick');
}
});

// Modal interactions
const passInput = document.getElementById('private-pass-input');
if (passInput) {
passInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
e.preventDefault();
this.verifyPrivatePass();
}
});
}
}

handleNavClick(event) {
Expand Down Expand Up @@ -210,6 +225,7 @@ class TryOnYouBunker {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
Expand All @@ -225,6 +241,8 @@ class TryOnYouBunker {
requestPrivatePass() {
const modal = document.getElementById('private-pass-modal');
modal.style.display = 'flex';
const input = document.getElementById('private-pass-input');
if (input) setTimeout(() => input.focus(), 100);
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Using a setTimeout with a fixed 100ms delay to focus the input can be unreliable and may introduce a noticeable lag. Since the modal's visibility is toggled via the display property, there are no transitions to wait for. A more robust approach is to use requestAnimationFrame to focus the element on the next paint, ensuring it's visible without an arbitrary delay.

Suggested change
if (input) setTimeout(() => input.focus(), 100);
if (input) requestAnimationFrame(() => input.focus());

}

closePrivatePass() {
Expand Down
Loading