diff --git a/.Jules/palette.md b/.Jules/palette.md new file mode 100644 index 0000000..bd8d75b --- /dev/null +++ b/.Jules/palette.md @@ -0,0 +1,5 @@ +## 2025-07-06 - Semantic Navigation and Keyboard Focus + +**Learning:** Replacing JavaScript-driven navigation (`div` with `onclick`) with semantic `` tags not only improves screen reader compatibility but also enables native browser behaviors like opening in new tabs. Pairing this with `:focus-visible` styles that mirror hover effects ensures a consistent and accessible experience for keyboard users. + +**Action:** Always prefer semantic `` tags for navigation containers. When converting containers to links, ensure nested interactive elements are changed to non-interactive spans to avoid invalid nested links, and apply `:focus-visible` to the container. diff --git a/index.html b/index.html index 5cf0f32..ec9c62d 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + @@ -18,7 +18,7 @@

Interactive Sketches

-
+

Circle Matrix (Image → Particles)

Transform an image into a dynamic field of circles. @@ -26,10 +26,10 @@

Circle Matrix (Image → Particles)



Concept: Image as a system of autonomous particles.

- -
+ Open Sketch + -
+

The Weight of Words (Voice → Physics)

Spoken words are converted into letters that move and fall under gravity. @@ -37,8 +37,8 @@

The Weight of Words (Voice → Physics)



Concept: Speech transformed into matter.

- -
+ Open Sketch +
diff --git a/proyecto1/proyecto1.html b/proyecto1/proyecto1.html index c22da09..7f00f38 100644 --- a/proyecto1/proyecto1.html +++ b/proyecto1/proyecto1.html @@ -29,9 +29,9 @@

Circle Matrix

- + diff --git a/proyecto1/style.css b/proyecto1/style.css index b562aca..f6c02fc 100644 --- a/proyecto1/style.css +++ b/proyecto1/style.css @@ -108,14 +108,21 @@ input[type="file"] { -webkit-backdrop-filter: blur(16px); transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); z-index: 100; + text-decoration: none; + outline: none; } -.back-btn:hover { +.back-btn:hover, +.back-btn:focus-visible { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); border-color: var(--accent-color); } +.back-btn:focus-visible { + box-shadow: 0 0 0 2px var(--accent-color); +} + /* MOBILE */ @media (max-width: 600px) { .ui-panel { diff --git a/proyecto2/proyecto2.html b/proyecto2/proyecto2.html index e984f76..31d1479 100644 --- a/proyecto2/proyecto2.html +++ b/proyecto2/proyecto2.html @@ -15,9 +15,9 @@ - +
diff --git a/proyecto2/style.css b/proyecto2/style.css index fd6dfbb..d87fa7c 100644 --- a/proyecto2/style.css +++ b/proyecto2/style.css @@ -143,14 +143,21 @@ input[type="range"]::-webkit-slider-thumb { -webkit-backdrop-filter: blur(16px); transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); z-index: 1000; + text-decoration: none; + outline: none; } -.back-btn:hover { +.back-btn:hover, +.back-btn:focus-visible { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); border-color: var(--accent-color); } +.back-btn:focus-visible { + box-shadow: 0 0 0 2px var(--accent-color); +} + /* MOBILE */ @media (max-width: 600px) { #gui { diff --git a/script.js b/script.js index 56bdf15..6baab62 100644 --- a/script.js +++ b/script.js @@ -1,16 +1,4 @@ -window.onload = function () { - const routes = { - "btn-p1": "proyecto1/proyecto1.html", - "btn-p2": "proyecto2/proyecto2.html" - }; - - Object.keys(routes).forEach(id => { - const element = document.getElementById(id); - - if (element) { - element.onclick = () => { - window.location.href = routes[id]; - }; - } - }); -}; +// Navigation is now handled by semantic tags in index.html +window.onload = function () { + console.log("Main page loaded."); +}; diff --git a/style.css b/style.css index f563ad8..a806ff0 100644 --- a/style.css +++ b/style.css @@ -66,6 +66,8 @@ header p { /* CARD */ .card { + text-decoration: none; + outline: none; background: var(--card-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); @@ -100,12 +102,17 @@ header p { z-index: 0; } -.card:hover { +.card:hover, +.card:focus-visible { transform: translateY(-8px); border-color: rgba(56, 189, 248, 0.4); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); } +.card:focus-visible { + box-shadow: 0 0 0 2px var(--accent-color), 0 20px 40px rgba(0, 0, 0, 0.3); +} + .card > * { position: relative; z-index: 1; @@ -147,7 +154,8 @@ header p { border: 1px solid rgba(255, 255, 255, 0.1); } -.card:hover .btn { +.card:hover .btn, +.card:focus-within .btn { background: var(--accent-gradient); border-color: transparent; box-shadow: 0 8px 16px rgba(56, 189, 248, 0.2);