circle · chain · Haiku 4.5 · step 006 of 64

+86 / -83 lines

        font-size: 14px;        text-align: center;+       padding: 20px;      }      .circle-container {        cursor: pointer;-       transition: transform 0.3s ease;        border: none;        background: none;        padding: 0;+       position: relative;+       will-change: transform;      }      .circle-container:hover,-     .circle-container:focus {+     .circle-container:focus-visible {        transform: scale(1.08);+     }+     .circle-container:focus {        outline: none;      }⋯ line 52        width: min(400px, 80vw);        height: min(400px, 80vw);-       filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));        display: block;-       transition: filter 0.3s ease;+       animation: fadeIn 0.6s ease-out;      }      circle {⋯ line 59        stroke: rgba(255, 255, 255, 0.2);        stroke-width: 2;-       transition: fill 0.3s ease, r 0.3s ease, stroke 0.3s ease;        animation: pulse 3s ease-in-out infinite;+       filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));+       transition: fill 0.3s ease, r 0.3s ease, stroke 0.3s ease, filter 0.3s ease;      }      .circle-container:hover circle,-     .circle-container:focus circle {+     .circle-container:focus-visible circle {        fill: #e8f4f8;        r: 205;⋯ line 71      .circle-container.active circle {        fill: #ffd700;-       animation: pulse-active 0.6s ease-in-out;        stroke: rgba(255, 215, 0, 0.3);+       animation: pulse-active 0.6s ease-in-out;+       filter: drop-shadow(0 20px 40px rgba(255, 215, 0, 0.5));      }      .circle-container.active:hover circle {        fill: #ffed4e;      }-     .circle-container.active svg {-       filter: drop-shadow(0 20px 40px rgba(255, 215, 0, 0.5));+     .color-modes {+       --color-pink: #ff6b9d;+       --color-teal: #4ecdc4;+       --color-mint: #95e1d3;      }      .circle-container.color-mode-1 circle {-       fill: #ff6b9d;+       fill: var(--color-pink);+       filter: drop-shadow(0 20px 40px rgba(255, 107, 157, 0.3));      }-     .circle-container.color-mode-1.active svg {+     .circle-container.color-mode-1.active circle {        filter: drop-shadow(0 20px 40px rgba(255, 107, 157, 0.5));      }      .circle-container.color-mode-2 circle {-       fill: #4ecdc4;+       fill: var(--color-teal);+       filter: drop-shadow(0 20px 40px rgba(78, 205, 196, 0.3));      }-     .circle-container.color-mode-2.active svg {+     .circle-container.color-mode-2.active circle {        filter: drop-shadow(0 20px 40px rgba(78, 205, 196, 0.5));      }      .circle-container.color-mode-3 circle {-       fill: #95e1d3;+       fill: var(--color-mint);+       filter: drop-shadow(0 20px 40px rgba(149, 225, 211, 0.3));      }-     .circle-container.color-mode-3.active svg {+     .circle-container.color-mode-3.active circle {        filter: drop-shadow(0 20px 40px rgba(149, 225, 211, 0.5));      }      .hint {        font-size: 12px;-       opacity: 0.8;+       opacity: 0.85;        transition: opacity 0.3s ease;        letter-spacing: 0.5px;+       max-width: 90%;      }-     .hint.show-shortcuts {-       opacity: 1;-     }      .circle-container:hover ~ .hint,-     .circle-container:focus ~ .hint {+     .circle-container:focus-visible ~ .hint {        opacity: 1;      }      .mode-indicator {        font-size: 10px;-       opacity: 0.6;+       opacity: 0;        margin-top: 8px;        letter-spacing: 1px;        text-transform: uppercase;        transition: opacity 0.3s ease;+       height: 16px;      }      .mode-indicator.visible {-       opacity: 1;+       opacity: 0.9;      }      @keyframes pulse {⋯ line 140        to { opacity: 1; transform: scale(1); }      }-     .circle-container svg {-       animation: fadeIn 0.6s ease-out;+     @media (max-width: 480px) {+       body {+         gap: 16px;+       }+       .hint {+         font-size: 11px;+       }+       .mode-indicator {+         font-size: 9px;+       }      }+     @media (prefers-reduced-motion: reduce) {+       * {+         animation: none !important;+         transition: none !important;+       }+     }    </style>  </head>  <body>-   <div style="text-align: center;">-     <button class="circle-container" id="decorative-circle" aria-label="Interactive circle - click to activate, double-click to change color, press space to toggle or C for color">-       <svg viewBox="0 0 400 400" role="presentation">+   <main style="text-align: center;">+     <button class="circle-container" id="decorative-circle" aria-label="Interactive circle - click to toggle">+       <svg viewBox="0 0 400 400" aria-hidden="true">          <circle cx="200" cy="200" r="200"/>        </svg>      </button>-     <div class="mode-indicator" id="mode-indicator"></div>-   </div>-   <div class="hint" id="hint-text">Click to activate • Double-click for color</div>+     <div class="mode-indicator" id="mode-indicator" aria-live="polite" aria-atomic="true"></div>+   </main>+   <div class="hint" id="hint-text" role="status" aria-live="polite">Click to activate • Double-click to change color</div>      <script>      const STORAGE_KEY = 'circle-state';      const COLOR_MODES = ['default', 'color-mode-1', 'color-mode-2', 'color-mode-3'];-     const COLORS = {-       default: 'Default White',-       'color-mode-1': 'Pink',-       'color-mode-2': 'Teal',-       'color-mode-3': 'Mint'-     };+     const COLOR_NAMES = ['Default White', 'Pink', 'Teal', 'Mint'];        const circle = document.getElementById('decorative-circle');⋯ line 179      const modeIndicator = document.getElementById('mode-indicator');  -     let state = {-       active: false,-       colorMode: 0-     };+     let state = { active: false, colorMode: 0 };  -     function saveState() {-       localStorage.setItem(STORAGE_KEY, JSON.stringify(state));-     }+     const saveState = () => localStorage.setItem(STORAGE_KEY, JSON.stringify(state));  -     function loadState() {+     const loadState = () => {        try {          const saved = localStorage.getItem(STORAGE_KEY);-         if (saved) {-           state = JSON.parse(saved);-           applyState();-         }+         if (saved) state = JSON.parse(saved);        } catch (e) {-         console.warn('Failed to load saved state');+         console.warn('Failed to load state');        }-     }+       applyState();+     };  -     function applyState() {+     const applyState = () => {        circle.classList.remove('active', ...COLOR_MODES);-       if (state.active) {-         circle.classList.add('active');-       }-       if (state.colorMode > 0) {-         circle.classList.add(COLOR_MODES[state.colorMode]);-       }+       if (state.active) circle.classList.add('active');+       if (state.colorMode > 0) circle.classList.add(COLOR_MODES[state.colorMode]);        updateUI();-     }+     };  -     function toggleActive() {+     const toggleActive = () => {        state.active = !state.active;        applyState();        saveState();-     }+     };  -     function cycleColor() {+     const cycleColor = () => {        state.colorMode = (state.colorMode + 1) % COLOR_MODES.length;        state.active = true;        applyState();        saveState();-     }+     };  -     function resetState() {+     const resetState = () => {        state = { active: false, colorMode: 0 };        applyState();        saveState();-     }+     };  -     function updateHint() {+     const updateHint = () => {        if (state.active) {-         hint.textContent = 'Active! • Double-click or press C for color • Press R to reset';+         hint.textContent = 'Active! • Double-click or press C to cycle color • Press R to reset';        } else {-         hint.textContent = 'Click to activate • Double-click to change color';+         hint.textContent = 'Click to activate • Double-click to change color • C to cycle • R to reset';        }-     }+     };  -     function updateModeIndicator() {+     const updateModeIndicator = () => {        if (state.active && state.colorMode > 0) {-         modeIndicator.textContent = COLORS[COLOR_MODES[state.colorMode]];+         modeIndicator.textContent = COLOR_NAMES[state.colorMode];          modeIndicator.classList.add('visible');        } else {          modeIndicator.classList.remove('visible');        }-     }+     };  -     function updateUI() {+     const updateUI = () => {        updateHint();        updateModeIndicator();-     }+     };        circle.addEventListener('click', toggleActive);-       circle.addEventListener('dblclick', (e) => {        e.preventDefault();⋯ line 248        circle.addEventListener('keydown', (e) => {-       if (e.key === ' ' || e.key === 'Enter') {+       const key = e.key.toLowerCase();+       if (key === ' ' || key === 'enter') {          e.preventDefault();          toggleActive();-       } else if (e.key === 'c' || e.key === 'C') {+       } else if (key === 'c') {          e.preventDefault();          cycleColor();-       } else if (e.key === 'r' || e.key === 'R') {+       } else if (key === 'r') {          e.preventDefault();          resetState();⋯ line 262        circle.addEventListener('mouseenter', () => {-       hint.classList.add('show-shortcuts');        if (!state.active) {-         hint.textContent = 'Click to activate • Double-click for color • C: color • R: reset';+         hint.textContent = 'Click to activate • Double-click or C to cycle color • R to reset';        }      });  -     circle.addEventListener('mouseleave', () => {-       hint.classList.remove('show-shortcuts');-       updateHint();-     });+     circle.addEventListener('mouseleave', updateHint);        loadState();